/* Display-only layout. The available screen height belongs to the content,
   after the event heading and round label have taken their space. */
.display-page,
.display-page:has(.display-playing.with-lyrics) {
  box-sizing:border-box;
  height:100vh;
  height:100dvh;
  min-height:0;
  padding:clamp(10px,2vh,24px) clamp(12px,2vw,36px);
  padding-top:52px;
  overflow:hidden;
}
.display-page *, .display-page *::before, .display-page *::after { box-sizing:border-box; }
.display-page .display-container { flex:1 1 0; min-height:0; min-width:0; max-width:1800px; }
.display-page .display-header,
.display-page:has(.display-playing.with-lyrics) .display-header { flex:0 0 auto; margin:0 0 clamp(4px,1vh,12px); }
.display-page .display-header h1,
.display-page:has(.display-playing.with-lyrics) .display-header h1 {
  margin:0; font-size:clamp(20px,min(3.2vw,5.2vh),48px); line-height:1.15; overflow-wrap:anywhere;
}
.display-page .event-logo { display:block; margin:auto; max-height:min(11vh,100px); max-width:100%; width:auto; object-fit:contain; }
.display-page .round-display,
.display-page:has(.display-playing.with-lyrics) .round-display {
  flex:0 0 auto; max-width:100%; margin:0 auto clamp(6px,1.5vh,18px);
  padding:clamp(4px,.9vh,10px) clamp(14px,2vw,30px);
  font-size:clamp(16px,min(2vw,3.8vh),28px); line-height:1.2; overflow-wrap:anywhere;
}
.display-page .generation-display+.display-main { margin-top:0; }
.display-page .display-main,
.display-page:has(.display-playing.with-lyrics) .display-main {
  flex:1 1 0; min-height:0; min-width:0; margin:0; align-items:stretch;
  container-type:size;
}
.display-page .fullscreen-btn { top:8px; right:12px; min-height:36px; padding:7px 12px; font-size:13px; }
.display-page .display-waiting { height:100%; min-height:0; gap:clamp(8px,2cqh,24px); padding-bottom:4px; }
.display-page .qr-scan-container { flex:1 1 0; min-height:0; container-type:size; }
.display-page .qr-code-wrapper {
  width:min(500px,85cqh,80cqw); height:min(500px,85cqh,80cqw);
  min-width:0; min-height:0; padding:clamp(8px,5cqh,34px); border-radius:clamp(12px,4cqh,32px);
}
.display-page .scan-text { flex:0 0 auto; font-size:clamp(16px,min(3vw,7cqh),32px); line-height:1.25; gap:12px; max-width:100%; }
.display-page .display-break { min-height:0; height:100%; gap:clamp(6px,2cqh,16px); padding:clamp(6px,3cqh,30px) 12px; }
.display-page .display-break .break-badge { font-size:clamp(11px,min(1.4vw,5cqh),18px); padding:6px 14px; }
.display-page .display-break .break-title { font-size:clamp(32px,min(9vw,24cqh),136px); line-height:1.08; }
.display-page .display-break .break-subtitle { font-size:clamp(16px,min(2.3vw,7cqh),32px); line-height:1.35; margin:0; max-width:min(900px,100%); padding:8px 16px; overflow-wrap:anywhere; }
.display-page .display-playing:not(.with-lyrics) { min-height:0; height:100%; width:100%; }
.display-page .display-playing:not(.with-lyrics) .listening-banner { max-width:100%; margin:0; padding:clamp(14px,5cqh,40px) clamp(18px,5vw,80px); font-size:clamp(16px,min(2.8vw,8cqh),36px); }
.display-page .listening-banner .playing-text { font-size:1em; }
.display-page .listening-banner .singalong-text { font-size:.7em; }
.display-page .display-playing.with-lyrics:not(.with-video) .karaoke-line,
.display-page .display-playing.with-lyrics:not(.with-video) .karaoke-line.active { font-size:clamp(20px,min(3.5vw,10vh),48px); }
.display-page .display-results { width:100%; height:100%; min-height:0; justify-content:center; gap:clamp(4px,2cqh,16px); }
.display-page .display-results .display-image { width:min(250px,35cqh,50cqw); height:min(250px,35cqh,50cqw); object-fit:contain; flex-shrink:0; margin:0; }
.display-page .reveal-text { font-size:clamp(14px,min(2vw,5cqh),26px); margin:0; }
.display-page .reveal-title { font-size:clamp(22px,min(4vw,10cqh),60px); line-height:1.15; margin:0; overflow-wrap:anywhere; }
.display-page .reveal-artist { font-size:clamp(16px,min(2.5vw,7cqh),36px); line-height:1.2; margin:0; overflow-wrap:anywhere; }
.display-page .reveal-year-source { font-size:clamp(11px,min(1.4vw,4cqh),18px); margin:0; }
/* Keep all ten cards and the start card on screen, in reading order. */
.display-page .display-round-answers { min-height:0; padding:0; gap:clamp(4px,1cqh,10px); }
.display-page .round-answers-title { font-size:clamp(16px,min(2.3vw,5cqh),36px); line-height:1.15; margin:0; }
.display-page .round-answers-strip-wrapper { min-height:0; padding:0; overflow:visible; align-items:stretch; }
.display-page .round-answers-strip { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr); align-items:stretch; gap:clamp(6px,1vw,14px); min-width:0; width:100%; padding:0; }
.display-page :is(.ra-card,.ra-start-card) { width:100%; height:auto; min-width:0; min-height:0; margin:0; padding:8px; border-radius:10px; }
.display-page .ra-card-year { font-size:clamp(22px,min(3vw,7cqh),48px); margin:20px 0 6px; }
.display-page .ra-start-year { font-size:clamp(24px,min(3vw,8cqh),48px); }
.display-page .ra-card-content { flex:1 1 0; min-height:0; gap:4px; }
.display-page .ra-card-title { font-size:clamp(12px,min(1.5vw,3.6cqh),22px); }
.display-page .ra-card-artist { font-size:clamp(11px,min(1.3vw,3.2cqh),19px); }
.display-page .ra-card-number { font-size:11px; top:5px; right:5px; }
.display-page .round-answers-hint-bottom { display:none; }
.display-page .ra-zoom-overlay { gap:clamp(6px,2vw,24px); padding:12px; }
.display-page .ra-zoom-card { max-height:calc(100dvh - 24px); min-width:0; max-width:calc(100vw - 130px); padding:48px 20px 24px; overflow:auto; }
.display-page .ra-zoom-year { font-size:clamp(40px,min(9vw,15vh),112px); }
.display-page .ra-zoom-title { font-size:clamp(20px,min(3vw,7vh),38px); overflow-wrap:anywhere; }
.display-page .ra-zoom-artist { font-size:clamp(16px,min(2.2vw,5vh),29px); overflow-wrap:anywhere; }
.display-page .ra-zoom-nav { width:44px; height:44px; font-size:36px; }
.display-page .display-scoreboard-fullscreen { padding:52px clamp(12px,3vw,60px) clamp(12px,2vh,30px); }
.display-page .display-scoreboard-header { margin-bottom:clamp(8px,2vh,24px); gap:12px; }
.display-page .display-scoreboard-title { font-size:clamp(22px,min(4vw,7vh),60px); line-height:1.15; }
.display-page .display-scoreboard-trophy { font-size:clamp(20px,5vh,48px); }
.display-page .display-scoreboard-columns { min-height:0; gap:clamp(10px,2vw,40px); }
.display-page .display-scoreboard-col { min-width:0; min-height:0; gap:clamp(4px,1vh,12px); }
.display-page .display-scoreboard-entry { flex:1 1 0; min-height:0; max-height:100px; padding:4px clamp(6px,1vw,20px); gap:8px; container-type:size; }
.display-page :is(.display-scoreboard-rank,.display-scoreboard-team,.display-scoreboard-score) { font-size:clamp(12px,min(2.2vw,70cqh),30px); line-height:1.1; }
.display-page .display-scoreboard-rank { min-width:28px; }
.display-page .display-scoreboard-team { white-space:normal; overflow-wrap:anywhere; }
@media(max-width:999px) {
  .display-page .round-answers-strip { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .display-page .ra-card-year { margin-top:16px; font-size:clamp(20px,5.5cqh,38px); }
}
@media(max-width:599px) {
  .display-page .round-answers-strip { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .display-page .display-scoreboard-header { gap:6px; }
  .display-page .display-scoreboard-trophy { display:none; }
  .display-page .display-scoreboard-entry { gap:4px; padding-inline:4px; }
}
@media(max-height:450px) {
  .display-page, .display-page:has(.display-playing.with-lyrics) { padding-top:44px; }
  .display-page .display-header h1, .display-page:has(.display-playing.with-lyrics) .display-header h1 { font-size:18px; }
  .display-page .round-display, .display-page:has(.display-playing.with-lyrics) .round-display { font-size:14px; padding-block:3px; margin-bottom:5px; }
  .display-page .ra-card-year { margin:14px 0 3px; font-size:20px; }
  .display-page :is(.ra-card,.ra-start-card) { padding:5px; }
  .display-page .ra-card-content { gap:2px; }
}