/* ==========================================================
   SIGNAL CITY 3D — Interface design system
   ========================================================== */

:root {
  --cyan:        #22e9ff;
  --cyan-deep:   #0891a8;
  --magenta:     #ff2bd6;
  --purple:      #8b5cff;
  --green:       #3dff9a;
  --orange:      #ff8a1a;
  --red:         #ff3b5c;
  --yellow:      #ffd43b;

  --ink-0: #04050c;
  --ink-1: #080a16;
  --ink-2: #0d1024;
  --ink-3: #141a33;

  --text:      #e8efff;
  --text-dim:  #97a3c4;
  --text-mute: #626e91;

  --glass:        rgba(14, 20, 44, 0.62);
  --glass-solid:  rgba(10, 14, 32, 0.92);
  --stroke:       rgba(120, 200, 255, 0.16);
  --stroke-hi:    rgba(80, 230, 255, 0.55);

  --shadow-lift: 0 18px 50px -12px rgba(0,0,0,.85);
  --glow-cyan:   0 0 18px rgba(34,233,255,.45), 0 0 44px rgba(34,233,255,.18);
  --glow-mag:    0 0 18px rgba(124,92,255,.45);

  --f-display: 'Orbitron', 'Eurostile', 'Bahnschrift', 'DIN Alternate', system-ui, sans-serif;
  --f-ui:      'Rajdhani', 'Roboto Condensed', 'Avenir Next Condensed', system-ui, sans-serif;
  --f-mono:    'Share Tech Mono', 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  --e-out:  cubic-bezier(.16,.84,.34,1);
  --e-back: cubic-bezier(.34,1.56,.64,1);

  /* The real visible viewport, published by the engine each resize. The
     fallbacks matter only for the first paint. `dvh` already accounts for
     browser chrome; the JS value is the belt to that pair of braces. */
  --app-w: 100vw;
  --app-h: 100dvh;
  --app-min: 100vmin;

  /* One spacing scale the whole interface breathes with, so a 360 px phone
     is not padded like a 27-inch monitor. */
  --pad:    clamp(9px, 2.1vmin, 18px);
  --pad-lg: clamp(14px, 3.4vmin, 34px);

  /* safe areas folded in once, so every edge can just use these */
  --edge-t: calc(var(--pad) + env(safe-area-inset-top, 0px));
  --edge-r: calc(var(--pad) + env(safe-area-inset-right, 0px));
  --edge-b: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  --edge-l: calc(var(--pad) + env(safe-area-inset-left, 0px));
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100dvh;              /* modern browsers: excludes the address bar */
  height: var(--app-h, 100dvh);/* engine-published value wins where it exists */
  overflow: hidden;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--f-ui);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

canvas#gl {
  position: fixed; top: 0; left: 0; display: block; z-index: 0;
  width: var(--app-w, 100vw); height: var(--app-h, 100dvh);
}

#ui {
  position: fixed; top: 0; left: 0;
  width: var(--app-w, 100vw); height: var(--app-h, 100dvh);
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}
#ui > * { pointer-events: auto; }

/* screen-wide vignette + chroma edge that sits above the canvas */
#ui::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(2,3,10,.55) 100%);
  mix-blend-mode: multiply;
}

/* ============ typography helpers ============ */
.display { font-family: var(--f-display); font-weight: 800; letter-spacing: .04em; }
.mono    { font-family: var(--f-mono); letter-spacing: .06em; }
.dim     { color: var(--text-dim); }
.tiny    { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.label   { font-family: var(--f-display); font-size: 10px; font-weight: 700;
           letter-spacing: .26em; text-transform: uppercase; color: var(--text-mute); }

.neon      { color: var(--cyan); text-shadow: var(--glow-cyan); }
.neon-mag  { color: var(--magenta); text-shadow: var(--glow-mag); }

/* ============ layout primitives ============ */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  animation: screenIn .5s var(--e-out) both;
}
.screen.leaving { animation: screenOut .32s var(--e-out) both; }

@keyframes screenIn  { from { opacity: 0; transform: translateY(14px) scale(.995); filter: blur(6px); }
                       to   { opacity: 1; transform: none; filter: none; } }
@keyframes screenOut { to { opacity: 0; transform: translateY(-10px) scale(1.01); filter: blur(8px); } }

.stack { display: flex; flex-direction: column; }
.row   { display: flex; align-items: center; }
.spacer{ flex: 1; }

/* ============ glass panel ============ */
.panel {
  position: relative;
  background: linear-gradient(160deg, rgba(22,30,62,.72), rgba(8,11,26,.78));
  border: 1px solid var(--stroke);
  border-radius: 14px;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
.panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, rgba(34,233,255,.06) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: sheen 7s var(--e-out) infinite;
}
@keyframes sheen { 0%,72% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.panel-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(120,200,255,.10);
  background: rgba(255,255,255,.02);
}
.panel-hdr .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
  animation: pulseDot 1.8s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.7); } }
.panel-body { padding: 16px; }

/* clipped sci-fi corner variant */
.clip {
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  border-radius: 0;
}

/* ============ buttons ============ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px;
  font-family: var(--f-display); font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text);
  background: linear-gradient(140deg, rgba(34,233,255,.14), rgba(139,92,255,.12));
  border: 1px solid rgba(34,233,255,.34);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  cursor: pointer;
  overflow: hidden;
  transition: transform .16s var(--e-out), box-shadow .2s, border-color .2s, color .2s;
  white-space: nowrap;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(34,233,255,.30), transparent);
  transform: translateX(-120%);
  transition: transform .55s var(--e-out);
}
.btn:hover { transform: translateY(-2px); border-color: var(--cyan); color: #fff;
             box-shadow: 0 0 0 1px rgba(34,233,255,.2), 0 10px 30px -8px rgba(34,233,255,.5); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.985); }

.btn.primary {
  background: linear-gradient(140deg, rgba(34,233,255,.30), rgba(139,92,255,.26));
  border-color: rgba(34,233,255,.6);
  color: #eafcff;
  text-shadow: 0 0 12px rgba(34,233,255,.7);
  box-shadow: 0 0 24px -6px rgba(34,233,255,.55);
}
.btn.primary:hover { box-shadow: 0 0 34px -4px rgba(34,233,255,.8), 0 12px 34px -10px rgba(0,0,0,.9); }
.btn.ghost { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.14); color: var(--text-dim); }
.btn.ghost:hover { color: var(--text); border-color: rgba(255,255,255,.3); box-shadow: none; }
.btn.danger { background: linear-gradient(140deg, rgba(255,59,92,.24), rgba(255,138,26,.16)); border-color: rgba(255,59,92,.5); }
.btn.sm { padding: 9px 16px; font-size: 11px; letter-spacing: .14em; }
.btn.lg { padding: 17px 40px; font-size: 15px; }
.btn[disabled] { opacity: .38; pointer-events: none; filter: grayscale(.6); }

/* icon button */
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; cursor: pointer; color: var(--text-dim);
  font-size: 15px; transition: .18s var(--e-out);
}
.icon-btn:hover { color: var(--cyan); border-color: rgba(34,233,255,.5); background: rgba(34,233,255,.1); transform: translateY(-1px); }

/* ============ MAIN MENU ============ */
.menu-wrap {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(380px, 46vw) 1fr;
  align-items: center;
}
.menu-wrap::before {
  content: ''; position: absolute; inset: 0; width: 62%;
  background: linear-gradient(90deg, rgba(3,5,14,.95) 34%, rgba(3,5,14,.72) 62%, rgba(3,5,14,0));
  pointer-events: none;
}
.menu-left { position: relative; z-index: 1; }
.menu-left { padding: 0 clamp(28px, 5vw, 90px); }

.brand-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-display); font-size: 10px; font-weight: 700;
  letter-spacing: .42em; text-transform: uppercase; color: var(--cyan);
  padding: 6px 12px; border: 1px solid rgba(34,233,255,.3);
  border-radius: 100px; background: rgba(34,233,255,.07);
  margin-bottom: 22px;
  animation: fadeUp .6s var(--e-out) both;
}
.brand-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--green);
                  box-shadow: 0 0 10px var(--green); animation: pulseDot 1.4s infinite; }

.title-3d {
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: .86; letter-spacing: -.01em;
  text-transform: uppercase;
  /* One cool ramp, ice through cyan into violet. The old lockup put a cyan
     line straight above a hot-pink one, and the two fought each other. */
  background: linear-gradient(176deg, #ffffff 4%, #d6f6ff 30%, #46d8ff 68%, #2fa8ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 34px rgba(70,216,255,.38)) drop-shadow(0 8px 12px rgba(0,0,0,.7));
  animation: fadeUp .7s .06s var(--e-out) both;
}
.title-3d span { display: block; padding-top: .04em; }
.title-3d .l2 {
  position: relative;
  background: linear-gradient(176deg, #9ee7ff 0%, #6f9dff 46%, #8b5cff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(124,124,255,.45));
}
/* the NEO tag rides the baseline rather than taking a third line */
.title-3d .l2 em {
  font-style: normal; font-size: .21em; letter-spacing: .16em;
  vertical-align: .78em; margin-left: .16em;
  -webkit-text-fill-color: #7ee8ff; color: #7ee8ff;
  text-shadow: 0 0 18px rgba(126,232,255,.75);
}

.tagline {
  margin: 20px 0 34px; max-width: 460px;
  font-size: 16px; line-height: 1.62; color: var(--text-dim); font-weight: 400;
  animation: fadeUp .7s .14s var(--e-out) both;
}
.tagline b { color: var(--cyan); font-weight: 600; }

.menu-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
                animation: fadeUp .7s .22s var(--e-out) both; }
.menu-actions .btn { min-width: 250px; justify-content: space-between; }
.menu-actions .btn kbd {
  font-family: var(--f-mono); font-size: 10px; padding: 2px 7px; border-radius: 4px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--text-mute);
}

.menu-stats {
  display: flex; gap: 12px; margin-top: 36px;
  animation: fadeUp .7s .3s var(--e-out) both;
}
.menu-stats .st {
  position: relative; flex: 1; max-width: 150px;
  padding: 12px 14px 11px; border-radius: 12px;
  background: linear-gradient(160deg, rgba(22,30,62,.7), rgba(8,11,26,.66));
  border: 1px solid rgba(120,200,255,.16);
  backdrop-filter: blur(10px);
  transition: border-color .25s var(--e-out), transform .25s var(--e-out);
}
.menu-stats .st::before {
  content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .55;
}
.menu-stats .st:nth-child(2)::before { background: linear-gradient(90deg, transparent, var(--yellow), transparent); }
.menu-stats .st:nth-child(3)::before { background: linear-gradient(90deg, transparent, var(--purple), transparent); }
.menu-stats .st:hover { border-color: rgba(120,200,255,.4); transform: translateY(-2px); }
.menu-stats .st b {
  display: block; font-family: var(--f-display); font-size: 26px; font-weight: 900;
  color: var(--cyan); text-shadow: var(--glow-cyan); line-height: 1.05;
}
.menu-stats .st:nth-child(2) b { color: var(--yellow); text-shadow: 0 0 18px rgba(255,212,59,.55); }
.menu-stats .st:nth-child(3) b { color: var(--purple); text-shadow: 0 0 18px rgba(139,92,255,.6); }
.menu-stats .st .label { margin-top: 3px; }

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

.menu-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .2em; color: var(--text-mute);
  animation: fadeUp .8s .5s var(--e-out) both;
}

/* ============ CHAPTER SELECT ============ */
.topbar {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 16px;
  padding: 18px clamp(18px, 3vw, 42px) 16px;
  background: linear-gradient(180deg, rgba(6,8,20,.96), rgba(6,8,20,0));
}
.topbar::after {
  content: ''; position: absolute; left: clamp(18px,3vw,42px); right: clamp(18px,3vw,42px); bottom: 0;
  height: 1px; background: linear-gradient(90deg, var(--cyan), rgba(139,92,255,.5) 45%, transparent);
  opacity: .5;
}
.topbar h2 {
  font-family: var(--f-display); font-size: 19px; font-weight: 800; letter-spacing: .22em;
  background: linear-gradient(92deg, #fff, var(--cyan) 60%, var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.topbar .sub { font-size: 11.5px; letter-spacing: .2em; color: var(--text-mute); text-transform: uppercase; margin-top: 2px; }

.chapter-scroll {
  position: relative; z-index: 2;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(139,92,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(4,6,16,.34), rgba(4,6,16,.72) 26%);
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 18px clamp(18px, 3vw, 42px) 46px;
  scrollbar-width: thin; scrollbar-color: rgba(34,233,255,.35) transparent;
}
.chapter-scroll::-webkit-scrollbar { width: 8px; }
.chapter-scroll::-webkit-scrollbar-thumb { background: rgba(34,233,255,.3); border-radius: 8px; }

.chapter-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  max-width: 1460px; margin: 0 auto;
}

/* ---- the card ---- */
.ch-card {
  --accent: var(--cyan);
  position: relative; cursor: pointer;
  padding: 0; overflow: hidden; border-radius: 16px;
  background: linear-gradient(165deg, rgba(16,22,52,.92), rgba(6,9,22,.96));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  transform-style: preserve-3d;
  transition: transform .3s var(--e-out), box-shadow .3s, border-color .3s;
  animation: cardIn .6s var(--e-out) both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(28px) rotateX(-8deg); } to { opacity: 1; transform: none; } }

/* accent rail down the left edge */
.ch-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 4;
  background: linear-gradient(180deg, var(--accent), transparent 75%);
  box-shadow: 0 0 16px var(--accent);
}
/* sheen that sweeps across on hover */
.ch-card::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%,
              color-mix(in srgb, var(--accent) 16%, transparent) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform .7s var(--e-out);
}
.ch-card:hover::after { transform: translateX(120%); }
.ch-card:hover {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.95),
              0 0 46px -14px color-mix(in srgb, var(--accent) 85%, transparent);
}

/* ---- the header band ---- */
.ch-visual {
  position: relative; height: 132px; overflow: hidden;
  background:
    radial-gradient(80% 120% at 22% 110%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 62%),
    linear-gradient(150deg, #131a42, #070a1a 70%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.ch-visual .mesh {
  position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 14%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, transparent, #000 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
}
.ch-visual .scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.03) 3px 4px);
}
.ch-visual .wave {
  position: absolute; left: 50%; bottom: -74px; width: 210px; height: 210px;
  margin-left: -105px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  animation: waveOut 3.6s linear infinite;
}
.ch-visual .wave:nth-child(4) { animation-delay: 1.2s; }
.ch-visual .wave:nth-child(5) { animation-delay: 2.4s; }
@keyframes waveOut { from { transform: scale(.25); opacity: .85; } to { transform: scale(1.5); opacity: 0; } }

/* the chapter icon, front and centre with its own halo */
.glyph-wrap {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.glyph-wrap::before {
  content: ''; position: absolute; width: 108px; height: 108px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 68%);
  filter: blur(6px);
}
.ch-visual .glyph {
  position: relative; font-size: 60px; line-height: 1;
  filter: saturate(1.25) drop-shadow(0 6px 18px rgba(0,0,0,.6))
          drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 75%, transparent));
  transition: transform .45s var(--e-back);
}
.ch-card:hover .ch-visual .glyph { transform: translateY(-5px) scale(1.14); }

.ch-num {
  position: absolute; top: 12px; left: 16px; z-index: 3;
  display: flex; align-items: baseline; gap: 4px;
  padding: 5px 11px; border-radius: 8px;
  background: rgba(4,8,20,.82);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  backdrop-filter: blur(6px);
}
.ch-num b { font-family: var(--f-display); font-size: 15px; font-weight: 900; color: var(--accent); }
.ch-num span { font-family: var(--f-mono); font-size: 9px; letter-spacing: .18em; color: var(--text-mute); }

.ch-badge {
  position: absolute; top: 14px; right: 16px; z-index: 3;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(61,255,154,.15); color: var(--green); border: 1px solid rgba(61,255,154,.45);
  box-shadow: 0 0 16px -6px var(--green);
}
.ch-badge.locked {
  background: rgba(255,255,255,.05); color: var(--text-mute);
  border-color: rgba(255,255,255,.14); box-shadow: none;
}

/* ---- the body ---- */
.ch-body { padding: 17px 20px 18px; position: relative; z-index: 2; }
.ch-body .st {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.ch-body h3 {
  font-family: var(--f-display); font-size: 20px; font-weight: 800;
  letter-spacing: .04em; color: #fff; margin-bottom: 10px;
}
.ch-body p { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); min-height: 64px; }

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.tag {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--text-dim);
}
.tag.ac {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.tag.cy { color: var(--cyan); border-color: rgba(34,233,255,.3); background: rgba(34,233,255,.08); }
.tag.or { color: var(--orange); border-color: rgba(255,138,26,.3); background: rgba(255,138,26,.08); }
.tag.pu { color: var(--purple); border-color: rgba(139,92,255,.35); background: rgba(139,92,255,.1); }

.ch-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07);
}
.stars { display: flex; gap: 4px; font-size: 16px; color: rgba(255,255,255,.14); }
.stars .on { color: var(--yellow); text-shadow: 0 0 14px rgba(255,212,59,.85); }
.ch-best { font-family: var(--f-mono); font-size: 12px; color: var(--text-dim); }
.ch-best span { color: var(--text-mute); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }

/* a clear call to action, revealed on hover */
.ch-go {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  opacity: 0; transform: translateY(-4px); transition: all .28s var(--e-out);
}
.ch-go i { font-style: normal; transition: transform .28s var(--e-out); }
.ch-card:hover .ch-go { opacity: 1; transform: none; }
.ch-card:hover .ch-go i { transform: translateX(5px); }

/* cleared missions read as done at a glance */
.ch-card.cleared .ch-visual::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(61,255,154,.1));
}

@media (max-width: 560px) {
  .chapter-grid { grid-template-columns: 1fr; gap: 14px; }
  .ch-visual { height: 108px; }
  .ch-visual .glyph { font-size: 48px; }
  .ch-body p { min-height: 0; }
  .ch-go { display: none; }
}

/* ============ BRIEFING ============ */
.brief-wrap {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: 1fr minmax(360px, 33vw);
  gap: 0;
}
.brief-side {
  display: flex; flex-direction: column; gap: 14px;
  justify-content: flex-start;
  padding: clamp(18px,3vh,34px) clamp(18px,2.4vw,34px);
  overflow-y: auto;
  background: linear-gradient(270deg, rgba(5,7,18,.94) 60%, rgba(5,7,18,0));
}
.brief-side > * { flex: none; }
.brief-side { --accent: var(--cyan); }
.brief-side h1 {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(26px,2.6vw,40px);
  line-height: 1; letter-spacing: .01em; text-transform: uppercase;
  background: linear-gradient(170deg, #fff, var(--accent) 78%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 40%, transparent));
}
.brief-kicker { color: var(--accent) !important; }
.brief-sub { color: var(--accent); letter-spacing: .2em; opacity: .85; }

/* icon beside the title so the briefing matches its mission-select card */
.brief-head { display: flex; align-items: center; gap: 15px; }
.brief-glyph {
  flex: none; width: 62px; height: 62px; display: grid; place-items: center;
  font-size: 32px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 65%, transparent));
}
.obj-list { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.obj-list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; color: var(--text-dim); line-height: 1.45;
  animation: fadeUp .5s var(--e-out) both;
}
.obj-list li i {
  flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  position: relative;
}
.obj-list li i::after { content: ''; position: absolute; inset: 4px; border-radius: 1px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent); }

.reward-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.reward {
  position: relative; text-align: center; padding: 13px 6px 11px; border-radius: 11px;
  background: linear-gradient(160deg, rgba(22,30,62,.6), rgba(8,11,26,.55));
  border: 1px solid rgba(120,200,255,.14);
  transition: border-color .22s var(--e-out), transform .22s var(--e-out);
}
.reward::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .6;
}
.reward:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); }
.reward b { display: block; font-family: var(--f-display); font-size: 20px; font-weight: 900; margin-bottom: 3px; }

.learn-box {
  padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(120deg, rgba(255,212,59,.12), rgba(255,138,26,.06));
  border: 1px solid rgba(255,212,59,.32);
}
.learn-box .label { color: var(--yellow); margin-bottom: 5px; }
.learn-box p { font-size: 13.5px; line-height: 1.55; color: #ffe9b0; }

.ctrl-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap: 8px; }
.ctrl {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim);
  padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}
kbd.key {
  font-family: var(--f-mono); font-size: 10px; min-width: 24px; text-align: center;
  padding: 4px 6px; border-radius: 5px; color: var(--cyan);
  background: rgba(34,233,255,.1); border: 1px solid rgba(34,233,255,.35);
  box-shadow: 0 2px 0 rgba(34,233,255,.18);
}

/* ============ HUD ============ */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: none; }
.hud .hud-btn { pointer-events: auto; }

