:root{--bg: #0a0a10;--panel: #15151f;--ink: #e7e3d4;--gold: #d8b24a;--red: #c8413a;--green: #4caf50;--blue: #4a72d8;--accent: #8a6cff}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;height:100%;overflow:hidden}#app{display:flex;flex-direction:column;align-items:center;height:100vh}header{width:100%;text-align:center;padding:6px 0 2px}header h1{margin:0;font-size:24px;letter-spacing:3px;color:var(--gold);text-shadow:0 0 12px rgba(216,178,74,.4)}#hud{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-size:14px;padding:4px 8px;background:var(--panel);border-radius:8px;margin:4px}#hud .stat{display:flex;gap:5px;align-items:center}#hud .label{opacity:.6;text-transform:uppercase;font-size:10px;letter-spacing:1px}#hud .val{font-weight:700;font-variant-numeric:tabular-nums}.healthbar{width:120px;height:12px;background:#2a1010;border-radius:6px;overflow:hidden;border:1px solid #3a1a1a}.healthbar>i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .1s linear}canvas{background:#05050a;border:2px solid #2a2a3a;border-radius:6px;image-rendering:pixelated;max-width:98vw;max-height:70vh}#overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#05050cdb;z-index:10}#overlay .card{background:var(--panel);border:2px solid var(--gold);border-radius:12px;padding:26px 34px;text-align:center;max-width:480px}#overlay h2{margin:0 0 6px;color:var(--gold);letter-spacing:2px}#overlay p{opacity:.85;font-size:14px;line-height:1.5}.classes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}.classbtn{background:#1d1d2c;border:2px solid #33334a;border-radius:8px;color:var(--ink);padding:10px;cursor:pointer;text-align:left;transition:border-color .12s,transform .08s}.classbtn:hover{border-color:var(--accent);transform:translateY(-2px)}.classbtn.sel{border-color:var(--gold);background:#26261a}.classbtn b{display:block;color:var(--gold);font-size:15px;letter-spacing:1px}.classbtn small{opacity:.75;font-size:11px}button.primary{background:var(--gold);color:#1a1408;border:none;border-radius:8px;padding:10px 22px;font-weight:700;letter-spacing:1px;cursor:pointer;font-size:15px}button.primary:hover{filter:brightness(1.1)}.relics-draft{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 4px}.relicbtn{background:#1d1d2c;border:2px solid #33334a;border-radius:8px;color:var(--ink);padding:12px 10px;cursor:pointer;text-align:center;transition:border-color .12s,transform .08s}.relicbtn:hover{border-color:var(--gold);transform:translateY(-2px)}.relicbtn b{display:block;color:var(--gold);font-size:14px;letter-spacing:1px;margin-bottom:4px}.relicbtn small{opacity:.8;font-size:11px;line-height:1.4}.coop{margin:8px 0;font-size:13px}.coop input{margin-right:6px}.warn{color:var(--red);font-weight:700;animation:pulse .8s infinite}@keyframes pulse{50%{opacity:.4}}.hint{font-size:12px;opacity:.6;margin-top:8px}