:root {
  --ink: #090a09;
  --ink-2: #0e100e;
  --panel: #111411;
  --panel-2: #161a16;
  --paper: #f2f1e7;
  --muted: #90968b;
  --line: rgba(221, 232, 212, .16);
  --line-soft: rgba(221, 232, 212, .08);
  --yellow: #f0b90b;
  --yellow-soft: #ffd66b;
  --green: #77f7b2;
  --red: #ff5366;
  --violet: #c58cff;
  --mono: "DM Mono", monospace;
  --display: "Orbitron", sans-serif;
  --body: "Space Grotesk", system-ui, sans-serif;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--body);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--ink); color: var(--paper); }
body::selection { color: var(--ink); background: var(--yellow); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 120; padding: 10px 13px; color: var(--ink); background: var(--yellow); font: 700 10px var(--mono); letter-spacing: .06em; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus-visible { transform: translateY(0); }
.anchor-target { display: block; position: relative; top: -74px; visibility: hidden; }
.page-noise { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode: screen; }

.site-header { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1180px, calc(100% - 48px)); min-height: 74px; margin: 0 auto; border-bottom: 1px solid var(--line-soft); background: rgba(9, 10, 9, .82); backdrop-filter: blur(14px); }
.site-brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-sigil { display: grid; place-items: center; width: 32px; height: 32px; color: var(--ink); background: var(--yellow); clip-path: polygon(0 0, 100% 0, 100% 76%, 72% 100%, 0 100%); font: 900 16px/1 var(--display); }
.brand-copy { display: grid; gap: 3px; }
.brand-copy b { font: 800 12px/1 var(--display); letter-spacing: .08em; }
.brand-copy small { color: var(--muted); font: 500 8px/1 var(--mono); letter-spacing: .12em; }
.site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.site-nav a { position: relative; color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: .14em; transition: color .2s ease; }
.site-nav a::after { content: ""; position: absolute; right: 0; bottom: -9px; left: 0; height: 1px; background: var(--yellow); transform: scaleX(0); transform-origin: right; transition: transform .2s ease; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--paper); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; color: var(--yellow); background: rgba(17,17,19,.7); border: 1px solid rgba(240,185,11,.4); cursor: pointer; }
.nav-toggle-icon { display: grid; gap: 4px; width: 15px; }
.nav-toggle-icon i { display: block; height: 1px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:first-child { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:last-child { transform: translateY(-5px) rotate(-45deg); }
.header-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid rgba(240, 185, 11, .5); color: var(--yellow-soft); font: 600 9px/1 var(--mono); letter-spacing: .1em; transition: background .2s ease, color .2s ease; }
.header-cta:hover, .header-cta:focus-visible { color: var(--ink); background: var(--yellow); }
.header-cta b { font-size: 14px; line-height: .6; }
.status-dot, .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px rgba(119,247,178,.8); animation: pulse 1.4s infinite; }

