:root{
  --paper:#e7dcc2; --paper2:#d9caa8; --ink:#1b1b1b;
  --olive:#4b5535; --olive2:#6b7448;
  --line: rgba(0,0,0,.18); --shadow: rgba(0,0,0,.28);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, rgba(255,255,255,.20), transparent 55%),
    linear-gradient(180deg, #2a2f20, #171a12 60%, #0f110c);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.grain{ position:fixed; inset:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay; opacity:.35;
}
.page{ max-width: 980px; margin: 40px auto; padding: 0 18px 60px; }
.header{ display:flex; gap:18px; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.badge{
  display:inline-block; background: linear-gradient(180deg, var(--olive2), var(--olive));
  color:#f4f0e4; padding:6px 10px; border: 1px solid rgba(255,255,255,.2);
  letter-spacing:.12em; font-weight:900; font-size:12px; text-transform:uppercase;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
h1{
  margin:10px 0 6px; font-size: 32px; letter-spacing: .06em; text-transform: uppercase;
  color: #f2ead6; text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.subtitle{ margin:0; color: rgba(242,234,214,.85); }
.header__right{ min-width: 320px; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.stamp{
  color: rgba(255,255,255,.85); border:2px dashed rgba(255,255,255,.45);
  padding:10px 14px; transform: rotate(6deg); text-transform:uppercase; letter-spacing:.18em;
  font-weight:900; background: rgba(122,29,29,.35); box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.meta{
  width:100%; background: rgba(231,220,194,.14);
  border: 1px solid rgba(255,255,255,.12); padding:10px 12px;
  color: rgba(255,255,255,.88); backdrop-filter: blur(4px); border-radius: 10px;
}
.meta > div{ display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.meta span{ opacity:.75; }

.card{
  background:
    linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,.10)),
    radial-gradient(900px 600px at 30% 20%, rgba(255,255,255,.30), transparent 60%),
    linear-gradient(180deg, var(--paper), var(--paper2));
  border: 1px solid rgba(0,0,0,.25); border-radius: 14px; overflow:hidden;
  box-shadow: 0 18px 60px var(--shadow);
}
.card__top{
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.card__title{ font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.controls{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.btn{
  appearance:none; border: 1px solid rgba(0,0,0,.25); background: rgba(0,0,0,.08);
  padding:8px 12px; border-radius: 10px; cursor:pointer;
  font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:12px;
}
.btn:hover{ background: rgba(0,0,0,.12); }
.btn--active{ background: linear-gradient(180deg, var(--olive2), var(--olive)); color:#f4f0e4; }
.refresh{
  display:flex; align-items:center; gap:8px; padding-left:6px;
  border-left: 1px solid rgba(0,0,0,.18); margin-left:6px;
}
.refresh label{ font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:12px; }
.refresh select{
  border:1px solid rgba(0,0,0,.25); background: rgba(255,255,255,.35);
  padding:6px 10px; border-radius: 10px; font-weight:800;
}
.debug{
  text-decoration:none;
  border:1px solid rgba(0,0,0,.25);
  background: rgba(0,0,0,.06);
  padding:8px 12px;
  border-radius:10px;
  color:#1b1b1b;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}
.debug:hover{ background: rgba(0,0,0,.12); }

.table{ width:100%; }
.row{
  display:grid;
  grid-template-columns: 120px 1.6fr 130px 110px 110px 110px;
  border-bottom: 1px solid var(--line);
}
.row--head{ background: rgba(75,85,53,.12); font-weight:900; text-transform:uppercase; letter-spacing:.10em; font-size:12px; }
.cell{ padding: 14px 16px; display:flex; align-items:center; min-height: 56px; }
.cell.num{ justify-content:flex-end; font-variant-numeric: tabular-nums; }
.cell.rank{ justify-content:center; gap:10px; }
.rank__chip{
  width: 38px; height: 38px; border-radius: 10px; display:grid; place-items:center;
  font-weight: 900; background: rgba(0,0,0,.10); border: 1px solid rgba(0,0,0,.22);
}
.medal{
  width: 26px; height: 26px; display:grid; place-items:center; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.25); font-weight: 900; line-height:1;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.medal--gold{ background: rgba(255,215,0,.55); }
.medal--silver{ background: rgba(192,192,192,.55); }
.medal--bronze{ background: rgba(205,127,50,.55); }

.name{ flex-direction:column; align-items:flex-start; gap:2px; }
.name__main{ font-weight: 900; letter-spacing:.02em; }
.name__sub{ font-size: 12px; color: rgba(0,0,0,.55); }
.empty{ padding: 16px 18px; color: rgba(0,0,0,.72); }
.card__footer{ padding: 14px 18px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.fineprint{ font-size: 12px; color: rgba(0,0,0,.62); }

@media (max-width: 880px){
  .header{ flex-direction:column; align-items:flex-start; }
  .header__right{ align-items:flex-start; min-width:auto; width:100%; }
  .row{ grid-template-columns: 110px 1fr 90px 80px 80px 80px; }
  .cell{ padding: 12px 12px; }
}

.fineprint a{ color: inherit; text-decoration: underline; }
.fineprint a:hover{ opacity: .85; }