/* v3.2.0 — Top 10 viewport and professional finale hardening. */
.top10-v320 .game-view,
.top10-v320 .question-panel,
.top10-v320 .cards-board,
.top10-v320 .teams-strip,
.top10-v320 .turn-panel,
.top10-v320 .answer-bar{min-width:0}
.top10-v320 .question-panel h1,
.top10-v320 .team-score-card .team-name,
.top10-v320 .turn-identity strong,
.top10-v320 .answer-label,
.top10-v320 .answer-info{overflow-wrap:anywhere;word-break:normal}
.top10-v320 .team-score-card .team-name{white-space:normal;min-width:0;line-height:1.25}

.top10-v320 .final-view.v320-final-shell{
  width:min(1180px,100%);
  min-height:0;
  overflow:visible!important;
  margin-inline:auto;
}
.top10-v320 .final-view .final-hero{min-width:0;max-width:100%}
.top10-v320 .final-view .final-hero h1,
.top10-v320 .final-view .winner-copy{max-width:100%;overflow-wrap:anywhere;text-wrap:balance}
.top10-v320 .final-podium{min-width:0;grid-template-columns:repeat(var(--teams,2),minmax(0,1fr))}
.top10-v320 .final-podium .final-team{min-width:0}
.top10-v320 .final-podium .final-team strong{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal;line-height:1.2}
.top10-v320 .final-podium .final-team small{overflow-wrap:anywhere}
.top10-v320 .final-stat-grid{min-width:0}
.top10-v320 .final-stat-grid .stat-card{min-width:0;overflow-wrap:anywhere}
.top10-v320 .final-actions.v320-final-actions{position:static!important;width:min(900px,100%)}

/* Short landscape: preserve all ten answers and controls without an inner scroller. */
@media (max-height:620px) and (min-width:760px){
  .top10-v320.top10-live{overflow:hidden}
  .top10-v320 .live-no-scroll{height:calc(100dvh - 66px)!important;gap:4px!important;overflow:hidden!important}
  .top10-v320 .live-no-scroll .game-topline{gap:5px!important}
  .top10-v320 .live-no-scroll .round-chip,
  .top10-v320 .live-no-scroll .category-chip,
  .top10-v320 .live-no-scroll .progress-chip{min-height:38px!important;padding:4px 9px!important;border-radius:12px!important}
  .top10-v320 .live-no-scroll .question-panel{min-height:50px!important;padding:5px 12px!important;border-radius:16px!important}
  .top10-v320 .live-no-scroll .question-panel h1{font-size:clamp(17px,2vw,27px)!important;line-height:1.25!important}
  .top10-v320 .live-no-scroll .cards-board{padding:4px!important;gap:4px!important;border-radius:15px!important;min-height:0!important}
  .top10-v320 .live-no-scroll .answer-card{min-height:0!important;padding:4px!important;border-radius:12px!important}
  .top10-v320 .live-no-scroll .answer-label{font-size:clamp(11px,1.1vw,16px)!important;line-height:1.18!important;margin-top:3px!important}
  .top10-v320 .live-no-scroll .answer-info{font-size:9px!important;line-height:1.15!important;margin-top:2px!important}
  .top10-v320 .live-no-scroll .teams-strip{gap:4px!important}
  .top10-v320 .live-no-scroll .team-score-card{min-height:44px!important;padding:5px 8px!important}
  .top10-v320 .live-no-scroll .turn-panel{min-height:48px!important;padding:5px 10px!important;gap:8px!important}
  .top10-v320 .live-no-scroll .answer-bar input{min-height:42px!important;padding-block:5px!important}
  .top10-v320 .live-no-scroll .top10-host-toolbar{min-height:34px!important;padding-block:2px!important}
  .top10-v320 .final-view.v320-final-shell{gap:7px!important;padding:9px 14px!important}
  .top10-v320 .final-hero .final-emblem{transform:scale(.78);margin-block:-8px}
  .top10-v320 .final-hero h1{font-size:clamp(28px,6vh,44px)!important}
  .top10-v320 .final-podium .final-team{min-height:88px!important;padding:9px 11px!important;gap:3px!important}
  .top10-v320 .final-podium .final-team .score{font-size:clamp(24px,5vh,34px)!important}
  .top10-v320 .final-stat-grid .stat-card{min-height:66px!important;padding:7px 10px!important}
}

