/* Downdraft: page shell and overlay screens. Same family as Neon Asteroids and NeonCrawl. */
:root {
  --bg: #04060d;
  --fg: #dfe9ff;
  --dim: #6f7ea6;
  /* Secondary text. --dim is 5:1 on the background, too little for 10 px labels over a lit
     scene; this is 8.7:1. --dim is kept for rules and other non-text detail. */
  --muted: #9aa9d0;
  --cyan: #3ee7ff;
  --magenta: #ff4fd8;
  --lime: #b8ff3c;
  --orange: #ffb23c;
  --red: #ff5a5a;
  --gold: #ffd700;
  --font: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  cursor: none;
  /* A touch screen: no double-tap zoom, pull to refresh, long-press menu or tap flash. */
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body.in-menu { cursor: default; }
body.no-cursor, body.no-cursor * { cursor: none !important; }

/* The height of what can be seen. On a phone 100vh is the view with the browser's toolbars
   hidden, taller than the visible area whenever they are showing, and this page cannot scroll
   to hide them. 100dvh follows the toolbars; where a browser has no dvh, 100% of the fixed
   box does the same. --vh is one hundredth of it, for the few lengths that scale with it. */
:root { --view-h: 100%; --vh: 1vh; }
@supports (height: 100dvh) {
  :root { --view-h: 100dvh; --vh: 1dvh; }
}

/* The five full-view layers take their box from one rule, so that they always agree. */
#game, #overlay, #touchpad {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--view-h);
}

#game {
  display: block;
  touch-action: none;
}

.hidden { display: none !important; }

/* ---- overlay screens ---- */
#overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}

.screen {
  width: min(960px, 94vw);
  max-height: var(--view-h);
  overflow-y: auto;
  scrollbar-width: none;
  text-align: center;
  padding: 20px 24px;
  pointer-events: auto;
  animation: fadein 0.4s ease-out;
}
.screen::-webkit-scrollbar { display: none; }

/* A screen over a live mission needs a darker ground than one over the title backdrop. */
#pause, #options, #bindings, #padtest, #changelog, #help, #achievements, #challenge, #tally, #failed, #gameover, #initials, #players {
  background: radial-gradient(ellipse at center, rgba(4, 6, 13, 0.88) 0%, rgba(4, 6, 13, 0.7) 60%, rgba(4, 6, 13, 0) 100%);
}

@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.logo {
  margin: 0;
  font-weight: 900;
  font-size: clamp(34px, 7.4vw, 96px);
  letter-spacing: 0.14em;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 6px #fff,
    0 0 18px var(--cyan),
    0 0 40px var(--cyan),
    0 0 80px rgba(62, 231, 255, 0.6);
  animation: flicker 6s infinite;
}
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.65; }
  94% { opacity: 1; }
  97% { opacity: 0.8; }
  98% { opacity: 1; }
}

.subtitle {
  margin-top: 10px;
  font-weight: 500;
  font-size: clamp(10px, 1.4vw, 15px);
  letter-spacing: 0.32em;
  color: var(--magenta);
  text-shadow: 0 0 10px var(--magenta), 0 0 24px rgba(255, 79, 216, 0.5);
}

.prompt {
  margin: 18px 0 8px;
  font-weight: 700;
  font-size: clamp(14px, 2vw, 22px);
  letter-spacing: 0.25em;
  color: var(--lime);
  text-shadow: 0 0 10px var(--lime), 0 0 30px rgba(184, 255, 60, 0.5);
}
.prompt.bad { color: var(--red); text-shadow: 0 0 10px var(--red), 0 0 30px rgba(255, 90, 90, 0.5); }
.prompt:empty { display: none; }

h2 {
  margin: 0;
  font-size: clamp(36px, 7vw, 84px);
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 20px var(--magenta), 0 0 48px var(--magenta);
}
h2.small { font-size: clamp(24px, 4vw, 44px); margin-bottom: 14px; }
h2.banner { font-size: clamp(26px, 5vw, 60px); text-shadow: 0 0 6px #fff, 0 0 20px var(--cyan), 0 0 48px var(--cyan); }
h2.good { text-shadow: 0 0 6px #fff, 0 0 20px var(--lime), 0 0 48px rgba(184, 255, 60, 0.7); }

/* ---- menus ---- */
.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 22px auto 6px;
}
.menu.inline { flex-direction: row; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

button {
  font: inherit;
  font-weight: 700;
  font-size: clamp(12px, 1.5vw, 16px);
  letter-spacing: 0.22em;
  color: var(--fg);
  background: rgba(4, 6, 13, 0.6);
  border: 1px solid rgba(62, 231, 255, 0.35);
  padding: 10px 22px;
  min-width: 260px;
  cursor: pointer;
  outline: none;
  transition: box-shadow 0.12s, border-color 0.12s, color 0.12s;
}
.menu.inline button { min-width: 0; }
button:hover { border-color: rgba(62, 231, 255, 0.7); }
/* The focused control. `.is-focus` mirrors DOM focus (src/ui/menu.ts) because :focus does not
   match until the window itself has focus, and the default control must look focused on first
   load. Not colour alone: a thick outline, and arrow marks either side of the label. */
button:focus, button:focus-visible, button.is-focus {
  color: #fff;
  border-color: var(--cyan);
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 14px rgba(62, 231, 255, 0.55), inset 0 0 18px rgba(62, 231, 255, 0.16);
  text-shadow: 0 0 8px var(--cyan);
}
.menu button:focus::before, .menu button.is-focus::before { content: '▸ '; }
.menu button:focus::after, .menu button.is-focus::after { content: ' ◂'; }
.row:focus .row-label::before, .row.is-focus .row-label::before { content: '▸ '; }

/* For screen readers only. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tiny {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--muted);
}
.tiny.warn { color: var(--orange); text-shadow: 0 0 8px rgba(255, 178, 60, 0.6); }
#audio-hint { margin-top: 10px; }
.status { min-height: 14px; }

/* ---- sound test ---- */
.soundtest-list {
  max-height: min(calc(var(--vh) * 36), 360px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(62, 231, 255, 0.45) transparent;
}
.soundtest-controls { margin-top: 8px; gap: 8px; }
.soundtest-controls button, #soundtest-body [role=tab] { font-size: clamp(10px, 1.2vw, 13px); padding: 6px 12px; }
#soundtest-body [role=tab].on { color: var(--orange); }
.soundtest-section { margin: 10px 0 2px; font-size: 11px; letter-spacing: 0.2em; color: var(--cyan); }
button.row[aria-disabled="true"] { opacity: 0.55; }

/* ---- options ---- */
.rows { display: flex; flex-direction: column; gap: 6px; width: min(620px, 92vw); margin: 0 auto; }
button.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 8px 16px;
  text-align: left;
  font-size: clamp(11px, 1.3vw, 14px);
}
.row-label { color: var(--muted); }
.row:focus .row-label, .row.is-focus .row-label { color: var(--fg); }
.row-note { margin-left: 12px; font-size: 12px; letter-spacing: 0.15em; color: var(--muted); font-weight: 500; }
.row-value { color: var(--orange); min-width: 9em; text-align: right; font-variant-numeric: tabular-nums; }
/* The arrows are always there, so it is plain where to click; they light when the row has focus. */
.row-value.range::before { content: '◄ '; color: var(--dim); }
.row-value.range::after { content: ' ►'; color: var(--dim); }
.row:focus .row-value.range::before, .row.is-focus .row-value.range::before,
.row:focus .row-value.range::after, .row.is-focus .row-value.range::after { color: var(--cyan); }

/* ---- key bindings ---- */
.bind-grid { display: flex; flex-direction: column; gap: 4px; width: min(860px, 94vw); margin: 0 auto; }
.bind-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) 3fr 2fr; gap: 12px; align-items: center; }
.bind-label { text-align: left; font-size: 11px; letter-spacing: 0.15em; color: var(--muted); }
.bind-head .bind-group, .bind-head .bind-label { font-size: 12px; letter-spacing: 0.25em; color: var(--muted); text-align: center; }
.bind-head .bind-label { text-align: left; }
.bind-group { display: flex; gap: 6px; }
button.bind {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 4px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--orange);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
button.bind.waiting { color: var(--lime); border-color: var(--lime); box-shadow: 0 0 14px rgba(184, 255, 60, 0.5); }
button.bind.conflict { color: var(--red); border-color: var(--red); }

