*{box-sizing:border-box}
:root{
 --bg:#28262c;--top:#35323a;--bottom:#242229;--line:rgba(255,255,255,.09);
 --text:#fff;--muted:rgba(255,255,255,.58);--gold:#f4cb50;--silver:#e3e5e9;--bronze:#d48746;
}
html,body{margin:0;padding:0;background:transparent}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--text);overflow-x:hidden}
.wrap{width:100%;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.panel{
 width:100%;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:20px;
 background:radial-gradient(circle at 8% 0%,rgba(255,255,255,.07),transparent 28%),
 linear-gradient(145deg,var(--top),var(--bg) 58%,var(--bottom));
 box-shadow:0 12px 30px rgba(0,0,0,.25)
}
.accent{height:4px;background:linear-gradient(90deg,var(--gold),#dddfe4,var(--bronze))}
header{text-align:center;padding:12px 12px 10px}
.eyebrow{font-size:9px;font-weight:800;letter-spacing:.25em;color:rgba(255,255,255,.42);margin-bottom:4px}
h1,h2{margin:0;line-height:1.05;letter-spacing:-.035em}
h1{font-size:clamp(23px,4vw,31px)}
h2{font-size:clamp(21px,3.6vw,28px)}
.subtitle{margin-top:5px;color:var(--muted);font-size:12px}

.medals{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 9px 9px}
.medals article{
 min-width:0;text-align:center;padding:10px 5px 8px;border:1px solid var(--line);
 border-radius:14px;background:rgba(255,255,255,.035)
}
.icon{font-size:21px}.label{margin-top:4px;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.count{font-size:38px;font-weight:850;line-height:1;margin:4px 0 6px}
.gold{color:var(--gold)}.silver{color:var(--silver)}.bronze{color:var(--bronze)}
.latest{padding-top:6px;border-top:1px solid rgba(255,255,255,.07)}
.latest span,.latest b{display:block}
.latest span{font-size:7px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.36)}
.latest b{margin-top:2px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.86)}

.total{display:flex;align-items:center;justify-content:space-between;margin:0 9px 9px;padding:9px 12px;border:1px solid var(--line);border-radius:13px;background:rgba(0,0,0,.14)}
.total b,.total span{display:block}.total b{font-size:12px}.total span{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.36)}
.total strong{font-size:29px;line-height:1}

.history header{padding:10px 10px 8px}
.table-wrap{
  margin:0 9px 9px;
  height:352px; max-height:352px;
  overflow-y:auto;
  overflow-x:hidden;
  border:1px solid var(--line);
  border-radius:13px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.28) transparent;
}
.table-wrap::-webkit-scrollbar{width:8px}
.table-wrap::-webkit-scrollbar-track{background:transparent}
.table-wrap::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.28);
  border-radius:999px;
}
table{width:100%;border-collapse:collapse;table-layout:fixed;background:rgba(255,255,255,.025)}
th,td{text-align:center;border-right:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}
th:last-child,td:last-child{border-right:0}
th{
  position:sticky;
  top:0;
  z-index:2;
  padding:8px 3px;
  background:#302e35;
  color:rgba(255,255,255,.55);
  font-size:8px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase
}
td{padding:8px 3px;font-size:11px;font-weight:700;color:rgba(255,255,255,.9)}
tbody tr:last-child td{border-bottom:0}
td:nth-child(2){color:var(--gold)}
td:nth-child(3){color:var(--silver)}
td:nth-child(4){color:var(--bronze)}

@media(max-width:520px){
 .panel{border-radius:17px}.wrap{gap:8px}
 header{padding:10px 8px 8px}
 .medals{gap:5px;padding:0 7px 7px}
 .medals article{padding:8px 3px 7px;border-radius:12px}
 .count{font-size:34px}
 .total{margin:0 7px 7px}
 .table-wrap{margin:0 7px 7px;height:326px;max-height:326px}
 th{padding:7px 2px;font-size:7px}
 td{padding:7px 2px;font-size:10px}
}