@media (max-width:700px){
  .top10-v320{overflow-x:hidden}
  .top10-v320 .live-no-scroll,
  .top10-v320 .final-view.v320-final-shell{height:auto!important;min-height:0!important;overflow:visible!important}
  .top10-v320 .live-no-scroll .cards-board{overflow:visible!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important}
  .top10-v320 .top10-host-toolbar{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
  .top10-v320 .final-podium{grid-template-columns:1fr!important}
  .top10-v320 .final-podium .final-team.winner{transform:none!important}
  .top10-v320 .final-stat-grid{grid-template-columns:1fr!important}
  .top10-v320 .final-actions.v320-final-actions{display:grid;grid-template-columns:1fr;width:100%}
  .top10-v320 .final-actions.v320-final-actions .t10-btn{width:100%;min-width:0}
}

/* Keep decorative finale glows inside the result shell now that vertical overflow
   is deliberately visible for scrollable small screens. */
.top10-v320 .final-view::before{
  width:min(420px,100%)!important;
  inset-inline-start:0!important;
}
.top10-v320 .final-view::after{
  width:min(360px,100%)!important;
  inset-inline-end:0!important;
}
@media (max-height:620px) and (min-width:760px){
  .top10-v320 .final-view.v320-final-shell{gap:5px!important;padding:5px 10px!important}
  .top10-v320 .final-hero{gap:3px!important;padding-block:2px!important}
  .top10-v320 .final-hero h1{font-size:clamp(25px,6.5vh,36px)!important}
  .top10-v320 .winner-metric{padding:5px 12px!important}
  .top10-v320 .final-podium .final-team{min-height:74px!important;padding:6px 9px!important;gap:2px!important}
  .top10-v320 .final-podium .final-team .score{font-size:clamp(20px,5vh,28px)!important}
  .top10-v320 .final-podium .final-team strong{font-size:clamp(13px,2.7vh,18px)!important}
  .top10-v320 .final-podium .final-team small{font-size:9px!important}
  .top10-v320 .final-stat-grid .stat-card{min-height:48px!important;padding:4px 8px!important;gap:2px!important}
  .top10-v320 .final-stat-grid .stat-card b{font-size:clamp(15px,3.5vh,21px)!important}
  .top10-v320 .final-actions.v320-final-actions>*{min-height:34px!important;padding:5px 9px!important;font-size:11px!important}
}
@media (max-height:620px) and (min-width:760px){
  .top10-v320 .live-no-scroll .answer-card{height:auto!important}
}

/* v3.2.0 short-landscape readability budget: reserve meaningful height for
   both Top 10 answer rows while keeping every control visible. */
@media (max-height:620px) and (min-width:760px){
  .top10-v320 .live-no-scroll .round-chip,
  .top10-v320 .live-no-scroll .category-chip,
  .top10-v320 .live-no-scroll .progress-chip{
    min-height:34px!important;
    padding:3px 8px!important;
  }
  .top10-v320 .live-no-scroll .question-panel{
    min-height:44px!important;
    padding:4px 10px!important;
  }
  .top10-v320 .live-no-scroll .teams-strip{
    min-height:44px!important;
    gap:4px!important;
  }
  .top10-v320 .live-no-scroll .team-score-card{
    min-height:40px!important;
    padding:3px 7px!important;
    gap:5px!important;
  }
  .top10-v320 .live-no-scroll .team-score-card .team-name{
    font-size:13px!important;
    line-height:1.15!important;
  }
  .top10-v320 .live-no-scroll .team-score-card .team-state{display:none!important}
  .top10-v320 .live-no-scroll .team-score-card .score{font-size:20px!important}
  .top10-v320 .live-no-scroll .turn-panel{
    min-height:34px!important;
    padding:2px 7px!important;
    gap:5px!important;
    border-radius:13px!important;
  }
  .top10-v320 .live-no-scroll .turn-identity{gap:5px!important;min-width:0}
  .top10-v320 .live-no-scroll .turn-identity small{display:none!important}
  .top10-v320 .live-no-scroll .team-symbol{font-size:18px!important}
  .top10-v320 .live-no-scroll .turn-identity strong{
    font-size:13px!important;
    line-height:1.1!important;
  }
  .top10-v320 .live-no-scroll .hearts{
    font-size:16px!important;
    letter-spacing:1px!important;
  }
  .top10-v320 .live-no-scroll .last-chance{
    padding:3px 6px!important;
    font-size:10px!important;
  }
  .top10-v320 .live-no-scroll .timer-box{
    min-width:54px!important;
    padding-right:8px!important;
  }
  .top10-v320 .live-no-scroll .timer-box span{display:none!important}
  .top10-v320 .live-no-scroll .timer-box b{font-size:17px!important}
  .top10-v320 .live-no-scroll .answer-bar{gap:5px!important;min-height:36px!important}
  .top10-v320 .live-no-scroll .answer-bar input{
    min-height:36px!important;
    padding:4px 10px!important;
    font-size:14px!important;
    border-radius:13px!important;
  }
  .top10-v320 .live-no-scroll .answer-bar .t10-btn{
    min-height:36px!important;
    min-width:108px!important;
    padding-block:5px!important;
    border-radius:13px!important;
  }
  .top10-v320 .live-no-scroll .top10-host-toolbar{
    min-height:30px!important;
    padding-block:1px!important;
    gap:4px!important;
  }
  .top10-v320 .live-no-scroll .top10-host-toolbar .text-action,
  .top10-v320 .live-no-scroll .top10-host-toolbar button{
    min-height:28px!important;
    padding:3px 7px!important;
    font-size:9px!important;
  }
}

/* v3.2.0 light-mode result surfaces: the legacy finale used a fixed dark
   gradient while light mode switched text tokens to dark, creating low contrast. */
:root[data-theme="light"] .top10-v320 .round-view,
:root[data-theme="light"] .top10-v320 .final-view.v320-final-shell{
  background:
    radial-gradient(circle at 50% 0%,rgba(157,87,255,.10),transparent 52%),
    linear-gradient(145deg,var(--panel),var(--panel2))!important;
  border-color:var(--line2)!important;
  color:var(--text)!important;
  box-shadow:0 20px 55px rgba(72,40,102,.12)!important;
}
:root[data-theme="light"] .top10-v320 .final-view::before{
  background:radial-gradient(circle,color-mix(in srgb,var(--top10-winner-color,#b8860b) 14%,transparent),transparent 70%)!important;
}
:root[data-theme="light"] .top10-v320 .final-view::after{
  background:radial-gradient(circle,rgba(139,92,246,.10),transparent 72%)!important;
}


/* strict mobile setup containment r1 */
@media (max-width:760px){
html,body.top10-v320{width:100%;max-width:100%;overflow-x:hidden}
.top10-v320 .t10-nav,.top10-v320 .t10-shell,.top10-v320 .setup-view,.top10-v320 .setup-grid,.top10-v320 .setup-card,.top10-v320 .setup-hero,.top10-v320 .start-card,.top10-v320 .categories-card{min-width:0!important;max-width:100%!important}
.top10-v320 .t10-shell{width:calc(100% - 14px)!important}
.top10-v320 .setup-view,.top10-v320 .setup-grid{width:100%!important;grid-template-columns:minmax(0,1fr)!important}
.top10-v320 .setup-hero{width:100%!important;overflow:hidden!important}.top10-v320 .setup-hero>*{min-width:0!important;max-width:100%!important}
.top10-v320 .section-title>div,.top10-v320 .team-name-fields,.top10-v320 .round-options,.top10-v320 .timer-options,.top10-v320 .segmented,.top10-v320 .category-setup-tools,.top10-v320 .categories-grid,.top10-v320 .content-pack-row{min-width:0!important;max-width:100%!important}
.top10-v320 .round-options{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.top10-v320 .round-option,.top10-v320 .timer-options button,.top10-v320 .segmented button{min-width:0!important}
}