/* styles.css — classic System 7 look: Chicago-ish UI, striped title bars,
   platinum menus, letterboxed 4:3 "screen". */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #7b7f88;
  background-image: radial-gradient(rgba(0,0,0,.12) 1px, transparent 1px);
  background-size: 4px 4px;
  font-family: "Geneva", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #111; overflow: hidden; user-select: none;
}

#desktop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }

/* the Mac "screen": a 4:3 window that fits the viewport */
#mac {
  position: relative;
  width: min(98vw, calc(98vh * 4 / 3));
  height: min(98vh, calc(98vw * 3 / 4));
  background: #000;
  border: 1px solid #000;
  box-shadow: 0 0 0 2px #b7bbc2, 4px 6px 0 rgba(0,0,0,.35);
  display: grid;
  /* boot default = the welcome screen's layout (no menu bar, no panel): the JS
     panel-mode logic sets inline rows once a sortie starts — keeping the CSS
     default identical kills the first-paint flash of bar+panel */
  grid-template-rows: 0 1fr 0;
  overflow: hidden;
}
/* Simulation mode: drop the 4:3 letterbox and fill the whole browser window */
#mac.simfull { width: 100vw; height: 100vh; border: 0; box-shadow: none; }

/* ---- menu bar ---- */
#menubar {
  display: flex; align-items: stretch; justify-content: space-between;
  background: #e6e8ec;
  border-bottom: 1px solid #000;
  font-size: 12px; z-index: 40;
  visibility: hidden;   /* hidden until in the plane; JS toggles inline */
}
#menus { display: flex; align-items: stretch; }
.menu-title {
  display: flex; align-items: center; padding: 0 9px; cursor: default; height: 21px;
  font-weight: 600; letter-spacing: .01em;
}
.menu-title:hover, .menu-title.active { background: #000; color: #fff; }
.menu-title.apple { font-size: 14px; padding: 0 10px; }

#menubar-right { display: flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 12px; }
.mb-icon { opacity: .8; }

.menu-drop {
  position: fixed; min-width: 190px; background: #fff;
  border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,.35);
  z-index: 100; padding: 2px 0; font-size: 12px;
}
.menu-item { display: flex; align-items: center; gap: 6px; padding: 2px 12px 2px 4px; cursor: default; }
.menu-item:hover { background: #000; color: #fff; }
.menu-item.disabled { color: #aaa; }
.menu-item.disabled:hover { background: #fff; color: #aaa; }
.mi-mark { width: 12px; text-align: center; }
.mi-label { flex: 1; }
.mi-key { color: #666; margin-left: 18px; }
.menu-item:hover .mi-key { color: #ccc; }
.menu-sep { height: 1px; background: #ccc; margin: 3px 0; }

/* ---- stage (3D + overlays) ---- */
#stage { position: relative; overflow: hidden; background: #79b3e6; }
#babylon { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---- instrument panel ---- */
#panel { width: 100%; height: 100%; display: block; background: #31353b; image-rendering: auto; }

/* ---- boot screen ---- */
#bootscreen {
  position: absolute; inset: 0; z-index: 30;
  background: radial-gradient(circle at 50% 35%, #1c3a5e, #0a1626 80%);
  display: flex; align-items: center; justify-content: center; color: #eaf2fb; text-align: center;
}
.boot-inner { max-width: 80%; }
.boot-title { font-weight: 800; font-size: 40px; letter-spacing: .06em; line-height: 1; }
.boot-title span { display: block; font-size: 17px; font-weight: 600; letter-spacing: .28em; margin-top: 6px; color: #ffcf4a; }
.boot-sub { margin: 14px 0 22px; font-size: 13px; color: #a9c4de; }
.boot-tip { margin-top: 22px; font-size: 11.5px; color: #8fb0cf; line-height: 1.7; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ---- buttons ---- */
.btn {
  font-family: inherit; font-size: 12px; padding: 4px 15px;
  background: linear-gradient(#fbfbfd, #e6e8ee);
  border: 1px solid #868c96; border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 1px 1px 2px rgba(0,0,0,.2);
  cursor: pointer; color: #1a1c22; transition: background .1s, box-shadow .1s;
}
.btn:hover { background: linear-gradient(#ffffff, #eef0f5); }
.btn:active { background: linear-gradient(#3a6ea5, #244f7c); color: #fff; box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }
.btn.default { border-color: #2b5a86; border-width: 2px; font-weight: 700; }

/* ---- dialogs ---- */
#dialogs { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.modal-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto; background: rgba(8,14,22,.24); }
.dlg {
  background: #eef0f3; border: 1px solid #454a53; border-radius: 10px;
  box-shadow: 0 14px 38px rgba(0,0,0,.46), 0 2px 6px rgba(0,0,0,.32);
  max-width: 94%; max-height: 92%; overflow: hidden; font-size: 12px;
  display: flex; flex-direction: column;   /* title fixed, body scrolls -> buttons stay reachable */
}
.dlg-body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
.dlg-title {
  display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px;
  border-bottom: 1px solid #b6bbc3; border-radius: 10px 10px 0 0;
  background: linear-gradient(#f7f8fa, #d6dae1); user-select: none;
}
.dlg-name { padding: 0 10px; font-weight: 700; font-size: 12px; color: #23272e; letter-spacing: .2px; }
.dlg-stripes { flex: 1; height: 9px; border-radius: 2px; background: repeating-linear-gradient(#9aa1ab 0 1px, transparent 1px 3px); opacity: .5; }
.dlg-body { padding: 14px 16px; position: relative; background: #eef0f3; }
.dlg-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.hs-table .r-del { width: 16px; text-align: center; color: #c14634; font-weight: 700; cursor: pointer; opacity: 0; text-decoration: none; user-select: none; }
.hs-table tr:hover .r-del { opacity: .85; }
.hs-table .r-del:hover { opacity: 1; color: #e23a26; }

/* mission select */
.mission-cols { display: flex; gap: 40px; justify-content: center; margin: 6px 0 12px; }
.mrow { display: block; padding: 3px 0; cursor: pointer; }
.mopt { border-top: 1px solid #bbb; padding-top: 10px; }
.fuel-row, .bomb-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.fuel-row input[type=range] { flex: 1; }
.bomb-row label { display: inline-flex; align-items: center; gap: 3px; }
.mstar { position: absolute; width: 34px; height: 34px; top: 12px;
  background: radial-gradient(#fff 30%, transparent 31%); }
.mstar::before { content: "★"; position: absolute; inset: 0; text-align: center; font-size: 30px; color: #16233a; line-height: 34px; }
.mstar-l { left: 14px; } .mstar-r { right: 14px; }

/* briefing */
.brief-head { font-weight: 800; font-size: 15px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #bbb; padding-bottom: 6px; }
.brief-sq { font-size: 11px; font-weight: 600; color: #555; }
.brief-text { white-space: pre-wrap; font-family: inherit; font-size: 12px; line-height: 1.5; margin: 10px 0; }
.brief-load { font-weight: 700; color: #234; }

/* map */
.mapc { border: 1px solid #000; background: #8fc9e8; display: block; margin: 0 auto; image-rendering: auto; }
.map-legend { display: flex; gap: 12px; justify-content: center; margin: 8px 0 4px; font-size: 11px; flex-wrap: wrap; }
.map-legend b { font-family: monospace; }
.map-legend .tgt { color: #a11; } .map-legend .fc { color: #0a3a7a; } .map-legend .fb { color: #0a3a7a; } .map-legend .af { color: #22364f; }
.map-info { text-align: center; font-size: 12px; color: #234; min-height: 16px; }

/* status */
.status-grid { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; }
.status-grid > div:nth-child(odd) { font-weight: 700; color: #333; }
.obj-head { font-weight: 800; margin: 12px 0 4px; border-top: 1px solid #bbb; padding-top: 8px; }
.obj-list { list-style: none; }
.obj-list li { padding: 2px 0; }
.obj-list li.done { color: #1a7a2a; }
.obj-list li.fail { color: #a11; }

/* high scores */
.hs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.hs-table td { padding: 3px 6px; border-bottom: 1px dotted #bbb; }
.hs-rank { color: #555; } .hs-score { text-align: right; font-weight: 700; font-family: monospace; }

/* result */
.result-lines { line-height: 1.7; font-size: 13px; text-align: center; }
.result-lines div:first-child { font-weight: 800; font-size: 16px; margin-bottom: 6px; }

/* pilot career window */
.career-head { text-align: center; margin-bottom: 12px; }
.career-name { font-weight: 800; font-size: 18px; }
.career-dead { color: #b34; font-weight: 700; font-size: 13px; }
.career-rank { color: #444; font-size: 13px; margin-top: 2px; }
.ace-wings { color: #b8860b; font-weight: 800; letter-spacing: .5px; }
.career-sec { font-weight: 800; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: #667; margin: 14px 0 6px; border-bottom: 1px solid #ccd; padding-bottom: 3px; }
.ribbon-rack { display: flex; flex-wrap: wrap; gap: 6px; }
.ribbon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 15px; border: 1px solid rgba(0,0,0,.45); border-radius: 1px; box-shadow: inset 0 0 3px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.2); position: relative; }
.rib-count { font-size: 9px; color: #ffd700; text-shadow: 0 0 2px #000, 0 0 2px #000; font-weight: 700; line-height: 1; }
.rib-none { color: #889; font-size: 12px; font-style: italic; }
.career-stats { font-size: 12.5px; }
.cs-row { display: flex; justify-content: space-between; padding: 2px 2px; border-bottom: 1px dotted #ccd; }
.cs-row span:last-child { font-family: monospace; font-weight: 700; color: #234; }
.mission-ribbons { display: flex; flex-wrap: wrap; gap: 5px; }
.mrib { font-size: 11px; background: #eef1f6; border: 1px solid #ccd; border-radius: 3px; padding: 2px 6px; }

/* ============================ touch / mobile ============================ */
/* on touch devices fill the whole window (drop the 4:3 letterbox) */
/* Fit the VISIBLE viewport (dvh excludes the browser's URL/tool bars) so the
   instrument panel isn't pushed down under the bottom chrome — 100vh assumes the
   chrome is hidden and left a wasted strip at the bottom. */
body.touch #mac { width: 100vw !important; height: 100vh !important; border: 0; box-shadow: none; }
body.touch #mac { height: 100svh !important; height: 100dvh !important; }
body.touch #desktop { background: #000; overflow: hidden; }
body.touch, html:has(body.touch) { overscroll-behavior: none; }
/* fatter menu hit targets for fingers */
body.touch .menu-title { padding: 0 13px; height: 26px; }
body.touch #menubar { font-size: 13px; }
body.touch .menu-item { padding: 6px 14px 6px 6px; }

/* on-screen controls overlay (inside #stage) */
#touch-ui { position: absolute; inset: 0; pointer-events: none; z-index: 30; display: none; }
#touch-ui.show { display: block; }
#touch-ui > * { pointer-events: auto; }
/* no long-press selection / callout / highlight on any control */
#touch-ui, #touch-ui * {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* flight stick, bottom-left */
.tc-stickzone { position: absolute; left: 3vw; bottom: 3vh; width: 34vh; height: 34vh; max-width: 210px; max-height: 210px;
  display: flex; align-items: center; justify-content: center; touch-action: none; }
.tc-stick-base { width: 62%; height: 62%; border-radius: 50%; background: radial-gradient(rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 2px solid rgba(255,255,255,.35); box-shadow: 0 0 12px rgba(0,0,0,.4) inset; position: relative; }
.tc-stick-knob { position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; margin: -19% 0 0 -19%; border-radius: 50%;
  background: radial-gradient(rgba(255,255,255,.9), rgba(190,205,225,.65)); border: 1px solid rgba(0,0,0,.4);
  box-shadow: 0 2px 8px rgba(0,0,0,.5); }

/* throttle, far left edge */
.tc-throttle { position: absolute; left: 2px; top: 12vh; bottom: 12vh; width: 40px; border-radius: 20px;
  background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.28); touch-action: none; overflow: hidden; }
.tc-thr-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0%; background: linear-gradient(#8fe6a2, #3a8c50); opacity: .55; }
.tc-thr-knob { position: absolute; left: -3px; right: -3px; height: 18px; bottom: 0; border-radius: 9px;
  background: #eef4ff; border: 1px solid rgba(0,0,0,.4); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.tc-thr-label { position: absolute; left: 0; right: 0; top: 6px; text-align: center; font-size: 10px; font-weight: 700; color: #cfe3f5; }

/* FIRE, bottom-right */
.tc-fire { position: absolute; right: 4vw; bottom: 6vh; width: 20vh; height: 20vh; max-width: 128px; max-height: 128px;
  border-radius: 50%; background: radial-gradient(rgba(255,90,70,.5), rgba(150,20,15,.55));
  border: 3px solid rgba(255,120,100,.7); color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 2px #000; touch-action: none; }
.tc-fire.on { background: radial-gradient(rgba(255,150,120,.85), rgba(210,40,20,.8)); transform: scale(.96); }

/* cockpit buttons, top-right column */
.tc-buttons { position: absolute; right: 6px; top: 6px; display: flex; flex-direction: column; gap: 6px; }
.tc-btn { min-width: 58px; padding: 9px 6px; text-align: center; border-radius: 7px; font-size: 12px; font-weight: 700;
  color: #eef4ff; background: rgba(20,30,45,.55); border: 1px solid rgba(255,255,255,.3); text-shadow: 0 1px 1px #000; touch-action: none; }
.tc-btn.tap { background: rgba(80,120,180,.7); }

/* rotate-to-landscape nudge on portrait phones */
#rotate-hint { display: none; }
body.touch #rotate-hint { position: fixed; inset: 0; z-index: 9999; background: #0b1220; color: #cfe3f5;
  align-items: center; justify-content: center; text-align: center; font-size: 18px; padding: 30px; line-height: 1.6; }
@media (orientation: portrait) { body.touch #rotate-hint { display: flex; } }

/* mobile: keep dialogs within the (dynamic) viewport and buttons reachable */
body.touch .dlg { max-height: 84dvh; max-width: 96vw; font-size: 13px; }
body.touch .dlg-body { padding: 10px 12px; }
body.touch .dlg-buttons { position: sticky; bottom: -10px; margin-top: 12px; padding: 8px 0 2px;
  background: linear-gradient(rgba(238,240,243,0), #eef0f3 30%); flex-wrap: wrap; }
body.touch .btn { padding: 9px 16px; font-size: 15px; border-radius: 6px; }
body.touch .modal-back { align-items: center; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
/* comfortable tap targets for mission / bomb radios */
body.touch .mrow, body.touch .bomb-row label { padding: 5px 2px; }
body.touch .mrow input, body.touch .bomb-row input { transform: scale(1.3); margin-right: 6px; }

/* ---- multiplayer dialogs ---- */
.mp-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.mp-row span { width: 150px; text-align: right; color: #234; font-size: 12px; }
.mp-row input { flex: 1; font: inherit; padding: 3px 6px; border: 1px solid #8a94a5; border-radius: 2px; background: #fff; }
.mp-err { color: #a11; min-height: 16px; font-size: 12px; margin: 6px 0 2px; text-align: center; }
.mp-note { color: #256b2f; min-height: 16px; font-size: 12px; margin: 2px 0; text-align: center; }
.mp-sub { color: #456; font-size: 12px; margin: 0 0 8px; }
.mp-ops { margin-bottom: 2px; flex-wrap: wrap; }
/* mobile: mp dialogs sit high so fields + buttons stay above the keyboard;
   16px inputs also stop any focus auto-zoom */
body.touch .modal-back:has(.mp-dlg) { align-items: flex-start; padding-top: max(3vh, env(safe-area-inset-top)); }
body.touch .mp-dlg .mp-row { margin: 5px 0; }
body.touch .mp-dlg .mp-row span { width: 118px; font-size: 11px; }
body.touch .mp-dlg .mp-row input { font-size: 16px; }

/* ---- welcome screen ---- */
#welcome-account { font-size: 12.5px; color: #9fc0de; margin: 16px 0 14px; }
#welcome-account a { color: #cfe6ff; cursor: pointer; text-decoration: underline; }
.welcome-buttons { display: flex; gap: 14px; justify-content: center; margin-top: 4px; }
.welcome-buttons .btn { font-size: 15px; padding: 10px 26px; }
.menu-title.apple svg { display: block; width: 15px; height: 15px; }
.btn:disabled { opacity: .45; cursor: default; pointer-events: none; }
.btn.default:disabled { border-color: #8a94a5; font-weight: 700; }