/* HORNET BAY — HUD & menu styling. Amiga-inspired chrome. */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#000;
  font-family:"Courier New", ui-monospace, monospace; color:#cfe8ff;
  -webkit-user-select:none; user-select:none; }
canvas { position:fixed; inset:0; width:100%; height:100%; display:block;
  image-rendering:pixelated; image-rendering:crisp-edges; }
#hud { z-index:5; pointer-events:none; }
#gl  { z-index:1; }

.hidden { display:none !important; }
.overlay { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column;
  align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 30%, #0a1a3a 0%, #030810 70%);
  overflow:hidden; }
#menu { background:radial-gradient(ellipse at 50% 30%, rgba(10,26,58,0.42) 0%, rgba(3,8,16,0.66) 70%);
  align-items:flex-start; padding-left:6vw; }
#menu .title-block, #menu .menu-footer { text-align:left; }
#menu .title-block, #menu .menu-list, #menu .menu-footer, #menu .menu-mode-title, #menu .soc-row { max-width:44vw; }
#menu .menu-list { min-width:min(420px, 44vw); }
/* narrow windows: fall back to the centred layout (hero jet sits behind the panel) */
@media (max-aspect-ratio: 5/4) {
  #menu { align-items:center; padding-left:0; }
  #menu .title-block, #menu .menu-footer { text-align:center; }
  #menu .title-block, #menu .menu-list, #menu .menu-footer, #menu .menu-mode-title, #menu .soc-row { max-width:none; }
}

