:root{color-scheme:dark;--ink:#e9fbff;--muted:#8aa6ba;--cyan:#2ee8fa;--amber:#ffbd55;--bg:#07142a}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 40%,#102950 0,#07142a 54%,#040b18 100%);color:var(--ink);font-family:Arial,Helvetica,sans-serif;letter-spacing:.06em}.app{width:min(100%,720px);min-height:100vh;margin:auto;padding:clamp(16px,3vw,26px);display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:14px}.brand{display:flex;gap:10px;align-items:center}.mark{width:20px;height:20px;border:3px solid var(--cyan);border-radius:50%;box-shadow:0 0 16px #2ee8fa88}.help,.close{border:1px solid #6e9cb6;background:#10294b;color:var(--ink);border-radius:50%;font:inherit;cursor:pointer}.help{width:31px;height:31px;font-size:18px}.hud{margin:24px 0 14px;display:grid;grid-template-columns:1fr 82px 92px;gap:13px;align-items:end}.label,.stat span{display:block;color:var(--muted);font-size:10px;font-weight:bold;margin-bottom:7px}.track{height:7px;border-radius:10px;background:#173555;overflow:hidden}.fill{width:0%;height:100%;background:linear-gradient(90deg,var(--cyan),#9affff);box-shadow:0 0 11px var(--cyan);transition:width .25s}.meter strong,.stat strong{font-size:14px}.stat{text-align:right}.warning strong{color:var(--amber)}.arena-wrap{position:relative;flex:1;min-height:360px;border:1px solid #285171;border-radius:28px;overflow:hidden;background:radial-gradient(circle,#123457 0,#091b36 62%,#061123);box-shadow:inset 0 0 60px #09152c,0 20px 50px #01071455}canvas{width:100%;height:100%;display:block;touch-action:none}.center-readout{position:absolute;inset:0;pointer-events:none;display:grid;place-content:center;text-align:center;text-shadow:0 0 20px #001}.center-readout span{font-size:10px;color:var(--muted);font-weight:bold}.center-readout strong{font-size:34px;margin-top:4px}.message{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:30px;background:#061329a8;backdrop-filter:blur(3px)}.eyebrow{font-size:10px;font-weight:bold;color:var(--cyan);margin:0 0 10px}.message h1,.card h2{font-size:clamp(28px,7vw,40px);letter-spacing:-.03em;margin:0}.message p:not(.eyebrow),.card p:not(.eyebrow){color:#bdd2df;line-height:1.55;letter-spacing:.02em;font-size:14px;max-width:370px;margin:13px auto 22px}.message button{border:0;border-radius:30px;background:var(--amber);color:#182132;padding:14px 23px;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 0 25px #ffbd5588}.message button span{margin-left:8px;font-size:19px}.controls{display:grid;grid-template-columns:86px 1fr 86px;gap:15px;align-items:center;padding:17px 4px 7px}.controls button{height:58px;background:#102b4e;border:1px solid #397598;border-radius:14px;color:var(--cyan);cursor:pointer;font-weight:bold}.controls button:active{background:#174467;transform:scale(.98)}.controls span{font-size:27px;display:block;line-height:20px}.controls small{font-size:9px;color:#a9c8d9}.controls p{text-align:center;font-size:10px;color:var(--muted);font-weight:bold}.tip{text-align:center;color:#7893a9;font-size:11px;margin:4px 0 0}.modal[hidden]{display:none}.modal{position:fixed;inset:0;background:#020916bb;display:grid;place-items:center;padding:24px}.card{position:relative;width:min(100%,420px);padding:32px;border:1px solid #3e7796;border-radius:22px;background:#0b2443;box-shadow:0 30px 70px #000}.card h2{font-size:29px}.close{position:absolute;right:15px;top:15px;width:29px;height:29px;font-size:23px;line-height:20px}@media(max-height:680px){.hud{margin:13px 0 8px}.arena-wrap{min-height:290px}.controls{padding-top:10px}}@media(max-width:400px){.app{padding:14px}.hud{grid-template-columns:1fr 62px 76px;gap:8px}.arena-wrap{border-radius:20px}.controls{grid-template-columns:72px 1fr 72px}}