:root{--bg-deep: #0b0908;--bg-stone: #1a1512;--ember: #e85d04;--ember-hot: #ffba08;--ash: #c4b5a5;--blood: #9b2226;--health: #2a9d8f;--ink: #f4e9d8;--muted: #9a8b7a;--panel: rgba(12, 10, 8, .72)}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden;background:var(--bg-deep);color:var(--ink);font-family:Spectral,Georgia,serif}#game{display:block;width:100%;height:100%;background:var(--bg-deep);cursor:crosshair}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(1rem,3vw,2rem);z-index:2}.brand{font-family:Cinzel,Times New Roman,serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 18px rgba(0,0,0,.85);animation:brand-in 1.1s ease-out both}.status{position:absolute;top:clamp(4.2rem,9vw,5.5rem);left:clamp(1rem,3vw,2rem);font-size:.95rem;color:var(--ash);letter-spacing:.04em;text-shadow:0 1px 8px rgba(0,0,0,.8);transition:color .25s ease,opacity .25s ease}.status.danger{color:var(--ember-hot)}.countdown{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-family:Cinzel,serif;font-size:clamp(4rem,12vw,7rem);font-weight:700;letter-spacing:.08em;color:var(--ink);text-shadow:0 0 40px rgba(232,93,4,.45),0 8px 30px rgba(0,0,0,.8);pointer-events:none;animation:countdown-pulse 1s ease-in-out infinite}.countdown.go{color:var(--ember-hot);font-size:clamp(3rem,9vw,5rem);animation:none}.countdown.hidden{display:none}.kill-feed{position:absolute;left:clamp(1rem,3vw,2rem);top:clamp(6.5rem,14vw,8rem);display:grid;gap:.35rem;width:min(280px,70vw);pointer-events:none}.feed-row{padding:.35rem .55rem;background:#0c0a08b8;border-left:3px solid var(--ember);font-size:.82rem;color:var(--ash);animation:feed-in .25s ease both;transition:opacity .6s ease}.feed-row.fade{opacity:0}@keyframes countdown-pulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.04);opacity:.88}}@keyframes feed-in{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.meters{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);width:min(220px,42vw);display:grid;gap:.65rem;padding:.85rem 1rem;background:var(--panel);border:1px solid rgba(196,181,165,.18)}.meter{display:grid;gap:.3rem}.meter span{font-family:Cinzel,serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.bar{height:8px;background:#ffffff14;overflow:hidden}.bar>div{height:100%;width:100%;transform-origin:left center;transition:transform .12s linear}#health-fill{background:linear-gradient(90deg,#1d6f66,var(--health))}#zone-fill{background:linear-gradient(90deg,#7a2e0e,var(--ember))}.alive-count{font-family:Cinzel,serif;font-size:1.05rem;letter-spacing:.08em;color:var(--ink)}.roster{display:grid;gap:.35rem;margin-top:.25rem;max-height:min(42vh,280px);overflow:auto}.roster-row{display:grid;grid-template-columns:10px 1fr;grid-template-rows:auto auto auto;column-gap:.45rem;row-gap:.12rem;align-items:center;opacity:1;transition:opacity .25s ease}.roster-row.dead{opacity:.35}.roster-row.you .roster-name{color:var(--ember-hot)}.roster-swatch{width:8px;height:8px;grid-row:1 / span 3;box-shadow:0 0 8px #ffffff26}.roster-name{font-size:.78rem;color:var(--ash);letter-spacing:.02em}.roster-kit{font-family:Cinzel,serif;font-size:.62rem;letter-spacing:.08em;color:var(--muted)}.roster-bar{height:4px;background:#ffffff14;overflow:hidden}.roster-fill{height:100%;width:100%;transform-origin:left center;transform:scaleX(1)}.spellbar{position:absolute;left:50%;bottom:clamp(3.2rem,8vw,4.5rem);transform:translate(-50%);display:flex;gap:.5rem}.spell{position:relative;width:58px;height:48px;overflow:hidden;background:var(--panel);border:1px solid rgba(196,181,165,.22)}.spell-cd{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c;transform-origin:bottom center;transform:scaleY(0);pointer-events:none}.spell-body{position:relative;z-index:1;height:100%;display:grid;place-content:center;gap:.1rem;text-align:center}.spell-key{font-family:Cinzel,serif;font-size:.65rem;letter-spacing:.12em;color:var(--ember-hot)}.spell-name{font-size:.68rem;color:var(--ink)}.spell-timer{position:absolute;right:6px;bottom:4px;font-size:.7rem;color:var(--ash);min-height:1em}.spell.ready{border-color:#ffba0866;box-shadow:0 0 18px #e85d041f}.spell.dim{opacity:.75}.hint{align-self:end;justify-self:start;font-size:.85rem;color:var(--muted);letter-spacing:.03em;text-shadow:0 1px 6px rgba(0,0,0,.7);max-width:min(520px,92vw)}#hud.hud-hidden{display:none}.draft{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;display:grid;place-items:center;padding:1.25rem;background:radial-gradient(ellipse at 50% 30%,rgba(184,74,18,.22),transparent 55%),#0806058c;pointer-events:auto}.draft.hidden{display:none}.draft-panel{width:min(560px,94vw);padding:1.75rem 1.5rem 1.4rem;background:linear-gradient(165deg,#201812f0,#0c0a08f5);border:1px solid rgba(196,181,165,.22);box-shadow:0 28px 70px #0000008c}.draft-panel h1{font-family:Cinzel,serif;font-size:clamp(2rem,5vw,2.6rem);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.45rem}.draft-lead{color:var(--ash);margin-bottom:1rem;line-height:1.45}.draft-lead strong{color:var(--ember-hot);font-weight:600}.draft-picks{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin-bottom:1rem}.draft-slot{min-height:2.4rem;display:grid;place-items:center;font-size:.72rem;letter-spacing:.03em;color:var(--muted);background:#00000059;border:1px dashed rgba(196,181,165,.2)}.draft-slot.filled{color:var(--ink);border-style:solid;border-color:#e85d0466;background:#e85d041f}.draft-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin-bottom:1.1rem}.draft-spell{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.55rem;row-gap:.1rem;text-align:left;padding:.65rem .7rem;cursor:pointer;color:var(--ink);background:#120e0cd9;border:1px solid rgba(196,181,165,.18);font:inherit;transition:border-color .15s ease,background .15s ease,opacity .15s ease}.draft-spell:hover{border-color:#ffba0859}.draft-spell.selected{border-color:#e85d04a6;background:#e85d0424}.draft-spell.locked{opacity:.4;cursor:not-allowed}.draft-key{grid-row:1 / span 2;align-self:center;font-family:Cinzel,serif;font-size:.85rem;letter-spacing:.08em;color:var(--ember-hot);min-width:1.2rem}.draft-name{font-size:.92rem;letter-spacing:.02em}.draft-blurb{grid-column:2;font-size:.72rem;color:var(--muted)}.draft-actions{display:flex;gap:.6rem;justify-content:flex-end}.draft-actions button{font-family:Cinzel,serif;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;padding:.75rem 1.15rem;cursor:pointer;border:1px solid rgba(196,181,165,.28);color:var(--ink);background:#14100ce6;transition:transform .15s ease,filter .15s ease,opacity .15s ease}.draft-actions button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}.draft-actions button:disabled{opacity:.45;cursor:not-allowed}#draft-start{background:linear-gradient(180deg,#b84a12,#7a2a08);border-color:#ffba0859}.match-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin:-.4rem 0 1.25rem;color:var(--ash);font-size:.78rem}.match-stats div{padding:.45rem .35rem;background:#00000047;border:1px solid rgba(196,181,165,.12)}.match-stats strong{display:block;font-family:Cinzel,serif;font-size:1.05rem;color:var(--ink);margin-top:.15rem}.mute-btn{position:fixed;top:1rem;right:1rem;z-index:6;pointer-events:auto;font-family:Cinzel,serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.45rem .7rem;cursor:pointer;color:var(--ash);background:#0c0a08bf;border:1px solid rgba(196,181,165,.25)}.mute-btn.on{color:var(--ember-hot);border-color:#e85d0473}.spectate-restart{position:absolute;left:50%;bottom:clamp(5.5rem,12vw,7rem);transform:translate(-50%);pointer-events:auto;font-family:Cinzel,serif;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;padding:.7rem 1.35rem;cursor:pointer;color:var(--ink);background:linear-gradient(180deg,#b84a12,#7a2a08);border:1px solid rgba(255,186,8,.35);transition:transform .15s ease,filter .15s ease}.spectate-restart:hover{transform:translate(-50%) translateY(-1px);filter:brightness(1.08)}.spectate-restart.hidden{display:none}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(232,93,4,.18),transparent 45%),#080605c7;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade-in .35s ease both}.overlay.hidden{display:none}.overlay-card{text-align:center;padding:2.4rem 2.2rem;max-width:26rem;background:linear-gradient(180deg,#1c1612eb,#0c0a08f2);border:1px solid rgba(232,93,4,.35);box-shadow:0 24px 60px #0000008c}.overlay-card h1{font-family:Cinzel,serif;font-size:clamp(2rem,5vw,2.8rem);letter-spacing:.06em;margin-bottom:.6rem}.overlay-card p{color:var(--ash);margin-bottom:1.5rem;line-height:1.5}#restart{pointer-events:auto;font-family:Cinzel,serif;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:linear-gradient(180deg,#b84a12,#7a2a08);border:1px solid rgba(255,186,8,.35);padding:.85rem 1.6rem;cursor:pointer;transition:transform .15s ease,filter .15s ease}#restart:hover{transform:translateY(-1px);filter:brightness(1.08)}#restart:active{transform:translateY(1px)}@keyframes brand-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@media(max-width:640px){.meters{width:min(180px,48vw);padding:.7rem .8rem}.spellbar{gap:.3rem;bottom:3.6rem}.spell{width:62px;height:48px}.spell-name{font-size:.62rem}.hint{max-width:92vw;font-size:.7rem}.draft-grid{grid-template-columns:1fr}.draft-picks{grid-template-columns:repeat(5,minmax(0,1fr))}.draft-slot{font-size:.58rem;padding:.2rem;text-align:center}.draft-actions{flex-direction:column}.draft-actions button{width:100%}}