/* Keep the spoken cue and the activity on one surface. The dock remains outside
   the scene so Safari's browser bars cannot hide the next action. */
#game-root .game-prompt { gap:12px; }
#game-root .game-prompt:has(.speech-caption:not([hidden])) #bubble-text {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
#game-root .game-prompt:has(.speech-caption:not([hidden])) #prompt-detail { display:none; }
#game-root .game-prompt .speech-caption {
  position:relative; margin:0; color:#173b43; font-size:clamp(23px,2.8vw,34px);
  line-height:1.3; font-weight:600; letter-spacing:0; max-height:none; overflow:visible;
}
#game-root .speech-caption .cap-part[hidden] { display:none; }
#game-root .speech-caption .cap-word { padding:0 .06em; color:#173b43; border:0; }
#game-root .speech-caption .cap-word[data-question] { text-decoration:underline; text-decoration-color:#bd8617; text-decoration-thickness:3px; text-underline-offset:5px; }
#game-root .speech-caption .cap-word.said { color:#173b43; }
#game-root .speech-caption .cap-word.now { color:#142f35; background:#ffda68; box-shadow:0 2px 0 #bd8617; font-weight:600; }
#game-root[data-listening="true"] .stage-inner { opacity:1; filter:none; }
#game-root .write-room :is(.trace-wrap,.write-side).is-narrating { outline:3px solid #bd8617; outline-offset:2px; border-radius:16px; }

body.immersive #game-root {
  grid-template-columns:minmax(0,1fr); column-gap:0; row-gap:0;
  grid-template-rows:auto auto minmax(0,1fr) auto auto auto !important;
  grid-template-areas:"head" "prompt" "stage" "dots" "feedback" "dock";
}
body.immersive #game-root .game-room-header { margin-bottom:8px; }
body.immersive #game-root .game-prompt {
  display:flex; align-items:center; align-self:stretch; gap:10px; margin:0; padding:12px;
  background:#fffdf7; border:0; border-radius:20px 20px 0 0; box-shadow:none; overflow:visible; max-height:none;
}
body.immersive #game-root .game-prompt .host { display:none; }
body.immersive #game-root .game-prompt .prompt-text { min-width:0; }
body.immersive #game-root .instruction-cue-slot { position:static; justify-content:flex-start; margin:0 0 4px; }
body.immersive #game-root .instruction-cue-slot:has([hidden]) { display:none; }
body.immersive #game-root .instruction-cue { min-height:20px; padding:0; background:transparent; border:0; box-shadow:none; color:#31584d; font-size:11px; }
body.immersive #game-root[data-prompt-state="muted"] .instruction-cue-slot { display:none; }
body.immersive #game-root .stage { border-radius:0 0 20px 20px; box-shadow:none; margin:0; }
body.immersive #game-root .replay-prompt { width:44px; min-width:44px; height:44px; min-height:44px; }
body.immersive #game-root .dots-row { padding:8px 0 5px; }
body.immersive #game-root .game-feedback { margin:0 0 6px; }
body.immersive #game-root .game-controls { margin-top:8px; }
body.immersive #game-root .communication-bar { flex-direction:row; }
body.immersive #game-root .communication-bar > button { width:auto; flex:1; }
body.immersive #game-root:has(#intro:not([hidden]),#finish:not([hidden])) .game-prompt { display:none; }
body.immersive #game-root .stage:has(#intro:not([hidden]),#finish:not([hidden])) { border-radius:20px; }

@media(max-width:600px) {
  #game-root .game-prompt .speech-caption { font-size:22px; }
}
@media(max-height:600px) and (orientation:landscape) {
  body.immersive #game-root {
    grid-template-columns:minmax(0,1fr) 142px; column-gap:10px;
    grid-template-rows:auto auto minmax(0,1fr) auto auto !important;
    grid-template-areas:"head head" "prompt dock" "stage dock" "dots dock" "feedback dock";
  }
  body.immersive #game-root .game-prompt { padding:6px 10px; min-height:52px; }
  #game-root .game-prompt .speech-caption { font-size:20px; }
  body.immersive #game-root .game-controls { align-self:center; margin:0; }
  body.immersive #game-root .communication-bar { flex-direction:column; }
  body.immersive #game-root .communication-bar > button { flex:none; width:100%; min-height:44px; }
}