:root{--cyan:#55eaff;--mag:#ff4fcb;--yellow:#ffd860;--green:#72ff96;--red:#ff526d;--bg:#050817;--panel:#0c1328;--text:#eefaff;--muted:#8aa7b6}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#030612;color:var(--text);font-family:Consolas,"Courier New",monospace}body{overflow-x:hidden;background:radial-gradient(circle at 50% 0,#11183b,#030612 56%)}button,a{font:inherit}.scanlines{position:fixed;inset:0;pointer-events:none;z-index:100;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(255,255,255,.018) 3px 4px)}.game-topbar{height:72px;position:sticky;top:0;z-index:30;background:rgba(5,8,23,.94);border-bottom:1px solid #26395e;display:grid;grid-template-columns:150px 1fr auto;gap:18px;align-items:center;padding:8px 18px;backdrop-filter:blur(8px)}.back{color:var(--cyan);text-decoration:none;font-size:11px;letter-spacing:1px}.game-name{text-align:center}.game-name span{display:block;color:#ff76dc;font-size:8px;letter-spacing:2px}.game-name b{font-size:16px;letter-spacing:1.5px;color:#fff}.top-actions{display:flex;gap:7px}.top-actions button{border:1px solid #344b70;background:#0a1529;color:#bdeef5;padding:8px 10px;font-size:9px;cursor:pointer}.game-shell{max-width:1600px;margin:auto;padding:16px;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px}.game-column{min-width:0;display:grid;grid-template-rows:auto auto minmax(350px,calc(100dvh - 260px)) auto auto;gap:7px}.hud{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.hud>div{border:1px solid #243d59;background:linear-gradient(#0e1d34,#07111e);padding:6px 8px;min-width:0}.hud span{display:block;font-size:7px;letter-spacing:1.4px;color:#7293a3}.hud b{display:block;margin-top:2px;color:#e7ff75;font-size:clamp(13px,1.5vw,20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meters{display:grid;grid-template-columns:1fr 1fr;gap:8px}.meters>div{display:grid;grid-template-columns:58px 1fr;gap:6px;align-items:center;font-size:7px;color:#83a5b3}.meters i{display:block;height:7px;border:1px solid #29495b;background:#06101a}.meters em{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));box-shadow:0 0 8px var(--cyan);transition:width .15s}.meters>div:last-child em{background:linear-gradient(90deg,var(--mag),var(--yellow));box-shadow:0 0 8px var(--mag)}.stage-wrap{position:relative;border:2px solid var(--cyan);box-shadow:0 0 28px #55eaff22 inset,0 0 25px #ff4fcb18;overflow:hidden;background:#050a12;min-height:0;touch-action:none}#gameCanvas{display:block;width:100%;height:100%;object-fit:contain;background:#050912;touch-action:none}.overlay{position:absolute;inset:0;z-index:10;background:radial-gradient(circle at 50% 40%,rgba(14,34,57,.78),rgba(2,5,14,.95));display:grid;place-items:center;padding:18px}.overlay.hidden{display:none}.overlay-panel{width:min(650px,94%);border:2px solid var(--mag);padding:22px;background:linear-gradient(160deg,#101333f2,#050915f2);box-shadow:0 0 32px #ff4fcb44,0 0 32px #55eaff22 inset}.kicker{font-size:8px;letter-spacing:2px;color:var(--cyan)}.overlay h1{font:900 clamp(25px,4vw,48px)/1 Arial,sans-serif;color:var(--yellow);margin:8px 0;text-shadow:0 0 16px #ffad00}.overlay p{font:14px/1.55 Arial,sans-serif;color:#d4e9ef}.instruction-grid{display:flex;flex-wrap:wrap;gap:6px;margin:13px 0}.instruction-grid span{font-size:8px;border:1px solid #314a67;padding:6px 8px;color:#a9dce5}.primary{border:2px solid var(--cyan);background:#0a2b3d;color:#fff;padding:11px 17px;cursor:pointer;font-weight:900;letter-spacing:1px}.share-row{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap}.share-row[hidden]{display:none}.share-row button{border:1px solid #3c5374;background:#0b1530;color:#c8e8ef;padding:7px 10px;cursor:pointer;font-size:9px}.toast{position:absolute;z-index:8;top:10px;left:50%;transform:translate(-50%,-20px);opacity:0;background:#0c152be8;border:1px solid var(--yellow);color:#fff4a0;padding:7px 11px;font-size:9px;font-weight:bold;transition:.18s;pointer-events:none}.toast.on{transform:translate(-50%,0);opacity:1}.mobile-controls{display:none;align-items:center;justify-content:space-between;gap:18px;touch-action:none}.dpad{display:grid;grid-template-columns:58px 58px 58px;grid-template-rows:50px 50px;gap:5px}.dpad button,.vacuum{border:1px solid #4ddff0;background:linear-gradient(#0c2b44,#07192b);color:#fff;box-shadow:0 0 12px #55eaff22;touch-action:none;user-select:none}.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}.vacuum{width:100px;height:100px;border-radius:50%;border-color:#ff5bd3}.vacuum span{display:block;font-size:28px;color:#ff70d9}.vacuum b{font-size:9px}.legend{display:flex;gap:15px;align-items:center;flex-wrap:wrap;color:#83aab6;font-size:8px}.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.green{background:var(--green)}.pink{background:var(--mag)}.yellow{background:var(--yellow)}.desktop-help{margin-left:auto}.district-panel{border:1px solid #263958;background:#07101f;display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 104px);position:sticky;top:88px}.district-head{padding:12px;border-bottom:1px solid #263958}.district-head span{display:block;font-size:8px;letter-spacing:1.8px;color:var(--cyan)}.district-head b{display:block;color:#fff;margin-top:5px}.district-head small{display:block;color:#718a9a;margin-top:4px}.district-list{overflow:auto;padding:5px}.district-item{padding:7px 8px;border-bottom:1px solid #132641;color:#698797;font-size:8px;display:flex;gap:8px}.district-item.current{color:#ffdf71;background:#17152b}.district-item.done{color:#7cff9b}.district-item i{font-style:normal;width:14px;text-align:center}footer{max-width:1600px;margin:auto;padding:0 16px 18px;display:flex;justify-content:space-between;gap:15px;color:#526d7b;font-size:8px}.paused:after{content:"PAUSA";position:absolute;inset:0;z-index:9;background:rgba(2,5,14,.72);display:grid;place-items:center;font-size:50px;color:var(--yellow);text-shadow:0 0 18px #ff5bd3}
@media(max-width:1000px){.game-shell{grid-template-columns:1fr}.district-panel{position:static;max-height:none}.district-list{display:grid;grid-template-columns:repeat(4,1fr);max-height:200px}.game-column{grid-template-rows:auto auto minmax(380px,60dvh) auto auto}.mobile-controls{display:flex}.desktop-help{display:none}}
@media(max-width:700px){.game-topbar{height:60px;grid-template-columns:70px 1fr auto;padding:6px 8px}.game-name b{font-size:11px}.game-name span{font-size:6px}.top-actions button{font-size:7px;padding:6px}.top-actions #soundBtn{display:none}.game-shell{padding:7px;gap:7px}.game-column{grid-template-rows:auto minmax(300px,50dvh) auto auto}.hud{grid-template-columns:repeat(3,1fr)}.hud>div:nth-child(6){display:none}.meters{display:none}.stage-wrap{min-height:300px}.mobile-controls{padding:4px 8px}.district-list{grid-template-columns:repeat(2,1fr);max-height:170px}.overlay{padding:8px}.overlay-panel{padding:15px}.instruction-grid span{font-size:7px}.legend{display:none}footer{display:block;line-height:1.7}.dpad{grid-template-columns:52px 52px 52px;grid-template-rows:45px 45px}.vacuum{width:92px;height:92px}}
@media(max-width:430px){.game-column{grid-template-rows:auto minmax(270px,46dvh) auto}.hud>div:nth-child(4),.hud>div:nth-child(5){display:none}.hud{grid-template-columns:repeat(3,1fr)}.stage-wrap{min-height:270px}.dpad{grid-template-columns:48px 48px 48px;grid-template-rows:42px 42px}.vacuum{width:84px;height:84px}.game-shell{padding-bottom:4px}.district-panel{margin-top:3px}}
@media(orientation:landscape) and (max-height:620px){.game-topbar{height:50px}.game-shell{grid-template-columns:minmax(0,1fr) 200px;padding:5px}.game-column{grid-template-rows:auto minmax(300px,calc(100dvh - 130px)) auto}.hud{grid-template-columns:repeat(6,1fr)}.hud>div:nth-child(n){display:block}.meters{display:none}.mobile-controls{position:absolute;z-index:20;left:18px;right:18px;bottom:18px;pointer-events:none}.mobile-controls button{pointer-events:auto;opacity:.78}.district-panel{position:sticky;top:55px;max-height:calc(100dvh - 60px)}.district-list{display:block;max-height:none}.legend{display:none}footer{display:none}}