.hud-corner { position: absolute; display: flex; flex-direction: column; gap: 10px; }
.hud-tl { top: var(--edge-t); left: var(--edge-l); }
.hud-tr { top: var(--edge-t); right: var(--edge-r); align-items: flex-end; }
.hud-bl { bottom: var(--edge-b); left: var(--edge-l); }
.hud-br { bottom: var(--edge-b); right: var(--edge-r); align-items: flex-end; }
.hud-tc { top: var(--edge-t); left: 50%; transform: translateX(-50%); align-items: center; }
.hud-bc { bottom: var(--edge-b); left: 50%; transform: translateX(-50%); align-items: center; }

.hud-mod {
  position: relative;
  background:
    linear-gradient(150deg, rgba(12,19,44,.82), rgba(6,9,22,.76)),
    radial-gradient(120% 100% at 0% 0%, rgba(34,233,255,.09), transparent 62%);
  border: 1px solid rgba(120,200,255,.2);
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%);
  padding: 10px 14px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  animation: hudIn .45s var(--e-out) both;
}
/* thin lit edge along the top of every readout */
.hud-mod::before {
  content: ''; position: absolute; left: 12px; right: 8px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,233,255,.55), transparent);
  pointer-events: none;
}
.hud-mod.timer-mod.urgent::before,
.hud-mod.snr-mod.urgent::before { background: linear-gradient(90deg, transparent, var(--red), transparent); }
@keyframes hudIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.gauge { min-width: 190px; }
.gauge .bar { position: relative; overflow: hidden; }
.gauge .bar > i { position: relative; }
.gauge .grow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.gauge .gval { font-family: var(--f-mono); font-size: 13px; color: var(--text); }
.bar {
  height: 6px; border-radius: 100px; background: rgba(255,255,255,.09);
  overflow: hidden; position: relative;
}
.bar > i {
  display: block; height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--cyan), #7ef3ff);
  box-shadow: 0 0 12px rgba(34,233,255,.7);
  transition: width .18s linear, background .3s;
  position: relative;
}
.bar > i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-100%); animation: barShine 2.2s linear infinite;
}
@keyframes barShine { to { transform: translateX(100%); } }
.bar.warn > i { background: linear-gradient(90deg, var(--orange), #ffd08a); box-shadow: 0 0 12px rgba(255,138,26,.7); }
.bar.crit > i { background: linear-gradient(90deg, var(--red), #ff9fb0); box-shadow: 0 0 14px rgba(255,59,92,.85); }
.bar.good > i { background: linear-gradient(90deg, var(--green), #b6ffd9); box-shadow: 0 0 12px rgba(61,255,154,.7); }
.bar.big { height: 9px; }

.score-mod { text-align: right; }
.score-mod b { font-family: var(--f-display); font-size: 27px; font-weight: 900; letter-spacing: .02em;
               color: #fff; text-shadow: 0 0 18px rgba(34,233,255,.6); display: block; line-height: 1; }
.combo {
  font-family: var(--f-display); font-size: 13px; font-weight: 800; letter-spacing: .1em;
  color: var(--orange); text-shadow: 0 0 14px rgba(255,138,26,.8);
  animation: comboPop .3s var(--e-back);
}
@keyframes comboPop { from { transform: scale(1.5); } to { transform: scale(1); } }

.speedo {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--f-display); font-weight: 800;
}
.speedo b {
  font-size: 42px; line-height: .88; font-weight: 900;
  background: linear-gradient(180deg, #fff 30%, #9fe9ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(34,233,255,.6));
}
.speedo span { font-size: 12px; letter-spacing: .2em; color: var(--text-mute); }

.timer-mod b { font-family: var(--f-mono); font-size: 30px; letter-spacing: .04em; display: block; line-height: 1; }
.timer-mod.urgent b { color: var(--red); text-shadow: 0 0 20px rgba(255,59,92,.9); animation: tick .5s infinite; }
@keyframes tick { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.objective-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-radius: 100px;
  background: linear-gradient(120deg, rgba(10,16,38,.88), rgba(6,10,24,.82));
  border: 1px solid rgba(34,233,255,.34);
  box-shadow: 0 0 26px -12px var(--cyan), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  font-size: 13px; letter-spacing: .06em; color: var(--text);
}
.objective-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
                    box-shadow: 0 0 10px var(--orange); animation: pulseDot 1.2s infinite; }

.progress-track {
  width: min(420px, 46vw); height: 4px; border-radius: 100px;
  background: rgba(255,255,255,.1); position: relative; margin-top: 10px;
}
.progress-track > i { position: absolute; inset: 0 auto 0 0; border-radius: 100px;
  background: linear-gradient(90deg, var(--purple), var(--cyan)); box-shadow: 0 0 14px rgba(34,233,255,.7); }
.progress-track .pip {
  position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 14px var(--cyan);
}

/* fact / teaching card */
/* Telecom intel is background reading, not a status readout, so it sits
   high on the screen where the sky is — out of the play area and away from
   every thumb — rather than as a wide banner across the action. */
.fact-card {
  position: absolute; left: 50%; top: calc(var(--edge-t) + 74px);
  transform: translateX(-50%);
  width: min(460px, 62vw);
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 14px;
  background: linear-gradient(140deg, rgba(11,18,44,.82), rgba(6,9,22,.78));
  border: 1px solid rgba(34,233,255,.26);
  border-left: 3px solid var(--cyan);
  border-radius: 11px;
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.85), 0 0 26px -16px rgba(34,233,255,.5);
  pointer-events: none;                 /* never eats a tap meant for the game */
  animation: factIn .45s var(--e-back) both;
}
.fact-card.out { animation: factOut .3s var(--e-out) both; }
@keyframes factIn  { from { opacity: 0; transform: translate(-50%, -18px) scale(.96); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }
@keyframes factOut { to { opacity: 0; transform: translate(-50%, -14px) scale(.98); } }
.fact-card .fi { font-size: 17px; filter: drop-shadow(0 0 10px rgba(34,233,255,.8)); }
.fact-card .ft { flex: 1; }
.fact-card .ft .label { color: var(--cyan); margin-bottom: 4px; }
.fact-card .ft p { font-size: 12.5px; line-height: 1.45; color: var(--text); }
.fact-card .ft .label { font-size: 9px; letter-spacing: .18em; }

/* toast */
.toast-wrap { position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
              display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  padding: 10px 20px; border-radius: 100px; font-family: var(--f-display);
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  background: rgba(6,10,24,.9); border: 1px solid rgba(34,233,255,.4); color: var(--cyan);
  box-shadow: 0 0 28px -8px rgba(34,233,255,.7);
  animation: toastIn .4s var(--e-back) both;
}
.toast.good { border-color: rgba(61,255,154,.5); color: var(--green); box-shadow: 0 0 28px -8px rgba(61,255,154,.7); }
.toast.bad  { border-color: rgba(255,59,92,.5); color: var(--red); box-shadow: 0 0 28px -8px rgba(255,59,92,.7); }
.toast.out { animation: toastOut .3s var(--e-out) both; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(-14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px) scale(.96); } }

/* floating world-anchored score popups */
.pop {
  position: absolute; font-family: var(--f-display); font-weight: 800; font-size: 18px;
  color: var(--cyan); text-shadow: 0 0 16px rgba(34,233,255,.9);
  transform: translate(-50%,-50%); pointer-events: none;
  animation: popUp .9s var(--e-out) both;
}
@keyframes popUp { from { opacity: 0; transform: translate(-50%,-30%) scale(.6); }
                   35%  { opacity: 1; transform: translate(-50%,-60%) scale(1.1); }
                   to   { opacity: 0; transform: translate(-50%,-130%) scale(1); } }

/* ============ TOWER DOWN — climb assist + tool belt ============ */

/* the technician's status card (climb height / current fault) */
.tech-card .climb-bar {
  height: 6px; border-radius: 100px; margin-top: 8px;
  background: rgba(255,255,255,.09); overflow: hidden;
}
.tech-card .climb-bar > i {
  display: block; height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  box-shadow: 0 0 12px rgba(34,233,255,.6);
  transition: width .12s linear;
}

/* which hand he is reaching with next */
.hand-cue { display: flex; gap: 6px; margin-top: 8px; }
.hand-cue span {
  flex: 1; text-align: center; padding: 4px 0; border-radius: 6px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--text-mute); background: rgba(255,255,255,.05);
  border: 1px solid transparent; transition: all .14s var(--e-out);
}
.hand-cue span.on {
  color: var(--ink-0); background: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(34,233,255,.55);
}

.fault-tag {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
  padding: 3px 8px; border-radius: 4px; color: var(--red);
  background: rgba(255,59,92,.14); border: 1px solid rgba(255,59,92,.35);
}
.fault-txt {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-dim);
}

/* gust warning banner under the objective chip */
.gust-warn {
  padding: 7px 16px; border-radius: 100px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em;
  color: var(--ink-0); background: var(--yellow);
  box-shadow: 0 0 26px rgba(255,212,59,.6);
  animation: gustPulse .42s infinite alternate;
}
.gust-warn[hidden] { display: none; }
@keyframes gustPulse { from { transform: scale(1); opacity: .85; }
                       to   { transform: scale(1.05); opacity: 1; } }

/* the tool belt */
.toolbelt {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: auto;
}
.toolbelt[hidden] { display: none; }
.belt-label {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--text-dim); text-transform: uppercase;
}
.belt-row { display: flex; gap: 10px; }
.tool-chip {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 0 10px; align-items: center;
  min-width: 148px; padding: 9px 14px 9px 12px;
  border-radius: 12px; cursor: pointer; text-align: left;
  background: rgba(6,10,24,.82); border: 1px solid var(--stroke);
  backdrop-filter: blur(12px); color: var(--text);
  font-family: var(--f-ui); transition: all .16s var(--e-out);
}
.tool-chip .ti { grid-row: 1 / 3; font-size: 22px; line-height: 1; }
.tool-chip .tn { font-size: 13px; font-weight: 600; letter-spacing: .03em; }
.tool-chip .ts { font-size: 11px; color: var(--text-mute); }
.tool-chip kbd {
  position: absolute; top: -7px; left: -7px;
  width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 5px; font-family: var(--f-mono); font-size: 10px;
  background: var(--ink-3); border: 1px solid var(--stroke);
  color: var(--text-dim);
}
.tool-chip:disabled { opacity: .38; cursor: default; filter: grayscale(.6); }
.tool-chip.armed {
  border-color: color-mix(in srgb, var(--tc) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 18%, transparent),
              0 10px 26px -14px var(--tc);
}
.tool-chip.armed:hover {
  transform: translateY(-3px);
  border-color: var(--tc);
  box-shadow: 0 0 22px -4px var(--tc), 0 14px 30px -16px var(--tc);
}
.tool-chip.armed:hover .tn { color: var(--tc); }
.tool-chip.used {
  opacity: 1; filter: none;
  border-color: var(--tc); box-shadow: 0 0 20px -6px var(--tc);
}

@media (max-width: 900px) {
  .tool-chip { min-width: 0; padding: 8px 10px; }
  .tool-chip .tn { font-size: 11.5px; }
  .tool-chip .ts { display: none; }
  .belt-row { gap: 7px; }
}

/* ============ SNR — HUD readout, briefing card, quiz ============ */

/* live signal-to-noise readout in the chase HUD */
.snr-mod { min-width: 230px; }
.snr-read { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; }
.snr-read b { font-family: var(--f-display); font-size: 26px; font-weight: 900; color: var(--cyan); }
.snr-read span { font-family: var(--f-mono); font-size: 12px; color: var(--text-dim); }
.snr-mod.urgent .snr-read b { color: var(--red); animation: pulseDot .7s infinite; }

.snr-bar {
  position: relative; height: 7px; border-radius: 100px; margin-top: 7px;
  background: rgba(255,59,92,.22); overflow: hidden;
}
.snr-bar > i {
  display: block; height: 100%; border-radius: 100px;
  transition: width .2s linear, background .3s;
  background: linear-gradient(90deg, var(--cyan), var(--green));
}
.snr-bar > i.warn { background: linear-gradient(90deg, var(--orange), var(--yellow)); }
.snr-bar > i.crit { background: linear-gradient(90deg, var(--red), var(--orange)); }
/* the decode threshold sits at the far left — 0 dB */
.snr-bar > u { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--red); opacity: .8; }

.snr-terms {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 6px;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--text-mute);
}
.snr-terms b { color: var(--text-dim); font-weight: 400; }

/* pre-mission concept card */
.snr-primer { max-width: min(680px, 92vw); text-align: left; }
.snr-primer h2 { margin: 4px 0 16px; }
/* the card now runs past a short landscape viewport, so the action bar rides
   the bottom of it rather than scrolling away below the fold */
.snr-primer .btns {
  position: sticky; bottom: 0; z-index: 3;
  margin: 18px -18px -14px; padding: 16px 18px 14px;
  background: linear-gradient(180deg, rgba(10,13,30,0), rgba(10,13,30,.96) 42%);
}

.snr-formula {
  padding: 18px; border-radius: 12px; text-align: center;
  background: rgba(34,233,255,.06); border: 1px solid rgba(34,233,255,.28);
}
.snr-formula .f-main {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-display); font-size: clamp(17px, 2.4vw, 25px); color: #fff;
  text-shadow: 0 0 22px rgba(34,233,255,.5);
}
.snr-formula .u { font-size: .6em; color: var(--text-dim); margin-left: 2px; }
.snr-formula sub { font-size: .58em; vertical-align: -.25em; color: var(--cyan); }
.snr-terms sub { font-size: .82em; }
.snr-formula .frac { display: inline-flex; flex-direction: column; text-align: center; font-size: .78em; }
.snr-formula .frac > span:first-child { border-bottom: 2px solid var(--cyan); padding: 0 8px 3px; }
.snr-formula .frac > span:last-child { padding: 3px 8px 0; }
.snr-formula .f-note { margin-top: 12px; font-size: 12.5px; color: var(--text-dim); }

.snr-why { margin-top: 18px; }
.snr-why ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.snr-why li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); }
.snr-why li i { flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%;
                background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.snr-why li b { color: var(--cyan); }

.snr-task {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  background: rgba(255,138,26,.07); border: 1px solid rgba(255,138,26,.3);
}
.snr-task p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.snr-task b { color: var(--orange); }

/* the five-minute budget, called out in the briefing */
.snr-clock-note {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 13px 15px; border-radius: 12px;
  background: rgba(255,59,92,.07); border: 1px solid rgba(255,59,92,.3);
}
.snr-clock-note .cl-ring {
  flex: none; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 17px; font-weight: 900; color: #fff;
  border: 2px solid var(--red); background: rgba(255,59,92,.12);
  box-shadow: 0 0 22px rgba(255,59,92,.35), inset 0 0 18px rgba(255,59,92,.18);
}
.snr-clock-note b { color: var(--red); display: block; font-size: 13.5px; }
.snr-clock-note span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.snr-clock-note span b { display: inline; color: var(--red); }

/* mission clock in the chase HUD — the same budget the SNR is spending */
.clock-mod { min-width: 230px; }
.clock-read b {
  font-family: var(--f-display); font-size: 25px; font-weight: 900;
  color: var(--text); letter-spacing: .04em;
}
.clock-mod.warn .clock-read b { color: var(--orange); }
.clock-mod.urgent .clock-read b { color: var(--red); animation: pulseDot .7s infinite; }
.clock-bar {
  height: 5px; border-radius: 100px; margin-top: 6px;
  background: rgba(255,255,255,.09); overflow: hidden;
}
.clock-bar > i {
  display: block; height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transition: width .25s linear;
}
.clock-mod.warn .clock-bar > i { background: linear-gradient(90deg, var(--orange), var(--yellow)); }
.clock-mod.urgent .clock-bar > i { background: linear-gradient(90deg, var(--red), var(--orange)); }

/* ============ the arrest — live capture readout ============ */
.arrest-card {
  position: absolute; left: 50%; bottom: var(--edge-b);
  width: min(780px, 94vw); z-index: 40; pointer-events: none;
  padding: 15px 17px 14px; border-radius: 16px; text-align: left;
  background: linear-gradient(180deg, rgba(12,16,30,.93), rgba(8,10,20,.97));
  border: 1px solid rgba(61,255,154,.35);
  box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 46px rgba(61,255,154,.16);
  backdrop-filter: blur(14px);
  transform: translate(-50%, 26px); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.9,.3,1), opacity .45s;
}
.arrest-card.in { transform: translate(-50%, 0); opacity: 1; }
.arrest-card.out { transform: translate(-50%, 22px); opacity: 0; }
.arrest-card.done { border-color: rgba(34,233,255,.45); box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 56px rgba(34,233,255,.22); }

.ar-head { display: flex; align-items: center; gap: 12px; }
.ar-badge {
  flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  font-size: 21px; background: rgba(61,255,154,.12); border: 1px solid rgba(61,255,154,.4);
}
.ar-head h3 { margin: 0; font-family: var(--f-display); font-size: 17px; letter-spacing: .06em; color: var(--green); }
.ar-sub { margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--text-dim); }
.ar-cuffs {
  margin-left: auto; flex: none; align-self: flex-start;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: var(--green);
  padding: 5px 9px; border-radius: 100px;
  background: rgba(61,255,154,.1); border: 1px solid rgba(61,255,154,.34);
}

