:root {
  --ink: #07070c;
  --ink-soft: #0d0d15;
  --panel: rgba(13, 14, 23, 0.86);
  --panel-solid: #10111a;
  --line: rgba(230, 236, 255, 0.17);
  --line-hot: rgba(242, 233, 0, 0.58);
  --paper: #f4f5ee;
  --muted: #989cab;
  --dim: #9296a5;
  --acid: #f2e900;
  --acid-rgb: 242, 233, 0;
  --cyan: #35f3ff;
  --cyan-rgb: 53, 243, 255;
  --pink: #ff2e88;
  --pink-rgb: 255, 46, 136;
  --danger: #ff4a54;
  --success: #62ffc9;
  --mission: #f2e900;
  --mission-rgb: 242, 233, 0;
  --header-h: 72px;
  --max-width: 1640px;
  --font-body: "Noto Sans TC", "Noto Sans JP", "Microsoft JhengHei", "PingFang TC", "Yu Gothic UI", "Segoe UI Symbol", "Segoe UI Emoji", system-ui, sans-serif;
  --font-display: "Space Grotesk", "Noto Sans TC", "Noto Sans JP", "Microsoft JhengHei", "Segoe UI Symbol", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Noto Sans TC", "Noto Sans JP", "Microsoft JhengHei", "Segoe UI Symbol", monospace;
  --cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 2v20l5.1-5.1 3.2 7.1 3.7-1.7-3.1-6.8H20z' fill='%2307070c' stroke='%23f2e900' stroke-width='1.5'/%3E%3Cpath d='M20 3h5v5' fill='none' stroke='%2335f3ff'/%3E%3C/svg%3E") 3 2, crosshair;
  --cursor-action: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M16 2 30 16 16 30 2 16z' fill='%23f2e900'/%3E%3Ccircle cx='16' cy='16' r='5' fill='%2307070c'/%3E%3Cpath d='M16 8v4m0 8v4M8 16h4m8 0h4' stroke='%2335f3ff' stroke-width='1.5'/%3E%3C/svg%3E") 16 16, pointer;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--paper);
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  cursor: var(--cursor-default);
}

body.is-locked {
  overflow: hidden;
}

button,
a,
input,
[role="button"] {
  cursor: var(--cursor-action);
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(var(--cyan-rgb), 0.13);
}

button:disabled {
  cursor: not-allowed;
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

::selection {
  color: var(--ink);
  background: var(--acid);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #090911;
}

::-webkit-scrollbar-thumb {
  border: 2px solid #090911;
  background: var(--acid);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  color: var(--ink);
  background: var(--acid);
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Ambient world ----------------------------------------------------------- */
.world,
.world > * {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.world {
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 18%, rgba(var(--pink-rgb), 0.13), transparent 26%),
    radial-gradient(circle at 13% 66%, rgba(var(--cyan-rgb), 0.09), transparent 27%),
    linear-gradient(145deg, #080811 0%, #050509 58%, #0d0710 100%);
}

.world__aurora {
  inset: -25%;
  opacity: 0.4;
  filter: blur(100px);
  background:
    conic-gradient(from 180deg at 55% 45%, transparent, rgba(var(--pink-rgb), 0.23), transparent 23%, rgba(var(--cyan-rgb), 0.19), transparent 48%);
  animation: aurora-drift 22s ease-in-out infinite alternate;
}

.world__grid {
  inset: 48% -20% -38%;
  opacity: 0.19;
  transform: perspective(460px) rotateX(62deg) translateY(2%);
  transform-origin: center top;
  background-image:
    linear-gradient(rgba(var(--cyan-rgb), 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-rgb), 0.32) 1px, transparent 1px);
  background-size: 62px 42px;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 70%, transparent);
}

.world__scanlines {
  z-index: 5;
  opacity: 0.075;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(255, 255, 255, 0.22) 4px);
}

.world__noise {
  z-index: 6;
  inset: -60%;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: noise-shift 500ms steps(2) infinite;
}

.world__glow {
  z-index: 2;
  width: 460px;
  height: 460px;
  inset: auto;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  opacity: 0.09;
  background: radial-gradient(circle, rgba(var(--mission-rgb), 0.8), transparent 68%);
  filter: blur(26px);
  transform: translate(-50%, -50%);
  will-change: left, top;
}

.data-rain {
  z-index: 1;
  overflow: hidden;
  opacity: 0.14;
  mask-image: linear-gradient(90deg, black, transparent 35%, transparent 66%, black);
}

.data-glyph {
  position: absolute;
  top: -20vh;
  color: var(--cyan);
  font: 500 10px/1 var(--font-mono);
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 5px;
  text-shadow: 0 0 8px currentColor;
  animation: glyph-fall var(--fall-speed, 12s) linear infinite;
  animation-delay: var(--fall-delay, 0s);
}

.cursor {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: width 140ms ease, height 140ms ease, border-color 140ms ease, background 140ms ease, opacity 200ms ease;
  will-change: transform;
}

.cursor--ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--acid-rgb), 0.72);
  box-shadow: 0 0 16px rgba(var(--acid-rgb), 0.22), inset 0 0 9px rgba(var(--acid-rgb), 0.12);
}

.cursor--ring::before,
.cursor--ring::after {
  content: "";
  position: absolute;
  background: var(--acid);
}

.cursor--ring::before {
  width: 6px;
  height: 1px;
  top: 50%;
  left: -4px;
}

.cursor--ring::after {
  width: 1px;
  height: 6px;
  top: -4px;
  left: 50%;
}

.cursor--dot {
  width: 3px;
  height: 3px;
  background: var(--cyan);
  box-shadow: 0 0 9px var(--cyan);
}

body.cursor-visible .cursor {
  opacity: 1;
}

body.cursor-action .cursor--ring {
  width: 48px;
  height: 48px;
  border-color: var(--cyan);
  background: rgba(var(--cyan-rgb), 0.08);
}

/* Boot -------------------------------------------------------------------- */
.boot-screen {
  position: fixed;
  z-index: 9000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--acid);
  background: #050509;
  transition: opacity 500ms ease, visibility 500ms ease;
}

.boot-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(var(--acid-rgb), 0.12) 50%, transparent 50.1%),
    linear-gradient(transparent 49.9%, rgba(var(--cyan-rgb), 0.08) 50%, transparent 50.1%);
  background-size: 80px 80px;
}

.boot-screen.is-complete {
  visibility: hidden;
  opacity: 0;
}

