:root {
  color-scheme: dark;
  --ink: #080c12;
  --ink-soft: #0e141e;
  --panel: rgba(15, 21, 31, 0.92);
  --panel-solid: #101722;
  --panel-soft: #151e2b;
  --line: rgba(214, 226, 246, 0.12);
  --line-strong: rgba(234, 242, 255, 0.2);
  --text: #f5f8fc;
  --muted: #a9b4c5;
  --muted-2: #758195;
  --gold: #ffbb2b;
  --gold-soft: #ffd36c;
  --gold-ink: #121008;
  --mint: #58d7a8;
  --danger: #ff826f;
  --radius-lg: 22px;
  --radius-md: 14px;
  --shell: min(1180px, calc(100% - 48px));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--ink);
  color: var(--text);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 80% -10%, rgba(45, 80, 122, 0.28), transparent 33rem),
    linear-gradient(180deg, #0a0f17 0%, #080c12 42%, #0c121b 100%);
  color: var(--text);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  background-image: linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, black, transparent 58%);
  pointer-events: none;
}

button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

.shell { width: var(--shell); margin-inline: auto; }

.skip-link {
  position: fixed;
  z-index: 20;
  top: -4rem;
  left: 1rem;
  padding: .75rem 1rem;
  border-radius: 0 0 .6rem .6rem;
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 800;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }

.ambient-grain {
  position: fixed;
  z-index: 5;
  inset: 0;
  opacity: .05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.78'/%3E%3C/svg%3E");
}

.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(222, 233, 252, .1);
  background: rgba(8, 12, 18, .82);
  backdrop-filter: blur(20px) saturate(130%);
}

.brand, .primary-nav, .header-actions { display: flex; align-items: center; }
.brand { width: max-content; height: 58px; }
.brand-logo { display: block; width: auto; height: 58px; max-width: 210px; object-fit: contain; object-position: left center; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }

.primary-nav { justify-content: center; align-self: stretch; gap: 8px; }
.nav-link {
  position: relative;
  display: grid;
  height: 72px;
  place-items: center;
  padding: 0 18px;
  color: #c3ccd9;
  font-size: .84rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.nav-link::after { position: absolute; right: 18px; bottom: -1px; left: 18px; height: 2px; content: ""; transform: scaleX(0); background: var(--gold); transition: transform .22s ease; }
.nav-link:hover, .nav-link:focus-visible, .nav-link.is-active { color: var(--gold-soft); }
.nav-link.is-active::after { transform: scaleX(1); }

.header-actions { justify-content: flex-end; gap: 10px; }
.icon-button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: #f2f5fa;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.icon-button svg { width: 19px; height: 19px; }
.icon-button:hover, .icon-button:focus-visible { transform: translateY(-1px); border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); }
.icon-button[aria-disabled="true"] { opacity: .78; cursor: default; }
.store-link { border-color: transparent; background: linear-gradient(125deg, #ffd269, #ffae1d 55%, #ed8e05); color: #181108; box-shadow: 0 8px 20px rgba(255, 164, 25, .16); }
.store-link:hover, .store-link:focus-visible { background: linear-gradient(125deg, #ffe39c, #ffc143 55%, #f59b0e); }

.hero { position: relative; min-height: clamp(286px, 32vw, 390px); overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.hero-image { position: absolute; z-index: -2; inset: 0; background: center 52% / cover no-repeat url("assets/ambient-minecraft-world.png"); transform: scale(1.025); animation: hero-settle 1.2s cubic-bezier(.22,.8,.3,1) both; }
.hero-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(7, 11, 17, .95) 0%, rgba(7, 11, 17, .77) 32%, rgba(7, 11, 17, .14) 72%, rgba(7, 11, 17, .62) 100%), linear-gradient(0deg, rgba(8,12,18,.76), transparent 60%); }
.hero-content { display: flex; min-height: inherit; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 48px 42px; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 800px; margin: 0; font-size: clamp(2.65rem, 5.5vw, 5rem); line-height: .94; font-weight: 950; letter-spacing: -.065em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 5px 28px rgba(0,0,0,.42); }

.dashboard { padding-top: clamp(40px, 6vw, 72px); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.section-heading h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.55rem); line-height: 1; letter-spacing: -.05em; }

.leaderboard-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(140deg, rgba(21,30,43,.9), rgba(13,19,28,.78)); }
.metric-control { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.metric-control select { min-width: 166px; padding: .55rem 2.1rem .55rem .75rem; border: 1px solid rgba(220,233,255,.18); border-radius: 7px; outline: none; color: var(--text); background: #0b1018; font-size: .82rem; font-weight: 750; letter-spacing: normal; text-transform: none; transition: border-color .2s, box-shadow .2s; }
.metric-control select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,187,43,.15); }
.interaction-hint { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--muted-2); font-size: .75rem; }
.interaction-hint span { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--muted); font-size: .67rem; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 16px; margin: 20px 0 18px; }
.podium-card { position: relative; display: flex; min-height: 160px; align-items: center; gap: 16px; overflow: hidden; padding: 19px; border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(130deg, rgba(20,29,41,.98), rgba(11,16,24,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.podium-card::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: radial-gradient(circle at 20% 0%, rgba(132, 171, 233, .12), transparent 45%); }
.podium-card.is-first { border-color: rgba(255, 190, 42, .84); background: linear-gradient(130deg, rgba(72, 53, 18, .96), rgba(20, 23, 26, .99)); box-shadow: inset 0 0 0 1px rgba(255,219,108,.08), 0 8px 24px rgba(0,0,0,.24); }
.podium-card.is-first::before { background: radial-gradient(circle at 22% 0%, rgba(255, 193, 54, .32), transparent 52%); }
.podium-card.is-third { border-color: rgba(215, 115, 70, .54); }
.podium-card.is-third::before { background: radial-gradient(circle at 18% 0%, rgba(220, 112, 66, .18), transparent 47%); }
.rank-medal { position: absolute; top: 12px; right: 13px; color: var(--muted); font-size: .8rem; font-weight: 900; letter-spacing: .05em; }
.is-first .rank-medal { color: var(--gold-soft); }
.is-third .rank-medal { color: #f0a07a; }
.avatar { position: relative; flex: 0 0 72px; width: 72px; height: 72px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: linear-gradient(140deg, #263853, #151b27); box-shadow: 0 8px 18px rgba(0,0,0,.22); }
.avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.avatar-fallback, .tiny-avatar.avatar-fallback { display: grid; place-items: center; background: linear-gradient(145deg, #334966, #182334); }
.avatar-letter { color: var(--gold-soft); font-size: 1.3rem; font-weight: 950; }
.tiny-avatar .avatar-letter { font-size: .82rem; }
.podium-copy { min-width: 0; }
.podium-copy h3 { overflow: hidden; margin: 4px 0 8px; font-size: 1.08rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.02em; }
.podium-copy p { margin: 0; color: var(--muted); font-size: .72rem; }
.podium-score { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; color: var(--gold); font-size: 1.06rem; font-weight: 900; }
.podium-score span { color: #a7b1c2; font-size: .65rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.podium-stats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 7px; color: #d7ddea; font-size: .67rem; font-weight: 750; }
.podium-stats span + span { padding-left: 9px; border-left: 1px solid rgba(255,255,255,.16); }

.leaderboard-panel { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(17, 24, 35, .98), rgba(10, 15, 22, .99)); box-shadow: 0 18px 38px rgba(0,0,0,.19); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 14px 20px; border-bottom: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.012); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-align: left; text-transform: uppercase; }
th:nth-child(3), td:nth-child(3) { text-align: right; }
th:last-child, td:last-child { width: 124px; text-align: right; }
td { height: 64px; padding: 8px 20px; border-bottom: 1px solid rgba(218,230,255,.07); color: #dce3ef; font-size: .87rem; transition: background .18s ease; }
tbody tr:last-child td { border-bottom: none; }
.player-row { cursor: pointer; outline: none; }
.player-row:hover td, .player-row:focus-visible td { background: rgba(255, 190, 42, .065); }
.player-row:focus-visible td { box-shadow: inset 2px 0 var(--gold); }
.rank-number { color: #8490a3; font-size: .8rem; font-weight: 850; }
.rank-number.top { color: var(--gold); }
.player-cell { display: flex; align-items: center; gap: 10px; min-width: 190px; font-weight: 800; }
.tiny-avatar { width: 36px; height: 36px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: #1d2838; }
.tiny-avatar img { width: 100%; height: 100%; image-rendering: pixelated; object-fit: cover; }
.metric-value { color: var(--gold-soft); font-weight: 900; font-variant-numeric: tabular-nums; }
.preview-affordance { color: var(--muted); font-size: .74rem; font-weight: 700; }
.player-row:hover .preview-affordance { color: var(--gold-soft); }
.skeleton-row td::after, .skeleton-card::after, .skeleton-game::after { display: block; width: 100%; height: 12px; border-radius: 20px; content: ""; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04)); background-size: 200% 100%; animation: skeleton-shimmer 1.25s linear infinite; }
.skeleton-row td:nth-child(1)::after { width: 20px; }.skeleton-row td:nth-child(2)::after { width: 170px; }.skeleton-row td:nth-child(3)::after { width: 60px; margin-left: auto; }.skeleton-row td:nth-child(4)::after { width: 54px; margin-left: auto; }
.skeleton-card { min-height: 160px; }.skeleton-card::after { height: 86px; }.skeleton-game { min-height: 180px; }
.empty-state { padding: 55px 24px; text-align: center; }.empty-icon { display: grid; width: 44px; height: 44px; place-items: center; margin: 0 auto 14px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold); font-size: 1.45rem; }.empty-state h3 { margin-bottom: 7px; font-size: 1.08rem; }.empty-state p { max-width: 410px; margin: 0 auto; color: var(--muted); font-size: .86rem; line-height: 1.6; }

.games-section { padding-top: clamp(64px, 9vw, 118px); padding-bottom: clamp(60px, 8vw, 100px); }
.rail-actions { display: flex; gap: 8px; }
.round-button { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(255,255,255,.025); font-size: 1.05rem; transition: background .2s, color .2s, transform .2s; }
.round-button:hover, .round-button:focus-visible { transform: translateY(-2px); border-color: rgba(255, 190, 42, .7); color: var(--gold); background: rgba(255,187,43,.1); }
.games-rail { display: grid; grid-auto-columns: minmax(285px, 375px); grid-auto-flow: column; gap: 15px; overflow-x: auto; padding: 4px 2px 16px; scroll-snap-type: x mandatory; scrollbar-color: rgba(255,187,43,.42) transparent; scrollbar-width: thin; }
.game-card { position: relative; z-index: 0; display: flex; min-height: 178px; flex-direction: column; scroll-snap-align: start; overflow: hidden; isolation: isolate; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #0b1119; transition: border-color .2s, transform .25s ease, box-shadow .25s ease; }
.game-card:not(.skeleton-game)::before { position: absolute; z-index: -2; inset: -5%; content: ""; background: 24% 58% / cover no-repeat url("assets/ambient-minecraft-world.png"); opacity: .5; transform: scale(1.03); transition: transform .45s ease; }
.game-card:not(.skeleton-game)::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(122deg, rgba(7, 12, 19, .94), rgba(9, 14, 21, .78) 58%, rgba(7, 11, 17, .89)); }
.game-card:nth-child(3n + 2):not(.skeleton-game)::before { background-position: 55% 48%; }
.game-card:nth-child(3n):not(.skeleton-game)::before { background-position: 80% 58%; }
.game-card:hover { transform: translateY(-4px); border-color: rgba(255,187,43,.36); box-shadow: 0 14px 26px rgba(0,0,0,.2); }
.game-card:hover:not(.skeleton-game)::before { transform: scale(1.1); }
.game-card > * { position: relative; z-index: 1; }
.game-card-top { display: flex; justify-content: space-between; gap: 14px; }.game-eyebrow { margin: 0 0 5px; color: rgba(255, 215, 112, .94); font-size: .6rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }.game-mode { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: #f5f7fb; font-size: 1rem; font-weight: 870; letter-spacing: -.025em; }.game-mode span { padding: 4px 7px; border-radius: 999px; color: #d8e0ec; background: rgba(15, 22, 34, .72); font-size: .62rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }.game-meta { color: #b6c2d1; font-size: .76rem; }.game-date { color: #b5c0d0; font-size: .72rem; text-align: right; white-space: nowrap; }.game-divider { height: 1px; margin: auto 0 13px; background: rgba(220,232,250,.18); }.game-details { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #d3dbe8; font-size: .73rem; }.game-detail-list { display: flex; flex-wrap: wrap; gap: 10px; }.game-detail-list span { display: inline-flex; align-items: center; gap: 5px; }.ranked-label { color: var(--gold-soft); font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }

.site-footer { display: flex; justify-content: space-between; gap: 24px; padding: 22px max(24px, calc((100vw - 1180px) / 2)); border-top: 1px solid var(--line); color: #6f7b8e; font-size: .7rem; }

.player-dialog { width: min(660px, calc(100% - 32px)); max-height: min(760px, calc(100dvh - 32px)); overflow: auto; padding: 0; border: 1px solid rgba(229,239,255,.19); border-radius: 22px; color: var(--text); background: #111823; box-shadow: 0 28px 90px rgba(0,0,0,.6); }
.player-dialog::backdrop { background: rgba(4,7,11,.76); backdrop-filter: blur(5px); }
.dialog-close { position: absolute; z-index: 2; top: 13px; right: 13px; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); background: rgba(9,13,19,.82); font-size: 1.45rem; line-height: 1; transition: color .2s, border-color .2s, background .2s; }.dialog-close:hover, .dialog-close:focus-visible { border-color: rgba(255,187,43,.7); color: var(--gold); background: #151c28; }
.dialog-loading { display: grid; min-height: 300px; place-content: center; gap: 14px; color: var(--muted); text-align: center; }.dialog-loading p { margin: 0; }.loading-orb { width: 34px; height: 34px; margin: auto; border: 3px solid rgba(255,187,43,.18); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
.player-preview { padding: 30px; }.dialog-title-row { display: flex; align-items: start; justify-content: space-between; gap: 20px; }.dialog-title-row h2 { max-width: 370px; margin: 0; overflow-wrap: anywhere; font-size: clamp(1.65rem, 4vw, 2.25rem); letter-spacing: -.055em; }.rank-chip { padding: 7px 9px; border: 1px solid rgba(255,187,43,.26); border-radius: 999px; color: var(--gold-soft); background: rgba(255,187,43,.09); font-size: .67rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }.profile-hero { display: flex; align-items: center; gap: 20px; margin: 25px 0 20px; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(130deg, rgba(255,187,43,.1), rgba(255,255,255,.02)); }.large-avatar { flex: 0 0 100px; width: 100px; height: 100px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: #1d2938; }.large-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }.profile-level { display: grid; gap: 4px; }.profile-level > span:first-child { color: var(--muted); font-size: .75rem; }.profile-level strong { color: var(--gold); font-size: 2.1rem; line-height: 1; letter-spacing: -.06em; }.profile-level > span:last-child { color: #d7dfeb; font-size: .78rem; font-weight: 700; }.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: rgba(255,255,255,.018); }.profile-stats div { padding: 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.profile-stats div:nth-child(3n) { border-right: none; }.profile-stats div:nth-last-child(-n + 3) { border-bottom: none; }.profile-stats dt { margin-bottom: 6px; color: var(--muted-2); font-size: .65rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.profile-stats dd { margin: 0; color: #f5f7fb; font-size: 1.15rem; font-weight: 900; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }.profile-stats div:first-child dd { color: var(--gold-soft); }.player-history { margin-top: 23px; }.history-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }.history-heading h3 { margin: 0; font-size: .92rem; }.history-heading span { color: var(--muted-2); font-size: .7rem; }.player-history ul { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }.history-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid rgba(220,232,252,.08); border-radius: 10px; color: var(--muted); font-size: .76rem; }.history-row strong { color: #e6ecf5; font-size: .8rem; }.history-result { font-weight: 850; }.history-result.win { color: var(--mint); }.history-result.loss { color: #f4a18f; }.history-empty { padding: 13px; border: 1px dashed var(--line-strong); border-radius: 10px; color: var(--muted); font-size: .8rem; text-align: center; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.8,.3,1); }.reveal.is-visible { opacity: 1; transform: none; }
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes hero-settle { from { opacity: .4; transform: scale(1.08); } to { opacity: 1; transform: scale(1.025); } }

@media (max-width: 880px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 66px; }.primary-nav { order: 3; grid-column: 1 / -1; height: 42px; border-top: 1px solid rgba(255,255,255,.05); }.nav-link { height: 42px; padding: 0 16px; }.header-actions { gap: 7px; }.icon-button { width: 36px; height: 36px; }.brand, .brand-logo { height: 50px; }.hero { min-height: 300px; }.podium-card { min-height: 144px; gap: 12px; padding: 14px; }.avatar { flex-basis: 58px; width: 58px; height: 58px; }.podium-stats { display: none; }.desktop-only { display: none; } th:last-child, td:last-child { display: none; }
}

@media (max-width: 660px) {
  :root { --shell: min(100% - 28px, 1180px); }.site-header { padding-inline: 14px; }.brand, .brand-logo { height: 42px; max-width: 160px; }.icon-button { width: 35px; height: 35px; }.hero { min-height: 286px; }.hero-content { padding-block: 43px 29px; }.section-heading { align-items: start; flex-direction: column; gap: 14px; }.leaderboard-toolbar { align-items: stretch; flex-direction: column; gap: 11px; }.metric-control { justify-content: space-between; }.metric-control select { min-width: 158px; }.interaction-hint { font-size: .7rem; }.podium { grid-template-columns: 1fr; }.podium-card { min-height: 116px; }.podium-card.is-first { order: -1; }.podium-stats { display: flex; }.podium-copy { display: grid; flex: 1; grid-template-columns: 1fr auto; column-gap: 10px; }.podium-copy h3 { grid-column: 1 / -1; }.podium-score { margin-top: 4px; }.podium-stats { align-items: center; justify-content: end; margin-top: 4px; }.games-section { padding-top: 64px; }.games-rail { grid-auto-columns: calc(100% - 22px); }.site-footer { align-items: start; flex-direction: column; gap: 5px; padding-inline: 14px; }.player-preview { padding: 24px 18px; }.profile-stats { grid-template-columns: repeat(2, 1fr); }.profile-stats div:nth-child(3n) { border-right: 1px solid var(--line); }.profile-stats div:nth-child(2n) { border-right: none; }.profile-stats div:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }.profile-stats div:nth-last-child(-n + 2) { border-bottom: none; }
}

@media (max-width: 380px) { .brand, .brand-logo { height: 37px; max-width: 138px; }.icon-button { width: 33px; height: 33px; }.metric-control { align-items: start; flex-direction: column; gap: 7px; }.metric-control select { width: 100%; }.podium-stats { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.hero-image, .skeleton-row td::after, .skeleton-card::after, .skeleton-game::after, .loading-orb { animation: none; }.reveal { transition: none; opacity: 1; transform: none; } }
/* Player search and match results */
.leaderboard-toolbar { gap: 20px; flex-wrap: wrap; }
.player-search { position: relative; flex: 1 1 220px; max-width: 360px; z-index: 5; }
.player-search label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #aab5c5; margin-bottom: 7px; }
.player-search input { width: 100%; box-sizing: border-box; border: 1px solid #344052; border-radius: 10px; padding: 11px 14px; background: #111923; color: #f4f7fc; font: inherit; }
.player-search input:focus-visible, .search-result:focus-visible, .game-card:focus-visible, .match-player-link:focus-visible { outline: 2px solid #ffbd29; outline-offset: 3px; }
.search-results { position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; max-height: 300px; overflow-y: auto; background: #111923; border: 1px solid #344052; border-radius: 10px; box-shadow: 0 15px 35px #0009; padding: 8px; }
.search-results[hidden] { display: none; }
.search-results p { padding: 8px; color: #b8c1cf; }
.search-result { display: block; width: 100%; background: transparent; border: 0; border-radius: 6px; color: #f4f7fc; text-align: left; padding: 10px; font: inherit; cursor: pointer; }
.search-result:hover { background: #243142; }
.game-card[role=button] { cursor: pointer; }
.game-card[role=button]:hover { border-color: #ffbd29; }
.game-date-block { text-align: right; }
.game-player-count { color: #ffcf65; font-size: 12px; margin-top: 8px; }
.match-summary { color: #b8c1cf; margin: 12px 0; }
.match-winners { color: #ffcf65; line-height: 1.6; margin: 16px 0; overflow-wrap: anywhere; }
.match-table { width: 100%; min-width: 480px; border-collapse: collapse; }
.match-table td, .match-table th { text-align: left; padding: 12px 8px; border-bottom: 1px solid #ffffff12; }
.match-table th { font-size: 11px; color: #aab5c5; }
.match-winner-row { background: #ffbd2910; }
.match-player-link { background: transparent; border: 0; color: #ffcf65; font: inherit; cursor: pointer; text-align: left; padding: 0; }
.match-player-link:hover { text-decoration: underline; }
@media (max-width: 640px) { .player-search { max-width: none; flex-basis: 100%; } }

/* Single-click navigation and clear match outcomes */
.leaderboard-toolbar .player-search { margin-left: auto; }
.leaderboard-toolbar { position: relative; z-index: 6; }
.history-row { display: block; padding: 0; }
.history-match-button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 12px; border: 0; border-radius: inherit; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.history-match-button:hover { background: #ffffff08; }
.history-match-button:focus-visible { outline: 2px solid #ffbd29; outline-offset: 2px; }
.history-result { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.history-outcome { color: #b8c1cf; }
.history-outcome.win, .elo-change.win { color: #43e5b1; }
.elo-change.loss { color: #ff8279; }
.elo-change.neutral { color: #b8c1cf; }
.elo-change { font-family: system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: normal; }
.game-number { color: #ffcf65; font-size: 12px; font-weight: 700; margin: 0 0 6px; }
@media(max-width: 480px) { .history-match-button { align-items: flex-start; flex-direction: column; gap: 8px; } .history-result { align-self: flex-end; } }

/* Compact rankings layout and sortable statistics */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.hero { min-height: 0; border: 0; background: none; overflow: visible; }
.hero-content { min-height: 0; padding-block: 42px 16px; }
h1 { font-size: clamp(2rem,4.2vw,3.6rem); line-height: 1.08; }
.rankings-kicker { color: var(--gold); font-size: 11px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; }
.rankings-description { color: var(--muted); margin: 14px 0 0; font-size: 14px; }
.dashboard { padding-top: 0; }
.leaderboard-toolbar { background: none; border: 0; padding: 0; margin: 0 0 16px; }
.leaderboard-toolbar .player-search { max-width: 320px; }
.podium { margin-top: 0; }
.icon-button.discord-link, .icon-button.store-link { width: auto; height: 40px; padding: 0 16px; gap: 8px; border: 0; border-radius: 12px; font-family: system-ui,sans-serif; font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .025em; text-decoration: none; }
.icon-button.discord-link { background: #5865f2; color: #fff; box-shadow: 0 5px 0 #3842ab,0 9px 20px #5865f22b; }
.icon-button.store-link { background: #ffb51d; color: #18120a; box-shadow: 0 5px 0 #b97710,0 9px 20px #ffb51d24; }
.icon-button.discord-link:hover { background: #6975ff; }.icon-button.store-link:hover { background: #ffc342; }
.icon-button.discord-link svg { fill: currentColor; flex-shrink: 0; }.icon-button.store-link svg { display: none; }
.leaderboard-panel table { min-width: 620px; }
.leaderboard-panel th:nth-child(n+3), .leaderboard-panel td:nth-child(n+3) { text-align: right; }
.leaderboard-panel th:last-child, .leaderboard-panel td:last-child { display: table-cell; }
.sort-stat { background: transparent; border: 0; padding: 8px 10px; color: var(--muted); border-radius: 8px; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.sort-stat:hover { color: #fff; background: #ffffff0a; }.sort-stat.is-active { color: #171109; background: var(--gold); }
.sort-stat:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.sort-arrow { visibility: hidden; }.is-active .sort-arrow { visibility: visible; }
.stat-cell { color: #aeb9ca; font-variant-numeric: tabular-nums; }.stat-cell.selected-stat { color: var(--gold); font-weight: 850; }
@media(max-width:640px) { .hero-content { padding-block: 26px 18px; } .icon-button.discord-link, .icon-button.store-link { padding-inline: 10px; height: 35px; font-size: 10px; gap: 5px; } .icon-button.discord-link svg { width: 15px; } .leaderboard-toolbar .player-search { max-width: none; } .header-actions { gap: 8px; } .brand,.brand-logo { max-width: 115px; } }

/* Clean header actions and on-site store */
.icon-button.discord-link,.icon-button.store-link { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; vertical-align: middle; }
.icon-button.discord-link { box-shadow: 0 3px 0 #3b46b9, 0 6px 14px #5865f21a; }
.icon-button.discord-link svg { display: block; width: 17px; height: 17px; }
.icon-button.discord-link span { display: block; }
.store-main { padding-block: 44px 64px; }
.store-intro { color: #e1e7f0; font-size: 20px; margin: 18px 0 10px; }
.store-note { color: var(--muted); font-size: 13px; max-width: 760px; line-height: 1.7; }
.store-categories { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 36px; }
.store-categories a { color: #edf1f9; padding: 10px 16px; background: #141c27; border: 1px solid var(--line); border-radius: 9px; text-decoration: none; font-weight: 750; font-size: 13px; }
.store-categories a:hover { border-color: var(--gold); color: var(--gold); }
.store-category { margin: 0 0 42px; scroll-margin-top: 100px; }
.store-category h2 { font-size: 24px; margin-bottom: 18px; }
.store-category h2 span { color: var(--gold); margin-right: 8px; }
.store-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.store-grid.rank-products { grid-template-columns: repeat(2,minmax(0,1fr)); }
.store-product { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg,#151e2a,#0c1119); padding: 26px; text-align: center; }
.rank-products .store-product:first-child { border-top: 3px solid #ffbd29; }.rank-products .store-product:last-child { border-top: 3px solid #7edbff; }
.product-icon { color: var(--gold); font-size: 32px; margin-bottom: 14px; }
.store-product h3 { margin: 0 0 10px; font-size: 23px; }
.product-period { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.product-price { color: var(--gold); font: 800 27px system-ui,sans-serif; margin: 14px 0 20px; }
.product-buy { display: flex; justify-content: center; gap: 10px; padding: 13px; color: #062c1c; background: #49dca0; border-radius: 8px; text-decoration: none; font: 800 13px system-ui,sans-serif; }
.product-buy:hover { background: #76edbb; }
.product-perks { list-style: none; padding: 0; margin: 24px 0 0; }
.product-perks li { border-top: 1px solid var(--line); padding: 13px 4px; font-size: 13px; color: #cbd5e3; line-height: 1.5; }
.store-main a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media(max-width:720px) { .store-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .store-grid,.store-grid.rank-products { grid-template-columns: 1fr; } .store-main { padding-top: 28px; } }

/* Original MCRoyale product artwork */
.product-artwork { display: block; width: min(100%,192px); height: auto; aspect-ratio: 1; object-fit: contain; margin: 0 auto 20px; border-radius: 14px; }
.rank-products .store-product:first-child { border-top-color: #1674ff; }
.rank-products .store-product:last-child { border-top-color: #ff3636; }
@media(max-width:480px) { .product-artwork { width: min(100%,160px); } }

/* Separate match archive and rank comparison */
.games-page .games-section{padding-top:16px;min-height:50vh}
.games-list{display:flex;flex-direction:column;gap:12px}
.games-list .game-card{width:100%;min-width:0;min-height:0;display:grid;grid-template-columns:1fr 200px;align-items:center;gap:28px;padding:22px 26px;cursor:pointer}
.games-list .game-card-top{display:grid;grid-template-columns:1fr 200px;align-items:center;gap:20px}
.games-list .game-divider{display:none}
.games-list .game-details{display:flex;flex-direction:column;align-items:flex-end;gap:12px;margin:0}
.games-list .game-date-block{text-align:left}
.games-list .game-eyebrow{display:none}
.games-list .game-card:hover{border-color:#ffbd29;transform:translateY(-2px)}
.games-list .game-card:focus-visible{outline:2px solid #ffbd29;outline-offset:3px}
.games-pagination{text-align:center;padding:28px 0 12px;color:#9eabbc}
.games-pagination .product-buy{width:auto;min-width:220px;margin:18px auto;cursor:pointer;border:0;padding:15px 28px}
.games-pagination [hidden]{display:none}
.rank-products .store-product{position:relative;overflow:hidden;border-top:4px solid #288cff}
.rank-products .rank-vip-plus{border-top-color:#ff4545}
.rank-products .rank-artwork{background:transparent;border-radius:0;width:112px;height:112px;object-fit:contain}
.rank-perks{margin:28px 0 0;display:grid;gap:0}
.rank-perks>div{min-height:112px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.rank-perks dt{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;font-weight:800;color:#8d9bab}
.rank-perks dd{margin:0;color:#fff;font-size:18px;font-weight:800}
.prefix-badge{width:36px;height:36px;object-fit:contain;display:block}
.perk-indicator{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;font:800 20px/1 system-ui}
.perk-indicator.included{color:#6ce5b5;background:#194d40}
.perk-indicator.excluded{color:#8b96a6;background:#1b2430}
@media(max-width:700px){.games-list .game-card{grid-template-columns:1fr;gap:15px;padding:18px}.games-list .game-card-top{grid-template-columns:1fr auto;gap:12px}.games-list .game-details{flex-direction:row;justify-content:space-between;align-items:center}.games-list .game-date-block{text-align:right}.games-list .game-mode{font-size:22px}}

/* Match archive and results refinements */
.games-list .game-card-top{grid-template-columns:minmax(100px,1fr) minmax(180px,2fr) 150px}
.game-winners{padding:0 22px;border-left:1px solid #ffffff16;display:flex;flex-direction:column;gap:9px}
.winner-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#b8a16e;margin:0}
.game-winners strong{font-size:13px;line-height:1.8;color:#f4d885;overflow-wrap:anywhere}
.player-dialog:has(.match-preview){width:min(850px,calc(100% - 24px));max-height:90dvh;border-radius:18px}
.match-preview{padding:28px!important}
.match-preview h2{font-size:23px;letter-spacing:-.5px;padding-right:30px;margin:0 0 10px}
.match-summary{font-size:13px;color:#93a3b8;margin:0 0 24px}
.match-winners{border:1px solid #ffbf2930;background:linear-gradient(110deg,#ffbf2910,transparent);border-radius:12px;padding:18px;margin:0 0 22px}
.champions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.champion{display:flex;align-items:center;gap:9px;padding:8px 12px;background:#ffbf290d;border:1px solid #ffbf2925;border-radius:8px;color:#ffe3a1;cursor:pointer;font-weight:700}
.match-table{min-width:440px;font-size:13px}
.match-table th{background:#0c121b;padding:12px;letter-spacing:.8px}
.match-table td{padding:10px 12px;height:auto}
.match-table th:nth-child(n+3),.match-table td:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums}
.match-table .match-player-link{display:flex;align-items:center;gap:10px;color:#e2e9f2;font-size:13px;font-weight:600;padding:0}
.match-table .tiny-avatar,.champion .tiny-avatar{width:28px;height:28px;min-width:28px;border-radius:6px}
.match-table .match-winner-row{background:#ffbf2906}
.match-table .match-winner-row td:first-child{color:#ffce62;font-weight:800}
.match-table .elo-positive{color:#48dba3;font-weight:700}
.match-table .elo-negative{color:#ff8585;font-weight:700}
.match-table tbody tr:hover{background:#ffffff05}
.games-list{overflow-anchor:none}
@media(max-width:900px){.games-list .game-card{grid-template-columns:1fr}.games-list .game-details{flex-direction:row;justify-content:space-between}.games-list .game-card-top{grid-template-columns:1fr 1.5fr 130px}}
@media(max-width:600px){.games-list .game-card-top{grid-template-columns:1fr auto}.game-winners{grid-column:1/-1;grid-row:2;padding:12px 0 0;border-left:0;border-top:1px solid #ffffff16}.match-preview{padding:20px 14px!important}.match-preview h2{font-size:20px}.match-winners{padding:14px}}

/* Rankings are essential content and must never depend on scroll visibility. */
.reveal { opacity: 1; transform: none; }
.podium { align-items: end; max-width: 980px; margin: 25px auto 20px; gap: 18px; }
.podium-card { flex-direction: column; justify-content: center; text-align: center; padding: 28px 18px 70px; min-height: 290px; border-color: #aeb9c8; }
.podium-card.is-first { min-height: 340px; }
.podium-card.is-third { min-height: 275px; }
.podium-card .avatar { width: 100px; height: 100px; flex-basis: 100px; border-radius: 16px; }
.podium-copy { width:100%; display:block; }
.podium-score,.podium-stats { justify-content:center; }
.podium-card .rank-medal { position:absolute; inset:auto 0 0; height:50px; display:grid; place-items:center; border-radius:0; background:#aeb9c8; color:#10151c; font-size:1.6rem; font-weight:900; }
.podium-card.is-first .rank-medal { background:var(--gold); }
.podium-card.is-third .rank-medal { background:#bd7749; }
.ranking-pills { display:flex; justify-content:center; gap:5px; margin:18px auto 25px; }
.ranking-pills button { min-width:65px; }
.games-list .game-card.match-row { display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:center; padding:24px; }
.match-badges { display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-size:.72rem; font-weight:800; text-transform:uppercase; }
.latest-badge { color:#111; background:var(--gold); padding:4px 7px; border-radius:5px; }
.match-summary h3 { margin:9px 0 4px; font-size:1.2rem; }
.match-summary .game-meta { margin:5px 0 0; }
.match-numbers { display:flex; gap:7px; }
.match-number { min-width:80px; padding:12px; background:rgba(0,0,0,.25); border-radius:10px; text-align:center; }
.match-number strong,.match-number span { display:block; }
.match-number span { margin-top:5px; font-size:.65rem; text-transform:uppercase; color:var(--muted); letter-spacing:.06em; }
.winner-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.winner-chip { display:flex; align-items:center; gap:7px; padding:5px 9px; background:rgba(0,0,0,.25); border-radius:8px; font-size:.8rem; }
.winner-chip .tiny-avatar { width:25px; height:25px; flex-basis:25px; }
@media(max-width:900px) { .games-list .game-card.match-row { grid-template-columns:1fr 1fr; }.match-winners { grid-column:1/-1; }.podium-card { min-height:260px; padding-inline:10px; }.podium-card.is-first { min-height:300px; } }
@media(max-width:600px) { .podium { grid-template-columns:1fr; }.podium-card,.podium-card.is-first,.podium-card.is-third { min-height:240px; }.games-list .game-card.match-row { grid-template-columns:1fr; gap:18px; }.match-winners { grid-column:auto; }.match-numbers { justify-content:stretch; }.match-number { flex:1; min-width:0; } }

.mode-tabs { display:inline-flex; gap:5px; padding:5px; margin-top:20px; border:1px solid var(--line); border-radius:12px; background:#101720; }
.mode-tabs button { border:0; padding:10px 24px; background:transparent; color:var(--muted); border-radius:8px; cursor:pointer; font:inherit; font-weight:800; }
.mode-tabs button.is-active { background:var(--gold); color:#111; }
.mode-tabs button:focus-visible { outline:2px solid white; outline-offset:3px; }
[hidden] { display:none !important; }

/* Detailed, recorded match results */
.player-dialog:has(.match-preview){width:min(1120px,calc(100% - 24px))}
.match-preview>h2{font-size:clamp(1.8rem,4vw,3rem);color:var(--gold-soft);margin-bottom:10px}
.match-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:24px 0}
.match-stat{padding:17px;border:1px solid var(--line-strong);border-radius:14px;background:rgba(255,255,255,.025);min-width:0}
.match-stat span,.standing-number span{display:block;color:var(--muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.06em}
.match-stat strong{display:block;font-size:1.2rem;margin-top:8px;overflow-wrap:anywhere}
.standings-heading{margin:26px 0 6px}.standing-team{display:flex;gap:16px;padding:14px;margin-top:10px;border:1px solid var(--line-strong);border-left:4px solid #46515f;border-radius:16px}
.standing-team.place-1{border-left-color:#ffbc17;background:linear-gradient(100deg,rgba(255,188,23,.1),transparent 55%)}.standing-team.place-2{border-left-color:#c5ccd6}.standing-team.place-3{border-left-color:#bb733d}
.standing-place{font-size:1.1rem;min-width:44px;padding-top:12px;color:var(--gold-soft)}.standing-members{flex:1;min-width:0}.standing-player{display:flex;align-items:center;gap:10px;min-height:58px;flex-wrap:wrap}.standing-player .match-player-link{padding:0;text-align:left}.standing-numbers{display:flex;gap:6px;margin-left:auto}.standing-number{min-width:60px;text-align:center;padding:8px;border-radius:9px;background:rgba(255,255,255,.04)}.standing-number strong{font-size:.85rem}.fragger-badge{font-size:.55rem;text-transform:uppercase;font-weight:800;background:#d49913;color:#0d1117;padding:4px 6px;border-radius:5px}
@media(max-width:650px){.match-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.standing-team{gap:8px;padding:10px}.standing-place{min-width:30px}.standing-numbers{width:100%;margin:0 0 10px}.standing-number{min-width:0;flex:1}.standing-player{gap:8px}}

.standing-player .match-player-link{display:flex;align-items:center;gap:10px;font:inherit;color:var(--text);border:0;background:none;cursor:pointer}.standing-number .elo-positive{color:#73df9e}.standing-number .elo-negative{color:#f29c89}

.match-detail-badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}.match-detail-badges span{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:5px 9px;background:rgba(255,188,23,.1);border:1px solid rgba(255,188,23,.2);border-radius:6px;color:var(--gold-soft)}

@media(max-width:600px){.mode-tabs{max-width:100%;flex-wrap:wrap}.mode-tabs button{padding:10px 12px}}