.ar-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 13px; }
.ar-metric { padding: 10px 11px; border-radius: 11px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.ar-metric .label { display: block; font-family: var(--f-ui); font-size: 9.5px; letter-spacing: .12em;
                    text-transform: uppercase; color: var(--text-mute); }
.ar-metric > b { display: block; margin-top: 3px; font-family: var(--f-display); font-size: 23px; font-weight: 900; color: #fff; }
.ar-metric .foot { display: block; margin-top: 5px; font-size: 10.5px; line-height: 1.35; color: var(--text-mute); }
.ar-bar { height: 5px; border-radius: 100px; margin-top: 7px; background: rgba(255,255,255,.08); overflow: hidden; }
.ar-bar > i { display: block; height: 100%; border-radius: 100px; transition: width .12s linear; }
.ar-metric.noise > b { color: var(--red); }
.ar-metric.noise .ar-bar > i { background: linear-gradient(90deg, var(--red), var(--orange)); }
.ar-metric.sig > b { color: var(--text-dim); }
.ar-metric.sig .ar-bar > i { background: rgba(255,255,255,.3); }
.ar-metric.snr > b { color: var(--cyan); }
.ar-metric.snr .ar-bar > i { background: linear-gradient(90deg, var(--cyan), var(--green)); }
.arrest-card.recovering .ar-metric.snr { border-color: rgba(34,233,255,.4); }

.ar-cov { display: flex; align-items: center; gap: 11px; margin-top: 12px; }
.ar-cov .label { flex: none; font-family: var(--f-ui); font-size: 9.5px; letter-spacing: .12em;
                 text-transform: uppercase; color: var(--text-mute); }
.ar-covbar { flex: 1; height: 8px; border-radius: 100px; background: rgba(255,255,255,.08); overflow: hidden; }
.ar-covbar > i { display: block; height: 100%; border-radius: 100px; transition: width .12s linear;
                 background: linear-gradient(90deg, var(--violet), var(--cyan), var(--green)); }
.ar-cov > b { flex: none; font-family: var(--f-mono); font-size: 13px; color: var(--green); }

.ar-note {
  margin-top: 11px; font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
}
.ar-note:empty { display: none; }
.ar-note b { color: var(--cyan); }

/* the capture readout takes the bottom band, so the chase HUD yields it */
.hud.arrested .hud-bc { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; }
.hud.arrested .hud-bc, .hud.arrested .hud-bl { transition: opacity .4s, transform .4s; }
.hud.arrested .hud-bl { opacity: .35; }
.hud.arrested .controls-card { display: none; }
/* the capture readout is authoritative once the arrest starts, so the chase's
   own SNR and clock modules step back rather than compete with it */
.hud.arrested .snr-mod, .hud.arrested .clock-mod { opacity: .4; transition: opacity .4s; }

/* results-screen quiz */
.quiz {
  margin-top: 20px; padding: 16px; border-radius: 14px;
  background: rgba(139,92,255,.07); border: 1px solid rgba(139,92,255,.3);
  text-align: left;
}
.quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.quiz-score {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em;
  padding: 3px 10px; border-radius: 100px; color: var(--text-dim);
  background: rgba(255,255,255,.06); border: 1px solid var(--stroke);
}
.quiz-score.final { color: var(--ink-0); background: var(--purple); border-color: var(--purple); }

.quiz-q + .quiz-q { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.quiz-q .qtext { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.quiz-q .qtext b { color: var(--purple); margin-right: 4px; }

.qopts { display: flex; flex-direction: column; gap: 7px; }
.qopt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 9px; cursor: pointer; text-align: left;
  background: rgba(6,10,24,.6); border: 1px solid var(--stroke);
  color: var(--text-dim); font-family: var(--f-ui); font-size: 13px;
  transition: all .15s var(--e-out);
}
.qopt i {
  flex: none; width: 20px; height: 20px; display: grid; place-items: center;
  border-radius: 5px; font-family: var(--f-mono); font-size: 11px; font-style: normal;
  background: rgba(255,255,255,.07); color: var(--text-mute);
}
.qopt:not(:disabled):hover { border-color: var(--purple); color: var(--text); transform: translateX(3px); }
.qopt:disabled { cursor: default; opacity: .55; }
.qopt.right {
  opacity: 1; color: var(--green); border-color: var(--green);
  background: rgba(61,255,154,.1);
}
.qopt.right i { background: var(--green); color: var(--ink-0); }
.qopt.wrong {
  opacity: 1; color: var(--red); border-color: var(--red);
  background: rgba(255,59,92,.1);
}
.qopt.wrong i { background: var(--red); color: #fff; }

.qexplain {
  margin-top: 10px; padding: 10px 12px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-dim);
  background: rgba(61,255,154,.08); border-left: 3px solid var(--green);
}
.qexplain b { color: var(--green); margin-right: 4px; }
.qexplain.bad { background: rgba(255,138,26,.08); border-left-color: var(--orange); }
.qexplain.bad b { color: var(--orange); }

/* ============ TOWER DOWN — briefing, tool reference, fault popup ============ */

.tower-primer { max-width: min(720px, 93vw); text-align: left; }
.tower-primer h2 { margin: 4px 0 12px; }
.tp-lead { font-size: 14px; line-height: 1.6; color: var(--text-dim); margin: 0 0 18px; }
.tp-lead b { color: var(--cyan); }

.tp-phases { display: flex; flex-direction: column; gap: 12px; }
.tp-phase {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 15px; border-radius: 12px;
  background: rgba(34,233,255,.05); border: 1px solid rgba(34,233,255,.22);
}
.tp-num {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; font-family: var(--f-display); font-size: 13px; font-weight: 900;
  background: var(--cyan); color: var(--ink-0);
}
.tp-phase b { font-size: 14px; color: var(--text); letter-spacing: .02em; }
.tp-phase p { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.tp-phase p b { color: var(--orange); }
.tp-phase kbd.key { margin: 0 2px; }

.tp-ref { margin-top: 20px; }
.tp-note {
  margin-top: 11px; padding: 10px 12px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
  background: rgba(139,92,255,.09); border-left: 3px solid var(--purple);
}
.tp-note b { color: var(--purple); }

/* the fault -> tool table */
.tool-ref { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.tref-row {
  display: grid; grid-template-columns: 1fr auto minmax(140px, auto);
  gap: 12px; align-items: center;
  padding: 10px 13px; border-radius: 10px;
  background: rgba(6,10,24,.55); border: 1px solid var(--stroke);
  border-left: 3px solid var(--tc);
}
.tref-tag {
  display: inline-block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--red); padding: 2px 7px; border-radius: 4px;
  background: rgba(255,59,92,.13); border: 1px solid rgba(255,59,92,.3);
}
.tref-sym { display: block; margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--text-mute); }
.tref-arrow { color: var(--tc); font-size: 17px; }
.tref-tool { display: flex; align-items: center; gap: 8px; }
.tref-tool .ti { font-size: 19px; }
.tref-tool .tn { font-size: 13px; font-weight: 600; color: var(--tc); }

/* the in-mission fault card — centred so it cannot be missed */
.fault-popup {
  /* pinned to the right so the technician and the panel stay visible */
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  width: min(340px, 40vw); pointer-events: none;
  padding: 15px 18px; border-radius: 14px; text-align: left;
  background: linear-gradient(150deg, rgba(10,16,38,.93), rgba(6,9,22,.9));
  border: 1px solid rgba(255,59,92,.45);
  box-shadow: 0 0 40px -12px rgba(255,59,92,.55), var(--shadow-lift);
  backdrop-filter: blur(14px);
  animation: fpIn .32s var(--e-back) both;
}
.fault-popup[hidden] { display: none; }
@keyframes fpIn { from { opacity: 0; transform: translateY(-50%) translateX(22px); } }
.fault-popup.port { border-color: rgba(139,92,255,.5); box-shadow: 0 0 40px -12px rgba(139,92,255,.6), var(--shadow-lift); }
.fault-popup.busy { border-color: rgba(61,255,154,.45); box-shadow: 0 0 40px -12px rgba(61,255,154,.5), var(--shadow-lift); }

.fp-kicker {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 7px;
}
.fp-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fp-dot { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.fp-head b { font-family: var(--f-display); font-size: 15px; letter-spacing: .05em; color: var(--text); }
.fp-tag {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; color: var(--red);
  padding: 3px 8px; border-radius: 4px;
  background: rgba(255,59,92,.14); border: 1px solid rgba(255,59,92,.35);
}
.fp-sym { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.fp-ask {
  margin-top: 12px; padding: 9px 12px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--yellow);
  background: rgba(255,212,59,.1); border: 1px solid rgba(255,212,59,.3);
}
.fault-popup.port .fp-ask { color: var(--purple); background: rgba(139,92,255,.1); border-color: rgba(139,92,255,.35); }
.fp-prog { height: 6px; border-radius: 100px; margin-top: 12px; background: rgba(255,255,255,.1); overflow: hidden; }
.fp-prog > i {
  display: block; height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  box-shadow: 0 0 12px rgba(61,255,154,.6); transition: width .1s linear;
}

@media (max-width: 900px), (max-height: 520px) {
  .fault-popup { top: auto; bottom: 108px; right: 10px; transform: none;
                 width: min(290px, 52vw); padding: 11px 13px; }
  .fp-sym { font-size: 11.5px; }
  .fp-head b { font-size: 13px; }
  .tref-row { grid-template-columns: 1fr; gap: 7px; }
  .tref-arrow { display: none; }
}

/* ---- Tower Down: link budget readout + arrival status ---- */
.budget-mod { min-width: 232px; }
.bl-rows { margin-top: 7px; display: flex; flex-direction: column; gap: 3px; }
.bl-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--text-mute);
}
.bl-row b { color: var(--text-dim); font-weight: 400; }
.bl-row.eq { padding-top: 4px; margin-top: 2px; border-top: 1px solid rgba(255,255,255,.14); }
.bl-row.eq b { color: var(--cyan); font-size: 13px; }
.bl-row.sens b { color: var(--text-mute); }
.bl-margin {
  margin-top: 8px; padding: 5px 9px; border-radius: 6px; text-align: center;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
}
.bl-margin.down { color: var(--red); background: rgba(255,59,92,.14); border: 1px solid rgba(255,59,92,.35);
                  animation: pulseDot 1.3s infinite; }
.bl-margin.warn { color: var(--orange); background: rgba(255,138,26,.13); border: 1px solid rgba(255,138,26,.35); }
.bl-margin.good { color: var(--green); background: rgba(61,255,154,.13); border: 1px solid rgba(61,255,154,.35); }

.tp-status { display: flex; gap: 10px; margin: 0 0 18px; }
.ts-cell {
  flex: 1; padding: 11px 12px; border-radius: 10px; text-align: center;
  background: rgba(255,59,92,.08); border: 1px solid rgba(255,59,92,.28);
}
.ts-cell b { display: block; font-family: var(--f-display); font-size: 19px; color: var(--red); }
.ts-cell span { display: block; margin-top: 3px; font-size: 11px; color: var(--text-mute); line-height: 1.35; }
.rk.good { color: var(--green); }

@media (max-width: 700px) { .tp-status { flex-direction: column; gap: 7px; }
                            .ts-cell { display: flex; align-items: baseline; gap: 8px; text-align: left; }
                            .ts-cell b { font-size: 16px; } }

/* patch-port name chips, projected from the 3D ports */
.port-labels { position: absolute; inset: 0; pointer-events: none; }
.port-tag {
  position: absolute; transform: translate(-50%, 26px);
  display: flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 6px; border-radius: 100px; white-space: nowrap;
  background: rgba(4,6,16,.88); border: 1px solid var(--pc);
  box-shadow: 0 0 14px -4px var(--pc);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--pc);
}
.port-tag i { width: 9px; height: 9px; border-radius: 3px; background: var(--pc); box-shadow: 0 0 8px var(--pc); }
.port-tag.match { animation: portPulse .9s infinite alternate; }
@keyframes portPulse {
  from { box-shadow: 0 0 14px -4px var(--pc); }
  to   { box-shadow: 0 0 20px 1px var(--pc); }
}

/* ============ REWARDS BOX ============ */
.coin-purse { text-align: right; }
.coin-purse .label { display: block; font-size: 10px; letter-spacing: .18em; }
.coin-purse b {
  display: block; font-family: var(--f-display); font-size: 22px; font-weight: 900;
  color: var(--yellow); text-shadow: 0 0 18px rgba(255,212,59,.6); line-height: 1.15;
}
.coin-purse b i { font-style: normal; font-size: .8em; opacity: .85; }
.coin-purse .tiny { display: block; margin-top: 1px; }

.rewards-scroll {
  position: relative; z-index: 2; flex: 1; overflow-y: auto;
  padding: 20px clamp(18px, 3vw, 42px) 46px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,212,59,.07), transparent 60%),
    linear-gradient(180deg, rgba(4,6,16,.35), rgba(4,6,16,.75) 26%);
}
.rewards-grid {
  display: grid; gap: 20px; max-width: 1080px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.rw-card {
  --accent: var(--cyan);
  position: relative; display: flex; flex-direction: column;
  padding: 20px; border-radius: 16px;
  background: linear-gradient(165deg, rgba(18,24,54,.92), rgba(6,9,22,.96));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: var(--shadow-lift);
  animation: cardIn .5s var(--e-out) both;
  overflow: hidden;
}
.rw-card::before {
  content: ''; position: absolute; inset: -40% 40% 60% -40%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.rw-card.locked { opacity: .72; filter: saturate(.5); }
.rw-card.owned { border-color: color-mix(in srgb, var(--green) 55%, transparent);
                 box-shadow: 0 0 40px -14px var(--green), var(--shadow-lift); }
.rw-card.just-bought { animation: rwPop .6s var(--e-back) both; }
@keyframes rwPop { from { transform: scale(.94); } 60% { transform: scale(1.03); } to { transform: none; } }

.rw-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; position: relative; }
.rw-icon {
  width: 68px; height: 68px; display: grid; place-items: center; font-size: 36px;
  border-radius: 18px; background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 70%, transparent));
}
.rw-badge {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--text-mute);
}
.rw-card.buy .rw-badge { background: rgba(61,255,154,.14); color: var(--green); border-color: rgba(61,255,154,.4); }
.rw-card.owned .rw-badge { background: var(--green); color: var(--ink-0); border-color: var(--green); }

.rw-card h3 {
  font-family: var(--f-display); font-size: 21px; font-weight: 800;
  color: #fff; margin: 16px 0 4px; position: relative;
}
.rw-tag {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px; position: relative;
}
.rw-card p { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); position: relative; }

.rw-fx { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; position: relative; }
.rw-fx li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.rw-fx li i { flex: none; width: 5px; height: 5px; margin-top: 6px; border-radius: 50%;
              background: var(--accent); box-shadow: 0 0 7px var(--accent); }

.rw-cost {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); position: relative;
}
.rw-cost b { font-family: var(--f-display); font-size: 20px; font-weight: 900; color: var(--yellow); }
.rw-cost b i { font-style: normal; font-size: .8em; opacity: .85; }

.rw-action { margin-top: 14px; position: relative; }
.rw-buy { width: 100%; }
.rw-buy i { font-style: normal; }
.rw-need {
  font-size: 12.5px; line-height: 1.5; color: var(--text-mute);
  padding: 11px 13px; border-radius: 9px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
}
.rw-need b { color: var(--yellow); }
.rw-need span { display: block; margin-top: 3px; color: var(--text-dim); }
.rw-owned {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-align: center;
  padding: 12px; border-radius: 9px; color: var(--green);
  background: rgba(61,255,154,.1); border: 1px solid rgba(61,255,154,.35);
}

/* the menu entry point, flagged when something is affordable */
.btn.has-reward { border-color: rgba(255,212,59,.55); box-shadow: 0 0 22px -8px var(--yellow); }
.rw-pip {
  position: absolute; top: -7px; left: -7px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 100px;
  background: var(--yellow); color: var(--ink-0);
  font-family: var(--f-display); font-size: 11px; font-weight: 900;
  box-shadow: 0 0 14px rgba(255,212,59,.8);
  animation: pulseDot 1.4s infinite;
}
.menu-stats .st.coins b { color: var(--yellow); text-shadow: 0 0 18px rgba(255,212,59,.55); }
.menu-stats .st.coins::before { background: linear-gradient(90deg, transparent, var(--yellow), transparent); }

/* in-mission reminder that the perk is running */
.perk-badge {
  position: absolute; top: 50%; left: 18px; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em;
  padding: 6px 12px; border-radius: 100px; pointer-events: none;
  color: var(--orange); background: rgba(255,138,26,.12);
  border: 1px solid rgba(255,138,26,.4); box-shadow: 0 0 20px -8px var(--orange);
}
.btn.jetpack-btn { border-color: rgba(139,92,255,.5); color: var(--purple); }
.btn.jetpack-btn:hover { border-color: var(--purple); color: #fff; box-shadow: 0 0 26px -8px var(--purple); }

@media (max-width: 620px) { .rewards-grid { grid-template-columns: 1fr; } }

/* in-mission back button + its confirm sheet */
.icon-btn.back-btn { font-size: 18px; }
.icon-btn.back-btn:hover {
  color: var(--red); border-color: rgba(255,59,92,.5); background: rgba(255,59,92,.1);
}
.quit-card {
  max-width: min(420px, 90vw); padding: 26px 28px; text-align: center;
  animation: rwPop .35s var(--e-back) both;
}
.quit-card h2 { font-size: 22px; margin-bottom: 10px; }
.quit-card p { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); margin-bottom: 20px; }
.quit-card .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ============ HELICOPTER — flight instruments ============ */

/* heading tape with a waypoint marker */
.compass {
  position: relative; width: 226px; height: 30px; margin-top: 8px;
  border-radius: 8px; overflow: hidden;
  background: rgba(6,10,24,.82); border: 1px solid rgba(120,200,255,.2);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.cmp-tape { position: absolute; inset: 0; will-change: transform; }
.cmp-tape .ct {
  position: absolute; top: 6px; width: 0;
  font-family: var(--f-mono); font-size: 10px; color: var(--text-mute);
}
.cmp-tape .ct::before {
  content: ''; position: absolute; left: 0; top: 12px; width: 1px; height: 6px;
  background: rgba(255,255,255,.25);
}
.cmp-tape .ct.card { color: var(--cyan); font-size: 11px; transform: translateX(-4px); }
.cmp-tape .ct.card::before { height: 10px; background: rgba(34,233,255,.6); transform: translateX(4px); }

.cmp-needle {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  background: var(--orange); box-shadow: 0 0 10px var(--orange); transform: translateX(-50%);
}
.cmp-wp {
  position: absolute; top: 1px; display: flex; flex-direction: column; align-items: center;
  transform: translateX(-50%); transition: left .12s linear; pointer-events: none;
}
.cmp-wp i {
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--green); filter: drop-shadow(0 0 6px var(--green));
}
.cmp-wp span { font-family: var(--f-mono); font-size: 8.5px; color: var(--green); letter-spacing: .06em; }
.cmp-wp.edge i { border-top-color: var(--yellow); filter: drop-shadow(0 0 6px var(--yellow)); }
.cmp-wp.edge span { color: var(--yellow); }

/* nav dial — the arrow that always points at the next waypoint */
.nav-mod { min-width: 250px; }
.nav-row { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.nav-dial {
  position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: rgba(4,8,20,.7); border: 1px solid rgba(120,200,255,.25);
}
.nav-dial u {
  position: absolute; left: 50%; top: 4px; width: 1px; height: 6px;
  background: rgba(255,255,255,.35); transform: translateX(-50%);
}
.nav-dial i {
  position: absolute; inset: 0; transition: transform .1s linear;
}
.nav-dial i::before {
  content: ''; position: absolute; left: 50%; top: 7px;
  width: 0; height: 0; transform: translateX(-50%);
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 17px solid var(--orange);
  filter: drop-shadow(0 0 8px var(--orange));
}
.nav-dial i.on-course::before { border-bottom-color: var(--green); filter: drop-shadow(0 0 10px var(--green)); }
.nav-range { font-size: 24px; color: var(--orange); line-height: 1.1; }
.nav-range b { font-weight: 400; }

/* vertical speed indicator */
.vsi-mod { min-width: 132px; }
.vsi {
  position: relative; height: 44px; margin-top: 7px; border-radius: 5px;
  background: rgba(255,255,255,.06); overflow: hidden;
}
.vsi u { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.28); }
.vsi i { position: absolute; left: 0; right: 0; transition: height .1s linear; }
.vsi i.up { background: linear-gradient(0deg, transparent, var(--green)); box-shadow: 0 0 10px rgba(61,255,154,.5); }
.vsi i.down { background: linear-gradient(180deg, transparent, var(--red)); box-shadow: 0 0 10px rgba(255,59,92,.5); }
.vsi-val { font-size: 12px; color: var(--text-dim); margin-top: 5px; text-align: center; }

/* attitude ball, centre-screen and unobtrusive */
.heli-attitude {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
  opacity: .4; pointer-events: none;
  border: 1px solid rgba(120,200,255,.22);
}
.att-horizon {
  position: absolute; left: -50%; right: -50%; top: -50%; bottom: -50%;
  background: linear-gradient(180deg, rgba(34,233,255,.10) 49.6%, rgba(255,138,26,.16) 50.4%);
  transition: transform .08s linear;
}
.att-frame { position: absolute; inset: 0; display: grid; place-items: center; }
.att-frame span { position: absolute; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.att-frame span:first-child { width: 44px; height: 1.5px; }
.att-frame span:last-child { width: 1.5px; height: 12px; }

/* pre-flight briefing */
.heli-primer { max-width: min(680px, 93vw); text-align: left; }
.heli-primer h2 { margin: 4px 0 12px; }
.heli-primer .hl { color: var(--cyan); }
.heli-controls { margin-top: 18px; }
.hc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 14px; margin-top: 10px;
}
.hc-grid > div { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); }
.hc-grid span { margin-left: 2px; }

@media (max-width: 760px), (max-height: 520px) {
  .heli-attitude { width: 92px; height: 92px; opacity: .3; }
  .compass { width: 180px; }
  .nav-mod { min-width: 0; }
  .nav-dial { width: 42px; height: 42px; }
  .nav-range { font-size: 19px; }
  .vsi-mod { display: none; }
}

/* ============ SIGNAL DECK — card battle ============ */

.deck-board {
  position: absolute; left: 50%; top: 84px; transform: translateX(-50%);
  width: min(1000px, 94vw); display: flex; flex-direction: column;
  align-items: center; gap: 14px; pointer-events: none;
}

/* the service order being worked */
.order-card {
  --gen: var(--cyan);
  padding: 12px 22px; border-radius: 14px; text-align: center;
  background: linear-gradient(150deg, rgba(12,19,44,.9), rgba(6,9,22,.86));
  border: 1px solid color-mix(in srgb, var(--gen) 45%, transparent);
  box-shadow: 0 0 34px -14px var(--gen);
  backdrop-filter: blur(12px);
  animation: fadeUp .4s var(--e-out) both;
}
.oc-kicker { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .24em;
             text-transform: uppercase; color: var(--text-mute); }