.boot-screen__frame {
  position: relative;
  width: min(580px, 100%);
  padding: 44px;
  border: 1px solid rgba(var(--acid-rgb), 0.4);
  background: rgba(9, 9, 14, 0.9);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

.boot-screen__frame::before,
.boot-screen__frame::after {
  content: "";
  position: absolute;
  width: 64px;
  height: 4px;
  background: var(--pink);
}

.boot-screen__frame::before { top: 0; left: 34px; }
.boot-screen__frame::after { bottom: 0; right: 34px; }

.boot-screen__mark {
  margin-bottom: 8px;
  font: 800 clamp(3rem, 10vw, 6rem)/0.9 var(--font-display);
  letter-spacing: -0.09em;
  text-shadow: 6px 0 0 rgba(var(--pink-rgb), 0.68), -4px 0 0 rgba(var(--cyan-rgb), 0.44);
}

.boot-screen__mark span { color: var(--pink); }
.boot-screen__eyebrow { margin: 18px 0 30px; color: var(--muted); font: 600 11px/1.5 var(--font-mono); letter-spacing: 0.12em; }
.boot-screen__console { display: grid; gap: 8px; min-height: 90px; margin-bottom: 28px; color: #b7bbac; font: 500 12px/1.5 var(--font-mono); }
.boot-screen__console span { animation: console-in 400ms both; }
.boot-screen__console span:nth-child(2) { animation-delay: 180ms; }
.boot-screen__console span:nth-child(3) { animation-delay: 360ms; }
.boot-screen__track { height: 4px; overflow: hidden; background: rgba(255,255,255,.1); }
.boot-screen__track span { display: block; width: 0%; height: 100%; background: var(--acid); box-shadow: 0 0 16px var(--acid); transition: width 120ms linear; }
.boot-screen__percent { margin: 8px 0 0; text-align: right; font: 700 12px/1 var(--font-mono); }

/* Global shell ------------------------------------------------------------ */
.app-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  opacity: 1;
  transition: opacity 500ms ease;
}

.app-shell.is-loading { visibility:hidden; opacity: 0; }

.topbar {
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding: 0 max(24px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: rgba(7, 7, 12, 0.78);
  backdrop-filter: blur(18px) saturate(130%);
}

.topbar::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mission));
  box-shadow: 0 0 12px var(--mission);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 14px;
  padding: 0;
  border: 0;
  text-align: left;
  background: transparent;
}

.brand__sigil {
  color: var(--acid);
  font: 800 24px/1 var(--font-display);
  letter-spacing: -0.08em;
}

.brand__sigil span { color: var(--pink); }
.brand__copy { display: grid; line-height: 1; }
.brand__copy strong { font: 700 12px/1.2 var(--font-display); letter-spacing: 0.18em; }
.brand__copy small { margin-top: 5px; color: var(--dim); font: 600 8px/1 var(--font-mono); letter-spacing: 0.11em; }

.topbar__telemetry {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--dim);
  font: 600 9px/1 var(--font-mono);
  letter-spacing: 0.08em;
}

.telemetry-item b { color: var(--muted); font-weight: 600; }
.system-status { display: flex; align-items: center; gap: 8px; color: var(--success); }
.system-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; animation: status-pulse 1.8s infinite; }

.topbar__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255,255,255,.025);
  font: 700 10px/1 var(--font-mono);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.icon-button svg { width: 16px; height: 16px; fill: currentColor; }
.icon-button:hover { color: var(--acid); border-color: rgba(var(--acid-rgb), .5); background: rgba(var(--acid-rgb), .06); }
.icon-button[aria-pressed="false"] { color: var(--danger); }

main { min-height: calc(100dvh - var(--header-h)); }

.screen {
  display: none;
  width: min(var(--max-width), 100%);
  margin: 0 auto;
  padding: 42px clamp(20px, 4vw, 72px) 64px;
}

.screen--active {
  display: block;
  animation: screen-in 500ms cubic-bezier(.2,.75,.2,1) both;
}

/* Reusable controls ------------------------------------------------------- */
.primary-button,
.secondary-button,
.danger-button,
.text-button,
.back-button {
  border: 0;
  text-transform: uppercase;
}

.primary-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 58px;
  padding: 0 24px 0 18px;
  overflow: hidden;
  color: #08080c;
  background: var(--acid);
  box-shadow: 8px 8px 0 rgba(var(--pink-rgb), .16);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  font: 800 14px/1 var(--font-display);
  letter-spacing: 0.05em;
  transition: filter 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.primary-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.65) 48%, transparent 61%);
  transform: translateX(-120%);
}

.primary-button:hover::before { animation: button-scan 650ms ease; }
.primary-button:hover { filter: brightness(1.08); box-shadow: 12px 12px 0 rgba(var(--pink-rgb), .2); }
.primary-button:active { transform: translate(3px, 3px); box-shadow: 4px 4px 0 rgba(var(--pink-rgb), .2); }
.primary-button:disabled { opacity: .45; filter: grayscale(.8); }
.primary-button svg { width: 27px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.primary-button__code { align-self: stretch; display: grid; place-items: center; padding-right: 14px; border-right: 1px solid rgba(7,7,12,.22); font: 700 8px/1 var(--font-mono); letter-spacing: .1em; }
.primary-button--compact { min-height: 50px; padding-inline: 22px; font-size: 12px; }

.secondary-button,
.danger-button {
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  font: 700 12px/1 var(--font-display);
  letter-spacing: .06em;
}

.secondary-button:hover { color: var(--cyan); border-color: var(--cyan); }
.danger-button { color: var(--danger); border-color: rgba(255,74,84,.5); }
.danger-button:hover { color: var(--ink); background: var(--danger); }

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 6px;
  color: var(--paper);
  background: transparent;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .06em;
}

.text-button:hover { color: var(--cyan); }
.text-button small { color: var(--dim); font-size: 8px; }
.text-button__icon { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid currentColor; font-size: 7px; }

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: var(--muted);
  background: transparent;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .1em;
}

.back-button:hover { color: var(--danger); }

.magnetic { will-change: transform; transition: transform 180ms cubic-bezier(.2,.8,.2,1); }
kbd { padding: 3px 6px; border: 1px solid rgba(255,255,255,.2); border-bottom-color: rgba(255,255,255,.38); color: #c6c9d2; background: rgba(255,255,255,.04); box-shadow: 0 2px 0 rgba(255,255,255,.08); font: 600 9px/1 var(--font-mono); }

/* Home -------------------------------------------------------------------- */
.home-screen { padding-top: clamp(38px, 6vw, 78px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(430px, .91fr) minmax(500px, 1.09fr);
  align-items: center;
  gap: clamp(42px, 6vw, 110px);
  min-height: min(670px, calc(100dvh - 150px));
}

.hero-copy { position: relative; z-index: 2; }
.kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px; color: var(--cyan); font: 600 9px/1.4 var(--font-mono); letter-spacing: .11em; }
.kicker__pulse { width: 24px; height: 1px; background: currentColor; box-shadow: 0 0 8px currentColor; animation: kicker-pulse 1.7s infinite; }

.hero-title {
  position: relative;
  max-width: 820px;
  margin: 0;
  font: 700 clamp(4rem, 7.1vw, 7.7rem)/.78 var(--font-display);
  letter-spacing: -.075em;
  text-transform: uppercase;
}

.hero-title > span { display: block; }
.hero-title__accent { position: relative; z-index: 1; color: var(--acid); text-shadow: 5px 0 0 rgba(var(--pink-rgb), .36), -3px 0 0 rgba(var(--cyan-rgb), .24); }
.hero-title__accent::after { content: ""; position: absolute; z-index: -1; left: -3%; right: 2%; bottom: 8%; height: 9%; background: var(--pink); opacity: .7; transform: skewX(-28deg); }
.hero-title__dot { color: var(--pink); }
.hero-title__zh { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; color: #d5d7d2; font-size: clamp(15px, 1.4vw, 20px); font-weight: 800; letter-spacing: .32em; }
.hero-title__zh span { color: var(--pink); }

.hero-lede { max-width: 650px; margin: 28px 0 30px; color: #adb0ba; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.9; }
.hero-lede strong { color: var(--paper); font-weight: 800; border-bottom: 1px solid var(--acid); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.hero-shortcuts { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 25px; color: var(--dim); font: 600 9px/1 var(--font-mono); }
.hero-shortcuts span { display: flex; align-items: center; gap: 7px; }

.hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1.06 / 1;
  isolation: isolate;
}

.hero-visual::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 8% -6% -6% 12%;
  border: 1px solid rgba(var(--pink-rgb), .32);
  background: linear-gradient(140deg, rgba(var(--pink-rgb), .13), transparent 50%);
  transform: skewY(-4deg);
}

.hero-visual__image {
  position: absolute;
  inset: 5% 0 5% 0;
  overflow: hidden;
  background: #12131b;
  clip-path: polygon(7% 0, 100% 0, 100% 78%, 88% 100%, 0 100%, 0 15%);
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
}

.hero-visual__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,7,12,.65), transparent 24%, transparent 72%, rgba(7,7,12,.2)), linear-gradient(transparent 60%, rgba(7,7,12,.5));
  mix-blend-mode: multiply;
}

