:root{color-scheme:dark;--cyan:#52f7ff;--blue:#2885ff;--violet:#9c5cff;--panel:rgba(9,15,35,.72);--line:rgba(116,214,255,.2)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#03050d;color:#e9f7ff;font-family:Inter,"Segoe UI",Arial,sans-serif}body{min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 50% 42%,#152052 0,#080b20 35%,#03050d 72%)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(64,114,190,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(64,114,190,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle,#000 20%,transparent 78%)}
.aurora{position:fixed;inset:-20%;pointer-events:none;background:conic-gradient(from 130deg at 50% 50%,transparent,#405cff22,transparent 24%,#9a3cff18,transparent 47%,#1be5ff1c,transparent 70%);filter:blur(55px);animation:drift 18s linear infinite}
.stars{position:fixed;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(#bafcff 1px,transparent 1px);background-size:57px 57px;animation:stars 35s linear infinite}.stars-b{opacity:.25;background-size:91px 91px;background-position:22px 13px;animation-duration:52s}
@keyframes stars{to{transform:translateY(91px)}}@keyframes drift{to{transform:rotate(360deg)}}
.app-shell{position:relative;z-index:1;width:min(1420px,100%);margin:auto;padding:18px 28px 12px}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:18px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--cyan);clip-path:polygon(16% 0,84% 0,100% 50%,84% 100%,16% 100%,0 50%);color:var(--cyan);font-weight:900;font-size:12px;text-shadow:0 0 12px var(--cyan);box-shadow:0 0 20px #52f7ff33}.brand b{display:block;letter-spacing:.18em;font-size:14px}.brand small{display:block;margin-top:3px;color:#6e85ac;font-size:9px;letter-spacing:.16em}.top-actions{display:flex;align-items:center;gap:10px}.top-actions button{border:1px solid var(--line);background:#0a1025aa;color:#cceeff;padding:9px 14px;border-radius:3px;cursor:pointer;font-size:12px}.top-actions button:hover{border-color:var(--cyan);color:#fff;box-shadow:0 0 18px #52f7ff22}.live{font-size:10px;letter-spacing:.14em;color:#72d8b0;margin-right:6px}.live i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4dffb1;box-shadow:0 0 10px #4dffb1;margin-right:7px}
.stage-layout{display:grid;grid-template-columns:minmax(210px,1fr) minmax(430px,560px) minmax(210px,1fr);align-items:center;gap:34px}.panel{border:1px solid var(--line);background:linear-gradient(145deg,rgba(13,22,50,.78),rgba(5,9,24,.6));backdrop-filter:blur(12px);padding:25px;position:relative}.panel:before{content:"";position:absolute;left:-1px;top:22px;width:2px;height:46px;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}.eyebrow{color:var(--cyan);font-size:9px;letter-spacing:.28em}.briefing h1{font-size:clamp(28px,3vw,48px);line-height:1.02;letter-spacing:-.04em;margin:20px 0}.briefing h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #84eaff;text-shadow:0 0 22px #38bfff55}.briefing>p{color:#8494b5;line-height:1.75;font-size:13px}.difficulty{margin:30px 0;border-top:1px solid var(--line);padding-top:18px}.difficulty span{font-size:10px;color:#7790b4}.difficulty strong{float:right;color:var(--cyan)}.difficulty div{display:flex;gap:5px;margin-top:11px}.difficulty i{height:3px;flex:1;background:linear-gradient(90deg,var(--blue),var(--cyan));box-shadow:0 0 8px #28dfff}.difficulty i:nth-last-child(-n+2){opacity:.16}.tip{padding:14px;border-left:2px solid var(--violet);background:#7755ff0d}.tip b,.tip span{display:block}.tip b{font-size:11px;color:#d4caff;margin-bottom:6px}.tip span{font-size:10px;color:#7786a4;line-height:1.5}
.cabinet{position:relative;background:#080d20;border:1px solid #39779e;padding:9px;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);box-shadow:0 0 65px #245aff22}.cabinet:before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(130deg,var(--cyan),transparent 18%,transparent 82%,var(--violet));opacity:.5;z-index:-1}.cabinet-head,.cabinet-foot{height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 7px;font-size:8px;letter-spacing:.18em;color:#6484a3}.cabinet-head .fps{color:#9be9d1}.screen-wrap{position:relative;margin:auto;width:100%;aspect-ratio:5/7;overflow:hidden;background:#000;border:1px solid #174269;box-shadow:inset 0 0 55px #000,0 0 25px #168cff28}.screen-wrap canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto;filter:saturate(1.13) contrast(1.05)}.screen-glass{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.045),transparent 18%,transparent 76%,rgba(108,77,255,.04));mix-blend-mode:screen}.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.12) 1px,transparent 1px,transparent 4px);opacity:.35}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 55px 12px rgba(0,0,0,.46)}.corner{position:absolute;width:18px;height:18px;border-color:var(--cyan);opacity:.7}.tl{left:9px;top:9px;border-left:1px solid;border-top:1px solid}.tr{right:9px;top:9px;border-right:1px solid;border-top:1px solid}.bl{left:9px;bottom:9px;border-left:1px solid;border-bottom:1px solid}.br{right:9px;bottom:9px;border-right:1px solid;border-bottom:1px solid}.cabinet-foot{color:#52718c}.cabinet-foot span:first-child{color:#7af9ca}.cabinet-foot span:last-child{color:#ff82bd}
.controls h2{margin:13px 0 24px;font-size:23px}.control-row{display:flex;align-items:center;gap:18px;padding:17px 0;border-bottom:1px solid rgba(112,173,224,.12)}.keys{width:62px;display:flex;flex-direction:column;align-items:center;gap:3px}.keys span{display:flex;gap:3px}kbd,.key-wide{display:grid;place-items:center;width:20px;height:20px;border:1px solid #466884;background:linear-gradient(#172542,#0b1429);border-radius:3px;color:#bde9ff;font:700 9px inherit;box-shadow:inset 0 -2px #050911}.key-wide{width:62px;height:36px;font-size:14px}.key-wide.accent{border-color:#765ac9;color:#d8caff}.control-row b,.control-row small{display:block}.control-row b{font-size:12px;margin-bottom:5px}.control-row small{font-size:9px;color:#6c7e9d}.signal{margin-top:25px;font-size:9px;color:#6f87a9}.signal b{float:right;color:#58e9b2}.signal-line{clear:both;height:34px;margin-top:12px;background:linear-gradient(transparent 48%,#38d9aa33 50%,transparent 52%),linear-gradient(90deg,transparent 0 8%,#38d9aa 9% 10%,transparent 11% 18%,#38d9aa 19% 20%,transparent 21% 44%,#38d9aa 45% 46%,transparent 47%);clip-path:polygon(0 55%,9% 55%,12% 20%,16% 85%,20% 55%,43% 55%,46% 37%,49% 65%,52% 55%,100% 55%)}.desktop-note{font-size:9px;color:#566a8a;margin:4px 0 0}footer{display:flex;justify-content:space-between;color:#455776;font-size:8px;letter-spacing:.18em;padding-top:12px}
.toast{position:fixed;left:50%;bottom:28px;z-index:10;transform:translate(-50%,20px);opacity:0;background:#0d1834e8;border:1px solid var(--cyan);padding:11px 18px;color:#dffcff;font-size:12px;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1050px){.stage-layout{grid-template-columns:1fr minmax(400px,540px)}.briefing{display:none}.app-shell{padding-inline:18px}}@media(max-width:760px){.app-shell{padding:8px}.topbar{height:54px}.live,.brand small{display:none}.top-actions button{padding:8px 9px}.stage-layout{display:block}.controls{display:none}.cabinet{max-width:540px;margin:auto}footer{padding-inline:8px}.cabinet-head,.cabinet-foot{font-size:6px}.brand b{font-size:12px}}
:fullscreen .screen-wrap{height:100vh;width:auto;aspect-ratio:5/7;border:0}:fullscreen .cabinet-head,:fullscreen .cabinet-foot{display:none}:fullscreen .cabinet{height:100vh;padding:0;border:0;display:grid;place-items:center;background:#000}
@media(prefers-reduced-motion:reduce){.stars,.aurora{animation:none}}
.mobile-controls{display:none;position:absolute;inset:0;z-index:5;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none}.touch-key{pointer-events:auto;touch-action:none;border:1px solid rgba(115,228,255,.5);background:rgba(5,16,35,.58);color:#c8faff;box-shadow:inset 0 0 18px rgba(32,165,255,.14),0 0 12px rgba(20,194,255,.12);backdrop-filter:blur(4px);-webkit-tap-highlight-color:transparent}.touch-key.pressed{background:rgba(33,210,255,.32);border-color:#7cffff;transform:scale(.94);box-shadow:inset 0 0 24px rgba(71,235,255,.42),0 0 18px rgba(30,216,255,.42)}.touch-dpad{position:absolute;left:4%;bottom:4%;width:35%;aspect-ratio:1;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:3px}.touch-dpad .up{grid-area:1/2}.touch-dpad .left{grid-area:2/1}.touch-dpad .down{grid-area:3/2}.touch-dpad .right{grid-area:2/3}.touch-dpad button{border-radius:10px;font-size:clamp(12px,4vw,20px)}.touch-actions{position:absolute;right:4%;bottom:5%;width:37%;aspect-ratio:1.35;display:flex;align-items:flex-end;justify-content:space-between}.touch-actions button{border-radius:50%;font-weight:800;letter-spacing:.06em}.touch-actions .fire{width:58%;aspect-ratio:1;color:#fff0f8;border-color:rgba(255,105,183,.65);background:rgba(96,12,70,.52)}.touch-actions .focus{width:40%;aspect-ratio:1;font-size:8px;margin-bottom:40%;color:#ddd2ff;border-color:rgba(158,112,255,.6);background:rgba(52,28,95,.55)}
@media(max-width:760px),(pointer:coarse){body{overscroll-behavior:none}.app-shell{padding:5px}.topbar{height:48px;margin-bottom:5px}.live,.brand small{display:none}.brand-mark{width:30px;height:30px}.top-actions button{padding:7px 8px}.stage-layout{display:block}.controls{display:none}.cabinet{max-width:540px;margin:auto;padding:5px}.mobile-controls{display:block}footer{display:none}.cabinet-head,.cabinet-foot{font-size:6px;height:18px}.screen-wrap{max-height:calc(100dvh - 94px);width:auto;max-width:100%;touch-action:none}.brand b{font-size:11px}:fullscreen .mobile-controls{display:block}:fullscreen .screen-wrap{max-height:100dvh}}