*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#090d24;color:#fff;font-family:Arial,Helvetica,sans-serif}body{touch-action:none;user-select:none}.game-shell{position:relative;width:100%;height:100%;min-height:280px;overflow:hidden;background:radial-gradient(circle at 50% 50%,#17245b 0,transparent 55%),#090d24}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.hud{position:absolute;z-index:2;inset:9px 9px auto;display:flex;justify-content:space-between;gap:8px;pointer-events:none}.hud-group{display:flex;flex-wrap:wrap;gap:5px;max-width:62%}.hud-pill,.node-panel{border:1px solid rgba(255,255,255,.14);background:rgba(6,9,31,.8);box-shadow:0 10px 32px rgba(0,0,0,.3);backdrop-filter:blur(8px)}.hud-pill{margin:0;border-radius:99px;padding:7px 10px;color:#9aa7cf;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.hud-pill strong{margin-left:3px;color:#67e8f9;font-size:12px}.node-panel{width:min(185px,35vw);border-radius:13px;padding:8px 10px}.node-panel p{display:flex;justify-content:space-between;margin:0;color:#9aa7cf;font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.node-panel p:last-child{margin-top:5px}.node-panel strong{color:#fff}.node-panel b{color:#f0abfc}.progress{height:5px;margin-top:5px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.1)}.progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#22d3ee,#a855f7,#f0abfc);box-shadow:0 0 12px #22d3ee;transition:width .18s ease}
.announcement{position:absolute;z-index:3;top:19%;left:50%;width:92%;margin:0;transform:translateX(-50%);color:#fff;font-size:clamp(23px,5.5vw,48px);font-weight:1000;text-align:center;text-shadow:0 4px 24px #030615;opacity:0;pointer-events:none;transition:.18s ease}.announcement.visible{opacity:1;transform:translateX(-50%) translateY(-5px)}.overlay,.pause-panel{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:18px;background:rgba(5,7,24,.74);backdrop-filter:blur(8px);transition:opacity .18s ease}.overlay.hidden,.pause-panel.hidden{visibility:hidden;opacity:0;pointer-events:none}.panel,.pause-panel>div{border:1px solid rgba(255,255,255,.16);border-radius:27px;background:radial-gradient(circle at 50% 0%,rgba(34,211,238,.13),transparent 42%),linear-gradient(145deg,rgba(24,34,82,.98),rgba(17,14,55,.98));box-shadow:0 30px 100px rgba(0,0,0,.55);text-align:center}.panel{width:min(525px,100%);padding:clamp(21px,5vw,38px)}.pause-panel>div{width:min(330px,100%);padding:28px}.kicker{margin:0;color:#f0abfc;font-size:10px;font-weight:1000;letter-spacing:.2em;text-transform:uppercase}h1,h2{margin:10px 0 0;line-height:.94;letter-spacing:-.055em;text-transform:uppercase}h1{font-size:clamp(36px,8vw,64px)}h2{font-size:40px}#screen-copy,.pause-panel p:last-child{margin:15px auto 0;max-width:415px;color:#c6cdea;font-size:14px;line-height:1.55}button{margin-top:21px;border:0;border-radius:99px;padding:13px 24px;background:#67e8f9;color:#0c1231;font:inherit;font-size:13px;font-weight:1000;cursor:pointer;box-shadow:0 12px 34px rgba(34,211,238,.2)}button:hover{transform:translateY(-2px);background:#fff}button:focus-visible{outline:3px solid #fff;outline-offset:4px}.controls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}.controls-grid p{display:grid;gap:3px;margin:0;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:9px;background:rgba(255,255,255,.035);font-size:10px}.controls-grid strong{text-transform:uppercase}.controls-grid span{color:#9aa7cf}
@media(max-width:560px),(max-height:440px){.hud{inset:5px}.hud-pill{padding:5px 7px;font-size:7px}.hud-pill strong{font-size:9px}.node-panel{padding:6px 8px}.panel{padding:17px 20px}.controls-grid{margin-top:12px}}@media(max-height:360px){#screen-copy{margin-top:8px;font-size:12px}button{margin-top:10px;padding-block:10px}.controls-grid{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}