.oc-head { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 5px; }
.oc-gen {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
  padding: 3px 10px; border-radius: 100px; color: var(--gen);
  background: color-mix(in srgb, var(--gen) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gen) 45%, transparent);
}
.oc-head b { font-family: var(--f-display); font-size: 17px; font-weight: 800; color: #fff; }
.oc-note { margin-top: 5px; font-size: 11.5px; color: var(--text-mute); }

/* the path being assembled */
.path-row { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; justify-content: center; }
.path-arrow { align-self: center; color: var(--text-mute); font-size: 15px; }

.path-node, .path-slot {
  min-width: 96px; padding: 10px 12px; border-radius: 11px; text-align: center;
  background: rgba(6,10,24,.8); border: 1px solid rgba(120,200,255,.16);
  backdrop-filter: blur(10px);
}
.path-node i, .path-slot i { display: block; font-size: 20px; line-height: 1; margin-bottom: 4px; font-style: normal; }
.path-node span, .path-slot span { display: block; font-family: var(--f-mono); font-size: 9px;
                                   letter-spacing: .08em; color: var(--text-mute); margin-top: 2px; }
.path-node.fixed { border-style: dashed; }
.path-node.end { border-color: color-mix(in srgb, var(--gen) 40%, transparent); }

.path-slot { position: relative; --gen: var(--cyan); transition: all .22s var(--e-out); }
.path-slot b { font-family: var(--f-display); font-size: 15px; font-weight: 900; color: #fff; }
.path-slot.empty { border-style: dashed; border-color: rgba(120,200,255,.22); }
.path-slot.empty .ghost { opacity: .38; }
.path-slot.empty b.ghost { font-size: 11px; letter-spacing: .04em; color: var(--text-dim); }
.path-slot.filled {
  border-color: var(--gen); background: color-mix(in srgb, var(--gen) 12%, rgba(6,10,24,.85));
  box-shadow: 0 0 22px -8px var(--gen);
  animation: slotPop .35s var(--e-back) both;
}
@keyframes slotPop { from { transform: scale(.86); opacity: 0; } to { transform: none; opacity: 1; } }
.path-slot.down { border-color: var(--red); background: rgba(255,59,92,.1); animation: pulseDot 1s infinite; }
.slot-down {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .14em;
  padding: 2px 8px; border-radius: 100px; color: #fff; background: var(--red);
}

/* live fault banner */
.event-banner {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 18px; border-radius: 12px; max-width: 620px;
  background: linear-gradient(120deg, rgba(255,59,92,.16), rgba(255,138,26,.08));
  border: 1px solid rgba(255,59,92,.45);
  box-shadow: 0 0 30px -12px var(--red);
  animation: fpIn .3s var(--e-back) both;
}
.event-banner[hidden] { display: none; }
.eb-icon { font-size: 24px; }
.event-banner b { display: block; font-family: var(--f-display); font-size: 14px; color: var(--red); letter-spacing: .05em; }
.event-banner span { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.eb-timer { width: 74px; height: 5px; border-radius: 100px; background: rgba(255,255,255,.14); overflow: hidden; flex: none; }
.eb-timer > i { display: block; height: 100%; background: var(--red); box-shadow: 0 0 8px var(--red); }

/* the hand */
.hand-rail {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 9px; justify-content: center; flex-wrap: wrap;
  max-width: 96vw; pointer-events: auto;
}
.hand-rail.shake { animation: handShake .32s; }
@keyframes handShake { 25% { transform: translateX(calc(-50% - 7px)); }
                       75% { transform: translateX(calc(-50% + 7px)); } }

.game-card {
  --gen: var(--purple);
  position: relative; width: 132px; padding: 26px 11px 11px;
  border-radius: 12px; cursor: pointer; text-align: center;
  background: linear-gradient(168deg, rgba(18,25,56,.95), rgba(6,9,22,.96));
  border: 1px solid color-mix(in srgb, var(--gen) 38%, transparent);
  color: var(--text); font-family: var(--f-ui);
  transition: transform .2s var(--e-back), box-shadow .2s, border-color .2s;
  animation: cardDeal .35s var(--e-back) both;
}
@keyframes cardDeal { from { opacity: 0; transform: translateY(22px) rotate(-4deg); } to { opacity: 1; transform: none; } }
.game-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, transparent, var(--gen), transparent);
}
.game-card:hover {
  transform: translateY(-9px) scale(1.04);
  border-color: var(--gen);
  box-shadow: 0 18px 40px -16px #000, 0 0 26px -6px var(--gen);
  z-index: 5;
}
.game-card.action { --gen: var(--yellow); }

.gc-key {
  position: absolute; top: 6px; left: 7px;
  width: 17px; height: 17px; display: grid; place-items: center; border-radius: 5px;
  font-family: var(--f-mono); font-size: 10px; color: var(--text-mute);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
}
.gc-type {
  position: absolute; top: 7px; right: 8px;
  font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .1em; color: var(--gen);
}
.gc-icon { display: block; font-size: 25px; line-height: 1; margin-bottom: 5px; }
.gc-name { display: block; font-family: var(--f-display); font-size: 15px; font-weight: 900; color: #fff; }
.gc-full { display: block; font-size: 9.5px; color: var(--gen); margin-top: 2px; line-height: 1.25; }
.gc-desc { display: block; font-size: 9.5px; color: var(--text-mute); line-height: 1.35; margin-top: 6px; }

/* discard-and-draw, so a dead hand is never a dead end */
.gc-toss {
  position: absolute; right: 6px; bottom: 6px;
  width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px;
  font-size: 11px; color: var(--text-mute);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  opacity: 0; transition: all .16s var(--e-out);
}
.game-card:hover .gc-toss { opacity: 1; }
.gc-toss:hover { color: var(--red); border-color: rgba(255,59,92,.5); background: rgba(255,59,92,.14); }

/* briefing: the role-by-generation table that is the whole lesson */
.deck-primer { max-width: min(720px, 94vw); text-align: left; }
.deck-primer h2 { margin: 4px 0 12px; }
.arch-table { margin: 16px 0 4px; border-radius: 12px; overflow: hidden; border: 1px solid var(--stroke); }
.arch-head, .arch-row {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 10px;
  padding: 10px 14px; align-items: center;
}
.arch-head {
  background: rgba(255,255,255,.05);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-mute);
}
.arch-row + .arch-row, .arch-head + .arch-row { border-top: 1px solid rgba(255,255,255,.07); }
.ar-role i { font-style: normal; margin-right: 6px; }
.ar-role b { font-size: 13px; color: var(--text); }
.ar-role span { display: block; font-size: 11px; color: var(--text-mute); margin-top: 2px; line-height: 1.35; }
.ar-cell {
  text-align: center; padding: 7px 4px; border-radius: 8px;
  background: color-mix(in srgb, var(--gen) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--gen) 34%, transparent);
}
.ar-cell b { display: block; font-family: var(--f-display); font-size: 13px; color: var(--gen); }
.ar-cell span { font-family: var(--f-mono); font-size: 8.5px; color: var(--text-mute); }

@media (max-width: 900px) {
  .game-card { width: 108px; padding: 24px 8px 9px; }
  .gc-desc { display: none; }
  .deck-board { top: 72px; gap: 10px; }
  .path-node, .path-slot { min-width: 74px; padding: 8px 8px; }
  .arch-head, .arch-row { grid-template-columns: 1fr; gap: 6px; }
  .ar-role span { display: none; }
}

/* ============ LOCKDOWN — escape room ============ */

/* which room you are standing in */
.room-plate { min-width: 200px; }
.rp-name { font-family: var(--f-display); font-size: 18px; font-weight: 900; color: #fff; margin-top: 2px; }
.rp-sub { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--text-mute); }

/* "press E" prompt that follows proximity */
.use-prompt {
  position: absolute; left: 50%; bottom: 108px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; border-radius: 100px; pointer-events: none;
  background: rgba(6,10,24,.9); border: 1px solid rgba(255,212,59,.45);
  box-shadow: 0 0 26px -10px var(--yellow);
  font-size: 13px; color: var(--text);
  animation: fpIn .2s var(--e-out) both;
}
.use-prompt[hidden] { display: none; }
.use-prompt kbd.key { color: var(--yellow); background: rgba(255,212,59,.14); border-color: rgba(255,212,59,.45); }

/* puzzle terminals */
.puzzle-card { max-width: min(600px, 93vw); text-align: left; }
.puzzle-card.wide { max-width: min(860px, 95vw); }
.puzzle-card h2 { margin: 4px 0 14px; font-size: clamp(22px, 3vw, 30px); }
.pz-ask { font-size: 14px; color: var(--text); margin: 16px 0 12px; }
.pz-ask b { color: var(--yellow); }
.pz-why { font-size: 13.5px; line-height: 1.65; color: var(--text-dim); }
.puzzle-card.explain { max-width: min(540px, 92vw); }

.ticket {
  padding: 14px 16px; border-radius: 11px;
  background: rgba(255,212,59,.08); border-left: 3px solid var(--yellow);
}
.ticket p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--text); }

