/* Both game clients use the same viewport rules, including fullscreen. */
html,body{margin:0;max-width:100%;overflow:hidden}
body{padding-bottom:0}
#kiosk{height:calc(100dvh - 52px);min-height:0;overflow-x:hidden;overflow-y:auto}
#kiosk:fullscreen{width:100%;height:100dvh;min-height:0}
#kiosk #screen{max-width:none;min-height:100%;height:auto;max-height:none;overflow:clip;padding-inline:clamp(16px,4cqw,160px)}
#screen{--u:clamp(10px,min(1cqw,2dvh),40px)}
#screen :is(section,aside,form,.intro-copy,.scenario-copy,.situation-copy,.decision-copy,.response-main,.result-heading,.result-details){min-width:0}
#screen :is(h1,h2,p,b,.game-name,.choice-title){overflow-wrap:anywhere}
#screen .brand-header,#screen .game-nav,#screen .round-track,#screen .game-footer{flex-shrink:0}
#screen .game-footer{gap:12px;flex-wrap:wrap;padding-block:12px}
#screen .round-track .wrong{background:var(--red);color:var(--ink);border-color:var(--red)}
.decision-mascot{display:none}
@container(min-width:1101px){
  #screen .decision .decision-mascot{display:block;position:absolute;bottom:calc(100% - 16px);left:50%;width:112px;height:130px;translate:-50% 0;pointer-events:none;z-index:2}
  #screen .decision.stop .decision-mascot{bottom:calc(100% + 10px)}
  #screen .decision-mascot .toon{scale:.8;transform-origin:50% 100%}
}
#screen .response-tile{min-width:0}
#screen .response-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#screen .game-choice{min-width:0}
#screen .home-games{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
#screen .home-games:not(:has(>:nth-child(3 of :not([hidden])))){display:grid}
#screen .home-games>.game-choice{grid-column:auto}
#screen .home-games>.game-choice[hidden]{display:none}
#screen .home-games:has(>.game-choice:nth-child(3)){max-width:none!important}
.preview-actions{flex-shrink:0}
.preview-actions>button{min-height:44px}
.preview-bar{padding-inline:12px;gap:8px}
.preview-label{min-width:0}
.preview-label>span{display:none}
dialog{max-height:calc(100dvh - 24px);overflow:auto}
dialog.answer-feedback{width:min(90vw,calc(40 * clamp(16px,1vw,40px)));max-width:none;max-height:calc(100dvh - 24px)}
@media(min-width:1600px){
  .answer-feedback .feedback-scroll{padding:2vw}
  .answer-feedback h2{font-size:clamp(36px,2.4vw,92px)}
  .answer-feedback .eyebrow,.answer-feedback .round-reaction,.answer-feedback .learning-point>b{font-size:clamp(16px,1vw,38px)}
  .answer-feedback .reason,.answer-feedback .learning-point>p,.answer-feedback .decision-verdict{font-size:clamp(18px,1.15vw,44px)}
  .answer-feedback .button{font-size:clamp(18px,1.2vw,46px);padding:1vw}
  .answer-feedback .feedback-close{width:clamp(44px,3vw,112px);height:clamp(44px,3vw,112px)}
}
/* Small screens retain readable text and scroll vertically when needed. */
@container(max-width:719px){
  #screen .brand-header{height:70px;min-height:70px}
  #screen .brand-home img{width:145px}
  #screen .game-nav{gap:10px;min-height:64px}
  #screen .game-name{font-size:12px;text-align:center}
  #screen .back-button,#screen .reset-button{min-width:44px;min-height:44px;padding:10px}
  #screen .round-count{font-size:11px;padding:7px;white-space:nowrap}
  #screen .round-track{gap:12px;margin-bottom:20px}
  #screen .round-track span{width:32px;height:32px;font-size:13px}
  #screen .home-hero h1{font-size:clamp(36px,9cqw,64px)}
  #screen .home-hero>p:last-child{font-size:16px}
  #screen .home-games{display:grid;grid-template-columns:1fr}
  #screen .game-choice{rotate:0deg;min-height:0}
  #screen .choice-title{font-size:clamp(30px,8cqw,50px)!important;white-space:normal}
  #screen .choice-description{font-size:16px}
  #screen .choice-meta{font-size:11px;flex-wrap:wrap;gap:8px}
  #screen .start-strip{font-size:14px!important}
  #screen .intro-view,#screen .act-scenario,#screen .decision-view,#screen .response-view,#screen .result-view,#screen .debrief-view{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:16px 32px}
  #screen .intro-copy h1{font-size:clamp(40px,11cqw,70px)}
  #screen .situation-copy h1,#screen .decision-copy h1,#screen .scenario-copy h1,#screen .debrief-heading h1{font-size:clamp(28px,7cqw,48px)}
  #screen .lead,#screen .scenario-copy .lead{font-size:18px;line-height:1.5;margin-top:14px}
  #screen .button{min-height:48px;font-size:16px;padding:14px 18px;gap:12px}
  #screen .decision-view>.host-line{display:none}
  #screen .case-card{rotate:0deg;margin-top:20px}
  #screen .case-card blockquote{font-size:18px;margin:16px;padding:16px;line-height:1.5}
  #screen .case-channel,#screen .case-bottom{font-size:12px;padding:12px 16px}
  #screen .case-sender{padding:16px 16px 0}
  #screen .case-sender b{font-size:16px}
  #screen .case-sender div>span{font-size:12px}
  #screen .decision{min-height:140px;padding:16px 8px}
  #screen .decision>b{font-size:30px}
  #screen .decision>span{font-size:13px}
  #screen .decision-hint{font-size:15px}
  #screen .response-context{grid-template-columns:minmax(0,1fr) auto;padding:16px;gap:16px}
  #screen .response-context h1{font-size:24px}
  #screen .response-context>p,#screen .response-heading>p{font-size:16px}
  #screen .response-heading h2{font-size:28px}
  #screen .response-tile{grid-template-columns:1fr;min-height:150px;padding:14px 12px;rotate:0deg}
  #screen .response-tile b{font-size:16px}
  #screen .tile-state{font-size:12px}
  #screen .response-progress,#screen .response-feedback{font-size:14px}
  #screen .result-heading h1{font-size:clamp(40px,10cqw,64px)}
  #screen .result-details{rotate:0deg;padding:18px}
  #screen .stop-result .learning-point>p{font-size:20px}
  #screen .action-recap{padding:6px 16px}
  #screen .action-recap h2{font-size:18px}
  #screen .action-recap p{font-size:16px}
  #screen .debrief-end{flex-wrap:wrap}
  #screen .game-footer{font-size:11px}
}
@media(max-width:380px){.preview-label{display:none}.preview-actions{width:100%;justify-content:space-between}}

