:root{--bg: #14161c;--panel: #1e2230;--panel-2: #272c3d;--accent: #e0a03a;--accent-2: #3fbf5f;--text: #e8e8ef;--danger: #d23a3a}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;overflow:hidden}#game,#game canvas{position:absolute;inset:0}#ui{position:absolute;inset:0;pointer-events:none}#ui>*{pointer-events:auto}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#232838,#0e1016)}.card{background:var(--panel);border:1px solid #333a4d;border-radius:12px;padding:28px 32px;width:min(520px,92vw);box-shadow:0 20px 60px #00000080}.card h1{margin:0 0 4px;font-size:30px;letter-spacing:1px;color:var(--accent)}.card h2{margin:0 0 16px;font-size:18px;font-weight:500;color:#aab}label{display:block;font-size:13px;margin:14px 0 4px;color:#99a}input[type=text]{width:100%;padding:10px 12px;font-size:16px;border-radius:8px;border:1px solid #3a4257;background:var(--panel-2);color:var(--text);text-transform:none}input.code{text-transform:uppercase;letter-spacing:4px;font-family:Courier New,monospace}button{cursor:pointer;font:inherit;font-weight:600;padding:10px 16px;border-radius:8px;border:1px solid #3a4257;background:var(--panel-2);color:var(--text);transition:filter .12s ease}button:hover:not(:disabled){filter:brightness(1.2)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#201700}button.danger{background:var(--danger);border-color:var(--danger)}.row{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}.row>*{flex:1}.error{margin-top:12px;color:var(--danger);font-size:14px;min-height:18px}.players{list-style:none;padding:0;margin:10px 0 0}.players li{padding:8px 12px;background:var(--panel-2);border-radius:6px;margin-bottom:6px;display:flex;justify-content:space-between}.tag{font-size:12px;color:var(--accent)}.classgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.classcard{background:var(--panel-2);border:2px solid #3a4257;border-radius:10px;padding:12px;text-align:left;font-size:12px}.classcard.sel{border-color:var(--accent)}.classcard.taken{opacity:.4;pointer-events:none}.classcard b{display:block;font-size:15px;margin-bottom:6px;color:var(--text)}.big-code{font-family:Courier New,monospace;font-size:34px;letter-spacing:8px;color:var(--accent-2);text-align:center;margin:8px 0 4px}#hud{position:absolute;inset:0;pointer-events:none;font-size:13px}.hud-panel{position:absolute;background:#14161cb8;border:1px solid #333a4d;border-radius:8px;padding:8px 12px}#hud-stats{left:12px;bottom:12px;min-width:190px}#hud-wave{left:50%;top:12px;transform:translate(-50%);text-align:center;font-size:15px}#hud-players{right:12px;top:12px;min-width:170px}#hud-players div{display:flex;justify-content:space-between;gap:10px}#hud-gameover{left:50%;top:55%;transform:translate(-50%);text-align:center;pointer-events:auto}.dead{color:var(--danger)}.bar{height:8px;border-radius:4px;background:#3a1414;overflow:hidden;margin-top:4px}.bar>i{display:block;height:100%;background:var(--accent-2)}.bar.mana{background:#142033}.bar.mana>i{background:#3a86d2}.attrs{margin-top:6px;font-size:12px;color:#aab;letter-spacing:.5px}#hud-abilities{left:50%;bottom:12px;transform:translate(-50%);display:flex;gap:8px;padding:8px}.ability{position:relative;width:68px;min-height:46px;border:1px solid #3a4257;border-radius:6px;background:var(--panel-2);padding:4px 6px;text-align:center;overflow:hidden}.ability .key{display:block;font-weight:700;color:var(--accent);font-size:13px}.ability .aname{display:block;font-size:10px;color:#ccd;text-transform:uppercase;letter-spacing:.5px}.ability .cd{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;background:#0a0c129e}.ability:not(.cooling) .cd{display:none}.ability.cooling{filter:grayscale(.7) brightness(.8)}.ability.nomana{border-color:#3a4257;filter:grayscale(.9) brightness(.55)}.ability.nomana .key{color:#6a7288}.banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);text-align:center;font-size:40px;color:var(--accent);text-shadow:0 3px 12px #000}.hint{font-size:12px;color:#889;margin-top:10px}