:root{
  --navy:#061a3a;--blue:#0d4f8b;--royal:#1261a0;--green:#35d06f;--lime:#82f59e;--gold:#ffd25b;--white:#f7fbff;--ink:#091426;--panel:rgba(4,14,34,.95);--danger:#ff5569;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#030a18;color:var(--white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overscroll-behavior:none}
body{background:radial-gradient(circle at 50% 0,#123c71 0,transparent 36%),linear-gradient(180deg,#071831,#020711 72%);overflow-x:hidden}
button,a{font:inherit}
button{cursor:pointer}
#siteShell{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}
#topbar{height:64px;padding:8px clamp(10px,2vw,28px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(180deg,rgba(2,13,32,.98),rgba(6,26,58,.93));border-bottom:3px solid var(--green);position:relative;z-index:50;box-shadow:0 8px 32px #0008}
.brand{text-decoration:none;color:#fff;font-weight:1000;letter-spacing:-.055em;line-height:.86;font-size:24px;display:flex;flex-direction:column;text-shadow:2px 2px #000}.brandMayor{color:#fff}.brandMania{color:var(--green);font-size:1.08em}
nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.navBtn,.campaignLink{border:1px solid #6aa7d6;background:#08234a;color:#fff;padding:8px 11px;text-decoration:none;border-radius:7px;font-size:13px;font-weight:800;box-shadow:0 3px 0 #020915;transition:.15s transform,.15s background}.navBtn:hover,.campaignLink:hover{transform:translateY(-1px);background:#0f477c}.campaignLink{background:var(--green);border-color:#9dffb1;color:#042211}
#gameWrap{display:grid;place-items:center;padding:12px}
#cabinet{width:min(1280px,calc(100vw - 24px));aspect-ratio:16/9;position:relative;overflow:hidden;border:4px solid var(--gold);border-radius:16px;background:#020713;box-shadow:0 0 0 4px #0a3768,0 26px 100px #000c;isolation:isolate}
canvas{display:block;width:100%;height:100%;background:#06152d;image-rendering:pixelated;touch-action:none}
#scanlines{position:absolute;inset:0;z-index:25;pointer-events:none;opacity:.22;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.08) 2px 4px),radial-gradient(circle at 50% 45%,transparent 55%,#0009 100%);mix-blend-mode:soft-light}
#hud{position:absolute;z-index:16;left:10px;right:10px;top:9px;display:grid;grid-template-columns:1fr minmax(105px,.25fr) 1fr;gap:12px;align-items:start;pointer-events:none;text-shadow:2px 2px #000}
.hudPlayer,.hudBoss{display:flex;align-items:flex-start;gap:8px}.hudBoss{justify-content:flex-end}.hudPlayer img,.hudBoss img{width:58px;height:58px;object-fit:cover;border:3px solid var(--gold);background:#051027;box-shadow:3px 3px #000;border-radius:6px}.hudStack{flex:1;max-width:330px}.hudStack.right{text-align:right}.hudName{font-weight:1000;font-size:clamp(11px,1.1vw,16px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.bar{height:15px;border:2px solid #fff8ca;background:#111728;overflow:hidden;box-shadow:2px 2px #000;border-radius:3px}.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#1fe066,#b7ef48,#ffd34d,#ff5269);transition:width .12s}.bar.compute{height:9px;border-color:#77d6ff}.bar.compute i{background:linear-gradient(90deg,#18aaff,#45e5ff,#87ffbb)}.bar.trust{height:9px;border-color:#78ff9a}.bar.trust i{background:linear-gradient(90deg,#35d06f,#f5ed68)}.bar.boss{height:15px;border-color:#ffdd73}.bar.boss i{background:linear-gradient(90deg,#ff9b36,#ff536d,#aa43ff)}
.meterRow{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:6px;font-size:8px;font-weight:1000;margin-top:3px}.hudStack.right .meterRow{grid-template-columns:1fr 64px}.hudStack.right .meterRow span{grid-column:2;grid-row:1}.hudStack.right .meterRow .bar{grid-column:1;grid-row:1}.bossPhase{font-size:9px;color:#ffe891;font-weight:900;margin-top:3px}.hudCentre{text-align:center;background:rgba(1,9,25,.78);border:2px solid #6fb4e8;padding:5px 8px;border-radius:6px;box-shadow:2px 2px #000}.hudCentre div:first-child{font-size:10px;color:#9deaff;font-weight:900}.hudCentre div:nth-child(2){font:1000 clamp(14px,1.5vw,22px)/1 Consolas,monospace;color:#ffe276}.hudCentre div:last-child{font:1000 12px/1 Consolas;color:#75ff99;min-height:13px;margin-top:3px}
#message{position:absolute;z-index:18;left:10%;right:10%;top:20%;text-align:center;font:1000 clamp(22px,4vw,52px)/.95 Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;text-transform:uppercase;letter-spacing:.03em;text-shadow:3px 3px #000,0 0 16px #000;pointer-events:none;white-space:pre-line}
#loading{position:absolute;inset:0;z-index:40;display:grid;place-content:center;gap:10px;text-align:center;background:linear-gradient(#061a3af2,#020713fa)}#loading[hidden]{display:none}.spinner{width:56px;height:56px;border:6px solid #2c5581;border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;margin:auto}@keyframes spin{to{transform:rotate(360deg)}}#loadText{font-size:12px;color:#a9c7e7}
#overlay{position:absolute;inset:0;z-index:32;display:grid;place-items:center;padding:18px;background:linear-gradient(rgba(3,10,25,.22),rgba(2,7,19,.92));overflow:auto}#overlay[hidden]{display:none}.panel{width:min(1050px,96%);max-height:96%;overflow:auto;padding:clamp(18px,3vw,34px);background:linear-gradient(145deg,rgba(7,31,67,.96),rgba(3,13,30,.97));border:4px solid var(--gold);border-radius:14px;box-shadow:0 0 0 4px #0b4b81,8px 8px 0 #0009;text-align:center}.panel h1,.panel h2{margin:.15em 0;color:#fff;text-transform:uppercase;letter-spacing:-.035em}.panel h1{font:1000 clamp(42px,7vw,92px)/.8 Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;text-shadow:4px 4px #031023}.panel h1 em{display:block;font-style:normal;color:var(--green);font-size:.72em}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:#ffe083;font-weight:900;font-size:12px}.lead{max-width:72ch;margin:12px auto;color:#d5e6f7;line-height:1.55}.menuRow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}.arcadeBtn{border:3px solid #eaf8ff;background:linear-gradient(#48e87e,#1fa756);color:#051c10;padding:12px 18px;text-transform:uppercase;font-weight:1000;border-radius:7px;box-shadow:4px 4px #001c0a;min-width:150px}.arcadeBtn.blue{background:linear-gradient(#65c9ff,#2674c6);color:#041328;box-shadow:4px 4px #03142b}.arcadeBtn.gold{background:linear-gradient(#ffe474,#e79e27);color:#261500;box-shadow:4px 4px #321b00}.arcadeBtn.dark{background:#071b38;color:#fff;border-color:#4d87b7;box-shadow:4px 4px #000}.arcadeBtn.red{background:linear-gradient(#ff7d83,#c63450);color:#25030a}.arcadeBtn:focus-visible,.navBtn:focus-visible,.face:focus-visible,.dpad button:focus-visible{outline:4px solid #fff;outline-offset:2px}
.titleArt{width:min(760px,96%);max-height:250px;object-fit:cover;object-position:center;border:3px solid #6fcfff;border-radius:10px;box-shadow:0 12px 35px #000b;margin:8px auto}.titleTag{font:1000 clamp(15px,2vw,24px)/1.1 Georgia,serif;color:#ffe083;margin-top:8px}.tiny{font-size:11px;color:#9eb7d2;line-height:1.45}.keyboardGrid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:8px;margin:18px auto;max-width:760px}.keyCard{border:2px solid #4c87bd;background:#04142d;padding:12px;border-radius:8px}.keyCard b{display:block;font-size:24px;color:#ffe36c}.keyCard span{font-size:11px;color:#a9c7e7}.stageGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:18px}.stageCard{border:3px solid #245f91;background:#04142d;color:#fff;padding:0;text-align:left;border-radius:8px;overflow:hidden;box-shadow:3px 3px #000}.stageCard.locked{filter:grayscale(1);opacity:.5}.stageCard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.stageCard strong{display:block;padding:7px 8px 2px;color:#ffe083;font-size:11px}.stageCard small{display:block;padding:0 8px 8px;color:#a8bfd8;font-size:9px}.stageCard:hover:not(.locked){border-color:#65f59a;transform:translateY(-2px)}.briefing{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;text-align:left}.briefing img{width:100%;aspect-ratio:16/9;object-fit:cover;border:3px solid #6fcfff}.briefing h2{font-size:clamp(28px,4vw,52px)}.bossTag{display:inline-flex;align-items:center;gap:8px;background:#31113c;border:2px solid #ff9fd2;padding:7px 10px;border-radius:30px;color:#ffd6ec;font-weight:900;font-size:12px}.bossTag img{width:34px;height:34px;border:0;border-radius:50%;object-fit:cover}.settingList{display:grid;gap:12px;max-width:620px;margin:18px auto;text-align:left}.settingRow{display:flex;justify-content:space-between;align-items:center;gap:14px;background:#061b3b;border:1px solid #346d9f;padding:12px;border-radius:8px}.settingRow label{font-weight:800}.settingRow select,.settingRow input{accent-color:var(--green);padding:7px;background:#021027;color:#fff;border:1px solid #68a5d2}
.cornerButton{position:absolute;z-index:22;top:78px;width:34px;height:34px;border:2px solid #cdeeff;background:#061b3dcc;color:#fff;font-weight:1000;border-radius:7px;box-shadow:2px 2px #000}.cornerButton:hover{background:#13568d}#pauseButton{right:50px}#fullscreenButton{right:10px}
#touchControls{position:absolute;z-index:21;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.dpad,.faceButtons{pointer-events:auto;user-select:none;-webkit-user-select:none}.dpad{width:142px;height:142px;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:4px}.dpad button,.face{border:2px solid #dff6ff;background:rgba(4,25,57,.82);color:#fff;border-radius:10px;box-shadow:2px 3px #000;touch-action:none;font-weight:1000}.dpad .up{grid-column:2}.dpad .left{grid-column:1;grid-row:2}.dpad .down{grid-column:2;grid-row:2}.dpad .right{grid-column:3;grid-row:2}.faceButtons{width:190px;height:142px;position:relative}.face{position:absolute;width:58px;height:58px;border-radius:50%;display:grid;place-content:center;line-height:.85}.face b{font-size:24px}.face small{font-size:7px;margin-top:4px}.face.y{left:0;top:42px;background:#4db5e8cc}.face.x{left:61px;top:0;background:#4fbf70cc}.face.b{left:61px;top:84px;background:#e4bd3ecc;color:#1c1400}.face.a{right:0;top:42px;background:#df5364dd}
#footer{min-height:45px;padding:9px clamp(12px,2vw,28px);display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:11px;color:#9bb5cf;border-top:1px solid #164b78;background:#020914}.footerLinks{display:flex;gap:12px;align-items:center}.footerLinks button,.footerLinks a{border:0;background:none;color:#78cfff;padding:0;text-decoration:none}
.orientationHint{display:none}
@media (pointer:fine) and (min-width:800px){#touchControls{opacity:.18;transition:.2s opacity}#touchControls:hover{opacity:.9}}
@media (max-width:900px){#topbar{height:auto;min-height:54px}.navBtn{display:none}.campaignLink{font-size:11px;padding:7px 9px}.stageGrid{grid-template-columns:repeat(2,1fr)}.briefing{grid-template-columns:1fr}.keyboardGrid{grid-template-columns:repeat(2,1fr)}#footer{display:none}#gameWrap{padding:4px}#cabinet{width:calc(100vw - 8px);border-width:2px;border-radius:8px}.hudPlayer img,.hudBoss img{width:42px;height:42px}.hudCentre{padding:3px}.meterRow{grid-template-columns:48px 1fr}.cornerButton{top:60px}}
@media (max-height:540px){#topbar,#footer{display:none}#siteShell{display:block}#gameWrap{padding:0}#cabinet{width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0}.cornerButton{top:8px}.panel{max-height:98%;padding:12px}.titleArt{max-height:150px}.lead{margin:7px auto}.menuRow{margin-top:9px}.stageGrid{grid-template-columns:repeat(5,1fr)}.stageCard strong{font-size:9px}}
@media (orientation:portrait) and (max-width:650px){#cabinet{margin-top:8vh;aspect-ratio:16/10}#touchControls{bottom:4px}.dpad{transform:scale(.82);transform-origin:left bottom}.faceButtons{transform:scale(.82);transform-origin:right bottom}.panel h1{font-size:48px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}