:root{
  --bg:#0b0f14;
  --bg2:#0f141a;
  --panel:#131a21;
  --panel2:#0f151c;
  --text:#e8ecef;
  --muted:#9aa3ad;
  --accent:#d0a85c;
  --accent2:#f0d08a;
  --danger:#d24c4c;
  --blue:#3aa0f7;
  --border:1px solid rgba(208,168,92,.22);
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --radius:16px;
}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:
    radial-gradient(70% 50% at 50% -10%, rgba(208,168,92,.12), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0d1319 0%, #0b0f14 60%);
  background-attachment: fixed, fixed;
  overflow-y: overlay;
  cursor: default;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(70% 50% at 50% -10%, rgba(208,168,92,.12), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0d1319 0%, #0b0f14 60%);
  pointer-events:none;
}
input,textarea{cursor:text}
.hero{
  position:fixed;
  inset:0;
  z-index:-1;
  background:url('https://bmemov.strangerdev.ru/images/main/bg.jpg') center -10%/110% no-repeat;
  opacity:.12;
  filter:saturate(120%) blur(.2px);
}
header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(6px);
  background:linear-gradient(180deg, rgba(7,10,14,.8), rgba(7,10,14,.55));
  border-bottom:1px solid rgba(208,168,92,.18);
}
.bar{max-width:1100px;margin:0 auto;padding:14px 18px;display:flex;gap:14px;align-items:center;justify-content:center}
.title{display:flex;align-items:center;gap:12px;letter-spacing:.5px;font-weight:700}
.logo{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(135deg, rgba(208,168,92,.25), rgba(208,168,92,.05));border:1px solid rgba(208,168,92,.28);box-shadow:inset 0 0 24px rgba(208,168,92,.12)}
.title span{color:var(--accent)}
nav a{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(208,168,92,.22);
  text-decoration:none;
  color:var(--accent);
  background:linear-gradient(180deg, rgba(19,26,33,.75), rgba(13,17,22,.75));
  box-shadow:var(--shadow);
  transition:.15s ease;
}
nav a:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(208,168,92,.18)}
nav .ghost{color:var(--muted);border-color:rgba(208,168,92,.12)}
.wrap{max-width:1100px;margin:28px auto;padding:0 18px}
.card{background:linear-gradient(180deg, rgba(19,26,33,.88), rgba(13,17,22,.88));border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:20px}
.leaderboard-title{text-align:center;color:var(--accent);margin-bottom:30px}
.podium{display:flex;justify-content:center;gap:20px;margin-bottom:40px}
.podium-player{text-align:center;background:linear-gradient(180deg, rgba(19,26,33,.9), rgba(13,17,22,.9));border:var(--border);border-radius:12px;padding:20px;width:200px}
.podium-player.gold{border-color:#ffd700;background:linear-gradient(180deg, rgba(255,215,0,.1), rgba(13,17,22,.9))}
.podium-player.silver{border-color:#c0c0c0;background:linear-gradient(180deg, rgba(192,192,192,.1), rgba(13,17,22,.9))}
.podium-player.bronze{border-color:#cd7f32;background:linear-gradient(180deg, rgba(205,127,50,.1), rgba(13,17,22,.9))}
.podium-rank{font-size:24px;font-weight:bold;color:var(--accent);margin-bottom:10px}
.podium-name{font-size:16px;color:var(--text);margin-bottom:5px}
.podium-rating{font-size:14px;color:var(--muted);margin-bottom:5px}
.podium-games{font-size:14px;color:var(--muted)}
.leaderboard-table{width:100%;border-collapse:collapse;margin-top:20px}
.leaderboard-table th,.leaderboard-table td{padding:12px;text-align:left;border-bottom:1px solid rgba(208,168,92,.1)}
.leaderboard-table th{background:linear-gradient(180deg, rgba(19,26,33,.9), rgba(13,17,22,.9));color:var(--accent);font-weight:600}
.leaderboard-table tr:hover{background:rgba(208,168,92,.05)}
.rank{font-weight:bold;color:var(--accent)}
.player-id{font-family:monospace;font-size:14px}
.rating{color:var(--text)}
.games{color:var(--muted)}
.loader{position:fixed;inset:0;display:grid;place-items:center;background:rgba(11,15,20,.85);z-index:20}
.spinner{width:64px;height:64px;border:5px solid rgba(208,168,92,.2);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}