/* One viewport: arena uses the space left by the header and controls. */
html{height:100%;overflow:hidden}
body{height:100dvh;min-height:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
header{height:62px;min-height:0;padding:8px 18px;flex-wrap:nowrap;gap:12px}
.brand{font-size:19px;gap:8px;white-space:nowrap}.edition,#mode{display:none}
.top-right{width:auto;gap:8px}.top-right .quiet,#language{min-height:44px;font-size:12px}
main{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;min-height:0;width:100%;max-width:none;margin:0;padding:8px 12px 12px;gap:8px;position:relative}
.arena,body.is-playing .arena{grid-row:1;height:100%;min-height:0;max-height:none;border-radius:14px}
main>aside,footer{display:none}
#mobile-controls,body.is-playing #mobile-controls{grid-row:3;display:flex;position:static;gap:8px;margin:0;padding:0}
#mobile-controls button{min-height:44px;flex:1;font-size:12px}
#demo-controls,body.is-playing #demo-controls{grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:center;gap:18px;margin:0;padding:8px 12px}
#demo-controls .panel-title,#demo-controls>p{display:none}
.pose-buttons{margin:0!important;gap:8px}.pose-buttons button{min-height:44px;font-size:13px}
#demo-controls label{min-width:0;font-size:12px}#lean{width:140px;min-width:0;height:30px;flex-shrink:1}
.camera-panel,body.is-playing .camera-panel{display:none;position:absolute;right:12px;bottom:54px;top:auto;width:clamp(76px,13vw,150px);padding:3px;border-radius:9px;pointer-events:none;z-index:1}
body.camera-playing .camera-panel{display:block}
.camera-panel .preview{margin:0}.camera-panel .panel-title,#stop-camera{display:none!important}
#tracking{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.camera-panel #preview-note{font-size:9px;line-height:1.4;padding:3px}
.welcome{padding:14px;overflow:hidden;align-items:center;z-index:3}
.welcome-card{width:430px;max-width:100%;max-height:100%;padding:22px 26px;margin:0;overflow:auto}
.welcome-card h1,html[lang="en"] .welcome-card h1{font-size:clamp(30px,4vh,44px);margin:12px 0 8px}
.welcome-card p{font-size:12px;line-height:1.65;margin:8px 0}
.welcome-card .fine{font-size:10px;line-height:1.5;margin:10px 0 0}
.welcome-card .primary{min-height:44px;padding:12px 16px;margin-top:14px;font-size:15px}
.welcome-card .secondary{min-height:44px;padding:10px;margin-top:8px}
.steps{margin:10px 0 0;gap:5px}.steps li{padding:5px 9px;font-size:12px}.steps b{width:20px;height:20px;font-size:11px}
.stage-top,body.is-playing .stage-top{top:14px;left:16px;right:16px}
.live,body.is-playing .live{top:54px;left:12px;right:12px;width:auto;text-align:center}
#cue,body.is-playing #cue,html[lang="en"] #cue{font-size:clamp(23px,4vh,42px)}
#phase,body.is-playing #phase{font-size:11px;padding:4px 11px;margin-bottom:7px}
#subcue,body.is-playing #subcue{font-size:12px;padding:5px 11px;margin:7px 0}
.stage-bottom,body.is-playing .stage-bottom{left:14px;right:14px;bottom:16px;font-size:11px;gap:10px}
#fit,body.is-playing #fit{font-size:13px;white-space:nowrap}
@media(max-width:600px){
 header{height:94px;padding:6px 10px;flex-wrap:wrap;gap:4px}.brand{font-size:16px}.brand-icon{width:24px;height:24px;font-size:18px}.top-right{width:100%;justify-content:space-between;gap:6px}.top-right .quiet,#language{font-size:11px;padding:8px 10px}
 main{padding:6px 8px 8px;gap:6px}.arena,body.is-playing .arena{border-radius:11px}
 #demo-controls,body.is-playing #demo-controls{grid-template-columns:minmax(0,1fr);gap:2px;padding:5px 8px}.pose-buttons{gap:5px}.pose-buttons button{font-size:12px}#demo-controls label{height:28px;font-size:11px}#lean{width:58%}
 .welcome{padding:10px}.welcome-card{padding:16px;width:360px}.welcome-card h1,html[lang="en"] .welcome-card h1{font-size:34px}.welcome-card .eyebrow{font-size:9px;letter-spacing:1px}
 .stage-top .eyebrow{display:none}.stage-top,body.is-playing .stage-top{justify-content:flex-end}.legend-row{gap:8px}.legend{display:none}
 .camera-panel,body.is-playing .camera-panel{width:76px;right:10px;bottom:54px}
}
@media(max-height:740px){.welcome-card .steps{display:none}.welcome-card>p[data-i18n="welcomeBody"]{display:none}.welcome-card h1,html[lang="en"] .welcome-card h1{font-size:34px}.welcome-card{padding:18px 22px}}
@media(max-height:480px) and (min-width:601px){
 header{height:56px;min-height:0;flex-wrap:nowrap;padding:6px 12px}.top-right{width:auto}.brand{font-size:16px}
 main{padding:4px 8px 6px;gap:4px}#demo-controls,body.is-playing #demo-controls{padding:3px 8px;grid-template-columns:minmax(0,1fr) 220px;gap:12px}
 #mobile-controls button{min-height:36px;padding:4px;font-size:11px}
 .welcome{padding:8px}.welcome-card{width:620px;padding:12px 18px;display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;align-items:center}.welcome-card>.eyebrow{grid-column:1/-1;font-size:9px}.welcome-card h1,html[lang="en"] .welcome-card h1{grid-column:1;grid-row:2/span 2;font-size:32px;margin:0}.welcome-card>.primary{grid-column:2;grid-row:2;margin:0}.welcome-card>.secondary{grid-column:2;grid-row:3;margin:0}.welcome-card>.fine{grid-column:1/-1;grid-row:4;margin:3px 0 0}#error{grid-column:1/-1;margin:0!important}#error:empty{display:none}#results{grid-column:1/-1;grid-row:4;margin:4px 0}#final-text{display:none}
 .live,body.is-playing .live{top:12px;left:12px;right:auto;width:29%;text-align:left}#cue,body.is-playing #cue,html[lang="en"] #cue{font-size:20px}#subcue,body.is-playing #subcue{font-size:10px;padding:4px 7px}.stage-top{justify-content:flex-end}.stage-top .eyebrow{display:none}.camera-panel,body.is-playing .camera-panel{width:70px;bottom:45px}
}

body.is-finished #demo-controls,body.is-finished #mobile-controls{display:none!important}
@media(max-width:600px){.legend-row>.legend{display:none}}

/* Ten poses and ten results retain the single-screen layout. */
.pose-buttons{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}.pose-buttons button{padding:6px 0;min-width:0}
#results{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}#results span{min-width:0;padding:8px 2px;font-size:13px}
.pips{gap:4px}.pips i{width:9px;height:9px}
@media(max-width:600px){.pose-buttons{grid-template-columns:repeat(5,minmax(0,1fr))}.pips i{width:8px;height:8px}.round-box{gap:8px}}

#final-score{white-space:pre-line;line-height:1.15}#final-rank{font-size:16px;letter-spacing:3px}#finish[data-rank="S"] #final-rank{color:#ffe18a}