:root {
  --bg: #050711;
  --panel: rgba(9, 13, 28, .88);
  --line: rgba(94, 225, 255, .2);
  --cyan: #62edff;
  --blue: #2a75ff;
  --pink: #ff2f87;
  --red: #ff405d;
  --gold: #ffd467;
  --text: #eef7ff;
  --muted: #9dafc8;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { user-select: none; }
canvas { display: block; width: 100vw; height: 100vh; background: radial-gradient(circle at 50% 35%, #10182e 0, #050711 65%); }
.scanlines, .vignette { pointer-events: none; position: fixed; inset: 0; z-index: 15; }
.scanlines { opacity: .1; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,.05) 1px, transparent 1px, transparent 4px); mix-blend-mode: overlay; }
.vignette { box-shadow: inset 0 0 160px 25px rgba(0,0,0,.72); }
.screen { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at center, rgba(17,24,52,.36), rgba(3,4,10,.76)); backdrop-filter: blur(7px); }
.screen.active { display: flex; }
.panel { width: min(980px, 94vw); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(15,20,42,.92), rgba(5,8,18,.94)); box-shadow: 0 0 80px rgba(46,105,255,.14), inset 0 1px 0 rgba(255,255,255,.06); padding: clamp(24px, 4vw, 52px); position: relative; overflow: hidden; }
.panel::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -220px; top: -230px; background: radial-gradient(circle, rgba(255,47,135,.22), transparent 68%); pointer-events: none; }
.eyebrow { letter-spacing: .19em; font-size: 12px; font-weight: 800; color: var(--cyan); margin-bottom: 8px; }
h1, h2 { margin: 0; line-height: .88; letter-spacing: -.055em; text-transform: uppercase; }
h1 { font-size: clamp(58px, 10vw, 126px); text-shadow: 0 0 36px rgba(80,205,255,.2); }
h1 span, .brand span { color: var(--red); }
h2 { font-size: clamp(40px, 7vw, 72px); }
.tagline { margin: 18px 0 0; font-weight: 900; letter-spacing: .14em; color: var(--red); font-size: clamp(12px, 1.8vw, 18px); }
.intro { max-width: 720px; color: #b7c4da; line-height: 1.65; font-size: 15px; }
.menu-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn { appearance: none; border: 1px solid rgba(120,170,255,.32); background: rgba(14,22,42,.76); color: var(--text); padding: 14px 20px; min-width: 170px; font-weight: 900; letter-spacing: .08em; cursor: pointer; text-transform: uppercase; transition: .18s transform, .18s box-shadow, .18s border-color; }
.btn:hover { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 8px 28px rgba(55,206,255,.12); }
.btn.primary { background: linear-gradient(180deg, #ff3d67, #e7154c); border-color: #ff7592; box-shadow: 0 0 36px rgba(255,38,99,.26); }
.feature-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-top: 34px; }
.feature-row div { border-top: 1px solid rgba(105,220,255,.2); padding-top: 11px; }
.feature-row b { display: block; color: var(--cyan); letter-spacing: .08em; }
.feature-row span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.version-note { color: #657793; font-size: 11px; margin-top: 28px; }
.manual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.manual-grid article { padding: 18px; border: 1px solid rgba(96,164,255,.17); background: rgba(7,11,24,.62); }
.manual-grid article > b { color: var(--pink); font-size: 12px; letter-spacing: .12em; }
.manual-grid h3 { margin: 9px 0 6px; text-transform: uppercase; }
.manual-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
kbd { border: 1px solid rgba(255,255,255,.2); background: #10182b; padding: 1px 5px; border-radius: 3px; }
.result-panel { max-width: 760px; }
.result-panel #resultText { color: var(--muted); }
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; }
.result-stats div { border: 1px solid rgba(104,164,255,.17); background: rgba(7,10,20,.58); padding: 14px; }
.result-stats span { display:block; color: var(--muted); font-size:11px; text-transform: uppercase; letter-spacing:.12em; }
.result-stats b { display:block; margin-top:4px; font-size:26px; }
.hidden { display: none !important; }
.hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.hud-top { position:absolute; top:18px; left:22px; right:22px; display:grid; grid-template-columns: 1fr auto 1fr; align-items:start; }
.brand { font-size:20px; font-weight:1000; letter-spacing:-.04em; }
.timer-wrap { text-align:center; min-width:160px; }
.timer-label { color:#7d8ea8; font-size:9px; letter-spacing:.16em; }
.timer { font: 900 34px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.03em; text-shadow: 0 0 22px rgba(255,61,93,.4); }
.loop-chip { justify-self:end; border:1px solid rgba(116,225,255,.25); background:rgba(8,15,29,.72); padding:8px 11px; font-size:10px; letter-spacing:.12em; }
.hud-left { position:absolute; left:22px; top:88px; width:min(280px, 34vw); display:grid; gap:9px; }
.meter-card,.objective-card,.vault-card,.score-card,.cooldown-card { border:1px solid rgba(102,207,255,.18); background:linear-gradient(180deg, rgba(5,10,22,.8), rgba(4,6,14,.65)); backdrop-filter: blur(5px); padding:11px 12px; }
.meter-head { display:flex; justify-content:space-between; font-size:10px; letter-spacing:.12em; }
.meter { height:7px; background:#151c2c; margin-top:7px; overflow:hidden; }
.meter i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#49e8ff,#5d79ff); transition:width .12s; }
.objective-card .small { color:#6f819c; display:block; font-size:9px; letter-spacing:.16em; }
.objective-card b { display:block; margin-top:2px; font-size:14px; }
.artifact-dots { display:flex; gap:4px; margin-top:7px; }
.artifact-dots i { width:15px; height:4px; background:#252d41; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.artifact-dots i.on { background:var(--cyan); box-shadow:0 0 10px rgba(98,237,255,.55); }
.vault-card { font-size:10px; letter-spacing:.07em; color:#8393aa; }
.vault-card b { color:var(--red); }
.hud-right { position:absolute; right:22px; top:88px; width:150px; display:grid; gap:9px; }
.score-card span,.cooldown-card span { color:#7487a2; display:block; font-size:9px; letter-spacing:.15em; }
.score-card b { display:block; font-size:24px; }
.cooldown { height:5px; margin-top:7px; background:#171d2c; }
.cooldown i { display:block; height:100%; width:100%; background:var(--pink); }
.prompt { position:absolute; left:50%; bottom:42px; transform:translateX(-50%); background:rgba(4,8,18,.9); border:1px solid rgba(255,77,122,.55); box-shadow:0 0 30px rgba(255,46,105,.16); padding:12px 17px; font-size:11px; font-weight:900; letter-spacing:.12em; }
.toast { position:absolute; left:50%; top:92px; transform:translate(-50%,-10px); opacity:0; color:white; font-size:12px; font-weight:900; letter-spacing:.12em; background:rgba(5,9,20,.86); border:1px solid rgba(91,210,255,.26); padding:9px 13px; transition:.18s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.mobile-controls { position:fixed; inset:0; z-index:25; pointer-events:none; }
.mobile-controls button { pointer-events:auto; touch-action:none; appearance:none; border:1px solid rgba(145,220,255,.24); background:rgba(8,12,25,.62); color:white; width:58px; height:58px; font-weight:900; }
.dpad { position:absolute; left:18px; bottom:18px; text-align:center; }
.dpad > button { display:block; margin:0 auto 3px; }
.dpad div { display:flex; gap:3px; }
.actions { position:absolute; right:18px; bottom:18px; display:flex; gap:8px; align-items:flex-end; }
.actions button { width:68px; border-radius:50%; }
@media (max-width: 720px) {
  .feature-row { grid-template-columns: repeat(2,1fr); }
  .manual-grid { grid-template-columns: 1fr 1fr; }
  .result-stats { grid-template-columns: 1fr 1fr; }
  .hud-left { width: 48vw; left:10px; top:78px; }
  .hud-right { right:10px; top:78px; width:120px; }
  .hud-top { top:12px; left:10px; right:10px; }
  .brand { font-size:14px; }
  .timer { font-size:27px; }
}
@media (pointer: coarse) and (max-width: 1000px) { .mobile-controls:not(.hidden) { display:block !important; } }

/* V1.1 enhancements */
.hero-panel { isolation:isolate; }
.hero-panel::after { content:""; position:absolute; inset:-40%; background:conic-gradient(from 90deg, transparent 0 35%, rgba(98,237,255,.05) 42%, transparent 49% 72%, rgba(255,47,135,.06) 78%, transparent 84%); animation:heroSweep 16s linear infinite; z-index:-1; }
@keyframes heroSweep { to { transform:rotate(360deg); } }
.result-rank { margin-top:18px; display:inline-block; padding:8px 12px; border:1px solid rgba(255,212,103,.45); background:rgba(255,212,103,.08); color:var(--gold); font-weight:1000; letter-spacing:.16em; text-transform:uppercase; box-shadow:0 0 28px rgba(255,212,103,.12); }
.threat-card { border:1px solid rgba(255,64,93,.22); background:linear-gradient(180deg,rgba(20,7,14,.78),rgba(6,7,14,.66)); padding:10px 12px; }
.threat-card span { color:#7d8ca2; font-size:9px; letter-spacing:.15em; display:block; }
.threat-card b { display:block; margin-top:2px; font-size:14px; color:#8cecff; }
.cooldown.pulse i { background:linear-gradient(90deg,#9e5dff,#ff2f87); }
.event-banner { position:absolute; left:50%; top:150px; transform:translate(-50%,-14px); width:min(560px,72vw); text-align:center; padding:14px 18px 13px; border:1px solid rgba(255,64,93,.5); background:linear-gradient(180deg,rgba(20,6,18,.92),rgba(6,8,18,.9)); box-shadow:0 0 50px rgba(255,47,135,.17), inset 0 1px 0 rgba(255,255,255,.04); opacity:0; transition:.2s ease; }
.event-banner:not(.hidden) { opacity:1; transform:translate(-50%,0); }
.event-banner small { display:block; color:#ff6a8f; font-size:9px; font-weight:900; letter-spacing:.24em; }
.event-banner b { display:block; margin-top:3px; font-size:22px; letter-spacing:.12em; text-transform:uppercase; }
.event-banner span { display:block; margin-top:2px; color:#9eb1ca; font-size:11px; letter-spacing:.08em; }
.damage-flash,.glitch-flash { position:fixed; inset:0; pointer-events:none; z-index:18; opacity:0; }
.damage-flash { background:radial-gradient(circle at center, transparent 35%, rgba(255,20,61,.62) 100%); transition:opacity .18s ease; }
.damage-flash.on { opacity:.82; transition:none; }
.glitch-flash { background:repeating-linear-gradient(0deg,rgba(98,237,255,.08) 0 2px, transparent 2px 8px), linear-gradient(90deg,rgba(255,47,135,.10),transparent 30%,rgba(98,237,255,.08)); mix-blend-mode:screen; }
.glitch-flash.on { animation:glitchPop .34s steps(2,end); }
@keyframes glitchPop { 0%{opacity:.9;transform:translateX(0)} 25%{transform:translateX(6px)} 50%{opacity:.25;transform:translateX(-8px)} 75%{opacity:.75;transform:translateX(4px)} 100%{opacity:0;transform:translateX(0)} }
@media (max-width:720px){ .event-banner{ top:128px; width:86vw; } .event-banner b{font-size:17px;} .threat-card{display:none;} }