.section-wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.hero { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr); align-items: center; gap: clamp(48px, 8vw, 112px); min-height: 690px; padding-top: 68px; padding-bottom: 74px; }
.kicker { display: flex; align-items: center; gap: 9px; color: var(--yellow-soft); font: 500 10px/1 var(--mono); letter-spacing: .13em; }
.kicker-line { width: 26px; height: 1px; background: var(--yellow); }
.hero h1 { margin: 24px 0 22px; color: var(--paper); font: 900 clamp(56px, 8.2vw, 118px)/.86 var(--display); letter-spacing: -.09em; }
.hero h1 em { color: var(--yellow); font-style: normal; text-shadow: 12px 12px 0 rgba(240,185,11,.08); }
.hero-lede { max-width: 475px; margin: 0; color: #b6b9b0; font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 160px; padding: 14px 16px; border: 1px solid var(--line); font: 700 10px/1 var(--mono); letter-spacing: .09em; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.button b { font-size: 16px; line-height: .5; }
.button-primary { color: var(--ink); background: var(--yellow); border-color: var(--yellow); box-shadow: 0 12px 28px rgba(240,185,11,.12); }
.button-primary:hover, .button-primary:focus-visible { transform: translateY(-2px); background: var(--yellow-soft); }
.button-ghost { color: var(--paper); background: rgba(255,255,255,.02); }
.button-ghost:hover, .button-ghost:focus-visible { border-color: var(--yellow); color: var(--yellow-soft); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 38px; color: #727970; font: 500 9px/1 var(--mono); letter-spacing: .09em; }
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }

.hero-console { position: relative; min-height: 430px; padding: 16px; border: 1px solid rgba(240,185,11,.38); background: #0d100e; overflow: hidden; isolation: isolate; box-shadow: 24px 24px 0 rgba(240,185,11,.04); }
.hero-console::before, .hero-console::after { content: ""; position: absolute; z-index: 2; width: 28px; height: 28px; border-color: var(--yellow); border-style: solid; pointer-events: none; }
.hero-console::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hero-console::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.console-scan { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(240,185,11,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(240,185,11,.08) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.console-scan::after { content: ""; position: absolute; inset: -20% -10%; background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(240,185,11,.12) 10px 11px); transform: rotate(-16deg); opacity: .2; }
.console-head, .console-foot { display: flex; align-items: center; justify-content: space-between; color: #8c9488; font: 500 9px/1 var(--mono); letter-spacing: .1em; }
.console-head b { color: var(--yellow-soft); font-weight: 500; }
.console-visual { position: relative; display: grid; place-items: center; min-height: 340px; }
.orbit { position: absolute; border: 1px solid rgba(240,185,11,.38); border-radius: 50%; transform: rotate(-22deg) skewX(-20deg); }
.orbit-one { width: 250px; height: 250px; border-right-color: transparent; border-bottom-color: rgba(255,83,102,.5); animation: spin 15s linear infinite; }
.orbit-two { width: 170px; height: 310px; border-left-color: transparent; border-top-color: rgba(119,247,178,.5); animation: spin-reverse 10s linear infinite; }
.orbit-core { position: relative; display: grid; place-items: center; width: 106px; height: 106px; border: 1px solid var(--yellow); background: rgba(240,185,11,.08); box-shadow: 0 0 40px rgba(240,185,11,.16), inset 0 0 20px rgba(240,185,11,.08); transform: rotate(45deg); }
.orbit-core::before, .orbit-core::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(240,185,11,.4); }
.orbit-core::after { inset: 22px; border-color: rgba(119,247,178,.55); }
.orbit-core span, .orbit-core small { position: relative; z-index: 1; transform: rotate(-45deg); }
.orbit-core span { margin-top: -3px; color: var(--paper); font: 800 31px/1 var(--display); letter-spacing: -.08em; }
.orbit-core small { margin-top: -13px; color: var(--yellow); font: 500 7px/1 var(--mono); letter-spacing: .16em; }
.signal { position: absolute; padding: 6px 8px; border-left: 1px solid var(--yellow); color: #8c9488; font: 500 8px/1.4 var(--mono); letter-spacing: .1em; }
.signal b { color: var(--paper); font-weight: 500; }
.signal-a { top: 50px; left: 0; }
.signal-b { right: 4px; bottom: 66px; border-color: var(--green); }
.signal-c { right: 20px; top: 72px; border-color: var(--red); }
.signal-c b { color: var(--red); }
.console-foot { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.console-foot strong { margin-left: auto; margin-right: 16px; color: var(--red); font-weight: 500; }
.console-arrow { color: var(--yellow); font-size: 17px; }

.ticker { display: grid; grid-template-columns: repeat(4, 1fr); width: min(1180px, calc(100% - 48px)); margin: 0 auto 110px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ticker > div { min-height: 102px; padding: 20px 22px; border-right: 1px solid var(--line); }
.ticker > div:last-child { border-right: 0; }
.ticker-label, .ticker small { display: block; color: #707970; font: 500 9px/1 var(--mono); letter-spacing: .13em; }
.ticker strong { display: block; margin: 12px 0 7px; color: var(--paper); font: 700 12px/1 var(--display); letter-spacing: .04em; }
.ticker small { color: var(--yellow); font-size: 8px; }

.play-section { padding-bottom: 130px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-heading h2, .vault-copy h2, .intel-copy h2 { margin: 18px 0 0; color: var(--paper); font: 800 clamp(32px, 4.8vw, 66px)/.94 var(--display); letter-spacing: -.07em; }
.section-heading h2 span, .intel-copy h2 span { color: var(--yellow); }
.heading-note { display: grid; grid-template-columns: 8px auto; align-items: center; column-gap: 8px; min-width: 170px; padding-bottom: 3px; color: var(--green); font: 500 9px/1 var(--mono); letter-spacing: .1em; }
.heading-note small { grid-column: 2; margin-top: 8px; color: #707970; font-size: 8px; }
.game-frame { position: relative; padding: 12px; border: 1px solid var(--line); background: #0b0d0b; }
.game-frame::before, .game-frame::after { content: ""; position: absolute; z-index: 5; width: 22px; height: 22px; pointer-events: none; border-color: var(--yellow); border-style: solid; }
.game-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.game-frame::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.frame-label { position: absolute; z-index: 7; top: -23px; color: #6f776d; font: 500 8px/1 var(--mono); letter-spacing: .12em; }
.frame-label-left { left: 0; }
.frame-label-right { right: 0; }
.frame-label-right span { display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }
.game-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 13px; color: #707970; font: 500 8px/1 var(--mono); letter-spacing: .1em; }
.game-caption p { margin: 0; color: #afb5aa; font-family: var(--body); font-size: 11px; letter-spacing: 0; }

/* The embedded game canvas and HUD */
.game-shell { position: relative; width: 100%; height: clamp(620px, 64vw, 760px); min-height: 620px; overflow: hidden; background: #050605; isolation: isolate; }
.game-shell:after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(6,6,8,.78), transparent 24%, transparent 76%, rgba(6,6,8,.78)); }
#gameCanvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.scanlines { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .08; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.08) 3px 4px); }
.vignette { position: absolute; inset: 0; z-index: 8; pointer-events: none; box-shadow: inset 0 0 160px rgba(6,6,8,.8), inset 0 -100px 120px rgba(6,6,8,.6); mix-blend-mode: multiply; }
.top-hud, .left-hud, .objective-card, .weapon-hud, .center-readout, .hint-bar, .floor-tag { position: absolute; z-index: 10; }
.top-hud { top: 22px; left: 30px; right: 30px; display: grid; grid-template-columns: 1fr minmax(260px, 390px) 1fr; align-items: center; gap: 22px; }
.brand-block { display: flex; align-items: center; gap: 12px; }
.brand-mark { position: relative; display: grid; place-items: center; width: 38px; height: 38px; color: var(--yellow); font: 700 11px var(--display); border: 1px solid rgba(240,185,11,.4); background: rgba(17,17,19,.7); box-shadow: 0 0 24px rgba(240,185,11,.1); }
.brand-mark i { position: absolute; right: -5px; bottom: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.eyebrow { margin: 0 0 5px; color: var(--yellow); font: 700 10px var(--display); letter-spacing: .14em; }
.brand-block h1 { margin: 0; font: 800 17px var(--display); letter-spacing: .04em; }
.wave-block { justify-self: center; width: 100%; max-width: 390px; }
.mini-label { display: block; color: var(--muted); font: 600 10px var(--display); letter-spacing: .12em; }
.mini-label b { margin-left: 7px; color: var(--yellow-soft); }
.wave-block strong { display: block; margin: 4px 0 7px; color: #ededee; font: 600 11px var(--display); letter-spacing: .12em; }
.wave-track, .stat-track, .ammo-track { height: 4px; overflow: hidden; background: rgba(244,244,244,.08); border-radius: 99px; }
.wave-track span, .stat-track span, .ammo-track span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .16s; background: linear-gradient(90deg, var(--yellow-soft), var(--red)); box-shadow: 0 0 16px rgba(248,200,74,.4); }
.top-actions { justify-self: end; display: flex; gap: 8px; }
.icon-button { width: 36px; height: 36px; color: var(--muted); background: rgba(17,17,19,.8); border: 1px solid rgba(119,119,127,.25); border-radius: 2px; cursor: pointer; transition: .2s; }
.icon-button:hover, .icon-button:focus-visible { color: var(--yellow); border-color: rgba(240,185,11,.6); box-shadow: 0 0 16px rgba(240,185,11,.14); }
.left-hud { top: 96px; left: 30px; width: 205px; }
.operator-card, .stat-card, .objective-card, .weapon-hud { background: linear-gradient(145deg, rgba(18,18,20,.85), rgba(13,13,15,.8)); border: 1px solid rgba(103,103,109,.18); box-shadow: 0 10px 32px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.operator-card { padding: 12px 13px 11px; border-left: 2px solid var(--yellow); }
.operator-tag, .stat-row span, .weapon-type, .objective-kicker { color: var(--muted); font: 600 9px var(--display); letter-spacing: .13em; }
.operator-card strong { display: block; margin: 7px 0 4px; font: 700 14px var(--display); letter-spacing: .04em; }
.operator-state { color: var(--green); font-size: 10px; }
.operator-state i, .pulse-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 1.4s infinite; }
.stat-card { margin-top: 8px; padding: 10px 12px; }
.stat-row { display: flex; justify-content: space-between; align-items: baseline; }
.stat-row b { font: 700 15px var(--display); }
.hp-card .stat-row b { color: var(--red); }.armor-card .stat-row b { color: #7c91ff; }.stamina-card .stat-row b { color: var(--green); }
.stat-track { margin-top: 8px; }.stat-track span { background: var(--red); box-shadow: 0 0 12px rgba(255,83,102,.35); }.armor-card .stat-track span { background: #7c91ff; box-shadow: 0 0 12px rgba(124,145,255,.35); }.stamina-card .stat-track span { background: var(--green); box-shadow: 0 0 12px rgba(46,189,133,.35); }
.stat-card small { display: block; margin-top: 7px; color: #696970; font-size: 9px; line-height: 1.3; }
.objective-card { left: 30px; bottom: 73px; width: 235px; padding: 13px 14px; border-top: 1px solid rgba(248,200,74,.3); }
.objective-kicker { display: flex; align-items: center; color: #9c9ca3; }.objective-kicker b { margin-left: auto; color: var(--yellow-soft); font: 700 10px var(--display); }
.objective-card > strong { display: block; margin: 10px 0 4px; font: 700 15px var(--display); letter-spacing: .02em; }.objective-card p { margin: 0; color: #9a9aa1; font-size: 11px; line-height: 1.45; }
.kill-line { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.08); color: #77777f; font: 600 9px var(--display); letter-spacing: .08em; }.kill-line b { color: #fafafa; font-size: 12px; }
.weapon-hud { right: 30px; bottom: 70px; width: 230px; padding: 13px 14px 12px; border-right: 2px solid var(--yellow); text-align: right; }.weapon-meta { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; }.weapon-type { color: var(--yellow); font-size: 8px; }.weapon-meta strong { font: 800 15px var(--display); }.weapon-meta small { color: var(--green); font: 700 8px var(--display); }.ammo-count { display: flex; justify-content: flex-end; align-items: baseline; margin: 9px 0 7px; }.ammo-count b { font: 800 44px/.9 var(--display); letter-spacing: -.06em; }.ammo-count span { margin-left: 7px; color: #9b9ba2; font: 600 15px var(--display); }.ammo-count em { color: var(--yellow); font-style: normal; }.ammo-track span { background: var(--yellow); box-shadow: 0 0 15px rgba(240,185,11,.4); }
.armory-hud { position: absolute; z-index: 11; right: 30px; top: 101px; width: 272px; padding: 11px 12px 10px; border: 1px solid rgba(240,185,11,.28); border-left: 2px solid var(--yellow); background: linear-gradient(145deg, rgba(17,18,15,.92), rgba(9,10,10,.82)); box-shadow: 0 12px 28px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(8px); }
.armory-head { display: flex; align-items: baseline; justify-content: space-between; color: #a5aa9f; font: 700 9px var(--display); letter-spacing: .11em; }.armory-head b { color: var(--yellow); font: 700 10px var(--display); letter-spacing: .04em; }.armory-head i { font-style: normal; }
.armory-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 9px; }.turret-card { display: grid; grid-template-rows: 27px auto; gap: 4px; min-width: 0; padding: 7px 6px 6px; color: #8d938a; text-align: left; border: 1px solid rgba(142,151,137,.18); background: rgba(255,255,255,.025); cursor: pointer; transition: .18s; }.turret-card:hover, .turret-card:focus-visible, .turret-card.active { color: var(--paper); border-color: rgba(240,185,11,.65); background: rgba(240,185,11,.1); box-shadow: 0 0 18px rgba(240,185,11,.11); outline: none; }.turret-glyph { display: grid; place-items: center; width: 25px; height: 25px; color: var(--yellow); border: 1px solid rgba(240,185,11,.38); font: 700 14px var(--display); }.turret-card b { display: block; overflow: hidden; font: 700 9px var(--display); white-space: nowrap; text-overflow: ellipsis; }.turret-card small { display: block; margin-top: 3px; color: #727a70; font: 500 8px var(--body); white-space: nowrap; }.armory-hud > small { display: block; margin-top: 8px; color: #6f796e; font: 500 9px var(--body); }
.center-readout { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 170px; text-align: center; pointer-events: none; }.center-readout span { display: block; }.center-readout #hitMarker { height: 18px; color: var(--red); opacity: 0; font: 800 25px/1 var(--display); text-shadow: 0 0 12px var(--red); }.center-readout #damageReadout { margin-top: 5px; color: #a2a2aa; font: 700 8px var(--display); letter-spacing: .18em; }
.hint-bar { bottom: 23px; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; color: #6e8294; font: 600 9px var(--display); letter-spacing: .1em; white-space: nowrap; }.hint-bar b { color: #f4f4f5; }.floor-tag { right: 30px; top: 101px; color: #77777e; font: 600 9px var(--display); letter-spacing: .1em; }.pulse-dot { background: var(--red); box-shadow: 0 0 10px var(--red); }
.overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(6,6,8,.78); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .25s; }.overlay.active { opacity: 1; pointer-events: auto; }
.panel { position: relative; width: min(600px, 100%); padding: 34px 38px; background: linear-gradient(145deg, rgba(23,23,25,.95), rgba(13,13,15,.96)); border: 1px solid rgba(103,103,109,.35); box-shadow: 0 28px 90px rgba(0,0,0,.7), inset 0 1px rgba(255,255,255,.06); overflow: hidden; }
.start-panel::after { content: ""; position: absolute; right: -100px; top: -90px; width: 280px; height: 280px; border: 1px solid rgba(240,185,11,.2); border-radius: 50%; box-shadow: 0 0 0 30px rgba(240,185,11,.04), 0 0 0 68px rgba(240,185,11,.02); pointer-events: none; }
.panel-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(240,185,11,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(240,185,11,.06) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(135deg, #000, transparent 65%); }
.panel-topline { position: relative; z-index: 1; display: flex; justify-content: space-between; margin-bottom: 30px; color: #818188; font: 600 9px var(--display); letter-spacing: .12em; }.panel-topline b { color: var(--red); }.panel h2 { position: relative; z-index: 1; margin: 0; color: #fafafa; font: 900 clamp(46px, 8vw, 78px)/.88 var(--display); letter-spacing: -.08em; }.panel h2 em { color: var(--yellow); font-style: normal; text-shadow: 0 0 28px rgba(240,185,11,.3); }.panel-copy { position: relative; z-index: 1; max-width: 420px; margin: 19px 0 0; color: #b0b0b6; font-size: 14px; line-height: 1.65; }
.loadout-row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }.loadout-row > div { padding: 11px 12px; border: 1px solid rgba(103,103,109,.25); background: rgba(255,255,255,.02); }.loadout-row span, .briefing span { display: block; color: var(--yellow); font: 600 8px var(--display); letter-spacing: .12em; }.loadout-row strong { display: block; margin: 6px 0 4px; font: 700 11px var(--display); }.loadout-row small { color: #77777e; font-size: 9px; }.briefing { position: relative; z-index: 1; display: grid; grid-template-columns: 24px 1fr; gap: 9px 10px; margin-top: 20px; color: #b0b0b6; font-size: 11px; line-height: 1.35; }.briefing span { padding-top: 2px; color: var(--yellow-soft); }.briefing p { margin: 0; }
.primary-button, .secondary-button { position: relative; z-index: 1; cursor: pointer; border-radius: 2px; transition: transform .2s, box-shadow .2s, border-color .2s; }.primary-button { display: flex; align-items: center; justify-content: space-between; width: min(265px, 100%); margin-top: 27px; padding: 15px 17px; color: #041018; background: var(--yellow); border: 0; box-shadow: 0 12px 30px rgba(240,185,11,.18); font: 800 11px var(--display); letter-spacing: .08em; }.primary-button:hover, .primary-button:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(240,185,11,.33); }.primary-button b { font-size: 18px; }.panel-foot { display: block; position: relative; z-index: 1; margin-top: 13px; color: #696970; font-size: 10px; }.compact { width: min(420px, 100%); text-align: center; }.compact .primary-button { margin: 28px auto 0; }.compact .panel-copy { margin-left: auto; margin-right: auto; }.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 23px; text-align: left; }.result-grid > div { padding: 10px 12px; border: 1px solid rgba(103,103,109,.18); background: rgba(255,255,255,.02); }.result-grid span { display: block; color: #77777f; font: 600 8px var(--display); }.result-grid strong { display: block; margin-top: 6px; color: var(--yellow); font: 700 22px var(--display); }.corner-note { position: absolute; right: 30px; bottom: 26px; color: #696970; font: 600 9px var(--display); letter-spacing: .12em; }
.vault-panel { position: relative; z-index: 1; margin-top: 13px; padding: 11px 12px; text-align: left; border: 1px solid rgba(240,185,11,.17); background: rgba(6,21,33,.6); }.vault-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--yellow); font: 600 8px var(--display); letter-spacing: .1em; }.vault-panel-head a { max-width: 125px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font: 600 8px var(--body); letter-spacing: 0; }.vault-stats { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; color: #77777f; font: 600 8px var(--display); }.vault-stats span { display: flex; flex-direction: column; gap: 5px; }.vault-stats b { color: var(--paper); font-size: 11px; }.vault-status { min-height: 18px; margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }.vault-status[data-tone="success"] { color: var(--green); }.vault-status[data-tone="error"] { color: var(--red); }.vault-actions { display: flex; gap: 7px; margin-top: 10px; }.vault-actions button { margin-top: 0 !important; width: auto; flex: 1; padding: 10px 11px; font-size: 9px; }.secondary-button { display: flex; align-items: center; justify-content: center; padding: 10px 11px; color: var(--yellow); background: rgba(17,17,19,.8); border: 1px solid rgba(240,185,11,.4); font: 800 9px var(--display); letter-spacing: .06em; }.secondary-button:hover, .secondary-button:focus-visible { border-color: var(--yellow); box-shadow: 0 0 16px rgba(240,185,11,.15); }.vault-actions button:disabled { cursor: not-allowed; opacity: .45; transform: none; box-shadow: none; }

.protocol { padding-bottom: 140px; }.heading-copy { max-width: 310px; margin: 0 0 4px; color: #9ca39a; font-size: 13px; line-height: 1.65; }.protocol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.protocol-card { position: relative; min-height: 290px; padding: 28px 26px 22px; border: 1px solid var(--line); background: #0c100d; overflow: hidden; }.protocol-card::after { content: ""; position: absolute; right: -34px; bottom: -50px; width: 150px; height: 150px; border: 1px solid rgba(240,185,11,.14); transform: rotate(45deg); }.protocol-card.featured { border-color: rgba(240,185,11,.5); background: linear-gradient(145deg, rgba(240,185,11,.1), #0c100d 55%); }.card-index { color: var(--yellow); font: 500 10px var(--mono); letter-spacing: .1em; }.card-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 34px 0 24px; border: 1px solid rgba(240,185,11,.45); color: var(--yellow); }.icon-crosshair { font: 500 36px/1 var(--mono); }.icon-wave { display: flex; align-items: center; justify-content: center; gap: 4px; }.icon-wave i { display: block; width: 4px; background: var(--yellow); }.icon-wave i:nth-child(1) { height: 13px; }.icon-wave i:nth-child(2) { height: 27px; }.icon-wave i:nth-child(3) { height: 18px; }.icon-arrow { font: 500 26px/1 var(--mono); }.protocol-card h3 { margin: 0; color: var(--paper); font: 700 18px var(--display); letter-spacing: -.02em; }.protocol-card p { max-width: 280px; margin: 12px 0 0; color: #929990; font-size: 12px; line-height: 1.6; }.card-footer { position: absolute; right: 26px; bottom: 22px; color: #657066; font: 500 8px var(--mono); letter-spacing: .12em; }

.vault-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr); align-items: center; gap: 80px; min-height: 520px; padding: 64px 0 112px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.vault-copy p { max-width: 450px; margin: 28px 0 26px; color: #9ca39a; font-size: 15px; line-height: 1.7; }.vault-copy h2 em { color: var(--yellow); font-style: normal; }.text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--yellow); font: 600 10px var(--mono); letter-spacing: .12em; }.text-link b { font-size: 16px; transition: transform .2s; }.text-link:hover b { transform: translate(3px, -3px); }
.vault-object { position: relative; min-height: 360px; padding: 20px; border: 1px solid rgba(240,185,11,.4); background: radial-gradient(circle at 50% 48%, rgba(240,185,11,.11), transparent 46%), #0d110e; overflow: hidden; }.vault-object::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(119,247,178,.2); clip-path: polygon(0 0, 100% 0, 100% 73%, 77% 100%, 0 100%); }.vault-object-top, .vault-object-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; color: #788077; font: 500 8px var(--mono); letter-spacing: .12em; }.vault-object-top b { color: var(--green); }.vault-ring { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 190px; height: 190px; border: 1px solid var(--yellow); transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 14px rgba(240,185,11,.03), 0 0 0 38px rgba(240,185,11,.025), 0 0 36px rgba(240,185,11,.17); }.vault-ring::before, .vault-ring::after { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(240,185,11,.45); }.vault-ring::after { inset: 44px; border-color: rgba(119,247,178,.55); }.vault-ring span, .vault-ring small { position: relative; z-index: 1; transform: rotate(-45deg); }.vault-ring span { color: var(--paper); font: 800 27px var(--display); letter-spacing: -.08em; }.vault-ring small { margin-top: -10px; color: var(--yellow); font: 500 7px/1.4 var(--mono); text-align: center; letter-spacing: .13em; }.vault-object-foot { position: absolute; right: 20px; bottom: 20px; left: 20px; }.vault-object-foot span { display: grid; gap: 5px; }.vault-object-foot b { color: var(--paper); font-weight: 500; }.vault-object-foot .green-text { color: var(--green); }

.intel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; padding-top: 134px; padding-bottom: 140px; }.intel-copy p { max-width: 380px; margin: 26px 0 0; color: #9ca39a; line-height: 1.7; }.intel-list { align-self: end; border-top: 1px solid var(--line); }.intel-list > div { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; min-height: 86px; border-bottom: 1px solid var(--line); }.intel-list span { color: var(--yellow); font: 500 10px var(--mono); }.intel-list b { color: var(--paper); font: 600 14px var(--display); }.intel-list small { color: #838c82; font-size: 11px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: min(1180px, calc(100% - 48px)); min-height: 110px; margin: 0 auto; border-top: 1px solid var(--line); color: #69736a; font: 500 9px var(--mono); letter-spacing: .1em; }.site-footer .site-brand { color: var(--paper); }.site-footer .brand-sigil { width: 27px; height: 27px; font-size: 13px; }

@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } }
@keyframes spin { to { transform: rotate(338deg) skewX(-20deg); } }
@keyframes spin-reverse { to { transform: rotate(-382deg) skewX(-20deg); } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 80px; gap: 52px; }.hero-copy { max-width: 680px; }.hero-console { min-height: 390px; max-width: 620px; width: 100%; margin-left: auto; }.console-visual { min-height: 300px; }
  .intel { grid-template-columns: 1fr; gap: 50px; }.intel-list { width: 100%; }
}
@media (max-width: 760px) {
  .site-header, .section-wrap, .ticker, .site-footer { width: min(100% - 28px, 1180px); }.site-header { min-height: 64px; }.site-nav { display: none; }.header-cta { padding: 9px 10px; font-size: 8px; }.brand-copy b { font-size: 10px; }.brand-copy small { font-size: 7px; }
  .hero { padding-top: 58px; padding-bottom: 56px; }.hero h1 { margin-top: 20px; font-size: clamp(50px, 16vw, 82px); }.hero-lede { font-size: 14px; }.hero-meta { margin-top: 26px; font-size: 8px; }.hero-console { min-height: 330px; padding: 12px; }.console-visual { min-height: 250px; }.orbit-one { width: 195px; height: 195px; }.orbit-two { width: 136px; height: 240px; }.orbit-core { width: 82px; height: 82px; }.orbit-core span { font-size: 25px; }.signal-a { top: 35px; }.signal-c { top: 45px; }
  .ticker { grid-template-columns: 1fr 1fr; margin-bottom: 84px; }.ticker > div { min-height: 88px; padding: 16px 14px; }.ticker > div:nth-child(2) { border-right: 0; }.ticker > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.ticker strong { font-size: 10px; }
  .play-section { padding-bottom: 100px; }.section-heading { align-items: start; flex-direction: column; margin-bottom: 22px; }.section-heading h2, .vault-copy h2, .intel-copy h2 { font-size: clamp(31px, 10vw, 52px); }.heading-note { padding-bottom: 0; }.game-frame { padding: 7px; }.frame-label { top: -18px; font-size: 7px; }.game-shell { min-height: 640px; height: 640px; }.game-caption { align-items: start; flex-direction: column; gap: 9px; margin-top: 12px; }.game-caption p { order: 3; }
  .protocol { padding-bottom: 100px; }.heading-copy { margin-top: -6px; }.protocol-grid { grid-template-columns: 1fr; }.protocol-card { min-height: 220px; }.protocol-card .card-icon { margin-top: 24px; margin-bottom: 18px; }.card-footer { bottom: 19px; }
  .vault-section { grid-template-columns: 1fr; gap: 48px; min-height: 0; padding: 76px 0 86px; }.vault-copy p { margin-top: 20px; font-size: 14px; }.vault-object { min-height: 300px; }.vault-ring { width: 155px; height: 155px; }
  .intel { padding-top: 100px; padding-bottom: 96px; }.intel-list > div { grid-template-columns: 30px 1fr; min-height: 82px; }.intel-list small { grid-column: 2; margin-top: -11px; }.site-footer { align-items: start; flex-direction: column; gap: 16px; padding: 28px 0; }
}
@media (max-width: 470px) {
  .header-cta { gap: 5px; }.header-cta .status-dot { display: none; }.hero-actions { align-items: stretch; flex-direction: column; }.button { width: 100%; }.hero-console { min-height: 300px; }.console-head, .console-foot { font-size: 7px; }.signal { font-size: 7px; }.game-shell { min-height: 660px; height: 660px; }.top-hud { top: 13px; left: 14px; right: 14px; grid-template-columns: 1fr auto; }.brand-block h1 { font-size: 13px; }.wave-block { grid-column: 1/-1; grid-row: 2; max-width: none; margin-top: 4px; }.top-actions { align-self: start; }.left-hud { top: 90px; left: 14px; width: 135px; }.operator-card { display: none; }.stat-card { padding: 8px 9px; margin-top: 6px; }.stat-card small { display: none; }.stat-row span { font-size: 8px; }.stat-row b { font-size: 13px; }.objective-card { left: 14px; bottom: 60px; width: 162px; padding: 10px 11px; }.objective-card > strong { font-size: 12px; margin: 7px 0 3px; }.objective-card p { display: none; }.kill-line { margin-top: 8px; padding-top: 7px; }.weapon-hud { right: 14px; bottom: 58px; width: 150px; padding: 10px 10px; }.ammo-count b { font-size: 35px; }.ammo-count span { font-size: 12px; }.weapon-type { font-size: 7px; }.weapon-meta strong { font-size: 12px; }.weapon-meta small { font-size: 7px; }.armory-hud { top: auto; right: 14px; bottom: 148px; width: 150px; padding: 8px; }.armory-head { font-size: 7px; }.armory-head b { font-size: 8px; }.armory-slots { gap: 3px; }.turret-card { padding: 5px 4px; grid-template-rows: 22px auto; }.turret-glyph { width: 20px; height: 20px; font-size: 10px; }.turret-card b { font-size: 7px; }.turret-card small { font-size: 6px; }.armory-hud > small { margin-top: 5px; font-size: 7px; line-height: 1.2; }.hint-bar { bottom: 16px; gap: 7px; font-size: 6px; }.floor-tag { right: 14px; top: 88px; font-size: 7px; }.panel { padding: 23px 18px; max-height: calc(100% - 28px); overflow: auto; }.panel-topline { margin-bottom: 20px; font-size: 7px; }.panel h2 { font-size: clamp(39px, 13vw, 64px); }.loadout-row { grid-template-columns: 1fr; margin-top: 17px; }.loadout-row small { display: none; }.briefing { font-size: 10px; }.corner-note { display: none; }.panel-foot { font-size: 9px; }.vault-actions { flex-direction: column; }
}

/* Immersive battle view: the scene carries the page, the controls stay quiet. */
.game-shell:after { background: linear-gradient(90deg, rgba(4,5,5,.28), transparent 26%, transparent 74%, rgba(4,5,5,.3)); }
.top-hud { z-index: 12; }
.left-hud { top: 86px; left: 30px; width: auto; display: flex; gap: 5px; }
.left-hud .operator-card { display: none; }
.left-hud .stat-card { width: 92px; min-height: 34px; margin: 0; padding: 7px 8px; background: rgba(8,10,9,.54); backdrop-filter: blur(4px); }
.left-hud .stat-card small { display: none; }
.left-hud .stat-row span { font-size: 7px; }
.left-hud .stat-row b { font-size: 12px; }
.left-hud .stat-track { margin-top: 4px; height: 2px; }
.objective-card { left: 30px; bottom: 64px; width: 198px; padding: 10px 12px; background: rgba(7,9,8,.76); }
.objective-card p { display: none; }
.objective-card > strong { margin: 7px 0 3px; font-size: 13px; }
.kill-line { margin-top: 8px; padding-top: 7px; }
.weapon-hud { right: 30px; bottom: 64px; width: 190px; padding: 10px 12px; background: rgba(7,9,8,.76); }
.ammo-count { margin: 6px 0 5px; }
.ammo-count b { font-size: 36px; }
.hint-bar { display: none; }
.floor-tag { top: 112px; right: 30px; color: #d4d8ca; }
.scene-readout { position: absolute; z-index: 10; top: 29%; left: 30px; display: grid; gap: 5px; max-width: 210px; padding: 10px 14px; border-left: 3px solid var(--red); background: linear-gradient(90deg, rgba(8,9,9,.78), rgba(8,9,9,.08)); backdrop-filter: blur(3px); }
.scene-readout span { color: #c4c9be; font: 600 8px var(--mono); letter-spacing: .12em; }
.scene-readout strong { color: var(--red); font: 800 20px var(--display); letter-spacing: .04em; }
.scene-readout small { color: #c4c9be; font: 600 9px var(--mono); }
.armory-toggle { position: absolute; z-index: 13; right: 30px; bottom: 24px; display: flex; align-items: center; gap: 9px; padding: 8px 11px; color: var(--yellow); background: rgba(8,9,8,.82); border: 1px solid rgba(240,185,11,.5); font: 700 8px var(--display); letter-spacing: .08em; cursor: pointer; }
.armory-toggle b { color: var(--paper); font: 700 9px var(--mono); }
.armory-toggle.is-open { background: var(--yellow); color: #11130e; }
.armory-toggle.is-open b { color: #11130e; }
.armory-hud { top: auto; right: 30px; bottom: 56px; width: 330px; max-height: 270px; transform: translateY(calc(100% - 30px)); opacity: .08; transition: transform .22s ease, opacity .22s ease; }
.armory-hud.is-open { transform: translateY(0); opacity: 1; }
.center-readout #damageReadout { opacity: .7; }

@media (max-width: 760px) {
  .left-hud { top: 80px; left: 14px; right: auto; display: flex; gap: 4px; }
  .left-hud .stat-card { width: 58px; min-height: 28px; padding: 5px 6px; }
  .left-hud .stat-row span { font-size: 6px; }
  .left-hud .stat-row b { font-size: 10px; }
  .left-hud .stat-track { display: none; }
  .floor-tag { top: 105px; right: 14px; font-size: 6px; }
  .scene-readout { top: 31%; left: 14px; max-width: 170px; padding: 8px 10px; }
  .scene-readout strong { font-size: 17px; }
  .scene-readout small { font-size: 7px; }
  .objective-card { left: 14px; bottom: 58px; width: 142px; padding: 8px 9px; }
  .objective-card > strong { font-size: 11px; }
  .weapon-hud { right: 14px; bottom: 58px; width: 142px; padding: 8px 9px; }
  .ammo-count b { font-size: 31px; }
  .armory-toggle { right: 14px; bottom: 16px; padding: 7px 9px; }
  .armory-hud { left: 14px; right: 14px; bottom: 48px; width: auto; max-height: 260px; transform: translateY(calc(100% - 29px)); }
  .armory-hud.is-open { transform: translateY(0); }
}

@media (max-width: 470px) {
  .game-shell { min-height: 660px; height: 660px; }
  .armory-hud { left: 10px; right: 10px; bottom: 45px; }
  .armory-toggle { right: 10px; bottom: 13px; }
}

/* Editorial game cover treatment: make the first screen feel like a live encounter, not a dashboard. */
.hero-copy .kicker { color: var(--yellow); }
.hero h1 { max-width: 680px; font-size: clamp(58px, 8.8vw, 126px); }
.hero-lede { max-width: 510px; }
.hero-art { min-height: 470px; padding: 15px; background: #10130f; box-shadow: 18px 18px 0 rgba(240,185,11,.045); }
.hero-art::before { border-color: var(--yellow); }
.hero-art::after { border-color: var(--yellow); }
.art-topline, .art-bottom { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; color: #818a7e; font: 500 9px/1 var(--mono); letter-spacing: .1em; }
.art-topline b { color: var(--red); font-weight: 500; }
.art-topline b i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: pulse 1s infinite; }
.art-scene { position: relative; min-height: 372px; margin: 13px 0 12px; overflow: hidden; border: 1px solid rgba(221,232,212,.13); background: #050705; isolation: isolate; }
.art-scene::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(255,83,102,.04), transparent 30%, transparent 72%, rgba(240,185,11,.08)), radial-gradient(ellipse at 50% 46%, rgba(240,185,11,.17), transparent 28%), linear-gradient(180deg, rgba(7,10,7,.2), rgba(4,6,4,.88)); pointer-events: none; }
.art-scene::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .33; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(232,242,224,.07) 5px 6px); mix-blend-mode: screen; }
.scene-grid { position: absolute; inset: 41% -10% -25%; z-index: 0; transform: perspective(250px) rotateX(54deg); transform-origin: 50% 0; background-image: linear-gradient(rgba(240,185,11,.23) 1px, transparent 1px), linear-gradient(90deg, rgba(240,185,11,.15) 1px, transparent 1px); background-size: 34px 26px; opacity: .52; }
.scene-door { position: absolute; top: 40px; left: 50%; width: 164px; height: 203px; z-index: 0; transform: translateX(-50%); border: 1px solid rgba(240,185,11,.56); background: linear-gradient(90deg, rgba(240,185,11,.05), rgba(240,185,11,.21), rgba(240,185,11,.04)); box-shadow: 0 0 52px rgba(240,185,11,.13); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.scene-door::before, .scene-door::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(240,185,11,.3); }.scene-door::before { left: 22%; }.scene-door::after { right: 22%; }
.scene-light { position: absolute; top: 65px; left: 50%; z-index: 1; width: 105px; height: 9px; transform: translateX(-50%); background: var(--yellow); box-shadow: 0 0 34px rgba(240,185,11,.66); opacity: .82; }
.scene-shadow { position: absolute; left: 50%; bottom: 49px; z-index: 3; width: 128px; height: 246px; transform: translateX(-50%); filter: drop-shadow(0 0 17px rgba(255,83,102,.25)); }
.scene-shadow::before { content: ""; position: absolute; top: 0; left: 50%; width: 66px; height: 66px; transform: translateX(-50%); border: 2px solid rgba(255,83,102,.75); border-radius: 50%; background: #080909; box-shadow: inset 0 -4px 0 rgba(255,83,102,.18), 0 0 22px rgba(255,83,102,.23); }
.scene-shadow::after { content: ""; position: absolute; top: 58px; left: 50%; width: 116px; height: 184px; transform: translateX(-50%); background: #090b09; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); border: 1px solid rgba(119,247,178,.22); }
.scene-shadow i, .scene-shadow b { position: absolute; z-index: 2; top: 31px; width: 7px; height: 5px; background: var(--red); box-shadow: 0 0 13px var(--red); }
.scene-shadow i { left: 39px; }.scene-shadow b { right: 39px; }
.scene-crosshair { position: absolute; top: 50%; left: 50%; z-index: 6; width: 62px; height: 62px; transform: translate(-50%, -50%); border: 1px solid rgba(240,185,11,.65); border-radius: 50%; opacity: .9; }
.scene-crosshair::before, .scene-crosshair::after { content: ""; position: absolute; background: var(--yellow); }.scene-crosshair::before { top: 30px; left: -12px; width: 86px; height: 1px; }.scene-crosshair::after { top: -12px; left: 30px; width: 1px; height: 86px; }
.scene-muzzle { position: absolute; right: 11%; bottom: 27%; z-index: 4; width: 64px; height: 16px; transform: rotate(-26deg); background: var(--yellow-soft); box-shadow: 0 0 26px rgba(240,185,11,.75); clip-path: polygon(0 45%, 100% 0, 75% 50%, 100% 100%); animation: muzzle-flicker 2.8s infinite; }
.scene-tag { position: absolute; z-index: 7; padding: 6px 8px; border-left: 1px solid var(--yellow); color: #8a9488; font: 500 8px/1.45 var(--mono); letter-spacing: .1em; }.scene-tag b { color: var(--paper); font-weight: 500; }.scene-tag-threat { top: 33px; left: 20px; border-color: var(--red); }.scene-tag-threat b { color: var(--red); }.scene-tag-range { right: 18px; bottom: 62px; border-color: var(--green); }.scene-readout { position: absolute; right: 20px; top: 29px; z-index: 7; text-align: right; }.scene-readout strong { display: block; color: var(--paper); font: 800 27px/1 var(--display); letter-spacing: -.08em; }.scene-readout span { display: block; margin-top: 5px; color: var(--yellow); font: 500 7px/1 var(--mono); letter-spacing: .12em; }
.art-bottom { padding-top: 12px; border-top: 1px solid rgba(221,232,212,.11); }.art-bottom strong { margin-left: auto; margin-right: 18px; color: #8a9488; font-weight: 500; }.art-bottom strong b { color: var(--red); font-weight: 500; }.console-arrow { color: var(--yellow); font-size: 17px; }
@keyframes muzzle-flicker { 0%, 7%, 100% { opacity: 0; transform: translateX(5px) rotate(-26deg) scale(.7); } 3%, 6% { opacity: 1; transform: translateX(0) rotate(-26deg) scale(1); } }

@media (max-width: 900px) { .hero-art { max-width: 620px; } }
@media (max-width: 760px) { .hero-art { min-height: 360px; }.art-scene { min-height: 285px; }.scene-door { top: 27px; width: 128px; height: 160px; }.scene-shadow { bottom: 34px; transform: translateX(-50%) scale(.78); transform-origin: bottom center; }.scene-grid { inset: 42% -10% -32%; }.scene-readout strong { font-size: 22px; } }
@media (max-width: 470px) { .hero-art { min-height: 310px; }.art-topline, .art-bottom { font-size: 7px; }.art-scene { min-height: 235px; }.scene-door { top: 22px; width: 100px; height: 135px; }.scene-shadow { bottom: 23px; transform: translateX(-50%) scale(.6); }.scene-tag { font-size: 6px; }.scene-tag-threat { top: 18px; left: 10px; }.scene-tag-range { right: 10px; bottom: 36px; }.scene-readout { top: 18px; right: 10px; }.scene-readout strong { font-size: 18px; }.scene-readout span { font-size: 6px; } }

/* Real key art replaces the abstract telemetry block on the cover. */
.hero-visual { position: relative; min-height: 500px; overflow: hidden; border: 1px solid rgba(240,185,11,.5); background: #0a0a09; box-shadow: 18px 18px 0 rgba(240,185,11,.05); isolation: isolate; }
.hero-visual::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5,7,5,.52), transparent 42%, rgba(255,31,54,.12)), linear-gradient(0deg, rgba(4,5,4,.7), transparent 48%); pointer-events: none; }
.hero-visual::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .22; background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(235,241,228,.08) 5px 6px); mix-blend-mode: screen; }
.hero-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.9) contrast(1.08); }
.hero-shot-top, .hero-shot-bottom { position: absolute; z-index: 4; right: 17px; left: 17px; display: flex; align-items: center; justify-content: space-between; color: #d7d8cd; font: 500 9px/1 var(--mono); letter-spacing: .1em; text-shadow: 0 1px 4px #000; }
.hero-shot-top { top: 16px; }.hero-shot-bottom { right: 20px; bottom: 16px; padding-top: 12px; border-top: 1px solid rgba(240,185,11,.55); }.hero-shot-top b { color: var(--red); font-weight: 500; }.hero-shot-top b i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 11px var(--red); animation: pulse 1s infinite; }.hero-shot-bottom strong { color: var(--yellow-soft); font-weight: 500; }.hero-shot-bottom strong b { color: var(--paper); font-size: 13px; }
.hero-shot-side { position: absolute; z-index: 4; top: 43%; left: 17px; display: grid; gap: 5px; padding: 9px 11px; border-left: 2px solid var(--red); background: rgba(4,6,4,.62); color: #c5cbc0; font: 500 8px/1 var(--mono); letter-spacing: .08em; }.hero-shot-side strong { color: var(--red); font: 700 14px/1 var(--display); letter-spacing: .03em; }.hero-shot-side small { color: #a8b1a5; font: 500 8px/1 var(--mono); }.hero-shot-crosshair { position: absolute; z-index: 4; top: 51%; left: 64%; width: 72px; height: 72px; transform: translate(-50%,-50%); border: 1px solid rgba(240,185,11,.7); border-radius: 50%; opacity: .9; }.hero-shot-crosshair::before, .hero-shot-crosshair::after { content: ""; position: absolute; background: var(--yellow); }.hero-shot-crosshair::before { top: 35px; left: -15px; width: 100px; height: 1px; }.hero-shot-crosshair::after { top: -15px; left: 35px; width: 1px; height: 100px; }

.enemy-section { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 76px; align-items: center; padding: 30px 0 140px; }.enemy-copy h2 { margin: 18px 0 0; font: 800 clamp(36px, 5vw, 68px)/.95 var(--display); letter-spacing: -.07em; }.enemy-copy h2 em { color: var(--yellow); font-style: normal; }.enemy-copy p { max-width: 420px; margin: 26px 0 30px; color: #9ca39a; font-size: 15px; line-height: 1.75; }.enemy-stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 450px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.enemy-stats span { display: grid; gap: 7px; padding: 14px 12px 14px 0; border-right: 1px solid var(--line); }.enemy-stats span + span { padding-left: 12px; }.enemy-stats span:last-child { border-right: 0; }.enemy-stats b { color: var(--paper); font: 700 10px var(--display); }.enemy-stats small { color: var(--yellow); font: 500 9px var(--mono); }
.enemy-card { position: relative; min-height: 460px; overflow: hidden; border: 1px solid rgba(255,83,102,.46); background: radial-gradient(circle at 68% 38%, rgba(255,83,102,.22), transparent 26%), linear-gradient(135deg, #10130f, #160c0c); isolation: isolate; }.enemy-card::before { content: ""; position: absolute; inset: 15px; z-index: 0; border: 1px solid rgba(240,185,11,.18); clip-path: polygon(0 0, 100% 0, 100% 75%, 82% 100%, 0 100%); }.enemy-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(7,9,7,.68), transparent 54%), linear-gradient(0deg, rgba(7,9,7,.78), transparent 40%); }.enemy-character { position: absolute; z-index: 2; right: -7%; bottom: -15%; width: 84%; max-width: 590px; height: 114%; object-fit: contain; object-position: center bottom; filter: contrast(1.06) saturate(.92) drop-shadow(0 0 20px rgba(255,83,102,.18)); mix-blend-mode: screen; }.enemy-card-top, .enemy-card-bottom { position: absolute; z-index: 4; right: 20px; left: 20px; display: flex; justify-content: space-between; color: #b4bcb0; font: 500 9px var(--mono); letter-spacing: .1em; }.enemy-card-top { top: 20px; }.enemy-card-top b { color: var(--red); font-weight: 500; }.enemy-card-bottom { bottom: 20px; align-items: end; }.enemy-card-bottom strong { color: var(--paper); font: 800 26px var(--display); letter-spacing: -.04em; }.enemy-card-bottom span { color: var(--yellow); font-size: 9px; }
@media (max-width: 900px) { .hero-visual { min-height: 430px; }.enemy-section { grid-template-columns: 1fr; gap: 42px; }.enemy-copy { max-width: 650px; }.enemy-card { max-width: 650px; width: 100%; } }
@media (max-width: 760px) { .hero-visual { min-height: 390px; }.hero-shot-side { top: 38%; }.hero-shot-crosshair { left: 65%; width: 58px; height: 58px; }.hero-shot-crosshair::before { top: 28px; width: 80px; }.hero-shot-crosshair::after { left: 28px; height: 80px; }.enemy-section { padding: 10px 0 100px; }.enemy-copy h2 { font-size: clamp(34px, 11vw, 54px); }.enemy-copy p { margin-top: 20px; font-size: 14px; }.enemy-card { min-height: 430px; } }
@media (max-width: 470px) { .hero-visual { min-height: 330px; }.hero-shot-top, .hero-shot-bottom { right: 10px; left: 10px; font-size: 7px; }.hero-shot-side { left: 10px; padding: 7px 8px; font-size: 7px; }.hero-shot-side strong { font-size: 11px; }.hero-shot-bottom strong b { font-size: 11px; }.hero-shot-crosshair { left: 63%; width: 45px; height: 45px; }.hero-shot-crosshair::before { top: 22px; left: -10px; width: 64px; }.hero-shot-crosshair::after { top: -10px; left: 22px; height: 64px; }.enemy-section { padding-bottom: 82px; }.enemy-stats span { padding-right: 6px; }.enemy-stats span + span { padding-left: 6px; }.enemy-stats b { font-size: 8px; }.enemy-stats small { font-size: 7px; }.enemy-card { min-height: 360px; }.enemy-character { right: -17%; width: 112%; height: 116%; }.enemy-card-top, .enemy-card-bottom { right: 12px; left: 12px; font-size: 7px; }.enemy-card-bottom strong { font-size: 21px; }.enemy-card-bottom span { font-size: 7px; } }

/* Expanded defense loop: readable upgrades and touch-first controls. */
.wave-reward { display: block; margin-top: 8px; color: var(--yellow); font: 600 9px var(--mono); letter-spacing: .04em; }
.armory-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.armory-upgrade { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 8px; padding: 7px 8px; color: var(--yellow); background: rgba(240,185,11,.06); border: 1px solid rgba(240,185,11,.25); cursor: pointer; font: 700 8px var(--display); letter-spacing: .06em; }.armory-upgrade b { color: var(--paper); font: 700 8px var(--mono); }.armory-upgrade:disabled { cursor: not-allowed; opacity: .4; }
.floor-tag b { color: var(--yellow); font-weight: 700; }
.mobile-controls { display: none; }
.enemy-stats { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 760px) {
  .hint-bar { display: none; }
  .mobile-controls { position: absolute; z-index: 13; right: 14px; bottom: 8px; left: 14px; display: flex; align-items: end; justify-content: center; gap: 6px; pointer-events: none; }
  .mobile-controls button { display: grid; place-items: center; width: 42px; height: 36px; padding: 3px 2px; color: #cbd2c6; background: rgba(8,10,9,.88); border: 1px solid rgba(240,185,11,.34); pointer-events: auto; touch-action: none; }.mobile-controls button span { color: var(--yellow); font: 700 15px var(--display); line-height: 1; }.mobile-controls button small { color: #8d958b; font: 700 7px var(--display); }.mobile-controls .touch-fire { width: 58px; height: 46px; border-color: rgba(255,83,102,.62); background: rgba(75,18,19,.9); }.mobile-controls .touch-fire span { color: var(--red); font-size: 19px; }
  .armory-slots { grid-template-columns: none; display: flex; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }.armory-slots::-webkit-scrollbar { display: none; }.turret-card { flex: 0 0 46px; }.turret-card span:nth-child(2) { min-width: 0; }.turret-card b { font-size: 7px; }.turret-card small { font-size: 6px; }.armory-upgrade { font-size: 7px; }
  .enemy-stats { grid-template-columns: repeat(5, minmax(70px, 1fr)); overflow-x: auto; }
}

@media (max-width: 470px) {
  .armory-hud { right: 8px; width: 178px; }
  .mobile-controls { right: 9px; bottom: 6px; left: 9px; gap: 4px; }.mobile-controls button { width: 38px; }.mobile-controls .touch-fire { width: 52px; }
  .wave-reward { font-size: 7px; }
  .enemy-stats { max-width: 100%; }
}

/* Compact navigation keeps every section reachable on touch screens. */
@media (max-width: 760px) {
  .site-header { position: sticky; gap: 8px; min-height: 64px; }
  .site-header .site-brand { min-width: 0; margin-right: auto; }
  .site-header .brand-copy { min-width: 0; }
  .site-header .brand-copy b,
  .site-header .brand-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-toggle { display: inline-flex; flex: 0 0 auto; }
  .site-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: grid; gap: 0; margin: 0; padding: 7px; border: 1px solid var(--line); border-top: 0; background: rgba(9,10,9,.97); box-shadow: 0 16px 26px rgba(0,0,0,.24); opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .site-nav a { padding: 13px 10px; border-bottom: 1px solid var(--line-soft); font-size: 9px; }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a::after { display: none; }
}

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

/* Adventure-map and lane-grid pass: make the page read like a defense game, not a dashboard. */
.level-map-section { padding-top: 88px; padding-bottom: 84px; border-top: 1px solid rgba(240,185,11,.16); }
.map-heading { margin-bottom: 28px; }
.level-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; position: relative; }
.map-region { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 0 2px; color: #788074; font: 700 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.map-region i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(240,185,11,.5), transparent); }
.map-node { position: relative; display: grid; gap: 7px; min-height: 116px; padding: 16px 15px 14px; color: #cfd3c7; text-align: left; border: 1px solid rgba(142,151,137,.22); background: linear-gradient(145deg, rgba(19,23,18,.96), rgba(9,11,10,.94)); cursor: pointer; transition: transform .2s, border-color .2s, background .2s; }
.map-node::after { content: ""; position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; border: 1px solid rgba(240,185,11,.28); transform: rotate(45deg); }
.map-node b { color: var(--yellow); font: 800 20px/1 var(--display); }
.map-node strong { position: relative; z-index: 1; font: 700 13px/1.15 var(--display); }
.map-node small { color: #7e887c; font: 500 10px/1.3 var(--body); }
.map-node.current { border-color: rgba(240,185,11,.78); background: linear-gradient(145deg, rgba(64,51,10,.72), rgba(14,15,10,.95)); box-shadow: 0 16px 34px rgba(240,185,11,.08); }
.map-node.current::before { content: "当前防线"; position: absolute; right: 11px; bottom: 11px; color: var(--yellow); font: 700 8px var(--mono); letter-spacing: .08em; }
.map-node.locked { color: #6e776d; cursor: default; opacity: .72; }
.map-node.locked b { color: #737a70; }
.map-node.unlocked { border-color: rgba(119,247,178,.42); }
.map-node.complete { border-color: rgba(119,247,178,.72); background: linear-gradient(145deg, rgba(27,64,45,.54), rgba(10,15,12,.96)); }
.map-node.complete::before { content: "已清除"; position: absolute; right: 11px; bottom: 11px; color: var(--green); font: 700 8px var(--mono); letter-spacing: .08em; }
.map-node:hover:not(.locked), .map-node:focus-visible { transform: translateY(-3px); border-color: rgba(240,185,11,.9); outline: none; }
.wave-flags { display: flex; gap: 7px; margin-top: 7px; }
.wave-flags span { position: relative; flex: 1; padding-top: 7px; color: #6f796e; text-align: center; border-top: 1px solid rgba(255,255,255,.12); font: 700 7px var(--mono); letter-spacing: .05em; }
.wave-flags span::before { content: ""; position: absolute; top: -4px; left: 50%; width: 6px; height: 8px; background: #566054; transform: translateX(-50%) skewY(22deg); }
.wave-flags span.active { color: var(--yellow); border-color: rgba(240,185,11,.72); }
.wave-flags span.active::before, .wave-flags span.done::before { background: var(--yellow); box-shadow: 0 0 8px rgba(240,185,11,.65); }
.wave-flags span.done { color: #bdc2af; }
.loadout-slots { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 4px; margin-top: 8px; }
.loadout-slots span { display: grid; place-items: center; min-height: 27px; padding: 3px 2px; color: #687267; border: 1px dashed rgba(142,151,137,.28); background: rgba(255,255,255,.018); font: 700 7px var(--mono); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loadout-slots span[data-filled] { color: var(--green); border-style: solid; border-color: rgba(119,247,178,.46); background: rgba(119,247,178,.07); }
.turret-card.locked, .turret-card:disabled { color: #596158; border-color: rgba(142,151,137,.12); background: rgba(0,0,0,.24); cursor: not-allowed; opacity: .58; filter: saturate(.45); }
.turret-card.locked .turret-glyph { color: #687267; border-color: rgba(142,151,137,.2); }
.map-progress { display: flex; align-items: baseline; gap: 4px; margin-top: 18px; color: #7d877a; font: 500 10px var(--mono); letter-spacing: .08em; }
.map-progress b { color: var(--yellow); font: 800 24px var(--display); }
.prep-map { position: relative; display: flex; align-items: center; gap: 9px; margin-top: 20px; padding: 11px 13px; border: 1px solid rgba(240,185,11,.25); background: rgba(240,185,11,.045); }
.prep-map-line { position: absolute; top: 50%; right: 26px; left: 28px; height: 1px; background: rgba(240,185,11,.3); }
.prep-map b { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; color: #707a6f; border: 1px solid #586154; background: #111511; font: 700 8px var(--mono); }
.prep-map b.active { color: #10120d; border-color: var(--yellow); background: var(--yellow); }
.prep-map em { margin-left: auto; color: #8a9487; font: 500 8px var(--mono); font-style: normal; }
.threat-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 9px; }
.threat-preview span { display: grid; gap: 4px; padding: 8px; border-left: 2px solid rgba(255,83,102,.6); background: rgba(255,255,255,.035); }
.threat-preview b { color: #e0e2d6; font: 700 9px var(--display); }
.threat-preview small { color: #838c7f; font: 500 8px var(--body); }

/* Compact desktop battle layout: resources sit in strips and the middle stays playable. */
.left-hud { top: 78px; left: 22px; width: auto; display: flex; gap: 6px; }
.left-hud .operator-card { display: none; }
.left-hud .stat-card { width: 116px; margin: 0; padding: 8px 9px; }
.left-hud .stat-card small { display: none; }
.objective-card { left: 22px; bottom: 24px; width: 210px; padding: 10px 12px; }
.weapon-hud { right: 22px; bottom: 24px; width: 210px; padding: 10px 12px; }
.armory-hud { top: 104px; right: 22px; width: 330px; padding: 10px 11px; }
.armory-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.armory-hud > small { display: block; min-height: 22px; }
.wave-block { max-width: 430px; }

@media (max-width: 760px) {
  .level-map-section { padding-top: 64px; padding-bottom: 64px; }
  .level-map { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .map-region { padding-top: 15px; font-size: 8px; }
  .map-node { min-height: 102px; padding: 12px 11px; }
  .map-node strong { font-size: 10px; }
  .map-node small { font-size: 8px; }
  .wave-flags { gap: 4px; }
  .wave-flags span { font-size: 6px; }
  .game-shell { min-height: 680px; height: 680px; }
  .left-hud { top: 78px; left: 14px; right: 14px; width: auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
  .left-hud .stat-card { width: auto; min-height: 45px; padding: 7px 8px; }
  .left-hud .stat-row span { font-size: 7px; }
  .left-hud .stat-row b { font-size: 12px; }
  .armory-hud { top: 170px; right: 14px; bottom: auto; left: 14px; width: auto; padding: 8px; }
  .armory-slots { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .turret-card { flex: 0 0 84px; min-height: 58px; }
  .loadout-slots { gap: 3px; }
  .loadout-slots span { min-height: 20px; font-size: 6px; }
  .armory-hud > small { min-height: 16px; line-height: 1.15; }
  .armory-upgrade { margin-top: 6px; padding: 5px 7px; }
  .objective-card { left: 14px; bottom: 62px; width: 158px; padding: 8px 9px; }
  .objective-card > strong { font-size: 11px; }
  .weapon-hud { right: 14px; bottom: 62px; width: 150px; padding: 8px 9px; }
  .ammo-count b { font-size: 33px; }
  .center-readout { top: 57%; }
  .floor-tag { top: 122px; right: 14px; font-size: 6px; }
  .hint-bar { display: none; }
  .prep-map b { width: 20px; height: 20px; }
  .threat-preview b { font-size: 8px; }
}

@media (max-width: 470px) {
  .level-map { grid-template-columns: 1fr 1fr; }
  .map-node { min-height: 94px; }
  .map-node b { font-size: 16px; }
  .game-shell { min-height: 680px; height: 680px; }
  .armory-hud { top: 170px; left: 10px; right: 10px; }
  .turret-card { flex-basis: 78px; }
  .objective-card { left: 10px; width: 150px; }
  .weapon-hud { right: 10px; width: 144px; }
  .prep-map { gap: 5px; padding: 9px 8px; }
  .prep-map b { width: 18px; height: 18px; font-size: 7px; }
  .threat-preview span { padding: 6px 5px; }
}

/* Final battle view override: keep the corridor visible and tuck management into a drawer. */
.game-shell::after { background: linear-gradient(90deg, rgba(4,5,5,.24), transparent 25%, transparent 75%, rgba(4,5,5,.24)); }
.game-shell > .top-hud { z-index: 12; }
.game-shell > .left-hud { top: 86px; left: 30px; right: auto; width: auto; display: flex; gap: 5px; }
.game-shell > .left-hud .operator-card { display: none; }
.game-shell > .left-hud .stat-card { width: 92px; min-height: 34px; margin: 0; padding: 7px 8px; background: rgba(8,10,9,.54); backdrop-filter: blur(4px); }
.game-shell > .left-hud .stat-card small { display: none; }
.game-shell > .left-hud .stat-row span { font-size: 7px; }
.game-shell > .left-hud .stat-row b { font-size: 12px; }
.game-shell > .left-hud .stat-track { margin-top: 4px; height: 2px; }
.game-shell > .objective-card { left: 30px; bottom: 64px; width: 198px; padding: 10px 12px; background: rgba(7,9,8,.76); }
.game-shell > .objective-card p { display: none; }
.game-shell > .objective-card > strong { margin: 7px 0 3px; font-size: 13px; }
.game-shell > .weapon-hud { right: 30px; bottom: 64px; width: 190px; padding: 10px 12px; background: rgba(7,9,8,.76); }
.game-shell > .weapon-hud .ammo-count { margin: 6px 0 5px; }
.game-shell > .weapon-hud .ammo-count b { font-size: 36px; }
.game-shell > .hint-bar { display: none; }
.game-shell > .floor-tag { top: 112px; right: 30px; color: #d4d8ca; }
.game-shell > .scene-readout { position: absolute; z-index: 10; top: 29%; right: auto; left: 30px; display: grid; gap: 5px; max-width: 210px; padding: 10px 14px; text-align: left; border-left: 3px solid var(--red); background: linear-gradient(90deg, rgba(8,9,9,.78), rgba(8,9,9,.08)); backdrop-filter: blur(3px); }
.game-shell > .scene-readout span { display: block; margin: 0; color: #c4c9be; font: 600 8px var(--mono); letter-spacing: .12em; }
.game-shell > .scene-readout strong { display: block; color: var(--red); font: 800 20px var(--display); letter-spacing: .04em; }
.game-shell > .scene-readout small { display: block; color: #c4c9be; font: 600 9px var(--mono); }
.game-shell > .armory-toggle { position: absolute; z-index: 14; right: 30px; bottom: 24px; display: flex; align-items: center; gap: 9px; padding: 8px 11px; color: var(--yellow); background: rgba(8,9,8,.86); border: 1px solid rgba(240,185,11,.5); font: 700 8px var(--display); letter-spacing: .08em; cursor: pointer; }
.game-shell > .armory-toggle b { color: var(--paper); font: 700 9px var(--mono); }
.game-shell > .armory-toggle.is-open { background: var(--yellow); color: #11130e; }
.game-shell > .armory-toggle.is-open b { color: #11130e; }
.game-shell > .armory-hud { top: auto; right: 30px; bottom: 56px; left: auto; width: 330px; max-height: 270px; transform: translateY(calc(100% - 30px)); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .22s ease; }
.game-shell > .armory-hud.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }

@media (max-width: 760px) {
  .game-shell > .left-hud { top: 80px; left: 14px; right: auto; display: flex; gap: 4px; }
  .game-shell > .left-hud .stat-card { width: 58px; min-height: 28px; padding: 5px 6px; }
  .game-shell > .left-hud .stat-row span { font-size: 6px; }
  .game-shell > .left-hud .stat-row b { font-size: 10px; }
  .game-shell > .left-hud .stat-track { display: none; }
  .game-shell > .floor-tag { top: 105px; right: 14px; font-size: 6px; }
  .game-shell > .scene-readout { top: 31%; left: 14px; max-width: 170px; padding: 8px 10px; }
  .game-shell > .scene-readout strong { font-size: 17px; }
  .game-shell > .scene-readout small { font-size: 7px; }
  .game-shell > .objective-card { left: 14px; bottom: 58px; width: 142px; padding: 8px 9px; }
  .game-shell > .objective-card > strong { font-size: 11px; }
  .game-shell > .weapon-hud { right: 14px; bottom: 58px; width: 142px; padding: 8px 9px; }
  .game-shell > .weapon-hud .ammo-count b { font-size: 31px; }
  .game-shell > .armory-toggle { right: 14px; bottom: 16px; padding: 7px 9px; }
  .game-shell > .armory-hud { left: 14px; right: 14px; bottom: 48px; width: auto; max-height: 260px; transform: translateY(calc(100% - 29px)); }
  .game-shell > .armory-hud.is-open { transform: translateY(0); }

  /* These readouts never receive input. Let route taps and resource pickups
     pass through them when a phone HUD overlaps the lower grid. */
  .game-shell > .left-hud,
  .game-shell > .objective-card,
  .game-shell > .weapon-hud,
  .game-shell > .scene-readout,
  .game-shell > .floor-tag,
  .game-shell > .center-readout { pointer-events: none; }
}

@media (max-width: 470px) {
  .game-shell > .armory-hud { left: 10px; right: 10px; bottom: 45px; }
  .game-shell > .armory-toggle { right: 10px; bottom: 13px; }
}

/* Resource feedback: a small, readable pickup loop keeps the defense rhythm visible. */
.drop-readout { display: block; margin-top: 5px; color: #7f8b7c; font: 600 8px var(--mono); letter-spacing: .04em; }
.drop-readout[data-active="true"] { color: var(--yellow); text-shadow: 0 0 12px rgba(240,185,11,.25); }
@media (max-width: 760px) {
  .drop-readout { margin-top: 4px; font-size: 7px; }
}

/* Prep and objective feedback: show the player's next decision before the breach. */
.prep-readout,
.kill-target { display: block; margin-top: 5px; font: 700 8px var(--mono); letter-spacing: .035em; }
.prep-readout { color: #7ff2b4; }
.prep-readout[data-active="true"] { color: var(--yellow); text-shadow: 0 0 11px rgba(240,185,11,.28); }
.prep-readout[data-active="false"] { color: #718073; }
.kill-target { color: #e4a24a; }
.kill-target::before { content: "◉ "; color: var(--red); }
.kill-target[data-complete="true"] { color: var(--green); }
.kill-target[data-complete="true"]::before { color: var(--green); }

/* When preparation opens the armory automatically, keep it a readable drawer on phones. */
.game-shell > .armory-hud.is-open { overflow: hidden; }
.game-shell > .armory-hud.is-open .armory-slots { min-height: 0; }
@media (max-width: 760px) {
  .game-shell > .armory-hud.is-open { top: 156px; bottom: auto; max-height: 220px; padding: 7px 8px; }
  .game-shell > .armory-hud.is-open .loadout-slots { margin-top: 5px; }
  .game-shell > .armory-hud.is-open .armory-slots { max-height: 66px; overflow-x: auto; overflow-y: hidden; }
  .game-shell > .armory-hud.is-open .armory-hint,
  .game-shell > .armory-hud.is-open > small { line-height: 1.15; }
  .game-shell > .armory-hud.is-open .armory-upgrade { margin-top: 4px; }
  .game-shell > .objective-card .prep-readout,
  .game-shell > .objective-card .kill-target,
  .game-shell > .objective-card .drop-readout { margin-top: 3px; font-size: 6px; letter-spacing: .01em; white-space: nowrap; }
}
@media (max-width: 470px) {
  .game-shell > .armory-hud.is-open { max-height: 210px; }
  .game-shell > .armory-hud.is-open .armory-slots { max-height: 61px; }
  .game-shell > .objective-card .prep-readout,
  .game-shell > .objective-card .kill-target,
  .game-shell > .objective-card .drop-readout { font-size: 5.5px; }
}

/* The full bilingual brand is the single visible site identity. */
.brand-copy b { font-size: clamp(9px, .85vw, 12px); letter-spacing: .04em; }
.brand-block h1 { font-size: clamp(11px, 1.4vw, 17px); }
@media (max-width: 470px) {
  .site-header { gap: 5px; }
  .brand-copy b { font-size: 8px; letter-spacing: .02em; }
  .brand-copy small { font-size: 6px; }
  .brand-block h1 { font-size: 11px; letter-spacing: .01em; }
  .header-cta { padding-right: 8px; padding-left: 8px; font-size: 7px; }
}

/* Homepage command deck: the cover reads as a live survival operation and puts
   the playable entry, threat state, and protocol data above the fold. */
.hero {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .92fr);
  gap: clamp(34px, 5vw, 76px);
  min-height: calc(100svh - 74px);
  padding-top: clamp(38px, 5vh, 66px);
  padding-bottom: clamp(36px, 5vh, 66px);
}
.hero-copy { position: relative; z-index: 3; }
.hero-copy .kicker { gap: 8px; }
.kicker-live { display: inline-flex; align-items: center; gap: 5px; margin-left: 7px; color: var(--green); font-size: 8px; letter-spacing: .12em; }
.kicker-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px var(--green); animation: pulse 1.4s infinite; }
.hero h1 { max-width: none; margin-top: 20px; margin-bottom: 18px; font-size: clamp(48px, 6.1vw, 90px); line-height: .88; letter-spacing: -.105em; white-space: nowrap; }
.hero h1 em { display: block; margin-top: .13em; font-size: .48em; line-height: .92; letter-spacing: -.03em; }
.hero-lede { max-width: 500px; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.6; }
.hero-actions { margin-top: 24px; }
.hero-meta { gap: 15px; margin-top: 22px; }
.hero-entry-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; max-width: 520px; margin-top: 26px; padding: 13px 14px; border: 1px solid rgba(240,185,11,.38); border-left: 3px solid var(--yellow); background: linear-gradient(110deg, rgba(240,185,11,.10), rgba(13,16,14,.76) 52%, rgba(9,10,9,.9)); box-shadow: 12px 12px 0 rgba(240,185,11,.035); }
.hero-entry-copy { display: grid; gap: 5px; min-width: 0; }
.hero-entry-copy span, .hero-signal-grid span { color: var(--yellow); font: 600 8px/1 var(--mono); letter-spacing: .12em; }
.hero-entry-copy strong { color: var(--paper); font: 700 14px/1.1 var(--display); letter-spacing: .03em; }
.hero-entry-copy small { color: #8d968a; font: 500 10px/1.35 var(--body); }
.hero-entry-action { display: inline-flex; align-items: center; gap: 17px; min-width: 112px; padding: 12px 13px; color: var(--ink); background: var(--yellow); font: 800 10px/1 var(--mono); letter-spacing: .08em; transition: transform .2s, background .2s; }
.hero-entry-action:hover, .hero-entry-action:focus-visible { transform: translateY(-2px); background: var(--yellow-soft); }
.hero-entry-action b { font-size: 16px; line-height: .5; }
.hero-signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 520px; margin-top: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero-signal-grid > div { display: grid; gap: 5px; min-width: 0; padding: 10px 11px 10px 0; border-right: 1px solid var(--line); }
.hero-signal-grid > div + div { padding-left: 11px; }
.hero-signal-grid > div:last-child { border-right: 0; }
.hero-signal-grid strong { color: var(--paper); font: 800 16px/1 var(--display); letter-spacing: -.02em; }
.hero-signal-grid > div:first-child strong { color: var(--red); }
.hero-signal-grid small { overflow: hidden; color: #707970; font: 500 7px/1 var(--mono); letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.hero-visual { min-height: clamp(430px, 62vh, 560px); box-shadow: 18px 18px 0 rgba(240,185,11,.055), 0 0 0 1px rgba(255,255,255,.02); }
.hero-visual-index { position: absolute; z-index: 4; top: 48px; right: 18px; display: grid; gap: 1px; color: var(--yellow); font: 800 28px/.9 var(--display); letter-spacing: -.08em; text-align: right; text-shadow: 0 0 18px rgba(240,185,11,.35); }
.hero-visual-index span { color: #a0a99b; font: 500 7px/1 var(--mono); letter-spacing: .16em; }
.hero-visual-data { position: absolute; z-index: 4; right: 18px; bottom: 52px; display: grid; gap: 4px; padding: 8px 10px; border-right: 2px solid var(--yellow); background: rgba(4,6,4,.62); text-align: right; }
.hero-visual-data span { color: #879184; font: 500 7px/1 var(--mono); letter-spacing: .12em; }
.hero-visual-data strong { color: var(--yellow-soft); font: 700 10px/1 var(--display); letter-spacing: .08em; }
.hero-visual-data i { position: absolute; top: 50%; right: -5px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }
.ticker { margin-bottom: 84px; border-color: rgba(240,185,11,.28); background: linear-gradient(90deg, rgba(240,185,11,.035), transparent 28%, transparent 72%, rgba(240,185,11,.035)); }
.ticker > div { min-height: 94px; }
.ticker strong { font-size: 11px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; gap: 38px; padding-top: 52px; }
  .hero-copy { max-width: 670px; }
  .hero-visual { width: 100%; max-width: 670px; min-height: 430px; }
}
@media (max-width: 760px) {
  .hero { gap: 28px; padding-top: 38px; padding-bottom: 42px; }
  .hero h1 { font-size: clamp(40px, 12.9vw, 72px); letter-spacing: -.1em; white-space: normal; }
  .hero h1 em { margin-top: .18em; font-size: .5em; }
  .hero-lede { font-size: 14px; }
  .hero-entry-card { grid-template-columns: 1fr; gap: 12px; }
  .hero-entry-action { justify-content: space-between; width: 100%; }
  .hero-signal-grid { max-width: none; }
  .hero-visual { min-height: 370px; }
  .hero-visual-index { top: 42px; right: 12px; font-size: 22px; }
  .hero-visual-data { right: 12px; bottom: 45px; }
  .ticker { grid-template-columns: repeat(2, 1fr); margin-bottom: 62px; }
  .ticker > div:nth-child(2) { border-right: 0; }
  .ticker > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 470px) {
  .hero h1 { font-size: clamp(38px, 13.7vw, 60px); }
  .hero-signal-grid { grid-template-columns: 1fr; }
  .hero-signal-grid > div, .hero-signal-grid > div + div { padding: 9px 0; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .hero-signal-grid > div:last-child { border-bottom: 0; }
  .hero-visual { min-height: 325px; }
  .hero-visual-index { top: 34px; font-size: 18px; }
  .hero-visual-data { bottom: 40px; }
  .ticker > div { min-height: 88px; padding: 14px 12px; }
}