/* BSS / OSS / Network choice */
.domain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 11px; }
.domain-btn {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 14px 15px; border-radius: 12px;
  background: linear-gradient(160deg, rgba(22,30,62,.72), rgba(8,11,26,.7));
  border: 1px solid rgba(120,200,255,.18); color: var(--text);
  font-family: var(--f-ui); transition: all .18s var(--e-out);
}
.domain-btn b { display: block; font-family: var(--f-display); font-size: 19px; font-weight: 900; color: var(--cyan); }
.dm-full { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.dm-hint { display: block; font-size: 11.5px; color: var(--text-mute); margin-top: 7px; line-height: 1.45; }
.domain-btn:not(.static):hover { transform: translateY(-3px); border-color: var(--cyan); box-shadow: 0 0 24px -8px var(--cyan); }
.domain-btn.bad { border-color: var(--red); background: rgba(255,59,92,.12); animation: handShake .3s; }
.domain-btn.static { cursor: default; }
.domain-grid.brief { margin: 16px 0 4px; }

/* the provisioning chain trace */
.chain-strip { display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.cs-arrow { align-self: center; color: var(--text-mute); }
.cs-node {
  flex: 1; min-width: 108px; padding: 10px 11px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
}
.cs-node b { font-family: var(--f-display); font-size: 14px; color: #fff; }
.cs-full { display: block; font-size: 9.5px; color: var(--text-mute); margin-top: 1px; }
.cs-note { display: block; font-size: 11px; line-height: 1.4; margin-top: 7px; color: var(--text-dim); }
.cs-node.ok { border-left: 3px solid var(--green); }
.cs-node.fail { border-left: 3px solid var(--red); background: rgba(255,59,92,.08); }
.cs-node.fail .cs-note { color: #ffb8c4; }

/* signalling message on the wire */
.sig-wire {
  display: flex; align-items: center; gap: 14px; justify-content: center;
  padding: 18px; border-radius: 12px; margin-bottom: 4px;
  background: rgba(139,92,255,.09); border: 1px solid rgba(139,92,255,.35);
}
.sig-wire code {
  font-family: var(--f-mono); font-size: clamp(15px, 2.4vw, 22px); letter-spacing: .14em;
  color: var(--purple); text-shadow: 0 0 20px rgba(139,92,255,.6);
}
.sw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--purple);
          box-shadow: 0 0 12px var(--purple); animation: pulseDot 1.2s infinite; }

.opt-list { display: flex; flex-direction: column; gap: 8px; }
.opt-row {
  width: 100%; text-align: left; cursor: pointer;
  padding: 12px 15px; border-radius: 10px; font-size: 13.5px;
  background: rgba(6,10,24,.6); border: 1px solid var(--stroke); color: var(--text-dim);
  font-family: var(--f-ui); transition: all .16s var(--e-out);
}
.opt-row:not(:disabled):hover { transform: translateX(4px); border-color: var(--purple); color: var(--text); }
.opt-row.bad { border-color: var(--red); color: var(--red); background: rgba(255,59,92,.1); opacity: .7; }

/* CDR table */
.cdr-table { display: flex; flex-direction: column; gap: 6px; }
.cdr-head, .cdr-row {
  display: grid; grid-template-columns: 110px 1fr 160px; gap: 12px; align-items: center;
  padding: 11px 14px; text-align: left;
}
.cdr-head {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-mute); padding-bottom: 2px;
}
.cdr-row {
  cursor: pointer; border-radius: 10px; font-size: 13px; color: var(--text-dim);
  background: rgba(6,10,24,.6); border: 1px solid var(--stroke); font-family: var(--f-ui);
  transition: all .16s var(--e-out);
}
.cdr-row:not(:disabled):hover { border-color: var(--yellow); color: var(--text); transform: translateX(4px); }
.cdr-row.bad { border-color: var(--red); background: rgba(255,59,92,.1); opacity: .65; }
.cdr-id { font-family: var(--f-mono); font-size: 11.5px; color: var(--cyan); }
.cdr-charge { font-family: var(--f-mono); font-size: 12.5px; color: var(--yellow); text-align: right; }

@media (max-width: 760px) {
  .chain-strip { flex-direction: column; }
  .cs-arrow { display: none; }
  .cdr-head { display: none; }
  .cdr-row { grid-template-columns: 1fr; gap: 3px; }
  .cdr-charge { text-align: left; }
  .use-prompt { bottom: 150px; }
}

/* pillar name tags, projected from the 3D chain */
.pillar-labels { position: absolute; inset: 0; pointer-events: none; }
.pillar-tag {
  position: absolute; transform: translate(-50%, -100%);
  padding: 5px 11px; border-radius: 9px; white-space: nowrap; text-align: center;
  background: rgba(4,6,16,.9); border: 1px solid rgba(120,200,255,.35);
  box-shadow: 0 0 16px -6px var(--cyan);
}
.pillar-tag b { display: block; font-family: var(--f-display); font-size: 13px; color: #fff; letter-spacing: .04em; }
.pillar-tag span { display: block; font-family: var(--f-mono); font-size: 8.5px; color: var(--text-mute); margin-top: 1px; }
.pillar-tag.near {
  border-color: var(--yellow); box-shadow: 0 0 22px -4px var(--yellow);
  transform: translate(-50%, -100%) scale(1.08);
}
.pillar-tag.near b { color: var(--yellow); }

/* the trace stays pinned once read */
.trace-panel { min-width: 300px; max-width: 340px; }
.trace-panel[hidden] { display: none; }
.tr-rows { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.tr-row {
  display: grid; grid-template-columns: 46px 1fr; gap: 8px; align-items: baseline;
  padding: 4px 7px; border-radius: 5px; background: rgba(255,255,255,.03);
  border-left: 2px solid var(--green);
}
.tr-row b { font-family: var(--f-display); font-size: 11px; color: var(--text); }
.tr-row span { font-size: 10.5px; line-height: 1.35; color: var(--text-mute); }
.tr-row.fail { border-left-color: var(--red); background: rgba(255,59,92,.09); }
.tr-row.fail span { color: #ffb8c4; }

/* controls that do not fade away mid-puzzle */
.ctrl-strip {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 16px; align-items: center; pointer-events: none;
  padding: 7px 16px; border-radius: 100px;
  background: rgba(6,10,24,.78); border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--text-mute);
}
.ctrl-strip kbd.key { margin-right: 2px; }
body.is-touch .ctrl-strip { display: none; }

@media (max-width: 760px) {
  .trace-panel { min-width: 0; max-width: 220px; }
  .tr-row span { display: none; }
  .ctrl-strip { display: none; }
}

/* ============ MOBILE ============================================
   The game was built desktop-first. This block makes it behave on a
   phone: gestures stay inside the canvas, layout respects notches,
   and the panels that assume a wide window get a small-screen form.
   ================================================================ */

/* stop the browser eating drags as scroll, pull-to-refresh or zoom */
html, body {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
body.is-touch {
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body.is-touch canvas#gl { touch-action: none; }
/* modals still need to scroll on a short screen */
body.is-touch .modal-scrim,
body.is-touch .chapter-scroll,
body.is-touch .rewards-scroll,
body.is-touch .brief-side { touch-action: pan-y; }

/* keep the interface clear of notches and home indicators */
body.is-touch .touch-col.right { right: max(16px, env(safe-area-inset-right)); }
body.is-touch .touch-col.left  { left: max(16px, env(safe-area-inset-left)); }
body.is-touch .topbar { padding-top: max(14px, env(safe-area-inset-top)); }

/* comfortable thumb targets */
body.is-touch .icon-btn { width: 46px; height: 46px; }
body.is-touch .btn { padding: 15px 26px; }
body.is-touch .btn.lg { padding: 17px 30px; }

/* --- phones: the panels that assume a wide window --------------- */
@media (max-width: 820px) {
  /* briefing stacks instead of splitting the screen */
  .brief-wrap { grid-template-columns: 1fr; }
  .brief-wrap > div:first-child { display: none; }
  .brief-side { background: linear-gradient(180deg, rgba(5,7,18,.86), rgba(5,7,18,.97) 22%); }
  .brief-head { gap: 11px; }
  .brief-glyph { width: 48px; height: 48px; font-size: 25px; }

  /* menu drops its two-column split */
  .menu-wrap { grid-template-columns: 1fr; }
  .menu-wrap::before { width: 100%; background: linear-gradient(180deg, rgba(3,5,14,.6), rgba(3,5,14,.93) 45%); }
  .menu-left { padding: 0 22px; }
  .menu-actions .btn { min-width: 0; width: 100%; }
  .menu-stats { flex-wrap: wrap; }
  .menu-stats .st { min-width: 92px; }

  /* results and puzzle cards get room to breathe */
  .result { padding: 24px 18px 20px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 7px; }
  .puzzle-card, .tower-primer, .heli-primer, .snr-primer, .deck-primer { padding: 20px 16px; }
}

/* --- the card battle hand becomes a swipeable rail -------------- */
@media (max-width: 820px) {
  .hand-rail {
    left: 0; right: 0; transform: none; bottom: 10px;
    max-width: 100%; flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; overflow-y: hidden;
    padding: 6px max(12px, env(safe-area-inset-left)) 6px max(12px, env(safe-area-inset-right));
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; touch-action: pan-x;
    scrollbar-width: none;
  }
  .hand-rail::-webkit-scrollbar { display: none; }
  .hand-rail.shake { animation: none; }        /* would fight the scroll */
  .game-card { flex: 0 0 auto; width: 122px; scroll-snap-align: center; }
  .game-card:hover { transform: none; }        /* no hover on a finger */
  .gc-toss { opacity: 1; }                     /* nothing to hover, so always show */
  .gc-desc { display: none; }
  .deck-board { top: 64px; width: 96vw; gap: 8px; }
  .order-card { padding: 9px 14px; }
  .oc-head b { font-size: 14px; }
  .oc-note { display: none; }
  .path-row { gap: 4px; }
  .path-node, .path-slot { min-width: 62px; padding: 7px 6px; }
  .path-node i, .path-slot i { font-size: 15px; }
  .path-arrow { font-size: 11px; }
  .event-banner { padding: 8px 12px; gap: 9px; }
  .event-banner span { display: none; }
}

/* --- the escape room on a phone --------------------------------- */
@media (max-width: 820px) {
  .pillar-tag { padding: 3px 8px; }
  .pillar-tag b { font-size: 11px; }
  .pillar-tag span { display: none; }
  .trace-panel { min-width: 0; max-width: 44vw; }
  .use-prompt { bottom: auto; top: 34%; }
  .room-plate { min-width: 0; }
  .rp-name { font-size: 15px; }
  .rp-sub { display: none; }
}

/* --- keep readouts clear of the thumb controls ------------------
   The action buttons stack up the right edge and the stick owns the
   bottom-left, so the HUD has to give both of them room rather than
   sitting underneath. --------------------------------------------- */
body.is-touch .touch-hint-bar { bottom: 4px; }

/* --- landscape phones are short, so trim vertical furniture ----- */
@media (max-height: 500px) {
  /* a 76px stack of three buttons does not fit 375px of height */
  body.is-touch .touch-btn { width: 58px; height: 58px; }
  body.is-touch .touch-btn.big { width: 68px; height: 68px; }
  body.is-touch .tb-label { font-size: 10px; }
  body.is-touch .tb-sub { font-size: 8px; }
  body.is-touch .touch-col { gap: 9px; bottom: 14px; }
  body.is-touch .stick { width: 104px; height: 104px; margin: -52px 0 0 -52px; left: 92px; }
  body.is-touch .stick-knob { width: 46px; height: 46px; }
  body.is-touch .hud-bc { bottom: 74px; }
  body.is-touch .hud-mod { padding: 7px 11px; }
  body.is-touch .gauge { min-width: 140px; }
  /* on a short landscape phone the top-right stack and the bottom-centre
     panel fight for the same band — drop the secondary detail rows */
  body.is-touch .snr-mod { min-width: 0; }
  body.is-touch .snr-terms { display: none; }
  body.is-touch .snr-read b { font-size: 21px; }
  body.is-touch .clock-mod { min-width: 0; }
  body.is-touch .clock-read b { font-size: 20px; }
  /* the arrest readout is the last thing on screen, so it may use the full
     width — but three metric columns will not fit a phone */
  /* a landscape phone has ~390px of height: the card gets the bottom third at
     most, or it swallows the arrest it is meant to be narrating */
  body.is-touch .arrest-card {
    width: calc(100% - var(--edge-l) - var(--edge-r)); padding: 8px 10px; border-radius: 12px;
  }
  body.is-touch .ar-head { gap: 8px; }
  body.is-touch .ar-badge { width: 28px; height: 28px; font-size: 14px; border-radius: 8px; }
  body.is-touch .ar-head h3 { font-size: 12.5px; }
  body.is-touch .ar-sub { font-size: 9.5px; margin-top: 1px; }
  body.is-touch .ar-cuffs { display: none; }
  body.is-touch .ar-body { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
  body.is-touch .ar-metric { padding: 6px 8px; border-radius: 8px; }
  body.is-touch .ar-metric.sig { display: none; }
  body.is-touch .ar-metric .label { font-size: 8px; }
  body.is-touch .ar-metric > b { font-size: 15px; }
  body.is-touch .ar-metric .foot { display: none; }
  body.is-touch .ar-bar { height: 4px; margin-top: 5px; }
  body.is-touch .ar-cov { margin-top: 7px; gap: 8px; }
  body.is-touch .ar-cov .label { font-size: 8px; }
  body.is-touch .ar-covbar { height: 5px; }
  body.is-touch .ar-cov > b { font-size: 11px; }
  body.is-touch .ar-note { margin-top: 7px; font-size: 9.5px; line-height: 1.4; max-height: 2.9em; overflow: hidden; }
  /* no room for both on a landscape phone — the card carries the numbers */
  body.is-touch .hud.arrested .snr-mod,
  body.is-touch .hud.arrested .clock-mod { display: none; }
  body.is-touch .snr-clock-note .cl-ring { width: 48px; height: 48px; font-size: 14px; }
  body.is-touch .snr-clock-note span { font-size: 11px; }
  body.is-touch .budget-mod .bl-rows { display: none; }
  body.is-touch .budget-mod { min-width: 0; }
  /* the centre band is the only space a short landscape phone has left:
     the stick owns bottom-left and the buttons own the right edge, so the
     bottom-centre readout moves up under the objective chip */
  body.is-touch .hud-corner.hud-bc { bottom: var(--edge-b); top: auto; }
  body.is-touch .hud-bc .hud-mod { min-width: 0; padding: 6px 12px; }
  body.is-touch .hud-bc .label { font-size: 8.5px; }
  body.is-touch .hud-bc .mono { font-size: 16px !important; }
  body.is-touch .nav-mod .nav-dial { width: 38px; height: 38px; }
  body.is-touch .tech-card { display: none; }
  body.is-touch .vsi-mod { display: none; }
  body.is-touch .objective-chip { font-size: 11px; padding: 6px 12px; }
  body.is-touch .speedo b { font-size: 28px; }
  /* On a short landscape phone the only free horizontal band is between the
     left gauges and the right thumb stack, so the board is sized to fit it. */
  body.is-touch .deck-board { top: 50px; width: min(1000px, 44vw); gap: 6px; }
  body.is-touch .path-node, body.is-touch .path-slot { min-width: 56px; padding: 6px 4px; }
  body.is-touch .path-slot b { font-size: 12px; }
  body.is-touch .path-node span, body.is-touch .path-slot span { font-size: 7.5px; }
  body.is-touch .oc-head b { font-size: 12px; }
  body.is-touch .oc-kicker { display: none; }
  body.is-touch .fault-popup { top: auto; bottom: 96px; transform: none; }
  body.is-touch .heli-attitude { display: none; }
  .modal-scrim {
    padding: 8px 8px calc(18px + env(safe-area-inset-bottom, 0px));
    align-items: flex-start;
  }
  .modal-scrim > * { margin: 0 auto; }
  .result h2, .puzzle-card h2 { font-size: 22px; }
  .result .rstars { font-size: 24px; margin: 2px 0 12px; }
}

/* --- the menu on a short screen ---------------------------------
   A landscape phone is ~375 px tall; the full menu column is over 600.
   Laid out centred with no scroll, every button below the title simply
   fell off the bottom of the screen and could not be reached. So on
   short screens the column compacts, and scrolls as a safety net. */
@media (max-height: 560px), (pointer: coarse) and (max-height: 640px) {
  .menu-wrap { align-items: stretch; }
  .menu-left {
    display: flex; flex-direction: column;
    /* When the column is taller than the screen, plain `center` pushes the
       first child's top *above* the scroll origin, where it can neither be
       seen nor scrolled to — which is why the SIGNAL CITY title came out
       sliced in half on a short phone. `safe center` centres only while it
       fits and falls back to flex-start once it does not. */
    justify-content: flex-start;
    justify-content: safe center;
    gap: 6px;
    padding: var(--edge-t) var(--edge-l) var(--edge-b);
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    max-height: var(--app-h, 100dvh);
  }
  .brand-kicker { margin-bottom: 6px; padding: 4px 10px; font-size: 8.5px; letter-spacing: .3em; }
  .title-3d { font-size: clamp(26px, 7.2vh, 44px); line-height: .9; }
  .tagline { display: none; }            /* the chapters explain themselves */
  .menu-actions { gap: 7px; margin-top: 8px; }
  .menu-actions .btn { padding: 10px 16px; font-size: 11.5px; min-width: 0; width: 100%; }
  .menu-actions .btn.lg { padding: 12px 18px; font-size: 12.5px; }
  .menu-stats { margin-top: 10px; gap: 7px; }
  .menu-stats .st { padding: 7px 9px 6px; max-width: none; }
  .menu-stats .st b { font-size: 17px; }
  .menu-stats .st .label { font-size: 8.5px; }
  .menu-hint { display: none; }
}

/* the same squeeze for the other full-screen front-end pages */
@media (max-height: 560px), (pointer: coarse) and (max-height: 640px) {
  .topbar { padding-top: var(--edge-t); padding-bottom: 8px; }
  .topbar h2 { font-size: 15px; }
  .topbar .sub { display: none; }
  .chapter-scroll, .rewards-scroll { padding-top: 8px; }
  .ch-visual { height: 84px; }
  .ch-visual .glyph { font-size: 38px; }
  .glyph-wrap::before { width: 68px; height: 68px; }
  .ch-body { padding: 12px 14px 13px; }
  .ch-body h3 { font-size: 16px; margin-bottom: 6px; }
  .ch-body p { font-size: 12px; min-height: 0; }
  .ch-go { display: none; }
}

/* A modal owns the screen: the thumb controls would otherwise float over
   it and cover its buttons, which is what made Start Pursuit unpressable. */
body.modal-open #touch-layer { display: none; }
body.modal-open .ctrl-strip,
body.modal-open .use-prompt,
body.modal-open .hand-rail { display: none; }

/* Briefings carry a lot of teaching copy. On a short screen that means a
   long scroll before the start button, so tighten the type and keep the
   action pinned in view instead of buried at the bottom.

   Keyed off `body.is-touch` rather than a `pointer: coarse` media query:
   the game already decides touch vs desktop itself and can be forced
   either way, so the layout should follow that same signal. */
body.is-touch .modal-scrim .panel { overflow: visible; }   /* sticky needs it */

@media (max-height: 620px) {
  body.is-touch .snr-primer,
  body.is-touch .tower-primer,
  body.is-touch .heli-primer,
  body.is-touch .deck-primer,
  body.is-touch .puzzle-card { padding: 14px 14px 12px; }

  body.is-touch .snr-primer h2,
  body.is-touch .tower-primer h2,
  body.is-touch .heli-primer h2,
  body.is-touch .puzzle-card h2 { font-size: 19px; margin: 2px 0 8px; }

  body.is-touch .tp-lead { font-size: 12px; line-height: 1.45; margin-bottom: 10px; }
  body.is-touch .snr-formula { padding: 10px; }
  body.is-touch .snr-formula .f-main { font-size: 15px; }
  body.is-touch .snr-formula .f-note { font-size: 11px; margin-top: 7px; }
  body.is-touch .snr-why li,
  body.is-touch .tp-phase p,
  body.is-touch .tp-note,
  body.is-touch .hc-grid > div { font-size: 11.5px; line-height: 1.4; }
  body.is-touch .snr-why ul { gap: 5px; margin-top: 6px; }
  body.is-touch .tp-phases { gap: 7px; }
  body.is-touch .tp-phase { padding: 9px 11px; }
  body.is-touch .tp-phase b { font-size: 12.5px; }
  body.is-touch .snr-task,
  body.is-touch .tp-note { padding: 9px 11px; margin-top: 10px; }
  body.is-touch .snr-task p { font-size: 11.5px; }
  body.is-touch .tref-row,
  body.is-touch .arch-row,
  body.is-touch .cs-node { padding: 7px 9px; }
  body.is-touch .tref-sym,
  body.is-touch .cs-note { font-size: 10.5px; }
  body.is-touch .ticket p { font-size: 12.5px; }
  body.is-touch .domain-btn { padding: 10px 12px; }
  body.is-touch .dm-hint { display: none; }

  /* the primary action stays on screen rather than at the end of the scroll */
  body.is-touch .modal-scrim .panel > .btns {
    position: sticky; bottom: 0; z-index: 3;
    margin: 10px -14px -12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(8,11,26,0), rgba(8,11,26,.97) 34%);
    border-radius: 0 0 14px 14px;
  }
}

/* One lane owns every transient message — intel cards and toasts — so they
   stack in a single flow and can never land on each other.

   On a desktop it is a card under the objective, bounded by gutters wide
   enough that it cannot reach the side readouts. On a phone there is no
   free band left for a card at all once the two thumb columns and four
   HUD corners have taken their space, so it becomes a single-line ticker
   along the very bottom edge — under everything, covering nothing. */
.msg-lane {
  position: absolute;
  left: 300px; right: 300px;            /* gutters reserve the side columns */
  top: calc(var(--edge-t) + 86px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.msg-lane .fact-card,
.msg-lane .toast-wrap {
  position: static; left: auto; top: auto; bottom: auto; transform: none;
  width: 100%;
}
.msg-lane .toast-wrap { align-items: center; }
.msg-lane .fact-card { animation: factInFlow .4s var(--e-out) both; }
.msg-lane .fact-card.out { animation: factOutFlow .28s var(--e-out) both; }
@keyframes factInFlow  { from { opacity: 0; transform: translateY(-10px); } }
@keyframes factOutFlow { to   { opacity: 0; transform: translateY(-8px); } }

/* A narrow or short window has no room for a card either, so it gets the
   same one-line ticker treatment as a phone. */
@media (max-width: 1240px), (max-height: 620px) {
  .msg-lane {
    left: 50%; right: auto; transform: translateX(-50%);
    top: auto; bottom: 3px;
    width: min(440px, 54vw);
    flex-direction: column-reverse; gap: 3px;
  }
  .msg-lane .fact-card {
    padding: 4px 10px; gap: 7px; border-radius: 100px; border-left-width: 1px;
    align-items: center; background: rgba(6,10,24,.82);
  }
  .msg-lane .fact-card .fi { font-size: 11px; }
  .msg-lane .fact-card .ft { min-width: 0; }
  .msg-lane .fact-card .ft .label { display: none; }
  .msg-lane .fact-card .ft p {
    font-size: 10px; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .msg-lane .toast { padding: 4px 12px; font-size: 9px; letter-spacing: .1em; }
  .hud-bc { bottom: calc(var(--edge-b) + 58px); }
}

/* ---- phone: a ticker on the floor, not a card in the play area ---- */
body.is-touch .msg-lane {
  left: 50%; right: auto; transform: translateX(-50%);
  top: auto; bottom: 3px;
  width: min(440px, 54vw);
  flex-direction: column-reverse; gap: 3px;
}
body.is-touch .msg-lane .fact-card {
  padding: 4px 10px; gap: 7px; border-radius: 100px; border-left-width: 1px;
  align-items: center;
  background: rgba(6,10,24,.82);
}
body.is-touch .msg-lane .fact-card .fi { font-size: 11px; }
body.is-touch .msg-lane .fact-card .ft { min-width: 0; }
body.is-touch .msg-lane .fact-card .ft .label { display: none; }
body.is-touch .msg-lane .fact-card .ft p {
  font-size: 9.5px; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.is-touch .msg-lane .toast { padding: 4px 12px; font-size: 9px; letter-spacing: .1em; }

/* the bottom-centre readout lifts clear of the ticker */
body.is-touch .hud-bc { bottom: calc(var(--edge-b) + 58px); }
/* and stays shallow, since it shares the floor band */
body.is-touch .nav-dial { width: 38px; height: 38px; }
body.is-touch .nav-dial i::before { border-left-width: 6px; border-right-width: 6px; border-bottom-width: 13px; top: 5px; }
body.is-touch .nav-range { font-size: 17px; }
body.is-touch .nav-row { gap: 10px; margin-top: 4px; }
body.is-touch [data-navhint] { display: none; }

/* ============ MODAL / RESULTS ============ */
.modal-scrim {
  position: absolute; inset: 0;
  /* Above the training card, which carries z-index 5. Without this the quit
     confirmation opened *behind* the tutorial step and the player could not
     reach "Back to missions" at all. */
  z-index: 60;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 18px; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(3,4,12,.72); backdrop-filter: blur(10px);
  animation: fadeIn .35s var(--e-out) both;
}
.modal-scrim > * { margin: auto; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.result {
  position: relative;
  width: min(560px, 92vw); text-align: center; padding: 32px 30px 26px;
  max-height: none;
  animation: resultIn .55s var(--e-back) both;
}
/* a coloured rule across the top so win and loss read instantly */
.result::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  box-shadow: 0 0 22px var(--green);
}
.result.lose::after { background: linear-gradient(90deg, transparent, var(--red), transparent); box-shadow: 0 0 22px var(--red); }
.result .rk { position: relative; }
@keyframes resultIn { from { opacity: 0; transform: translateY(30px) scale(.94); } to { opacity: 1; transform: none; } }
.result .rk { font-family: var(--f-display); font-size: 11px; letter-spacing: .5em; text-transform: uppercase; color: var(--text-mute); }
.result h2 {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(30px,4vw,52px);
  letter-spacing: .04em; text-transform: uppercase; margin: 8px 0 6px;
}
.result.win h2  { background: linear-gradient(180deg,#fff,#3dff9a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 28px rgba(61,255,154,.5)); }
.result.lose h2 { background: linear-gradient(180deg,#fff,#ff3b5c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 28px rgba(255,59,92,.5)); }
.result .rmsg { color: var(--text-dim); font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; }

.result .rstars { display: flex; justify-content: center; gap: 12px; margin: 4px 0 20px; font-size: 34px; }
.result .rstars span { color: rgba(255,255,255,.14); animation: starPop .5s var(--e-back) both; }
.result .rstars span.on { color: var(--yellow); text-shadow: 0 0 24px rgba(255,212,59,.9); }
@keyframes starPop { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: 10px; margin-bottom: 24px; }
.stat-grid .s {
  position: relative; padding: 14px 8px 12px; border-radius: 11px;
  background: linear-gradient(160deg, rgba(22,30,62,.6), rgba(8,11,26,.55));
  border: 1px solid rgba(120,200,255,.14); overflow: hidden;
  animation: fadeUp .45s var(--e-out) both;
}
.stat-grid .s::before {
  content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); opacity: .55;
}
.result.win .stat-grid .s::before { background: linear-gradient(90deg, transparent, var(--green), transparent); }
.result.lose .stat-grid .s::before { background: linear-gradient(90deg, transparent, var(--red), transparent); }
.stat-grid .s b {
  display: block; font-family: var(--f-display); font-size: 21px; font-weight: 900;
  color: var(--cyan); text-shadow: var(--glow-cyan);
}
.result.win .stat-grid .s b { color: var(--green); text-shadow: 0 0 18px rgba(61,255,154,.5); }
.result .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* pause */
.pause-card { width: min(420px,90vw); padding: 30px; text-align: center; }
.pause-card h2 { font-family: var(--f-display); font-size: 28px; font-weight: 900; letter-spacing: .18em; margin-bottom: 8px; }

/* ============ LOADER / BOOT SEQUENCE ============ */
/* The loader sits over the live WebGL canvas, so its own background is
   only a scrim — the moving 3D city is what you actually see behind it. */
#loader {
  position: fixed; top: 0; left: 0; z-index: 100;
  width: var(--app-w, 100vw); height: var(--app-h, 100dvh);
  overflow: hidden;
  transition: opacity .8s var(--e-out), visibility .8s;
  --ld-pad: clamp(18px, 3.4vw, 54px);
  --ld-key: #7c5cff;      /* violet, not magenta — it has to live with the cyan */
  --ld-key2: #46d8ff;
}
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* the city keeps flying behind; these only shape the light on top of it */
.ld-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(85% 70% at 50% 46%, rgba(4,5,12,0) 22%, rgba(4,5,12,.62) 78%, rgba(4,5,12,.88) 100%),
    linear-gradient(to top, rgba(4,5,12,.94) 0%, rgba(4,5,12,.42) 30%, rgba(4,5,12,0) 58%),
    linear-gradient(to bottom, rgba(4,5,12,.72) 0%, rgba(4,5,12,0) 24%);
}
.ld-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background: repeating-linear-gradient(to bottom,
    rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  animation: ldScan 7s linear infinite;
}
@keyframes ldScan { to { background-position-y: 300px; } }
/* a slow bloom breathing behind the lockup */
.ld-vig {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 40% at 50% 44%, rgba(139,92,255,.20), transparent 70%);
  animation: ldBreathe 6s ease-in-out infinite;
}
@keyframes ldBreathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* corner brackets — the screen reads as one instrument */
.ld-corner {
  position: absolute; width: clamp(20px, 3vw, 40px); aspect-ratio: 1; z-index: 3;
  border: 2px solid rgba(124,92,255,.5); pointer-events: none;
  animation: ldFade 1.2s .5s var(--e-out) both;
}
.ld-corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.ld-corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.ld-corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.ld-corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
@keyframes ldFade { from { opacity: 0; } }

/* ---------------- top rail ---------------- */
.ld-rail {
  position: absolute; z-index: 4; top: clamp(20px, 3.4vh, 40px);
  left: var(--ld-pad); right: var(--ld-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  animation: ldDrop 1s var(--e-out) both;
}
@keyframes ldDrop { from { opacity: 0; transform: translateY(-12px); } }

.ld-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-display); font-size: clamp(8.5px, .92vw, 12px);
  letter-spacing: .2em; color: var(--text-mute);
}
.ld-brand b { color: var(--ld-key); font-weight: 700; text-shadow: 0 0 14px rgba(124,92,255,.7); }
.ld-brand svg {
  width: 15px; height: 15px; flex: none; fill: none; stroke: var(--ld-key);
  stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(124,92,255,.8));
}
.ld-build {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 100px;
  border: 1px solid rgba(124,92,255,.3); background: rgba(10,4,18,.4);
  font-family: var(--f-mono); font-size: clamp(8.5px, .9vw, 11px);
  letter-spacing: .2em; color: var(--text-dim);
}
.ld-build i { width: 5px; height: 5px; border-radius: 50%; background: var(--ld-key);
              box-shadow: 0 0 9px var(--ld-key); animation: pulseDot 1.4s infinite; }

/* ---------------- hero lockup, centred ---------------- */
.ld-stage {
  position: absolute; z-index: 3;
  left: var(--ld-pad); right: var(--ld-pad);
  top: 50%; transform: translateY(-56%);
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vh, 26px);
  text-align: center;
  animation: ldRise 1.4s var(--e-out) both;
}
@keyframes ldRise { from { opacity: 0; transform: translateY(-48%); } }

.ld-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-ui); font-size: clamp(8px, .88vw, 11px);
  letter-spacing: .42em; text-transform: uppercase; color: var(--text-mute);
}
.ld-eyebrow i {
  display: block; width: clamp(24px, 5vw, 74px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,92,255,.75));
}
.ld-eyebrow i:last-child { background: linear-gradient(270deg, transparent, rgba(124,92,255,.75)); }

.ld-title {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(40px, 8.2vw, 118px); line-height: .92;
  letter-spacing: .14em; text-indent: .14em; color: #fff;
  text-shadow: 0 0 30px rgba(255,255,255,.4), 0 0 84px rgba(139,92,255,.6),
               0 0 140px rgba(124,92,255,.38);
  animation: flick 4.2s infinite;
}
.ld-title .lw { display: block; }
.ld-title .l2 { position: relative; }
/* the 3D tag rides the baseline of CITY instead of taking its own line */
.ld-title .l2 em {
  font-style: normal; font-size: .26em; letter-spacing: .18em;
  color: var(--ld-key2); vertical-align: .95em; margin-left: .18em;
  text-shadow: 0 0 20px rgba(34,233,255,.8);
}
@keyframes flick { 0%,95%,100% { opacity: 1; } 96% { opacity: .5; } 97.5% { opacity: .94; } }

/* a light bar sweeping across the letters, like a scanner pass */
.ld-sweep {
  position: absolute; inset: -6% -12%; pointer-events: none; overflow: hidden;
  border-radius: 6px;
}
.ld-sweep::before {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 40%, rgba(34,233,255,.30) 50%, rgba(255,255,255,.16) 60%, transparent);
  filter: blur(2px);
  animation: ldSweep 4.6s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes ldSweep { 0% { left: -30%; } 55%,100% { left: 115%; } }

/* ---------------- spectrum ---------------- */
.ld-spectrum {
  display: flex; align-items: flex-end; gap: clamp(2px, .5vw, 5px);
  height: clamp(16px, 3.2vh, 30px);
}
.ld-spectrum i {
  display: block; width: clamp(2px, .45vw, 5px); border-radius: 100px;
  background: linear-gradient(to top, var(--ld-key), var(--purple) 55%, var(--ld-key2));
  box-shadow: 0 0 6px rgba(124,92,255,.38);
  transform-origin: bottom; height: 100%;
  animation: ldEq 1.05s ease-in-out infinite alternate;
}
@keyframes ldEq { from { transform: scaleY(.12); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }
.ld-spectrum i:nth-child(3n)   { animation-duration: 1.45s; }
.ld-spectrum i:nth-child(3n+1) { animation-duration: .82s; }
.ld-spectrum i:nth-child(4n)   { animation-duration: 1.7s; }
.ld-spectrum i:nth-child(1)  { animation-delay: -.10s } .ld-spectrum i:nth-child(2)  { animation-delay: -.55s }
.ld-spectrum i:nth-child(3)  { animation-delay: -.90s } .ld-spectrum i:nth-child(4)  { animation-delay: -.25s }
.ld-spectrum i:nth-child(5)  { animation-delay: -.70s } .ld-spectrum i:nth-child(6)  { animation-delay: -1.1s }
.ld-spectrum i:nth-child(7)  { animation-delay: -.40s } .ld-spectrum i:nth-child(8)  { animation-delay: -.85s }
.ld-spectrum i:nth-child(9)  { animation-delay: -1.3s } .ld-spectrum i:nth-child(10) { animation-delay: -.15s }
.ld-spectrum i:nth-child(11) { animation-delay: -.62s } .ld-spectrum i:nth-child(12) { animation-delay: -1.0s }
.ld-spectrum i:nth-child(13) { animation-delay: -.34s } .ld-spectrum i:nth-child(14) { animation-delay: -.78s }
.ld-spectrum i:nth-child(15) { animation-delay: -1.2s } .ld-spectrum i:nth-child(16) { animation-delay: -.05s }
.ld-spectrum i:nth-child(17) { animation-delay: -.50s } .ld-spectrum i:nth-child(18) { animation-delay: -.95s }
.ld-spectrum i:nth-child(19) { animation-delay: -1.4s } .ld-spectrum i:nth-child(20) { animation-delay: -.20s }
.ld-spectrum i:nth-child(21) { animation-delay: -.66s } .ld-spectrum i:nth-child(22) { animation-delay: -1.05s }
.ld-spectrum i:nth-child(23) { animation-delay: -.30s } .ld-spectrum i:nth-child(24) { animation-delay: -.74s }
.ld-spectrum i:nth-child(25) { animation-delay: -1.15s } .ld-spectrum i:nth-child(26) { animation-delay: -.44s }
.ld-spectrum i:nth-child(27) { animation-delay: -.88s } .ld-spectrum i:nth-child(28) { animation-delay: -1.35s }
.ld-spectrum i:nth-child(29) { animation-delay: -.58s } .ld-spectrum i:nth-child(30) { animation-delay: -1.0s }

/* ---------------- the 64 cell sites ---------------- */
.ld-nodes { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ld-nodes-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 14px; border-radius: 100px;
  background: rgba(4,6,16,.55); border: 1px solid rgba(34,233,255,.2);
  backdrop-filter: blur(6px);
  font-family: var(--f-ui); font-size: clamp(7.5px, .82vw, 10px);
  letter-spacing: .28em; text-transform: uppercase; color: var(--text-dim);
}
.ld-nodes-head b { font-family: var(--f-mono); letter-spacing: .1em; color: var(--ld-key2); font-weight: 400; }
.ld-node-grid {
  display: grid; grid-template-columns: repeat(32, 1fr); gap: clamp(3px, .5vw, 6px);
}
.ld-node-grid i {
  display: block; width: clamp(4px, .62vw, 7px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.11);
  transition: background .35s var(--e-out), box-shadow .35s var(--e-out), transform .35s var(--e-back);
}
.ld-node-grid i.on {
  background: var(--ld-key2);
  box-shadow: 0 0 9px rgba(34,233,255,.95), 0 0 18px rgba(34,233,255,.45);
  transform: scale(1.25);
}
/* the newest site to come online gets a beat of attention */
.ld-node-grid i.fresh { animation: ldPop .6s var(--e-out); }
@keyframes ldPop { 0% { transform: scale(2.6); background: #fff; } 100% { transform: scale(1.25); } }

/* ---------------- bottom console ---------------- */
.ld-foot {
  position: absolute; z-index: 4;
  left: var(--ld-pad); right: var(--ld-pad); bottom: clamp(22px, 4.4vh, 52px);
  display: flex; align-items: flex-end; gap: clamp(16px, 3vw, 44px);
  animation: ldRiseUp 1.4s .2s var(--e-out) both;
}
@keyframes ldRiseUp { from { opacity: 0; transform: translateY(16px); } }

.ld-console {
  flex: 1; min-width: 0;
  padding: 13px 16px 12px; border-radius: 13px;
  background: linear-gradient(180deg, rgba(10,6,22,.5), rgba(6,4,14,.72));
  border: 1px solid rgba(124,92,255,.24);
  box-shadow: 0 20px 50px -28px #000, inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
}
.ld-msg-row { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }
.ld-caret {
  font-family: var(--f-mono); font-size: clamp(10px, 1.1vw, 14px); color: var(--ld-key);
  animation: pulseDot 1.1s steps(1) infinite;
}
.ld-msg {
  flex: 1; min-width: 0;
  font-family: var(--f-display); font-size: clamp(10.5px, 1.25vw, 16px);
  letter-spacing: .24em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0 16px rgba(124,92,255,.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ld-msg::after { content: '…'; }
.ld-msg.swap { animation: ldSwap .5s var(--e-out); }
@keyframes ldSwap { from { opacity: 0; transform: translateX(-10px); } }

.ld-bar {
  position: relative; height: 8px; border-radius: 100px; overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(124,92,255,.22);
  box-shadow: inset 0 0 14px -7px #000;
}
.ld-bar > i {
  display: block; height: 100%; width: 0; border-radius: 100px;
  background: linear-gradient(90deg, var(--purple) 0%, var(--ld-key) 62%, #fff 100%);
  box-shadow: 0 0 18px rgba(124,92,255,.9);
  transition: width .18s linear;
}
/* a highlight running along the track so it never looks stalled */
.ld-bar > u {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  width: 34%; animation: ldShimmer 2.2s linear infinite;
}
@keyframes ldShimmer { from { transform: translateX(-120%); } to { transform: translateX(420%); } }

.ld-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 11px;
  font-family: var(--f-mono); font-size: clamp(8px, .92vw, 11px);
  letter-spacing: .14em; color: var(--text-mute); text-transform: uppercase;
}
.ld-meta b { color: var(--text); font-weight: 400; }
.ld-dot-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.25); }

/* ---------------- the wheel ---------------- */
.ld-wheel { position: relative; width: clamp(84px, 10.5vw, 132px); aspect-ratio: 1; flex: none; }
.ld-wheel svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ld-wheel circle { fill: none; stroke-linecap: round; }
.ld-wheel .ring-bg { stroke: rgba(255,255,255,.09); stroke-width: 5; }
.ld-wheel .ring-fg {
  stroke: var(--ld-key); stroke-width: 5;
  filter: drop-shadow(0 0 8px rgba(124,92,255,.85));
  transition: stroke-dashoffset .18s linear;
}
/* an inner arc that just spins — proof of life even at 0 % */
.ld-wheel .ring-scan {
  stroke: rgba(34,233,255,.75); stroke-width: 2;
  stroke-dasharray: 34 236; transform-origin: 60px 60px;
  animation: spin 2.4s linear infinite;
  filter: drop-shadow(0 0 6px rgba(34,233,255,.9));
}
.ld-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  font-family: var(--f-display); font-weight: 900; color: #fff;
  text-shadow: 0 0 22px rgba(124,92,255,.85);
}
.ld-pct b { font-size: clamp(21px, 2.9vw, 38px); line-height: 1; }
.ld-pct span { font-size: clamp(10px, 1.3vw, 17px); opacity: .7; margin-top: .25em; }

/* ---------------- the moment it lands ---------------- */
#loader.done .ld-msg { color: var(--green); text-shadow: 0 0 18px rgba(61,255,154,.55); }
#loader.done .ld-bar > i { background: linear-gradient(90deg, var(--cyan), var(--green)); }
#loader.done .ld-bar > u { display: none; }
#loader.done .ld-wheel .ring-fg { stroke: var(--green); filter: drop-shadow(0 0 12px rgba(61,255,154,.95)); }
#loader.done .ld-wheel .ring-scan { opacity: 0; }
#loader.done .ld-node-grid i { background: var(--green); box-shadow: 0 0 9px rgba(61,255,154,.9); }
#loader.done .ld-corner { border-color: rgba(61,255,154,.6); }
#loader.done .ld-title { animation: none; }

/* short and narrow screens: drop the decoration, keep the instrument */
@media (max-width: 860px), (max-height: 520px) {
  .ld-stage { gap: 10px; transform: translateY(-54%); }
  .ld-eyebrow { letter-spacing: .28em; }
  .ld-eyebrow i { width: clamp(14px, 4vw, 40px); }
  .ld-nodes-head { padding: 4px 11px; }
  .ld-node-grid { grid-template-columns: repeat(32, 1fr); }
  .ld-foot { gap: 14px; align-items: center; }
  .ld-console { padding: 9px 12px 10px; border-radius: 11px; }
  .ld-msg { letter-spacing: .16em; }
  .ld-msg-row { margin-bottom: 8px; }
  .ld-meta { margin-top: 8px; gap: 7px; }
  .ld-wheel { width: clamp(64px, 15vw, 86px); }
  .ld-corner { width: 16px; }
}
/* A landscape phone is ~390 px tall: the hero and the console were running
   into each other, so the decoration goes and the lockup tightens up. */
@media (max-height: 460px) {
  .ld-spectrum { display: none; }
  .ld-eyebrow { display: none; }
  .ld-stage { transform: translateY(-64%); gap: 8px; }
  .ld-title { font-size: clamp(30px, 6.6vw, 62px); letter-spacing: .1em; text-indent: .1em; }
  .ld-node-grid { gap: 3px; }
  .ld-node-grid i { width: 4px; }
  .ld-nodes-head { padding: 3px 10px; letter-spacing: .18em; }
  .ld-meta > span:nth-child(n+4) { display: none; }
  .ld-rail { top: 12px; }
  .ld-corner { display: none; }
}
/* a portrait phone sees the rotate prompt, but keep it sane regardless */
@media (max-width: 560px) {
  .ld-node-grid { grid-template-columns: repeat(16, 1fr); }
  .ld-eyebrow { display: none; }
  .ld-meta > span:nth-child(n+3) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-grain, .ld-title { animation: none; }
}

/* ============ mobile touch controls ============ */
.touch-pad { position: absolute; inset: auto 0 0 0; height: 42%; display: none; }
body.touch .touch-pad { display: block; }
.touch-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; color: var(--text-mute);
}

/* ============ responsive ============ */
@media (max-width: 980px) {
  .menu-wrap { grid-template-columns: 1fr; }
  .menu-left { padding: 0 24px; }
  .brief-wrap { grid-template-columns: 1fr; }
  .brief-side { background: linear-gradient(0deg, rgba(5,7,18,.96) 70%, rgba(5,7,18,.2)); }
}
@media (max-width: 640px) {
  .gauge { min-width: 130px; }
  .speedo b { font-size: 30px; }
  .menu-stats { gap: 16px; }
  .hud-corner { gap: 7px; }
  .hud-tl, .hud-tr, .hud-bl, .hud-br { top: var(--edge-t); left: var(--edge-l); }
  .hud-tr, .hud-br { left: auto; right: var(--edge-r); }
  .hud-bl, .hud-br { top: auto; bottom: var(--edge-b); }
}

/* reduce heavy blur where the GPU is likely busy */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* world-anchored 3D node labels */
.node-label {
  position: absolute; transform: translate(-50%, -100%);
  font-family: var(--f-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; color: var(--text-dim);
  padding: 3px 8px; border-radius: 5px; white-space: nowrap;
  background: rgba(4, 7, 18, .72); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.node-label.on {
  color: var(--cyan); border-color: rgba(34,233,255,.5);
  box-shadow: 0 0 16px -4px rgba(34,233,255,.8);
}

/* mission control hint card */
.controls-card {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  width: min(560px, 90vw); padding: 14px 18px;
  background: linear-gradient(140deg, rgba(11,18,44,.9), rgba(6,9,22,.88));
  border: 1px solid rgba(120,200,255,.2); border-radius: 12px;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lift);
  animation: ctrlIn .5s var(--e-back) both .35s;
  pointer-events: none;
}
.controls-card.out { animation: ctrlOut .45s var(--e-out) both; }
@keyframes ctrlIn  { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes ctrlOut { to { opacity: 0; transform: translate(-50%, 14px); } }
.controls-card .label { color: var(--cyan); }

/* ==========================================================
   TOUCH CONTROL HUD — only mounted when the session is in touch mode
   ========================================================== */
#touch-layer {
  position: fixed; top: 0; left: 0; z-index: 12;
  width: var(--app-w, 100vw); height: var(--app-h, 100dvh);
  pointer-events: none;
  touch-action: none;
}
.touch-hud { position: absolute; inset: 0; }
.touch-hud > * { pointer-events: auto; }

/* --- analog stick --- */
.stick-zone {
  position: absolute; left: 0; bottom: 0;
  width: 46%; height: 62%;
  touch-action: none;
}
.stick {
  position: absolute; left: 108px; top: 58%;
  width: 128px; height: 128px; margin: -64px 0 0 -64px;
  opacity: .5; transition: opacity .2s;
}
.stick.active { opacity: 1; }
.stick-base {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(34,233,255,.34);
  background: radial-gradient(circle at 50% 50%, rgba(34,233,255,.10), rgba(6,10,24,.55) 70%);
  box-shadow: 0 0 26px -8px rgba(34,233,255,.6), inset 0 0 24px rgba(34,233,255,.08);
}
.stick-base::after {
  content: ''; position: absolute; inset: 22px; border-radius: 50%;
  border: 1px dashed rgba(34,233,255,.2);
}
.stick-knob {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 35%, #6ff4ff, #0b7f96 70%, #063947);
  border: 1px solid rgba(180,250,255,.7);
  box-shadow: 0 0 22px rgba(34,233,255,.75), 0 6px 16px rgba(0,0,0,.6);
}
.stick-label {
  position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%);
  font-family: var(--f-display); font-size: 9px; font-weight: 700;
  letter-spacing: .28em; color: rgba(150,200,235,.7); white-space: nowrap;
}

/* --- action buttons --- */
.touch-col {
  position: absolute; bottom: 26px;
  display: flex; flex-direction: column-reverse; gap: 12px; align-items: center;
}
.touch-col.right { right: 22px; }
.touch-col.left  { left: 22px; bottom: auto; top: 50%; transform: translateY(-50%); }
/* A left/right pair reads as a pair: side by side, in reading order, down
   where the thumb rests. Stacked vertically they had no spatial meaning. */
.touch-col.left.row {
  flex-direction: row; bottom: 26px; top: auto; transform: none;
  left: 20px; gap: 16px;
}

.touch-btn {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 42% 34%, rgba(34,233,255,.24), rgba(8,14,32,.82) 72%);
  border: 2px solid rgba(34,233,255,.45);
  color: #dff8ff; cursor: pointer;
  box-shadow: 0 0 22px -8px rgba(34,233,255,.7), 0 6px 18px rgba(0,0,0,.55);
  transition: transform .08s, box-shadow .12s, background .12s;
  -webkit-user-select: none; user-select: none; touch-action: none;
}
.touch-btn .tb-label {
  font-family: var(--f-display); font-size: 12px; font-weight: 800; letter-spacing: .1em;
}
.touch-btn .tb-sub { font-size: 9px; letter-spacing: .16em; color: rgba(160,205,235,.75); }
.touch-btn.active {
  transform: scale(.92);
  background: radial-gradient(circle at 42% 34%, rgba(34,233,255,.55), rgba(10,40,70,.9) 72%);
  box-shadow: 0 0 34px -4px rgba(34,233,255,1);
}
.touch-btn.big { width: 92px; height: 92px; }
.touch-btn.warm {
  background: radial-gradient(circle at 42% 34%, rgba(255,138,26,.26), rgba(28,12,4,.82) 72%);
  border-color: rgba(255,138,26,.55); color: #ffe4c4;
  box-shadow: 0 0 22px -8px rgba(255,138,26,.7), 0 6px 18px rgba(0,0,0,.55);
}
.touch-btn.warm.active { box-shadow: 0 0 34px -4px rgba(255,138,26,1); }
.touch-btn.cool {
  background: radial-gradient(circle at 42% 34%, rgba(139,92,255,.26), rgba(14,8,32,.82) 72%);
  border-color: rgba(139,92,255,.55); color: #e6dcff;
}

.touch-hint-bar {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em;
  color: rgba(150,190,220,.6); text-transform: uppercase; white-space: nowrap;
  pointer-events: none;
}

/* touch mode moves the HUD out of the thumbs' way */
body.is-touch .hud-bc { bottom: 132px; }
body.is-touch .fact-card {
  top: calc(var(--edge-t) + 62px);
  width: min(340px, 54vw); padding: 8px 11px; gap: 9px;
}
body.is-touch .fact-card .ft p { font-size: 11px; line-height: 1.4; }
body.is-touch .fact-card .fi { font-size: 14px; }
body.is-touch .controls-card { bottom: 150px; }
body.is-desktop .touch-hud { display: none; }

@media (max-width: 780px) {
  .touch-btn { width: 66px; height: 66px; }
  .touch-btn.big { width: 80px; height: 80px; }
  .stick { left: 108px; }
}
@media (max-height: 460px) {
  .stick { top: 56%; }
  .touch-col { bottom: 14px; }
}

/* ==========================================================
   TUTORIAL / TRAINING
   ========================================================== */
.tut-scrim {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: flex-start; justify-content: center; padding: 18px;
  background: rgba(3,4,12,.78); backdrop-filter: blur(12px);
  animation: fadeIn .32s var(--e-out) both;
  overflow-y: auto;
}
.tut-intro {
  width: min(660px, 94vw); padding: 28px 30px 24px; margin: auto;
  animation: resultIn .5s var(--e-back) both;
}
.tut-tag {
  display: inline-block; font-family: var(--f-display); font-size: 10px; font-weight: 700;
  letter-spacing: .32em; text-transform: uppercase; color: var(--orange);
  padding: 5px 11px; border: 1px solid rgba(255,138,26,.4); border-radius: 100px;
  background: rgba(255,138,26,.08); margin-bottom: 14px;
}
.tut-tag.good { color: var(--green); border-color: rgba(61,255,154,.45); background: rgba(61,255,154,.08); }
.tut-intro h2 {
  font-family: var(--f-display); font-weight: 900; font-size: clamp(26px,3.4vw,40px);
  letter-spacing: .02em; text-transform: uppercase; line-height: 1;
  background: linear-gradient(170deg,#fff,#22e9ff 78%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 24px rgba(34,233,255,.35));
}
.tut-intro .tut-sub {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--magenta); margin: 6px 0 18px;
}
.tut-learn { padding: 14px 16px; border-radius: 12px;
  background: rgba(34,233,255,.06); border: 1px solid rgba(34,233,255,.2); }
.tut-learn ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.tut-learn li { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.tut-learn li i {
  flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}
.tut-why {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.55;
  color: #ffe9b0; background: rgba(255,212,59,.08); border: 1px solid rgba(255,212,59,.26);
}
.tut-why b { color: var(--yellow); }

.tut-mock { margin-top: 16px; }
.mock-strip { display: grid; grid-template-columns: repeat(auto-fit,minmax(96px,1fr)); gap: 8px; margin-top: 9px; }
.mock-cell {
  padding: 12px 8px; text-align: center; border-radius: 10px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09);
  animation: fadeUp .5s var(--e-out) both;
}
.mock-icon { font-size: 26px; line-height: 1; margin-bottom: 6px;
  filter: drop-shadow(0 0 12px rgba(34,233,255,.6)); }
.mock-txt { font-size: 11.5px; line-height: 1.4; color: var(--text-dim); }

.tut-check { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 14px; }
.tut-check span {
  font-size: 11.5px; letter-spacing: .06em; padding: 5px 10px; border-radius: 100px;
  color: var(--green); background: rgba(61,255,154,.1); border: 1px solid rgba(61,255,154,.32);
}
.tut-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.tut-foot { margin-top: 14px; font-size: 12px; color: var(--text-mute); line-height: 1.5; }

/* the in-play coach card */
/* and while a dialog is up, the training card steps out of the way entirely
   rather than floating over the dialog's own backdrop */
#ui:has(.modal-scrim) .tut-card { display: none; }
/* The coach card is live over a running game, so it is kept small and hard
   against the top edge — above the horizon, out of the road. It used to start
   84 px down and stand 140 px tall, which put its lower half straight through
   the vanishing point where the obstacles come from. */
.tut-card {
  position: absolute; left: 50%; top: calc(var(--edge-t) + 4px); transform: translateX(-50%);
  width: min(460px, 78vw); padding: 10px 40px 9px 14px; z-index: 5;
  max-height: 30vh; overflow: hidden;
  background: linear-gradient(140deg, rgba(12,20,48,.94), rgba(6,9,22,.92));
  border: 1px solid rgba(34,233,255,.35); border-radius: 14px;
  backdrop-filter: blur(16px);
  box-shadow: 0 22px 50px -16px rgba(0,0,0,.9), 0 0 44px -16px rgba(34,233,255,.7);
  animation: tutIn .42s var(--e-back) both;
}
.tut-card.ok { animation: tutOk .4s var(--e-out) both; border-color: rgba(61,255,154,.7); }
@keyframes tutIn { from { opacity: 0; transform: translate(-50%,-14px) scale(.97); } to { opacity: 1; transform: translate(-50%,0) scale(1); } }
@keyframes tutOk { 40% { transform: translate(-50%,0) scale(1.02); box-shadow: 0 0 50px -8px rgba(61,255,154,.9); }
                   to  { opacity: 0; transform: translate(-50%,-10px) scale(.98); } }
.tut-step { font-family: var(--f-display); font-size: 9.5px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 5px; }
.tut-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tut-title { font-family: var(--f-display); font-size: 15px; font-weight: 800; letter-spacing: .06em; color: #fff; }
.tut-keys { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.kb-sep { font-size: 10px; color: var(--text-mute); }
.tut-body { font-size: 13px; line-height: 1.55; color: var(--text-dim); margin: 7px 0 10px; }
.tut-progress { height: 3px; border-radius: 100px; background: rgba(255,255,255,.1); overflow: hidden; }
.tut-progress > i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg,var(--purple),var(--cyan)); box-shadow: 0 0 12px var(--cyan); transition: width .1s linear; }
.tut-dots { display: flex; gap: 5px; justify-content: center; margin-top: 9px; }
.tut-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.16); }
.tut-dots span.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.tut-dots span.cur { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transform: scale(1.3); }
.tut-skip {
  display: block; margin: 7px 0 0 auto;
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .1em; color: var(--text-mute);
}
.tut-skip:hover { color: var(--cyan); }

body.is-touch .tut-card { top: calc(var(--edge-t) + 4px); }

/* ==========================================================
   POST-MISSION DEBRIEF
   ========================================================== */
.debrief { text-align: left; margin: 4px 0 20px; }
.debrief .db-sec { margin-bottom: 14px; }
.debrief .db-sec > .label { margin-bottom: 7px; }
.db-line {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 11px; border-radius: 9px; margin-bottom: 6px;
  font-size: 13px; line-height: 1.5; color: var(--text-dim);
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
}
.db-line i { flex: none; font-style: normal; font-size: 14px; line-height: 1.35; }
.db-line.bad  { background: rgba(255,59,92,.08);  border-color: rgba(255,59,92,.26);  color: #ffc9d2; }
.db-line.good { background: rgba(61,255,154,.08); border-color: rgba(61,255,154,.26); color: #c7ffe4; }
.db-line.warn { background: rgba(255,138,26,.08); border-color: rgba(255,138,26,.26); color: #ffdcb8; }
.db-lesson {
  padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(120deg, rgba(139,92,255,.14), rgba(34,233,255,.07));
  border: 1px solid rgba(139,92,255,.34);
}
.db-lesson .label { color: var(--purple); margin-bottom: 6px; }
.db-lesson p { font-size: 13.5px; line-height: 1.6; color: #e4dcff; }
.result.wide { width: min(680px, 94vw); text-align: left; }
.result.wide h2, .result.wide .rk, .result.wide .rstars, .result.wide .rmsg { text-align: center; }

/* ==========================================================
   TOUCH LAYOUT — keep every readout clear of the thumbs
   ========================================================== */
/* The thumbs own three regions: the left column of side buttons, the
   bottom-left stick, and the right stack of action buttons. Every readout
   is placed around those, measured against the shared spacing scale. */
:root {
  --thumb-r: clamp(78px, 13vmin, 108px);   /* width the right stack needs */
  --thumb-l: clamp(92px, 15vmin, 118px);   /* width the left column needs */
}
body.is-touch .hud-tl { top: var(--edge-t); left: var(--edge-l); gap: 6px; }
body.is-touch .hud-tl .hud-mod { padding: 7px 11px; }
body.is-touch .hud-tr { top: calc(var(--edge-t) + 46px); right: var(--thumb-r); }
body.is-touch .hud-br {
  top: var(--edge-t); right: var(--edge-r); bottom: auto;
  flex-direction: row; align-items: center;
}
body.is-touch .hud-bl {
  bottom: auto; top: calc(var(--edge-t) + 128px); left: var(--thumb-l);
}
body.is-touch .hud-bc { bottom: var(--edge-b); top: auto; }
body.is-touch .hud-bl .speedo b { font-size: 26px; }
body.is-touch .hud-bl .hud-mod { padding: 7px 11px; }
body.is-touch .gauge { min-width: 148px; }
body.is-touch .hud-tc { top: 10px; }
body.is-touch .progress-track { width: min(300px, 34vw); }
body.is-touch .objective-chip { font-size: 12px; padding: 7px 13px; }
body.is-touch .hud-mod.score-mod b { font-size: 20px; }
body.is-touch .timer-mod b { font-size: 22px; }
body.is-touch .node-label { font-size: 9.5px; padding: 2px 6px; }

/* portrait nudge — these missions need the width */
#rotate-hint {
  position: fixed; top: 0; left: 0; z-index: 120; display: none;
  width: var(--app-w, 100vw); height: var(--app-h, 100dvh);
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(circle at 50% 45%, #0b1030, #04050c 72%);
  text-align: center; padding: 30px;
}
#rotate-hint .rot-icon { font-size: 54px; animation: rotSpin 2.4s ease-in-out infinite; }
@keyframes rotSpin { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-90deg); } }
#rotate-hint h3 { font-family: var(--f-display); font-size: 17px; letter-spacing: .2em; color: var(--cyan); }
#rotate-hint p { font-size: 13.5px; color: var(--text-dim); max-width: 320px; line-height: 1.6; }
@media (orientation: portrait) and (max-width: 900px) {
  body.is-touch #rotate-hint { display: flex; }
}

body.is-touch .gauge { min-width: 172px; }
body.is-touch .gauge .label { letter-spacing: .12em; font-size: 9px; }
body.is-touch .gauge .gval { font-size: 12px; }

.pause-card .mode-swap {
  margin-top: 14px; background: none; border: none; cursor: pointer;
  font-family: var(--f-ui); font-size: 12px; letter-spacing: .1em; color: var(--text-mute);
  text-decoration: underline; text-underline-offset: 3px;
}
.pause-card .mode-swap:hover { color: var(--cyan); }
.pause-card .ctrl-grid { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); }

/* ==========================================================
   BLOOM'S TAXONOMY LADDER
   ========================================================== */
.bloom-scrim { align-items: flex-start; }
.bloom-card {
  width: min(760px, 94vw); padding: 20px 22px 18px; text-align: left;
  animation: resultIn .45s var(--e-back) both;
}
.bloom-card h2 { margin: 2px 0 0; font-size: clamp(20px, 3vw, 27px); }
.bloom-card .rk { margin: 0; }

/* the six-rung rail across the top — where you are on the taxonomy */
.bloom-rail { display: flex; align-items: flex-start; margin-bottom: 18px; }
.br-step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: none; width: 62px; }
.br-dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 12px; color: var(--text-mute);
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  transition: all .3s var(--e-out);
}
.br-name {
  font-family: var(--f-ui); font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-mute); text-align: center; line-height: 1.2;
}
.br-step.done .br-dot { color: var(--lc); border-color: var(--lc); background: color-mix(in srgb, var(--lc) 14%, transparent); }
.br-step.done .br-name { color: var(--text-dim); }
.br-step.on .br-dot {
  color: #06080f; background: var(--lc); border-color: var(--lc);
  box-shadow: 0 0 20px color-mix(in srgb, var(--lc) 60%, transparent);
  transform: scale(1.16);
}
.br-step.on .br-name { color: var(--lc); font-weight: 700; }
.br-link { flex: 1; height: 1px; margin-top: 15px; background: var(--line); min-width: 6px; }

