:root{--ink: #f2f6ff;--dim: #93a0bb;--bg: #0a0d18;--panel: rgba(16, 21, 36, .82);--edge: rgba(255, 255, 255, .1);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-t: env(safe-area-inset-top, 0px)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:Outfit,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}#app{position:fixed;inset:0}#app.game{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:crosshair}.stage{position:absolute;inset:0;display:block}.menu{display:grid;place-items:center;padding:16px;overflow-y:auto;background:radial-gradient(1200px 600px at 50% -10%,#1d2540 0%,transparent 60%),var(--bg)}.card{width:min(520px,100%);background:var(--panel);border:1px solid var(--edge);border-radius:20px;padding:24px;backdrop-filter:blur(12px)}.card h1{margin:0;font-size:40px;letter-spacing:-.02em;background:linear-gradient(92deg,#ff2e63,#ffc400 40%,#00d9ff 78%);-webkit-background-clip:text;background-clip:text;color:transparent}.tag{margin:4px 0 20px;color:var(--dim)}.lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:14px 0 6px}.card input{width:100%;padding:12px 14px;font:inherit;color:var(--ink);background:#00000052;border:1px solid var(--edge);border-radius:12px}.card input:focus{outline:2px solid #00d9ff;outline-offset:1px}.heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}.hero{display:grid;justify-items:center;gap:2px;padding:6px 4px 8px;background:#00000047;border:1px solid var(--edge);border-radius:14px;color:var(--dim);font:600 12px/1 inherit;cursor:pointer}.hero canvas{width:72px;height:72px}.hero.on{border-color:#00d9ff;color:var(--ink);background:#00d9ff1a}.play{width:100%;margin-top:18px;padding:15px;font:800 18px/1 inherit;letter-spacing:.06em;color:#08101c;background:linear-gradient(92deg,#ffc400,#4ade36);border:0;border-radius:14px;cursor:pointer}.play:active{transform:translateY(1px)}.rules{margin-top:16px;padding-top:14px;border-top:1px solid var(--edge);font-size:13px;line-height:1.5;color:var(--dim)}.rules b{color:var(--ink)}.hud{position:absolute;inset:0;pointer-events:none}.hud button{pointer-events:auto}.board{position:absolute;top:calc(8px + var(--safe-t));left:calc(10px + var(--safe-l));min-width:148px;padding:8px 10px;background:var(--panel);border:1px solid var(--edge);border-radius:12px;font-size:12px;line-height:1.7}.boardhead{color:var(--dim);font-size:10px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px}.board .row{display:flex;align-items:center;gap:6px}.board .row.me{color:#ffc400;font-weight:700}.board .row i{width:8px;height:8px;border-radius:50%;flex:none}.board .row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.xpwrap{position:absolute;left:50%;bottom:calc(12px + var(--safe-b));transform:translate(-50%);display:flex;align-items:center;gap:8px;width:min(360px,62vw)}.level{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font:800 14px/1 inherit;color:#08101c;background:#4ade36}.level.pulse{animation:pop .5s ease-out}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}to{transform:scale(1)}}.xptrack{flex:1;height:10px;background:#00000073;border:1px solid var(--edge);border-radius:999px;overflow:hidden}.xpfill{height:100%;width:0;border-radius:999px;transition:width .12s linear}.xplabel{flex:none;font-size:11px;color:var(--dim);min-width:62px;text-align:right}.boost{position:absolute;right:calc(18px + var(--safe-r));bottom:calc(54px + var(--safe-b));width:92px;height:92px;border-radius:50%;border:2px solid rgba(255,255,255,.28);background:#0a0e1a80;color:var(--ink);overflow:hidden;cursor:pointer}.boost .boostlabel{position:relative;font:800 13px/1 inherit;letter-spacing:.08em}.boostfill{position:absolute;left:0;right:0;bottom:0;height:100%;background:linear-gradient(0deg,#ffc400,#ffc40059);transition:height .1s linear}.boost.on{border-color:#ffc400;transform:scale(.96)}.boost.empty .boostfill{background:#ffffff1f}.swap{position:absolute;right:calc(22px + var(--safe-r));bottom:calc(158px + var(--safe-b));width:38px;height:38px;border-radius:50%;border:1px solid var(--edge);background:var(--panel);color:var(--dim);font-size:17px;cursor:pointer}.hud.lefty .boost{right:auto;left:calc(18px + var(--safe-l))}.hud.lefty .swap{right:auto;left:calc(22px + var(--safe-l))}.toast{position:absolute;left:50%;top:22%;transform:translate(-50%,-8px);padding:10px 18px;border-radius:999px;background:var(--panel);border:1px solid var(--edge);font:800 20px/1 inherit;opacity:0;transition:opacity .2s,transform .2s}.toast.on{opacity:1;transform:translate(-50%)}.status{position:absolute;left:50%;top:calc(10px + var(--safe-t));transform:translate(-50%);padding:6px 14px;border-radius:999px;background:#dc2626e6;font-size:13px;display:none}.status.on{display:block}@media (max-height: 520px){.board{min-width:116px;padding:5px 7px;font-size:10px;line-height:1.5;opacity:.85}.boost{width:72px;height:72px;bottom:calc(38px + var(--safe-b))}.boost .boostlabel{font-size:11px}.swap{width:32px;height:32px;font-size:15px;bottom:calc(120px + var(--safe-b))}.xpwrap{width:min(300px,52vw);bottom:calc(8px + var(--safe-b))}.level{width:26px;height:26px;font-size:12px}.toast{font-size:16px;padding:8px 14px}}