/* Colours, fonts and proportions come from ExtractionSummaryScreen.cs (full leaderboard, 1920x1080
   reference): GoldColor #E5BD68, CreamColor #F3E8C8, MutedColor #AFA68F, tab label #C9BFA4 /
   selected #F2CB68, panel #0D1822EE + #B98228 border, rows #0E1A26AA + #24374C66 border.
   The game has a single dark presentation, so the page is dark in both colour schemes. */
@font-face { font-family: "Cinzel"; src: url("assets/fonts/Cinzel-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("assets/fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("assets/fonts/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --gold: #E5BD68;
  --gold-bright: #F2CB68;
  --gold-rail: #B98228;
  --gold-rail-soft: #B98228AA;
  --diamond: #D59E3F;
  --cream: #F3E8C8;
  --muted: #AFA68F;
  --tab-label: #C9BFA4;
  --tab-disabled: #8F8B78;
  --panel: #0D1822EE;
  --panel-inner: #0B141D99;
  --tab: #0B141DCC;
  --tab-selected: #4A3513AA;
  --tab-border: #B9822866;
  --tab-border-selected: #E0AD4D;
  --row: #0E1A26AA;
  --row-border: #24374C66;
  --page: #070D14;
  --header-font: "Cinzel", "Trajan Pro", Georgia, serif;
  --body-font: "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--page) url("assets/background.jpg") center / cover fixed no-repeat;
  color: var(--cream);
  font-family: var(--body-font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
/* Readability overlay over the environment art, as on the in-game full board. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, #070D14B3 0%, #070D14E6 70%, #070D14F5 100%);
}
button { font: inherit; color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.screen { width: min(1640px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 28px 0 24px; }

/* Header: gold rules either side of the Cinzel title, cream subtitle. */
.masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 28px; text-align: center; }
.masthead__title { margin: 0; font-family: var(--header-font); font-weight: 700; color: var(--gold);
  font-size: clamp(28px, 4.2vw, 46px); letter-spacing: 0.04em; line-height: 1.15; }
.masthead__rule { height: 1px; background: #C8954599; width: min(171px, 100%); }
.masthead__rule--left { justify-self: end; }
.masthead__rule--right { justify-self: start; }
.masthead__subtitle { grid-column: 1 / -1; margin: 6px 0 0; font-size: clamp(16px, 1.6vw, 20px); color: var(--cream); }

/* Chamfered panel: border colour behind, fill inset by the border width. */
.chamfer { --c: 24px; --bw: 2px; position: relative; isolation: isolate; background: var(--gold-rail);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.chamfer::before { content: ""; position: absolute; inset: var(--bw); z-index: -1; background: var(--panel);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.chamfer::after { content: ""; position: absolute; inset: 20px; z-index: -1; border: 1px solid var(--gold-rail-soft);
  background: var(--panel-inner); }
.chamfer-sm { --c: 10px; clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }

.board { margin-top: 26px; padding: 60px clamp(20px, 9.4%, 155px) 40px; }

.sample-banner { margin: -36px 0 16px; text-align: center; color: var(--muted); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; }

.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tab { height: 44px; border: 1px solid var(--tab-border); background: var(--tab); color: var(--tab-label);
  font-weight: 700; font-size: 13px; letter-spacing: 0.06em; cursor: pointer; }
.tab:hover:not(:disabled) { filter: brightness(1.12); }
.tab.is-selected { background: var(--tab-selected); border-color: var(--tab-border-selected); color: var(--gold-bright); }
.tab:disabled { background: #080C12B3; border-color: #6F685B66; color: var(--tab-disabled); cursor: default; }
.tab:focus-visible, .sort:focus-visible, .action:focus-visible, .table-viewport:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* 18 rows of 28px fill the viewport as in game; the page scrolls inside it. */
.table-viewport { margin-top: 20px; height: calc(22px + 18 * 28px + 28px); overflow-y: auto; overflow-x: hidden;
  scrollbar-color: var(--gold-rail) #0B141D; scrollbar-width: thin; }
.runs { width: 100%; border-collapse: separate; border-spacing: 0 2px; table-layout: fixed; font-size: 12px; }
.runs thead th { position: sticky; top: 0; z-index: 1; background: #0B141D; padding: 0 0 6px; }
.sort { background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--muted); font-weight: 700;
  font-size: 12px; letter-spacing: 0.06em; }
.sort.is-active { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.runs td { height: 26px; padding: 0 10px; background: var(--row); border-top: 1px solid var(--row-border);
  border-bottom: 1px solid var(--row-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runs td:first-child { border-left: 1px solid var(--row-border); }
.runs td:last-child { border-right: 1px solid var(--row-border); }

/* Column proportions of the 1290px in-game row: rank 60, player 556, race 276, score 100, time 100. */
.col-rank { width: 6%; text-align: center; font-weight: 700; }
.col-player { width: 46%; text-align: left; }
.col-race { width: 24%; text-align: left; }
.col-score { width: 12%; text-align: right; font-weight: 700; }
.col-time { width: 12%; text-align: right; font-weight: 700; }
th.col-rank { text-align: center; }

.col-race { display: table-cell; }
.portrait { display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin-right: 12px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #1A2A3A; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.race-label { vertical-align: middle; }

.empty { margin: 120px 0 0; text-align: center; color: var(--muted); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; }

.board__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.metadata { margin: 0; color: var(--muted); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; }
.action { min-width: 184px; height: 44px; padding: 0 24px; border: 0; background: #2A1F0E; color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px var(--gold-rail); font-weight: 700; letter-spacing: 0.08em; cursor: pointer; }
.action:hover:not(:disabled) { filter: brightness(1.12); }
.action:disabled { opacity: 0.6; cursor: default; }

.ornament { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 12px;
  width: min(1110px, 100%); margin: 26px auto 0; }
.ornament__rule { height: 1px; background: var(--gold-rail-soft); }
.ornament__diamond { width: 12px; height: 12px; background: var(--diamond); transform: rotate(45deg) scale(0.71); }
.ornament__copy { margin: 0; text-align: center; font-size: 12px; color: var(--tab-label); }

@media (max-width: 760px) {
  .screen { padding-top: 18px; }
  .masthead { column-gap: 12px; }
  .board { --c: 14px; padding: 28px 14px 20px; }
  .chamfer::after { inset: 8px; }
  .sample-banner { margin: -8px 0 12px; }
  .tabs { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tab { height: 40px; font-size: 12px; }
  .table-viewport { height: min(70vh, 560px); }
  .runs { font-size: 11px; }
  .runs td { padding: 0 4px; }
  .runs td.col-time { text-overflow: clip; }
  .sort { font-size: 10px; letter-spacing: 0.02em; }
  .col-rank { width: 11%; }
  .col-player { width: 36%; }
  .col-race { width: 11%; text-align: center; }
  .col-score { width: 17%; }
  .col-time { width: 25%; }
  .race-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .portrait { margin-right: 0; }
  .board__footer { flex-direction: column; align-items: stretch; text-align: center; }
  .ornament { grid-template-columns: 1fr; }
  .ornament__rule, .ornament__diamond { display: none; }
}