/* Streamlined play (Sept 2026): one home with a Play button and six doors, the Arcade
   room, the grown-ups' library, a quieter play screen, the growing games' trail, and a
   few layout fixes. Loaded after the older sheets so these rules win without !important. */

/* ---- the child's home --------------------------------------------------------------- */
.kid-home .browse-nav { display: none; }
.kid-home .playground { max-width: 1180px; margin: 0 auto; padding: 4px 32px 20px; }
.kid-home .footer { margin-top: 26px; }

.today {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 14px 26px;
  padding: 18px 22px 18px 28px; margin-bottom: 20px; border-radius: 30px;
  background: linear-gradient(120deg, #fff3cf 0%, #f3f1dd 45%, #e3f1e2 100%);
  border: 1px solid #eadfbd; box-shadow: 0 7px 0 #e7dcbd, 0 18px 40px #2a4a4412;
}
.today-hello h1 {
  display: flex; align-items: center; gap: 12px; margin: 0; color: #24464b;
  font-size: clamp(28px, 3.3vw, 42px); font-weight: 600; letter-spacing: -1px; line-height: 1.1; white-space: nowrap;
}
.today-hello .hello-button { flex: none; }
.today-path { display: flex; align-items: center; justify-content: flex-end; gap: 22px; min-width: 0; }
.today-path[data-state="complete"] { flex-wrap: wrap; }

.path-stops {
  display: flex; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; min-width: 0;
  background: linear-gradient(90deg, #cbbf98 55%, transparent 0) 0 34px / 14px 3px repeat-x;
}
.path-stop { position: relative; display: grid; justify-items: center; gap: 5px; flex: none; }
.path-stop .stop-art {
  display: block; width: 62px; height: 62px; border-radius: 50%; overflow: hidden; background: #fff;
  border: 4px solid #fffdf6; box-shadow: 0 3px 0 #d8ccaa;
}
.path-stop .stop-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.path-stop.now .stop-art {
  width: 84px; height: 84px; border-color: #ffd25c;
  box-shadow: 0 0 0 5px #ffd25c55, 0 4px 0 #d9b24a; animation: stop-bob 2.2s ease-in-out infinite;
}
.path-stop.done .stop-art { filter: saturate(.55); opacity: .72; }
.path-stop .stop-tick {
  position: absolute; top: -3px; right: -3px; display: none; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: #2e8076; color: #fff; border: 2px solid #fff; font-size: 14px; font-weight: 700;
}
.path-stop.done .stop-tick { display: grid; }
.path-stop .stop-name { font-size: 13px; line-height: 1; color: #5a7770; white-space: nowrap; }
.path-stop.now .stop-name { color: #24464b; font-weight: 600; }
@keyframes stop-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.play-big {
  display: inline-flex; align-items: center; gap: 14px; flex: none; min-height: 84px; padding: 0 38px 0 16px;
  border: 0; border-radius: 44px; background: #2e8076; color: #fffdf2; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 34px; font-weight: 600; letter-spacing: -.5px;
  box-shadow: 0 8px 0 #1f5e56, 0 16px 30px #1f5e5640; transition: transform .12s, box-shadow .12s;
}
.play-big .play-icon {
  display: grid; place-items: center; width: 56px; height: 56px; padding-left: 5px; border-radius: 50%;
  background: #fffdf2; color: #2e8076; font-size: 26px;
}
.play-big:hover { transform: translateY(-2px); box-shadow: 0 10px 0 #1f5e56, 0 18px 32px #1f5e5645; }
.play-big:active { transform: translateY(5px); box-shadow: 0 3px 0 #1f5e56; }
.today-path[data-state="new"] .play-big, .today-path[data-state="started"] .play-big { animation: play-breathe 2.6s ease-in-out infinite; }
@keyframes play-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
.path-done { flex-basis: 100%; margin: 0; text-align: right; color: #2e6b5f; font-size: 17px; font-weight: 600; }

.doors, .room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.room-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.door, .room-tile {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10.5; border-radius: 26px;
  background: var(--door-bg, #e9efe0); border: 4px solid #fffdf6; text-decoration: none; color: #fff;
  box-shadow: 0 6px 0 #d9d2bb, 0 14px 28px #2a4a4414; transition: transform .15s, box-shadow .15s;
}
.room-tile { aspect-ratio: 1; }
.door:hover, .room-tile:hover { transform: translateY(-3px); box-shadow: 0 9px 0 #d9d2bb, 0 18px 32px #2a4a441c; }
.door:active, .room-tile:active { transform: translateY(3px) scale(.985); box-shadow: 0 3px 0 #d9d2bb; }
.door-art { position: absolute; inset: 0; display: block; }
.door-art > img, .door-art > svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.door-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 12px;
  background: linear-gradient(180deg, transparent, #10302dcc 70%); color: #fffdf2;
  font-size: clamp(20px, 2.3vw, 28px); font-weight: 600; letter-spacing: -.4px; text-shadow: 0 2px 6px #0005;
}
.room-tile .door-label { font-size: clamp(16px, 1.8vw, 22px); padding-top: 26px; }

/* the Arcade room and the grown-ups' library */
.arcade-room-page .playground { max-width: 1180px; margin: 0 auto; padding-top: 4px; display: block; }
.room-hello h1 {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; color: #24464b;
  font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -1px;
}
.library-note { margin: 10px 0 0; max-width: 720px; color: #5f7771; font-size: 14px; }
.grownup-library { margin: 16px 0; padding: 14px 16px; border-radius: 18px; background: #f6f3e6; border: 1px solid #e6dfc6; }
.grownup-library p { margin: 6px 0 12px; }
.grownup-library .cluster { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 900px) {
  .today { grid-template-columns: 1fr; justify-items: stretch; padding: 16px 18px; }
  .today-path { justify-content: space-between; }
  .room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kid-home .playground, .arcade-room-page .playground { padding: 2px 14px 96px; }
  .today { gap: 12px; margin-bottom: 14px; border-radius: 24px; }
  .today-hello h1 { font-size: 27px; }
  .today-path { flex-direction: column; align-items: stretch; gap: 14px; }
  .path-stops { justify-content: space-between; background-position: 0 26px; }
  .path-stop .stop-art { width: 48px; height: 48px; border-width: 3px; }
  .path-stop.now .stop-art { width: 64px; height: 64px; }
  .path-stop .stop-name { font-size: 11px; }
  .play-big { justify-content: center; min-height: 76px; font-size: 30px; padding: 0 28px 0 12px; }
  .play-big .play-icon { width: 50px; height: 50px; }
  .path-done { text-align: center; }
  .doors, .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .door, .room-tile { aspect-ratio: 1; border-radius: 22px; border-width: 3px; }
  .door-label { font-size: 20px; padding: 24px 12px 10px; }
  .room-tile .door-label { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .path-stop.now .stop-art, .today-path .play-big { animation: none; }
}
body[data-quiet="true"] .path-stop.now .stop-art, body[data-quiet="true"] .today-path .play-big { animation: none; }

/* ---- the play screen: fewer words, bigger targets -------------------------------------- */
body.play .game-room #sound-label, body.play .game-room-header .game-focus .focus-label { display: none; }
body.play .game-room-header :is(.game-sound, .game-focus) { min-width: 52px; min-height: 52px; justify-content: center; }
.game-room #intro .level-tag, .game-room #intro .intro-listen-note, .game-room #intro .intro-challenge { display: none; }
.game-room .level-options summary { font-size: 12px; opacity: .8; }
.game-room .communication-note { display: none; }
.game-room[data-kind="quiz"] #again-btn { display: none; }
.game-room .replay-prompt > span:not(.emoji) { display: none; }
.game-room .replay-prompt { min-width: 60px; min-height: 60px; justify-content: center; border-radius: 30px; }
.game-room .replay-prompt .ui-icon { width: 28px; height: 28px; }
@media (pointer: coarse) { .game-room .game-feedback[data-hint="keyboard"] { visibility: hidden; } }

/* a second miss shows the answer and keeps it lit until it is tapped */
.choice.modelled { border-color: #f2b92f; box-shadow: 0 0 0 7px #ffd25c66, 0 6px 0 #e0a92a; }
.choice.modelled.correct { box-shadow: none; }

/* the growing games' little trail (start and finish cards) */
.quest-trail { --trail: 0%; display: flex; align-items: center; gap: 10px; width: min(100%, 360px); margin: 6px 0 2px; }
.finish-card .quest-trail { margin: 8px auto 4px; }
.quest-trail .trail-line {
  position: relative; flex: 1; height: 14px; border-radius: 8px; background: #e5dfca;
  box-shadow: inset 0 2px 0 #0000000f;
}
.quest-trail .trail-fill {
  position: absolute; inset: 0 auto 0 0; width: var(--trail); min-width: 14px; border-radius: 8px;
  background: linear-gradient(90deg, #8fd3a6, #2e8076); transition: width 1.3s cubic-bezier(.3, 1.3, .5, 1);
}
.quest-trail .trail-host {
  position: absolute; top: 50%; left: var(--trail); font-size: 32px; line-height: 1;
  transform: translate(-50%, -62%); filter: drop-shadow(0 2px 0 #0002); transition: left 1.3s cubic-bezier(.3, 1.3, .5, 1);
}
.quest-trail .trail-star { font-size: 26px; line-height: 1; }
.quest-trail.climbed .trail-host { animation: trail-hop .5s ease-in-out 1.5s 2; }
@keyframes trail-hop { 50% { transform: translate(-50%, -95%); } }
body.immersive .game-room #intro .quest-trail .trail-line { background: #ffffff2e; }

/* finish: one big next step, then home; the small extras sit underneath */
.finish-card .finish-next { font-size: 22px; }
/* The keepsake (stars, trail, "Tell someone what you did") and the next step share one screen:
   a tall screen uses its height, and a landscape tablet puts the two side by side. */
.game-room #finish .finish-card { max-height: 1040px; }
@media (orientation: landscape) and (min-width: 960px) and (min-height: 601px) {
  .game-room #finish .finish-card {
    width: min(100%, 1040px); grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    grid-template-rows: minmax(0, 1fr); align-items: center; gap: 28px;
  }
  .game-room #finish .finish-summary { max-height: 100%; }
}
.finish-card .finish-stretch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; }
.finish-together { font-size: 14px; color: #3f6f64; text-decoration: underline; text-underline-offset: 3px; padding: 10px 4px; }
.finish-step .path-stops, .practice-path-note .path-stops { justify-content: center; background-position: 0 21px; }
.path-stops.compact { gap: 8px; }
.path-stops.compact .path-stop .stop-art { width: 44px; height: 44px; border-width: 3px; }
.path-stops.compact .path-stop.now .stop-art { width: 54px; height: 54px; animation: none; }
.practice-path-note { margin: 4px 0 0; }

/* ---- layout fixes --------------------------------------------------------------------- */
/* Echo Echo: three pads sit in the middle, not in the first three of four columns. */
@media (orientation: landscape) {
  .pads { grid-template-columns: repeat(auto-fit, minmax(120px, 210px)); justify-content: center; }
}
/* How Many?: a size-contained field needs the panel's height, or its pictures shrink to a sliver;
   and a small group stays together instead of spreading across the page. */
.count-panel > .field { align-self: stretch; }
.count-panel > .field.count-row { grid-template-columns: repeat(var(--cols, 5), minmax(0, 170px)); }
/* Count It: bigger things to touch on a tablet. */
@media (min-width: 900px) and (min-height: 640px) {
  .count-learning .count-board { --count-cell: min(104px, 12vmin, calc((100vw - 180px) / var(--count-cols, 5) - 6px)); }
}
/* Fix the Number Train inside a growing game: there is no "of 6". */
.game-room[data-rung] .rail-eyebrow { display: none; }
/* More or Less turns its word strip off (counting words would flash in it), so its question
   stays in the bubble; game-voice.css had hidden both and left no question on screen. */
#game-root.game-room:has(.compare-game) .game-prompt #bubble-text {
  position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal;
}