@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Pixelify+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg: #050914;
  --bg-2: #080d1c;
  --panel: rgba(10, 16, 33, .92);
  --panel-2: #0b1123;
  --panel-3: #0e162b;
  --line: #1b2843;
  --line-bright: #2e4268;
  --text: #f4f7ff;
  --muted: #8490aa;
  --muted-2: #5f6c88;
  --cyan: #3eeeff;
  --cyan-2: #15aee9;
  --blue: #1677ff;
  --green: #49ef8f;
  --red: #ff526d;
  --gold: #ffd548;
  --silver: #dce5f5;
  --bronze: #ff9454;
  --font-display: 'Pixelify Sans', 'Courier New', monospace;
  --font-body: 'Inter', system-ui, sans-serif;
  --shadow: 0 22px 80px rgba(0, 0, 0, .38);
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 50% -10%, rgba(24, 119, 255, .13), transparent 36rem),
    linear-gradient(180deg, #050914 0%, #070b18 52%, #050811 100%);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  opacity: .035;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.page-glow {
  position: fixed;
  z-index: -1;
  top: 160px;
  left: 50%;
  width: min(1100px, 96vw);
  height: 560px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(31, 144, 255, .08), transparent 66%);
  pointer-events: none;
}

/* Header */
.site-header {
  position: relative;
  z-index: 30;
  min-height: 94px;
  margin-top: 22px;
  padding: 15px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  border: 1px solid rgba(74, 104, 157, .27);
  border-radius: 22px;
  background: rgba(5, 8, 20, .78);
  box-shadow: 0 16px 55px rgba(0, 0, 0, .3), inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.brand-crop { width: 172px; height: 54px; display: flex; align-items: center; flex: none; }
.brand-crop img { width: 172px; }
.brand-tag {
  padding: 4px 7px;
  color: var(--cyan);
  border: 1px solid rgba(62, 238, 255, .38);
  border-radius: 5px;
  font: 700 10px/1 var(--font-display);
  letter-spacing: .13em;
  background: rgba(62, 238, 255, .06);
}
.main-nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  min-width: 72px;
  height: 58px;
  padding: 8px 13px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  border-radius: 13px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: color .2s, background .2s, transform .2s;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,.035); transform: translateY(-1px); }
.nav-link.active { color: var(--cyan); }
.nav-link > span:last-child { font: 600 10px/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; }
.nav-icon { font: 700 24px/1 var(--font-display); }
.nav-join {
  min-width: 82px;
  margin-left: 7px;
  color: #001018;
  background: linear-gradient(135deg, var(--cyan), #23a9ff);
  box-shadow: 0 8px 30px rgba(42, 205, 255, .22);
}
.nav-join:hover { color: #001018; background: linear-gradient(135deg, #7ff6ff, #4abaff); }

/* Shared typography and controls */
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: .025em; }
.eyebrow, .kicker { color: var(--cyan); font: 700 12px/1.2 var(--font-body); letter-spacing: .18em; text-transform: uppercase; }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity: .45; box-shadow: 0 0 5px var(--green); } }
.button {
  min-height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--line-bright);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--text);
  font: 700 13px/1 var(--font-body);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.button:hover { transform: translateY(-2px); border-color: var(--cyan-2); box-shadow: 0 14px 36px rgba(0,0,0,.25); }
