@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}.touch-controls{position:absolute;inset:auto 0 0;z-index:3;display:none;justify-content:space-between;align-items:flex-end;padding:0 18px 18px;pointer-events:none}.touch-stick{position:relative;width:126px;height:126px;border:2px solid rgba(180,220,255,.52);border-radius:50%;background:radial-gradient(circle,rgba(57,168,255,.2),rgba(6,13,25,.7));box-shadow:0 0 22px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08);touch-action:none;pointer-events:auto}.touch-stick span{position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);border-radius:50%;background:#39a8ff;border:2px solid #dff3ff;box-shadow:0 0 18px rgba(57,168,255,.65)}.touch-stick b{position:absolute;left:0;right:0;bottom:13px;color:#dff3ff;font:900 11px "Noto Sans SC","Chakra Petch",sans-serif;text-align:center;letter-spacing:.08em}.touch-actions{display:grid;grid-template-columns:repeat(4,58px);grid-template-rows:repeat(2,58px);gap:9px;pointer-events:auto}.touch-btn{width:58px;height:58px;border-radius:50%;border:2px solid rgba(216,235,255,.66);background:rgba(9,18,32,.72);color:#eaf5ff;box-shadow:0 0 18px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.08);font-family:"Noto Sans SC","Chakra Petch",sans-serif;touch-action:none;-webkit-user-select:none;user-select:none}.touch-btn b,.touch-btn span{display:block;line-height:1}.touch-btn b{font-size:11px;font-weight:900}.touch-btn span{margin-top:4px;color:#93cfff;font-size:10px;font-weight:900}.touch-btn.active{background:#39a8ff;color:#06111f;border-color:#fff;transform:translateY(2px);box-shadow:0 0 24px rgba(57,168,255,.78)}.touch-fire{grid-column:2;grid-row:2;background:rgba(237,124,43,.78)}.touch-defend{grid-column:3;grid-row:2;background:rgba(125,228,255,.72);color:#06111f}.touch-defend span{color:#134365}.touch-ult{grid-column:4;grid-row:1 / span 2;height:126px;border-radius:31px;background:rgba(245,207,78,.78);color:#06111f}.touch-ult span{color:#5d4505}.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)}.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(pointer:coarse),(max-width:900px){body{overflow:hidden;touch-action:none}.shell{padding:6px}.topbar,.footer-note{display:none}.game-frame{height:100dvh;width:100vw;aspect-ratio:auto;border:0;box-shadow:none}.touch-controls{display:flex}.overlay:not(.start-screen){padding-bottom:148px}}@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}.touch-controls{padding:0 12px 12px}.touch-stick{width:112px;height:112px}.touch-stick span{width:48px;height:48px}.touch-actions{grid-template-columns:repeat(4,52px);grid-template-rows:repeat(2,52px);gap:7px}.touch-btn{width:52px;height:52px}.touch-ult{height:111px;border-radius:28px}}