@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Noto+Sans+SC:wght@400;600;700;900&display=swap');
:root{--ink:#eaf3ff;--muted:#8496ad;--blue:#39a8ff;--red:#ff526f;--panel:#101a2a;--line:#24344b;--bg:#070c14}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:"Chakra Petch","Noto Sans SC",sans-serif}body{min-height:100vh;background:radial-gradient(circle at 50% -20%,#1a3151 0,#0b1422 38%,#060a11 80%);overflow-x:hidden}.shell{width:min(1420px,100%);margin:auto;padding:18px 28px 22px}.topbar{height:62px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;letter-spacing:.08em}.brand-mark{display:grid;place-items:center;width:38px;height:38px;background:var(--blue);color:#06101d;border:3px solid rgba(255,255,255,.78);border-radius:50%;box-shadow:5px 5px 0 #0d4b78;font:900 11px "Chakra Petch","Noto Sans SC",sans-serif;letter-spacing:-.04em;text-align:center}.brand b,.brand small{display:block}.brand b{font-size:17px}.brand small{font-family:"Noto Sans SC";font-size:11px;color:var(--muted);margin-top:1px}.top-actions{display:flex;gap:8px}.icon-btn,.text-btn{border:1px solid var(--line);background:#101a2a;color:#a8bbd1;padding:9px 14px;font:600 12px inherit;cursor:pointer}.icon-btn:hover,.text-btn:hover{border-color:#4e6685;color:#fff}.game-frame{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:#08111e;border:1px solid #2b405b;box-shadow:0 24px 70px #000b,0 0 0 5px #0a111d,0 0 0 6px #1f3047}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,#07101bd9,#07101bf0);backdrop-filter:blur(5px);z-index:4}.overlay.hidden{display:none}.start-screen:before{content:"";position:absolute;inset:22px;border:1px solid #30435d;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:.28em;color:var(--blue);font-weight:700;margin:0 0 12px}.overlay h1{font-family:"Noto Sans SC";font-size:clamp(42px,6vw,82px);letter-spacing:.08em;line-height:1;margin:0;text-shadow:6px 6px 0 #142d49}.subtitle{font-family:"Noto Sans SC";color:#9db0c6;margin:16px 0 25px}.controls-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-bottom:26px}.control-card{width:230px;display:grid;grid-template-columns:42px 1fr auto;align-items:center;text-align:left;border:1px solid #31445d;background:#0b1421;padding:10px 14px;box-shadow:6px 6px 0 #03070c}.control-card span{grid-row:1/3;font-size:20px;font-weight:800}.control-card b{font-size:18px}.control-card em{font-family:"Noto Sans SC";font-size:11px;color:var(--muted);font-style:normal}.control-card.blue{border-left:5px solid var(--blue)}.control-card.blue span{color:var(--blue)}.control-card.red{border-right:5px solid var(--red)}.control-card.red span{color:var(--red)}.versus{font-size:18px;color:#60728a}.primary-btn{background:var(--blue);color:#06111f;border:0;border-bottom:5px solid #1474b7;padding:14px 28px;font:800 16px inherit;letter-spacing:.08em;cursor:pointer;min-width:230px}.primary-btn:hover{filter:brightness(1.13);transform:translateY(-1px)}kbd{font:600 10px inherit;margin-left:12px;padding:3px 6px;border:1px solid #0d5790;background:#167fc6;color:#dff3ff}.microcopy{font-family:"Noto Sans SC";font-size:11px;color:#657991;margin-top:18px}.compact h2,.help h2{font-family:"Noto Sans SC";font-size:46px;margin:0 0 12px}.compact>p:not(.eyebrow){font-family:"Noto Sans SC";color:#98aac0}.compact .text-btn{margin-top:12px}.help{padding:8% 16%;text-align:left;align-items:stretch}.help h2{text-align:center}.help .eyebrow{text-align:center}.help-columns{display:grid;grid-template-columns:1fr 1fr;gap:48px;background:#0d1826;border:1px solid #2a3e57;padding:28px}.help h3{font-family:"Noto Sans SC";color:var(--blue);margin:0 0 6px}.help p{font-family:"Noto Sans SC";color:#aebed0;line-height:1.75;margin:0 0 20px}.close-btn{position:absolute;right:32px;top:28px;border:1px solid #40516a;color:white;background:#101a2a;width:42px;height:42px;font-size:26px;cursor:pointer}.footer-note{height:38px;display:flex;justify-content:center;align-items:end;gap:28px;color:#53667d;font-family:"Noto Sans SC";font-size:10px;letter-spacing:.08em}.footer-note span:before{content:"◆";color:#2e4a68;margin-right:7px}@media(max-width:800px){.shell{padding:10px}.topbar{height:52px}.controls-grid{transform:scale(.78);margin:-5px 0 5px}.overlay h1{font-size:40px}.subtitle{margin:9px}.microcopy{display:none}.footer-note{display:none}.help{padding:8%}.help-columns{padding:16px;gap:20px}.game-frame{min-height:480px;aspect-ratio:auto}}