/* rankings.css — V1 appearance. See DESIGN-HANDOVER.md. */


/* Navigation and game views */

.cabinet-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.cabinet-heading h1 {
  margin-top:0;
}

.cabinet-action {
  flex-shrink:0;
}

.facts {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:16px;
}

.facts dt {
  color:var(--subtle);
  font-size:14px;
}

.facts dd {
  margin:3px 0 0;
}

.rank-tabs {
  display:flex;
  gap:12px;
  margin:20px 0;
}

.rank-tabs a {
  border:1px solid #66728f;
  padding:10px 18px;
  border-radius:var(--radius-chip);
  text-decoration:none;
}

.rank-tabs a[aria-current=true] {
  background:var(--accent);
  color:#132208;
}

.ranking-panel {
  transition:opacity .3s ease;
  min-height:0;
}

.ranking-panel.fading {
  opacity:.35;
}

@media(max-width:600px) {
.cabinet-heading {
  gap:10px;
}


.cabinet-heading h1 {
  font-size:28px;
  overflow-wrap:anywhere;
}


.cabinet-action {
  font-size:14px;
  padding:10px 12px;
  max-width:130px;
  text-align:center;
}


.facts {
  grid-template-columns:repeat(2,minmax(0,1fr));
}


.rank-tabs a {
  flex:1;
  text-align:center;
  padding:10px;
}
}

@media(prefers-reduced-motion:reduce) {
.ranking-panel {
  transition:none;
}
}


/* Accepted compact layouts */

.ranking-identity {
  text-transform:none;
  letter-spacing:normal;
}

.champion-choices {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:16px 0;
}

.champion-choices a {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 16px;
  border:1px solid #66728f;
  border-radius:var(--radius-chip);
  text-decoration:none;
}

.ranking-search {
  margin:20px 0 10px;
  max-width:760px;
}

.ranking-search>div {
  display:flex;
  gap:10px;
}

.ranking-search input {
  min-width:0;
  flex:1;
}

.ranking-search label {
  display:block;
  margin-bottom:8px;
}

.ranking-game-list {
  display:grid;
  gap:8px;
}

.ranking-game-row {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 16px;
  text-decoration:none;
  min-height:64px;
}

.ranking-game-row strong {
  font-size:1.1rem;
}

.ranking-game-row span {
  font-size:1rem;
  color:var(--subtle);
  line-height:1.45;
}

.ranking-directory .pixel-highlight {
  padding:16px 20px;
  margin:20px 0;
}

.ranking-directory .pixel-highlight p {
  margin:8px 0;
}

.ranking-directory .pixel-highlight h2 {
  margin:8px 0;
}


@media(max-width:600px) {
.champion-choices {
  gap:8px;
}


.champion-choices a {
  flex:1;
  padding:10px 12px;
}


.ranking-directory .pixel-highlight {
  padding:14px;
}


}

.ranking-directory .ranking-section-heading {
  margin-bottom:4px;
}

.ranking-directory .ranking-section-intro {
  margin-top:0;
  margin-bottom:18px;
}

.ranking-directory .pixel-highlight .ranking-section-heading {
  margin-bottom:4px;
}

.ranking-directory .pixel-highlight .ranking-section-intro {
  margin-top:0;
  margin-bottom:18px;
}

/* Game title keeps the full mobile line; submission follows the identity. */
.cabinet-heading>div { min-width:0; }
.cabinet-heading .ranking-identity { margin:0 0 12px; color:var(--subtle); }
@media(max-width:600px) {
  .cabinet-heading { flex-direction:column; align-items:stretch; }
  .cabinet-heading .cabinet-action { max-width:none; width:100%; font-size:var(--text-size); }
}

.ranking-game-heading { margin-bottom:16px; }
.ranking-game-heading .cabinet-action { display:inline-flex; margin-top:12px; }
.ranking-game-heading .ranking-identity { margin:8px 0 0; color:var(--subtle); }
@media(max-width:600px) {
  .ranking-game-heading .cabinet-action { width:100%; max-width:none; }
}