/* Landscape sizes follow both available width and height, from laptops to 4K TVs. */
@media(min-aspect-ratio:1/1) and (min-height:600px){
  @container(min-width:720px){
    #screen .brand-header{height:calc(4.5 * var(--u));min-height:56px}
    #screen .brand-home img{width:calc(11 * var(--u));max-height:calc(4 * var(--u))}
    #screen .game-nav{min-height:calc(4 * var(--u));gap:var(--u)}
    #screen .game-name{font-size:clamp(14px,calc(1.3 * var(--u)),48px)}
    #screen .game-footer{min-height:calc(3.5 * var(--u));font-size:clamp(11px,calc(.8 * var(--u)),30px);padding-block:8px}
    #screen .eyebrow{font-size:clamp(12px,calc(.9 * var(--u)),32px);margin-bottom:calc(.7 * var(--u))}
    #screen .lead{max-width:none;font-size:clamp(18px,calc(1.35 * var(--u)),52px);line-height:1.45;margin-top:var(--u)}
    #screen .button{min-height:calc(3.8 * var(--u));font-size:clamp(16px,calc(1.15 * var(--u)),44px);padding:calc(.8 * var(--u)) var(--u);gap:var(--u)}
    #screen .back-button,#screen .reset-button{min-height:44px;padding:calc(.5 * var(--u));font-size:clamp(14px,var(--u),36px)}
    #screen .home-view{padding-block:var(--u)}
    #screen .home-hero h1{font-size:calc(5 * var(--u))}
    #screen .home-hero>p:last-child{font-size:clamp(16px,calc(1.25 * var(--u)),48px);margin-top:var(--u)}
    #screen .home-games:not(:has(>:nth-child(3 of :not([hidden])))){gap:calc(2 * var(--u))!important}
    #screen .home-games>.game-choice{min-height:0;rotate:0deg;margin-top:0;padding:var(--u) var(--u) 0!important}
    #screen .home-games .choice-title{font-size:clamp(24px,calc(3 * var(--u)),112px)!important;white-space:normal}
    #screen .cabinet-label{font-size:clamp(11px,calc(.8 * var(--u)),30px);margin-bottom:var(--u)}
    #screen .character-scene{height:calc(10 * var(--u));margin:0;gap:var(--u)}
    #screen .character-scene>.toon{scale:.85;margin:0}
    #screen .speech-scribble{font-size:clamp(11px,var(--u),36px);max-width:calc(10 * var(--u));padding:calc(.6 * var(--u))}
    #screen .choice-description{font-size:clamp(14px,var(--u),38px);min-height:0}
    #screen .choice-meta{font-size:clamp(10px,calc(.75 * var(--u)),28px);gap:8px;margin-top:var(--u);padding-block:var(--u);flex-wrap:wrap}
    #screen .choice-meta>span::before{padding-right:8px}
    #screen .start-strip{font-size:clamp(14px,var(--u),38px)!important;margin-inline:calc(-1 * var(--u))!important;padding:var(--u)}
    #screen .home-view:has(.home-games>:nth-child(2 of :not([hidden]))):not(:has(.home-games>:nth-child(3 of :not([hidden])))){display:grid!important;grid-template-columns:.7fr 1.65fr;align-content:center;align-items:center;gap:var(--u)}
    #screen .home-view:not(:has(.home-games>:nth-child(3 of :not([hidden])))) .home-hero{text-align:left!important;margin:0!important}
    #screen .home-view:not(:has(.home-games>:nth-child(3 of :not([hidden])))) .home-games{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;padding:var(--u)!important}
    #screen .menu-extras{margin:0;grid-column:1/-1}
    #screen .intro-view,#screen .act-scenario,#screen .decision-view,#screen .result-view,#screen .debrief-view{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(3 * var(--u));padding-block:var(--u);align-content:center}
    #screen .intro-copy,#screen .scenario-copy{text-align:left;display:block}
    #screen .intro-copy h1{font-size:calc(7.2 * var(--u));line-height:1.05}
    #screen #player-form{width:100%;max-width:calc(36 * var(--u));margin-top:var(--u)}
    #screen #player-form label{font-size:clamp(16px,calc(1.2 * var(--u)),44px);margin-bottom:calc(.5 * var(--u))}
    #screen #player-name{min-height:calc(4 * var(--u));padding:var(--u);font-size:clamp(20px,calc(1.4 * var(--u)),54px)}
    #screen #name-note{font-size:clamp(12px,calc(.85 * var(--u)),32px);margin:calc(.5 * var(--u)) 0 var(--u)}
    #screen .name-mascot{display:flex;min-height:calc(18 * var(--u))}
    #screen .name-mascot .toon{scale:2}
    #screen .round-track{gap:var(--u);margin-bottom:var(--u)}
    #screen .round-track span{width:calc(2.8 * var(--u));height:calc(2.8 * var(--u));font-size:clamp(14px,calc(1.2 * var(--u)),44px)}
    #screen .round-count{font-size:clamp(12px,var(--u),36px);padding:calc(.5 * var(--u)) var(--u)}
    #screen .round-count b{font-size:calc(1.4 * var(--u))}
    #screen .decision-view>.host-line{display:none}
    #screen .situation-copy h1,#screen .decision-copy h1{font-size:clamp(28px,calc(3.1 * var(--u)),116px);line-height:1.14}
    #screen .situation-copy .case-card{margin-top:var(--u)}
    #screen .case-card{rotate:0deg}
    #screen .case-channel,#screen .case-bottom{font-size:clamp(12px,calc(.85 * var(--u)),32px);padding:calc(.6 * var(--u)) var(--u)}
    #screen .case-sender{padding:var(--u) var(--u) 0}
    #screen .case-sender b{font-size:clamp(16px,calc(1.1 * var(--u)),42px)}
    #screen .case-sender div>span{font-size:clamp(11px,calc(.8 * var(--u)),30px)}
    #screen .case-card blockquote{font-size:clamp(18px,calc(1.55 * var(--u)),58px);line-height:1.4;margin:var(--u);padding:var(--u)}
    #screen .decision-buttons{gap:var(--u);margin-top:var(--u)}
    #screen .decision{position:relative;min-height:calc(13 * var(--u));padding:var(--u);rotate:0deg}
    #screen .decision>b{font-size:calc(2.3 * var(--u))}
    #screen .decision>span{font-size:clamp(14px,var(--u),38px)}
    #screen .decision>svg{width:calc(2.6 * var(--u));height:calc(2.6 * var(--u))}
    #screen .decision-hint{font-size:clamp(14px,calc(1.1 * var(--u)),42px);margin-top:calc(1.5 * var(--u))}
    #screen .scenario-copy h1{font-size:calc(4 * var(--u))}
    #screen .incident-visual>.toon{scale:2;margin:calc(5 * var(--u)) auto}
    #screen .incident-visual>.incident-bubble{font-size:clamp(16px,calc(1.2 * var(--u)),44px);max-width:none}
    #screen .ready-note{max-width:none;margin:var(--u) 0;padding:var(--u)}
    #screen .ready-note p{font-size:clamp(16px,var(--u),38px)}
    #screen .response-view{grid-template-columns:minmax(0,.85fr) minmax(0,2fr);gap:calc(2 * var(--u));padding-block:var(--u)}
    #screen .response-context{display:block;padding:var(--u);rotate:0deg}
    #screen .response-context h1{font-size:clamp(24px,calc(2 * var(--u)),76px)}
    #screen .response-context>p{font-size:clamp(16px,calc(1.1 * var(--u)),42px);line-height:1.45;margin-top:var(--u)}
    #screen .timer-panel{margin-top:var(--u);padding:var(--u)}
    #screen .timer-panel b{font-size:calc(3 * var(--u))}
    #screen .timer-panel>span,#screen .timer-panel small,#screen .timer-panel div>span{font-size:clamp(11px,calc(.8 * var(--u)),30px)}
    #screen .response-heading>.host-line{display:none}
    #screen .response-heading h2{font-size:calc(2.5 * var(--u))}
    #screen .response-heading>p{font-size:clamp(16px,var(--u),38px);margin-top:8px}
    #screen .power-cells{margin-top:var(--u)}
    #screen .response-progress,#screen .response-feedback{font-size:clamp(13px,calc(.95 * var(--u)),36px);padding-block:calc(.7 * var(--u));margin:0}
    #screen .response-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--u)}
    #screen .response-tile{grid-template-columns:1fr;min-height:calc(9 * var(--u));align-content:start;gap:0;padding:calc(.8 * var(--u));rotate:0deg}
    #screen .tile-icon{grid-row:auto;width:calc(2 * var(--u));height:calc(2 * var(--u));margin-bottom:calc(.6 * var(--u))}
    #screen .tile-icon svg{width:100%;height:100%}
    #screen .response-tile b{font-size:clamp(14px,calc(1.1 * var(--u)),42px)}
    #screen .tile-state{font-size:clamp(11px,calc(.7 * var(--u)),26px)}
    #screen .result-heading,#screen .result-details{rotate:0deg}
    #screen .result-heading h1{font-size:calc(5 * var(--u));line-height:1.1}
    #screen .result-heading>p:not(.eyebrow){font-size:clamp(16px,calc(1.2 * var(--u)),44px);line-height:1.45;margin-top:var(--u)}
    #screen .finish-mascot{height:calc(6 * var(--u));margin-bottom:var(--u)}
    #screen .finish-mascot .toon{scale:.8;transform-origin:50% 50%}
    #screen .stop-score{margin-top:var(--u)}
    #screen .stop-score strong{font-size:calc(5 * var(--u))}
    #screen .result-details{padding:var(--u)}
    #screen .result-details .learning-point{margin:0 0 var(--u)}
    #screen .result-details .learning-point>b,#screen .result-details .learning-point>p{font-size:clamp(18px,calc(1.4 * var(--u)),52px);line-height:1.45}
    #screen .badge-label{font-size:clamp(12px,var(--u),36px);margin-bottom:var(--u)}
    #screen .result-stats{gap:calc(.8 * var(--u))}
    #screen .result-stats>div{padding:calc(.65 * var(--u))}
    #screen .result-stats b{font-size:calc(3 * var(--u))}
    #screen .result-stats>div>span,#screen .result-stats small{font-size:clamp(11px,calc(.8 * var(--u)),30px)}
    #screen .save-panel{margin-top:var(--u);padding:var(--u)}
    #screen .save-panel>b{font-size:clamp(16px,calc(1.2 * var(--u)),44px)}
    #screen .save-panel>p,#screen .score-note,#screen .auto-reset{font-size:clamp(12px,calc(.85 * var(--u)),32px);margin-block:calc(.6 * var(--u))}
    #screen .result-actions{margin-top:var(--u);gap:calc(.6 * var(--u))}
    #screen .result-actions .button{font-size:clamp(12px,calc(.85 * var(--u)),32px);gap:8px}
    #screen .save-panel .debrief-button{margin-top:var(--u)}
    #screen .debrief-view{gap:var(--u) calc(3 * var(--u))}
    #screen .debrief-heading h1{font-size:calc(4 * var(--u))}
    #screen .action-recap{padding:calc(.4 * var(--u)) var(--u)}
    #screen .action-recap>div{padding:calc(.65 * var(--u)) 0;gap:var(--u)}
    #screen .action-recap h2{font-size:clamp(16px,calc(1.15 * var(--u)),44px)}
    #screen .action-recap p{font-size:clamp(14px,var(--u),38px);line-height:1.4;margin-top:calc(.3 * var(--u))}
    #screen .debrief-end{padding-top:var(--u)}
    #screen .debrief-end>p{font-size:clamp(14px,var(--u),38px)}
  }
  @container(min-width:2400px){
    #screen .character-scene>.toon{scale:1.6}
    #screen .name-mascot .toon,#screen .incident-visual>.toon{scale:3}
    #screen .finish-mascot .toon{scale:1.2}
  }
  @container(min-width:3200px){
    #screen .character-scene>.toon{scale:2.2}
    #screen .name-mascot .toon,#screen .incident-visual>.toon{scale:4}
    #screen .finish-mascot .toon{scale:1.6}
  }
}
@media(min-aspect-ratio:1/1) and (min-height:600px) and (max-height:800px){
  @container(min-width:720px){
    #screen .intro-copy h1{font-size:calc(6.5 * var(--u))}
    #screen .scenario-copy h1{font-size:calc(3.5 * var(--u))}
    #screen .result-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
    #screen .result-stats b{font-size:calc(2.5 * var(--u))}
    #screen .result-stats small{display:block}
  }
}

