/* 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:8px;
  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:8px;
  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; border-left:3px solid var(--champion-accent); padding-left:12px; 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; bottom:12px; right:12px; width:44px; height:44px; padding:0; border:1px solid #77819a; background:#101522; color:#fff; font-size:28px; border-radius:6px; 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; }
.monitor-slide-status { display:inline-block; margin-left:8px; padding:3px 9px; border:1px solid var(--border-color); border-radius:6px; }
.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; }