.hero-visual__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.18) contrast(1.07) brightness(.85);
  transform: scale(1.045);
  transition: transform 1.8s cubic-bezier(.2,.7,.2,1), filter 500ms ease;
}

.hero-visual:hover .hero-visual__image img { transform: scale(1.01); filter: saturate(1.3) contrast(1.08) brightness(.94); }

.hero-visual__frame { position: absolute; z-index: 3; inset: 1% 4% 1% 5%; border-top: 1px solid var(--acid); border-right: 1px solid rgba(var(--acid-rgb), .45); clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 100%, 85% 99%, 0 99%); }
.hero-visual__frame::before { content:""; position:absolute; top: -5px; left: 12%; width: 90px; height: 9px; background: var(--acid); }
.hero-visual__reticle { position: absolute; z-index: 4; top: 44%; left: 50%; width: 92px; height: 92px; border: 1px solid rgba(var(--cyan-rgb), .55); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 32px rgba(var(--cyan-rgb), .17); animation: reticle-spin 9s linear infinite; }
.hero-visual__reticle::before, .hero-visual__reticle::after { content:""; position:absolute; inset: 13px; border: 1px dashed rgba(var(--acid-rgb), .62); border-radius: 50%; }
.hero-visual__reticle::after { inset: 35px; border-style: solid; background: rgba(var(--pink-rgb),.24); }
.hero-visual__reticle i { position: absolute; background: var(--cyan); }
.hero-visual__reticle i:first-child { width: 116px; height: 1px; top: 50%; left: -13px; }
.hero-visual__reticle i:last-child { width: 1px; height: 116px; left: 50%; top: -13px; }
.visual-tag { position: absolute; z-index: 4; padding: 6px 9px; color: var(--ink); background: var(--acid); font: 800 8px/1 var(--font-mono); letter-spacing: .08em; }
.visual-tag--top { top: 0; right: 4%; }
.visual-tag--bottom { bottom: 1%; left: 0; color: var(--paper); background: var(--pink); }
.signal-card { position: absolute; z-index: 5; right: -1%; bottom: 9%; width: 155px; padding: 13px 14px; border-left: 2px solid var(--cyan); background: rgba(6,8,14,.86); backdrop-filter: blur(10px); }
.signal-card > span { color: var(--muted); font: 600 7px/1 var(--font-mono); letter-spacing: .08em; }
.signal-card strong { display: block; margin: 5px 0 9px; font: 700 21px/1 var(--font-mono); }
.signal-card div { display: flex; gap: 4px; }
.signal-card i { flex: 1; height: 3px; background: var(--cyan); box-shadow: 0 0 5px var(--cyan); }
.signal-card i:last-child { background: rgba(255,255,255,.14); box-shadow: none; }

.mission-board { padding-top: 86px; scroll-margin-top: calc(var(--header-h) + 20px); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.section-heading > div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 13px; }
.section-heading__index { grid-row: 1 / 3; align-self: stretch; padding-top: 4px; color: var(--pink); font: 700 10px/1 var(--font-mono); writing-mode: vertical-rl; }
.section-heading p { margin: 0; color: var(--dim); font: 600 9px/1.3 var(--font-mono); letter-spacing: .11em; }
.section-heading h2 { margin: 5px 0 0; font: 800 clamp(24px, 2.5vw, 38px)/1.1 var(--font-display); letter-spacing: -.035em; }
.section-heading__aside { text-align: right; line-height: 1.8 !important; }
.section-heading--compact { margin-bottom: 20px; }

