:root{--bg: #0a0d13;--panel: #131924;--panel-2: #1a2231;--line: #263145;--text: #e6edf7;--muted: #8496b0;--accent: #ffd166;--red: #ff6b4a;--blue: #4ac8ff;--good: #7bff9e;--bad: #ff4d5e;--radius: 10px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(1200px 700px at 20% -10%,#16203055,transparent),radial-gradient(900px 600px at 110% 110%,#1b2a3a55,transparent),var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,sans-serif;font-size:14px;overflow:hidden}button{font:inherit;color:inherit;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer;transition:background .12s,border-color .12s,transform 80ms}button:hover:not(:disabled){background:#223047;border-color:#38507a}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:linear-gradient(180deg,#2f6df6,#2358d0);border-color:#4b82ff;font-weight:600}button.primary:hover:not(:disabled){background:linear-gradient(180deg,#3d7bff,#2d64dd)}button.danger{border-color:#5c2230;background:#2a1620}button.danger:hover:not(:disabled){background:#3a1c28}button.ghost{background:transparent}input{font:inherit;color:inherit;background:#0e131c;border:1px solid var(--line);border-radius:8px;padding:10px 12px;width:100%}input:focus{outline:none;border-color:#3f6ad8}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.center-screen{height:100%;display:grid;place-items:center;padding:24px;overflow:auto}.brand{font-size:30px;font-weight:800;letter-spacing:3px;text-align:center;margin-bottom:4px}.brand span{color:var(--accent)}.brand-sub{text-align:center;color:var(--muted);margin-bottom:22px;font-size:13px}.auth-box{width:380px;padding:26px}.field{margin-bottom:12px}.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}.error-box{background:#2a1520;border:1px solid #5c2230;color:#ffb3bd;border-radius:8px;padding:9px 11px;font-size:13px;margin-bottom:12px}.lobby{width:min(1080px,100%);display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:start}.lobby-full{grid-column:1 / -1}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:600}.panel-body{padding:14px 16px}.row{display:flex;gap:10px;align-items:center}.row-between{display:flex;gap:10px;align-items:center;justify-content:space-between}.stack{display:flex;flex-direction:column;gap:10px}.match-row{display:flex;align-items:center;justify-content:space-between;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);margin-bottom:8px}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-weight:500;font-size:12px}.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}.codex-card{padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2)}.codex-card h4{margin:0 0 4px;font-size:13px}.codex-card p{margin:0 0 7px;font-size:12px;color:var(--muted);line-height:1.4}.stat{display:flex;justify-content:space-between;font-size:11.5px;padding:1px 0}.stat b{font-weight:600}.matrix td,.matrix th{text-align:center;padding:5px 6px;font-size:12px}.matrix td:first-child,.matrix th:first-child{text-align:left}.match-screen{height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:8px;padding:8px}.topbar{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}.player-card{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel)}.player-card.right{flex-direction:row-reverse;text-align:right}.player-card.seat0{border-left:3px solid var(--red)}.player-card.seat1{border-right:3px solid var(--blue)}.player-card .name{font-weight:600}.player-card .grow{flex:1;min-width:0}.bar{height:8px;border-radius:4px;background:#0b1018;overflow:hidden;border:1px solid var(--line)}.bar>i{display:block;height:100%;transition:width .18s linear}.clock-box{text-align:center;padding:7px 20px}.clock{font-size:22px;font-weight:700;letter-spacing:1px}.phase-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px}.stage{position:relative;min-height:0}canvas{width:100%;height:100%;display:block;border-radius:var(--radius);cursor:crosshair}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#080b11d1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:var(--radius)}.overlay-card{width:min(560px,92%);padding:24px;text-align:center}.overlay-card h2{margin:0 0 6px;font-size:26px}.toast{position:absolute;left:50%;bottom:14px;transform:translate(-50%);background:#341a22;border:1px solid #6b2b3a;color:#ffc3cc;padding:8px 15px;border-radius:8px;font-size:13px;pointer-events:none}.hint{position:absolute;left:12px;top:12px;background:#0c111ae6;border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-size:12px;color:var(--muted);pointer-events:none}.bottombar{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}.palette{display:flex;gap:6px;flex-wrap:wrap}.build-btn{position:relative;min-width:92px;padding:7px 9px;text-align:left;line-height:1.25}.build-btn.active{border-color:var(--accent);background:#2a2415}.build-btn.poor{opacity:.5}.build-btn .k{position:absolute;top:3px;right:5px;font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:0 3px}.build-btn .n{font-size:12.5px;font-weight:600}.build-btn .c{font-size:11.5px;color:var(--accent)}.ability-btn{position:relative;overflow:hidden;min-width:92px}.ability-btn.active{border-color:var(--accent);background:#2a2415}.ability-btn .cd{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000009e;display:grid;place-items:center;font-weight:700}.sel-panel{display:flex;gap:9px;align-items:center;padding:7px 11px;border:1px solid var(--accent);border-radius:var(--radius);background:#201c10}.tip{font-size:11.5px;color:var(--muted);line-height:1.45}.pill{font-size:11px;padding:1px 7px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}.pill.on{color:var(--good);border-color:#2c5c3a}.pill.off{color:var(--bad);border-color:#5c2230}.spacer{flex:1}@media (max-width: 900px){.lobby,.topbar{grid-template-columns:1fr}}.codex-art{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;border:1px solid var(--line);margin-bottom:9px;display:block}.build-btn .art{width:100%;height:40px;object-fit:cover;object-position:center 35%;border-radius:5px;margin-bottom:5px;display:block;opacity:.9}.bot-box{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2);padding:11px 12px}