:root{--bg:#0f1115;--panel:#181b22;--muted:#aab2c0;--text:#e7e9ee;--border:#262a33;--accent:#3b82f6;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;overflow-x:hidden}

.wrap{display:grid;grid-template-columns:minmax(16px,1fr) minmax(980px,1500px) minmax(16px,1fr);gap:16px;margin:0 auto;padding:clamp(10px,2vw,18px)}
.header{grid-column:1/-1;text-align:center;margin:0 0 4px 0}
.header h1{margin:0;font-size:clamp(22px,2.2vw,30px)}
.header .tag{color:var(--muted)}

.toolbar{grid-column:2/3;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:6px}
.search{display:flex;gap:8px}
.search input{flex:1;background:#0b0d12;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px}
.center{text-align:center}
.right{text-align:right}
.btn{display:inline-block;background:transparent;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:10px;text-decoration:none}
.btn:hover{background:#12151c}

.top-scroll{grid-column:2/3;background:#12151c;border:1px solid var(--border);border-radius:10px;padding:2px 0;margin-bottom:6px;overflow:auto}
.top-scroll-inner{height:1px}

.table{grid-column:2/3}
.table .inner{max-height:calc(100vh - 220px);overflow:auto;border:1px solid var(--border);border-radius:12px;background:var(--panel)}

/* Table */
table{width:100%;border-collapse:collapse;min-width:1200px;font-size:clamp(13px,0.95vw,16px)}
th,td{padding:12px 14px;border-bottom:1px solid var(--border);white-space:nowrap}
thead th{position:sticky;top:0;background:#12151c;z-index:2;color:var(--muted);font-weight:700;text-align:left}
tbody tr:hover{background:#12141a}
.rank{width:40px;color:#cbd5e1}
.total{font-weight:800}
.player a{color:var(--text);text-decoration:none}
.player a:hover{text-decoration:underline}
.head-sort{cursor:pointer;user-select:none}
.sort-ind{opacity:.7;font-size:12px;margin-left:6px}
.actions a{color:var(--accent);text-decoration:none}
.actions a:hover{text-decoration:underline}

footer{grid-column:1/-1;text-align:center;color:var(--muted);padding:6px 0 10px 0;font-size:13px}


  .toolbar{grid-column:1/-1;grid-template-columns:1fr;gap:8px}
  .center,.right{text-align:left}
  .top-scroll, .table{grid-column:1/-1}
  .table .inner{max-height:calc(100vh - 250px)}
  table{min-width:900px}
}


@media (max-width: 900px){
  .wrap{grid-template-columns:1fr;gap:12px}
  .toolbar{grid-column:1/-1;grid-template-columns:1fr;gap:8px}
  .center,.right{text-align:left}
  /* Hide top scrollbar on mobile; use native bottom scrollbar */
  .top-scroll{display:none}
  /* Let the page scroll; remove inner fixed height */
  .table .inner{max-height:none; overflow:visible; border-radius:12px}
  /* Table width like antes */
  table{min-width:820px}
}