.bloom-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.bl-badge {
  flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  font-size: 26px; background: color-mix(in srgb, var(--lc) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--lc) 45%, transparent);
}
.bloom-head .rk { color: var(--lc); }
.bl-sub { margin-top: 3px; font-size: 12.5px; color: var(--text-dim); }
.bl-brief { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }

/* the terms a Remember rung asks you to hold */
.bl-recall {
  margin-bottom: 16px; padding: 13px 15px; border-radius: 12px;
  background: rgba(34,233,255,.05); border: 1px solid rgba(34,233,255,.24);
}
.bl-recall dl { margin: 9px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; }
.bl-recall dt { font-family: var(--f-mono); font-size: 12px; color: var(--cyan); white-space: nowrap; }
.bl-recall dd { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }

.bl-q .qtext { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.bl-q .qopts { display: flex; flex-direction: column; gap: 8px; }

/* the Apply rung — the mission is the rung */
.bl-apply {
  display: flex; gap: 16px; align-items: flex-start; padding: 15px 16px; border-radius: 13px;
  background: rgba(255,210,61,.06); border: 1px solid rgba(255,210,61,.3);
}
.bl-apply-glyph { flex: none; font-size: 40px; line-height: 1; }
.bl-apply p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.bl-apply p:last-child { margin: 0; }
.bl-apply b { color: var(--yellow); }
.bl-watch { margin-top: 14px; }
.bl-watch ul { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bl-watch li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.bl-watch li i { flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%;
                 background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }

/* ---------- the Create rung: a slider design bench ---------- */
.create-card { width: min(900px, 95vw); }
.cr-formula {
  padding: 13px; border-radius: 11px; text-align: center; margin-bottom: 16px;
  font-family: var(--f-display); font-size: clamp(13px, 1.8vw, 17px); color: #fff;
  background: rgba(139,92,255,.08); border: 1px solid rgba(139,92,255,.32);
  text-shadow: 0 0 18px rgba(139,92,255,.45);
  overflow-x: auto;
}
.cr-formula sub, .cr-formula sup { font-size: .62em; color: var(--violet); }

.cr-bench { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.cr-sliders { display: flex; flex-direction: column; gap: 13px; }
.cr-slider { padding: 11px 13px; border-radius: 11px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.cr-slabel { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cr-slabel span { font-family: var(--f-ui); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.cr-slabel b { font-family: var(--f-mono); font-size: 15px; color: var(--violet); }
.cr-range { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 9.5px; color: var(--text-mute); }

.cr-slider input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 4px 0 2px;
  background: transparent; cursor: pointer;
}
.cr-slider input[type=range]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 100px;
  background: linear-gradient(90deg, rgba(139,92,255,.55), rgba(34,233,255,.4));
}
.cr-slider input[type=range]::-moz-range-track {
  height: 5px; border-radius: 100px;
  background: linear-gradient(90deg, rgba(139,92,255,.55), rgba(34,233,255,.4));
}
.cr-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -7.5px;
  border-radius: 50%; background: #fff; border: 3px solid var(--violet);
  box-shadow: 0 0 14px rgba(139,92,255,.7); transition: transform .12s;
}
.cr-slider input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--violet);
  box-shadow: 0 0 14px rgba(139,92,255,.7);
}
.cr-slider input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); }
.cr-slider input[type=range]:disabled::-webkit-slider-thumb { border-color: var(--text-mute); box-shadow: none; }

