:root { color-scheme: dark; --bg:#14161a; --panel:#1d2026; --line:#2b3038; --text:#e8e6e1; --muted:#9097a3; --accent:#f2b134; --bad:#e5645a; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:.9rem 1.5rem; border-bottom:1px solid var(--line); }
header nav { display:flex; gap:1rem; align-items:center; }
.brand { font-weight:700; font-size:1.15rem; color:var(--text); text-decoration:none; }
main { max-width:52rem; margin:0 auto; padding:1.5rem; }
footer { color:var(--muted); text-align:center; padding:2rem 1rem; font-size:.85rem; }
a { color:var(--accent); }
h1 { margin-top:.5rem; } h2 { margin-top:2rem; font-size:1.1rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
table { width:100%; border-collapse:collapse; background:var(--panel); border-radius:8px; overflow:hidden; }
th, td { padding:.55rem .8rem; text-align:left; border-bottom:1px solid var(--line); }
tbody tr:last-child td { border-bottom:0; }
th { color:var(--muted); font-weight:500; font-size:.85rem; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.player { display:inline-flex; gap:.5rem; align-items:center; text-decoration:none; color:var(--text); min-width:0; overflow-wrap:anywhere; }
.player.unregistered { color:var(--muted); }
td.name { width:100%; }
.player img, h1 img { border-radius:4px; vertical-align:middle; }
.cards { display:flex; gap:1rem; flex-wrap:wrap; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:1rem 1.25rem; }
.big { display:block; font-size:2rem; font-weight:700; color:var(--accent); line-height:1.1; }
.flash { background:#27313f; border:1px solid #3a4a60; border-radius:6px; padding:.7rem 1rem; }
.warn { color:var(--bad); } .muted { color:var(--muted); }
details { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.8rem 1rem; margin:.8rem 0; }
summary { cursor:pointer; font-weight:600; }
.stack { display:flex; flex-direction:column; gap:1rem; margin-top:1rem; }
label { display:flex; flex-direction:column; gap:.3rem; }
input:not([type=hidden]) { background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:6px; padding:.55rem .7rem; font:inherit; }
small { color:var(--muted); }
button, .button { background:var(--accent); color:#1a1405; border:0; border-radius:6px; padding:.5rem .9rem; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; }
button.link { background:none; color:var(--accent); padding:0; font-weight:400; }
button.danger { background:var(--bad); color:#fff; }
header form { margin:0; }
header { flex-wrap:wrap; gap:.5rem 1rem; }

@media (max-width: 600px) {
  header { padding:.7rem 1rem; }
  header nav { gap:.8rem; }
  main { padding:1rem; }
  th, td { padding:.45rem .5rem; }
  table { font-size:.9rem; }
  .card { flex:1 1 8rem; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(7rem,1fr)); }
  .grid.wide { grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); }
}

h3 { margin:1.4rem 0 .5rem; font-size:.95rem; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:.5rem; }
.grid.wide { grid-template-columns:repeat(auto-fill,minmax(12rem,1fr)); }
.cell { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.55rem .7rem; opacity:.45; display:flex; flex-direction:column; }
.cell.got { opacity:1; border-color:#5a4a22; }
.cell .n { font-size:1.4rem; font-weight:700; line-height:1.1; color:var(--muted); }
.cell.got .n { color:var(--accent); }
.cell .l { font-size:.85rem; }
.cell .top { font-size:.75rem; color:var(--muted); margin-top:.25rem; }