/* ------- title ------- */
.stars { position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 40% 70%, #9cf, transparent),
    radial-gradient(2px 2px at 65% 20%, #fff, transparent),
    radial-gradient(1px 1px at 80% 55%, #9cf, transparent),
    radial-gradient(1px 1px at 10% 80%, #fff, transparent),
    radial-gradient(2px 2px at 90% 85%, #fff, transparent),
    radial-gradient(1px 1px at 55% 45%, #fff, transparent),
    radial-gradient(1px 1px at 33% 12%, #9cf, transparent);
  background-repeat:repeat; background-size:640px 640px; }
.title-block { text-align:center; margin-bottom:12px; z-index:1; }
.title-top { font-size:11px; letter-spacing:4px; color:#5f86b8; margin-bottom:14px; }
.game-title { font-size:64px; line-height:.95; letter-spacing:6px; color:#fff;
  text-shadow:0 0 18px #2f7dff, 0 0 60px #1a3c8f; font-weight:700; font-style:italic; }
.game-title span { color:#ffb437; text-shadow:0 0 18px #b45f00, 0 0 60px #7a3800; }
.title-sub { margin-top:14px; font-size:12px; letter-spacing:5px; color:#7fa8d8; }
.title-sim { margin-top:10px; font-size:12px; letter-spacing:4px; color:#ffb437;
  text-shadow:0 0 10px #7a3800; }
.title-desktop { margin-top:14px; font-size:13px; font-weight:700; letter-spacing:3px; color:#ff7a3c;
  text-shadow:0 0 10px rgba(255,122,60,.6); }
#mobile-warn { position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center;
  background:#030810; font-family:'Courier New',monospace; }
#mobile-warn.hidden { display:none; }
#mobile-warn .mw-card { max-width:520px; margin:0 24px; padding:34px 38px; text-align:center;
  background:#0a1a3a; border:2px solid #ffb437; box-shadow:0 0 40px rgba(255,180,55,.25); }
#mobile-warn .mw-title { font-size:22px; font-weight:700; letter-spacing:4px; color:#ffb437; }
#mobile-warn .mw-sub { margin-top:10px; font-size:15px; font-weight:700; letter-spacing:3px; color:#ff7a3c; }
#mobile-warn .mw-body { margin-top:18px; font-size:13px; line-height:1.7; color:#cfe0ff; letter-spacing:.5px; }
#mobile-warn #mw-dismiss { margin-top:24px; padding:12px 26px; background:#12264e; color:#ffb437;
  border:1px solid #ffb437; font:700 12px 'Courier New',monospace; letter-spacing:2px; cursor:pointer; }
#mobile-warn #mw-dismiss:hover { background:#ffb437; color:#0a1526; }
#mobile-warn .mw-brand { display:none; }

/* portrait phones: full-height portrait layout — wordmark up top, warning
   centred, dismiss down where the thumb lives */
@media (orientation: portrait) {
  #mobile-warn { align-items:stretch; justify-content:stretch; }
  #mobile-warn .mw-card { display:flex; flex-direction:column; align-items:center; width:100%; max-width:none;
    min-height:100%; margin:0; padding:9vh 30px 6vh; border:none; box-shadow:none; text-align:center;
    background:radial-gradient(120% 60% at 50% 0%, #10224e 0%, #0a1a3a 45%, #050d20 100%); }
  #mobile-warn .mw-brand { display:block; font-size:52px; font-weight:700; line-height:.95; letter-spacing:6px;
    color:#cfe0ff; text-shadow:0 0 22px rgba(120,170,255,.75); }
  #mobile-warn .mw-brand span { color:#ffb437; text-shadow:0 0 26px rgba(255,180,55,.8); }
  #mobile-warn .mw-mid { margin:auto 0; }
  #mobile-warn .mw-title { font-size:25px; letter-spacing:3px; }
  #mobile-warn .mw-sub { font-size:16px; }
  #mobile-warn .mw-body { font-size:14px; max-width:34ch; margin-left:auto; margin-right:auto; }
  #mobile-warn #mw-dismiss { width:100%; max-width:340px; margin-top:6vh; padding:18px 26px; font-size:15px; }
}

/* portrait phones run the page in sideways mode (body spun 90deg) — the
   warning alone counter-rotates and serves upright, sized to the true device
   viewport, so it reads before the pilot ever turns the phone */
html.fakeland #mobile-warn, html.fakeland-ccw #mobile-warn {
  inset:auto; left:50%; top:50%; width:100vw; height:100vh; transform-origin:50% 50%;
  padding-left:0;   /* the fakeland .overlay gutter would shove the card off-centre */
}
html.fakeland #mobile-warn     { transform:translate(-50%,-50%) rotate(-90deg); }
html.fakeland-ccw #mobile-warn { transform:translate(-50%,-50%) rotate(90deg); }

.menu-mode-title { font-size:19px; letter-spacing:4px; color:#ffd75e; margin-bottom:10px; z-index:1;
  text-shadow:0 0 10px #8f6a00; }
.menu-mode-title:empty { display:none; }
.menu-list { display:flex; flex-direction:column; gap:6px; z-index:1; min-width:420px; max-height:68vh; overflow-y:auto; padding:4px; }
.mbtn { font-family:inherit; font-size:17px; letter-spacing:2px; text-align:left;
  background:linear-gradient(90deg, rgba(20,50,110,.85), rgba(8,18,40,.85));
  color:#cfe8ff; border:1px solid #2f5f9f; padding:8px 16px; cursor:pointer;
  transition:all .12s; position:relative; }
.mbtn:hover:not(:disabled) { background:linear-gradient(90deg, #ffb437, #d98a12); color:#081020; border-color:#ffd580; }
.mbtn:disabled { opacity:.32; cursor:default; }
.mbtn.locked { opacity:.38; cursor:default; }
.mbtn.locked:hover { background:none; color:inherit; border-color:inherit; }
.mbtn.locked .tag { color:#8fa3bf; }
.mbtn .mnum { margin-right:14px; color:#ffd75e; }
.mbtn:hover:not(:disabled) .mnum { color:#081020; }
.mbtn .tag { float:right; font-size:13px; color:#ffb437; margin-left:24px; }
.mbtn:hover:not(:disabled) .tag { color:#081020; }
/* difficulty badge on the mission board — rightmost, a fixed-width column so
   the ladder scans clean down the list */
.mbtn .diff { float:right; font-size:12px; letter-spacing:1px; width:66px; text-align:right;
  margin-left:18px; padding-top:2px; }
.mbtn .diff.d-easy { color:#6fdf9f; }
.mbtn .diff.d-medium { color:#ffd75e; }
.mbtn .diff.d-hard { color:#ff9a3c; }
.mbtn .diff.d-expert { color:#ff6a5e; }
.mbtn.locked .diff { color:#8fa3bf; }
/* sub-menu RETURN stays pinned to the top of the scrolling list — no
   scrolling to the bottom of a long board to get back to the barn */
.mbtn.mtop { position:sticky; top:4px; z-index:3;
  background:linear-gradient(90deg, rgb(18,44,96), rgb(10,22,48));
  box-shadow:0 6px 12px rgba(0,0,0,.5); }
.mbtn:hover:not(:disabled) .diff { color:#081020; }
/* mission type & maneuver chips under the title — carrier launch, intercept… */
.mbtn .chips { display:block; margin-top:5px; }
.mbtn .chip { display:inline-block; font-size:10.5px; letter-spacing:1px; line-height:1;
  color:#8fb4de; border:1px solid rgba(47,95,159,.8); padding:3px 5px 2px;
  margin:0 5px 2px 0; }
.mbtn:hover:not(:disabled) .chip { color:#081020; border-color:#081020; }
.mbtn.locked .chip { color:#6e7f96; border-color:#3a4a5e; }
/* the one-line pitch under the chips — why you want this sortie */
.mbtn .hook { display:block; font-size:12.5px; letter-spacing:1px; line-height:1.45;
  color:#7f96b8; margin-top:5px; white-space:normal; }
.mbtn:hover:not(:disabled) .hook { color:#081020; }
.mbtn.locked .hook { color:#5a6b80; }
/* the objective portrait on the school/mission boards — a still straight out
   of the sim, one for every sortie */
.mbtn .mthumb { float:left; width:64px; height:64px; object-fit:cover; margin:1px 14px 2px 0;
  border:1px solid rgba(47,95,159,.8); image-rendering:pixelated; background:#04101f; }
.mbtn:hover:not(:disabled) .mthumb { border-color:#081020; }
.mbtn.locked .mthumb { opacity:.75; filter:grayscale(.45); }
.mbtn .chips, .mbtn .hook { margin-left:78px; }
/* course headers inside the flight-school board */
.mhead { color:#ffb437; font-size:15px; letter-spacing:3px; margin:16px 0 6px 2px; }
.msub { color:#6e84a3; font-size:12.5px; letter-spacing:2px; margin:2px 0 10px 2px; }
.logline { font-size:15px; letter-spacing:1.5px; color:#c8dcf5; padding:3px 4px; }
.mbtn.center { text-align:center; }
.menu-footer { margin-top:10px; text-align:center; z-index:1; }
#pilot-record { font-size:14px; color:#7fa8d8; letter-spacing:1px; margin-bottom:10px; }
.hint { font-size:12.5px; letter-spacing:2px; color:#46648c; }
.x-follow { margin-top:8px; font-size:11px; letter-spacing:2px; }
.x-follow a { color:#5f86b8; text-decoration:none; transition:color .12s; }
.x-follow a:hover { color:#ffb437; }
/* social platforms: big, bordered, impossible to miss */
.soc-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.soc-row a.soc { font-size:13px; font-weight:bold; letter-spacing:2px; color:#ffb437; text-decoration:none;
  border:1px solid #24355f; padding:7px 13px; background:rgba(10,20,44,.35); transition:border-color .12s, box-shadow .12s; }
.soc-row a.soc:hover { border-color:#ffb437; box-shadow:0 0 10px rgba(255,180,55,.28); }

/* ------- briefing / debrief ------- */
.brief-box { width:min(760px, 92vw); max-height:88vh; overflow-y:auto; background:rgba(4,12,28,.92);
  border:1px solid #2f5f9f; box-shadow:0 0 40px rgba(30,90,200,.35) inset, 0 0 60px rgba(0,0,0,.8);
  padding:34px 40px; z-index:1; }
.brief-box.wide { width:min(860px,94vw); }
.brief-head { display:flex; justify-content:space-between; font-size:11px; letter-spacing:3px; color:#5f86b8; margin-bottom:10px; }
.brief-class { color:#ff5b4d; }
.brief-box h2 { font-size:26px; letter-spacing:3px; color:#ffb437; margin-bottom:16px; font-style:italic; }
#brief-body { font-size:14px; line-height:1.75; color:#c8dcf5; white-space:pre-wrap; }
#brief-loadout { margin-top:18px; font-size:12px; color:#7fd8a8; letter-spacing:1px; line-height:1.7; }
.brief-buttons { display:flex; gap:12px; margin-top:26px; }
.brief-buttons .mbtn { text-align:center; flex:1; }
#debrief-body { font-size:14px; line-height:1.8; color:#c8dcf5; white-space:pre-wrap; }
/* sortie feedback poll — rides the debrief card, flies solo after a crash */
#debrief-feedback { margin-top:20px; padding-top:16px; border-top:1px dashed rgba(95,134,184,.4); }
.fb-head { font-size:12px; letter-spacing:3px; color:#ffb437; text-align:center; margin-bottom:8px; }
.fb-sub { font-size:13px; letter-spacing:2px; color:#c8dcf5; text-align:center; margin:-6px 0 14px; }
.fb-stars { display:flex; justify-content:center; gap:8px; margin-bottom:12px; }
.fb-stars button { background:none; border:none; padding:0 2px; font-size:34px; line-height:1; color:#2c3f63; cursor:pointer; transition:transform .08s; }
.fb-stars button:hover { color:#ffd75e; transform:scale(1.12); }
.fb-stars button.on { color:#ffb437; text-shadow:0 0 14px rgba(255,180,55,.55); }
#fb-text, #fb2-text { width:100%; box-sizing:border-box; background:#0a1830; color:#ffd75e; border:1px solid rgba(95,134,184,.5);
  border-radius:6px; padding:10px 12px; font-family:inherit; font-size:13px; letter-spacing:1px;
  resize:vertical; min-height:56px; outline:none; text-transform:none; }
#fb-text:focus, #fb2-text:focus { border-color:#ffb437; box-shadow:0 0 12px rgba(255,180,55,.25); }
#fb-text::placeholder, #fb2-text::placeholder { color:#5f86b8; }
.fb-row { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; }
.fb-row .mbtn { flex:0 0 auto; padding-left:34px; padding-right:34px; }
.fb-status { display:block; font-size:11px; letter-spacing:1.5px; color:#7fd8a8; text-align:center; margin-top:10px; min-height:14px; }
.fb-status:empty { margin-top:0; min-height:0; }
.mbtn:disabled { opacity:.45; cursor:default; }
#debrief-title.good { color:#7fd8a8; }
#debrief-title.bad { color:#ff5b4d; }

.ctl-grid { display:grid; grid-template-columns:190px 1fr; gap:9px 22px; font-size:16px; line-height:1.5; color:#c8dcf5; }
.ctl-grid b { color:#ffb437; }

.pause-inner { text-align:center; }
.pause-inner h2 { font-size:40px; letter-spacing:10px; color:#ffb437; margin-bottom:26px; font-style:italic; }
.pause-inner .menu-list { min-width:340px; }

#manual-btn { position:fixed; top:8px; right:10px; z-index:18; background:rgba(0,22,10,0.55);
  color:#39d353; border:1px solid #2a6a3a; font:bold 12px "Courier New",monospace;
  letter-spacing:1px; padding:4px 10px; cursor:pointer; border-radius:2px; }
#manual-btn:hover { background:rgba(12,55,28,0.85); }
#manual-btn.hidden { display:none; }
#controls { z-index:25; }   /* manual reads above the PAUSED card */
#flash { position:fixed; inset:0; z-index:15; pointer-events:none; background:#fff; opacity:0; transition:opacity .1s; }
#errbox { position:fixed; left:8px; bottom:8px; z-index:99; color:#ff6b5d; font-size:11px;
  max-width:60vw; pointer-events:none; white-space:pre-wrap; }
::-webkit-scrollbar { width:8px; } ::-webkit-scrollbar-thumb { background:#2f5f9f; }
::-webkit-scrollbar-track { background:#0a1830; }

/* ================= TOUCH CONTROLS (mobile) ================= */
html.touch body { touch-action:none; }
#touch-ui { position:fixed; inset:0; z-index:12; pointer-events:none;
  font-family:"Courier New", ui-monospace, monospace; }
#touch-ui > * { pointer-events:auto; }
#touch-ui #trotate, #touch-ui #tstick { pointer-events:none; }
#touch-ui #tstick { pointer-events:auto; }

.tbtn { font-family:inherit; font-weight:700; color:#cfe8ff; letter-spacing:1px;
  background:rgba(10,26,58,.48); border:2px solid rgba(111,160,224,.75); border-radius:10px;
  padding:1.6vmin 2.4vmin; font-size:2.9vmin; line-height:1.15; text-align:center;
  -webkit-tap-highlight-color:transparent; }
.tbtn.on { background:#ffb437; color:#081020; border-color:#ffd580; }

/* system strip (gear / hook / brake / view / map / pause) — top centre */
#tsys { position:fixed; top:calc(1.4vmin + env(safe-area-inset-top)); left:50%;
  transform:translateX(-50%); display:flex; gap:1.4vmin; }
#tsys .tbtn { font-size:2.4vmin; padding:1.1vmin 1.8vmin; border-radius:6px; }

/* throttle — drag-to-set lever on the left edge, above the stick */
#tthr { position:fixed; left:calc(2.6vmin + env(safe-area-inset-left));
  bottom:calc(36vmin + env(safe-area-inset-bottom)); display:flex; flex-direction:column;
  align-items:center; gap:1vmin; }
#tthr-label { font-size:2.6vmin; font-weight:700; letter-spacing:1px; color:#cfe8ff; }
#tthr-track { position:relative; width:9vmin; height:44vmin; border-radius:5vmin;
  background:linear-gradient(to top, rgba(10,26,58,.30) 0%, rgba(10,26,58,.55) 100%);
  border:2px solid rgba(111,160,224,.75); }
#tthr-track::after { content:''; position:absolute; left:50%; top:6%; bottom:6%; width:2px;
  transform:translateX(-50%); background:rgba(111,160,224,.35); }
#tthr-handle { position:absolute; left:50%; bottom:0; width:11vmin; height:11vmin;
  transform:translate(-50%, 50%); border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffd580, #d98f1f 70%);
  border:2px solid rgba(255,213,128,.9); box-shadow:0 0 12px rgba(255,160,50,.55); }

/* thumb stick — fixed base bottom-left, generous grab zone */
#tstick { position:fixed; left:0; bottom:0; width:46%; height:46%; }
#tstick-base { position:absolute; left:calc(4vmin + env(safe-area-inset-left));
  bottom:calc(5vmin + env(safe-area-inset-bottom)); width:29vmin; height:29vmin; border-radius:50%;
  background:radial-gradient(circle, rgba(10,26,58,.30) 55%, rgba(10,26,58,.55) 100%);
  border:2px solid rgba(111,160,224,.55); }
#tstick-knob { position:absolute; left:50%; top:50%; width:12.5vmin; height:12.5vmin;
  margin:-6.25vmin 0 0 -6.25vmin; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #9fc4f5, #3a6bb5 70%);
  border:2px solid rgba(200,225,255,.8); box-shadow:0 0 12px rgba(60,120,220,.6); }

/* action cluster — tucked tight into the bottom-right corner */
#tact { position:fixed; right:calc(1.2vmin + env(safe-area-inset-right));
  bottom:calc(1.6vmin + env(safe-area-inset-bottom)); display:grid; gap:1.2vmin;
  grid-template-areas:"tgt ab fire" "wpn wpn fire"; align-items:end; justify-items:center; }
#tact .tbtn[data-k="KeyT"] { grid-area:tgt; }
#tact #t-ab { grid-area:ab; }
#tact .tbtn[data-k="Tab"] { grid-area:wpn; }
#tact .act { width:9.5vmin; height:9.5vmin; padding:0; font-size:2.4vmin; border-radius:50%; }
#tact .fire { grid-area:fire; width:16vmin; height:16vmin; padding:0; font-size:3.2vmin;
  border-radius:50%; border-color:rgba(255,120,90,.85); color:#ffd9c8;
  background:rgba(80,20,10,.45); }
#tact .fire.on { background:#ff5b4d; color:#200600; border-color:#ffb0a0; }

/* contextual bar for the canvas intro states (briefing / plane / map / zoom) */
#tintro { position:fixed; left:50%; bottom:calc(5vmin + env(safe-area-inset-bottom));
  transform:translateX(-50%); display:flex; gap:2vmin; flex-wrap:wrap; justify-content:center;
  max-width:94vw; }
#tintro .tbtn { font-size:3.2vmin; padding:2vmin 3.4vmin; background:rgba(10,26,58,.72); }
#tintro .tbtn.big { border-color:#ffb437; color:#ffd75e; font-size:3.6vmin; }

/* portrait: blocking rotate overlay — the game is landscape-only on touch */
#tportrait { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; background:#070b18;
  font-family:"Courier New", ui-monospace, monospace; }
#tportrait.hidden { display:none; }
.tp-phone { width:52px; height:88px; border:3px solid #ffb437; border-radius:10px;
  padding:5px; animation:tprotate 1.6s ease-in-out infinite; }
.tp-screen { width:100%; height:100%; border-radius:5px;
  background:linear-gradient(135deg, #14315e 0%, #0a1a38 60%, #ffb437 130%); }
@keyframes tprotate { 0%, 20% { transform:rotate(0deg); } 55%, 100% { transform:rotate(90deg); } }
.tp-title { color:#ffb437; font-weight:700; font-size:18px; letter-spacing:3px; }
.tp-sub { color:#8fb0d8; font-size:11px; letter-spacing:2px; }
.tp-lock { color:#5c78a0; font-size:10.5px; letter-spacing:1.5px; text-align:center;
  line-height:1.9; max-width:82vw; opacity:0; transition:opacity .5s, color .3s; }
.tp-lock.seen { opacity:1; }
.tp-lock.hot { color:#ffd75e; font-weight:700; animation:tplockpulse 1.2s ease-in-out infinite; }
@keyframes tplockpulse { 0%, 100% { opacity:1; } 50% { opacity:.55; } }
.tp-tap { color:#3d5476; font-size:9.5px; letter-spacing:2px; margin-top:6px;
  border:1px solid #22365a; border-radius:5px; padding:5px 12px; opacity:0; transition:opacity .5s; }
.tp-tap.seen { opacity:1; }

/* ---------------- sideways mode (rotation-lock workaround) ----------------
   Gyro says the phone is physically landscape but the viewport is locked
   portrait: lay the whole page out as landscape (long x short) and spin it
   90 degrees. position:fixed children follow the transformed body, so the
   canvas, HUD, menus and touch UI all rotate together. */
html.fakeland, html.fakeland-ccw { overflow:hidden; }
html.fakeland body, html.fakeland-ccw body {
  position:fixed; left:50%; top:50%; margin:0;
  width:100vh; height:100vw; overflow:hidden;
  transform-origin:50% 50%;
}
html.fakeland body     { transform:translate(-50%,-50%) rotate(90deg); }
html.fakeland-ccw body { transform:translate(-50%,-50%) rotate(-90deg); }

/* roomier tap targets throughout the DOM UI on touch devices */
html.touch .mbtn { padding:14px 18px; font-size:15px; }
html.touch .menu-list { gap:8px; }
html.touch #manual-btn { font-size:14px; padding:10px 16px; }
html.touch .brief-buttons .mbtn { padding:16px 18px; }
html.touch .ctl-grid { font-size:14px; }

/* compact title screen for short landscape windows (phones) */
@media (max-height: 480px) {
  .title-top { font-size:9px; letter-spacing:2px; margin-bottom:4px; }
  .game-title { font-size:34px; letter-spacing:3px; }
  .title-sub { margin-top:5px; font-size:9px; letter-spacing:2px; }
  .title-sim { margin-top:4px; font-size:9px; letter-spacing:2px; }
  .title-block { margin-bottom:4px; }
  .menu-mode-title { font-size:11px; margin-bottom:4px; }
  .menu-list { gap:4px; max-height:56vh; }
  .mbtn { padding:6px 12px; font-size:12px; }
  .menu-footer { margin-top:5px; }
  #pilot-record { font-size:10px; margin-bottom:4px; }
  .hint, .x-follow { font-size:9px; margin-top:3px; }
  .x-follow { display:none; }    /* one footer line is enough on a phone */
}
/* touch bar clears the canvas status line at the bottom of intro states */
#tintro { bottom:calc(10vmin + env(safe-area-inset-bottom)); }

/* ================= QUICK START card ================= */
#quickstart { position:fixed; inset:0; z-index:18; display:flex; align-items:center; justify-content:center;
  background:rgba(4,10,24,.35); cursor:pointer; }
#quickstart.hidden, #attract-hint.hidden, #gllost.hidden, #tomcat-unlock.hidden, #allaccess-unlock.hidden, #wingman-orders.hidden { display:none; }

/* F-14 Tomcat unlock card + all-access campaign unlock card */
#tomcat-unlock, #allaccess-unlock { position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:rgba(4,10,24,.55); }
.tc-card { background:rgba(6,14,32,.95); border:2px solid #ffb437; border-radius:10px;
  padding:18px 26px; max-width:min(92vw, 560px); box-shadow:0 0 30px rgba(0,0,0,.6);
  font-family:"Courier New", ui-monospace, monospace; text-align:center; }
.tc-title { color:#ffb437; font-weight:700; letter-spacing:2px; font-size:15px; margin-bottom:10px; }
.tc-body { color:#cfe8ff; font-size:12.5px; line-height:1.5; margin-bottom:14px; }
.tc-body a { color:#ffd75e; }
#tc-input, #aa-input { width:min(86%, 340px); background:#0a1830; color:#ffd75e; border:1px solid rgba(255,180,55,.6);
  border-radius:6px; padding:10px 12px; font-family:inherit; font-size:15px; letter-spacing:2px;
  text-align:center; text-transform:uppercase; outline:none; }
#tc-input:focus, #aa-input:focus { border-color:#ffb437; box-shadow:0 0 12px rgba(255,180,55,.35); }
#tc-error, #aa-error { color:#ff6a5e; font-size:11.5px; letter-spacing:1px; margin-top:10px; }

/* wingman orders card */
#wingman-orders { position:fixed; inset:0; z-index:40; display:flex; align-items:flex-start; justify-content:flex-start;
  background:transparent; pointer-events:none; }
.wo-card { margin:18vh 0 0 6vw; text-align:left; pointer-events:auto; }
.wo-row { color:#cfe8ff; font-size:13px; letter-spacing:1px; padding:7px 10px; border:1px solid transparent; border-radius:6px; }
.wo-row b { color:#ffd75e; margin-right:10px; }
.wo-row .wo-sub { color:#6f8db0; font-size:11px; margin-left:12px; }
.wo-row.current { border-color:rgba(255,180,55,.55); background:rgba(255,180,55,.08); }
#tc-error.hidden { display:none; }
.tc-hint { margin-top:12px; font-size:10px; color:#5c78a0; letter-spacing:1.5px; }

/* GL context lost banner (iOS takes the GPU on rotation/backgrounding) */
#gllost { position:fixed; left:50%; top:42%; transform:translate(-50%,-50%); z-index:80;
  padding:12px 30px; font-family:"Courier New", ui-monospace, monospace; font-size:14px;
  font-weight:700; letter-spacing:2px; color:#ffd75e; white-space:nowrap; text-align:center;
  background:rgba(6,14,32,.92); border:2px solid #ffb437; border-radius:8px; }
.qs-card { background:rgba(6,14,32,.92); border:2px solid #ffb437; border-radius:10px;
  padding:18px 26px; max-width:min(92vw, 520px); box-shadow:0 0 30px rgba(0,0,0,.6);
  font-family:"Courier New", ui-monospace, monospace; }
.qs-title { color:#ffb437; font-weight:700; letter-spacing:2px; font-size:15px; text-align:center; margin-bottom:12px; }
.qs-grid { display:grid; grid-template-columns:auto 1fr; gap:7px 16px; font-size:13.5px; color:#cfe8ff;
  align-items:baseline; }
.qs-grid b { color:#ffd75e; background:rgba(255,180,55,.12); border:1px solid rgba(255,180,55,.5);
  border-radius:4px; padding:1px 8px; text-align:center; white-space:nowrap; }
.qs-never { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:11.5px; color:#8fb0d8;
  letter-spacing:1px; cursor:pointer; }
.qs-never input { accent-color:#ffb437; width:15px; height:15px; cursor:pointer; }
.qs-fade { margin-top:8px; font-size:10px; color:#5c78a0; letter-spacing:1.5px; text-align:center; }
html.touch .qs-grid { font-size:15px; }

/* attract mode hint */
#attract-hint { position:fixed; left:50%; bottom:calc(3.5vmin + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:18; padding:8px 22px; font-family:"Courier New", ui-monospace, monospace;
  font-size:13px; font-weight:700; letter-spacing:2px; color:#ffd75e; white-space:nowrap;
  background:rgba(6,14,32,.72); border:1px solid rgba(255,180,55,.6); border-radius:6px; }

/* in-flight objectives card — the typed brief, recallable with I */
#obj-card { position:fixed; top:calc(3vmin + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  z-index:16; width:min(560px, 88vw); padding:10px 18px 8px;
  font-family:"Courier New", ui-monospace, monospace; color:#cfe3ff;
  background:rgba(6,14,32,.82); border:1px solid rgba(120,180,255,.5); border-radius:6px; }
#obj-card.hidden { display:none; }
#obj-title { color:#ffd75e; font-weight:700; letter-spacing:2px; font-size:13px; margin-bottom:6px; }
#obj-body { font-size:12px; line-height:1.55; white-space:pre-line; }
#obj-hint { margin-top:6px; font-size:10px; letter-spacing:2px; color:rgba(207,227,255,.55); text-align:right; }


/* ---------------- sideways-mode unit swaps ----------------
   vw/vh always reference the REAL (portrait) viewport, even inside the spun
   body — so landscape layouts written in viewport units must swap axes here. */
html.fakeland .overlay, html.fakeland-ccw .overlay { padding-left:6vh; }
html.fakeland #menu .title-block, html.fakeland #menu .menu-list,
html.fakeland #menu .menu-footer, html.fakeland #menu .menu-mode-title, html.fakeland #menu .soc-row,
html.fakeland-ccw #menu .title-block, html.fakeland-ccw #menu .menu-list,
html.fakeland-ccw #menu .menu-footer, html.fakeland-ccw #menu .menu-mode-title, html.fakeland-ccw #menu .soc-row { max-width:44vh; }
html.fakeland #menu .menu-list, html.fakeland-ccw #menu .menu-list { min-width:min(420px, 44vh); }
html.fakeland .menu-list, html.fakeland-ccw .menu-list { max-height:62vw; }
html.fakeland .brief-box, html.fakeland-ccw .brief-box { width:min(760px, 92vh); max-height:88vw; }
html.fakeland .brief-box.wide, html.fakeland-ccw .brief-box.wide { width:min(860px, 94vh); }
html.fakeland #tintro, html.fakeland-ccw #tintro { max-width:94vh; }
html.fakeland .qs-card, html.fakeland-ccw .qs-card { max-width:min(92vh, 520px); }

/* the (max-height:480px) compact menu above keys off the REAL viewport height,
   which is 844 in sideways mode — replicate it so the menu fits the 390-tall
   game screen instead of overflowing and crushing the list */
html.fakeland .title-top, html.fakeland-ccw .title-top { font-size:9px; letter-spacing:2px; margin-bottom:4px; }
html.fakeland .game-title, html.fakeland-ccw .game-title { font-size:34px; letter-spacing:3px; }
html.fakeland .title-sub, html.fakeland-ccw .title-sub { margin-top:5px; font-size:9px; letter-spacing:2px; }
html.fakeland .title-sim, html.fakeland-ccw .title-sim { margin-top:4px; font-size:9px; letter-spacing:2px; }
html.fakeland .title-block, html.fakeland-ccw .title-block { margin-bottom:4px; }
html.fakeland .menu-mode-title, html.fakeland-ccw .menu-mode-title { font-size:11px; margin-bottom:4px; }
html.fakeland .menu-list, html.fakeland-ccw .menu-list { gap:4px; max-height:56vw; }
html.fakeland .mbtn, html.fakeland-ccw .mbtn { padding:6px 12px; font-size:12px; }
html.fakeland .menu-footer, html.fakeland-ccw .menu-footer { margin-top:5px; }
html.fakeland #pilot-record, html.fakeland-ccw #pilot-record { font-size:10px; margin-bottom:4px; }
html.fakeland .hint, html.fakeland .x-follow, html.fakeland-ccw .hint, html.fakeland-ccw .x-follow { font-size:9px; margin-top:3px; }
html.fakeland .x-follow, html.fakeland-ccw .x-follow { display:none; }
html.fakeland #menu, html.fakeland-ccw #menu { align-items:flex-start; padding-left:6vh; }
html.fakeland #menu .title-block, html.fakeland #menu .menu-footer,
html.fakeland-ccw #menu .title-block, html.fakeland-ccw #menu .menu-footer { text-align:left; }