@font-face {
  font-family: "Thaleah Fat";
  src: url('/assets/thaleah-fat.ttf') format('truetype');
  font-display: swap;
}

[hidden] { display: none !important; }

:root {
  --rankings-bg: #05070f;
  --rankings-panel: #0d1628;
  --rankings-raised: #152038;
  --rankings-border: #2a3a5f;
  --rankings-fg: #e6ecff;
  --rankings-dim: #c5d0ea;
  --rankings-muted: #93a3cc;
  --rankings-accent: #4af0ff;
  --rankings-hot: #ffb347;
}

.rankings-page { min-height: 100vh; padding: 0 clamp(1rem, 4vw, 3rem) 3rem; background: radial-gradient(circle at 82% 8%, #152b4a 0, transparent 34rem), var(--rankings-bg); }
.rankings-header, .rankings-shell, .rankings-page .codex-footer { width: min(76rem, 100%); margin-inline: auto; }
.rankings-header-tools { display: flex; align-items: center; gap: .8rem; }
.header-nav { display: flex; align-items: center; gap: .45rem; }
.rankings-intro { max-width: 52rem; padding: clamp(2.5rem, 7vw, 5rem) 0 2rem; }
.rankings-intro h1 { display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--rankings-fg); font: 400 clamp(4.5rem, 12vw, 8rem)/.7 "Thaleah Fat", ui-monospace, monospace; letter-spacing: .01em; text-transform: uppercase; }
.rankings-title-icon { width: clamp(2.8rem, 8vw, 5rem); height: clamp(2.8rem, 8vw, 5rem); object-fit: contain; image-rendering: pixelated; }
.rankings-intro p:last-child { max-width: 38rem; color: var(--rankings-dim); }
.rankings-controls { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--rankings-border); background: var(--rankings-panel); }
.rankings-controls label { display: grid; gap: .35rem; color: var(--rankings-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rankings-controls select { min-width: min(24rem, 70vw); min-height: 2.8rem; padding: .55rem .7rem; border: 1px solid var(--rankings-border); border-radius: 2px; background: #080e1b; color: var(--rankings-fg); font: inherit; }
.rankings-updated { margin: 0; color: var(--rankings-muted); font: 700 .68rem/1.4 ui-monospace, monospace; text-align: right; text-transform: uppercase; }
.rankings-status { margin: 1rem 0 .65rem; color: var(--rankings-muted); font: 700 .75rem/1.4 ui-monospace, monospace; text-transform: uppercase; }
.rankings-status:focus-visible { outline: 2px solid var(--rankings-accent); outline-offset: 3px; }
.rankings-retry { min-height: 2.75rem; margin: 0 0 1rem; padding: .55rem 1rem; border: 1px solid var(--rankings-hot); background: #1b1720; color: var(--rankings-hot); font: 800 .72rem/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.rankings-retry:hover, .rankings-retry:focus-visible { background: var(--rankings-hot); color: #160d04; }
.rankings-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1rem 0 2rem; padding: 1rem; border: 1px solid #5b6f9c; background-color: #0a1222; background-image: url('https://starforge-auth-worker.jcline1983.workers.dev/assets/ui/arena/podium_backdrop_v1.png'), url('https://starforge-auth-worker.jcline1983.workers.dev/assets/ui/arena/podium_glow_v1.png'); background-position: center, center; background-size: cover, 70% auto; background-repeat: no-repeat; box-shadow: inset 0 0 3rem #08101dcc; }
.rankings-podium-card { position: relative; display: grid; gap: .45rem; min-height: 12rem; padding: 1rem; border: 1px solid var(--rankings-border); background-color: #0b1221; background-image: linear-gradient(155deg, #172641d9, #0b1221f2); box-shadow: 0 .75rem 2rem #00000038; }
.rankings-podium-card.podium-1 { order: 2; }
.rankings-podium-card.podium-2 { order: 1; }
.rankings-podium-card.podium-3 { order: 3; }
.rankings-podium-card:first-child { border-color: var(--rankings-hot); box-shadow: 0 0 0 1px #ffb34733, 0 .9rem 2.5rem #00000066; }
.rankings-podium-rank { color: var(--rankings-hot); font: 900 1.6rem/1 ui-monospace, monospace; }
.rankings-podium-card:nth-child(2) .rankings-podium-rank { color: #d8e6f7; }
.rankings-podium-card:nth-child(3) .rankings-podium-rank { color: #c58c65; }
.rankings-badge { width: 2.4rem; height: 2.4rem; object-fit: contain; image-rendering: pixelated; }
.rankings-plinth { position: absolute; right: .55rem; bottom: .35rem; left: .55rem; z-index: 0; width: calc(100% - 1.1rem); height: 2.9rem; object-fit: fill; opacity: .6; pointer-events: none; }
.rankings-podium-card > :not(.rankings-plinth) { position: relative; z-index: 1; }
.rankings-podium-card .rankings-badge { position: absolute; top: .8rem; right: .8rem; z-index: 2; width: 3.2rem; height: 3.2rem; }
.rankings-podium-card h3 { max-width: 12ch; margin: .35rem 0 0; overflow: hidden; color: var(--rankings-fg); font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.rankings-podium-league, .rankings-podium-record { color: var(--rankings-muted); font: 700 .68rem/1.35 ui-monospace, monospace; text-transform: uppercase; }
.rankings-podium-trophies { color: var(--rankings-accent); font: 900 1.15rem/1 ui-monospace, monospace; }
.rankings-table-region h2 { margin: 2.5rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rankings-border); color: var(--rankings-fg); }
.rankings-columns, .ranking-row { display: grid; grid-template-columns: 4.2rem minmax(12rem, 2fr) minmax(9rem, 1.15fr) minmax(6rem, .75fr) minmax(5rem, .65fr); gap: 1rem; align-items: center; }
.rankings-columns { padding: .35rem .8rem; color: var(--rankings-muted); font: 800 .66rem/1.2 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.rankings-list { display: grid; gap: .5rem; }
.ranking-row { min-height: 4.4rem; padding: .65rem .8rem; border: 1px solid var(--rankings-border); background: #0a1120; }
.ranking-row:hover { background: var(--rankings-raised); }
.ranking-row.is-podium { border-left: 3px solid var(--rankings-hot); }
.ranking-rank { color: var(--rankings-hot); font: 900 1.15rem/1 ui-monospace, monospace; }
.ranking-ship, .ranking-league { min-width: 0; display: flex; align-items: center; gap: .65rem; }
.ranking-ship-name, .ranking-league-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-ship-name { color: var(--rankings-fg); font-weight: 850; }
.ranking-league-name, .ranking-record { color: var(--rankings-muted); font: 700 .68rem/1.35 ui-monospace, monospace; text-transform: uppercase; }
.ranking-trophies { color: var(--rankings-accent); font: 900 1rem/1 ui-monospace, monospace; }
.ranking-record { color: var(--rankings-dim); white-space: nowrap; }
.codex-footer { margin-top: 4rem; }
.codex-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 820px) {
  .rankings-columns { display: none; }
  .ranking-row { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .7rem; }
  .ranking-row > .ranking-league { grid-column: 2; }
  .ranking-row > .ranking-trophies { grid-column: 3; grid-row: 1 / span 2; }
  .ranking-row > .ranking-record { grid-column: 2; }
}
@media (max-width: 620px) {
  .rankings-header-tools { gap: .35rem; }
  .header-nav .header-link { padding-inline: .65rem; }
  .rankings-podium { grid-template-columns: 1fr; }
  .rankings-podium-card.podium-1, .rankings-podium-card.podium-2, .rankings-podium-card.podium-3 { order: initial; }
  .rankings-podium-card { min-height: 8rem; }
  .rankings-controls { align-items: stretch; flex-direction: column; }
  .rankings-controls select { min-width: 0; width: 100%; }
  .rankings-updated { text-align: left; }
  .rankings-page .codex-footer { align-items: flex-start; flex-direction: column; }
}