:root {
  --bg: #070714;
  --panel: rgba(10, 10, 26, .91);
  --panel2: rgba(21, 14, 43, .88);
  --cyan: #37e9ff;
  --cyan2: #0a9ac8;
  --purple: #8e48ff;
  --orange: #ff8a1f;
  --green: #61ff8a;
  --red: #ff405f;
  --text: #f5fbff;
  --muted: #a7b1c9;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
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 { overscroll-behavior:none; touch-action:none; user-select:none; }
button, input { font:inherit; }
button { color:inherit; cursor:pointer; }
#app { position:fixed; inset:0; overflow:hidden; background:radial-gradient(circle at 50% 30%, #17102e 0%, #070714 64%, #020207 100%); }
#game { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.hidden { display:none !important; }

.overlay { position:absolute; inset:0; z-index:30; display:grid; place-items:center; padding:calc(18px + var(--safe-t)) calc(18px + var(--safe-r)) calc(18px + var(--safe-b)) calc(18px + var(--safe-l)); background:radial-gradient(circle at center, rgba(27,15,56,.58), rgba(1,1,8,.88)); backdrop-filter: blur(10px); }
.menu-overlay { background:linear-gradient(180deg, rgba(2,4,14,.50), rgba(4,2,13,.91)), url('assets/art/volt-normal.webp') center 34% / cover no-repeat; }
.menu-card, .panel { width:min(92vw, 560px); border:1px solid rgba(55,233,255,.28); border-radius:24px; padding:26px; background:linear-gradient(145deg, rgba(9,10,27,.92), rgba(20,10,38,.90)); box-shadow:0 0 0 1px rgba(142,72,255,.16) inset, 0 30px 90px rgba(0,0,0,.56), 0 0 56px rgba(30,167,255,.13); }
.menu-card { text-align:center; padding:18px 26px 22px; }
.panel.compact { width:min(91vw, 440px); }
.panel.wide { width:min(94vw, 980px); max-height:92vh; overflow:auto; }
.victory-panel { width:min(92vw, 600px); }
.logo { width:102px; height:102px; object-fit:cover; border-radius:50%; filter:drop-shadow(0 0 20px rgba(55,233,255,.55)); margin-top:-8px; }
.eyebrow { margin:4px 0 6px; color:var(--cyan); font-size:11px; letter-spacing:.24em; font-weight:900; }
h1,h2,p { margin-top:0; }
h1 { margin:0; font-size:clamp(52px,10vw,82px); letter-spacing:.04em; line-height:.88; text-shadow:0 0 22px rgba(55,233,255,.38); }
h2 { margin:0 0 16px; font-size:32px; letter-spacing:.04em; }
.subtitle { margin:7px 0 12px; color:var(--orange); font-weight:1000; letter-spacing:.42em; font-size:13px; padding-left:.42em; }
.tagline { color:#dbe5f4; font-size:14px; max-width:430px; margin:0 auto 18px; line-height:1.45; }
.menu-actions { display:grid; gap:9px; }
button.primary, button.secondary, button.ghost, button.danger { border-radius:13px; min-height:48px; border:1px solid transparent; font-weight:900; letter-spacing:.08em; transition:transform .1s ease, filter .15s ease; }
button:active { transform:scale(.97); }
button.primary { background:linear-gradient(135deg,#13bfe9,#5befff); color:#00141a; box-shadow:0 0 30px rgba(55,233,255,.24); }
button.secondary { background:rgba(142,72,255,.14); border-color:rgba(142,72,255,.48); }
button.ghost { background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.13); color:#ccd4e2; }
button.danger { width:100%; margin-top:18px; background:rgba(255,64,95,.10); border-color:rgba(255,64,95,.38); color:#ff8297; }
.record-line { color:#8fc1d2; font-size:11px; margin:15px 0 7px; letter-spacing:.08em; }
.controls-hint { color:#76849e; font-size:10px; margin:0; line-height:1.4; }

#hud { position:absolute; z-index:10; top:0; left:0; right:0; min-height:68px; display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:8px; padding:calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) 8px calc(12px + var(--safe-l)); pointer-events:none; background:linear-gradient(180deg,rgba(2,3,12,.78),transparent); }
.hud-left { width:min(290px,34vw); display:grid; gap:6px; }
.meter { display:grid; grid-template-columns:40px 1fr 30px; gap:6px; align-items:center; font-size:10px; font-weight:900; }
.meter-label { color:#dbe9f3; letter-spacing:.08em; }
.meter-track { height:8px; background:#181a2a; border-radius:99px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.07); }
.meter-track i { display:block; height:100%; width:100%; border-radius:inherit; transition:width .1s linear; }
.hp .meter-track i { background:linear-gradient(90deg,#ff405f,#ff8a75); }
.energy .meter-track i { background:linear-gradient(90deg,#0799cc,#49f1ff); box-shadow:0 0 10px rgba(55,233,255,.42); }
.meter b { text-align:right; font-size:10px; }
.hud-centre { text-align:center; min-width:170px; }
.stage-chip { display:inline-block; padding:5px 9px; border-radius:999px; background:rgba(17,17,36,.68); border:1px solid rgba(55,233,255,.16); color:#c6e8ef; font-size:9px; letter-spacing:.09em; font-weight:850; }
.hud-score { margin-top:4px; display:flex; gap:5px; justify-content:center; align-items:baseline; }
.hud-score span { font-size:17px; font-weight:1000; letter-spacing:.08em; }
.hud-score small { color:#728098; font-size:7px; letter-spacing:.12em; }
.hud-right { justify-self:end; display:flex; align-items:center; gap:9px; pointer-events:auto; }
.hud-coins { display:flex; gap:5px; align-items:center; background:rgba(9,9,22,.66); border:1px solid rgba(255,138,31,.18); border-radius:12px; padding:6px 9px; font-size:12px; }
.icon-btn { width:38px; height:38px; border-radius:12px; background:rgba(8,9,25,.76); border:1px solid rgba(255,255,255,.16); font-weight:900; }

#powerStrip { position:absolute; z-index:10; left:50%; top:calc(72px + var(--safe-t)); transform:translateX(-50%); display:flex; gap:6px; pointer-events:none; }
.power-pill { font-size:9px; font-weight:900; letter-spacing:.05em; padding:5px 8px; border:1px solid rgba(55,233,255,.22); background:rgba(7,8,19,.78); border-radius:999px; box-shadow:0 0 16px rgba(55,233,255,.12); }

#touchControls { position:absolute; inset:0; z-index:15; pointer-events:none; }
.stick-zone { position:absolute; left:calc(18px + var(--safe-l)); bottom:calc(18px + var(--safe-b)); width:148px; height:148px; pointer-events:auto; touch-action:none; }
.stick-ring { position:absolute; inset:14px; border-radius:50%; border:2px solid rgba(55,233,255,.22); background:radial-gradient(circle,rgba(55,233,255,.07),rgba(5,6,16,.12)); box-shadow:0 0 30px rgba(55,233,255,.08) inset; }
.stick-knob { position:absolute; width:58px; height:58px; left:45px; top:45px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#78f7ff,#118aaa 70%,#063346); border:2px solid rgba(255,255,255,.24); box-shadow:0 0 22px rgba(55,233,255,.32); transform:translate(0px,0px); }
.action-cluster { position:absolute; right:calc(18px + var(--safe-r)); bottom:calc(18px + var(--safe-b)); width:176px; height:148px; pointer-events:none; }
.action-btn { position:absolute; border-radius:50%; pointer-events:auto; touch-action:none; border:1px solid rgba(255,255,255,.18); color:white; display:grid; place-items:center; align-content:center; gap:1px; font-weight:900; backdrop-filter:blur(8px); }
.action-btn span { font-size:27px; line-height:1; }
.action-btn small { font-size:8px; letter-spacing:.08em; }
.action-btn.zap { width:92px; height:92px; right:0; bottom:0; background:radial-gradient(circle at 35% 30%,rgba(79,241,255,.96),rgba(9,116,166,.86) 55%,rgba(4,20,43,.92)); box-shadow:0 0 34px rgba(55,233,255,.26); color:#00131b; }
.action-btn.dash { width:70px; height:70px; left:0; top:3px; background:radial-gradient(circle at 35% 30%,rgba(167,106,255,.92),rgba(75,31,137,.9) 55%,rgba(20,7,40,.95)); box-shadow:0 0 26px rgba(142,72,255,.22); }
.action-btn.disabled { filter:grayscale(.8) brightness(.55); }

.level-banner { position:absolute; z-index:25; left:50%; top:43%; transform:translate(-50%,-50%); min-width:min(86vw,480px); text-align:center; padding:20px 26px; border-top:1px solid rgba(55,233,255,.48); border-bottom:1px solid rgba(55,233,255,.48); background:linear-gradient(90deg,transparent,rgba(4,7,18,.92) 18%,rgba(8,9,29,.96) 50%,rgba(4,7,18,.92) 82%,transparent); text-shadow:0 0 20px #000; }
.level-banner small { color:var(--orange); letter-spacing:.25em; font-size:10px; font-weight:900; display:block; }
.level-banner strong { display:block; font-size:clamp(30px,7vw,52px); letter-spacing:.05em; }
.level-banner span { color:#a8b4cc; font-size:12px; }
.toast { position:absolute; z-index:26; left:50%; top:27%; transform:translateX(-50%); padding:9px 14px; border-radius:999px; background:rgba(5,7,20,.9); border:1px solid rgba(55,233,255,.24); box-shadow:0 0 30px rgba(55,233,255,.12); font-size:11px; font-weight:850; letter-spacing:.04em; white-space:nowrap; }
.rotate-hint { position:absolute; z-index:40; left:50%; bottom:calc(8px + var(--safe-b)); transform:translateX(-50%); font-size:9px; color:#7f8ca4; background:rgba(2,2,9,.8); padding:5px 8px; border-radius:999px; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:12px; }
.gallery-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.gallery-row img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px; border:1px solid rgba(255,255,255,.09); }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:16px 0; }
.stat { border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); border-radius:13px; padding:10px; }
.stat b { display:block; font-size:20px; color:#effaff; }
.stat span { color:#8591a7; font-size:9px; letter-spacing:.1em; }
.achievement-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.achievement { display:flex; gap:10px; align-items:center; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); border-radius:13px; padding:10px; opacity:.42; }
.achievement.unlocked { opacity:1; border-color:rgba(55,233,255,.24); background:rgba(55,233,255,.045); }
.achievement .badge { font-size:25px; width:36px; text-align:center; }
.achievement b { display:block; font-size:11px; }
.achievement small { display:block; margin-top:2px; color:#8e99ad; font-size:9px; line-height:1.25; }
.setting-row { display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08); font-weight:750; }
.setting-row input { width:22px; height:22px; accent-color:#30ddec; }

@media (hover:hover) and (pointer:fine) {
  #touchControls { opacity:.28; }
  button:hover { filter:brightness(1.12); }
}
@media (orientation:portrait) and (max-width:720px) {
  .menu-card { width:min(94vw,520px); }
  #hud { grid-template-columns:1fr auto; }
  .hud-centre { position:absolute; left:50%; top:calc(52px + var(--safe-t)); transform:translateX(-50%); }
  .hud-left { width:44vw; }
  .stick-zone { width:132px; height:132px; }
  .stick-ring { inset:12px; }
  .stick-knob { width:52px; height:52px; left:40px; top:40px; }
  .action-cluster { width:154px; height:132px; }
  .action-btn.zap { width:82px; height:82px; }
  .action-btn.dash { width:63px; height:63px; }
  .gallery-row { grid-template-columns:1fr; }
  .gallery-row img { max-height:190px; object-position:center 36%; }
  .achievement-grid { grid-template-columns:1fr; }
  .rotate-hint:not(.hidden) { display:block; }
}
@media (max-height:520px) {
  .menu-card { transform:scale(.88); }
  .logo { width:76px; height:76px; }
  .tagline { margin-bottom:10px; }
  .menu-actions { grid-template-columns:repeat(2,1fr); }
  .menu-actions .primary { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto !important; transition:none !important; }
}

/* Phase 2 systems */
:root { --stick-scale:1; --button-scale:1; }
#resonanceHud { position:absolute; z-index:11; left:50%; top:calc(108px + var(--safe-t)); transform:translateX(-50%); width:min(48vw,360px); display:grid; grid-template-columns:auto 1fr 28px; gap:7px; align-items:center; pointer-events:none; padding:5px 9px; border-radius:999px; background:rgba(5,6,18,.72); border:1px solid rgba(142,72,255,.24); backdrop-filter:blur(8px); }
#resonanceHud > span { font-size:8px; letter-spacing:.12em; font-weight:950; color:#d9c7ff; }
#resonanceHud > b { font-size:9px; text-align:right; }
#resonanceHud > small { position:absolute; top:28px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:8px; color:#82efff; letter-spacing:.12em; }
.res-track { height:7px; background:#171426; border-radius:99px; overflow:hidden; }
.res-track i { display:block; height:100%; width:0; background:linear-gradient(90deg,#7744ff,#37e9ff,#e9fcff); box-shadow:0 0 16px rgba(55,233,255,.75); transition:width .08s linear; }
#resonanceHud.blackout { border-color:rgba(55,233,255,.75); box-shadow:0 0 28px rgba(55,233,255,.18); }
.stick-zone { transform:scale(var(--stick-scale)); transform-origin:left bottom; }
.action-cluster { transform:scale(var(--button-scale)); transform-origin:right bottom; }
.setting-stack { display:grid; gap:7px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:12px; font-weight:750; }
.setting-stack span { display:flex; justify-content:space-between; gap:14px; }
.setting-stack b { color:var(--cyan); }
.setting-stack input[type=range] { width:100%; accent-color:var(--cyan); }
.setting-row select { background:#111426; color:white; border:1px solid rgba(255,255,255,.13); border-radius:9px; padding:7px; }
.workshop-cells { margin:2px 0 0; color:#8fa2bb; font-size:11px; letter-spacing:.1em; }.workshop-cells b{color:var(--cyan);font-size:20px;}
.workshop-copy { color:#9eabc0; max-width:720px; font-size:12px; line-height:1.45; }
.upgrade-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.upgrade-branch { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.025); border-radius:18px; padding:12px; }
.upgrade-branch h3 { margin:0 0 10px; font-size:13px; letter-spacing:.16em; color:var(--cyan); }
.upgrade-card { width:100%; text-align:left; display:grid; grid-template-columns:38px 1fr auto; gap:9px; align-items:center; margin:8px 0; padding:10px; border-radius:13px; border:1px solid rgba(255,255,255,.09); background:rgba(6,8,20,.7); color:white; }
.upgrade-card.can-buy { border-color:rgba(55,233,255,.38); box-shadow:0 0 20px rgba(55,233,255,.07); }
.upgrade-card.maxed { background:rgba(55,233,255,.07); border-color:rgba(55,233,255,.25); }
.upgrade-card .u-icon { font-size:24px; text-align:center; }.upgrade-card strong{font-size:11px;display:block}.upgrade-card small{font-size:9px;color:#8793a9;line-height:1.3;display:block;margin-top:2px}.upgrade-card em{font-style:normal;font-size:9px;color:#ffd166;white-space:nowrap}
.lab-readout { padding:10px; margin-bottom:12px; border-radius:12px; background:#050713; border:1px solid rgba(55,233,255,.18); font:700 11px ui-monospace,monospace; color:#71f1ff; }
.lab-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }.lab-grid button{min-height:44px}
@media (max-width:720px){#resonanceHud{top:calc(92px + var(--safe-t));width:min(58vw,310px)}.upgrade-grid{grid-template-columns:1fr}.workshop-panel{max-height:94vh}.lab-grid{grid-template-columns:1fr 1fr}}

/* Phase 3 // PIXEL REFORGED */
canvas#game { image-rendering: pixelated; image-rendering: crisp-edges; }
body.pixel-reforged { background:#05050c; }
.menu-card,.panel,.stage-chip,.meter-track,.hud-coins,.icon-btn,.power-pill,#resonanceHud,.toast,.action-btn,.stick-ring,.stick-knob { border-radius:6px; }
.menu-card,.panel { box-shadow:0 0 0 2px rgba(0,0,0,.72), 0 0 0 3px rgba(84,239,255,.09), 0 20px 80px rgba(0,0,0,.58); }
button { image-rendering:pixelated; }
.logo { image-rendering:pixelated; }

#flowHud { position:absolute; z-index:12; right:calc(16px + var(--safe-r)); top:calc(72px + var(--safe-t)); width:92px; padding:6px 8px 8px; background:rgba(5,6,15,.84); border:2px solid rgba(255,204,70,.28); box-shadow:0 0 0 2px rgba(0,0,0,.45); pointer-events:none; }
#flowHud span { display:block; font-size:8px; font-weight:950; letter-spacing:.16em; color:#ffe36a; }
#flowHud b { display:block; font-size:22px; line-height:1; margin:2px 0 4px; color:#fff4ac; text-shadow:2px 2px 0 #6d3100; }
#flowHud i { display:block; height:4px; width:100%; transform-origin:left; background:#ffcb36; box-shadow:0 0 8px rgba(255,189,47,.5); }
#flowHud.hot { border-color:#fff0a0; box-shadow:0 0 16px rgba(255,180,30,.25),0 0 0 2px rgba(0,0,0,.55); }

.choice-panel h2,.grade-panel h2,.den-panel h2 { margin-bottom:8px; }
.choice-copy { color:#9eabc0; font-size:12px; line-height:1.45; }
.choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.choice-card { min-height:188px; display:grid; align-content:start; gap:8px; padding:16px; text-align:left; color:white; border:2px solid rgba(255,255,255,.12); background:linear-gradient(180deg,rgba(20,24,38,.96),rgba(5,7,17,.96)); box-shadow:0 5px 0 rgba(0,0,0,.5); }
.choice-card:hover { transform:translateY(-2px); }
.choice-card .choice-icon { font-size:34px; line-height:1; }
.choice-card strong { display:block; font-size:15px; letter-spacing:.08em; }
.choice-card small { color:#9ca8bb; font-size:10px; line-height:1.45; }
.choice-card em { margin-top:auto; font-style:normal; font-size:9px; letter-spacing:.12em; color:#68f1ff; }
.choice-card.voltage { border-color:rgba(90,235,255,.45); }
.choice-card.instinct { border-color:rgba(255,197,61,.48); }
.choice-card.void { border-color:rgba(177,92,255,.5); }
.choice-card.elite { border-color:rgba(255,72,57,.58); }
.choice-card.safe { border-color:rgba(79,255,145,.42); }

.den-panel { overflow:auto; }
.den-scene { position:relative; min-height:260px; overflow:hidden; margin:8px 0 14px; border:3px solid #0d0f17; background:
 linear-gradient(rgba(41,46,58,.22) 2px,transparent 2px) 0 0/32px 32px,
 linear-gradient(90deg,rgba(41,46,58,.14) 2px,transparent 2px) 0 0/32px 32px,
 linear-gradient(#11121a 0 64%,#19121a 64% 68%,#09090e 68%); box-shadow:inset 0 0 45px #000; image-rendering:pixelated; }
.den-scene:before { content:""; position:absolute; left:0; right:0; bottom:31%; height:8px; background:#34313b; box-shadow:0 8px 0 #08080b; }
.den-wall-sign { position:absolute; left:20px; top:18px; padding:8px 10px; font:950 13px ui-monospace,monospace; letter-spacing:.16em; color:#65efff; border:2px solid #24505a; background:#05090d; text-shadow:0 0 10px #35d8ff; }
.den-volt { position:absolute; left:50%; bottom:28px; width:154px; height:154px; transform:translateX(-50%); object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 8px 0 rgba(0,0,0,.55)); }
.den-shelves { position:absolute; inset:0; pointer-events:none; }
.den-trophy { position:absolute; width:48px; height:48px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 4px 0 #000); }
.gear-columns { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gear-columns h3,.den-panel>section h3 { font-size:11px; letter-spacing:.16em; color:#6defff; }
.gear-grid { display:grid; gap:8px; }
.gear-card { width:100%; display:grid; grid-template-columns:38px 1fr auto; gap:8px; align-items:center; text-align:left; padding:10px; border:2px solid rgba(255,255,255,.08); background:#090b13; color:white; }
.gear-card.locked { opacity:.42; filter:grayscale(1); }
.gear-card.selected { border-color:#5cecff; background:#0b1921; }
.gear-card .gear-icon { font-size:22px; text-align:center; }
.gear-card strong { display:block; font-size:10px; }.gear-card small{display:block;font-size:8px;color:#8995a8;line-height:1.35}.gear-card em{font-style:normal;color:#ffe16f;font-size:8px;white-space:nowrap}
.relic-grid { display:flex; flex-wrap:wrap; gap:7px; min-height:42px; }
.relic-chip { display:flex; gap:6px; align-items:center; padding:6px 8px; border:2px solid rgba(84,235,255,.18); background:#090d16; font-size:9px; }
.relic-chip img { width:26px; height:26px; object-fit:contain; image-rendering:pixelated; }

.cache-panel { text-align:center; }
.cache-panel img { display:block; width:122px; height:122px; object-fit:contain; margin:4px auto 8px; image-rendering:pixelated; filter:drop-shadow(0 0 20px rgba(255,190,50,.35)); }
.cache-panel h3 { margin:4px 0; color:#ffe365; }
.cache-panel p { color:#a9b6c9; font-size:11px; line-height:1.45; }
.grade-panel { text-align:center; }
.grade-letter { font:950 clamp(82px,19vw,142px)/.9 ui-monospace,monospace; color:#fff3a3; text-shadow:6px 6px 0 #a63d00, 0 0 26px rgba(255,201,57,.4); margin:10px 0 18px; }
.grade-letter.grade-splus { color:#d7fdff;text-shadow:5px 5px 0 #176ec2,0 0 34px rgba(81,239,255,.58); }
.grade-breakdown { display:grid; gap:5px; text-align:left; }
.grade-row { display:grid; grid-template-columns:1fr auto auto; gap:10px; padding:6px 8px; background:#080a11; border-left:3px solid #39414f; font-size:10px; }
.grade-row b { color:#fff1a0; }

/* Readability / semantic HUD classes used by the canvas renderer */
body.visual-grayscale #game { filter:grayscale(1); }
body.visual-protanopia #game { filter:url(#protanopiaFilter); }
body.visual-deuteranopia #game { filter:url(#deuteranopiaFilter); }
body.visual-tritanopia #game { filter:url(#tritanopiaFilter); }
body.visual-lowlight #game { filter:brightness(.48) contrast(1.18); }

@media(max-width:720px){
  #flowHud { top:calc(136px + var(--safe-t)); right:calc(8px + var(--safe-r)); width:70px; }
  #flowHud b{font-size:18px}.choice-grid{grid-template-columns:1fr}.choice-card{min-height:118px}.gear-columns{grid-template-columns:1fr}.den-scene{min-height:220px}.den-volt{width:126px;height:126px}.choice-panel{max-height:94vh;overflow:auto}
}

.visual-filter-defs{position:absolute;pointer-events:none;width:0;height:0;overflow:hidden}

.menu-brand{position:relative;width:180px;height:112px;margin:0 auto 4px}.menu-brand .logo{position:absolute;left:0;top:8px;width:92px;height:92px;opacity:.78}.menu-volt{position:absolute;right:-4px;bottom:-8px;width:122px;height:122px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 6px 0 rgba(0,0,0,.6))}.menu-brand:after{content:"";position:absolute;left:44px;right:-14px;bottom:2px;height:3px;background:#4beeff;box-shadow:0 0 12px rgba(75,238,255,.6)}

/* Phase 4 // LIVING WARREN */
.run-code-chip{font:950 9px ui-monospace,monospace;letter-spacing:.08em;color:#aef9ff;background:#07131a;border:2px solid rgba(79,238,255,.24);padding:6px 7px;white-space:nowrap}
.signal-entry{display:grid;gap:5px;text-align:left;margin:0 0 8px;padding:8px;border:2px solid rgba(78,239,255,.14);background:#070a12}.signal-entry label{font:900 9px ui-monospace,monospace;letter-spacing:.12em;color:#78efff}.signal-entry label small{float:right;font-weight:600;letter-spacing:0;color:#718092}.signal-entry input{width:100%;min-height:38px;padding:8px 10px;background:#02050a;color:#e9feff;border:2px solid #1d4954;border-radius:0;font:950 15px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.2em;outline:none}.signal-entry input:focus{border-color:#5bf1ff;box-shadow:0 0 14px rgba(62,232,255,.16)}
.full-btn{width:100%;margin-top:14px}.build-line{margin:10px 0 0;text-align:center;font:800 9px ui-monospace,monospace;color:#68758a;letter-spacing:.08em}
.den-stations{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.station-card{display:grid;grid-template-columns:42px 1fr;grid-template-rows:auto auto;gap:3px 10px;text-align:left;padding:11px;background:#070b12;border:2px solid rgba(79,235,255,.18);color:white}.station-card>span{grid-row:1/3;font-size:25px;align-self:center}.station-card strong{font-size:10px;letter-spacing:.08em}.station-card small{color:#8795aa;font-size:8px;line-height:1.35}.station-card:hover{border-color:#5bedff}
.training-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.training-grid .choice-card{min-height:150px}.feedback-panel{text-align:center}.feedback-grid{display:grid;gap:8px}.feedback-grid button{min-height:46px}.awakening-pill{border-color:#fff0a0!important;color:#fff4be!important;background:#1b1206!important}.living-warren .stage-chip{border-style:solid;border-width:2px}.living-warren .choice-card{position:relative;overflow:hidden}.living-warren .choice-card:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:currentColor;opacity:.22}
@media(max-width:720px){.run-code-chip{display:none!important}.den-stations{grid-template-columns:1fr}.training-grid{grid-template-columns:1fr}.signal-entry label small{float:none;display:block;margin-top:2px}.training-panel{max-height:94vh;overflow:auto}}

.den-hint{position:absolute;right:12px;top:12px;font:800 8px ui-monospace,monospace;color:#687b87;letter-spacing:.08em}.den-scene{cursor:crosshair}.den-volt.den-moving{filter:drop-shadow(0 8px 0 rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(83,235,255,.18))}

/* Phase 5 // WARREN ASCENDANT — presentation system */
body.warren-ascendant {
  --panel: rgba(4,9,16,.94);
  --panel2: rgba(11,14,28,.92);
  --wa-cyan:#55f4ff;
  --wa-blue:#268cff;
  --wa-violet:#a25dff;
  --wa-amber:#ffca55;
  --wa-red:#ff4e66;
  --wa-ink:#020407;
  letter-spacing:.01em;
}
body.warren-ascendant #app{background:#020407;isolation:isolate}
body.warren-ascendant #app:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);mix-blend-mode:screen;opacity:.32}
body.warren-ascendant .overlay{background:radial-gradient(circle at 50% 28%,rgba(19,58,74,.34),rgba(5,7,16,.9) 48%,rgba(1,2,6,.97));backdrop-filter:blur(13px) saturate(1.25)}
body.warren-ascendant .menu-overlay{background:
 linear-gradient(90deg,rgba(1,4,9,.95),rgba(2,6,12,.66) 40%,rgba(3,4,12,.82)),
 radial-gradient(circle at 72% 38%,rgba(40,221,255,.22),transparent 34%),
 url('assets/art/voltman-powerup-mode.webp') 72% 45%/cover no-repeat;
}
body.warren-ascendant .menu-overlay:before{content:"WARREN ASCENDANT";position:absolute;right:clamp(20px,6vw,82px);bottom:clamp(22px,7vh,76px);font:950 clamp(12px,2vw,22px)/1 ui-monospace,monospace;letter-spacing:.34em;color:rgba(100,244,255,.32);writing-mode:vertical-rl;text-orientation:mixed;text-shadow:0 0 18px rgba(65,234,255,.35)}
body.warren-ascendant .menu-card{margin-right:min(38vw,440px);width:min(90vw,530px);text-align:left;padding:24px 28px 25px;border:1px solid rgba(92,243,255,.38);border-left:4px solid #54f0ff;background:linear-gradient(150deg,rgba(3,11,18,.97),rgba(10,9,25,.94));clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));box-shadow:0 0 0 1px rgba(255,255,255,.025) inset,0 30px 90px #000b,0 0 80px rgba(42,212,255,.1)}
body.warren-ascendant .menu-brand{margin:0 0 4px;width:192px;height:112px}
body.warren-ascendant h1{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:1000;font-style:italic;letter-spacing:-.04em;text-shadow:4px 4px 0 #073c52,0 0 28px rgba(67,239,255,.45)}
body.warren-ascendant .subtitle{color:#7af5ff;text-align:left;letter-spacing:.52em;padding-left:.2em;text-shadow:0 0 14px rgba(74,237,255,.32)}
body.warren-ascendant .tagline{margin-left:0;color:#afbdc9;border-left:2px solid rgba(255,199,76,.6);padding-left:11px}
body.warren-ascendant .menu-actions{grid-template-columns:1fr 1fr;gap:8px}
body.warren-ascendant .signal-entry{grid-column:1/-1}
body.warren-ascendant #playBtn,body.warren-ascendant #continueBtn{grid-column:1/-1}
body.warren-ascendant button.primary,body.warren-ascendant button.secondary,body.warren-ascendant button.ghost{position:relative;overflow:hidden;border-radius:2px;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}
body.warren-ascendant button.primary:after,body.warren-ascendant button.secondary:after{content:"";position:absolute;left:-30%;top:0;width:22%;height:100%;background:rgba(255,255,255,.12);transform:skewX(-24deg);transition:left .24s ease}
body.warren-ascendant button.primary:hover:after,body.warren-ascendant button.secondary:hover:after{left:115%}
body.warren-ascendant button.primary{background:linear-gradient(90deg,#1dd8e9,#77faff 58%,#42d4ff);box-shadow:0 0 24px rgba(65,235,255,.26)}
body.warren-ascendant button.secondary{background:linear-gradient(135deg,rgba(21,36,52,.94),rgba(11,12,26,.96));border-color:rgba(91,238,255,.2)}
body.warren-ascendant .panel{border-radius:2px;border:1px solid rgba(94,238,255,.25);border-left:3px solid rgba(86,239,255,.58);background:linear-gradient(145deg,rgba(4,10,18,.97),rgba(9,8,24,.96));clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));box-shadow:0 26px 90px #000c,0 0 45px rgba(63,226,255,.07)}
body.warren-ascendant .panel-head{padding-bottom:10px;border-bottom:1px solid rgba(80,232,255,.13)}
body.warren-ascendant .eyebrow{color:#78f5ff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-shadow:0 0 12px rgba(75,238,255,.32)}
body.warren-ascendant .choice-card{border-radius:0;clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);background:linear-gradient(160deg,#111924,#05080e 74%);box-shadow:inset 0 0 28px rgba(43,231,255,.035),0 6px 0 #010204;transition:transform .12s ease,filter .12s ease,border-color .12s ease}
body.warren-ascendant .choice-card:hover{transform:translateY(-4px);filter:brightness(1.14)}
body.warren-ascendant #hud{padding-top:calc(8px + var(--safe-t));background:linear-gradient(180deg,rgba(1,4,8,.92),rgba(1,4,8,.5) 68%,transparent);border-top:2px solid rgba(75,240,255,.08)}
body.warren-ascendant .hud-left,body.warren-ascendant .hud-right{filter:drop-shadow(0 5px 8px rgba(0,0,0,.55))}
body.warren-ascendant .meter-track{height:10px;border-radius:0;background:#05080e;border:1px solid rgba(255,255,255,.07);transform:skewX(-8deg)}
body.warren-ascendant .meter-track i{border-radius:0}
body.warren-ascendant .stage-chip{border-radius:0;border:0;background:linear-gradient(90deg,transparent,rgba(4,13,20,.82) 12%,rgba(4,13,20,.82) 88%,transparent);padding:5px 16px;color:#c7faff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em}
body.warren-ascendant .district-rail{display:flex;gap:5px;align-items:center;justify-content:center;height:13px;margin:0 auto 3px;min-width:185px}
body.warren-ascendant .district-rail i{position:relative;display:block;width:15px;height:4px;background:#19232d;border:1px solid rgba(255,255,255,.09);box-shadow:0 0 0 1px #020407;transform:skewX(-22deg)}
body.warren-ascendant .district-rail i.cleared{background:var(--district,#54efff);box-shadow:0 0 8px var(--district,#54efff)}
body.warren-ascendant .district-rail i.active{width:25px;height:6px;background:var(--district,#fff);box-shadow:0 0 10px var(--district,#fff),0 0 20px var(--district,#fff)}
body.warren-ascendant .district-rail i.boss:after{content:"";position:absolute;right:-3px;top:-4px;width:3px;height:12px;background:#ff7559;opacity:.55}
body.warren-ascendant #flowHud,body.warren-ascendant #resonanceHud{border-radius:0;background:linear-gradient(145deg,rgba(2,8,14,.93),rgba(6,9,18,.9));clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
body.warren-ascendant #flowHud.hot{animation:waFlow .5s steps(2,end) infinite}
@keyframes waFlow{50%{filter:brightness(1.22);transform:translateY(-1px)}}
body.warren-ascendant .level-banner{border:0;border-left:5px solid #55edff;border-right:5px solid #55edff;background:linear-gradient(90deg,transparent,rgba(1,7,12,.96) 16%,rgba(5,11,20,.98) 50%,rgba(1,7,12,.96) 84%,transparent);clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);box-shadow:0 0 50px rgba(55,226,255,.11)}
body.warren-ascendant .level-banner strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-style:italic;text-shadow:3px 3px 0 #071b28,0 0 18px rgba(80,239,255,.24)}
body.warren-ascendant .toast{border-radius:0;border-width:2px;background:rgba(2,7,12,.93);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
body.warren-ascendant .grade-letter{text-shadow:8px 8px 0 #2d1600,0 0 34px rgba(255,215,80,.38);font-style:italic}
body.warren-ascendant .stats-grid .stat{border-radius:0;border-left:3px solid rgba(78,237,255,.28);background:linear-gradient(90deg,rgba(28,48,60,.22),rgba(255,255,255,.02))}
body.warren-ascendant .station-card,body.warren-ascendant .gear-card,body.warren-ascendant .relic-chip{border-radius:0;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%)}
body.warren-ascendant .den-scene{background:
 linear-gradient(180deg,rgba(31,230,255,.035),transparent 38%),
 repeating-linear-gradient(90deg,rgba(42,65,74,.14) 0 2px,transparent 2px 64px),
 repeating-linear-gradient(0deg,rgba(42,65,74,.12) 0 2px,transparent 2px 64px),
 linear-gradient(#080d13 0 64%,#241a17 64% 68%,#05070a 68%);border:2px solid #182f38;box-shadow:inset 0 0 70px #000,0 0 24px rgba(63,228,255,.08)}
body.warren-ascendant .campaign-act{margin:3px 0 11px;text-align:center;font:900 8px ui-monospace,monospace;color:#76eaf3;letter-spacing:.16em;opacity:.65}
body.warren-ascendant input,body.warren-ascendant select{border-radius:0!important}
body.warren-ascendant .action-btn{border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.64),0 0 28px rgba(74,233,255,.18);backdrop-filter:blur(5px)}
body.warren-ascendant .action-btn.zap{background:radial-gradient(circle at 35% 30%,#9affff,#2ac9e9 38%,#065c79 72%,#021a28)}
body.warren-ascendant .action-btn.dash{background:radial-gradient(circle at 35% 30%,#d18bff,#7942ca 43%,#32145e 76%,#120525)}
body.warren-ascendant .stick-ring{border-color:rgba(92,242,255,.3);box-shadow:inset 0 0 30px rgba(67,228,255,.08),0 0 20px rgba(55,213,255,.06)}
body.warren-ascendant .stick-knob{box-shadow:0 0 0 2px #041017,0 0 20px rgba(79,237,255,.38)}
@media(max-width:900px){body.warren-ascendant .menu-card{margin-right:0;width:min(94vw,540px);background:linear-gradient(150deg,rgba(3,11,18,.95),rgba(10,9,25,.94))}body.warren-ascendant .menu-overlay{background:linear-gradient(180deg,rgba(1,4,9,.56),rgba(1,4,9,.92)),url('assets/art/voltman-powerup-mode.webp') center/cover no-repeat}body.warren-ascendant .menu-overlay:before{display:none}}
@media(max-width:720px){body.warren-ascendant .menu-card{padding:17px 18px 18px}body.warren-ascendant .menu-brand{width:150px;height:88px}body.warren-ascendant .menu-brand .logo{width:72px;height:72px}body.warren-ascendant .menu-volt{width:98px;height:98px}body.warren-ascendant h1{font-size:clamp(43px,14vw,64px)}body.warren-ascendant .menu-actions{grid-template-columns:1fr 1fr}body.warren-ascendant .district-rail{min-width:142px;gap:3px}body.warren-ascendant .district-rail i{width:10px}body.warren-ascendant .district-rail i.active{width:18px}.hud-centre{min-width:138px}}
@media(prefers-reduced-motion:reduce){body.warren-ascendant *{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Phase 5 mobile combat framing */
@media (max-height:520px) {
  body.warren-ascendant .level-banner { top:46%; min-width:min(74vw,560px); padding:10px 20px; }
  body.warren-ascendant .level-banner strong { font-size:clamp(24px,5vw,34px); line-height:.95; white-space:nowrap; }
  body.warren-ascendant .level-banner small { font-size:8px; }
  body.warren-ascendant .level-banner span { font-size:10px; }
  body.warren-ascendant #resonanceHud { top:calc(86px + var(--safe-t)); transform:translateX(-50%) scale(.88); }
}