/* Shared constraints: content sizes to its own panel, not just the viewport. */
:where(main,section,article,header,footer,form,nav) { min-width: 0; }
:where(.start-copy,.start-card,.start-panel,.leaderboard-card,.topbar > *, .play-layout > *, .quiz-layout > *) { min-width: 0; }
:where(button,input,select,textarea) { max-width: 100%; }
:where(.leader-player,.quiet-player,.podium-player,.remembered-copy,.hub-level-content,.hub-level-heading > div) { min-width: 0; }
:where(.leader-player strong,.quiet-player strong,.podium-player strong,.remembered-copy strong) { max-width: 100%; overflow-wrap: anywhere; }
:where(dialog:not(.storybook-dialog)) { box-sizing: border-box; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
:where(.leaderboard,.all-scores-list) { min-width: 0; padding-inline: 0; }
.leaderboard-card { container-type: inline-size; container-name: ranking; }
.leaderboard-card .leaderboard-heading { flex-wrap: wrap; align-items: center; gap: 12px; }
.leaderboard-heading > :is(h2,h3) { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.leaderboard-heading .leaderboard-all-button { flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: normal; }
.leaderboard.hall-of-fame { grid-template-columns: repeat(3,minmax(0,1fr)); }
.leaderboard.hall-of-fame > li { min-width: 0; max-width: 100%; }
.leaderboard.quiet-ranking .podium-score { grid-template-columns: minmax(0,1fr); }
.leaderboard.quiet-ranking .podium-score > :is(.quiet-player,.quiet-album,.quiet-points,.quiet-details) { min-width: 0; max-width: 100%; }
.quiet-points { flex-wrap: wrap; }
.compact-card-collection { width: min(100%,190px); min-width: 0; max-width: 100%; }
.compact-card-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; width: 100%; min-width: 0; }
.compact-card-strip .compact-collectible { width: 100%; min-width: 0; max-width: 100%; }
.quiet-album { min-width: 0; max-width: 100%; }
.leaderboard .quiet-player strong { white-space: normal; overflow-wrap: anywhere; }
.leaderboard.quiet-ranking > .quiet-score-row { grid-template-columns: 28px minmax(0,1fr) auto; column-gap: 10px; }
.leaderboard.quiet-ranking > .quiet-score-row > .quiet-album { grid-column: 2 / -1; grid-row: 3; justify-self: start; }
.leaderboard.quiet-ranking > .quiet-score-row > .quiet-points { grid-column: 3; grid-row: 1; }
.leaderboard.quiet-ranking > .quiet-score-row > .quiet-score-progress { grid-row: 4; }
.leaderboard-personal { display: flex; flex-wrap: wrap; align-items: center; }
.leaderboard-personal > * { min-width: 0; }
.leaderboard-personal > small { flex: 1 1 180px; }
.remembered-player { flex-wrap: wrap; }
.remembered-copy { flex: 1 1 120px; }
.remembered-player .remembered-change { flex: 0 1 auto; margin-left: auto; }
.hub-level-heading { flex-wrap: wrap; }
.hub-level-heading > div { flex: 1 1 140px; }
.hub-level-heading > b { flex: 0 0 auto; }
.game-filters { flex-wrap: wrap; }

/* A narrow ranking panel needs rows even on a wide desktop screen. */
@container ranking (max-width: 660px) {
  .leaderboard.hall-of-fame { grid-template-columns: minmax(0,1fr); padding-top: 0; }
  .leaderboard.hall-of-fame > .podium-score {
    display: grid; grid-column: 1; grid-row: auto; grid-template-columns: 28px minmax(0,1fr) auto;
    grid-template-rows: auto auto auto auto; justify-items: stretch; align-items: center;
    align-content: start; gap: 6px 10px; min-height: 0; margin: 0; padding: 16px 8px;
    border: 0; border-bottom: 1px solid #6a4c9320; border-radius: 0;
    background: transparent; box-shadow: none; text-align: left;
  }
  .leaderboard.hall-of-fame > .podium-score::after { display: none; }
  .leaderboard.hall-of-fame .podium-score > .podium-avatar { display: none; }
  .leaderboard.hall-of-fame .podium-score > .rank { position: static; grid-column: 1; grid-row: 1 / 3; align-self: start; font-size: 18px; }
  .leaderboard.hall-of-fame .podium-score > :is(.quiet-player,.leader-player) { grid-column: 2; grid-row: 1; justify-items: start; }
  .leaderboard.hall-of-fame .podium-score > :is(.quiet-points,.leader-score) { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
  .leaderboard.hall-of-fame .podium-score > .quiet-album { grid-column: 2 / -1; grid-row: 3; justify-self: start; }
  .leaderboard.hall-of-fame .podium-score > .quiet-details { grid-column: 2 / -1; grid-row: 2; text-align: left; }
  .leaderboard.hall-of-fame .podium-score > .leader-badges { grid-column: 2 / -1; grid-row: 2; flex-wrap: wrap; justify-content: start; }
  .leaderboard.hall-of-fame .podium-score > :is(.quiet-score-progress,.leader-progress) { grid-column: 1 / -1; grid-row: 4; width: 100%; }
  .leaderboard.hall-of-fame .podium-score .quiet-detail-badges { justify-content: start; }
  .leaderboard.hall-of-fame .podium-score .compact-card-collection { justify-items: start; }
  .leaderboard.hall-of-fame .podium-score .quiet-points small { display: none; }
  .leaderboard.hall-of-fame .leaderboard-row { grid-template-columns: 28px minmax(0,1fr) auto; }
  .leaderboard .leaderboard-row > .leader-badges { grid-column: 2 / -1; grid-row: 2; flex-wrap: wrap; }
  .leaderboard .leaderboard-row > .leader-score { grid-column: 3; grid-row: 1; }
  .leaderboard .leaderboard-row > .leader-progress { grid-row: 3; }
  .podium { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .podium-player { min-width: 0; padding-inline: 6px; }
  .podium-coins { flex-wrap: wrap; white-space: normal; }
}
@container ranking (max-width: 380px) {
  .leaderboard.hall-of-fame .podium-score > :is(.quiet-points,.leader-score),
  .leaderboard.quiet-ranking > .quiet-score-row > .quiet-points { grid-column: 2 / -1; grid-row: 2; justify-self: start; }
  .leaderboard.hall-of-fame .podium-score > :is(.quiet-details,.leader-badges) { grid-column: 2 / -1; grid-row: 3; }
  .leaderboard.hall-of-fame .podium-score > .quiet-album { grid-row: 4; }
  .leaderboard.hall-of-fame .podium-score > :is(.quiet-score-progress,.leader-progress) { grid-row: 5; }
  .leaderboard.quiet-ranking > .quiet-score-row > .quiet-details { grid-column: 2 / -1; grid-row: 3; }
  .leaderboard.quiet-ranking > .quiet-score-row > .quiet-album { grid-row: 4; }
  .leaderboard.quiet-ranking > .quiet-score-row > .quiet-score-progress { grid-row: 5; }
  .podium { display: flex; flex-direction: column; gap: 12px; }
  .podium-place { width: 100%; min-width: 0; }
}
@media (max-width: 980px) {
  .start-screen { height: auto; min-height: 100dvh; overflow: visible; }
  .start-screen > :is(.start-copy,.start-card,.start-panel,.leaderboard-card) { width: 100%; min-width: 0; max-width: 100%; }
  .start-copy h1 { line-height: 1.1; overflow-wrap: anywhere; }
  .scores-filter-row { display: flex; flex-wrap: wrap; }
  .scores-filter-row > * { min-width: 0; max-width: 100%; }
}
@media (max-width: 560px) {
  .hero-panels .hub-level-heading { flex-wrap: wrap; }
  .hero-panels .hub-level-heading > div { flex: 1 1 100%; }
  .hero-panels .hub-level-heading > b { margin: 4px 0 0; }
  .leaderboard-heading .leaderboard-all-button { width: 100%; }
  .all-scores-list > li:not(.quiet-score-row) { grid-template-columns: 24px minmax(0,1fr) auto; }
  .all-score-badges { grid-column: 2 / -1; flex-wrap: wrap; }
}
/* Long start pages must stay reachable rather than be clipped at the viewport. */
body:has(#startScreen:not(.hidden)) { height: auto; min-height: 100dvh; overflow-y: auto; }
.app-shell:has(> #startScreen:not(.hidden)) { height: auto; min-height: 100dvh; overflow: visible; }
body:has(.game-shell) { height: auto; min-height: 100dvh; overflow-y: auto; }
.game-shell { min-height: 100dvh; height: auto; overflow: visible; }
.game-shell > .card { flex: 1 0 auto; min-height: 300px; overflow: visible; }
.game-shell .topbar { flex-wrap: wrap; }
@media (max-height: 650px) {
  .game-shell > .card { min-height: 240px; }
}
.compact-collectible .extra-cards-chip { top: 0; right: 0; transform: none; }
.leaderboard.hall-of-fame .podium-score::after { left: 0; right: 0; }
.podium-player > strong { white-space: normal; overflow-wrap: anywhere; }
.game-screen { grid-template-columns: minmax(0,1fr); }
.game-layout { min-width: 0; }
.finish-leaderboard { container-type: inline-size; container-name: ranking; }
.topo-score-player > strong { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width:760px) {
  .game-screen > .topbar { width: 100%; min-width: 0; grid-template-columns: minmax(0,1fr) auto; }
  .game-screen .stats { min-width: 0; max-width: 100%; }
  .game-screen .stats > div { min-width: 0; }
}
/* A single full page is more legible than two miniature pages on a tablet. */
@media (min-width:641px) and (max-width:980px) {
  .book-ready .book-spread { grid-template-columns: minmax(0,1fr); aspect-ratio: .73; }
  .book-ready .book-spread::after { left: 0; width: 14px; }
  .book-ready .book-stage { flex-basis: 600px; width: min(600px,calc(100vw - 84px),calc((100dvh - 90px) * .73)); max-width: min(calc(100vw - 84px),calc((100dvh - 90px) * .73)); }
  .book-ready .book-paper-left { padding: 14px 16px 14px 22px; }
}
/* A short landscape screen gets two pockets instead of shrinking the text. */
@media (max-height:560px) and (min-aspect-ratio:1/1) {
  .book-ready .book-spread { grid-template-columns: minmax(0,1fr); aspect-ratio: 1.65; }
  .book-ready .book-spread::after { left: 0; width: 12px; }
  .book-ready .book-stage { flex-basis: 900px; width: min(900px,calc(100vw - 120px),calc((100dvh - 86px) * 1.65)); max-width: min(calc(100vw - 120px),calc((100dvh - 86px) * 1.65)); }
  .book-ready .book-pockets { grid-template-rows: minmax(0,1fr); gap: 12px; }
  .book-ready .book-paper { padding: 10px 16px; }
  .book-ready .book-paper-heading { margin-bottom: 8px; padding-bottom: 6px; }
  .book-ready .book-paper-number { margin-top: 6px; }
  .book-index-tabs { top: 7%; height: 76%; }
}
/* Preserve the map and answer controls on short landscape displays. */
@media (max-height:560px) and (min-aspect-ratio:1/1) {
  body:has(.play-layout) { height: auto; min-height: 100dvh; overflow-y: auto; }
  .app-shell:has(.play-layout) { height: auto; min-height: 100dvh; overflow: visible; }
  .game-screen:has(.play-layout) { height: auto; min-height: 100dvh; grid-template-rows: auto auto; overflow: visible; }
  .play-layout { height: auto; min-height: 320px; grid-template-columns: minmax(0,1fr) minmax(260px,.85fr); grid-template-rows: auto; overflow: visible; }
  .play-layout .map-stage { min-height: 280px; height: auto; }
  .play-layout .question-panel { min-height: 320px; height: auto; max-height: none; overflow: visible; }
}
/* Give mobile identity, scores and online status separate, non-overlapping rows. */
@media (max-width:760px) {
  .game-screen > .topbar:has(.mobile-player-chip) {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px;
    grid-template-areas: "brand player stop" "stats stats stats" "online online online";
    gap: 6px; align-items: center;
  }
  .game-screen > .topbar:has(.mobile-player-chip) .game-brand-group { grid-area: brand; min-width: 0; }
  .game-screen > .topbar:has(.mobile-player-chip) .mobile-player-chip {
    grid-area: player; justify-self: stretch; min-width: 0; max-width: 100%;
    width: auto; height: 44px; margin: 0; padding: 5px 7px;
  }
  .game-screen > .topbar:has(.mobile-player-chip) .mobile-player-chip strong { min-width: 0; }
  .game-screen > .topbar:has(.mobile-player-chip) .stop-button {
    grid-area: stop; width: 44px; min-width: 0; height: 44px; min-height: 44px; padding: 0;
  }
  .game-screen > .topbar:has(.mobile-player-chip) .stats {
    grid-area: stats; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; width: 100%;
  }
  .game-screen > .topbar:has(.mobile-player-chip) .stats > div:nth-child(n) {
    grid-column: auto; grid-row: auto; min-width: 0; min-height: 44px; padding: 6px 4px;
  }
  .game-screen > .topbar:has(.mobile-player-chip) .online-panel {
    grid-area: online; justify-content: flex-start; width: 100%; min-height: 26px; height: auto; padding: 3px 5px;
  }
  .game-screen > .topbar:has(.mobile-player-chip) .game-brand-title { font-size: 9px; letter-spacing: .04em; }
}

/* Regular ranking entries use explicit areas; legacy row numbers cannot add gaps. */
.all-scores-list { container-type: inline-size; container-name: ranking; }
:is(.leaderboard.quiet-ranking,.all-scores-list) > li.quiet-score-row {
  display: grid; grid-template-columns: 24px minmax(0,1fr) auto;
  grid-template-areas: "rank player points" ". details points" ". album album" "progress progress progress";
  grid-template-rows: auto auto auto 3px; align-items: center; align-content: start;
  gap: 5px 12px; min-height: 0; height: auto; padding: 14px 12px;
}
:is(.leaderboard.quiet-ranking,.all-scores-list) > li.quiet-score-row > .rank { grid-area: rank; position: static; align-self: center; }
:is(.leaderboard.quiet-ranking,.all-scores-list) > li.quiet-score-row > .quiet-player { grid-area: player; justify-items: start; }
:is(.leaderboard.quiet-ranking,.all-scores-list) > li.quiet-score-row > .quiet-points { grid-area: points; justify-self: end; align-self: start; margin: 0; font-size: 1.05rem; }
:is(.leaderboard.quiet-ranking,.all-scores-list) > li.quiet-score-row > .quiet-album { grid-area: album; justify-self: start; align-self: center; margin: 2px 0 0; }
:is(.leaderboard.quiet-ranking,.all-scores-list) > li.quiet-score-row > .quiet-details { grid-area: details; align-self: start; text-align: left; }
:is(.leaderboard.quiet-ranking,.all-scores-list) > li.quiet-score-row > .quiet-score-progress { grid-area: progress; width: 100%; height: 3px; margin: 5px 0 0; }
.quiet-score-row .compact-card-collection { width: 176px; justify-items: start; gap: 2px; }
.quiet-score-row .compact-card-strip { gap: 4px; }
.quiet-score-row .compact-collectible { height: 40px; }
.quiet-score-row .compact-album-link { min-height: 22px; font-size: .62rem; }
.quiet-score-row .quiet-points small { display: none; }
@container ranking (min-width: 560px) {
  :is(.leaderboard.quiet-ranking,.all-scores-list) > li.quiet-score-row {
    grid-template-columns: 24px minmax(0,1fr) auto 176px;
    grid-template-areas: "rank player points album" "rank details points album" "progress progress progress progress";
    grid-template-rows: auto auto 3px; gap: 3px 18px; padding: 13px 12px;
  }
  :is(.leaderboard.quiet-ranking,.all-scores-list) > li.quiet-score-row > .quiet-points { align-self: center; }
  :is(.leaderboard.quiet-ranking,.all-scores-list) > li.quiet-score-row > .quiet-album { margin: 0; justify-self: end; }
}
.quiet-score-row > .quiet-album { display: block; line-height: 1; }
.quiet-score-row .compact-card-collection { display: grid; }
@container ranking (max-width: 559px) {
  :is(.leaderboard.quiet-ranking,.all-scores-list) > li.quiet-score-row { padding-block: 10px; row-gap: 3px; }
}

/* Size the Outfit game titles to their actual column, including tablet layouts. */
.start-screen > .start-copy { container-type:inline-size; }
.start-screen > .start-copy > h1 { font-size:clamp(1.8rem,13cqi,5.5rem); overflow-wrap:normal; word-break:normal; }

@container ranking (min-width:560px){
  body[data-game-theme="hersenen"] :is(.leaderboard.quiet-ranking,.all-scores-list)>li.quiet-score-row{grid-template-columns:24px minmax(0,1fr) auto 230px}
}