/* The game is the main event. Shared frame; individual activities still own
   their canvas and any content-driven heights. Loaded only on play pages. */
body.play {
  background: #f5f4fa;
  background-image: radial-gradient(ellipse at 8% 0%, #e8f5f9 0, transparent 48%);
}
.game-room {
  --room-purple: #6552c8;
  --room-purple-dark: #48339c;
  --room-feedback-space: 0px;
  width: 100%; max-width: 1440px;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.game-room:has(.game-feedback:not(:empty)) { --room-feedback-space: 34px; }
.game-room-header { min-height: 52px; margin-bottom: 12px; gap: 16px; }
.game-room-header > .soft-button {
  min-height: 48px; padding: 10px 16px; background: #fff;
  border: 1px solid #e2e4ed; border-radius: 16px; font-size: 15px;
  box-shadow: 0 2px 0 #e0e4ed; color: #4c5977;
}
.game-room-title h1 { margin: 0; font-size: clamp(20px, 2.4vw, 27px); font-weight: 600; color: #303c60; }
.game-room-title > span { font-size: 12px; color: #68718c; }
.game-playfield {
  min-width: 0; background: #fff; border: 1px solid #dedfec; border-radius: 30px;
  box-shadow: 0 5px 0 #e0dfea, 0 16px 40px #30356008;
}
.game-room .game-prompt {
  min-height: 86px; padding: 12px 22px; gap: 14px; border: 0;
  border-radius: 29px 29px 0 0; background: #fff;
}
.game-room .game-prompt .host { font-size: 38px; line-height: 1; }
.game-room .game-prompt img.host { width: 48px; height: 48px; }
.game-room .game-prompt h2 { font-size: clamp(21px, 2.8vw, 30px); font-weight: 550; color: #303c60; }
.game-room .game-prompt p { font-size: 14px; color: #63718b; }
.game-room .instruction-cue-slot { min-height: 0; margin-bottom: 0; }
.game-room .instruction-cue-slot:has(.instruction-cue:not([hidden])) { margin-bottom: 4px; }
.game-room .replay-prompt {
  min-width: 100px; min-height: 52px; padding: 10px 16px; border-radius: 16px;
  background: #eeebfc; color: #51409e; font-size: 15px; font-weight: 500;
  border: 1px solid #dfd8f6; box-shadow: 0 3px 0 #ded7f1;
}
.game-room .replay-prompt.is-speaking { background: #fff0b5; color: #604a15; border-color: #ebce77; animation: none; }
.game-room:is([data-prompt-state="waiting"], [data-prompt-state="speaking"]) .game-prompt {
  background: #fffdf3; box-shadow: inset 0 -3px #efd270;
}
.game-room .stage {
  border: 0; border-radius: 0; box-shadow: none; padding: clamp(12px, 1.8vw, 24px);
  background: #eef3fb;
}
/* Some activities grow with their content. Do not force them into a fixed
   viewport or resize their internal canvases through the shared frame. */
.game-room .stage:not([data-scene="bubble-buddies"]):not([data-scene="little-builder"]):not([data-scene="snack-safari"]):not([data-scene="rainbow-rally"]):not(:has(.count-learning)) {
  height: clamp(320px, calc(100svh - 310px - var(--room-feedback-space)), 800px);
}
.game-room .dots-row { min-height: 36px; padding: 10px 16px; }
.game-room .dots-row:has(.dots:empty) { display: none; }
.game-room .dots { gap: 8px; }
.game-room .dots span { width: 16px; height: 16px; font-size: 10px; border-width: 1px; }
.game-room .dots span.now { width: 28px; border-radius: 9px; box-shadow: none; background: var(--skill-soft); border: 2px solid var(--skill); }
.game-room .game-feedback { margin: 0; min-height: 0; padding: 0 16px 10px; font-size: 15px; }
.game-room .game-feedback:empty { display: none; }
.game-room .communication-bar { margin: 12px 0 0; padding: 0; border: 0; gap: 10px; }
.game-room .communication-bar > button {
  min-height: 50px; padding: 10px 18px; border-radius: 16px;
  border-color: #dee0ea; box-shadow: 0 2px 0 #dedfe9; color: #53617a; font-size: 15px;
}
.game-room .communication-bar > button:first-child { background: #fff7df; border-color: #ead9aa; color: #6b5528; }
.game-room .communication-note { font-size: 12px; color: #68718c; }
.game-room :is(button, a, summary, select):focus-visible { outline: 3px solid #6552c8; outline-offset: 4px; }

/* The opening screen is the whole play surface, without a second card inside.
   Hide the duplicate instruction and inactive controls until Play is pressed. */
.game-room:has(#intro:not([hidden])) :is(.game-prompt, .dots-row, .game-feedback, .communication-bar) { display: none; }
.game-room .stage:has(> #intro:not([hidden])) {
  height: auto; min-height: 0; padding: 0; border-radius: 29px;
  background: #eeedfb;
  background-image: radial-gradient(ellipse at 18% 55%, #dceefb 0%, transparent 58%);
}
.game-room .stage:has(> #intro:not([hidden])) > .stage-inner { display: none; }
.game-room #intro:not([hidden]) {
  position: relative; min-height: clamp(480px, calc(100svh - 116px), 820px);
  padding: clamp(24px, 5vw, 72px); background: transparent; backdrop-filter: none;
  animation: none;
}
.game-room #intro .game-welcome {
  width: min(100%, 1120px); max-height: none; padding: 0; border-radius: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 5vw, 76px);
  overflow: visible; box-shadow: none; background: transparent; text-align: left;
}
.welcome-art { position: relative; width: 100%; display: grid; place-items: center; isolation: isolate; }
.welcome-art::before {
  content: ""; position: absolute; width: 104%; aspect-ratio: 1; border-radius: 50%;
  background: #ffffff85; z-index: -1; transform: rotate(-12deg) scaleY(.91);
}
.game-room #intro .card-art {
  display: block; width: min(100%, 400px); height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 26%; border: 8px solid #fff; transform: rotate(-5deg);
  box-shadow: 0 10px 0 #c9d7e7, 0 25px 35px #4c6a8b15;
}
.welcome-spark { position: absolute; color: #edb246; font-size: clamp(38px, 5vw, 64px); line-height: 1; z-index: 1; }
.welcome-spark-one { top: -5%; right: 0; transform: rotate(12deg); }
.welcome-spark-two { bottom: 0; left: 0; color: #8d7cdb; font-size: clamp(30px, 4vw, 48px); transform: rotate(-10deg); }
.welcome-content { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; min-width: 0; }
.game-room #intro .level-tag {
  border: 1px solid #d4cfee; background: #ffffffb0; color: #5e518e;
  font-size: 14px; font-weight: 500; padding: 7px 13px; line-height: 1.35;
}
.game-room #intro h2 { font-size: clamp(32px, 4.4vw, 58px); line-height: 1.06; font-weight: 600; letter-spacing: -.025em; color: #30345f; text-wrap: balance; }
.game-room .intro-listen-note { margin: 0; justify-content: flex-start; color: #596580; font-size: 17px; gap: 9px; }
.game-room #intro .actions { display: block; margin-top: 8px; }
.game-room #start-btn {
  --btn-bg: var(--room-purple); --btn-shadow: var(--room-purple-dark); --btn-fg: #fff;
  min-height: 78px; border-radius: 22px; font-size: 30px; font-weight: 600;
  box-shadow: 0 6px 0 var(--room-purple-dark), 0 12px 20px #574c8d17;
  gap: 16px; transition: transform .12s, box-shadow .12s;
}
.game-room #start-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--room-purple-dark); }
.game-room #start-btn .emoji { font-size: 0; width: 32px; height: 32px; display: grid; place-items: center; }
.game-room #start-btn .emoji::before { content: ""; border-left: 21px solid currentColor; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 5px; }
.game-room #start-btn:disabled .emoji::before { border: 3px solid #ffffff77; border-top-color: #fff; border-radius: 50%; width: 25px; height: 25px; }
.game-room .level-options { margin-top: 2px; color: #5d6684; }
.game-room .level-options summary { color: #646c86; font-size: 13px; padding: 12px 0; min-height: 48px; }
.game-room .level-options[open] { padding: 0 14px 14px; background: #ffffffb8; border-radius: 15px; }
.game-room .level-options select { min-height: 48px; width: 100%; }

/* Completed rounds get a calm, scrollable finish, including on short phones. */
.game-room:has(#finish:not([hidden])) :is(.game-prompt, .dots-row, .game-feedback, .communication-bar) { display: none; }
.game-room .stage:has(> #finish:not([hidden])) { height: auto; min-height: 0; padding: 0; border-radius: 29px; }
.game-room .stage:has(> #finish:not([hidden])) > .stage-inner { display: none; }
.game-room #finish:not([hidden]) { position: relative; min-height: min(660px, calc(100svh - 110px)); background: #f2effc; padding: 28px 18px; backdrop-filter: none; }
.game-room #finish .finish-card { max-height: none; overflow: visible; box-shadow: none; background: transparent; }
.game-room #finish .actions .btn {
  --btn-bg: #fff; --btn-shadow: #ded9ed; --btn-fg: #514575;
  border: 1px solid #ded9ed; min-height: 56px; box-shadow: 0 3px 0 #ded9ed;
}
.game-room #finish .actions .btn:first-child {
  --btn-bg: var(--room-purple); --btn-shadow: var(--room-purple-dark); --btn-fg: #fff;
  border-color: transparent; box-shadow: 0 5px 0 var(--room-purple-dark);
}

@media (hover: hover) and (pointer: fine) {
  .game-room #start-btn:hover { background: #5945ba; transform: translateY(-2px); }
  .game-room .replay-prompt:hover { background: #e3ddfb; }
}
@media (max-width: 700px) {
  .game-room { padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
  .game-room-header { min-height: 48px; margin-bottom: 10px; gap: 8px; }
  .game-room-header > .soft-button { min-height: 48px; font-size: 13px; padding: 10px 12px; border-radius: 14px; }
  .game-room-title h1 { font-size: 20px; }
  .game-room-title > span { display: none; }
  .game-room .game-sound { width: 48px; height: 48px; }
  .game-playfield { border-radius: 24px; }
  .game-room .game-prompt { min-height: 90px; padding: 12px; gap: 10px; border-radius: 23px 23px 0 0; }
  .game-room .game-prompt .host { font-size: 30px; }
  .game-room .game-prompt img.host { width: 38px; height: 38px; }
  .game-room .game-prompt h2 { font-size: 21px; }
  .game-room .game-prompt p { font-size: 12px; }
  .game-room .replay-prompt { min-width: 56px; min-height: 54px; padding: 8px; flex-direction: column; gap: 3px; font-size: 12px; }
  .game-room .replay-prompt span:not(.emoji) { display: inline; }
  .game-room .stage { padding: 12px; }
  .game-room .communication-bar { flex-wrap: nowrap; gap: 7px; }
  .game-room .communication-bar > button { flex: 1; justify-content: center; min-height: 52px; padding: 10px 7px; font-size: 14px; gap: 6px; }
  .game-room .communication-note { display: none; }
  .game-room #intro:not([hidden]) { min-height: calc(100svh - 106px); padding: 28px 24px; }
  .game-room #intro .game-welcome { grid-template-columns: 1fr; gap: 28px; max-width: 440px; }
  .welcome-art { width: min(65%, 230px); margin: 0 auto; }
  .game-room #intro .card-art { width: 100%; border-width: 6px; }
  .welcome-content { align-items: center; text-align: center; gap: 12px; }
  .game-room #intro h2 { font-size: clamp(30px, 8vw, 44px); }
  .game-room .intro-listen-note { font-size: 15px; }
  .game-room #start-btn { min-height: 66px; font-size: 26px; border-radius: 19px; }
  .game-room .level-options { text-align: center; }
  .game-room .level-options summary { list-style-position: inside; }
  .game-room .stage:has(> :is(#intro, #finish):not([hidden])) { border-radius: 23px; }
}
@media (max-width: 380px) {
  .game-room-header > .soft-button { padding: 10px; }
  .game-room-title h1 { font-size: 18px; }
  .game-room .game-prompt .host { display: none; }
  .game-room .communication-bar > button { font-size: 13px; padding-inline: 5px; }
  .game-room .communication-bar > button .emoji { font-size: 17px; }
  .game-room #intro:not([hidden]) { padding: 26px 18px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .game-room { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .game-room-header { min-height: 48px; margin-bottom: 8px; }
  .game-room-title > span { display: none; }
  .game-room .game-prompt { min-height: 66px; padding-block: 8px; }
  .game-room .game-prompt h2 { font-size: 20px; }
  .game-room .game-prompt p { font-size: 12px; }
  .game-room .instruction-cue { font-size: 11px; }
  .game-room .stage:not([data-scene="bubble-buddies"]):not([data-scene="little-builder"]):not([data-scene="snack-safari"]):not([data-scene="rainbow-rally"]):not(:has(.count-learning)) { height: max(160px, calc(100svh - 252px)); }
  /* Drawing guides, full memory boards and arcade controls need real space.
     Let short pages scroll instead of clipping these learning surfaces. */
  .game-room .stage:is([data-scene="letter-trace"], [data-scene="number-trace"]) { min-height: 320px; }
  .game-room .stage[data-scene="memory-match"] { min-height: 210px; }
  .game-room .stage:has(> .stage-inner > :is(.hop-scene, .snake-scene, .block-scene)) { min-height: 260px; }
  .game-room .dots-row { min-height: 26px; padding-block: 5px; }
  .game-room .communication-bar { margin-top: 8px; }
  .game-room .communication-bar > button { min-height: 48px; padding-block: 8px; }
  .game-room .stage:has(> #intro:not([hidden])), .game-room .stage:has(> #finish:not([hidden])) { height: auto; }
  .game-room #intro:not([hidden]) { min-height: calc(100svh - 86px); padding: 22px 36px; }
  .game-room #intro .game-welcome { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); max-width: 850px; gap: 40px; }
  .welcome-art { width: min(100%, 230px); }
  .welcome-content { gap: 8px; align-items: flex-start; text-align: left; }
  .game-room #intro h2 { font-size: 32px; }
  .game-room #intro .level-tag { font-size: 12px; padding: 5px 10px; }
  .game-room #intro .intro-listen-note { font-size: 14px; }
  .game-room #start-btn { min-height: 56px; font-size: 24px; }
  .game-room .level-options summary { padding: 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .game-room #start-btn { transition: none; }
}
html.quiet .game-room #start-btn, .game-room[data-quiet="true"] #start-btn { transition: none; }