/* Lesson furniture shares the story shelf's palette. Game artwork keeps its colours. */
body.play { background:#fbf7ee; color:#284b4e; }
.game-room { --room-purple:#2e8075; --room-purple-dark:#205e56; max-width:1280px; }
.game-room .ui-icon { width:23px; height:23px; display:inline-block; vertical-align:middle; flex:none; }
.game-room .lesson-icon, .game-room [data-lesson-sound] { display:inline-flex; align-items:center; }
.game-room-header { margin-bottom:14px; }
.game-room-header>.soft-button { display:flex; align-items:center; justify-content:center; gap:8px; background:#fffdf6; color:#54766b; border-color:#e3e5d8; box-shadow:0 3px 0 #e7e6d8; border-radius:18px; }
.game-room-title h1 { color:#284b4e; }
.game-room-title>span { color:#7b8a7b; }
.game-playfield { border-color:#e0e5d6; border-radius:27px; box-shadow:0 5px 0 #e6e5d8,0 12px 32px #31503b08; }
.game-room .game-prompt { background:#fffdf7; border-radius:26px 26px 0 0; padding:13px 20px; }
.game-room .game-prompt h2 { color:#284b4e; font-size:clamp(21px,2.3vw,28px); }
.game-room .game-prompt .question-word { text-decoration:underline; text-decoration-color:#c99a32; text-decoration-thickness:3px; text-underline-offset:5px; }
.game-room .game-prompt .question-focus { color:#205e56; background:#e8efdc; padding:0 .16em; border-radius:.2em; }
.game-room .game-prompt p { color:#718273; }
.game-room .replay-prompt { background:#e7f0e1; color:#427565; border-color:#d8e3d0; box-shadow:0 3px 0 #dce5d0; }
.game-room .replay-prompt:hover { background:#dcebd6; }
.game-room .stage { background:#edf2e5; padding:16px; }
.game-room .game-feedback { font-size:13px; color:#7a8675; padding-bottom:10px; }
.game-room .dots-row { min-height:29px; padding:7px 12px; }
.game-room .dots span { background:#e7eddf; border-color:#d9e2d0; color:#648173; }
.game-room .dots span.done { background:#65a58c; border-color:#65a58c; color:#fff; }
.game-room .communication-bar>button { background:#fffdf6; color:#597468; border-color:#e0e3d4; box-shadow:0 3px 0 #e7e5d8; }
.game-room .communication-bar>button:first-child { background:#fff2d4; border-color:#e9dcb6; color:#8a7541; }
.game-room .communication-note { color:#8a9380; }
.game-room :is(button,a,select,summary):focus-visible { outline-color:#d6a039; }
.game-room .speech-caption { color:#487567; }
/* A viewport or caption change must scale the tracing surface uniformly.
   Its bitmap ratio also keeps the existing pointer coordinate mapping intact. */
.game-room .trace-wrap canvas.trace-canvas { width:auto !important; height:auto !important; }

/* A more inviting opening page, with the Play button always before adult options. */
.game-room .stage:has(>#intro:not([hidden])) { background:#e6eedf; background-image:radial-gradient(ellipse at 12% 40%,#faf1d7,transparent 65%); }
.game-room #intro h2 { color:#2a4d4d; }
.game-room #intro .level-tag { border-color:#d5e1cc; color:#5a7764; background:#fffdf6c9; }
.game-room .intro-listen-note { color:#7a8776; }
.game-room .welcome-spark-two { color:#70a58e; }
.game-room #intro .card-art { box-shadow:0 9px 0 #cbd9bc,0 25px 35px #3e634415; }
.game-room .level-options, .game-room .level-options summary { color:#7a8675; }
.game-room #start-btn:hover { background:#267166; }

/* Give small rewards a scene and one clear action row, without repeating the
   same illustration in three places. Existing buttons stay in their game DOM. */
.game-room .snack-safari-game, .game-room .little-builder-game { background:#fffaf0; border-radius:22px; }
.game-room .snack-safari-game[data-phase="words"] .sf-controls { background:#fffdf8; border:1px solid #e8e5d6; border-radius:24px; padding:20px; gap:12px; }
.game-room .snack-safari-game[data-phase="words"] .sf-friend-mini { display:none; }
.game-room .sf-word-label { font-size:28px; color:#345c50; }
.game-room .sf-word-food { width:84px; height:76px; }
.game-room :is(.sf-next,.sf-serve,.lb-next) { background:#2e8075; color:#fffdf2; border-color:#2e8075; box-shadow:0 4px 0 #205f56; }
.game-room :is(.sf-hear,.lb-hear) { background:#fff3d5; color:#79653c; border-color:#e6d8b3; box-shadow:0 3px 0 #dfd2ae; }
@media(min-width:850px) {
  .game-room :is(.snack-safari-game,.little-builder-game) { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:center; gap:16px 24px; padding:18px; }
  .game-room :is(.sf-heading,.lb-project-heading) { grid-column:1/-1; }
  .game-room :is(.sf-world,.lb-world) { height:clamp(240px,35svh,390px); }
  .game-room :is(.sf-controls,.lb-controls) { width:100%; }
}

/* The finish itself fills the screen. Its keepsake can scroll at extreme zoom;
   the choice area is a separate grid row and never scrolls out of reach. */
.game-room #finish:not([hidden]) {
  position:fixed; inset:0; width:100%; height:100dvh; min-height:0; z-index:100;
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  background:#fbf7ee; background-image:radial-gradient(ellipse at 50% 15%,#e2edd8,transparent 70%);
  animation:none; backdrop-filter:none;
}
.game-room #finish .finish-card { display:grid; grid-template-rows:minmax(0,1fr) auto; width:min(100%,650px); height:100%; max-height:800px; min-height:0; gap:18px; padding:0; overflow:visible; }
.finish-summary { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; min-height:0; overflow-y:auto; padding:12px; }
.game-room #finish .finish-sticker { width:clamp(90px,19svh,160px); max-height:21svh; object-fit:contain; flex-shrink:0; animation:none; border-radius:30%; border-color:#fffaf0; box-shadow:0 6px 0 #e6d398; transform:rotate(-4deg); }
.game-room #finish .eyebrow { font-size:11px; color:#648475; letter-spacing:1.5px; }
.game-room #finish h2 { color:#2c544f; font-size:clamp(28px,4vw,44px); font-weight:550; line-height:1.1; }
.game-room #finish .goal { font-size:17px; line-height:1.45; max-width:460px; color:#73816c; }
.game-room #finish .big-stars { font-size:clamp(30px,5svh,52px); line-height:1; }
.finish-controls { width:100%; padding:18px; background:#fffdf8; border:1px solid #e1e5d4; border-radius:26px; box-shadow:0 5px 0 #e8e5d8; }
.game-room #finish .actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin:0; }
.game-room #finish .actions .btn { min-height:57px; font-size:18px; border-radius:17px; padding:12px; --btn-fg:#4c7163; --btn-bg:#eef3e5; border-color:#dbe4cf; box-shadow:0 3px 0 #dce4d2; }
.game-room #finish .actions .btn:first-child { grid-column:1/-1; --btn-bg:#2e8075; --btn-fg:#fffdf4; border-color:#2e8075; box-shadow:0 4px 0 #205f56; }
.game-room #finish .actions .btn-ghost { grid-column:auto; }
.game-room #finish .actions:has(>:nth-child(2):last-child)>:last-child { grid-column:1/-1; }
.game-room #finish .actions .btn:last-child:nth-child(4) { grid-column:1/-1; min-height:45px; background:transparent; box-shadow:none; }
.game-room .finish-stretch { margin-top:12px; }
.game-room .break-button { font-size:13px; color:#8b917e; min-height:44px; padding:6px; }
.game-room .stretch-note { margin:0; max-height:60px; overflow:auto; font-size:13px; }

@media(max-width:800px), (max-height:600px) {
  .game-room { padding-bottom:calc(94px + env(safe-area-inset-bottom)); }
  .game-room .communication-bar { position:fixed; z-index:40; inset:auto 0 0; padding:10px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); margin:0; background:#fffdf6f5; border-top:1px solid #e3e7d7; box-shadow:0 -6px 25px #39523308; gap:8px; flex-wrap:nowrap; }
  .game-room .communication-bar>button { min-height:49px; padding:10px 12px; font-size:14px; justify-content:center; flex:1; max-width:190px; }
  .game-room .communication-note { display:none; }
  .game-room-header>.soft-button { padding:10px; min-width:46px; min-height:46px; }
  .game-room .game-sound #sound-label { display:none; }
  .game-room-title h1 { font-size:20px; }
  .game-room-title>span { display:none; }
  .game-room .game-prompt { padding:10px 12px; min-height:72px; gap:10px; }
  .game-room .game-prompt h2 { font-size:20px; }
  .game-room .game-prompt p { font-size:12px; }
  .game-room .game-prompt img.host { width:36px; height:36px; }
  .game-room .replay-prompt { min-width:48px; min-height:48px; padding:7px; font-size:11px; }
  .game-room .stage { padding:9px; }
  .game-room .game-feedback { font-size:11px; }
  .game-room .speech-caption { font-size:17px; line-height:1.3; }
  .game-room :is(.sf-world,.lb-world) { height:clamp(95px,18svh,160px); }
  .game-room .snack-safari-game[data-phase="words"] .sf-controls { padding:16px 10px; }
  .game-room .sf-word-label { font-size:24px; }
  .game-room .sf-word-food { width:65px; height:62px; }

  .game-room:has(.snack-safari-game) #prompt-detail { display:none; }
  .game-room[data-listening="true"] .stage-inner { filter:none; }
  .game-room:has(#intro:not([hidden])) { padding-bottom:10px; }
  .game-room #intro:not([hidden]) { min-height:calc(100svh - 94px); padding:26px; }
  .game-room #intro .game-welcome { gap:24px; }
  .game-room #intro .welcome-art { width:min(38vw,23svh,180px); }
  .game-room #intro .welcome-content { gap:11px; }
  .game-room #intro h2 { font-size:clamp(28px,6vw,38px); }
  .game-room #start-btn { min-height:60px; font-size:26px; }
  .game-room #intro .intro-listen-note { font-size:14px; }
  .game-room #intro .level-tag { font-size:12px; }
  .game-room #intro .level-options summary { min-height:44px; padding:10px 0; }
  .game-room #finish:not([hidden]) { padding:12px max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
  .game-room #finish .finish-card { gap:10px; max-height:none; }
  .game-room #finish .finish-summary { gap:9px; padding:10px; }
  .game-room #finish .finish-controls { padding:14px; border-radius:23px; }
  .game-room #finish .actions { gap:9px; }
  .game-room #finish .actions .btn { min-height:52px; font-size:16px; padding:10px; }
  .game-room #finish .goal { font-size:15px; }
  .game-room #finish .eyebrow { font-size:9px; }
}
@media(max-width:600px) and (max-height:650px) and (orientation:portrait) {
  /* The actual food and plate are the learning controls on short phones;
     the decorative picnic returns for the thank-you moment. */
  .game-room:has(.sf-serve) .sf-world { display:none; }
  .game-room:has(.sf-serve) .game-feedback { display:none; }
}
@media(max-width:380px) {
  .game-room-header>a.soft-button>span { display:none; }
  .game-room .communication-bar>button { padding:9px 6px; font-size:12px; gap:5px; }
  .game-room .communication-bar .ui-icon { width:19px; height:19px; }
  .game-room #intro:not([hidden]) { padding:18px; }
  .game-room #intro .game-welcome { gap:18px; }
}
@media(orientation:landscape) and (max-height:600px) {
  .game-room #intro .game-welcome { grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:26px; }
  .game-room #intro .welcome-art { width:min(100%,48svh); }
  .game-room #intro .welcome-content { align-items:flex-start; text-align:left; gap:7px; }
  .game-room #intro h2 { font-size:28px; }
  .game-room #intro .actions { margin:0; }
  .game-room #start-btn { min-height:52px; font-size:24px; }
  .game-room #finish .finish-card { max-width:960px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); align-items:center; gap:24px; }
  .game-room #finish .finish-summary { max-height:100%; }
  .game-room #finish .finish-sticker { max-height:26svh; }
  .game-room #finish h2 { font-size:28px; }
  .game-room #finish .finish-controls { padding:10px; }
  .game-room #finish .finish-stretch { margin-top:4px; }
}

/* Picture quizzes use the available screen rather than a minimum page height.
   Flex layout recalculates when spoken captions or progress change. */
@media(max-width:800px), (max-height:600px) {
  #game-root[data-kind="quiz"]:not(:has(#intro:not([hidden]),#finish:not([hidden]))) { height:100dvh; min-height:0; grid-template-rows:auto minmax(0,1fr); padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
  #game-root[data-kind="quiz"]:not(:has(#intro:not([hidden]),#finish:not([hidden]))) .game-playfield { min-height:0; display:flex; flex-direction:column; }
  #game-root[data-kind="quiz"]:not(:has(#intro:not([hidden]),#finish:not([hidden]))) .stage { flex:1; height:auto; min-height:0; overflow:auto; }
  #game-root[data-kind="quiz"] .stage-inner { justify-content:safe center; }
  #game-root[data-kind="quiz"] .game-prompt, #game-root[data-kind="quiz"] .dots-row, #game-root[data-kind="quiz"] .game-feedback { flex-shrink:0; }
  .game-room .game-prompt:has(.speech-caption:not([hidden])) #prompt-detail { display:none; }
  .game-room .stage[data-scene="rhyme-time"] .stage-inner.has-panel { gap:10px; padding:0; }
  .game-room [data-scene="rhyme-time"] .rhyme-model-panel { min-height:76px; padding:8px; border-radius:19px; gap:7px; }
  .game-room .rhyme-model-panel .rhyme-model-picture { width:50px; height:50px; font-size:37px; border-radius:14px; }
  .game-room .rhyme-model-panel .rhyme-model-word { font-size:25px; }
  .game-room .rhyme-model-panel .rhyme-model-label { font-size:11px; }
  .game-room .rhyme-model-panel .hear-picture-options { min-height:44px; max-width:106px; font-size:11px; padding:7px; }
  .game-room [data-scene="rhyme-time"] .stage-inner.has-panel .choices { grid-template-columns:repeat(3,minmax(0,1fr)); min-height:0; gap:7px; padding:4px 2px 7px; }
  .game-room [data-scene="rhyme-time"] .stage-inner.has-panel .choices[data-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .game-room [data-scene="rhyme-time"] .choice.rhyme-choice { min-height:86px; padding:6px; border-width:2px; border-radius:18px; }
  .game-room [data-scene="rhyme-time"] .rhyme-choice .pic { flex-direction:column; justify-content:center; gap:6px; font-size:clamp(34px,10vw,64px); }
  .game-room [data-scene="rhyme-time"] .rhyme-choice .pic .emoji { width:1.4em; height:1.3em; }
  .game-room [data-scene="rhyme-time"] .rhyme-choice .pic .caption { font-size:18px; text-align:center; }
}
@media(orientation:landscape) and (max-height:600px) {
  .game-room .game-prompt { min-height:60px; padding:7px 12px; }
  .game-room .game-prompt .host { display:none; }
  .game-room .game-prompt h2 { font-size:18px; }
  .game-room .game-prompt .speech-caption { font-size:14px; }
  .game-room .game-prompt .instruction-cue-slot { display:none; }
  .game-room .game-feedback { display:none; }
  .game-room [data-scene="rhyme-time"] .rhyme-model-panel { min-height:0; min-width:130px; gap:6px; }
  .game-room .rhyme-model-panel .rhyme-model-picture { width:42px; height:42px; font-size:32px; }
  .game-room [data-scene="rhyme-time"] .rhyme-choice .pic { font-size:38px; }
}

/* Keep an unmistakable way home, even when the rest of the room is immersive. */
body.play .game-room-header > .game-exit {
  width:auto; min-width:110px; flex-shrink:0; gap:6px; padding:10px 14px;
  border-radius:30px; font-size:15px; font-weight:600;
  background:#fff4d5; color:#173b43; border:1px solid #fff4d5; box-shadow:0 2px 0 #ccb97b;
}
body.play .game-room-header > .game-exit > span { display:inline; }
body.play .game-room-header > .game-exit:hover { background:#ffe5a5; color:#173b43; }
body.play .game-room-title { flex:1; }
body.play .game-focus { gap:6px; width:auto; padding:10px 12px; font-size:13px; white-space:nowrap; }
body.play .game-focus .focus-label { display:inline; }
body.play .game-room-header .game-focus[aria-pressed="true"] .focus-expand,
body.play .game-room-header .game-focus:not([aria-pressed="true"]) .focus-shrink { display:none; }
body.play .game-room-header :is(a,button) { min-height:44px; }
body.immersive .game-room { --glass:#243e42; --glass-line:#839b96; }
body.immersive .game-room .communication-bar > button:first-child { background:#fff0c3; color:#4d3c16; border-color:#dbc987; }
body.immersive .game-room .game-prompt .speech-caption { color:#516960; }
body.immersive .game-room #start-btn { --btn-bg:#23695f; --btn-fg:#fffdf4; }
.game-room :is(.sf-next,.sf-serve,.lb-next) { background:#23695f; border-color:#23695f; color:#fffdf4; }
.game-room :is(.sf-hear,.lb-hear) { color:#59491e; }
.game-room #finish .actions .btn { --btn-fg:#34574b; }
.game-room #finish .actions .btn:first-child { --btn-bg:#23695f; --btn-fg:#fffdf4; }
body.immersive .game-room-header :is(a,button):focus-visible,
body.immersive .communication-bar > button:focus-visible { outline:3px solid #ffda77; outline-offset:3px; }

/* One control row, outside the artwork. Real buttons are moved here by
   activity-dock.js so Safari cannot clip them inside a scrolling scene. */
.game-controls { display:contents; }
.activity-actions[hidden] { display:none !important; }
.game-room .activity-actions { min-width:0; display:flex; align-items:stretch; gap:8px; }
.game-room .activity-actions > [data-docked] { position:static !important; inset:auto !important; margin:0; width:100%; max-width:none; min-width:0; flex:1; }
.game-room .activity-actions > :is(div,section)[data-docked] { display:flex; gap:8px; flex-wrap:wrap; align-items:stretch; justify-content:center; }
.game-room .activity-actions :is(button,a) { min-height:54px; min-width:44px; max-width:none; padding:10px 12px; border-radius:18px; font-size:15px; line-height:1.2; flex:1; justify-content:center; }
.game-room .activity-actions :is(.bubble-next,.bubble-check,.sf-next,.sf-serve,.lb-next,.rr-next) { color:#fffdf4; background:#205e56; border:2px solid #205e56; box-shadow:0 3px 0 #153f3b; }
.game-room .activity-actions :is(.sf-hear,.lb-hear,.rr-hear) { color:#51421f; background:#fff0c3; border-color:#cbb575; }
.game-room .activity-actions .bubble-number-choice { width:auto; color:#24464b; background:#fffdf4; border:2px solid #54766b; font-size:26px; }
.game-room .activity-actions .bubble-number-choice.wrong { border-color:#b53e4d; }

@media(max-width:800px), (max-height:600px) {
  .game-room .game-controls { position:fixed; z-index:45; inset:auto 0 0; display:grid; gap:8px; padding:10px max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); background:#fffdf6; border-top:1px solid #b8c7bd; }
  .game-room .game-controls .communication-bar { position:static; margin:0; padding:0; min-height:0; border:0; background:transparent; box-shadow:none; }
  .game-room[data-activity-actions] .game-controls { grid-template-columns:minmax(0,1fr) 76px; }
  .game-room[data-activity-actions] .game-controls .communication-bar :is(#again-btn,#done-btn,.communication-note) { display:none; }
  .game-room[data-activity-actions] .game-controls #help-btn { display:flex; flex-direction:column; gap:3px; padding:6px 3px; min-height:54px; font-size:11px; }
}
body.immersive .game-room .game-controls { grid-area:dock; position:static; inset:auto; z-index:auto; display:grid; gap:8px; padding:0; border:0; background:transparent; min-width:0; }
body.immersive .game-room .game-controls .communication-bar { grid-area:auto; min-width:0; }
body.immersive .game-room[data-activity-actions] .game-controls { grid-template-columns:minmax(0,1fr) 76px; }
body.immersive .game-room[data-activity-actions] .game-controls .communication-bar :is(#again-btn,#done-btn,.communication-note) { display:none; }
body.immersive .game-room[data-activity-actions] .game-controls #help-btn { display:flex; flex-direction:column; gap:3px; padding:6px 3px; min-height:54px; font-size:11px; }
body.immersive .game-room[data-activity-actions] .game-feedback { display:none; }
body.immersive .game-room .activity-actions :is(button,a) { backdrop-filter:none; -webkit-backdrop-filter:none; }
@media(orientation:landscape) and (max-height:600px) {
  body.immersive .game-room[data-activity-actions] .game-controls { grid-template-columns:minmax(0,1fr); }
  body.immersive .game-room[data-activity-actions] .game-controls #help-btn { flex-direction:row; min-height:44px; font-size:13px; }
  body.immersive .game-room .activity-actions :is(button,a) { min-height:44px; font-size:14px; }
}
@media(max-width:700px) {
  body.play .game-focus { width:46px; padding:10px; }
  body.play .game-focus .focus-label { display:none; }
  body.play .game-room-header > .game-exit { min-width:102px; padding-inline:10px; font-size:14px; }
  body.immersive .game-room-header { gap:6px; }
  body.immersive .game-room-title > span { display:none; }
  body.immersive .game-room-title h1 { font-size:16px; white-space:normal; line-height:1.15; }
}