*{box-sizing:border-box;margin:0;padding:0}html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;background:#141a26;height:100%;font-family:system-ui,-apple-system,sans-serif;overflow:hidden}#ui,#ui *{touch-action:manipulation}#game{touch-action:none}#dbg{top:env(safe-area-inset-top,0);z-index:99;color:#7fffb2;pointer-events:none;background:#0009;border-radius:4px;padding:2px 6px;font:10px/1.6 ui-monospace,monospace;position:fixed;left:4px}#game{width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;color:#e8edf5;padding:calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 12px) calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 12px);flex-direction:column;justify-content:space-between;display:flex;position:fixed;inset:0}#top,#bottom{flex-direction:column;gap:8px;width:100%;max-width:480px;margin:0 auto;display:flex}.hp-row{align-items:center;gap:10px;display:flex}.hp-row .name{letter-spacing:.04em;text-transform:uppercase;text-shadow:0 1px 3px #000000e6,0 0 8px #00000080;min-width:84px;font-size:13px;font-weight:700}.hpbar,.manabar{background:#00000073;border-radius:8px;flex:1;height:16px;position:relative;overflow:hidden}.hpbar .fill{border-radius:8px;height:100%;transition:width .15s ease-out}.hp-row.player .fill{background:#4f8fe8}.hp-row.enemy .fill{background:#e8604f}#timer{text-align:center;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #0009;background:#141a268c;border-radius:10px;align-self:center;padding:2px 14px;font-size:18px;font-weight:800}#timer.sudden{color:#ffb347}.manabar{height:20px}.manabar .fill,.manabar .lag{border-radius:10px;height:100%;position:absolute;inset:0 auto 0 0}.manabar .fill{background:linear-gradient(90deg,#7b5cd6,#a78bfa);transition:width 80ms linear}.manabar .lag{background:#564887;transition:width .7s cubic-bezier(.16,1,.3,1)}.mana-text{text-shadow:0 1px 2px #000000b3;place-items:center;font-size:12px;font-weight:700;display:grid;position:absolute;inset:0}#buttons{gap:10px;display:flex}button{pointer-events:auto;font:inherit;color:#e8edf5;cursor:pointer;-webkit-tap-highlight-color:transparent;border:none}button.spawn{background:#2a3550;border:2px solid #46598a;border-radius:14px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;min-height:64px;font-size:16px;font-weight:700;transition:transform 60ms ease-out;display:flex}button.spawn:active:not(:disabled){background:#344270;transform:scale(.93)}button.spawn:disabled{opacity:.4;cursor:default}@keyframes btnpop{0%{transform:scale(1)}35%{transform:scale(.88)}70%{transform:scale(1.07)}to{transform:scale(1)}}button.spawn.pop{animation:.25s ease-out btnpop}#abilities{gap:8px;min-height:0;display:flex}button.ability{background:#3d2030;border:2px solid #ef476f;border-radius:12px;flex:1;justify-content:center;align-items:center;max-width:110px;min-height:48px;font-size:13px;font-weight:800;transition:transform 60ms ease-out;display:flex;position:relative;overflow:hidden}button.ability .ability-name{z-index:1;position:relative}button.ability .cd-sweep{pointer-events:none;background:#000000a6;position:absolute;bottom:0;left:0;right:0}button.ability:disabled{opacity:.55;cursor:default}button.ability.ready{box-shadow:0 0 12px #ef476f73}button.ability:active:not(:disabled){transform:scale(.93)}button.ability.pop{animation:.25s ease-out btnpop}.floater.rally{color:#06d6a0;font-size:22px}#floaters{pointer-events:none;position:fixed;inset:0;overflow:hidden}.floater{color:#fff;text-shadow:0 2px 4px #000000e6,0 0 6px #00000073;will-change:transform, opacity;font-size:17px;font-weight:900;position:absolute}.floater.tower{color:#ffb347;font-size:24px}.hp-row .name.away{opacity:.4;font-style:italic}.chips{flex-wrap:wrap;gap:4px;min-height:18px;display:flex}.chip{background:#00000073;border:1px solid #0000;border-radius:9px;padding:2px 8px;font-size:11px;font-weight:700}.chip.economy{color:#ffd166;border-color:#ffd16666}.chip.minion{color:#06d6a0;border-color:#06d6a066}.chip.tower{color:#a78bfa;border-color:#a78bfa66}.chip.active{color:#ef476f;border-color:#ef476f66}#draft{pointer-events:none;flex-direction:column;align-items:center;gap:12px;width:min(460px,94vw);display:flex;position:fixed;top:44%;left:50%;transform:translate(-50%,-50%)}#draft[hidden]{display:none}#draft-head{flex-direction:column;align-items:center;gap:6px;width:100%;display:flex}#draft-head span{letter-spacing:.03em;text-shadow:0 2px 6px #000c;font-size:19px;font-weight:900}#draft-timer{background:#00000080;border-radius:4px;width:60%;height:7px;overflow:hidden}#draft-timer .fill{background:linear-gradient(90deg,#ffd166,#ef476f);border-radius:4px;height:100%;transition:width .12s linear}#draft-cards{justify-content:center;gap:10px;width:100%;display:flex}#draft-status{opacity:.85;text-shadow:0 1px 3px #000c;min-height:1.2em;font-size:13px;font-weight:700}@keyframes cardIn{0%{opacity:0;transform:translateY(36px)rotate(7deg)scale(.6)}60%{opacity:1;transform:translateY(-6px)rotate(-2deg)scale(1.06)}to{opacity:1;transform:translateY(0)rotate(0)scale(1)}}.card{pointer-events:auto;max-width:110px;min-height:120px;animation:.35s cubic-bezier(.34,1.56,.64,1) both cardIn;animation-delay:calc(var(--i) * 90ms);background:#1c2436;border:2px solid #46598a;border-radius:12px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 6px;transition:transform 80ms ease-out,border-color 80ms;display:flex}.card:active:not(:disabled){transform:scale(.92)}.card.economy{border-color:#ffd16666}.card.minion{border-color:#06d6a066}.card.tower{border-color:#a78bfa66}.card.active{border-color:#ef476f66}.card.active .card-cat{color:#ef476f}.card-cat{text-transform:uppercase;letter-spacing:.1em;opacity:.6;font-size:9px;font-weight:800}.card.economy .card-cat{color:#ffd166}.card.minion .card-cat{color:#06d6a0}.card.tower .card-cat{color:#a78bfa}.card-name{font-size:14px;font-weight:900}.card-desc{opacity:.8;text-align:center;font-size:11px;line-height:1.3}.card.chosen{border-width:3px;border-color:#fff;transform:scale(1.08);box-shadow:0 0 18px #ffffff59}.card.dim{opacity:.35}#lobby{pointer-events:auto;text-align:center;background:#0a0d14b3;flex-direction:column;justify-content:center;align-items:center;gap:26px;padding:24px;display:flex;position:fixed;inset:0}#lobby[hidden]{display:none}#lobby h1{letter-spacing:.02em;text-shadow:0 3px 10px #000c;font-size:42px}#lobby .menu{flex-direction:column;gap:14px;width:min(320px,80vw);display:flex}#lobby .menu button,#invite-box button{border-radius:14px;min-height:58px;font-size:19px;font-weight:800}#quick{background:#4f8fe8}#quick:active,#invite:active,#copy:active{transform:scale(.95)}#invite{background:#2a3550;border:2px solid #46598a}#invite-box{flex-direction:column;gap:12px;width:min(360px,86vw);display:flex}#invite-box[hidden]{display:none}#invite-box input{font:inherit;color:#e8edf5;text-align:center;background:#00000073;border:1px solid #46598a;border-radius:10px;padding:12px;font-size:14px}#invite-box button{background:#4f8fe8}#invite-box p{opacity:.75;font-size:14px}#lobby-status{opacity:.85;min-height:1.4em;font-size:15px}#reconnect{pointer-events:auto;background:#0a0d1499;place-content:center;display:grid;position:fixed;inset:0}#reconnect[hidden]{display:none}#reconnect .card{background:#1c2436;border:2px solid #46598a;border-radius:14px;padding:22px 32px;font-weight:700}button.spawn .cost{color:#a78bfa;font-size:13px;font-weight:800}#end{pointer-events:auto;text-align:center;background:#0a0d14bf;place-content:center;gap:24px;display:grid;position:fixed;inset:0}#end[hidden]{display:none}#notice{top:calc(env(safe-area-inset-top) + 64px);color:#ffb347;pointer-events:none;text-align:center;background:#141a26eb;border:2px solid #ffb347;border-radius:12px;max-width:86vw;padding:10px 18px;font-size:14px;font-weight:700;position:fixed;left:50%;transform:translate(-50%)}#notice[hidden]{display:none}#end-sub{opacity:.8;min-height:1.2em;font-size:15px}#end h1{text-shadow:0 2px 8px #000c;font-size:40px}#rematch{background:#4f8fe8;border-radius:14px;min-height:56px;margin:0 auto;padding:0 48px;font-size:20px;font-weight:800}#rematch:active{transform:scale(.95)}