/* A standalone, scrolling page. Rankings have one table and no game overlay. */
.ranking-page { overflow:auto; background:#091321; background-image:radial-gradient(ellipse at 50% 0,#1e35464d,transparent 70%); color:#e8eff1; }
.ranking-layout { max-width:1040px; margin:auto; padding:0 40px; padding-top:env(safe-area-inset-top); }
.ranking-nav { height:86px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #314353; }
.ranking-home { display:inline-flex; align-items:center; gap:9px; min-height:44px; color:#ced9df; font-size:13px; }
.ranking-home svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; }
.ranking-home:hover { color:#fff0bc; }
.ranking-brand { color:#8299a9; font:700 12px monospace; letter-spacing:2px; }
.ranking-header { position:relative; padding:42px 225px 31px 0; }
.ranking-title-row { display:flex; align-items:center; gap:17px; }
.ranking-title-row img { width:60px; height:60px; object-fit:contain; image-rendering:pixelated; }
.ranking-eyebrow { margin:0 0 8px; color:#d5b978; font:700 10px monospace; letter-spacing:2px; }
.ranking-header h1 { margin:0; font-size:31px; line-height:1.4; letter-spacing:-1px; color:#f3ecd9; }
.ranking-description { margin:19px 0 16px; color:#adbec9; font-size:14px; line-height:1.75; }
.ranking-context { display:flex; gap:13px; align-items:center; flex-wrap:wrap; font-size:12px; line-height:1.6; }
#ranking-date { color:#dce7ea; font-weight:700; font-variant-numeric:tabular-nums; }
.ranking-reset { padding-left:13px; border-left:1px solid #435561; color:#829caa; font-size:11px; }
.ranking-start { position:absolute; right:0; top:73px; display:flex; align-items:center; justify-content:center; gap:20px; min-height:48px; padding:12px 18px; color:#e3f8ed; font-size:13px; font-weight:700; border:1px solid #6da996; background:#1e443f; box-shadow:inset 0 0 0 2px #132a2c; }
.ranking-start:hover { background:#28574c; border-color:#b4e2bc; }
.ranking-start span { color:#add7c3; }
.ranking-board { border:1px solid #415869; border-top:2px solid #b1996d; background:#0e1d2c; }
.ranking-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 24px 0; }
.ranking-toolbar>div { display:flex; align-items:baseline; gap:13px; flex-wrap:wrap; }
.ranking-toolbar h2 { margin:0; color:#efd49e; font:700 18px/1.4 monospace; letter-spacing:1px; }
#ranking-count { color:#96b0bf; font-size:11px; }
.ranking-page button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:9px 12px; border:1px solid #415869; border-radius:2px; background:#142739; color:#c5d8e1; font-size:11px; }
.ranking-page button:hover:enabled { color:#fff3cd; border-color:#9ea58c; }
.ranking-page button:disabled { opacity:.55; }
.ranking-page :is(button,a):focus-visible { outline:2px solid #b9f1dc; outline-offset:4px; }
#ranking-refresh svg { width:15px; height:15px; stroke:currentColor; stroke-width:1.8; fill:none; }
.ranking-sort { color:#849eaf; margin:8px 24px 21px; font-size:11px; line-height:1.6; }
#ranking-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.rank-column { width:90px; }.time-column { width:180px; }.correct-column { width:115px; }
#ranking-table thead { background:#091623; color:#839cac; }
#ranking-table thead th { position:sticky; top:0; z-index:1; background:#091623; height:42px; font-size:11px; font-weight:400; text-align:left; }
#ranking-table tr>:first-child { text-align:center; }
#ranking-table tr>:last-child { padding-right:25px; }
#ranking-table .numeric { text-align:right; font-variant-numeric:tabular-nums; }
#ranking-table tbody tr { border-top:1px solid #273d4d; height:67px; }
#ranking-table tbody tr:nth-child(even) { background:#122232; }
#ranking-table td,#ranking-table tbody th { padding:12px 0; }
.ranking-position { color:#8ca6b8; font:700 17px/1.4 monospace; }
.ranking-runner { color:#d4e0e5; font-size:14px; line-height:1.7; font-weight:400; text-align:left; overflow-wrap:anywhere; padding-right:20px!important; }
.ranking-time { color:#eff6ee; font:700 21px/1.4 monospace; letter-spacing:.2px; }
.ranking-correct { font:12px/1.5 monospace; color:#94adbc; }
#ranking-table tr[data-rank="1"] { background:#b39a5b12; box-shadow:inset 3px 0 #cfac61; }
#ranking-table tr[data-rank="1"] .ranking-position { color:#f6d582; }
#ranking-table tr[data-rank="1"] .ranking-runner { color:#f4e3bc; font-weight:700; }
#ranking-table tr[data-rank="2"] .ranking-position { color:#d2e0e9; }
#ranking-table tr[data-rank="3"] .ranking-position { color:#d6ad87; }
.ranking-message { padding:48px 24px 61px; border-top:1px solid #273d4d; text-align:center; }
.ranking-message-mark { display:block; margin:0 auto 18px; color:#92a7b6; font:30px monospace; }
.ranking-message h3 { margin:0 0 13px; font-size:18px; color:#e5e4d6; line-height:1.6; }
.ranking-message p { margin:0; font-size:13px; line-height:1.9; color:#8fa9ba; }
.ranking-message button { margin:21px auto 0; min-width:150px; }
.ranking-loading { padding:0 24px 15px; }
.ranking-loading>div { height:67px; border-top:1px solid #25394a; display:flex; align-items:center; }
.ranking-loading>div::before { content:''; display:block; height:12px; width:100%; background:linear-gradient(to right,#243949 0 4%,transparent 4% 12%,#243949 12% 37%,transparent 37% 78%,#243949 78% 94%,transparent 94%); }
.ranking-footnotes { padding:19px 1px; color:#829bac; font-size:11px; line-height:1.9; }
.ranking-footnotes p { margin:0 0 6px; }
#ranking-updated { display:block; margin-top:14px; color:#647e90; font:11px monospace; }
.ranking-footer { display:flex; justify-content:space-between; gap:15px; padding:24px 0 max(30px,env(safe-area-inset-bottom)); margin-top:15px; border-top:1px solid #263a4a; color:#698293; font:10px/1.6 monospace; letter-spacing:1.5px; }
.ranking-footer span { font:10px/1.6 RunPixel,sans-serif; letter-spacing:0; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:700px) {
  .ranking-layout { padding-left:20px; padding-right:20px; }
  .ranking-nav { height:65px; }.ranking-brand { font-size:10px; }
  .ranking-header { padding:29px 0 25px; }.ranking-header h1 { font-size:26px; }
  .ranking-title-row { gap:12px; }.ranking-title-row img { width:49px; height:49px; }
  .ranking-description { font-size:12px; margin:15px 0; }
  .ranking-start { position:static; margin-top:23px; width:100%; min-height:48px; }
  .ranking-context { gap:9px; font-size:11px; }.ranking-reset { padding-left:9px; font-size:10px; }
  .ranking-toolbar { padding:16px 14px 0; }.ranking-toolbar>div { gap:6px; }.ranking-toolbar h2 { font-size:17px; }
  #ranking-count { font-size:10px; }.ranking-page button { padding:8px; font-size:10px; }
  .ranking-sort { margin:9px 14px 16px; font-size:10px; }
  .rank-column { width:48px; }.time-column { width:103px; }.correct-column { width:60px; }
  #ranking-table thead th { font-size:10px; }#ranking-table tbody tr { height:64px; }
  #ranking-table tr>:last-child { padding-right:13px; }
  .ranking-position { font-size:15px; }.ranking-runner { font-size:12px; padding-right:8px!important; }
  .ranking-time { font-size:17px; letter-spacing:0; }.ranking-correct { font-size:11px; }
  .ranking-footnotes { font-size:10px; line-height:1.9; }.ranking-footer { flex-direction:column; gap:8px; }
}
@media(max-width:360px) {
  .ranking-layout { padding-left:12px; padding-right:12px; }
  .ranking-header h1 { font-size:23px; }.ranking-title-row img { width:42px; height:42px; }
  .ranking-reset { font-size:9px; }.ranking-toolbar>div { flex-direction:column; gap:3px; }
  .rank-column { width:38px; }.time-column { width:86px; }.correct-column { width:48px; }
  .ranking-time { font-size:15px; }.ranking-correct { font-size:10px; }.ranking-runner { font-size:11px; }
  #ranking-table tr>:last-child { padding-right:9px; }
}