.mission-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mission-card { position: relative; min-height: 245px; padding: 25px; overflow: hidden; border: 1px solid var(--line); color: var(--paper); text-align: left; background: linear-gradient(145deg, rgba(20,21,31,.95), rgba(10,10,16,.92)); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); transition: border-color 200ms ease, transform 200ms ease, background 200ms ease; }
.mission-card::before { content:""; position:absolute; inset:0; opacity:0; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(var(--card-rgb), .2), transparent 35%); transition: opacity 220ms ease; }
.mission-card::after { content:""; position:absolute; top:0; left:0; width:0; height:3px; background: var(--card-accent); box-shadow: 0 0 17px var(--card-accent); transition: width 260ms ease; }
.mission-card:hover, .mission-card.is-selected { border-color: rgba(var(--card-rgb), .68); transform: translateY(-5px); background: linear-gradient(145deg, rgba(var(--card-rgb),.09), rgba(10,10,16,.96) 62%); }
.mission-card:hover::before, .mission-card.is-selected::before { opacity:1; }
.mission-card:hover::after, .mission-card.is-selected::after { width: 70%; }
.mission-card > * { position: relative; z-index: 1; }
.mission-card__top { display:flex; align-items:center; justify-content:space-between; color: var(--dim); font: 600 8px/1 var(--font-mono); letter-spacing:.08em; }
.mission-card__level { display:grid; place-items:center; width:38px; height:38px; color: var(--card-accent); border: 1px solid rgba(var(--card-rgb),.5); font:700 12px/1 var(--font-mono); }
.mission-card__icon { margin: 24px 0 17px; color: var(--card-accent); font: 500 34px/1 var(--font-mono); text-shadow: 0 0 22px rgba(var(--card-rgb),.35); }
.mission-card h3 { margin:0; font:700 20px/1.1 var(--font-display); letter-spacing:.01em; }
.mission-card h3 span { display:block; margin-top:7px; color: var(--muted); font:600 10px/1 var(--font-body); letter-spacing:.12em; }
.mission-card p { max-width: 340px; margin: 16px 0 0; color: #898d99; font-size: 12px; line-height:1.7; }
.mission-card__skills { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.mission-card__skills span { padding:4px 7px; border:1px solid rgba(255,255,255,.1); color:#777b87; font:600 7px/1 var(--font-mono); }
.mission-card__arrow { position:absolute; right:18px; bottom:18px; width:26px; height:26px; color: var(--card-accent); opacity:.4; transition: opacity 200ms, transform 200ms; }
.mission-card:hover .mission-card__arrow, .mission-card.is-selected .mission-card__arrow { opacity:1; transform:translateX(3px); }

.operator-strip { position:relative; display:grid; grid-template-columns: 1fr 2fr auto; align-items:center; gap:30px; margin-top:70px; padding:24px 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(90deg, rgba(var(--cyan-rgb),.035), transparent, rgba(var(--pink-rgb),.035)); }
.operator-strip__identity { display:flex; align-items:center; gap:13px; }
.operator-strip__avatar { display:grid; place-items:center; width:44px; height:44px; color:var(--ink); background:var(--acid); font:900 17px/1 var(--font-display); clip-path:polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%); }
.operator-strip small, .rank-chip small { color:var(--dim); font:600 7px/1 var(--font-mono); letter-spacing:.1em; }
.operator-strip h2 { margin:5px 0 0; font:700 14px/1 var(--font-mono); letter-spacing:.05em; }
.operator-strip h2 span { color:var(--acid); }
.operator-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:0; }
.operator-stats > div { padding:0 22px; border-left:1px solid var(--line); }
.operator-stats dt { color:var(--dim); font-size:9px; }
.operator-stats dd { margin:5px 0 0; font:700 17px/1 var(--font-mono); }
.rank-chip { min-width:115px; padding:10px 15px; border-left:2px solid var(--pink); background:rgba(var(--pink-rgb),.08); }
.rank-chip strong { display:block; margin-top:6px; color:var(--pink); font:700 12px/1 var(--font-mono); }

/* Game HUD ---------------------------------------------------------------- */
.game-screen { width:100%; max-width:none; min-height:calc(100dvh - var(--header-h)); padding:0; }
.game-hud { display:grid; grid-template-columns:120px 220px minmax(300px,1fr) auto; align-items:center; gap:28px; min-height:78px; padding:12px clamp(20px,3vw,52px); border-bottom:1px solid var(--line); background:rgba(9,9,15,.55); }
.mission-identity { display:grid; gap:5px; }
.mission-identity span { color:var(--mission); font:600 8px/1 var(--font-mono); letter-spacing:.09em; }
.mission-identity strong { font:700 12px/1 var(--font-display); letter-spacing:.08em; }
.hud-progress__labels { display:flex; justify-content:space-between; margin-bottom:8px; color:var(--dim); font:600 7px/1 var(--font-mono); letter-spacing:.07em; }
.hud-progress__labels b { color:var(--paper); }
.hud-progress__track { position:relative; height:3px; background:rgba(255,255,255,.09); }
.hud-progress__track span { display:block; width:0; height:100%; background:var(--mission); box-shadow:0 0 12px var(--mission); transition:width 450ms cubic-bezier(.2,.8,.2,1); }
.hud-stats { display:flex; gap:24px; margin:0; }
.hud-stats div { min-width:68px; }
.hud-stats dt { color:var(--dim); font:600 7px/1 var(--font-mono); letter-spacing:.08em; }
.hud-stats dd { margin:6px 0 0; font:700 15px/1 var(--font-mono); }
.hud-stats .combo-value { color:var(--acid); }

.game-layout { display:grid; grid-template-columns:230px minmax(480px, 1fr) 244px; gap:18px; min-height:calc(100dvh - var(--header-h) - 80px); padding:22px clamp(20px,3vw,52px) 116px; }
.hud-panel { position:relative; min-width:0; border:1px solid var(--line); background:rgba(11,12,19,.64); backdrop-filter:blur(12px); }
.hud-panel__corner { position:absolute; top:-1px; right:-1px; width:22px; height:22px; border-top:3px solid var(--mission); border-right:3px solid var(--mission); }
.panel-label { margin:0; color:var(--mission); font:700 8px/1 var(--font-mono); letter-spacing:.12em; }
.intel-panel, .tool-panel { align-self:start; padding:20px; }
.threat-orbit { position:relative; display:grid; place-items:center; width:130px; height:130px; margin:35px auto 28px; }
.threat-orbit__outer, .threat-orbit__inner { position:absolute; border-radius:50%; }
.threat-orbit__outer { inset:0; border:1px dashed rgba(var(--mission-rgb),.4); animation:orbit-spin 12s linear infinite; }
.threat-orbit__outer::before, .threat-orbit__outer::after { content:""; position:absolute; inset:10px; border-top:2px solid var(--mission); border-right:1px solid transparent; border-radius:50%; }
.threat-orbit__outer::after { inset:24px; border-top-color:var(--cyan); transform:rotate(140deg); }
.threat-orbit__inner { inset:36px; border:1px solid rgba(255,255,255,.18); background:radial-gradient(circle, rgba(var(--mission-rgb),.16), transparent 68%); box-shadow:0 0 22px rgba(var(--mission-rgb),.12); }
.threat-orbit span { color:var(--mission); font:800 22px/1 var(--font-mono); }
.intel-copy small, .timer-block small { color:var(--dim); font:600 7px/1 var(--font-mono); letter-spacing:.08em; }
.intel-copy strong { display:block; margin:6px 0 10px; overflow-wrap:anywhere; font:700 12px/1.2 var(--font-mono); }
.intel-copy p { margin:0; color:#888c99; font-size:11px; line-height:1.7; }
.risk-meter { margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.risk-meter > div:first-child { display:flex; justify-content:space-between; color:var(--dim); font:600 7px/1 var(--font-mono); }
.risk-meter b { color:var(--success); }
.risk-meter__blocks { display:grid; grid-template-columns:repeat(8,1fr); gap:3px; margin-top:10px; }
.risk-meter__blocks i { height:5px; background:rgba(255,255,255,.08); transition:background 250ms, box-shadow 250ms; }
.risk-meter__blocks i.is-on { background:var(--risk-color,var(--success)); box-shadow:0 0 7px var(--risk-color,var(--success)); }
.timer-block { display:flex; align-items:end; justify-content:space-between; margin-top:24px; }
.timer-block strong { font:600 21px/1 var(--font-mono); }

.question-terminal { position:relative; align-self:start; min-height:570px; padding:clamp(25px,3vw,45px); overflow:hidden; border:1px solid rgba(255,255,255,.2); background:linear-gradient(145deg, rgba(17,18,28,.97), rgba(9,10,16,.94)); box-shadow:0 25px 90px rgba(0,0,0,.22); clip-path:polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.question-terminal::before { content:""; position:absolute; top:0; right:24px; left:0; height:2px; background:linear-gradient(90deg,var(--mission),transparent 45%); box-shadow:0 0 14px rgba(var(--mission-rgb),.55); }
.question-terminal::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.18; background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px, transparent 1px); background-size:28px 28px; mask-image:linear-gradient(135deg,transparent,black 50%,transparent); }
.question-terminal[data-state="correct"] { animation:terminal-success 500ms ease; }
.question-terminal[data-state="wrong"] { animation:terminal-glitch 380ms steps(2); }
.question-terminal__header { display:flex; justify-content:space-between; gap:20px; }
.question-mode { display:block; margin-bottom:6px; color:var(--mission); font:700 10px/1 var(--font-mono); letter-spacing:.12em; }
.question-id { color:var(--dim); font:500 7px/1 var(--font-mono); }
.difficulty-pips { display:flex; gap:4px; }
.difficulty-pips i { width:14px; height:3px; background:rgba(255,255,255,.1); }
.difficulty-pips i.is-on { background:var(--mission); box-shadow:0 0 6px var(--mission); }

.question-context { position:relative; margin:30px 0 22px; padding:15px 18px 15px 20px; border-left:2px solid var(--cyan); background:rgba(var(--cyan-rgb),.04); }
.question-context::before { content:""; position:absolute; top:0; right:0; width:18px; height:1px; background:var(--cyan); }
.context-speaker { display:block; margin-bottom:7px; color:var(--cyan); font:600 7px/1 var(--font-mono); letter-spacing:.1em; }
.question-context p { margin:0; color:#aaadb7; font-size:12px; line-height:1.65; }
.question-instruction { margin:0 0 12px; color:var(--dim); font-size:11px; font-weight:700; letter-spacing:.08em; }
.question-copy h2 { max-width:950px; min-height:2.4em; margin:0; overflow-wrap:anywhere; color:#f4f5ef; font:650 clamp(22px,2.25vw,36px)/1.32 var(--font-display); letter-spacing:-.025em; }
.question-copy h2 em { color:var(--mission); font-style:normal; border-bottom:2px solid currentColor; }
.signal-play { display:grid; grid-template-columns:auto auto repeat(6,3px); align-items:center; gap:7px; margin-top:20px; min-height:46px; padding:0 16px; border:1px solid rgba(var(--cyan-rgb),.42); color:var(--cyan); background:rgba(var(--cyan-rgb),.055); font:700 9px/1 var(--font-mono); letter-spacing:.08em; }
.signal-play:hover { background:rgba(var(--cyan-rgb),.12); }
.signal-play__icon { display:grid; place-items:center; width:22px; height:22px; border:1px solid currentColor; border-radius:50%; font-size:7px; }
.signal-play i { width:2px; height:7px; background:currentColor; animation:wave 700ms ease-in-out infinite alternate; }
.signal-play i:nth-of-type(2),.signal-play i:nth-of-type(5){animation-delay:-.2s;height:15px}.signal-play i:nth-of-type(3){animation-delay:-.45s;height:10px}.signal-play i:nth-of-type(4){animation-delay:-.1s;height:18px}.signal-play i:nth-of-type(6){animation-delay:-.36s;height:5px}
.signal-play[hidden] { display:none; }

.hint-panel { margin:20px 0 -5px; padding:13px 16px; border:1px solid rgba(var(--acid-rgb),.24); background:rgba(var(--acid-rgb),.045); }
.hint-panel[hidden] { display:none; }
.hint-panel span { color:var(--acid); font:700 7px/1 var(--font-mono); letter-spacing:.1em; }
.hint-panel p { margin:7px 0 0; color:#b4b6ae; font-size:11px; line-height:1.6; }

.answer-zone { margin-top:28px; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.answer-option { position:relative; display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:13px; width:100%; min-height:62px; padding:11px 14px; border:1px solid var(--line); color:#d1d3d8; text-align:left; background:rgba(255,255,255,.026); transition:border-color 150ms, background 150ms, transform 150ms, opacity 150ms; }
.answer-option:hover:not(:disabled) { border-color:rgba(var(--mission-rgb),.58); background:rgba(var(--mission-rgb),.055); transform:translateX(3px); }
.answer-option:disabled { cursor:default; }
.option-key { display:grid; place-items:center; width:31px; height:31px; border:1px solid rgba(255,255,255,.16); color:var(--dim); font:600 9px/1 var(--font-mono); }
.option-text { overflow-wrap:anywhere; font-size:13px; font-weight:600; line-height:1.45; }
.option-state { width:18px; color:transparent; font:800 17px/1 var(--font-mono); }
.answer-option.is-correct { border-color:var(--success); color:#eafff7; background:rgba(98,255,201,.09); }
.answer-option.is-correct .option-key { color:var(--ink); border-color:var(--success); background:var(--success); }
.answer-option.is-correct .option-state { color:var(--success); }
.answer-option.is-wrong { border-color:var(--danger); color:#ffd9db; background:rgba(255,74,84,.085); }
.answer-option.is-wrong .option-key { color:#fff; border-color:var(--danger); background:var(--danger); }
.answer-option.is-wrong .option-state { color:var(--danger); }
.answer-option.is-eliminated { opacity:.22; filter:grayscale(1); text-decoration:line-through; }
.answer-option.is-eliminated::after { content:"SIGNAL PURGED"; position:absolute; right:12px; color:var(--danger); font:700 7px/1 var(--font-mono); letter-spacing:.08em; }

.order-workbench { display:grid; gap:14px; }
.sentence-output { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:68px; padding:12px; border:1px dashed rgba(var(--mission-rgb),.42); background:rgba(var(--mission-rgb),.035); }
.sentence-output.is-empty::before { content:attr(data-placeholder); color:var(--dim); font-size:11px; }
.word-bank { display:flex; flex-wrap:wrap; gap:8px; padding:4px 0; }
.word-tile { min-height:42px; padding:0 13px; border:1px solid var(--line); color:#d5d7db; background:rgba(255,255,255,.04); font:600 12px/1 var(--font-body); transition:all 150ms; }
.word-tile:hover:not(:disabled) { color:var(--ink); border-color:var(--mission); background:var(--mission); transform:translateY(-2px); }
.word-tile.is-used { opacity:.2; }
.sentence-output .word-tile { color:var(--ink); border-color:var(--cyan); background:var(--cyan); }
.order-actions { display:flex; justify-content:flex-end; gap:8px; }
.mini-button { min-height:42px; padding:0 15px; border:1px solid var(--line); color:var(--muted); background:transparent; font:700 9px/1 var(--font-mono); letter-spacing:.08em; }
.mini-button:hover { color:var(--cyan); border-color:var(--cyan); }
.mini-button--submit { color:var(--ink); border-color:var(--mission); background:var(--mission); }
.mini-button:disabled { opacity:.35; }

.dual-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dual-group { min-width:0; margin:0; padding:14px; border:1px solid var(--line); }
.dual-group legend { padding:0 8px; color:var(--mission); font:700 8px/1 var(--font-mono); letter-spacing:.08em; }
.dual-choices { display:grid; gap:7px; }
.dual-choice { position:relative; display:block; }
.dual-choice input { position:absolute; opacity:0; pointer-events:none; }
.dual-choice span { display:block; min-height:44px; padding:11px 12px; border:1px solid rgba(255,255,255,.11); color:#aaaeba; background:rgba(255,255,255,.025); font-size:11px; line-height:1.5; transition:all 150ms; }
.dual-choice input:checked + span { color:var(--paper); border-color:var(--cyan); background:rgba(var(--cyan-rgb),.08); box-shadow:inset 3px 0 0 var(--cyan); }
.dual-choice input:focus-visible + span { outline:2px solid var(--cyan); outline-offset:2px; }
.dual-choice.is-correct span { border-color:var(--success); background:rgba(98,255,201,.08); }
.dual-choice.is-wrong span { border-color:var(--danger); background:rgba(255,74,84,.08); }
.dual-submit { grid-column:1/-1; justify-self:end; }

.question-footer { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:30px; padding-top:15px; border-top:1px solid var(--line); color:var(--dim); font:600 7px/1 var(--font-mono); }
.question-footer > span { display:flex; align-items:center; gap:6px; }
.question-footer__status { margin-left:auto; color:var(--success); }
.question-footer__status i { width:5px; height:5px; border-radius:50%; background:currentColor; box-shadow:0 0 7px currentColor; }

.tool-panel { display:grid; gap:9px; }
.tool-panel .panel-label { margin-bottom:7px; }
.tool-button { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px; min-height:58px; padding:9px 10px; border:1px solid var(--line); text-align:left; background:rgba(255,255,255,.025); }
.tool-button:hover:not(:disabled) { border-color:rgba(var(--mission-rgb),.5); background:rgba(var(--mission-rgb),.055); }
.tool-button:disabled { opacity:.3; }
.tool-button__icon { display:grid; place-items:center; width:32px; height:32px; color:var(--mission); border:1px solid rgba(var(--mission-rgb),.38); font:600 17px/1 var(--font-mono); }
.tool-button span:nth-child(2) { display:grid; gap:4px; }
.tool-button strong { font:700 9px/1 var(--font-mono); letter-spacing:.07em; }
.tool-button small { color:var(--dim); font-size:8px; }
.tool-button b { color:var(--mission); font:700 10px/1 var(--font-mono); }
.memory-log { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.memory-log > div { display:flex; justify-content:space-between; color:var(--dim); font:600 7px/1 var(--font-mono); }
.memory-log b { color:var(--paper); }
.memory-log ul { display:flex; gap:5px; margin:12px 0 0; padding:0; list-style:none; }
.memory-log li { width:100%; height:5px; background:rgba(255,255,255,.08); }
.memory-log li.is-correct { background:var(--success); box-shadow:0 0 5px rgba(98,255,201,.5); }
.memory-log li.is-wrong { background:var(--danger); box-shadow:0 0 5px rgba(255,74,84,.5); }
.tool-warning { margin:12px 0 0; color:#9296a5; font-size:10px; line-height:1.6; }

.feedback-drawer { position:fixed; z-index:80; right:0; bottom:0; left:0; display:grid; grid-template-columns:auto minmax(240px,1.4fr) minmax(220px,1fr) auto auto; align-items:center; gap:clamp(16px,3vw,42px); min-height:112px; padding:18px clamp(24px,4vw,72px); border-top:1px solid var(--feedback-color,var(--success)); background:rgba(10,11,17,.96); box-shadow:0 -20px 60px rgba(0,0,0,.45), 0 -1px 20px rgba(98,255,201,.12); backdrop-filter:blur(20px); transform:translateY(110%); transition:transform 400ms cubic-bezier(.2,.8,.2,1); }
.feedback-drawer.is-visible { transform:translateY(0); }
.feedback-drawer[aria-hidden="true"] { pointer-events:none; }
.feedback-drawer.is-wrong { --feedback-color:var(--danger); box-shadow:0 -20px 60px rgba(0,0,0,.45),0 -1px 20px rgba(255,74,84,.12); }
.feedback-drawer__status { display:flex; align-items:center; gap:12px; min-width:170px; }
.feedback-icon { display:grid; place-items:center; width:43px; height:43px; color:var(--ink); background:var(--feedback-color); font:900 21px/1 var(--font-mono); clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%); }
.feedback-drawer small,.feedback-drawer__explanation span,.feedback-drawer__example span { color:var(--feedback-color); font:700 7px/1 var(--font-mono); letter-spacing:.09em; }
.feedback-drawer h3 { margin:5px 0 0; font:700 16px/1 var(--font-display); }
.feedback-drawer__explanation,.feedback-drawer__example { padding-left:18px; border-left:1px solid var(--line); }
.feedback-drawer p { margin:6px 0 0; color:#a8abb5; font-size:10px; line-height:1.55; }
.feedback-drawer__example p { color:#d1d3d6; font-style:italic; }
.feedback-drawer__reward strong { display:block; margin-top:5px; color:var(--feedback-color); font:700 20px/1 var(--font-mono); }

/* Results ----------------------------------------------------------------- */
.result-screen { padding-top:70px; }
.result-grid { display:grid; grid-template-columns:minmax(420px,1.15fr) minmax(320px,.85fr); gap:18px; max-width:1200px; margin:0 auto; }
.result-hero { position:relative; display:flex; align-items:center; gap:35px; min-height:260px; padding:35px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(135deg,rgba(var(--mission-rgb),.11),rgba(15,16,24,.92) 52%); }
.result-hero::after { content:""; position:absolute; right:-8%; bottom:-70%; width:400px; height:400px; border:1px solid rgba(var(--mission-rgb),.23); border-radius:50%; box-shadow:0 0 70px rgba(var(--mission-rgb),.1); }
.result-kicker { position:absolute; top:18px; left:20px; color:var(--mission); font:700 8px/1 var(--font-mono); letter-spacing:.12em; }
.result-grade { position:relative; z-index:2; display:grid; place-items:center; flex:0 0 130px; width:130px; height:150px; color:var(--ink); background:var(--mission); font:800 88px/.8 var(--font-display); clip-path:polygon(0 0,100% 0,100% 80%,80% 100%,0 100%); box-shadow:10px 10px 0 rgba(var(--pink-rgb),.25); }
.result-code { margin:0 0 12px; color:var(--muted); font:600 8px/1 var(--font-mono); letter-spacing:.1em; }
.result-hero h1 { max-width:430px; margin:0; font:750 clamp(32px,4vw,58px)/.98 var(--font-display); letter-spacing:-.055em; }
.result-hero h1 span { color:var(--pink); }
.result-hero > div:last-child > p:last-child { max-width:450px; margin:18px 0 0; color:#9da0aa; font-size:12px; line-height:1.75; }
.result-score-card { padding:28px; border:1px solid var(--line); background:rgba(14,15,23,.86); }
.result-score-card > span { color:var(--dim); font:600 8px/1 var(--font-mono); letter-spacing:.1em; }
.result-score-card > strong { display:block; margin:12px 0 19px; color:var(--mission); font:700 clamp(37px,5vw,64px)/1 var(--font-mono); text-shadow:0 0 24px rgba(var(--mission-rgb),.25); }
.result-score-card__line { height:2px; background:linear-gradient(90deg,var(--mission) 0 75%,rgba(255,255,255,.08) 75%); }
.result-score-card dl { display:grid; grid-template-columns:repeat(3,1fr); margin:27px 0 0; }
.result-score-card dl div { padding:0 12px; border-left:1px solid var(--line); }
.result-score-card dl div:first-child { padding-left:0; border:0; }
.result-score-card dt { color:var(--dim); font:600 7px/1.2 var(--font-mono); }
.result-score-card dd { margin:8px 0 0; font:700 15px/1 var(--font-mono); }
.result-analysis { padding:28px; border:1px solid var(--line); background:rgba(14,15,23,.72); }
.mastery-bars { display:grid; gap:14px; }
.mastery-row { display:grid; grid-template-columns:120px 1fr 42px; align-items:center; gap:14px; }
.mastery-row__label { color:#b6b8c0; font-size:10px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mastery-row__track { height:6px; background:rgba(255,255,255,.08); }
.mastery-row__track span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--cyan),var(--mission)); box-shadow:0 0 8px rgba(var(--cyan-rgb),.3); transition:width 900ms cubic-bezier(.2,.8,.2,1); }
.mastery-row__value { text-align:right; color:var(--mission); font:700 10px/1 var(--font-mono); }
.result-debrief { position:relative; padding:28px; border:1px solid var(--line); border-left:2px solid var(--pink); background:linear-gradient(135deg,rgba(var(--pink-rgb),.06),rgba(14,15,23,.8)); }
.result-debrief blockquote { margin:28px 0 22px; color:#d5d6d8; font-size:14px; line-height:1.8; }
.result-debrief blockquote::before { content:"“"; margin-right:6px; color:var(--pink); font:800 27px/0 var(--font-display); }
.review-chip { display:flex; align-items:center; justify-content:space-between; padding-top:15px; border-top:1px solid var(--line); }
.review-chip span { color:var(--dim); font:600 7px/1 var(--font-mono); }
.review-chip strong { color:var(--pink); font:700 11px/1 var(--font-mono); }
.result-actions { grid-column:1/-1; display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:14px; padding-top:12px; }

/* Dialogs & utilities ----------------------------------------------------- */
.modal { width:min(650px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:40px; border:1px solid rgba(var(--acid-rgb),.45); color:var(--paper); background:rgba(12,12,19,.98); box-shadow:0 32px 120px rgba(0,0,0,.8),0 0 50px rgba(var(--acid-rgb),.06); clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,20px 100%,0 calc(100% - 20px)); }
.modal::backdrop { background:rgba(3,3,7,.8); backdrop-filter:blur(8px); }
.modal[open] { animation:modal-in 250ms cubic-bezier(.2,.8,.2,1); }
.modal__close { position:absolute; top:15px; right:17px; width:38px; height:38px; border:1px solid var(--line); color:var(--muted); background:transparent; font:400 22px/1 var(--font-mono); }
.modal__close:hover { color:var(--danger); border-color:var(--danger); }
.modal__kicker { color:var(--acid); font:700 8px/1 var(--font-mono); letter-spacing:.12em; }
.modal h2 { margin:18px 0; font:750 clamp(28px,5vw,48px)/1.05 var(--font-display); letter-spacing:-.05em; }
.modal h2 strong { color:var(--acid); font-weight:inherit; }
.modal > p { color:#969aa7; font-size:13px; line-height:1.8; }
.briefing-steps { display:grid; gap:9px; margin:25px 0; padding:0; list-style:none; }
.briefing-steps li { display:grid; grid-template-columns:42px 1fr; gap:14px; align-items:start; padding:14px; border:1px solid var(--line); background:rgba(255,255,255,.025); }
.briefing-steps li > span { display:grid; place-items:center; width:36px; height:36px; color:var(--ink); background:var(--acid); font:800 10px/1 var(--font-mono); }
.briefing-steps strong { font-size:13px; }
.briefing-steps p { margin:4px 0 0; color:var(--muted); font-size:10px; line-height:1.6; }
.briefing-tools { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:25px; }
.briefing-tools span { padding:7px 9px; border:1px solid var(--line); color:var(--muted); font-size:9px; }
.briefing-tools b { margin-right:4px; color:var(--cyan); font-family:var(--font-mono); }
.confirm-modal { width:min(480px,calc(100% - 32px)); }
.confirm-modal h2 { font-size:34px; }
.modal__actions { display:flex; justify-content:flex-end; gap:10px; margin-top:26px; }
.toast { position:fixed; z-index:9500; right:24px; bottom:24px; max-width:min(360px,calc(100% - 48px)); padding:12px 16px; border-left:3px solid var(--cyan); color:var(--paper); background:rgba(12,13,20,.96); box-shadow:0 12px 45px rgba(0,0,0,.5); font-size:11px; transform:translateY(30px); opacity:0; pointer-events:none; transition:all 240ms ease; }
.toast.is-visible { transform:translateY(0); opacity:1; }
.noscript-warning { position:fixed; z-index:10000; inset:auto 0 0; padding:20px; color:#08080c; text-align:center; background:var(--danger); font-weight:800; }
.site-footer { display:flex; justify-content:space-between; gap:20px; width:min(var(--max-width),100%); margin:0 auto; padding:22px clamp(20px,4vw,72px); border-top:1px solid var(--line); color:#9296a5; font:600 9px/1 var(--font-mono); letter-spacing:.08em; }

/* State modifiers --------------------------------------------------------- */
body.high-combo { --acid:#fff900; }
body.high-combo .world__aurora { opacity:.62; }
body.is-boss { --mission:#ff4a54; --mission-rgb:255,74,84; }
body.is-boss .question-terminal { box-shadow:0 0 60px rgba(255,74,84,.08); }
body.is-boss .question-mode { animation:boss-alert 1.1s steps(2) infinite; }

/* Animations -------------------------------------------------------------- */
@keyframes aurora-drift { to { transform:translate3d(8%,-5%,0) rotate(10deg) scale(1.08); } }
@keyframes noise-shift { 0%{transform:translate3d(0,0,0)} 25%{transform:translate3d(3%,-2%,0)} 50%{transform:translate3d(-2%,3%,0)} 75%{transform:translate3d(2%,2%,0)} 100%{transform:translate3d(-3%,-2%,0)} }
@keyframes glyph-fall { to { transform:translateY(140vh); } }
@keyframes console-in { from { opacity:0; transform:translateX(-10px); } }
@keyframes status-pulse { 50%{opacity:.3;box-shadow:0 0 2px currentColor} }
@keyframes screen-in { from{opacity:0;transform:translateY(16px)} }
@keyframes button-scan { to{transform:translateX(120%)} }
@keyframes kicker-pulse { 50%{width:9px;opacity:.35} }
@keyframes reticle-spin { to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes orbit-spin { to{transform:rotate(360deg)} }
@keyframes wave { to{transform:scaleY(.35);opacity:.45} }
@keyframes terminal-success { 0%,100%{transform:none}35%{transform:translateY(-3px);box-shadow:0 0 30px rgba(98,255,201,.14)} }
@keyframes terminal-glitch { 0%,100%{transform:none;filter:none}20%{transform:translateX(-5px);filter:hue-rotate(35deg)}40%{transform:translateX(6px)}60%{clip-path:polygon(0 2%,100% 2%,100% 22%,0 26%,0 30%,100% 27%,100% 100%,0 100%)} }
@keyframes modal-in { from{opacity:0;transform:scale(.96) translateY(10px)} }
@keyframes boss-alert { 50%{opacity:.45;text-shadow:4px 0 var(--cyan)} }

.particle { position:fixed; z-index:500; width:5px; height:5px; pointer-events:none; background:var(--particle-color,var(--success)); box-shadow:0 0 8px var(--particle-color,var(--success)); animation:particle-burst 650ms cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes particle-burst { to{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(160deg) scale(.2)} }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1260px) {
  .hero-grid { grid-template-columns:minmax(390px,.88fr) minmax(430px,1.12fr); gap:44px; }
  .game-layout { grid-template-columns:190px minmax(440px,1fr) 205px; gap:12px; padding-inline:20px; }
  .intel-panel,.tool-panel { padding:15px; }
  .feedback-drawer { grid-template-columns:auto 1fr 1fr auto; }
  .feedback-drawer__reward { display:none; }
}

@media (max-width: 1060px) {
  .topbar { grid-template-columns:1fr auto; }
  .topbar__telemetry { display:none; }
  .hero-grid { grid-template-columns:1fr; min-height:auto; }
  .hero-copy { max-width:760px; }
  .hero-title { font-size:clamp(4rem,12vw,7rem); }
  .hero-visual { max-height:620px; aspect-ratio:1.55/1; }
  .hero-visual__image { inset:2% 0; }
  .mission-board { padding-top:70px; }
  .mission-list { grid-template-columns:1fr; }
  .mission-card { min-height:190px; display:grid; grid-template-columns:auto 1fr; column-gap:22px; }
  .mission-card__top { grid-column:1/-1; }
  .mission-card__icon { grid-row:2/5; margin:24px 5px 0 0; }
  .mission-card h3 { margin-top:22px; }
  .mission-card p { margin-top:10px; }
  .mission-card__skills { margin-top:12px; }
  .operator-strip { grid-template-columns:1fr auto; }
  .operator-stats { grid-column:1/-1; grid-row:2; }
  .operator-stats > div:first-child { border-left:0;padding-left:0; }
  .game-hud { grid-template-columns:100px 1fr auto; }
  .mission-identity { display:none; }
  .game-layout { grid-template-columns:1fr; padding-bottom:160px; }
  .intel-panel { display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:18px; }
  .intel-panel .panel-label { grid-column:1/-1; }
  .threat-orbit { width:82px;height:82px;margin:0; }
  .threat-orbit__inner { inset:24px; }
  .risk-meter { margin:0;padding:0 0 0 18px;border-top:0;border-left:1px solid var(--line); }
  .timer-block { display:grid;gap:8px;margin:0; }
  .question-terminal { min-height:auto; }
  .tool-panel { display:grid; grid-template-columns:repeat(3,1fr); }
  .tool-panel > .panel-label,.tool-panel > .memory-log,.tool-panel > .tool-warning,.tool-panel > .hud-panel__corner { grid-column:1/-1; }
  .memory-log { margin-top:6px; }
  .feedback-drawer { grid-template-columns:auto 1fr auto; }
  .feedback-drawer__example { display:none; }
  .result-grid { grid-template-columns:1fr; }
  .result-actions { grid-column:auto; }
}

@media (max-width: 700px) {
  :root { --header-h:64px; }
  .hide-mobile { display:none !important; }
  .topbar { padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right)); padding-top:env(safe-area-inset-top); }
  .brand__copy strong { font-size:10px; }
  .screen { padding:28px max(16px,env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  .home-screen { padding-top:38px; }
  .hero-title { font-size:clamp(3.4rem,17vw,5.5rem); line-height:.82; }
  .hero-title__zh { font-size:13px;letter-spacing:.22em; }
  .hero-lede { font-size:13px; }
  .hero-actions { align-items:flex-start; flex-direction:column; gap:10px; }
  .primary-button { width:100%; }
  .hero-shortcuts { gap:10px; }
  .hero-visual { aspect-ratio:1/1; }
  .hero-visual__image { inset:4% 0; }
  .hero-visual__image img { object-position:center; }
  .signal-card { right:1%;bottom:8%; }
  .section-heading { align-items:start; }
  .section-heading__aside { display:none; }
  .mission-board { padding-top:56px; }
  .mission-card { min-height:212px;padding:19px; }
  .operator-strip { grid-template-columns:1fr; gap:18px; margin-top:48px;padding:20px 16px; }
  .rank-chip { position:absolute;right:32px; }
  .operator-stats { grid-template-columns:repeat(2,1fr); }
  .operator-stats > div { padding:12px;border-left:0;border-top:1px solid var(--line); }
  .operator-stats > div:nth-child(odd) { padding-left:0; }
  .site-footer { display:grid;line-height:1.5; }
  .game-hud { position:sticky;z-index:50;top:var(--header-h);grid-template-columns:auto 1fr;gap:15px;padding:10px 16px;background:rgba(7,7,12,.94); }
  .hud-progress { align-self:center; }
  .hud-stats { grid-column:1/-1;justify-content:space-between;padding-top:8px;border-top:1px solid var(--line); }
  .hud-stats div { min-width:0; }
  .game-layout { padding:14px 12px 210px; }
  .intel-panel { grid-template-columns:auto 1fr auto;padding:12px; }
  .intel-copy { min-width:0; }
  .intel-copy p,.risk-meter { display:none; }
  .threat-orbit { width:58px;height:58px; }
  .threat-orbit__inner { inset:17px; }
  .threat-orbit span { font-size:13px; }
  .timer-block strong { font-size:16px; }
  .question-terminal { padding:23px 17px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,10px 100%,0 calc(100% - 10px)); }
  .question-context { margin-top:22px; }
  .question-copy h2 { font-size:clamp(20px,6.4vw,28px); }
  .choice-grid { grid-template-columns:1fr; }
  .answer-option { min-height:58px; }
  .dual-grid { grid-template-columns:1fr; }
  .dual-submit { grid-column:auto;justify-self:stretch; }
  .question-footer { gap:10px; }
  .question-footer span:nth-child(2),.question-footer span:nth-child(3) { display:none; }
  .question-footer__status { margin-left:auto; }
  .tool-panel { grid-template-columns:repeat(3,1fr);padding:12px; }
  .tool-button { display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:74px;padding:8px;text-align:center; }
  .tool-button__icon { width:26px;height:26px;font-size:13px; }
  .tool-button span:nth-child(2) small,.tool-button > b { display:none; }
  .tool-button strong { font-size:8px; }
  .tool-warning { display:none; }
  .feedback-drawer { grid-template-columns:1fr auto; gap:12px; min-height:0; padding:13px 14px calc(13px + env(safe-area-inset-bottom)); }
  .feedback-drawer__status { min-width:0; }
  .feedback-drawer__explanation { grid-column:1/-1;grid-row:2;padding:10px 0 0;border-left:0;border-top:1px solid var(--line); }
  .feedback-drawer .primary-button { grid-column:2;grid-row:1; width:auto;min-height:46px;padding:0 16px; }
  .feedback-drawer .primary-button svg { display:none; }
  .feedback-icon { width:36px;height:36px; }
  .result-screen { padding-top:30px; }
  .result-hero { display:grid;gap:22px;padding:55px 24px 25px; }
  .result-grade { width:90px;height:98px;flex-basis:auto;font-size:60px; }
  .result-score-card dl { gap:8px; }
  .result-score-card dl div { padding:0 7px; }
  .result-analysis,.result-debrief,.result-score-card { padding:22px 18px; }
  .mastery-row { grid-template-columns:90px 1fr 35px;gap:8px; }
  .result-actions { align-items:stretch;flex-direction:column; }
  .modal { padding:35px 20px 24px; }
  .modal__actions { align-items:stretch;flex-direction:column; }
}

@media (max-width: 390px) {
  .brand__copy { display:none; }
  .hero-title { font-size:16vw; }
  .hero-visual { min-height:330px; }
  .mission-card { grid-template-columns:44px 1fr; }
  .mission-card__skills { display:none; }
  .game-layout { padding-inline:8px; }
  .intel-panel { gap:10px; }
  .context-speaker { overflow-wrap:anywhere; }
}

@media (hover: none), (pointer: coarse) {
  body,button,a,input,[role="button"] { cursor:auto; }
  .cursor { display:none; }
  .world__glow { display:none; }
  .magnetic { transform:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .world__noise,.data-rain,.cursor { display:none; }
}

@media (prefers-contrast: more) {
  :root { --line:rgba(255,255,255,.42); --muted:#c1c4ce; --dim:#9195a2; }
  .world__scanlines,.world__noise { display:none; }
}