:root{--bg:#1e2230;--panel:#2b3245;--ink:#e8ebf2;--muted:#8e97ad;--accent:#4f8fe0;--danger:#e0624f;--gold:#ffd166;color:var(--ink);font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;margin:0;overflow:hidden}#stage{position:fixed;inset:0}.hidden{display:none!important}.card{background:var(--panel);border-radius:14px;flex-direction:column;gap:12px;width:320px;padding:28px;display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 40px #0006}h1{margin:0}.muted{color:var(--muted);margin:0}.error{color:var(--danger);min-height:1em;margin:0}input,button{font:inherit;background:var(--bg);color:var(--ink);border:1px solid #444d66;border-radius:8px;padding:10px 12px}button{cursor:pointer}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.join-row{gap:8px;display:flex}.join-row input{text-transform:uppercase;flex:1}.room-code{letter-spacing:6px;font-size:40px;font-weight:700}#hud{pointer-events:none;position:fixed;inset:0}#hud button,#hud .result{pointer-events:auto}.top{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;display:grid;position:absolute;top:16px;left:16px;right:16px}.base{background:var(--panel);border-radius:10px;align-items:center;gap:10px;padding:8px 14px;font-weight:600;display:flex}.base[data-who=them]{flex-direction:row-reverse}.base .bar{background:#14171f;border-radius:5px;flex:1;height:10px;display:flex;overflow:hidden}.base[data-who=them] .bar{justify-content:flex-end}.base .fill{background:var(--accent);transition:width .2s}.base[data-who=them] .fill{background:var(--danger)}.base-hp{font-variant-numeric:tabular-nums;min-width:3.5em}.base[data-who=them] .base-hp{text-align:right}.clock{text-align:center;font-variant-numeric:tabular-nums}#match-time{font-size:22px;font-weight:700}.bottom{align-items:stretch;gap:16px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.economy{background:var(--panel);border-radius:12px;flex-direction:column;justify-content:center;gap:6px;min-width:150px;padding:12px 14px;display:flex}.gold{color:var(--gold);font-variant-numeric:tabular-nums;font-size:22px;font-weight:700}#income.shrine{color:#c9b6ff}#income.shrine:after{content:" ◆"}.economy button{padding:6px 8px;font-size:13px}button:disabled{opacity:.45;cursor:default}.hand{gap:10px;display:flex}.hand-card{text-align:left;border:2px solid #444d66;border-radius:12px;flex-direction:column;align-items:flex-start;gap:5px;width:150px;height:172px;padding:12px;transition:transform .1s,border-color .1s,box-shadow .1s;display:flex;position:relative}.hand-card.unit{background:linear-gradient(#33405e 0%,#2b3245 55%)}.hand-card.spell{background:linear-gradient(#5b3f86 0%,#3a2d55 60%);border-color:#8c6cc4;border-radius:18px}.hand-card:hover{transform:translateY(-4px)}.hand-card.selected{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold), 0 8px 24px #ffd16640;transform:translateY(-10px)}.hand-card.poor{filter:grayscale(.6)brightness(.75)}.hand-card .icon{align-items:center;height:26px;font-size:24px;line-height:1;display:flex}.hand-card.unit .icon svg{fill:var(--accent)}.hand-card.spell .icon{color:#e6d3ff}.hand-card .cost{min-width:30px;color:var(--gold);text-align:center;background:#14171f;border-radius:999px;padding:3px 7px;font-size:14px;font-weight:700;position:absolute;top:10px;right:10px}.hand-card .key{color:var(--muted);font-size:11px;position:absolute;bottom:8px;right:10px}.hand-card .text{color:#c9d0e0;flex:1;font-size:12px}.hand-card .stats{color:var(--ink);gap:8px;font-size:12px;font-weight:600;display:flex}.hand-card.spell .stats{color:#d9c8f5;font-weight:500}.hand-card .cooldown{background:#14171fb8;border-radius:16px;justify-content:center;align-items:center;font-size:34px;font-weight:700;display:flex;position:absolute;inset:0}.hint{text-align:center;color:var(--gold);font-weight:600;position:absolute;bottom:204px;left:0;right:0}.toast{background:var(--danger);border-radius:8px;padding:8px 16px;font-weight:600;position:absolute;top:80px;left:50%;transform:translate(-50%)}.result{text-align:center}