.cr-out { padding: 12px 13px; border-radius: 11px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.cr-readouts { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.cr-ro { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
         padding-bottom: 5px; border-bottom: 1px dashed rgba(255,255,255,.07); }
.cr-ro:last-child { border-bottom: 0; padding-bottom: 0; }
.cr-ro span { font-size: 11.5px; color: var(--text-mute); }
.cr-ro b { font-family: var(--f-mono); font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.cr-ro.hero { padding: 7px 9px; margin: 2px -3px; border-radius: 8px; border-bottom: 0;
              background: rgba(34,233,255,.08); border: 1px solid rgba(34,233,255,.3); }
.cr-ro.hero span { color: var(--text-dim); }
.cr-ro.hero b { font-size: 18px; color: var(--cyan); }

.cr-targets { margin-top: 14px; }
.cr-targets ul { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 7px; }
.cr-targets li {
  display: flex; gap: 10px; align-items: flex-start; padding: 8px 11px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.45; color: var(--text-mute);
  background: rgba(255,255,255,.028); border: 1px solid var(--line); transition: all .25s;
}
.cr-targets li i { flex: none; font-style: normal; font-family: var(--f-mono); color: var(--text-mute); }
.cr-targets li.ok { color: var(--text-dim); background: rgba(61,255,154,.07); border-color: rgba(61,255,154,.34); }
.cr-targets li.ok i { color: var(--green); }

.cr-verdict {
  margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  background: rgba(61,255,154,.07); border: 1px solid rgba(61,255,154,.35);
}
.cv-head { font-family: var(--f-display); font-size: 15px; letter-spacing: .05em; color: var(--green); }
.cr-verdict p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-dim); }

/* ---------- master assessment ---------- */
.master-card { width: min(820px, 95vw); }
.master-prog {
  display: inline-block; margin-bottom: 14px; padding: 6px 12px; border-radius: 100px;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--text-dim);
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
}
.master-prog span { color: var(--cyan); font-weight: 700; }
.master-q { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.master-q:last-of-type { border-bottom: 0; }
.master-verdict { margin-top: 6px; padding: 15px 17px; border-radius: 13px; }
.master-verdict.pass { background: rgba(61,255,154,.08); border: 1px solid rgba(61,255,154,.4); }
.master-verdict.fail { background: rgba(255,138,26,.07); border: 1px solid rgba(255,138,26,.35); }
.mv-head { font-family: var(--f-display); font-size: 17px; letter-spacing: .05em; }
.master-verdict.pass .mv-head { color: var(--green); }
.master-verdict.fail .mv-head { color: var(--orange); }
.master-verdict p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-dim); }

.master-missing { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.mm-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 11px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); cursor: pointer;
  transition: all .2s;
}
.mm-row:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); transform: translateX(3px); }
.mm-row > i { flex: none; font-style: normal; font-size: 21px; }
.mm-row b { display: block; font-size: 13.5px; color: var(--text); }
.mm-row span { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: 10.5px; color: var(--text-mute); }
.mm-row u { margin-left: auto; flex: none; text-decoration: none; font-family: var(--f-mono);
            font-size: 12px; color: var(--accent); }

/* ---------- the mini ladder on the briefing and mission cards ---------- */
.bloom-mini { display: flex; gap: 5px; flex-wrap: wrap; }
.bm-step {
  flex: 1 1 0; min-width: 62px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 4px; border-radius: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--line);
}
.bm-step i {
  font-style: normal; font-family: var(--f-mono); font-size: 11px; color: var(--text-mute);
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.05);
}
.bm-step span { font-family: var(--f-ui); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }
.bm-step.done { background: color-mix(in srgb, var(--lc) 10%, transparent); border-color: color-mix(in srgb, var(--lc) 38%, transparent); }
.bm-step.done i { color: #06080f; background: var(--lc); }
.bm-step.done span { color: var(--text-dim); }
.bloom-mini-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-mute); }

.ch-bloom { display: flex; align-items: center; gap: 4px; margin: 10px 0 2px; }
.ch-bloom i {
  flex: 1; height: 4px; border-radius: 100px; background: rgba(255,255,255,.1);
  transition: background .3s;
}
.ch-bloom i.on { background: var(--lc); box-shadow: 0 0 7px var(--lc); }
.ch-bloom b {
  flex: none; margin-left: 5px; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .06em; color: var(--text-mute);
}
.cert-btn { box-shadow: 0 0 26px rgba(255,210,61,.35); }

/* ==========================================================
   CERTIFICATE
   ========================================================== */
.cert-scroll { flex: 1; overflow-y: auto; padding: 0 var(--pad) var(--pad); }
.cert-sheet {
  width: min(880px, 96%); margin: 0 auto 24px;
  background: linear-gradient(165deg, #0f1330, #070912 60%);
  border-radius: 8px; padding: 10px;
  box-shadow: 0 30px 90px rgba(0,0,0,.65), 0 0 60px rgba(139,92,255,.15);
  animation: resultIn .6s var(--e-back) both;
}
.cert-frame {
  border: 2px solid rgba(255,210,61,.45); border-radius: 4px; padding: 34px 40px 26px;
  position: relative;
  background:
    radial-gradient(circle at 12% 8%, rgba(139,92,255,.13), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(34,233,255,.11), transparent 44%);
}
.cert-frame::before {
  content: ''; position: absolute; inset: 6px; border: 1px solid rgba(255,210,61,.2);
  border-radius: 2px; pointer-events: none;
}
.cert-top { display: flex; align-items: center; gap: 16px; }
.cert-seal { position: relative; width: 62px; height: 62px; flex: none; }
.seal-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px dashed rgba(255,210,61,.6); animation: spin 26s linear infinite;
}
.seal-core {
  position: absolute; inset: 8px; border-radius: 50%; display: grid; place-items: center;
  font-size: 22px; background: rgba(255,210,61,.12); border: 1px solid rgba(255,210,61,.5);
}
@keyframes spin { to { transform: rotate(360deg); } }
.ci-name { font-family: var(--f-display); font-size: 17px; letter-spacing: .22em; color: var(--yellow); }
.ci-sub { font-family: var(--f-ui); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); margin-top: 3px; }

.cert-title {
  margin-top: 22px; text-align: center;
  font-family: var(--f-display); font-size: clamp(23px, 4vw, 38px); font-weight: 900;
  letter-spacing: .04em; color: #fff; text-shadow: 0 0 30px rgba(255,210,61,.4);
}
.cert-awarded { margin-top: 14px; text-align: center; font-size: 12.5px; letter-spacing: .1em;
                text-transform: uppercase; color: var(--text-mute); }

.cert-name-wrap { margin: 10px auto 4px; max-width: 560px; text-align: center; }
.cert-name {
  width: 100%; background: transparent; border: 0; outline: 0; text-align: center;
  font-family: var(--f-display); font-size: clamp(24px, 4.4vw, 40px); font-weight: 900;
  color: var(--cyan); letter-spacing: .03em; padding: 2px 0 6px;
  text-shadow: 0 0 26px rgba(34,233,255,.4);
}
.cert-name::placeholder { color: rgba(255,255,255,.16); font-weight: 400; letter-spacing: .06em; }
.cert-name-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(255,210,61,.6), transparent); }
.cert-name-hint { margin-top: 6px; font-size: 10.5px; color: var(--text-mute); }

.cert-body {
  margin: 20px auto 0; max-width: 640px; text-align: center;
  font-size: 13.5px; line-height: 1.75; color: var(--text-dim);
}
.cert-body b { color: var(--yellow); }

.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }
.cert-cell {
  text-align: center; padding: 12px 8px; border-radius: 10px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,210,61,.22);
}
.cert-cell b { display: block; font-family: var(--f-display); font-size: 21px; color: #fff; }
.cert-cell span { display: block; margin-top: 3px; font-family: var(--f-ui); font-size: 8.5px;
                  letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }

.cert-skills { margin-top: 20px; }
.cs-head { font-family: var(--f-ui); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
           color: var(--text-mute); text-align: center; margin-bottom: 10px; }
.cs-list { display: grid; gap: 6px; }
.cs-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 9px;
  background: rgba(255,255,255,.028); border: 1px solid var(--line);
}
.cs-row > i { flex: none; font-style: normal; font-size: 17px; }
.cs-row b { display: block; font-size: 12.5px; color: var(--text); }
.cs-row span { display: block; margin-top: 1px; font-size: 10.5px; color: var(--text-mute); }
.cs-row u { margin-left: auto; text-decoration: none; color: var(--green); font-size: 14px; }
.cs-row.master { background: rgba(255,210,61,.07); border-color: rgba(255,210,61,.32); }

.cert-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.cf-block { text-align: center; }
.cf-line { height: 1px; background: rgba(255,255,255,.22); margin-bottom: 7px; }
.cf-block b { display: block; font-size: 12px; color: var(--text-dim); }
.cf-block span { display: block; margin-top: 2px; font-family: var(--f-ui); font-size: 8.5px;
                 letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }

/* print: the sheet, on white, and nothing else */
@media print {
  body { background: #fff !important; }
  #gl, .topbar, .toast-wrap, .fact-card, .hud, .touch-layer, .cert-bar { display: none !important; }
  .cert-scroll { overflow: visible !important; padding: 0 !important; }
  .cert-sheet {
    width: 100% !important; margin: 0 !important; box-shadow: none !important;
    background: #fff !important; padding: 0 !important;
  }
  .cert-frame { border-color: #b8860b !important; background: #fff !important; }
  .cert-frame::before { border-color: #d8c48a !important; }
  .cert-title, .cert-cell b, .cs-row b { color: #10131f !important; text-shadow: none !important; }
  .cert-name { color: #0b2f5c !important; text-shadow: none !important; }
  .cert-body, .cf-block b, .cs-row span, .cert-cell span, .cert-awarded, .cs-head,
  .cf-block span, .cert-name-hint { color: #333 !important; }
  .ci-name, .cert-body b { color: #8a6a00 !important; }
  .cert-name-hint { display: none !important; }
  .cs-row, .cert-cell { background: #fafafa !important; border-color: #ddd !important; }
  .cs-row u { color: #0a7a3f !important; }
  .seal-ring { animation: none !important; border-color: #b8860b !important; }
  .seal-core { background: #fff8e1 !important; border-color: #b8860b !important; }
}

/* ---------- Bloom's + certificate on small screens ---------- */
@media (max-width: 820px) {
  .cr-bench { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-foot { grid-template-columns: 1fr; gap: 14px; }
  .cert-frame { padding: 22px 18px 18px; }
  .br-step { width: 46px; }
  .br-name { font-size: 7px; }
  .bl-recall dl { grid-template-columns: 1fr; gap: 2px 0; }
  .bl-recall dd { margin-bottom: 6px; }
}
@media (max-height: 500px) {
  body.is-touch .bloom-card { padding: 13px 14px 12px; }
  body.is-touch .bloom-rail { margin-bottom: 11px; }
  body.is-touch .br-step { width: 44px; }
  body.is-touch .br-dot { width: 24px; height: 24px; font-size: 10px; }
  body.is-touch .br-name { font-size: 6.5px; }
  body.is-touch .br-link { margin-top: 12px; }
  body.is-touch .bl-badge { width: 38px; height: 38px; font-size: 19px; border-radius: 10px; }
  body.is-touch .bloom-card h2 { font-size: 17px; }
  body.is-touch .bl-q .qtext { font-size: 12.5px; }
  body.is-touch .bl-brief, body.is-touch .bl-apply p { font-size: 12px; }
  body.is-touch .cr-bench { grid-template-columns: 1fr; }
  body.is-touch .cr-slider { padding: 8px 10px; }
  body.is-touch .cr-formula { padding: 9px; font-size: 12px; }
  body.is-touch .cr-targets li { font-size: 11px; padding: 6px 9px; }
  body.is-touch .bl-apply-glyph { font-size: 30px; }
  body.is-touch .cert-frame { padding: 18px 14px 14px; }
  /* the scrim's own bottom padding was leaving a strip below the sticky
     action bar where the card scrolled through in the clear */
  body.is-touch .bloom-scrim { padding-bottom: 0; }
  body.is-touch .bloom-scrim .panel > .btns {
    background: linear-gradient(180deg, rgba(8,11,26,0), rgba(8,11,26,.99) 30%, #080b1a 100%);
    margin-bottom: -12px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================
   TOUCH: the intel card is something you can throw away
   On a phone the card sits over the road whether it has been read or
   not, so on touch it becomes interactive — flick it in any direction,
   or tap it, and it goes. It is also slimmed to a two-line strip so it
   covers as little of the drive as possible while it is there.
   ========================================================== */
body.is-touch .msg-lane .fact-card {
  pointer-events: auto;
  touch-action: none;                 /* the drag is ours, not the browser's */
  cursor: grab;
  padding: 7px 30px 7px 11px;
  border-radius: 9px;
  align-items: center;
  gap: 8px;
}
body.is-touch .msg-lane .fact-card:active { cursor: grabbing; }
body.is-touch .msg-lane .fact-card .fi { font-size: 14px; }
body.is-touch .msg-lane .fact-card .ft .label { margin-bottom: 1px; font-size: 8px; }
body.is-touch .msg-lane .fact-card .ft p {
  font-size: 11px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* the dismiss affordance: a target for people who would rather tap */
.fx-close {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1; color: var(--text-mute);
  background: rgba(255,255,255,.07); border: 1px solid var(--line);
}
body.is-touch .msg-lane .fact-card { position: relative; }

/* a one-off hint so the gesture is discoverable */
body.is-touch .msg-lane .fact-card::after {
  content: 'swipe to dismiss';
  position: absolute; left: 11px; bottom: -13px;
  font-family: var(--f-ui); font-size: 7.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mute);
  opacity: 0; animation: swipeHint 3.4s ease-out 1 both;
}
@keyframes swipeHint { 0%,12% { opacity: 0; } 22%,68% { opacity: .75; } 100% { opacity: 0; } }

/* On a landscape phone the lane is docked hard to the top edge, above the
   road and clear of both thumbs, and kept narrow enough that the centre of
   the screen — where the car actually is — stays visible. */
@media (max-height: 500px) {
  body.is-touch .msg-lane {
    left: 50%; right: auto; transform: translateX(-50%);
    top: calc(var(--edge-t) + 34px); bottom: auto;
    width: min(330px, 46vw);
  }
  /* belt and braces: the lane can never grow tall enough to be evicted
     from the top strip, whatever tries to queue up in it */
  body.is-touch .msg-lane { max-height: 36px; overflow: hidden; }
  body.is-touch .msg-lane .fact-card { padding: 5px 26px 5px 9px; }
  body.is-touch .msg-lane .fact-card .ft p { -webkit-line-clamp: 2; font-size: 10px; }
  body.is-touch .msg-lane .fact-card::after { display: none; }
  body.is-touch .fx-close { width: 19px; height: 19px; font-size: 13px; }
}

/* ==========================================================
   CREATE · the build bench (First Signal)
   A street of homes and a shopping list — the trade-off is visible
   rather than buried in a formula.
   ========================================================== */
.build-card { width: min(900px, 95vw); }

.bd-street {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 14px 14px 12px; border-radius: 13px; margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(10,16,38,.6), rgba(6,9,22,.75));
  border: 1px solid var(--line);
  overflow-x: auto;
}
.bd-tower {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 26px; line-height: 1; padding-right: 10px;
  border-right: 1px dashed rgba(255,255,255,.14);
}
.bd-tower span {
  font-family: var(--f-ui); font-size: 7.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-mute);
}
.bd-homes { display: flex; align-items: flex-end; gap: clamp(4px, .9vw, 10px); flex: 1; min-width: 0; }

.bd-home {
  flex: 1 1 0; min-width: 26px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  position: relative;
}
.bh-bars { display: flex; align-items: flex-end; gap: 1.5px; height: 26px; }
.bh-bars i {
  display: block; width: 3px; border-radius: 1px;
  background: rgba(255,255,255,.12);
  transition: background .3s var(--e-out), height .3s var(--e-out);
}
.bh-bars i[data-b="0"] { height: 7px; }
.bh-bars i[data-b="1"] { height: 12px; }
.bh-bars i[data-b="2"] { height: 17px; }
.bh-bars i[data-b="3"] { height: 22px; }
.bh-bars i[data-b="4"] { height: 26px; }
.bd-home.good .bh-bars i.on { background: var(--green); box-shadow: 0 0 6px rgba(61,255,154,.8); }
.bd-home.ok   .bh-bars i.on { background: var(--yellow); box-shadow: 0 0 6px rgba(255,210,61,.7); }
.bd-home.bad  .bh-bars i.on { background: var(--red); box-shadow: 0 0 6px rgba(255,59,92,.7); }
.bh-icon { font-size: clamp(13px, 1.7vw, 18px); line-height: 1; filter: grayscale(.4); transition: filter .3s; }
.bd-home.good .bh-icon { filter: none; }
.bd-home.bad .bh-icon { opacity: .5; }
.bh-ridge { position: absolute; top: -4px; font-size: 9px; opacity: .55; }

.bd-status { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.bd-stat {
  flex: 1; min-width: 92px; padding: 8px 11px; border-radius: 10px;
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
}
.bd-stat span {
  display: block; font-family: var(--f-ui); font-size: 8px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-mute);
}
.bd-stat b { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: 16px; color: var(--cyan); }
.bd-stat.budget b { color: var(--yellow); }
.bd-stat.budget.broke b { color: var(--red); }

.bd-goal {
  display: flex; gap: 9px; align-items: flex-start; margin-bottom: 12px;
  padding: 9px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
  color: var(--text-dim);
  background: rgba(61,255,154,.06); border: 1px solid rgba(61,255,154,.28);
}
.bd-goal i { font-style: normal; flex: none; }

.bd-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; }
.bd-part {
  text-align: left; padding: 11px 12px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  color: var(--text-dim); font: inherit;
  transition: border-color .2s, background .2s, transform .12s;
}
.bd-part:hover:not(:disabled) { border-color: rgba(34,233,255,.45); transform: translateY(-2px); }
.bd-part.on { background: rgba(61,255,154,.09); border-color: rgba(61,255,154,.5); }
.bd-part.cant { opacity: .45; cursor: not-allowed; }
.bd-part:disabled { cursor: default; transform: none; }
.bd-part.pulse { animation: bdPulse .42s var(--e-out); }
@keyframes bdPulse { 40% { transform: scale(1.035); } }
.bp-top { display: flex; align-items: center; gap: 8px; }
.bp-top i { font-style: normal; font-size: 17px; }
.bp-top b { flex: 1; font-size: 13px; color: var(--text); }
.bp-top u {
  flex: none; text-decoration: none; font-family: var(--f-mono); font-size: 11px;
  color: var(--yellow); padding: 2px 7px; border-radius: 100px;
  background: rgba(255,210,61,.12); border: 1px solid rgba(255,210,61,.3);
}
.bd-part p { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-mute); }
.bp-state {
  display: block; margin-top: 7px; font-family: var(--f-ui); font-size: 8.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cyan);
}
.bd-part.on .bp-state { color: var(--green); }

.bd-got { list-style: none; margin: 9px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bd-got li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text-dim); }
.bd-got li i { font-style: normal; flex: none; }

@media (max-height: 500px) {
  body.is-touch .bd-street { padding: 8px 10px 7px; margin-bottom: 8px; }
  body.is-touch .bh-bars { height: 18px; }
  body.is-touch .bh-bars i[data-b="4"] { height: 18px; }
  body.is-touch .bh-bars i[data-b="3"] { height: 15px; }
  body.is-touch .bh-bars i[data-b="2"] { height: 12px; }
  body.is-touch .bh-bars i[data-b="1"] { height: 9px; }
  body.is-touch .bh-bars i[data-b="0"] { height: 5px; }
  body.is-touch .bd-tower { font-size: 19px; }
  body.is-touch .bd-goal { font-size: 11px; padding: 7px 10px; margin-bottom: 8px; }
  body.is-touch .bd-stat { padding: 5px 9px; min-width: 78px; }
  body.is-touch .bd-stat b { font-size: 13px; }
  body.is-touch .bd-part { padding: 8px 10px; }
  body.is-touch .bd-part p { display: none; }
  body.is-touch .bd-parts { grid-template-columns: repeat(2, 1fr); gap: 7px; }
}

/* ---- the takeaway leads the results card and gates the way out ---- */
.db-lesson.lead {
  margin: 16px 0 4px; padding: 15px 17px; border-radius: 13px; text-align: left;
  background: linear-gradient(180deg, rgba(34,233,255,.10), rgba(34,233,255,.05));
  border: 1px solid rgba(34,233,255,.42);
  box-shadow: 0 0 30px -14px rgba(34,233,255,.7);
  animation: leadIn .5s var(--e-out) both;
}
@keyframes leadIn { from { opacity: 0; transform: translateY(-8px); } }
.db-lesson.lead.read { border-color: rgba(61,255,154,.4); background: rgba(61,255,154,.05); box-shadow: none; }
.dl-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.dl-head i { font-style: normal; font-size: 16px; }
.dl-head .label { color: var(--cyan); }
.db-lesson.lead.read .dl-head .label { color: var(--green); }
.db-lesson.lead p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text); }
.dl-ack {
  margin-top: 12px; padding: 9px 18px; border-radius: 100px; cursor: pointer;
  font-family: var(--f-display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #06080f; background: var(--cyan); border: 0;
  box-shadow: 0 0 22px -6px rgba(34,233,255,.9);
  transition: background .2s, transform .12s;
}
.dl-ack:hover:not(:disabled) { transform: translateY(-1px); }
.dl-ack:disabled { background: rgba(61,255,154,.2); color: var(--green); box-shadow: none; cursor: default; }

/* Until it is acknowledged there is no way onward from the results card.
   Only the buttons are dimmed, never the bar itself: on touch the bar is
   sticky and carries its own opaque background, so fading the whole thing
   made it see-through and the stats underneath ghosted straight through it. */
.result .btns.locked { pointer-events: none; }
.result .btns.locked > .btn { opacity: .3; filter: grayscale(.65); }
.result .btns > .btn { transition: opacity .35s, filter .35s; }

@media (max-height: 500px) {
  body.is-touch .db-lesson.lead { padding: 10px 12px; margin: 10px 0 4px; }
  body.is-touch .db-lesson.lead p { font-size: 11.5px; line-height: 1.55; }
  body.is-touch .dl-ack { margin-top: 8px; padding: 7px 14px; font-size: 9.5px; }
}


/* ---- coach card: compact, foldable, and never over the road ---- */
.tut-card .tut-step { font-size: 8.5px; margin-bottom: 3px; }
.tut-card .tut-title { font-size: 14px; }
.tut-card .tut-body {
  font-size: 12px; line-height: 1.45; margin: 6px 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tut-card .tut-progress { margin-top: 8px; }
.tut-card .tut-dots { margin-top: 7px; }
.tut-fold {
  position: absolute; top: 7px; right: 8px;
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 10px; line-height: 1;
  color: var(--text-mute); background: rgba(255,255,255,.06);
  border: 1px solid var(--line); transition: color .2s, border-color .2s;
}
.tut-fold:hover { color: var(--cyan); border-color: rgba(34,233,255,.5); }
/* folded: a single line you can still read at a glance */
.tut-card.mini { padding: 7px 40px 7px 14px; cursor: pointer; }
.tut-card.mini .tut-body,
.tut-card.mini .tut-progress,
.tut-card.mini .tut-dots,
.tut-card.mini .tut-skip { display: none; }
.tut-card.mini .tut-step { display: inline; margin-right: 8px; }
.tut-card.mini .tut-head { display: inline-flex; }

@media (max-height: 560px) {
  .tut-card { width: min(400px, 74vw); padding: 7px 36px 7px 12px; max-height: 34vh; }
  .tut-card .tut-title { font-size: 12.5px; }
  .tut-card .tut-body { font-size: 10.5px; -webkit-line-clamp: 2; }
  .tut-card .tut-dots { display: none; }
  .tut-fold { width: 21px; height: 21px; top: 5px; right: 6px; }
}

/* ---- the clock, stated up front on the briefing ---- */
.time-brief .tb-row { display: flex; gap: 14px; align-items: center; }
.tb-ring {
  flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--f-display); font-size: 15px; font-weight: 900; color: #fff;
  border: 2px solid var(--orange); background: rgba(255,138,26,.12);
  box-shadow: 0 0 22px rgba(255,138,26,.3), inset 0 0 16px rgba(255,138,26,.15);
}
.time-brief b { color: var(--orange); display: block; font-size: 13.5px; }
.time-brief span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
.time-brief span b { display: inline; }

/* ---- time's up ---- */
.timeup-card { width: min(440px, 92vw); text-align: center; padding: 26px 24px 20px; }
.tu-ring {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 28px;
  border: 2px solid var(--orange); background: rgba(255,138,26,.12);
  animation: pulseDot 1.5s infinite;
}
.timeup-card h2 { margin: 4px 0 10px; }
.timeup-card p { font-size: 13.5px; line-height: 1.6; color: var(--text-dim); margin: 0; }
.timeup-card p .warn { color: var(--orange); }
.tu-cost {
  margin: 16px 0 4px; padding: 12px 14px; border-radius: 11px; text-align: left;
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
}
.tu-line { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 12.5px; color: var(--text-mute); }
.tu-line b { font-family: var(--f-mono); color: var(--text); }
.tu-line b.warn { color: var(--orange); }

/* ---- milestone gift ---- */
.gift-card { text-align: center; width: min(480px, 92vw); }
.gift-burst {
  width: 76px; height: 76px; margin: 4px auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 36px;
  background: radial-gradient(circle at 42% 34%, rgba(255,210,61,.3), rgba(8,14,32,.7) 72%);
  border: 2px solid rgba(255,210,61,.6);
  box-shadow: 0 0 40px -6px rgba(255,210,61,.65);
  animation: giftPop .7s var(--e-back) both;
}
@keyframes giftPop { from { transform: scale(.4); opacity: 0; } }
.gift-card .bl-brief { text-align: center; }
.gift-amount {
  font-family: var(--f-display); font-size: clamp(30px, 5vw, 46px); font-weight: 900;
  color: var(--yellow); text-shadow: 0 0 28px rgba(255,210,61,.6); margin: 6px 0 4px;
}
.gift-amount i { font-style: normal; font-size: .6em; }
.gift-balance { font-size: 12.5px; color: var(--text-mute); margin-bottom: 4px; }
.gift-balance b { color: var(--text); font-family: var(--f-mono); }

/* ==========================================================
   CERTIFICATE · performance report
   ========================================================== */
.cert-kpi { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,210,61,.24); }
.ck-head, .ck-perhead {
  font-family: var(--f-ui); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mute); text-align: center; margin-bottom: 12px;
}
.ck-perhead { margin-top: 18px; }
.ck-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }
.ck-cell {
  padding: 11px 13px; border-radius: 10px;
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
}
.ck-cell.wide { grid-column: 1 / -1; }
.ck-cell span {
  display: block; font-family: var(--f-ui); font-size: 8.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-mute);
}
.ck-cell b { display: block; margin-top: 3px; font-family: var(--f-display); font-size: 22px; color: #fff; }
.ck-cell b.good { color: var(--green); }
.ck-cell b.bad { color: var(--orange); }
.ck-cell em { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; color: var(--text-mute); }
.ck-bar { height: 6px; border-radius: 100px; margin-top: 8px; background: rgba(255,255,255,.09); overflow: hidden; }
.ck-bar > i { display: block; height: 100%; border-radius: 100px;
              background: linear-gradient(90deg, var(--cyan), var(--green)); }

.ck-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ck-table th {
  text-align: left; padding: 7px 8px; color: var(--text-mute);
  font-family: var(--f-ui); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.ck-table td { padding: 7px 8px; color: var(--text-dim); border-bottom: 1px solid rgba(255,255,255,.05); }
.ck-table td:first-child { color: var(--text); }
.ck-table th:not(:first-child), .ck-table td:not(:first-child) { text-align: right; font-family: var(--f-mono); }
.ck-table tr:last-child td { border-bottom: 0; }

@media print {
  .cert-kpi { border-top-color: #d8c48a !important; }
  .ck-cell, .ck-table td, .ck-table th { background: #fafafa !important; border-color: #ddd !important; }
  .ck-cell b, .ck-table td:first-child { color: #10131f !important; }
  .ck-cell b.good { color: #0a7a3f !important; }
  .ck-cell b.bad { color: #a35a00 !important; }
  .ck-cell span, .ck-cell em, .ck-table td, .ck-table th, .ck-head, .ck-perhead { color: #444 !important; }
}
@media (max-width: 820px) {
  .ck-grid { grid-template-columns: repeat(2, 1fr); }
  .ck-table { font-size: 10px; }
  .ck-table th, .ck-table td { padding: 5px 5px; }
}

/* ---- the takeaway gate explains itself where the buttons are ---- */
.btns-lock {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 16px; padding: 11px 14px; border-radius: 11px; cursor: pointer;
  background: rgba(255,210,61,.09); border: 1px solid rgba(255,210,61,.4);
  color: var(--text-dim); font: inherit; text-align: left;
  animation: lockNudge 2.6s ease-in-out infinite;
}
.btns-lock i { font-style: normal; flex: none; }
.btns-lock span { flex: 1; font-size: 12.5px; }
.btns-lock u {
  flex: none; text-decoration: none; font-family: var(--f-ui); font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--yellow);
}
.btns-lock:hover { border-color: var(--yellow); background: rgba(255,210,61,.14); }
@keyframes lockNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* jumping back to the takeaway makes it announce itself */
.db-lesson.lead.flash { animation: leadFlash 1.1s var(--e-out); }
@keyframes leadFlash {
  0%, 100% { box-shadow: 0 0 30px -14px rgba(34,233,255,.7); }
  30%      { box-shadow: 0 0 0 3px rgba(34,233,255,.75), 0 0 46px -6px rgba(34,233,255,.9); }
}

@media (max-height: 500px) {
  body.is-touch .btns-lock { padding: 8px 11px; margin-top: 10px; }
  body.is-touch .btns-lock span { font-size: 11px; }
}

/* ---- Room 2: the chain is chosen by clicking it ---- */
.cs-node.pick {
  cursor: pointer; font: inherit; text-align: left;
  transition: transform .12s, border-color .2s, background .2s, box-shadow .2s;
}
.cs-node.pick:hover {
  transform: translateY(-3px);
  border-color: var(--cyan);
  box-shadow: 0 0 22px -8px rgba(34,233,255,.8);
}
.cs-node.pick:active { transform: translateY(-1px); }
.cs-node.pick::after {
  content: 'click if this is the break';
  display: block; margin-top: 7px;
  font-family: var(--f-ui); font-size: 7.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mute); opacity: 0;
  transition: opacity .2s;
}
.cs-node.pick:hover::after { opacity: 1; }