.button.primary { border-color: transparent; color: #001018; background: linear-gradient(135deg, var(--cyan), #3aa7ff); box-shadow: 0 10px 34px rgba(36, 196, 255, .18); }
.button.secondary { background: rgba(8, 14, 29, .78); }
.status-chip, .count-pill {
  padding: 6px 9px;
  border: 1px solid rgba(73, 239, 143, .32);
  border-radius: 20px;
  color: var(--green);
  background: rgba(73, 239, 143, .07);
  font: 700 10px/1 var(--font-body);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.status-chip.offline { color: var(--red); border-color: rgba(255,82,109,.32); background: rgba(255,82,109,.07); }
.empty-state { padding: 32px 18px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: 14px; }
.empty-state strong { display: block; margin-bottom: 6px; color: var(--text); font-family: var(--font-display); font-size: 19px; }
.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 28px;
  padding: 12px 18px;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  color: #001018;
  background: var(--cyan);
  border-radius: 10px;
  box-shadow: 0 15px 50px rgba(0,0,0,.45);
  font-weight: 800;
  font-size: 13px;
  transition: .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Home */
.hero { padding: 105px 0 82px; text-align: center; }
.hero h1 { margin: 18px 0 14px; font-size: clamp(42px, 8vw, 88px); line-height: .95; text-shadow: 0 10px 45px rgba(0,0,0,.45); }
.hero h1 span, .rankings-intro h1 span { color: transparent; background: linear-gradient(180deg, #9bfbff 0%, var(--cyan) 35%, #168eff 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 22px rgba(49,219,255,.2)); }
.hero > p { max-width: 700px; margin: 0 auto 28px; color: var(--muted); font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.sync-line { margin-top: 24px; display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--muted-2); font-size: 11px; }
.top-section { padding: 30px 0 88px; }
.section-heading { margin-bottom: 52px; }
.section-heading.centered { text-align: center; }
.section-heading h2 { margin: 7px 0 8px; font-size: clamp(30px, 5vw, 48px); }
.section-heading p { color: var(--muted); }
.podium { min-height: 356px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 15px; }
.podium-card {
  position: relative;
  height: 288px;
  padding: 15px 14px 23px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px 15px 3px 3px;
  background: linear-gradient(180deg, rgba(14,22,43,.6), #090e1d 78%);
  box-shadow: var(--shadow);
}
.podium-card::before { content:''; position:absolute; inset: 45% 5% -20%; filter: blur(24px); opacity:.2; border-radius:50%; }
.podium-card.first { order: 2; height: 350px; border-color: rgba(255,213,72,.52); background: linear-gradient(180deg, rgba(255,213,72,.045), #0b1020 74%); }
.podium-card.first::before { background: var(--gold); }
.podium-card.second { order: 1; border-color: rgba(220,229,245,.34); }
.podium-card.second::before { background: var(--silver); }
.podium-card.third { order: 3; border-color: rgba(255,148,84,.38); }
.podium-card.third::before { background: var(--bronze); }
.podium-skin { position: relative; z-index: 2; height: 168px; width: auto; margin-bottom: 5px; image-rendering: pixelated; filter: drop-shadow(0 16px 16px rgba(0,0,0,.65)); }
.podium-card.first .podium-skin { height: 210px; }
.podium-rank { position: absolute; z-index: 3; left: 14px; top: 14px; color: var(--silver); font: 700 38px/1 var(--font-display); text-shadow: 0 0 18px currentColor; }
.podium-card.first .podium-rank { color: var(--gold); font-size: 48px; }
.podium-card.third .podium-rank { color: var(--bronze); }
.podium-name { position:relative;z-index:2; margin: 0; max-width:100%; overflow:hidden;text-overflow:ellipsis; color:var(--text); font:600 22px/1.2 var(--font-display); }
.podium-elo { position:relative;z-index:2; margin-top:4px; color:var(--cyan); font:600 13px/1 var(--font-display); }
.top-ten { margin-top: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rank-row {
  min-height: 66px;
  padding: 9px 13px;
  display: grid;
  grid-template-columns: 32px 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(13,21,42,.95), rgba(7,12,26,.95));
  transition: transform .16s, border-color .16s, background .16s;
}
.rank-row:hover { transform: translateX(3px); border-color: var(--line-bright); background: var(--panel-3); }
.rank-number { color: #7290c3; font: 700 20px/1 var(--font-display); text-align:center; }
.player-head { width: 38px; height: 38px; border-radius: 5px; image-rendering: pixelated; background:#050811; }
.rank-identity { min-width: 0; }
.rank-name { display:block; overflow:hidden;text-overflow:ellipsis; color:var(--text); font:600 16px/1.2 var(--font-display); white-space:nowrap; }
.rank-record { display:block; margin-top:3px; color:var(--muted-2); font-size:10px; }
.rank-value { color: var(--cyan); font:600 14px/1 var(--font-display); white-space:nowrap; }
.center-action { margin-top: 23px; text-align:center; }
.text-link { color: var(--muted); font:600 13px var(--font-display); transition: color .2s; }
.text-link:hover { color:var(--cyan); }
.dashboard-grid { padding-bottom: 80px; display:grid;grid-template-columns:1.2fr .8fr;gap:20px; }
.panel, .formula-banner, .rankings-app, .player-card {
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(145deg, rgba(11,18,37,.92), rgba(6,11,24,.96));
  box-shadow:0 20px 70px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.02);
}
.panel { padding:24px; }
.panel-heading { margin-bottom:20px; display:flex;align-items:flex-start;justify-content:space-between;gap:15px; }
.panel-heading h2 { margin:5px 0 0; font-size:27px; }
.match-list { display:grid;gap:9px; }
.match-item { padding:13px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:10px;background:#070c19; }
.match-server { margin-bottom:5px;color:var(--muted-2);font:700 9px var(--font-body);letter-spacing:.12em;text-transform:uppercase; }
.match-players { min-width:0;color:var(--muted);font:500 13px var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.match-players strong { color:var(--green);font-weight:600; }
.kit-badge { padding:6px 8px;border:1px solid var(--line-bright);border-radius:7px;color:var(--cyan);font:600 10px var(--font-display);white-space:nowrap; }
.category-leaders { display:grid;gap:9px; }
.category-leader { padding:12px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;background:#070c19; }
.category-symbol { width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-bright);border-radius:9px;background:var(--panel-3);font-size:21px; }
.category-leader span { display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em; }
.category-leader strong { display:block;margin-top:3px;font:600 15px var(--font-display);overflow:hidden;text-overflow:ellipsis; }
.category-leader em { color:var(--cyan);font:normal 600 13px var(--font-display); }
.formula-banner { margin-bottom:100px;padding:30px;display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:22px; }
.formula-icon { width:64px;height:64px;display:grid;place-items:center;border:1px solid rgba(62,238,255,.3);border-radius:15px;color:var(--cyan);background:rgba(62,238,255,.06);font:700 34px var(--font-display);box-shadow:inset 0 0 25px rgba(62,238,255,.05); }
.formula-banner h2 { margin:5px 0 5px;font-size:28px; }
.formula-banner p { margin:0;color:var(--muted);font-size:13px;line-height:1.6; }

/* Full ranking app */
.rankings-page { padding: 72px 0 110px; }
.rankings-intro { margin-bottom:25px;display:flex;justify-content:space-between;align-items:end;gap:25px; }
.rankings-intro h1 { margin:12px 0 7px;font-size:clamp(40px,7vw,68px);line-height:1; }
.rankings-intro p { margin:0;color:var(--muted); }
.ranking-meta { padding:12px 14px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;border-left:2px solid var(--cyan);color:var(--muted);font-size:11px;white-space:nowrap; }
.ranking-meta span:first-child { color:var(--text);font-weight:700; }
.rankings-app { padding:20px; }
.category-tabs { padding-bottom:16px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;border-bottom:1px solid var(--line); }
.category-tab {
  min-width:146px;
  height:82px;
  padding:10px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex:none;
  border:1px solid var(--line);
  border-radius:13px;
  color:var(--muted);
  background:#060a16;
  cursor:pointer;
  transition:.18s ease;
}
.category-tab:hover { color:var(--text);border-color:var(--line-bright); }
.category-tab.active { color:var(--text);border-color:var(--cyan);box-shadow:inset 0 0 28px rgba(62,238,255,.06),0 0 0 1px rgba(62,238,255,.08);background:linear-gradient(145deg,#10182c,#070b17); }
.category-tab .tab-symbol { font-size:24px;line-height:1; }
.category-tab .tab-name { font:700 13px var(--font-body);letter-spacing:.09em;text-transform:uppercase; }
.ranking-tools { margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) 52px 52px;gap:10px; }
.search-box { height:52px;padding:0 16px;display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:11px;background:#050914; }
.search-box span { color:var(--muted);font:400 28px/1 var(--font-display);transform:rotate(-18deg); }
.search-box input { min-width:0;width:100%;border:0;outline:0;color:var(--text);background:transparent;font:500 15px var(--font-display); }
.search-box input::placeholder { color:var(--muted-2); }
.icon-button { border:1px solid var(--line);border-radius:11px;background:#070c19;color:var(--muted);font:500 20px var(--font-display);cursor:pointer;transition:.18s; }
.icon-button:hover { color:var(--cyan);border-color:var(--line-bright); }
.formula-note { min-height:34px;padding:12px 3px 0;color:var(--muted-2);font-size:11px; }
.formula-note strong { color:var(--cyan); }
.rankings-content { margin-top:6px; }
.overall-list { display:grid;gap:10px; }
.overall-card {
  min-height:102px;
  padding:14px;
  display:grid;
  grid-template-columns:44px 48px minmax(150px,1fr) auto;
  align-items:center;
  gap:13px;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(90deg,#080d1c,#060a15);
  transition:.16s ease;
}
.overall-card:hover { transform:translateY(-1px);border-color:var(--line-bright); }
.overall-card.place-1 { border-color:rgba(255,213,72,.75);box-shadow:inset 4px 0 18px rgba(255,213,72,.06); }
.overall-card.place-2 { border-color:rgba(220,229,245,.5); }
.overall-card.place-3 { border-color:rgba(255,148,84,.58); }
.overall-place { color:#7190c1;font:700 28px var(--font-display);text-align:center; }
.place-1 .overall-place { color:var(--gold);text-shadow:0 0 15px rgba(255,213,72,.35); }
.place-2 .overall-place { color:var(--silver); }
.place-3 .overall-place { color:var(--bronze); }
.overall-card .player-head { width:46px;height:46px; }
.overall-main { min-width:0; }
.overall-main .rank-name { font-size:18px; }
.overall-score { margin-top:3px;color:var(--cyan);font:500 13px var(--font-display); }
.online-mark { display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);vertical-align:middle; }
.rating-chips { display:flex;justify-content:flex-end;flex-wrap:wrap;gap:7px; }
.rating-chip { min-width:66px;padding:7px 8px;display:grid;grid-template-columns:auto auto;gap:5px;align-items:center;border:1px solid var(--line);border-radius:7px;background:#070b17; }
.rating-chip i { font-style:normal;font-size:15px; }
.rating-chip span { color:var(--muted);font:600 10px var(--font-display); }
.rating-chip strong { grid-column:1/-1;color:var(--text);font:500 11px var(--font-display); }
.tier-group { margin-top:14px; }
.tier-heading { height:58px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border:1px solid currentColor;border-radius:4px;color:var(--silver);background:linear-gradient(180deg,#e8edf4,#b8c2d2);font:700 19px var(--font-display);letter-spacing:.08em; }
.tier-heading span:first-child { color:#080b13; }
.tier-heading small { color:#344055;font:700 10px var(--font-body); }
.tier-group.tier-1 .tier-heading { color:var(--gold);background:linear-gradient(180deg,#ffe36c,#e4af18); }
.tier-group.tier-2 .tier-heading { color:var(--silver); }
.tier-group.tier-3 .tier-heading { color:var(--bronze);background:linear-gradient(180deg,#ffae73,#c5632f); }
.tier-group.tier-4 .tier-heading { color:#59b8ff;background:linear-gradient(180deg,#5fbaff,#285da9); }
.tier-group.tier-5 .tier-heading { color:#7b8ba9;background:linear-gradient(180deg,#8997b0,#4d596e); }
.tier-rows { padding:10px 0 0;display:grid;gap:7px; }
.tier-row { min-height:52px;padding:8px 12px;display:grid;grid-template-columns:32px 34px minmax(0,1fr) auto auto;align-items:center;gap:10px;border:1px solid var(--line);border-radius:7px;background:#060a15; }
.tier-row:hover { border-color:var(--line-bright); }
.tier-row .player-head { width:32px;height:32px; }
.tier-row .rank-name { font-size:15px; }
.tier-label { padding:4px 7px;border:1px solid var(--line-bright);border-radius:5px;color:var(--cyan);font:600 10px var(--font-display); }
.compact .overall-card { min-height:72px;grid-template-columns:36px 36px minmax(140px,1fr) auto; }
.compact .overall-card .player-head { width:34px;height:34px; }
.compact .rating-chips { display:none; }

/* Player profile */
.player-page { padding:70px 0 110px; }
.loading-state { min-height:420px;display:grid;place-content:center;text-align:center;color:var(--muted); }
.loader { width:38px;height:38px;margin:0 auto 15px;border:3px solid var(--line);border-top-color:var(--cyan);border-radius:50%;animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.profile-hero { min-height:360px;padding:28px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;align-items:center;border:1px solid var(--line);border-radius:18px;background:radial-gradient(circle at 18% 60%,rgba(62,238,255,.12),transparent 25rem),linear-gradient(145deg,#0d152b,#070b17);box-shadow:var(--shadow); }
.skin-stage { height:300px;display:grid;place-items:center;border:1px solid var(--line);border-radius:14px;background:radial-gradient(ellipse at 50% 100%,rgba(62,238,255,.12),transparent 60%),#050914;overflow:hidden; }
.skin-stage img { height:265px;width:auto;image-rendering:pixelated;filter:drop-shadow(0 20px 20px rgba(0,0,0,.7)); }
.profile-copy .back-link { display:inline-block;margin-bottom:22px;color:var(--muted);font:600 12px var(--font-display); }
.profile-copy .back-link:hover { color:var(--cyan); }
.profile-copy h1 { margin:0;font-size:clamp(34px,6vw,64px);word-break:break-word; }
.profile-copy .profile-status { margin-top:8px;color:var(--muted);font-size:12px; }
.profile-overall { margin:24px 0;display:flex;align-items:baseline;gap:12px; }
.profile-overall strong { color:var(--cyan);font:700 38px var(--font-display); }
.profile-overall span { color:var(--muted);font:600 12px var(--font-body);text-transform:uppercase;letter-spacing:.1em; }
.record-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.record-stat { padding:12px;border:1px solid var(--line);border-radius:9px;background:rgba(5,9,20,.58); }
.record-stat span { display:block;color:var(--muted-2);font-size:9px;text-transform:uppercase;letter-spacing:.12em; }
.record-stat strong { display:block;margin-top:4px;font:600 19px var(--font-display); }
.profile-grid { margin-top:20px;display:grid;grid-template-columns:1.1fr .9fr;gap:20px; }
.player-card { padding:22px; }
.player-card.full { grid-column:1/-1; }
.card-title { margin-bottom:17px;display:flex;align-items:center;justify-content:space-between;gap:12px; }
.card-title h2 { margin:0;font-size:25px; }
.card-title span { color:var(--muted-2);font-size:10px; }
.profile-ratings { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
.profile-rating { padding:13px;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:9px;background:#060a15; }
.profile-rating .category-symbol { width:40px;height:40px; }
.profile-rating span { display:block;color:var(--muted);font-size:10px;text-transform:uppercase; }
.profile-rating strong { display:block;margin-top:3px;font:600 18px var(--font-display); }
.profile-rating em { color:var(--cyan);font:normal 600 11px var(--font-display); }
.chart-tabs { display:flex;gap:6px; }
.chart-tabs button { padding:5px 8px;border:1px solid var(--line);border-radius:5px;background:#050914;color:var(--muted);font-size:9px;cursor:pointer; }
.chart-tabs button.active { color:var(--text);border-color:var(--cyan); }
.chart-wrap { position:relative;height:260px;border:1px solid var(--line);border-radius:9px;background:#03060d;overflow:hidden; }
#rating-chart { width:100%;height:100%; }
.chart-empty { position:absolute;inset:0;display:grid;place-content:center;color:var(--muted);font-size:12px;text-align:center; }
.opponent-list { display:grid;gap:8px; }
.opponent-row { padding:10px;display:grid;grid-template-columns:28px 34px minmax(0,1fr) auto;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;background:#060a15; }
.opponent-row .player-head { width:32px;height:32px; }
.opponent-row strong { font:600 14px var(--font-display);overflow:hidden;text-overflow:ellipsis; }
.opponent-row span:last-child { color:var(--muted);font-size:11px;white-space:nowrap; }
.history-toolbar { display:flex;gap:6px; }
.history-toolbar button { width:34px;height:31px;border:1px solid var(--line);border-radius:6px;background:#050914;color:var(--muted);cursor:pointer; }
.history-toolbar button.active { color:var(--cyan);border-color:var(--cyan); }
.match-history { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.history-card { min-height:170px;padding:15px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:10px;background:linear-gradient(145deg,#090f20,#050914); }
.history-card.loss { border-left-color:var(--red); }
.history-kit { display:flex;justify-content:space-between;color:var(--muted);font:600 10px var(--font-body);text-transform:uppercase;letter-spacing:.08em; }
.history-result { margin:15px 0;color:var(--green);font:700 25px var(--font-display); }
.history-card.loss .history-result { color:var(--red); }
.history-versus { color:var(--muted);font-size:11px; }
.history-versus strong { display:block;margin-top:4px;color:var(--text);font:600 15px var(--font-display); }
.history-time { margin-top:13px;color:var(--muted-2);font-size:9px; }
.not-found { min-height:430px;padding:40px;display:grid;place-content:center;text-align:center; }
.not-found h1 { font-size:44px;margin-bottom:8px; }
.not-found p { color:var(--muted); }

/* Footer */
.site-footer { padding:54px 0 28px;border-top:1px solid var(--line);background:#04070e; }
.compact-footer { margin-top:0; }
.footer-grid { display:grid;grid-template-columns:1.2fr .7fr .7fr;gap:50px;align-items:start; }
.footer-brand { font:700 32px var(--font-display);color:#dffbff; }
.footer-brand span { color:var(--cyan); }
.footer-grid p { margin-top:7px;color:var(--muted-2);font-size:11px;line-height:1.6; }
.footer-links { display:grid;gap:10px;color:var(--muted);font:600 12px var(--font-display); }
.footer-links a:hover { color:var(--cyan); }
.footer-server { display:grid;grid-template-columns:auto auto;gap:5px 10px;align-items:center; }
.footer-server span { color:var(--muted-2);font-size:8px;letter-spacing:.1em; }
.footer-server button { padding:0;border:0;color:var(--text);background:transparent;font:600 12px var(--font-display);cursor:pointer; }
.footer-server strong { font:600 12px var(--font-display); }
.copyright { margin-top:38px;padding-top:18px;border-top:1px solid #10192c;color:#45516a;font-size:9px; }

.reveal { animation:reveal .65s both; }
@keyframes reveal { from { opacity:0;transform:translateY(14px); } to { opacity:1;transform:none; } }

/* Tablet */
@media (max-width: 900px) {
  .shell { width:min(100% - 28px, 760px); }
  .site-header { min-height:84px;margin-top:14px;padding:12px 14px; }
  .brand { min-width:0; }
  .brand-crop { width:140px;height:46px; }
  .brand-crop img { width:140px; }
  .nav-link { min-width:55px;padding-inline:8px; }
  .nav-link > span:last-child { display:none; }
  .nav-join { min-width:55px; }
  .dashboard-grid, .profile-grid { grid-template-columns:1fr; }
  .player-card.full { grid-column:auto; }
  .formula-banner { grid-template-columns:60px minmax(0,1fr); }
  .formula-banner .button { grid-column:1/-1; }
  .profile-hero { grid-template-columns:240px minmax(0,1fr);gap:24px; }
  .skin-stage { height:270px; }
  .skin-stage img { height:235px; }
  .match-history { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-server { display:none; }
}

/* Mobile — intentionally mirrors the compact stacked reference layout */
@media (max-width: 620px) {
  .shell { width:calc(100% - 20px); }
  .site-header { padding:9px 10px;flex-direction:column;gap:2px;border-radius:16px; }
  .brand { height:50px;justify-content:center; }
  .brand-crop { width:156px;height:48px; }
  .brand-crop img { width:156px; }
  .brand-tag { display:none; }
  .main-nav { width:100%;justify-content:space-around;border-top:1px solid rgba(255,255,255,.03); }
  .nav-link { height:50px;min-width:48px;padding:6px; }
  .nav-icon { font-size:22px; }
  .nav-join { margin-left:0; }
  .hero { padding:65px 0 58px; }
  .hero h1 { font-size:47px; }
  .hero > p { font-size:13px;line-height:1.6; }
  .hero-actions { display:grid;grid-template-columns:1fr; }
  .sync-line { flex-wrap:wrap; }
  .top-section { padding-top:15px;padding-bottom:62px; }
  .section-heading { margin-bottom:30px; }
  .podium { min-height:280px;gap:6px; }
  .podium-card { height:226px;padding-inline:5px; }
  .podium-card.first { height:280px; }
  .podium-skin { height:120px; }
  .podium-card.first .podium-skin { height:158px; }
  .podium-rank { left:8px;top:9px;font-size:29px; }
  .podium-card.first .podium-rank { font-size:36px; }
  .podium-name { font-size:14px; }
  .podium-elo { font-size:10px; }
  .top-ten { grid-template-columns:1fr;gap:7px; }
  .rank-row { min-height:58px;grid-template-columns:27px 36px minmax(0,1fr) auto;gap:8px;padding:7px 9px; }
  .player-head { width:34px;height:34px; }
  .rank-name { font-size:14px; }
  .rank-value { font-size:11px; }
  .panel { padding:17px 13px; }
  .formula-banner { margin-bottom:65px;padding:20px 16px;grid-template-columns:48px minmax(0,1fr);gap:14px; }
  .formula-icon { width:48px;height:48px;font-size:25px; }
  .formula-banner h2 { font-size:21px; }
  .rankings-page { padding:52px 0 75px; }
  .rankings-intro { align-items:start;flex-direction:column; }
  .rankings-intro h1 { font-size:42px; }
  .ranking-meta { width:100%;align-items:start;border-left:0;border-top:2px solid var(--cyan); }
  .rankings-app { padding:13px 10px;border-radius:15px; }
  .category-tabs { gap:7px; }
  .category-tab { min-width:128px;height:75px;padding:8px 12px; }
  .ranking-tools { grid-template-columns:minmax(0,1fr) 48px 48px;gap:7px; }
  .search-box { height:48px;padding-inline:11px; }
  .overall-card { min-height:116px;padding:11px 9px;grid-template-columns:32px 40px minmax(0,1fr);gap:8px; }
  .overall-card .player-head { width:38px;height:38px; }
  .overall-main .rank-name { font-size:16px; }
  .rating-chips { grid-column:1/-1;justify-content:flex-start;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%; }
  .rating-chip { min-width:0;padding:5px;justify-content:center; }
  .rating-chip strong { text-align:center;font-size:9px; }
  .tier-heading { height:52px;padding-inline:14px;font-size:17px; }
  .tier-row { grid-template-columns:24px 30px minmax(0,1fr) auto;gap:7px;padding-inline:8px; }
  .tier-row .player-head { width:29px;height:29px; }
  .tier-row .rank-name { font-size:13px; }
  .tier-row .rank-value { display:none; }
  .profile-hero { padding:16px;grid-template-columns:1fr;gap:20px; }
  .skin-stage { height:315px; }
  .skin-stage img { height:280px; }
  .profile-copy .back-link { margin-bottom:10px; }
  .profile-overall { margin:15px 0; }
  .record-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:6px; }
  .record-stat { padding:9px 7px; }
  .record-stat strong { font-size:15px; }
  .player-card { padding:16px 12px; }
  .profile-ratings { grid-template-columns:1fr; }
  .chart-wrap { height:220px; }
  .match-history { grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }
  .history-card { min-height:160px;padding:11px; }
  .history-result { font-size:20px; }
  .footer-grid { grid-template-columns:1fr;text-align:left; }
  .footer-links { grid-template-columns:repeat(3,auto);justify-content:start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; }
}