:root { --bg:#0f1410; --panel:#18211a; --panel2:#1f2b23; --ink:#f2efe6; --muted:#a8b09e; --accent:#d9a441; --green:#7bc47f; --red:#e06c5a; --line:#2c3a2f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
header { padding:18px 16px 12px; border-bottom:3px solid var(--accent); }
header h1 { margin:0; font-size:28px; letter-spacing:.5px; }
header h1 span { color:var(--accent); }
.tagline { color:var(--muted); margin:4px 0 0; font-size:14px; }
.badge { display:inline-block; background:#26332a; border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:12px; margin:6px 6px 0 0; color:var(--ink); }
main { max-width:860px; margin:0 auto; padding:12px 14px 80px; }
nav.tabs { display:flex; gap:8px; margin:12px 0; }
nav.tabs button { flex:1; padding:12px 6px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-size:15px; font-weight:700; cursor:pointer; }
nav.tabs button.active { background:var(--accent); color:#171207; border-color:var(--accent); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; margin:12px 0; }
.card h2 { margin:0 0 8px; font-size:18px; }
.card h3 { margin:14px 0 6px; font-size:15px; }
.muted { color:var(--muted); font-size:13px; line-height:1.5; }
.capbar { height:12px; background:#0a0e0a; border-radius:999px; overflow:hidden; margin:8px 0; border:1px solid var(--line); }
.capbar div { height:100%; background:var(--accent); }
.big { font-size:26px; font-weight:800; }
label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
input[type=text], input[type=search], select { width:100%; padding:11px; border-radius:9px; border:1px solid var(--line); background:#0e130f; color:var(--ink); font-size:16px; }
.filters { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.player { display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--line); }
.player:last-child { border-bottom:0; }
.pname { flex:1; min-width:0; }
.pname button.namebtn { background:none; border:0; color:var(--ink); font-size:16px; font-weight:700; text-align:left; padding:0; cursor:pointer; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }
.pmeta { font-size:13px; color:var(--muted); margin-top:2px; }
.price { font-weight:800; white-space:nowrap; }
.pts { color:var(--green); font-weight:700; white-space:nowrap; font-size:14px; }
.btn { padding:9px 13px; border-radius:9px; border:1px solid var(--line); background:var(--panel2); color:var(--ink); font-weight:700; cursor:pointer; white-space:nowrap; }
.btn.primary { background:var(--accent); color:#171207; border-color:var(--accent); }
.btn.danger { background:#3a1d18; border-color:#5a2b23; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.slotrow { display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.slot { width:44px; font-weight:800; color:var(--accent); flex:none; }
.empty { color:var(--muted); }
.grade { font-size:52px; font-weight:900; color:var(--accent); line-height:1; }
table.rules { width:100%; border-collapse:collapse; font-size:14px; }
table.rules td { padding:8px 4px; border-bottom:1px solid var(--line); }
table.rules td:last-child { text-align:right; font-weight:700; }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; z-index:20; }
.overlay.open { display:block; }
.panel { position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--panel); border-left:1px solid var(--line); padding:18px; overflow:auto; transform:translateX(100%); transition:transform .2s ease; z-index:30; }
.panel.open { transform:translateX(0); }
.panel h2 { margin:0 0 4px; }
.statline { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }
.statline div { background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:10px; }
.statline b { display:block; font-size:20px; }
.statline span { font-size:12px; color:var(--muted); }
footer { padding:18px 16px 40px; color:var(--muted); font-size:13px; line-height:1.6; border-top:1px solid var(--line); }
.notice { background:#2a2410; border:1px solid #6b5518; border-radius:10px; padding:12px; font-size:13px; line-height:1.5; }