/* ---- controller tutorial ---- */
.pad-panel { width: min(900px, 94vw); max-width: 100%; margin: 0 auto; text-align: left; font-size: 11px; letter-spacing: 0.1em; }
.pad-status { color: var(--lime); font-weight: 700; letter-spacing: 0.15em; }
.pad-name { color: var(--fg); margin-top: 4px; overflow-wrap: anywhere; }
.pad-cap { color: var(--muted); font-size: 12px; letter-spacing: 0.25em; }
.pad-num { color: var(--orange); font-variant-numeric: tabular-nums; white-space: pre; }
.pad-caption { min-height: 2.6em; margin: 10px 0 0; padding: 8px 10px; border: 1px solid rgba(62, 231, 255, 0.45); color: var(--fg); font-size: 13px; font-weight: 700; }
.pad-lessons { display: grid; gap: 3px; }
.pad-lesson { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 4px 8px; border: 1px solid rgba(62, 231, 255, 0.3); color: var(--muted); }
.pad-lesson.on { color: #04060d; background: var(--lime); border-color: var(--lime); font-weight: 900; }
.pad-keys { color: var(--orange); font-weight: 700; }
.pad-lesson.on .pad-keys { color: #04060d; }
@media (max-width: 760px) { .pad-lesson { grid-template-columns: 100px 1fr; } }
.pad-styles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
.pad-styles .pad-cap { margin-right: 6px; }
button.pad-style { min-width: 0; padding: 5px 12px; min-height: 30px; font-size: 11px; letter-spacing: 0.15em; color: var(--muted); background: transparent; border: 1px solid rgba(62, 231, 255, 0.45); cursor: pointer; font-family: inherit; }
button.pad-style:hover, button.pad-style:focus-visible { color: var(--fg); border-color: var(--cyan); }
button.pad-style[aria-pressed="true"], button.pad-style[aria-pressed="true"]:focus, button.pad-style[aria-pressed="true"]:focus-visible { color: var(--cyan); background: rgba(62, 231, 255, 0.2); border-color: var(--cyan); font-weight: 900; text-shadow: none; box-shadow: inset 0 0 0 1px var(--cyan); }
.pad-picture { margin: 4px 0 0; }
.pad-svg { display: block; width: 100%; height: auto; max-height: 52vh; }
.pad-stickbox { display: flex; gap: 12px; align-items: baseline; justify-content: center; margin: 2px 0 10px; }
.pad-body { fill: #121a3c; stroke: var(--cyan); stroke-width: 2.5; }
.pad-sheen { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.5; }
.pad-playstation .pad-body { fill: #1a1f33; }
.pad-switch .pad-body { fill: #232733; }
.pad-btn { fill: #26325f; stroke: #8fa3d8; stroke-width: 1.6; }
.pad-btn.on { fill: var(--lime); stroke: #fff; }
.pad-arm-hub { stroke: none; }
.pad-well { fill: #090d20; stroke: #4c5b8f; stroke-width: 2; }
.pad-capdish { fill: rgba(0, 0, 0, 0.35); stroke: none; }
.pad-mark { fill: none; stroke: #8fa3d8; stroke-width: 1.6; }
.pad-letter { font: 700 17px var(--font); fill: #e8eeff; }
.pad-sym { pointer-events: none; }
.pad-lead { stroke: rgba(255, 178, 60, 0.75); stroke-width: 1.3; }
.pad-dot { fill: var(--orange); }
.pad-tag { fill: rgba(4, 6, 13, 0.82); stroke: rgba(62, 231, 255, 0.35); stroke-width: 1; }
.pad-ct { font: 700 13px var(--font); fill: var(--orange); letter-spacing: 0.08em; }
.pad-cl { font: 600 11.5px var(--font); fill: var(--fg); letter-spacing: 0.05em; }
.pad-callout.on .pad-tag { fill: var(--lime); stroke: #fff; }
.pad-callout.on .pad-ct, .pad-callout.on .pad-cl { fill: #04060d; }
.pad-callout.on .pad-lead { stroke: var(--lime); stroke-width: 2; }
/* The list says it all again in words: it is for screen readers beside the picture, and for a phone. */
@media (min-width: 761px) {
  .pad-lessons { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- controller tutorial pages (#420): the tab strip, the keyboard and the touch screen. Nothing here animates. ---- */
.pad-tabs { margin: 0 0 8px; gap: 8px; }
.pad-note { margin: 6px 0 0; color: var(--muted); font-size: 11px; letter-spacing: 0.1em; }
.kb-picture { margin-top: 6px; }
.kb-svg { display: block; width: 100%; height: auto; max-height: 40vh; }
.kb-cap { fill: #1a2350; stroke: #4c5b8f; stroke-width: 1.6; }
.kb-key.used .kb-cap { fill: #26325f; stroke: var(--orange); stroke-width: 2; }
.kb-key.on .kb-cap { fill: var(--lime); stroke: #fff; stroke-width: 2.4; }
.kb-name { font: 700 15px var(--font); fill: #e8eeff; }
.kb-name.small { font-size: 11px; }
.kb-tag { font: 700 10.5px var(--font); fill: var(--orange); letter-spacing: 0.04em; }
.kb-key.on .kb-name, .kb-key.on .kb-tag { fill: #04060d; }
.kb-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 3px 8px; margin-top: 6px; }
.kb-row { display: grid; grid-template-columns: minmax(84px, auto) 1fr; min-width: 0; overflow-wrap: anywhere; gap: 8px; padding: 3px 8px; border: 1px solid rgba(62, 231, 255, 0.3); color: var(--muted); }
.kb-keys { color: var(--orange); font-weight: 700; }
.kb-row.on { color: #04060d; background: var(--lime); border-color: var(--lime); font-weight: 900; }
.kb-row.on .kb-keys { color: #04060d; }
.tp-box { margin-top: 6px; }
.tp-stage {
  position: relative;
  width: min(100%, calc(var(--vh) * 50 * 842 / 389));
  aspect-ratio: 842 / 389;
  margin: 0 auto;
  container-type: inline-size;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  border: 2px solid rgba(62, 231, 255, 0.45);
  border-radius: 14px;
  background: rgba(4, 6, 13, 0.55);
}
/* The stick's half, as the pad has it. */
.tp-half { position: absolute; top: 0; bottom: 0; width: 50%; background: rgba(62, 231, 255, 0.05); pointer-events: none; }
.tp-right .tp-half { left: 0; border-right: 1px dashed rgba(62, 231, 255, 0.35); }
.tp-left .tp-half { right: 0; border-left: 1px dashed rgba(62, 231, 255, 0.35); }
.tp-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid rgba(62, 231, 255, 0.6);
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(4, 6, 13, 0.35);
  font-weight: 900;
  font-size: max(9px, 2.3cqw);
  letter-spacing: 0.1em;
  opacity: 0.85;
  pointer-events: none;
}
.tp-btn svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tp-btn.on { opacity: 1; color: #fff; border-color: #fff; background: rgba(62, 231, 255, 0.4); box-shadow: 0 0 18px var(--cyan); }
.tp-stick { border-width: 1px; background: rgba(4, 6, 13, 0.25); }
.tp-knob { position: absolute; left: 50%; top: 50%; width: 43%; height: 43%; transform: translate(-50%, -50%); border: 2px solid var(--cyan); border-radius: 50%; background: rgba(62, 231, 255, 0.18); }
.tp-fire { color: var(--magenta); border-color: rgba(255, 79, 216, 0.65); }
.tp-fire.on { background: rgba(255, 79, 216, 0.45); box-shadow: 0 0 18px var(--magenta); }
.tp-special, .tp-weapon { color: var(--orange); border-color: rgba(255, 178, 60, 0.65); }
.tp-special.on, .tp-weapon.on { background: rgba(255, 178, 60, 0.45); box-shadow: 0 0 18px var(--orange); }
.tp-use { color: var(--lime); border-color: rgba(184, 255, 58, 0.65); }
.tp-use.on { background: rgba(184, 255, 58, 0.4); box-shadow: 0 0 18px var(--lime); }
.tp-pause { color: var(--fg); border-color: rgba(223, 233, 255, 0.5); }
.tp-label { position: absolute; transform: translate(-50%, -100%); margin-top: -2px; font: 700 max(9px, 1.7cqw) var(--font); letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; pointer-events: none; }
@media (max-height: 480px) {
  #padtest { padding-top: 10px; padding-bottom: 10px; }
  .pad-tabs { margin-bottom: 4px; }
  .pad-tabs [role=tab] { padding: 3px 14px; }
  .pad-caption { margin-top: 4px; padding: 4px 8px; min-height: 2.2em; font-size: 12px; }
  .pad-note { display: none; }   /* the caption's prompt says it */
  .kb-svg { max-height: none; }   /* full width: the keys' words stay legible and the screen scrolls */
  .kb-legend { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .kb-row { padding: 1px 6px; }
  .tp-stage { width: min(100%, calc(var(--vh) * 54 * 842 / 389)); }
}
body.cel .kb-cap { fill: #1b2370; stroke: var(--ink); stroke-width: 2.5; }
body.cel .kb-key.used .kb-cap { stroke: var(--gold); }
body.cel .kb-key.on .kb-cap { fill: var(--lime); stroke: #fff; }
body.cel .kb-name, body.cel .kb-tag { font-family: var(--font-hd); font-weight: 400; }
body.cel .kb-tag { font-size: 12px; fill: var(--gold); }
body.cel .kb-key.on .kb-name, body.cel .kb-key.on .kb-tag { fill: var(--ink); }
body.cel .kb-row { border: 2px solid var(--ink); background: var(--panel); box-shadow: 3px 3px 0 var(--ink); }
body.cel .kb-row.on { color: var(--ink); background: var(--lime); box-shadow: 3px 3px 0 var(--ink), 0 0 0 2px #fff; }
body.cel .tp-stage { border: 3px solid var(--ink); background: rgba(15, 20, 64, 0.7); box-shadow: 3px 3px 0 var(--ink); }
body.cel .tp-btn { border: 3px solid var(--ink); background: #2f3bb8; color: #fff; font-family: var(--font-hd); font-weight: 400; opacity: 1; }
body.cel .tp-stick { background: rgba(15, 20, 64, 0.5); border-width: 4px; }
body.cel .tp-knob { border: 4px solid var(--ink); background: var(--cyan); }
body.cel .tp-fire { background: #e0407e; }
body.cel .tp-special, body.cel .tp-weapon { background: #ffc61a; color: var(--ink); }
body.cel .tp-use { background: #7fb81c; color: var(--ink); }
body.cel .tp-btn.on { border-color: #fff; background: var(--lime); color: var(--ink); box-shadow: 0 0 0 3px var(--gold); }
body.cel .tp-label { font-family: var(--font-hd); font-weight: 400; color: var(--fg); }

/* ---- changelog: the version buttons and the release cards ---- */
.foot { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
button.version-link {
  min-width: 0;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--muted);
  background: transparent;
  border: 1px dashed rgba(62, 231, 255, 0.4);
}
button.version-link:hover { color: var(--cyan); border-style: solid; }
/* The official page. On the title it takes focus like a button: an outline, not colour alone. */
.site-link { font-size: 11px; letter-spacing: 0.15em; color: var(--cyan); text-decoration: none; padding: 4px 6px; outline: none; }
.site-link:hover { text-decoration: underline; text-shadow: 0 0 8px var(--cyan); }
.site-link:focus, .site-link.is-focus { color: #fff; outline: 2px solid #fff; outline-offset: 2px; text-decoration: underline; text-shadow: 0 0 8px var(--cyan); }
.changelog-list {
  width: min(720px, 92vw);
  max-height: min(calc(var(--vh) * 56), 560px);
  margin: 12px auto 0;
  padding: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(62, 231, 255, 0.45) transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.changelog-card {
  padding: 10px 16px 12px;
  background: rgba(4, 6, 13, 0.82);
  border: 1px solid rgba(62, 231, 255, 0.25);
  border-left: 3px solid rgba(62, 231, 255, 0.55);
}
.changelog-card.current { border-color: rgba(184, 255, 60, 0.5); border-left: 4px solid var(--lime); box-shadow: 0 0 14px rgba(184, 255, 60, 0.15); }
.changelog-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.changelog-badge, .changelog-now { padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; border: 1px solid; }
.changelog-badge { color: var(--cyan); font-variant-numeric: tabular-nums; }
.changelog-card.current .changelog-badge, .changelog-now { color: var(--lime); }
.changelog-date { margin-left: auto; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.changelog-title { margin: 8px 0 6px; font-size: 14px; letter-spacing: 0.12em; color: #fff; }
/* Sentences, not labels: the system face reads better than Orbitron at this size. */
.changelog-notes { margin: 0; padding-left: 18px; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.5; color: var(--fg); }
.changelog-notes li + li { margin-top: 3px; }

/* ---- help: cards of terms and what they mean ---- */
.help-card { padding: 10px 16px 12px; background: rgba(4, 6, 13, 0.82); border: 1px solid rgba(62, 231, 255, 0.25); border-left: 3px solid rgba(62, 231, 255, 0.55); }
.help-title { margin: 0 0 6px; font-size: 14px; letter-spacing: 0.12em; color: var(--cyan); }
.help-intro { margin: 0 0 8px; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.5; color: var(--muted); }
.help-entries { margin: 0; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.5; }
.help-entries dt { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: #fff; }
.help-entries dd { margin: 1px 0 0; color: var(--fg); }
body.cel .help-card { background: var(--panel); border: 3px solid var(--ink); border-left: 7px solid var(--band); box-shadow: 5px 5px 0 var(--ink); }
body.cel .help-title { font-family: var(--font-hd); font-weight: 400; font-size: 20px; letter-spacing: 0.1em; color: var(--gold); }
body.cel .help-entries dt { color: #fff; font-weight: 800; }

/* ---- the commander's briefing (#394): a terminal-style panel of typed text ---- */
#commander { background: radial-gradient(ellipse at center, rgba(4, 6, 13, 0.88) 0%, rgba(4, 6, 13, 0.7) 60%, rgba(4, 6, 13, 0) 100%); }
body.cel #commander { background: rgba(9, 12, 44, 0.9); border: 3px solid var(--ink); border-top: 8px solid var(--band); box-shadow: 6px 6px 0 var(--ink); width: min(940px, 94vw); max-height: calc(var(--view-h) - 16px); }
.cmd-body { position: relative; max-height: min(calc(var(--vh) * 58), 600px); padding: 10px 16px 12px; touch-action: pan-y; background: rgba(4, 6, 13, 0.82); border: 1px solid rgba(62, 231, 255, 0.25); border-left: 3px solid rgba(62, 231, 255, 0.55); gap: 0; font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.55; color: var(--fg); }
body.cel .cmd-body { background: var(--panel); border: 3px solid var(--ink); border-left: 7px solid var(--band); box-shadow: 5px 5px 0 var(--ink); }
.cmd-section + .cmd-section { margin-top: 12px; }
.cmd-h { margin: 0 0 4px; font-size: 13px; letter-spacing: 0.14em; color: var(--cyan); }
body.cel .cmd-h { font-family: var(--font-hd); font-weight: 400; font-size: 20px; letter-spacing: 0.1em; color: var(--gold); text-align: left; }
.cmd-p { margin: 0 0 6px; }
.cmd-list { margin: 0; padding-left: 22px; }
.cmd-list li + li { margin-top: 5px; }
.cmd-rest { visibility: hidden; }
#commander-from { margin-top: 0; }
/* The commander's portrait (#410): 48 logical pixels shown at 3x, beside the text; above it on a narrow portrait screen. */
.cmd-layout { display: flex; gap: 14px; align-items: flex-start; width: 100%; }
.cmd-layout .cmd-body { flex: 1 1 0; min-width: 0; }
.cmd-portrait { margin: 0; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; }
.cmd-avatar { width: 144px; height: 144px; image-rendering: pixelated; background: #0a0f2e; border: 3px solid #1b2a5c; border-radius: 12px; box-shadow: 0 0 0 1px rgba(62, 231, 255, 0.4), inset 0 0 14px rgba(0, 0, 0, 0.7); }
.cmd-plate { font-size: 11px; letter-spacing: 0.1em; line-height: 1.2; text-align: center; color: var(--cyan); background: #0b0b14; border: 1px solid rgba(62, 231, 255, 0.5); padding: 3px 6px; }
body.cel .cmd-avatar { border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
body.cel .cmd-plate { font-family: var(--font-hd); font-size: 14px; color: var(--gold); border: 3px solid var(--ink); background: var(--panel); }
@media (max-width: 600px) and (orientation: portrait) {
  .cmd-layout { flex-direction: column; gap: 8px; align-items: stretch; }
  .cmd-layout .cmd-body { flex: 0 1 auto; width: auto; }
  .cmd-portrait { flex-direction: row; width: auto; align-self: flex-start; gap: 10px; }
  .cmd-avatar { width: 96px; height: 96px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .cmd-layout { gap: 10px; }
  .cmd-portrait { width: 100px; }
  .cmd-avatar { width: 96px; height: 96px; }
  .cmd-plate { font-size: 9px; padding: 2px 3px; }
  body.cel .cmd-plate { font-size: 11px; }
}
@media (max-width: 600px) {
  .cmd-body { font-size: 14px; padding: 8px 10px 10px; max-height: calc(var(--vh) * 50); }
  body.cel .cmd-h { font-size: 17px; }
  .cmd-list { padding-left: 18px; }
}

/* ---- tables: scores and tally ---- */
.results {
  margin: 8px auto 0;
  border-collapse: collapse;
  min-width: min(560px, 90vw);
  font-size: 14px;
  letter-spacing: 0.1em;
  background: rgba(4, 6, 13, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.results th { font-size: 12px; letter-spacing: 0.25em; color: var(--muted); font-weight: 500; padding: 10px 14px 6px; }
.results td { padding: 6px 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.results td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--gold); }
.results td.rank, .results td.missions, .results td.difficulty { color: var(--muted); font-size: 11px; }
.results td.name { font-weight: 900; letter-spacing: 0.3em; color: var(--cyan); }
.results tr.new td { color: #fff; text-shadow: 0 0 10px var(--lime); background: rgba(184, 255, 60, 0.08); }
.results.tally td.label { text-align: left; color: var(--fg); }
.results.tally tr.pending { visibility: hidden; }
.results.tally tr.good td.label { color: var(--lime); }
.results.tally tr.bad td.label, .results.tally tr.bad td.num { color: var(--red); }
.results.tally tr.total td { font-weight: 900; border-top: 1px solid rgba(255, 255, 255, 0.3); }

/* ---- the medal row (#499): earned medals lit and ticked, the rest greyed; the words say it too ---- */
.medals { list-style: none; margin: 12px auto 0; padding: 0; width: min(560px, 90vw); font-size: 13px; letter-spacing: 0.1em; background: rgba(4, 6, 13, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); }
.medals:empty { display: none; }
.medal { display: flex; justify-content: space-between; gap: 14px; padding: 6px 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.medal:first-child { border-top: 0; }
.medal-name { font-weight: 900; white-space: nowrap; }
.medal-rule { text-align: right; }
.medal.locked .medal-name, .medal.locked .medal-rule { color: var(--muted); }
.medal.earned .medal-name { color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); }
.medal.earned .medal-rule { color: var(--fg); }

.loss-report { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 14px; letter-spacing: 0.12em; color: var(--fg); max-width: 90vw; margin: 4px auto; }
.loss-report:empty { display: none; }

.people { min-height: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 560px; margin: 0 auto; }
.prisoner { width: 14px; height: 22px; fill: none; stroke: var(--lime); stroke-width: 1.3; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--lime)); animation: wave 0.65s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes wave { from { transform: rotate(-5deg); } to { transform: rotate(5deg) translateY(-1px); } }

/* ---- initials ---- */
.initials { display: flex; justify-content: center; gap: 6px; margin: 18px 0 8px; }
button.initial {
  min-width: 0;
  width: clamp(28px, 6.4vw, 60px);
  padding: 8px 0;
  font-size: clamp(20px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: 0;
  color: var(--muted);
  box-shadow: none;
  border-color: rgba(62, 231, 255, 0.25);
  text-shadow: none;
}
button.initial:focus, button.initial.is-focus { outline: none; }
button.initial.current {
  color: #fff;
  border-color: var(--cyan);
  outline: 2px solid #fff;
  outline-offset: 2px;
  text-shadow: 0 0 8px #fff, 0 0 24px var(--cyan);
  box-shadow: 0 0 18px rgba(62, 231, 255, 0.5), inset 0 0 18px rgba(62, 231, 255, 0.15);
}

/* ---- loading bar (#425): over everything while the game files come in ---- */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--view-h);
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.loading-box { width: min(420px, 80vw); text-align: center; }
.loading-bar {
  margin: 14px 0 18px;
  height: 8px;
  border: 1px solid rgba(62, 231, 255, 0.45);
  background: rgba(4, 6, 13, 0.8);
}
#loading-fill {
  height: 100%;
  width: 0;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}
#loading.failed .loading-bar { display: none; }
#loading.failed #loading-label { color: var(--red); text-shadow: 0 0 10px var(--red); letter-spacing: 0.2em; word-break: break-all; }
@media (prefers-reduced-motion: no-preference) { #loading-fill { transition: width 0.15s linear; } }

/* ---- toast ---- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 6;
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--cyan);
  background: rgba(4, 6, 13, 0.8);
  border: 1px solid rgba(62, 231, 255, 0.45);
  text-shadow: 0 0 8px var(--cyan);
  pointer-events: none;
  white-space: nowrap;
}

/* ---- on-screen gamepad: shown in play once the screen has been touched ---- */
#touchpad {
  /* One button's width. A phone on its side is about 360 px high. */
  --u: clamp(52px, calc(var(--vh) * 14), 76px);
  --edge-r: env(safe-area-inset-right, 0px);
  --edge-l: env(safe-area-inset-left, 0px);
  --edge-b: env(safe-area-inset-bottom, 0px);
  z-index: 5;
  touch-action: none;
}
/* At rest, bottom left; under a thumb the script moves it to where the thumb landed. Twice
   TOUCH_STICK_RADIUS (src/input/touch.ts) across. */
.touch-stick {
  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + 112px);
  top: calc(100% - var(--edge-b) - 104px);
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  border: 1px solid rgba(62, 231, 255, 0.45);
  border-radius: 50%;
  background: rgba(4, 6, 13, 0.25);
  box-shadow: 0 0 14px rgba(62, 231, 255, 0.2), inset 0 0 18px rgba(62, 231, 255, 0.08);
  opacity: 0.55;
  pointer-events: none;
}
.touch-stick.on { opacity: 0.95; border-color: var(--cyan); }
.touch-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  background: rgba(62, 231, 255, 0.18);
  box-shadow: 0 0 12px rgba(62, 231, 255, 0.6);
}
.touch-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--u);
  height: var(--u);
  border: 2px solid rgba(62, 231, 255, 0.6);
  border-radius: 50%;
  color: var(--cyan);
  background: rgba(4, 6, 13, 0.35);
  box-shadow: 0 0 12px rgba(62, 231, 255, 0.25), inset 0 0 14px rgba(62, 231, 255, 0.1);
  font-weight: 900;
  font-size: calc(var(--u) * 0.26);
  letter-spacing: 0.1em;
  opacity: 0.7;
}
.touch-btn svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
/* Held: filled and brighter, not colour alone. */
.touch-btn.on { opacity: 1; color: #fff; border-color: #fff; background: rgba(62, 231, 255, 0.35); box-shadow: 0 0 22px var(--cyan); }
.touch-fire {
  right: calc(var(--edge-r) + var(--u) * 0.4);
  bottom: calc(var(--edge-b) + var(--u) * 0.4);
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 1.5);
  color: var(--magenta);
  border-color: rgba(255, 79, 216, 0.65);
  box-shadow: 0 0 12px rgba(255, 79, 216, 0.3), inset 0 0 14px rgba(255, 79, 216, 0.12);
}
.touch-fire.on { background: rgba(255, 79, 216, 0.4); box-shadow: 0 0 22px var(--magenta); }
/* The special weapon: beside Fire, and the cycle button a little way off. At 667 x 375 both clear
   the three facing buttons above and the stick on the left. */
.touch-special {
  right: calc(var(--edge-r) + var(--u) * 2.05);
  bottom: calc(var(--edge-b) + var(--u) * 0.4);
  color: var(--orange);
  border-color: rgba(255, 178, 60, 0.65);
  box-shadow: 0 0 12px rgba(255, 178, 60, 0.3), inset 0 0 14px rgba(255, 178, 60, 0.12);
  font-size: calc(var(--u) * 0.22);
}
.touch-special.on { background: rgba(255, 178, 60, 0.4); box-shadow: 0 0 22px var(--orange); }
.touch-weapon {
  right: calc(var(--edge-r) + var(--u) * 3.25);
  bottom: calc(var(--edge-b) + var(--u) * 0.5);
  width: calc(var(--u) * 0.8);
  height: calc(var(--u) * 0.8);
  color: var(--orange);
  border-color: rgba(255, 178, 60, 0.5);
  box-shadow: none;
}
.touch-face-left, .touch-face-front, .touch-face-right { bottom: calc(var(--edge-b) + var(--u) * 2.15); }
/* The Use button (#354): above the facing buttons, under the pause button. The label above it says what it would do. */
.touch-use {
  right: calc(var(--edge-r) + var(--u) * 0.3);
  bottom: calc(var(--edge-b) + var(--u) * 3.4);
  color: var(--lime, #b8ff3a);
  border-color: rgba(184, 255, 58, 0.65);
  box-shadow: 0 0 12px rgba(184, 255, 58, 0.25), inset 0 0 14px rgba(184, 255, 58, 0.1);
  font-size: calc(var(--u) * 0.24);
}
.touch-use.idle { opacity: 0.4; }
.touch-use .use-ctx {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 3px;
  white-space: nowrap;
  font-size: calc(var(--u) * 0.2);
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 4px #000, 0 0 2px #000;
  pointer-events: none;
}
.touch-use .use-ctx:empty { display: none; }
.touch-face-right { right: calc(var(--edge-r) + var(--u) * 0.3); }
.touch-face-front { right: calc(var(--edge-r) + var(--u) * 1.45); }
.touch-face-left { right: calc(var(--edge-r) + var(--u) * 2.6); }
.touch-pause {
  right: calc(var(--edge-r) + var(--u) * 0.3);
  top: calc(env(safe-area-inset-top, 0px) + var(--vh) * 17);
  width: calc(var(--u) * 0.75);
  height: calc(var(--u) * 0.75);
  color: var(--fg);
  border-color: rgba(223, 233, 255, 0.45);
  box-shadow: none;
}

/* TOUCH HANDS: LEFT (src/ui/touchpad.ts adds `touch-left`) mirrors the whole pad: the stick rests
   at the bottom right, the buttons and pause go to the left. The three facing buttons keep their
   left-to-right order (left, camera, right) so each still sits on the side it turns the chopper to.
   The look (neon or cel) only paints; every position is here. */
#touchpad.touch-left .touch-stick { left: calc(100% - var(--edge-r) - 112px); }
#touchpad.touch-left .touch-fire { right: auto; left: calc(var(--edge-l) + var(--u) * 0.4); }
#touchpad.touch-left .touch-special { right: auto; left: calc(var(--edge-l) + var(--u) * 2.05); }
#touchpad.touch-left .touch-weapon { right: auto; left: calc(var(--edge-l) + var(--u) * 3.25); }
#touchpad.touch-left .touch-face-left { right: auto; left: calc(var(--edge-l) + var(--u) * 0.3); }
#touchpad.touch-left .touch-face-front { right: auto; left: calc(var(--edge-l) + var(--u) * 1.45); }
#touchpad.touch-left .touch-face-right { right: auto; left: calc(var(--edge-l) + var(--u) * 2.6); }
#touchpad.touch-left .touch-use { right: auto; left: calc(var(--edge-l) + var(--u) * 0.3); }
#touchpad.touch-left .touch-use .use-ctx { right: auto; left: 0; }
#touchpad.touch-left .touch-pause { right: auto; left: calc(var(--edge-l) + var(--u) * 0.3); }

/* Controls that only a touch screen needs (the initials' letter steppers). */
.touch-only { display: none; }
body.touch .touch-only { display: flex; }

@media (max-height: 640px) {
  .menu { margin-top: 14px; gap: 7px; }
  button { padding: 7px 18px; }
}

/* The reduced-flashing option stops the logo's flicker (the renderer drops its own flashes). */
body.reduced-flash .logo { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .logo, .prisoner, .screen { animation: none; }
  button { transition: none; }
}

/* =====================================================================================
   The look of the DOM screens (#140, live since #142). Everything below is scoped under `body.cel`,
   which index.html puts on <body>: the scope is kept because the base rules above still set the
   layout and the older colours, and these win them by specificity (an unscoped copy lost the
   heading style). Flat navy panels with hard bands, near-black ink borders and hard offset
   shadows (no glow), lettering in a comic display face (Bangers, linked in index.html; the system
   sans-serif and Impact stand in until or unless it loads) outlined in ink with stacked
   text-shadows. Every text colour is at least 4.5:1 against the page background.
   ===================================================================================== */
body.cel {
  --ink: #05040c;
  --panel: #0f1440;
  --panel-lit: #1a2270;
  --band: #27329a;
  --fg: #ffffff;
  --muted: #bcc5f4;
  --dim: #8d99e0;
  --cyan: #12c7a2;
  --magenta: #ff7fe0;
  --lime: #bff55a;
  --orange: #ffb23c;
  --red: #ff6a6a;
  --gold: #ffc61a;
  --font-ui: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-hd: 'Bangers', Impact, 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--font-ui);
  background: var(--bg);
}
/* A hard ink outline round lettering, built from eight shadows, and a hard offset behind it. */
body.cel .logo, body.cel h2, body.cel .prompt, body.cel .subtitle {
  font-family: var(--font-hd);
  font-weight: 400;
  --o: 0.035em;
  text-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 var(--ink), var(--o) calc(var(--o) * -1) 0 var(--ink),
    calc(var(--o) * -1) var(--o) 0 var(--ink), var(--o) var(--o) 0 var(--ink),
    0 calc(var(--o) * -1) 0 var(--ink), 0 var(--o) 0 var(--ink),
    calc(var(--o) * -1) 0 0 var(--ink), var(--o) 0 0 var(--ink),
    calc(var(--o) * 2.2) calc(var(--o) * 2.6) 0 var(--ink);
}
body.cel .logo {
  color: var(--gold);
  font-size: clamp(44px, 17vw, 120px);
  letter-spacing: 0.06em;
  --o: 0.05em;
  transform: rotate(-2deg);
  animation: none;
}
/* DOWNDRAFT: DOWN in chrome-white, DRAFT in gold, both slanted, with ink-edged streaks of air falling
   behind the word (the .logo-wrap pseudo-elements). The streaks fall slowly on a loop; the
   reduced-flash and reduced-motion options below stop them. */
body.cel .logo { display: inline-block; font-style: italic; position: relative; z-index: 1; white-space: nowrap; }
body.cel .logo .dn { color: #e8f4ff; }
body.cel .logo .df { color: var(--gold); }
body.cel .logo-wrap { position: relative; }
body.cel .logo-wrap::before, body.cel .logo-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -6%; bottom: 0;
  pointer-events: none;
  background:
    linear-gradient(#eaf6ff, #eaf6ff) 6% 0 / 0.5% 34% no-repeat,
    linear-gradient(#eaf6ff, #eaf6ff) 19% 40% / 0.5% 30% no-repeat,
    linear-gradient(#eaf6ff, #eaf6ff) 33% 8% / 0.5% 26% no-repeat,
    linear-gradient(#eaf6ff, #eaf6ff) 52% 52% / 0.5% 34% no-repeat,
    linear-gradient(#eaf6ff, #eaf6ff) 67% 4% / 0.5% 30% no-repeat,
    linear-gradient(#eaf6ff, #eaf6ff) 81% 46% / 0.5% 28% no-repeat,
    linear-gradient(#eaf6ff, #eaf6ff) 94% 12% / 0.5% 34% no-repeat;
  opacity: 0.55;
  animation: downdraft 2.6s linear infinite;
}
body.cel .logo-wrap::after { transform: translateY(-50%); animation-delay: -1.3s; opacity: 0.3; }
@keyframes downdraft { from { background-position-y: 0, 40%, 8%, 52%, 4%, 46%, 12%; } to { background-position-y: 100%, 140%, 108%, 152%, 104%, 146%, 112%; } }
body.cel.reduced-flash .logo-wrap::before, body.cel.reduced-flash .logo-wrap::after { animation: none; }
body.cel .subtitle {
  display: inline-block;
  margin-top: 16px;
  padding: 5px 18px;
  font-size: clamp(11px, 1.5vw, 17px);
  letter-spacing: 0.22em;
  color: var(--magenta);
  background: var(--ink);
  transform: skewX(-8deg);
  --o: 0;
  text-shadow: none;
}
body.cel .prompt { color: var(--lime); font-size: clamp(16px, 2.2vw, 26px); letter-spacing: 0.12em; --o: 0.05em; }
body.cel .prompt.bad { color: var(--red); }
body.cel h2 { color: #fff; font-size: clamp(40px, 7.4vw, 92px); letter-spacing: 0.1em; --o: 0.04em; }
body.cel h2.small { font-size: clamp(28px, 4.6vw, 52px); }
body.cel h2.banner { color: var(--gold); }
body.cel h2.good { color: var(--lime); }

/* Buttons: two flat bands, an ink border, a hard shadow. The focused one lights up and carries
   the outline and the arrow marks (not colour alone). */
body.cel button {
  font-family: var(--font-hd);
  font-weight: 400;
  font-size: clamp(17px, 2.1vw, 24px);
  letter-spacing: 0.1em;
  color: #fff;
  background: linear-gradient(to bottom, var(--band) 0 50%, var(--panel-lit) 50% 100%);
  border: 3px solid var(--ink);
  border-radius: 3px;
  box-shadow: 4px 4px 0 var(--ink);
  text-shadow: 0 2px 0 var(--ink);
  transition: none;
}
body.cel button:hover { background: linear-gradient(to bottom, #3a47c8 0 50%, #2a35a8 50% 100%); border-color: var(--ink); }
body.cel button:focus, body.cel button:focus-visible, body.cel button.is-focus {
  color: #fff;
  background: linear-gradient(to bottom, #4656e0 0 50%, #2f3bb8 50% 100%);
  border-color: var(--gold);
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 4px 4px 0 var(--ink);
  text-shadow: 0 2px 0 var(--ink);
}
body.cel .menu { gap: 12px; }
body.cel button.row, body.cel button.bind, body.cel button.version-link {
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: 0.06em;
}
body.cel button.version-link { color: var(--muted); background: var(--panel); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
body.cel button.version-link:hover { color: #fff; border-style: solid; }
body.cel .row-label { color: var(--muted); }
body.cel .row-value { color: var(--orange); }
body.cel .row-value.range::before, body.cel .row-value.range::after { color: var(--dim); }
body.cel .row:focus .row-value.range::before, body.cel .row.is-focus .row-value.range::before,
body.cel .row:focus .row-value.range::after, body.cel .row.is-focus .row-value.range::after { color: var(--gold); }
body.cel button.bind { color: var(--orange); }
body.cel button.bind.waiting { color: var(--lime); border-color: var(--lime); box-shadow: 4px 4px 0 var(--ink); }
body.cel button.bind.conflict { color: var(--red); border-color: var(--red); }

/* Panels and cards. */
body.cel .changelog-card, body.cel .results {
  background: var(--panel);
  border: 3px solid var(--ink);
  border-top: 7px solid var(--band);
  box-shadow: 5px 5px 0 var(--ink);
  backdrop-filter: none;
}
body.cel .results th { color: var(--muted); font-weight: 800; }
body.cel .tiny { color: var(--muted); font-weight: 600; }
body.cel .tiny.warn { color: var(--orange); text-shadow: none; }
body.cel .site-link { color: var(--cyan); font-weight: 700; }
body.cel .site-link:hover, body.cel .site-link:focus, body.cel .site-link.is-focus { color: #fff; text-shadow: none; }
body.cel #pause, body.cel #options, body.cel #bindings, body.cel #padtest, body.cel #changelog, body.cel #help, body.cel #achievements, body.cel #challenge,
body.cel #tally, body.cel #failed, body.cel #gameover, body.cel #initials, body.cel #players {
  /* A framed comic panel over the picture, not a soft vignette. */
  background: rgba(9, 12, 44, 0.9);
  border: 3px solid var(--ink);
  border-top: 8px solid var(--band);
  box-shadow: 6px 6px 0 var(--ink);
  width: min(940px, 94vw);
  max-height: calc(var(--view-h) - 16px);
}
body.cel #audio-hint { display: inline-block; padding: 5px 14px; background: var(--ink); border-radius: 2px; }

/* Changelog. */
body.cel .changelog-card { border-left: 7px solid var(--band); }
body.cel .changelog-card.current { border-color: var(--ink); border-left: 7px solid var(--lime); box-shadow: 5px 5px 0 var(--ink); }
body.cel .changelog-badge, body.cel .changelog-now { border: 2px solid var(--ink); background: var(--panel-lit); font-weight: 800; }
body.cel .changelog-badge { color: var(--gold); }
body.cel .changelog-card.current .changelog-badge, body.cel .changelog-now { color: var(--lime); }
body.cel .changelog-title { font-family: var(--font-hd); font-weight: 400; font-size: 20px; letter-spacing: 0.1em; color: #fff; }
body.cel .changelog-list { scrollbar-color: var(--band) transparent; }

/* High scores and the tally. */
body.cel .results td { border-top: 2px solid var(--ink); font-weight: 600; }
body.cel .results td.name { color: var(--cyan); font-family: var(--font-hd); font-weight: 400; letter-spacing: 0.2em; font-size: 18px; }
body.cel .results td.num { color: var(--gold); font-weight: 800; }
body.cel .results tr.new td { color: #fff; text-shadow: none; background: rgba(191, 245, 90, 0.16); }
body.cel .results.tally tr.good td.label { color: var(--lime); }
body.cel .results.tally tr.bad td.label, body.cel .results.tally tr.bad td.num { color: var(--red); }
body.cel .results.tally tr.total td { border-top: 3px solid var(--gold); font-weight: 900; }
body.cel .prisoner { stroke: var(--lime); stroke-width: 2.2; filter: drop-shadow(1.5px 1.5px 0 var(--ink)); }

/* Initials. */
body.cel button.initial { font-family: var(--font-hd); font-size: clamp(22px, 4.4vw, 44px); color: var(--muted); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
body.cel button.initial.current {
  color: #fff;
  background: linear-gradient(to bottom, #4656e0 0 50%, #2f3bb8 50% 100%);
  border-color: var(--gold);
  outline: 2px solid #fff;
  text-shadow: 0 3px 0 var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

/* The debug icon (#215): a small ink-outlined bug on a coloured disc, bottom left, above the canvas, the touch pad and the toast.
   It takes no tap. At 22 px and 3 px in from the corner it stays clear of the round FIRE button of the left-handed touch layout
   (which starts 0.4 buttons, at least 21 px, in from the edge). */
body.cel #debug-icon {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 3px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 3px);
  width: 22px;
  height: 22px;
  z-index: 8;
  pointer-events: none;
}
body.cel #debug-icon svg { display: block; width: 100%; height: 100%; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
body.cel #debug-icon .bug-disc { fill: var(--gold); }
body.cel #debug-icon .bug-body { fill: #e0407e; }
body.cel #debug-icon .bug-legs, body.cel #debug-icon .bug-back { fill: none; }

/* Toast. */
body.cel #toast {
  font-family: var(--font-hd);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: var(--panel);
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  text-shadow: 0 2px 0 var(--ink);
}

/* Controller test. */
body.cel .pad-caption, body.cel .pad-lesson { border: 2px solid var(--ink); background: var(--panel); }
body.cel .pad-lesson.on { color: var(--ink); background: var(--lime); border-color: var(--ink); }
body.cel button.pad-style { min-width: 0; padding: 5px 12px; min-height: 30px; border: 2px solid var(--ink); background: var(--panel); color: var(--fg); font-family: var(--font-hd); font-size: 15px; letter-spacing: 0.08em; box-shadow: 3px 3px 0 var(--ink); }
body.cel button.pad-style[aria-pressed="true"], body.cel button.pad-style[aria-pressed="true"]:focus, body.cel button.pad-style[aria-pressed="true"]:focus-visible { background: var(--band); color: var(--lime); border-color: var(--lime); text-shadow: none; box-shadow: 3px 3px 0 var(--ink); }
body.cel .pad-body { stroke: var(--ink); stroke-width: 4; fill: #2a3380; }
body.cel .pad-playstation .pad-body { fill: #2c3a8f; }
body.cel .pad-switch .pad-body { fill: #3a2f8a; }
body.cel .pad-sheen { stroke: rgba(255, 255, 255, 0.22); }
body.cel .pad-btn { stroke: var(--ink); stroke-width: 2.5; fill: #1b2370; }
body.cel .pad-btn.on { fill: var(--lime); }
body.cel .pad-well { stroke: var(--ink); stroke-width: 3; fill: #0a0e30; }
body.cel .pad-tag { fill: var(--panel); stroke: var(--ink); stroke-width: 2.5; }
body.cel .pad-ct { font-family: var(--font-hd); font-weight: 400; font-size: 15px; fill: var(--gold); }
body.cel .pad-cl { font-weight: 700; }
body.cel .pad-lead { stroke: var(--ink); stroke-width: 3.5; }
body.cel .pad-callout.on .pad-lead { stroke: var(--lime); stroke-width: 3.5; }
body.cel .pad-callout.on .pad-tag { fill: var(--lime); stroke: var(--ink); }
body.cel .pad-letter { font-family: var(--font-hd); font-weight: 400; font-size: 20px; }
body.cel .pad-status { color: var(--lime); }

/* The on-screen gamepad: chunky ink-rimmed discs. */
body.cel .touch-stick { border: 4px solid var(--ink); background: rgba(15, 20, 64, 0.5); box-shadow: none; }
body.cel .touch-stick.on { border-color: var(--ink); background: rgba(15, 20, 64, 0.7); }
body.cel .touch-knob { border: 4px solid var(--ink); background: var(--cyan); box-shadow: none; }
body.cel .touch-btn {
  border: 4px solid var(--ink);
  color: #fff;
  background: linear-gradient(to bottom, var(--band) 0 50%, var(--panel-lit) 50% 100%);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-hd);
  font-weight: 400;
  opacity: 0.88;
}
body.cel .touch-btn svg { stroke-width: 3; }
body.cel .touch-btn.on { opacity: 1; border-color: var(--gold); background: linear-gradient(to bottom, #4656e0 0 50%, #2f3bb8 50% 100%); box-shadow: 3px 3px 0 var(--ink); }
body.cel .touch-fire { color: #fff; background: linear-gradient(to bottom, #e0407e 0 50%, #a8245c 50% 100%); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
body.cel .touch-fire.on { background: linear-gradient(to bottom, #ff6aa4 0 50%, #d0306c 50% 100%); border-color: var(--gold); }
/* The special weapon: a gold two-band disc beside Fire; the cycle button a teal one. */
body.cel .touch-special {
  color: var(--ink);
  font-size: calc(var(--u) * 0.24);
  background: linear-gradient(to bottom, #ffd84a 0 50%, #e8a800 50% 100%);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  text-shadow: none;
  opacity: 0.95;
}
body.cel .touch-special.on { background: linear-gradient(to bottom, #fff0a0 0 50%, #ffc61a 50% 100%); border-color: #fff; }
body.cel .touch-weapon {
  color: #fff;
  background: linear-gradient(to bottom, #1fd1ad 0 50%, #0e8f78 50% 100%);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
body.cel .touch-weapon.on { border-color: #fff; background: linear-gradient(to bottom, #6af0d4 0 50%, #12c7a2 50% 100%); }
body.cel .touch-use { color: var(--ink); background: linear-gradient(to bottom, #c8f05a 0 50%, #7fb81c 50% 100%); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); text-shadow: none; opacity: 0.95; }
body.cel .touch-use.idle { opacity: 0.45; }
body.cel .touch-use.on { background: linear-gradient(to bottom, #eaffa0 0 50%, #b6e63c 50% 100%); border-color: #fff; }
body.cel .touch-pause { color: #fff; border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }

@media (max-height: 640px) {
  body.cel .logo { font-size: clamp(34px, 7vw, 72px); }
  body.cel button { font-size: clamp(15px, 2vw, 19px); }
}
@media (prefers-reduced-motion: reduce) {
  body.cel .logo { transform: rotate(-2deg); }
  body.cel .logo-wrap::before, body.cel .logo-wrap::after { animation: none; }
}

/* Options in the cel look: compact rows so the list fits a 720 high view with its title; where it still
   cannot (a phone on its side) the screen scrolls from the top, and focus scrolls only the row into view. */
body.cel #options { padding-top: 10px; padding-bottom: 12px; }
body.cel #options h2.small { margin-bottom: 8px; font-size: clamp(26px, 4vw, 44px); }
body.cel #options .rows { gap: 4px; }
body.cel #options button.row { padding: 4px 16px; min-height: 28px; font-size: clamp(11px, 1.25vw, 14px); box-shadow: 3px 3px 0 var(--ink); border-width: 2px; }
body.cel #options .menu.inline { margin-top: 10px; gap: 8px; }
body.cel #options .menu.inline button { font-size: clamp(13px, 1.6vw, 17px); padding: 5px 14px; }
@media (max-height: 520px) {
  body.cel #options { max-height: var(--view-h); }
  body.cel #options button.row { padding: 3px 12px; min-height: 28px; }
}

/* Help: a picture beside each weapon, crate and enemy, and each section under a comic heading band. */
body.cel .help-title {
  margin: -10px -16px 8px;
  padding: 6px 16px 5px;
  background: linear-gradient(to bottom, var(--band) 0 50%, var(--panel-lit) 50% 100%);
  border-bottom: 3px solid var(--ink);
  text-shadow: 0 2px 0 var(--ink);
}
body.cel .help-entries dt.has-icon { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
body.cel .help-icon {
  flex: none;
  width: 64px;
  height: 44px;
  background: linear-gradient(to bottom, #2a62c8 0 52%, #8cc8ee 52% 78%, #d4a060 78% 100%);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
/* The briefing's picture for an escort or an intercept: the same drawing, larger. */
body.cel .briefing-icon {
  display: block;
  width: 128px;
  height: 88px;
  margin: 0 auto 10px;
}
body.cel .help-entries dt { font-size: 13px; }
body.cel .help-entries dd { margin-top: 3px; }

/* The controller tutorial: the button names are chips, the stick is a heavy ring. */
body.cel .pad-keys {
  justify-self: start;
  align-self: center;
  padding: 1px 9px;
  background: var(--ink);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-hd);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.08em;
}
body.cel .pad-lesson.on .pad-keys { background: var(--ink); border-color: var(--ink); color: var(--lime); }
body.cel .pad-lesson { box-shadow: 3px 3px 0 var(--ink); }
body.cel .pad-lesson.on { box-shadow: 3px 3px 0 var(--ink), 0 0 0 2px #fff; }
body.cel .pad-caption { border-left: 7px solid var(--gold); font-family: var(--font-hd); font-weight: 400; font-size: 14px; min-height: 2.2em; letter-spacing: 0.08em; box-shadow: 3px 3px 0 var(--ink); }

/* The records screen: a medal and the best numbers per mission and difficulty (#258). */
.results.records td.label { text-align: left; color: var(--fg); }
.results.records td.rec { text-align: center; color: var(--muted); font-size: 11px; }
.results.records td.rec .medal, .results.records td.rec .detail { display: block; }
.results.records td.rec .medal { font-weight: 900; letter-spacing: 0.15em; }
/* The airframe glyph beside a medal earned in a variant (S, M or T), and the best time of each (#598). */
.results.records td.rec .frame { display: inline-block; margin-left: 6px; padding: 0 4px; border: 1px solid var(--lime); border-radius: 3px; color: var(--lime); font-weight: 900; font-size: 10px; letter-spacing: 0.1em; }
.results.records td.rec .frametime { color: var(--lime); }
.results.records td.bronze .medal { color: #d9894a; }
.results.records td.silver .medal { color: #d5dce6; }
.results.records td.gold .medal { color: var(--gold); }

/* The challenge screen: the code in a field that can be typed or pasted into (#259). */
.field-label { display: block; margin-top: 12px; font-size: 12px; letter-spacing: 0.25em; color: var(--muted); }
.code-field {
  display: block;
  margin: 6px auto 8px;
  width: min(420px, 86vw);
  padding: 8px 12px;
  box-sizing: border-box;
  text-align: center;
  font-family: inherit;
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(4, 6, 13, 0.7);
  border: 2px solid var(--cyan);
}
.code-field:focus { outline: 2px solid #fff; outline-offset: 2px; }
.code-field[aria-invalid="true"] { border-color: var(--orange); }
body.cel .code-field { font-family: var(--font-hd); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); background: rgba(9, 12, 44, 0.9); }
body.cel .code-field:focus { border-color: var(--gold); }

/* ---- code entry with a pad (#288): eight places, the one being changed lit ---- */
.code-pick { display: flex; justify-content: center; gap: 6px; margin: 4px auto 8px; }
.code-pick span {
  width: 1.3em; padding: 6px 0; text-align: center; box-sizing: border-box;
  font-size: clamp(22px, 4vw, 36px); font-weight: 900; color: #fff;
  background: rgba(4, 6, 13, 0.7); border: 2px solid var(--cyan);
}
.code-pick span.on { outline: 3px solid #fff; outline-offset: 2px; border-color: #fff; }
body.cel .code-pick span { font-family: var(--font-hd); border-color: var(--ink); background: rgba(9, 12, 44, 0.9); }
body.cel .code-pick span.on { border-color: var(--gold); }

/* The Steam app: a link would open nothing (it never leaves the game's page). */
body.desktop .site-link { display: none; }

/* ---- training chapters (#393): a list of rows, two to a line where there is room ---- */
.chapter-list {
  width: min(840px, 94vw);
  max-height: min(calc(var(--vh) * 50), 460px);
  margin: 10px auto 0;
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}
.chapter-list button.chapter {
  min-width: 0;
  text-align: left;
  letter-spacing: 0.12em;
  padding: 6px 12px;
  font-size: clamp(11px, 1.3vw, 14px);
}
.chapter-list button.chapter.done { color: var(--lime); }
.chapter-list button.chapter[aria-disabled="true"] { opacity: 0.72; }
.chapter-list button.chapter:focus::before, .chapter-list button.chapter.is-focus::before { content: '▸ '; }
@media (max-width: 640px) { .chapter-list { grid-template-columns: 1fr; } }

/* The player slots (#418): one row each, the name left and the progress right; the chosen one is marked. */
.player-list { width: min(760px, 94vw); margin: 10px auto 0; display: flex; flex-direction: column; gap: 8px; }
.player-list button.slot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; text-align: left; letter-spacing: 0.12em; padding: 10px 14px; font-size: clamp(12px, 1.6vw, 18px); }
.player-list button.slot .slot-detail { font-size: 0.72em; color: var(--muted); letter-spacing: 0.1em; text-align: right; }
.player-list button.slot.chosen { color: var(--lime); }
.player-list button.slot:focus::before, .player-list button.slot.is-focus::before, .player-list button.slot:focus::after, .player-list button.slot.is-focus::after { content: none; }
.player-list button.slot:focus .slot-name::before, .player-list button.slot.is-focus .slot-name::before { content: '▸ '; }
@media (max-width: 640px) { .player-list button.slot { flex-direction: column; gap: 2px; } .player-list button.slot .slot-detail { text-align: left; } }

/* The achievements screen: a summary, a tab bar, and the tables scrolling in their own box under it (#392). */
.ach-summary { margin-top: 6px; color: var(--fg); }
.ach-tabs { margin-top: 10px; gap: 8px; }
.ach-tabs [role=tab] { font-size: clamp(11px, 1.3vw, 14px); padding: 6px 16px; }
.ach-tabs [role=tab].on { color: var(--orange); }
.ach-scroll {
  max-height: min(calc(var(--vh) * 46), 460px);
  margin-top: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(62, 231, 255, 0.45) transparent;
}
.ach-scroll:focus, .ach-scroll.is-focus { outline: 2px solid #fff; outline-offset: 2px; }
.ach-scroll .results { margin-top: 0; }
.ach-scroll .results th { position: sticky; top: 0; background: #0a1030; z-index: 1; }
@media (max-width: 560px) {
  .ach-scroll .results { min-width: 0; width: 100%; font-size: 12px; letter-spacing: 0.04em; }
  .ach-scroll .results th, .ach-scroll .results td { padding-left: 5px; padding-right: 5px; }
  .ach-scroll .results th { letter-spacing: 0.08em; }
}
@media (max-height: 480px) {
  #achievements { padding-top: 10px; padding-bottom: 10px; }
  body.cel #achievements h2.small { margin-bottom: 0; font-size: clamp(24px, 4vw, 34px); }
  .ach-summary { margin-top: 2px; }
  .ach-tabs { margin-top: 6px; }
  .ach-tabs [role=tab] { padding: 3px 14px; }
  .ach-scroll { margin-top: 6px; max-height: calc(var(--vh) * 44); }
  .ach-scroll .results td { padding-top: 3px; padding-bottom: 3px; }
  #achievements .menu.inline { margin-top: 8px; }
  #achievements > .tiny:last-child { display: none; }
}

/* The GOALS tab (#413): groups of rows, each a glyph, a name over its description, and the state on the right (a word, never colour alone). */
.goal-group + .goal-group { margin-top: 12px; }
.goal-head { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 0 6px; font-size: 13px; letter-spacing: 0.25em; color: var(--orange); font-weight: 800; }
.goal-glyph { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.goal-group-count { margin-left: auto; color: var(--muted); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.goal-list { list-style: none; margin: 0; padding: 0; }
.goal { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); text-align: left; }
.goal-mark { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.goal-name { font-size: 14px; font-weight: 800; letter-spacing: 0.12em; }
.goal-desc { margin-top: 1px; font-size: 12px; letter-spacing: 0.03em; color: var(--muted); }
.goal-state { min-width: 96px; text-align: right; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.goal-bar { margin: 3px 0 0 auto; width: 96px; height: 5px; border: 1px solid currentColor; }
.goal-bar i { display: block; height: 100%; background: currentColor; }
.goal.unlocked { color: var(--lime); }
.goal.unlocked .goal-desc { color: var(--fg); }
.goal.locked, .goal.hidden { color: var(--fg); }
.goal.locked .goal-mark, .goal.hidden .goal-mark { color: var(--muted); }
.goal.locked .goal-state, .goal.hidden .goal-state { color: var(--muted); }
.goal.hidden .goal-name { letter-spacing: 0.3em; }
@media (max-width: 560px) {
  .goal { grid-template-columns: 18px 1fr auto; gap: 6px; padding: 5px 4px; }
  .goal-state { min-width: 0; font-size: 11px; letter-spacing: 0.04em; }
  .goal-bar { width: 64px; }
}
@media (max-height: 480px) {
  .goal { padding-top: 3px; padding-bottom: 3px; }
  .goal-group + .goal-group { margin-top: 6px; }
}

/* The unlock banner (#413): a plate like the toast, top left under the HUD band in play (clear of the centre where the chopper, the fire and the guide
   panel are), bottom left on the mission tally. It never takes a tap. */
#unlock-banner {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(46vw, 420px);
  padding: 6px 14px 6px 8px;
  color: var(--gold);
  background: rgba(4, 6, 13, 0.85);
  border: 1px solid rgba(255, 215, 0, 0.6);
  border-left-width: 4px;
  pointer-events: none;
}
#unlock-banner.at-play { top: calc(var(--vh) * 16); }
#unlock-banner.at-tally { bottom: 16px; }
#unlock-banner .goal-medal { width: 40px; height: 40px; flex: none; }
.goal-medal .ribbon { fill: var(--red); stroke: none; }
.goal-medal .disc { fill: var(--gold); stroke: #05040c; stroke-width: 2; }
.goal-medal .ring { fill: none; stroke: #05040c; stroke-width: 1.6; }
.goal-medal .glyph { fill: none; stroke: #05040c; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.unlock-head { font-size: 10px; font-weight: 800; letter-spacing: 0.22em; color: var(--fg); }
.unlock-name { margin-top: 1px; font-size: 15px; font-weight: 900; letter-spacing: 0.12em; }
.unlock-more { margin-top: 2px; font-size: 10px; letter-spacing: 0.1em; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  #unlock-banner { animation: unlock-in 0.35s ease-out; }
}
@keyframes unlock-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@media (max-height: 480px) {
  #unlock-banner { gap: 8px; padding: 4px 10px 4px 6px; }
  #unlock-banner .goal-medal { width: 30px; height: 30px; }
  .unlock-name { font-size: 13px; }
}
body.cel #unlock-banner { background: var(--panel); border: 3px solid var(--ink); border-left: 7px solid var(--gold); box-shadow: 4px 4px 0 var(--ink); }
body.cel .unlock-name { font-family: var(--font-hd); font-weight: 400; font-size: 20px; letter-spacing: 0.08em; text-shadow: 0 2px 0 var(--ink); }
body.cel .goal-name { font-family: var(--font-hd); font-weight: 400; font-size: 17px; letter-spacing: 0.08em; }
body.cel .goal-head { font-family: var(--font-hd); font-weight: 400; font-size: 17px; letter-spacing: 0.12em; }
@media (max-height: 480px) { body.cel .unlock-name { font-size: 16px; } }

/* The hangar (#546): the chopper turning above the tabs and the list. */
.hangar-canvas { width: min(300px, 70vw); height: auto; aspect-ratio: 200 / 110; margin: 4px auto 0; display: block; }
.briefing-chopper { width: min(150px, 36vw); }
.hangar-list { margin-top: 8px; max-height: min(calc(var(--vh) * 34), 340px); overflow-y: auto; }
#hangar button.row .row-value { min-width: 4em; }
@media (max-height: 520px), (max-width: 520px) {
  .hangar-canvas { width: min(180px, 40vw); }
  .hangar-list { max-height: calc(var(--vh) * 30); }
}

/* The MODE row on the title while pacifist is locked (#623): readable, not a button that does anything. */
#btn-mode.locked { color: var(--muted); }

/* Pacifist (#625): Fire has no work to do, so USE takes its corner and Fire goes (src/ui/touchpad.ts adds touch-peace). On the Wildfire Fire is the
   water: it stays (touch-peace-fire) and USE keeps its own place. */
#touchpad.touch-peace:not(.touch-peace-fire) .touch-fire { display: none; }
#touchpad.touch-peace:not(.touch-peace-fire) .touch-use {
  right: calc(var(--edge-r) + var(--u) * 0.4);
  bottom: calc(var(--edge-b) + var(--u) * 0.4);
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 0.3);
}
#touchpad.touch-peace:not(.touch-peace-fire).touch-left .touch-use { right: auto; left: calc(var(--edge-l) + var(--u) * 0.4); }
#touchpad.touch-peace .touch-use.idle { opacity: 0.7; }