/* Shared layout; each player retains its own playback and progress state. */
#game{--side:clamp(320px,30vw,430px)}
#game .primary-controls{flex:none;padding:12px 18px;border-top:1px solid var(--line);background:#172033}
#game .primary-controls .primary{margin:0;min-height:48px;font-size:14px}
#game .replay-controls{padding:0 18px 10px;border-top:0}
#game .replay-controls button{min-height:44px;border-color:transparent;background:transparent;color:#bdc8db}
#game .replay-controls button:hover:not(:disabled){background:#ffffff08;border-color:#ffffff20}
#game .side-scroll{justify-content:safe center;scrollbar-gutter:stable}
#game #review{min-height:0}
#game #review .feedback{font-size:14px;line-height:1.55}
#game #continueNote{font-size:12px;line-height:1.45;margin-top:8px}
#game #finish .save-status{font-size:12px;line-height:1.45}
#game .side-footer{padding:10px}
#game #questionTitle{overflow-wrap:break-word}
#game #answers button{overflow-wrap:break-word;font-size:14px;line-height:1.4}
#game .question-heading-bar{min-width:0}
#game .inspect-scene{display:none}
#game .exit{display:grid}
#game .brand strong{overflow:hidden;text-overflow:ellipsis}
#game .scene-tools{position:absolute;inset:auto 5px 5px;z-index:6;display:flex;justify-content:flex-end;gap:5px;pointer-events:none}
#game .scene-tools>*{pointer-events:auto}

/* No reading task during movement: the complete road gets the full stage. */
#game[data-ui-panel="watchPanel"]{grid-template-columns:minmax(0,1fr)}
#game[data-ui-panel="watchPanel"] .sidebar{display:none}
#game[data-ui-panel="watchPanel"] .scene-view{grid-column:1/-1}

@media(max-height:560px) and (orientation:landscape){
  #game{padding:0 max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));grid-template-rows:48px minmax(0,1fr);gap:0 8px}
  #game .side-scroll,#game[data-phase="finished"] .side-scroll{padding:10px 12px}
  #game .side-footer{display:none}
  #game .primary-controls{padding:7px 10px}
  #game .primary-controls .primary{min-height:44px;padding:9px 10px;font-size:13px}
  #game .replay-controls{padding:0 10px 4px}
  #game .replay-controls button{font-size:12px;padding:5px;min-height:44px}
  #game #reviewTitle{font-size:18px;line-height:1.2;margin:6px 0}
  #game #review .feedback{font-size:13px;line-height:1.45;margin:8px 0}
  #game #continueNote{font-size:11px}
  #game #finish h1{font-size:23px;margin:6px 0 10px}
  #game .step-results{margin:10px 0;gap:8px}
  #game .step-results li{font-size:12px;line-height:1.4}
  #game .step-results small{font-size:10px}
  #game #finish .results{margin:10px 0}
  #game #finish .results strong{font-size:24px}
  #game #finish .results span{font-size:11px}
  #game #finish .save-status{font-size:11px;margin-bottom:6px}
  #game .rule-link{font-size:12px}
  #game .brand{max-width:32vw}
}

/* Full-width prompt, complete 16:9 scene, and all options beside the road. */
@media(max-width:960px) and (max-height:560px) and (orientation:landscape){
  #game{--side:236px;grid-template-columns:minmax(0,1fr) var(--side);grid-template-rows:48px minmax(0,1fr);padding-inline:max(6px,env(safe-area-inset-left)) max(6px,env(safe-area-inset-right));padding-bottom:max(6px,env(safe-area-inset-bottom));gap:0 8px}
  #game .hud{gap:6px}
  #game .hud .brand{max-width:30vw;flex:1}
  #game .brand strong{font-size:14px}
  #game .brand>span,#game .brand i{display:none}
  #game .route{min-width:44px;max-width:145px;flex:1;margin:0 4px 0 auto}
  #game .route>div{font-size:9px}
  #game .route>div span:last-child{display:none}
  #game .scene-view,#game .sidebar{border-radius:12px}
  #game .scene-label{display:none}
  #game[data-ui-panel="question"]{--side:216px;grid-template-rows:48px auto minmax(0,1fr)}
  #game[data-ui-panel="question"] .question-heading-bar{grid-column:1/-1;grid-row:2;padding:4px 6px 8px}
  #game[data-ui-panel="question"] #questionTitle{font-size:16px;font-weight:650;line-height:1.25;margin:0;letter-spacing:-.15px}
  #game[data-ui-panel="question"] .scene-view{grid-column:1;grid-row:3}
  #game[data-ui-panel="question"] .sidebar{grid-column:2;grid-row:3;background:transparent;border:0;border-radius:0;overflow:visible}
  #game[data-ui-panel="question"] .side-scroll{padding:0;scrollbar-gutter:auto;justify-content:safe center;overflow:auto}
  #game[data-ui-panel="question"] #question{flex-shrink:1}
  #game[data-ui-panel="question"] #question>.eyebrow,#game[data-ui-panel="question"] #question .question-hint{display:none}
  #game[data-ui-panel="question"] #answers{display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
  #game[data-ui-panel="question"] #answers button{grid-column:1;min-height:44px;font-size:13px;line-height:1.25;text-align:left;justify-content:flex-start;padding:6px 9px;border-radius:10px;background:#192337}
  #game .scene-tools .replay-controls{padding:0;border:0;flex:1;min-width:0}
  #game .scene-tools .replay-controls button{font-size:11px;min-height:44px;padding:5px;background:#101827e8;border:1px solid #ffffff35;color:#f2eefb}
  #game .inspect-scene{display:block;flex:none;min-height:44px;padding:8px 10px;border:1px solid #ffffff35;border-radius:10px;background:#101827e8;color:#f2eefb;font-size:12px}
  #game.inspecting-scene{grid-template-columns:minmax(0,1fr);grid-template-rows:48px minmax(0,1fr)}
  #game.inspecting-scene .question-heading-bar,#game.inspecting-scene .sidebar{display:none}
  #game.inspecting-scene .scene-view{grid-row:2;grid-column:1/-1}
  #game[data-ui-panel="watchPanel"]{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:620px) and (max-height:340px) and (orientation:landscape){
  #game,#game.inspecting-scene{grid-template-rows:44px minmax(0,1fr)}
  #game[data-ui-panel="question"]{grid-template-rows:44px auto minmax(0,1fr);--side:216px}
  #game .hud .brand{max-width:130px}
  #game .brand strong{font-size:12px}
  #game .route{max-width:80px}
  #game[data-ui-panel="question"] #questionTitle{font-size:15px;line-height:1.2}
  #game[data-ui-panel="question"] .question-heading-bar{padding-block:3px 6px}
  #game[data-ui-panel="question"] #answers{gap:4px}
  #game[data-ui-panel="question"] #answers button{font-size:12.5px;line-height:1.2;padding:5px 8px}
  #game[data-ui-panel="question"].inspecting-scene{grid-template-rows:44px minmax(0,1fr)}
}