/* The preview Portrait control narrows the kiosk while the browser stays landscape. */
@container(min-width:600px) and (max-width:719px){
  #screen[data-view="stop-play"] .decision-view>.host-line{display:none}
  #screen[data-view="stop-play"] .decision-copy{padding-top:calc(10 * var(--u))}
  #screen[data-view="stop-play"] .decision{position:relative}
  #screen[data-view="stop-play"] .decision .decision-mascot{display:block;position:absolute;bottom:calc(100% - var(--u));left:50%;width:calc(9 * var(--u));height:calc(10 * var(--u));translate:-50% 0;pointer-events:none;z-index:2}
  #screen[data-view="stop-play"] .decision.stop .decision-mascot{bottom:calc(100% + .5 * var(--u))}
  #screen[data-view="stop-play"] .decision-mascot .toon{scale:.7;transform-origin:50% 100%}
}

/* Portrait TVs keep both characters attached to their decision buttons. */
@media(max-aspect-ratio:1/1) and (min-width:600px){
  #screen[data-view="stop-play"] .decision-view>.host-line{display:none}
  #screen[data-view="stop-play"] .decision-copy{padding-top:calc(10 * var(--u))}
  #screen[data-view="stop-play"] .decision{position:relative}
  #screen[data-view="stop-play"] .decision .decision-mascot{display:block;position:absolute;bottom:calc(100% - var(--u));left:50%;width:calc(9 * var(--u));height:calc(10 * var(--u));translate:-50% 0;pointer-events:none;z-index:2}
  #screen[data-view="stop-play"] .decision.stop .decision-mascot{bottom:calc(100% + .5 * var(--u))}
  #screen[data-view="stop-play"] .decision-mascot .toon{scale:.7;transform-origin:50% 100%}
}