/* Equal Champion prestige with small area accents and live leaders. */
.champion-choices { display:grid; grid-template-columns:1fr; }
.champion-choices .champion-choice { display:grid; grid-template-columns:24px max-content minmax(0,1fr); gap:10px; padding:12px; border:1px solid var(--border-color); border-left:3px solid var(--champion-accent); background:var(--panel); min-height:64px; color:var(--ink); }
.champion-choice .app-icon, .champion-heading .app-icon { color:#f2c65c; }
.champion-choice .champion-choice-title { font-size:1.1rem; font-weight:750; line-height:1.25; }
.champion-choice .champion-choice-leader { font-size:1rem; line-height:1.35; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; color:var(--ink); }
.champion-choice-70s { --champion-accent:#edb96a; }
.champion-choice-80s { --champion-accent:#dc8ede; }
.champion-choice-modern { --champion-accent:#72d8cc; }
.ranking-game-row .museum-index-caption h3 { margin:0; }
.ranking-game-row.museum-index-card { padding:0; gap:0; align-self:start; color:var(--ink); }
.ranking-game-results { padding:2px 12px 12px; }
.ranking-game-result { display:grid; grid-template-columns:4.5rem minmax(0,1fr); gap:8px; margin:3px 0; }
.ranking-game-result>span:last-child { color:var(--ink); overflow-wrap:anywhere; }
.ranking-game-empty { margin:0; color:var(--ink); }
@media(min-width:700px) { .ranking-game-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.champion-heading { display:flex; align-items:center; gap:10px; font-size:clamp(1.375rem,5.6vw,1.75rem); line-height:1.3; text-transform:none; letter-spacing:normal; }
.champion-month { font-size:1.15rem; margin:12px 0 20px; }
.champion-personal { margin:24px 0; }
.champion-personal h2 { font-size:1.25rem; margin-bottom:8px; }

/* Public 16:9 museum monitors: isolated from normal application layouts. */
body.museum-monitor { margin:0; width:100vw; height:100vh; height:100dvh; overflow:hidden; background:#000; color:#f4f5ff; font-family:var(--font-body); }
.museum-monitor *, .museum-monitor *::before, .museum-monitor *::after { box-sizing:border-box; }
.museum-monitor [hidden] { display:none !important; }
.monitor-fallback { position:fixed; inset:0; display:grid; place-items:center; background:#000; }
.monitor-fallback img { width:min(82vw,88vh); height:min(82vw,88vh); object-fit:contain; }
.monitor-content { width:100%; height:100%; }
.monitor-entrance { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3vh 4vw; gap:2vh; text-align:center; }
.monitor-entrance h1 { font-size:4.3vh; line-height:1.1; margin:0; }
.monitor-paths { display:grid; grid-template-columns:1fr 1fr; gap:6vw; }
.monitor-paths>div { display:grid; grid-template-columns:3vh auto; align-items:center; gap:.5vh 1vw; }
.monitor-paths h2 { margin:0; font-size:3.1vh; text-align:left; }
.monitor-paths .app-icon { width:3vh; height:3vh; }
.monitor-paths p { grid-column:1/-1; margin:0; font-size:2.4vh; text-align:left; }
.monitor-qr { height:57vh; width:57vh; max-width:70vw; object-fit:contain; background:#fff; image-rendering:pixelated; }
.monitor-scoreboard { height:100%; padding:3vh 7vw; display:flex; flex-direction:column; font-family:ui-monospace,Consolas,monospace; }
.monitor-scoreboard-heading { text-align:center; font-size:7vh; font-weight:900; color:#f9d767; letter-spacing:.1em; margin:0 0 1vh; line-height:1; }
.monitor-scoreboard h1 { font-size:4.4vh; line-height:1.15; margin:0; text-align:center; text-transform:uppercase; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.monitor-subtitle { text-align:center; font-size:2.8vh; margin:1vh 0 2vh; text-transform:uppercase; color:var(--turquoise); }
.monitor-scoreboard table { width:100%; table-layout:fixed; border-collapse:collapse; flex:1; font-size:3.5vh; font-variant-numeric:tabular-nums; }
.monitor-scoreboard th { color:var(--turquoise); font-size:2.8vh; height:5vh; text-align:left; }
.monitor-scoreboard th:first-child { width:12%; }
.monitor-scoreboard th:last-child { width:40%; }
.monitor-scoreboard td { border-top:1px solid #333b4b; padding:.4vh 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.monitor-scoreboard td:nth-child(2) { padding-right:2vw; }
.monitor-scoreboard td:first-child { color:#f9d767; }
.monitor-scoreboard td:last-child,.monitor-scoreboard th:last-child { text-align:right; }
.monitor-scoreboard[data-top="3"] table { font-size:6vh; }
.monitor-scoreboard[data-top="5"] table { font-size:4.8vh; }
.monitor-empty { flex:1; display:flex; flex-direction:column; justify-content:flex-start; padding-top:8vh; align-items:center; text-align:center; }
.monitor-empty h2 { font-size:5.5vh; margin:0 0 3vh; }
.monitor-empty p { font-size:4vh; max-width:70vw; margin:0; }
.monitor-page { font-size:1.8vh; color:var(--subtle); text-align:right; margin:1vh 0 0; min-height:2vh; }
.monitor-fullscreen { position:fixed; z-index:10; bottom:12px; right:12px; width:44px; height:44px; padding:0; border:1px solid #77819a; background:#101522; color:#fff; font-size:28px; border-radius:var(--radius-chip); opacity:0; transition:opacity .2s; }
.museum-monitor.monitor-controls .monitor-fullscreen,.monitor-fullscreen:focus-visible { opacity:.9; }
.monitor-admin-slides .card { margin:16px 0; }

.monitor-scoreboard .monitor-long-score td:last-child { font-size:3.2vh; }

.monitor-admin-actions { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.ci-staff main .monitor-device-actions button:disabled { background:#ffffff0d; color:var(--subtle); border-color:#ffffff26; opacity:1; cursor:not-allowed; }
.monitor-slide-status { display:inline-block; margin-left:8px; padding:3px 9px; border:1px solid var(--border-color); border-radius:var(--radius-chip); }
.monitor-slide-status.is-active { color:var(--turquoise); }
.monitor-slide-actions, .monitor-slide-order { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:14px; }
.monitor-slide-order form { margin:0; }
.monitor-slide-order button { min-height:44px; }
.monitor-slide-order button:disabled { opacity:.4; cursor:default; }
.monitor-slide-form [hidden] { display:none !important; }

/* Ranking identity preserves era accents and score semantics. */
.ci-visitor .champion-choices .champion-choice { grid-template-columns:36px minmax(0,1fr) 16px; gap:4px 12px; background:linear-gradient(110deg,color-mix(in srgb,var(--champion-accent) 15%,#17202f),#17202f); border-radius:var(--ci-radius); border-top-color:var(--ci-line); border-right-color:var(--ci-line); border-bottom-color:var(--ci-line); padding:14px 16px; }
.ci-visitor .champion-choice>.app-icon { grid-row:1 / 3; width:28px; height:28px; color:var(--champion-accent); }
.ci-visitor .champion-choice .champion-choice-title { grid-column:2; font-size:1.2rem; line-height:1.3; }
.champion-choice-title small { display:block; font-size:.9375rem; font-weight:700; color:inherit; }
.ci-visitor .champion-choice .champion-choice-leader { grid-column:2; text-align:left; font-size:.875rem; color:var(--subtle); white-space:normal; overflow-wrap:anywhere; }
.champion-choice::after { content:'›'; grid-column:3; grid-row:1 / 3; align-self:center; color:var(--champion-accent); font-size:1.5rem; }
.ci-visitor .ranking-directory>.function-title { color:var(--ci-competition); }
.ci-visitor .ranking-directory .ranking-section-heading { font-size:1.4rem; line-height:1.3; margin:24px 0 6px; }
.ci-visitor .ranking-directory .ranking-section-intro { margin:0 0 16px; color:var(--subtle); }
.ci-visitor .champion-empty { padding:12px 16px; border:1px solid var(--ci-line); border-radius:var(--ci-radius); background:var(--ci-surface); }
.ci-visitor .champion-empty p:first-child { margin-top:0; }
.ci-visitor .champion-empty p:last-child { margin-bottom:0; color:var(--subtle); }
.ci-visitor .retro-ranking { background:#14212d; border-color:var(--ci-line); }
.ci-visitor .retro-ranking :is(th,td) { border-color:var(--ci-line); }
.ci-visitor .ranking-game-results { padding:0 14px 16px; }

.ranking-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:14px 0; }
.ranking-toolbar .ux-filters { margin:0; gap:6px; }
.ranking-display-controls { display:flex; align-items:center; gap:6px; margin-left:auto; }
.ranking-sort { position:relative; }
.ranking-sort summary, .ranking-compact { display:block; padding:9px 8px; font-size:.8125rem; line-height:1.3; color:var(--subtle); border:1px solid #ffffff26; border-radius:var(--radius-control); cursor:pointer; text-decoration:none; }
.ranking-sort summary { list-style:none; }
.ranking-sort summary::-webkit-details-marker { display:none; }
.ranking-sort>div { position:absolute; right:0; top:calc(100% + 6px); z-index:10; min-width:180px; padding:6px; border:1px solid var(--border-color); border-radius:var(--radius-control); background:var(--bg); box-shadow:0 6px 20px #0008; }
.ranking-sort a { display:block; padding:10px; color:var(--ink); text-decoration:none; }
.ranking-display-controls [aria-current=true] { color:var(--accent); border-color:var(--accent); font-weight:700; }
.ranking-game-list.is-compact .museum-marquee-frame { display:none; }