/* Toddler Academy's child-facing navigation shell. Game-specific styles
   remain in index.html so this layer can evolve without touching gameplay. */
:root {
  --kid-ink: #18365f;
  --kid-soft: #526b86;
  --kid-paper: #fffdf8;
  --kid-cream: #fff8e8;
  --kid-orange: #f45b32;
  --kid-orange-dark: #bc351c;
  --kid-green: #238a56;
  --kid-blue: #2b76c8;
  --kid-line: rgba(24, 54, 95, 0.12);
  --kid-shadow: 0 18px 46px rgba(42, 79, 110, 0.14);
  --kid-shadow-small: 0 8px 20px rgba(42, 79, 110, 0.11);
  --kid-display: "Avenir Next Rounded", "Nunito", "Trebuchet MS", sans-serif;
}

/* Story-led play paths share the same tactile art and quiet visual rhythm. */
.journeys-section { margin: 36px 0; }
body:has(.play-screen, .pack-screen, .overlay) .ta-page,
body:has(.play-screen, .pack-screen, .overlay) > footer,
body:has(.play-screen, .pack-screen, .overlay) .ta-skip { display: none; }
.journey-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.journey-card { position: relative; border: 3px solid #fff; border-radius: 30px; padding: 20px; color: var(--kid-ink); box-shadow: 0 7px 0 #183c5220; cursor: pointer; text-align: center; min-height: 230px; }
.journey-card strong { display: block; font-size: clamp(20px, 2vw, 27px); }
.journey-art { position: relative; display: block; height: 140px; }
.journey-art .world-art-piece { position: absolute; width: 95px; height: 95px; top: 24px; left: 50%; }
.journey-art .world-art-piece--1 { width: 140px; height: 140px; top: 0; transform: translateX(-50%); z-index: 2; }
.journey-art .world-art-piece--2 { transform: translateX(-120%) rotate(-12deg); }
.journey-art .world-art-piece--3 { transform: translateX(20%) rotate(12deg); }
.journey-dots { display: flex; justify-content: center; gap: 8px; margin: 12px 0 0; }
.journey-dots i { width: 13px; height: 13px; border: 2px solid #64748b; border-radius: 50%; background: #fff9; }
.journey-dots .is-done { background: #23765b; border-color: #23765b; }
.journey-dots .is-current { background: #ffbd59; border-color: #966017; }
.comfort-button { min-height: 56px; padding: 12px 20px; border: 2px solid #c5d9d2; border-radius: 18px; background: #f3faf5; color: #203f40; font: inherit; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.comfort-button .ui-icon { width: 22px; height: 22px; }
.subject-worlds { margin: 30px 0; }
.subject-worlds > summary { cursor: pointer; min-height: 56px; padding: 18px; font-weight: 800; color: var(--kid-ink); border-radius: 20px; background: #fff9; }
.pack-screen { max-width: 1060px; width: 100%; }
.pack-welcome { text-align: center; padding: 26px 12px; color: var(--kid-ink); }
.pack-welcome h1 { font-size: clamp(28px, 4vw, 48px); margin: 8px; }
.pack-welcome p, .pack-note { color: #526775; text-align: center; }
.level-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.level-door { position: relative; min-width: 0; border: 3px solid #e1ebdf; border-radius: 32px; background: linear-gradient(#fff, #f7f9ed); padding: 22px 15px; box-shadow: 0 8px 0 #d5e4df; color: var(--kid-ink); cursor: pointer; }
.level-number { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; color: #5b4517; background: #ffe19a; font-size: 24px; font-weight: 900; }
.level-art { height: 154px; display: flex; align-items: center; justify-content: center; }
.level-art > span { display: block; width: 30%; height: 100px; }
.level-art > span:nth-child(2) { width: 38%; height: 134px; }
.level-art svg, .level-art img { width: 100%; height: 100%; object-fit: contain; }
.level-door strong, .level-door small { display: block; }
.level-door strong { font-size: 27px; }
.level-door small { margin: 8px 0 16px; font-size: 14px; }
.level-keepsake { display: inline-block; border-radius: 12px; background: #e6f3e8; color: #255d41; padding: 8px 12px; font-size: 13px; font-weight: 800; }
.play-progress .top-bar-title { font-size: 12px; }
.play-progress .journey-dots { margin-top: 7px; }
.pause-card { width: min(400px, calc(100vw - 32px)); padding: 28px; border-radius: 32px; background: #fffef7; text-align: center; color: var(--kid-ink); box-shadow: 0 20px 80px #102a4340; }
.pause-card img { object-fit: contain; }
.pause-card h1 { font-size: 30px; margin: 12px 0; }
.pause-card .cta { width: 100%; margin: 16px 0; }
.celebration-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.helping-grid { display: flex !important; flex-direction: column; gap: 14px; }
.picture-plan { display: flex; justify-content: center; gap: 12px; }
.plan-item { position: relative; width: 72px; height: 72px; padding: 7px; border-radius: 20px; border: 3px solid #d3dfdc; background: #fff; }
.plan-item.is-current { border-color: #bd7f22; box-shadow: 0 0 0 3px #ffe8b6; }
.plan-item.is-done { border-color: #357c60; background: #e4f2e5; }
.plan-item img, .plan-item svg { width: 100%; height: 100%; object-fit: contain; }
.plan-item b { position: absolute; bottom: -8px; right: -5px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #234855; color: #fff; font-size: 12px; }
.helping-scene { display: flex; justify-content: center; align-items: center; min-height: 180px; padding: 14px; border-radius: 32px; background: radial-gradient(ellipse at 50% 100%, #a6c3a44d, transparent 65%), linear-gradient(#e4f2ee, #fff8e3); }
.helping-friend { width: 150px; height: 150px; flex: 0 0 150px; }
.helping-friend svg, .helping-friend img { width: 100%; height: 100%; object-fit: contain; }
.helping-collection { display: flex; flex-wrap: wrap; max-width: 300px; min-height: 70px; gap: 4px; border-bottom: 8px solid #dea57a; border-radius: 12px; background: repeating-linear-gradient(45deg, #fff5d7, #fff5d7 12px, #fae1b5 12px, #fae1b5 24px); padding: 12px; }
.helping-collection span { width: 64px; height: 64px; }
.helping-collection img, .helping-collection svg { width: 100%; height: 100%; object-fit: contain; }
.helping-request { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--kid-ink); font-size: clamp(18px, 3vw, 23px); }
.helping-request > span { width: 42px; height: 42px; }
.helping-request img, .helping-request svg { width: 100%; height: 100%; object-fit: contain; }
.helping-tray { display: flex; justify-content: center; gap: 12px; }
.helping-tray .helping-choice { width: min(24%, 140px); aspect-ratio: 1; min-width: 64px; border-radius: 24px; }
.helping-choice svg, .helping-choice img { width: 80% !important; height: 80% !important; }
#root[data-paused="true"] .play-screen * { animation-play-state: paused !important; }
#root[data-reduce-motion="true"] *, #root[data-calm="true"] * { animation: none !important; scroll-behavior: auto !important; }
#root[data-calm="true"] .hero-float, #root[data-calm="true"] .welcome-pill > span { display: none; }
.journey-card:focus-visible, .level-door:focus-visible, .comfort-button:focus-visible { outline: 4px solid #153b69; outline-offset: 4px; }
@media (max-width: 650px) {
  .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .journey-card { min-height: 190px; padding: 12px 6px; border-radius: 24px; }
  .journey-card strong { font-size: 18px; }
  .journey-art { height: 115px; }
  .journey-art .world-art-piece--1 { width: 108px; height: 108px; }
  .journey-art .world-art-piece--2, .journey-art .world-art-piece--3 { width: 68px; height: 68px; }
  .level-path { grid-template-columns: 1fr; gap: 16px; }
  .level-door { display: grid; grid-template-columns: 48px 1fr; text-align: left; gap: 4px 14px; padding: 18px; }
  .level-number { grid-row: 1 / 5; margin: auto 0; }
  .level-art { grid-column: 2; height: 80px; justify-content: flex-start; }
  .level-art > span, .level-art > span:nth-child(2) { width: 70px; height: 80px; }
  .level-door strong { font-size: 22px; }
  .level-door small { margin: 0; }
  .level-keepsake { width: fit-content; margin-top: 4px; }
  .helping-scene { min-height: 140px; }
  .helping-friend { width: 100px; height: 120px; flex-basis: 100px; }
  .helping-collection span { width: 44px; height: 44px; }
  .plan-item { width: 58px; height: 58px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .helping-grid { gap: 8px; }
  .plan-item { width: 45px; height: 45px; }
  .helping-scene { min-height: 88px; padding: 6px; }
  .helping-friend { width: 80px; height: 80px; flex-basis: 80px; }
  .helping-request { font-size: 16px; }
  .helping-tray .helping-choice { width: 74px; }
}

body:has(.academy-home) {
  display: flex;
  max-width: none;
  padding: 0;
  margin: 0;
}

body:has(.academy-home) > main {
  width: 100%;
  min-height: auto;
  padding: 0 22px 68px;
  justify-content: flex-start;
}

body:has(.academy-home, .picker-screen, .pack-screen, .play-screen) .scenic {
  --scenic-art-opacity: 0.94;
  background: linear-gradient(180deg, #dcecf4, #fff7e6 75%, #dee8cc);
}

.academy-home,
.picker-screen {
  font-family: var(--kid-display);
  color: var(--kid-ink);
}

.academy-home {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.academy-home button,
.picker-screen button,
.picker-screen input {
  font: inherit;
}

.academy-nav {
  min-height: 102px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.academy-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--kid-ink);
  text-decoration: none;
}

.academy-brand img {
  width: 57px;
  height: 57px;
  object-fit: contain;
}

.academy-brand-name {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--kid-display);
  letter-spacing: -0.045em;
  line-height: 0.82;
  -webkit-text-fill-color: initial;
  background: none;
}

.academy-brand-name strong {
  color: #ef5a35;
  font-size: 27px;
  font-weight: 950;
}

.academy-brand-name small {
  margin-top: 6px;
  color: var(--kid-green);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.academy-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-action {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(24, 54, 95, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--kid-ink);
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(34, 73, 110, 0.08);
  backdrop-filter: blur(10px);
}

.nav-action--grownup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-action-dot {
  width: 10px;
  height: 12px;
  border: 2px solid var(--kid-green);
  border-radius: 7px 7px 9px 9px;
  position: relative;
}

.nav-action-dot::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border: 2px solid var(--kid-green);
  border-radius: 50%;
  top: -8px;
  left: 0;
  background: #fff;
}

.adventure-hero {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  align-items: center;
  border: 1px solid rgba(210, 133, 49, 0.18);
  border-radius: 42px;
  background:
    radial-gradient(circle at 8% 8%, rgba(255, 255, 255, 0.92) 0 6%, transparent 6.3%),
    radial-gradient(circle at 51% 82%, rgba(255, 222, 143, 0.48) 0 1.3%, transparent 1.5%),
    linear-gradient(125deg, #fffdf5 0%, #fff4d6 52%, #ffe9bd 100%);
  box-shadow: var(--kid-shadow);
  isolation: isolate;
}

.adventure-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("./backgrounds/storybook-garden-landscape.webp") center bottom / cover no-repeat;
  opacity: 0.24;
  pointer-events: none;
  z-index: -1;
}

.adventure-copy {
  padding: clamp(34px, 5vw, 70px);
  padding-right: 20px;
  align-self: center;
}

.welcome-pill,
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #bd4a29;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.welcome-pill span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #f4a62e;
  box-shadow: 8px -5px 0 -3px #f45b32;
}

.adventure-copy h1 {
  max-width: 650px;
  margin: 12px 0 14px;
  color: var(--kid-ink);
  font-size: clamp(42px, 5.2vw, 72px);
  line-height: 0.99;
  letter-spacing: -0.045em;
  font-weight: 950;
}

.adventure-copy > p {
  max-width: 610px;
  margin: 0 0 25px;
  color: var(--kid-soft);
  font-family: var(--kid-display);
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 650;
  line-height: 1.55;
}

.adventure-cta {
  width: min(100%, 560px);
  min-height: 82px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 19px 13px 13px;
  border: 0;
  border-radius: 25px;
  background: linear-gradient(135deg, #f86b3d, #e84929);
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 0 #b93720, 0 16px 25px rgba(220, 70, 36, 0.24);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.adventure-cta-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 24px;
  font-weight: 950;
}

.adventure-cta strong,
.adventure-cta small {
  display: block;
}

.adventure-cta strong {
  font-size: clamp(18px, 2.1vw, 23px);
  font-weight: 950;
  line-height: 1.15;
}

.adventure-cta small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 750;
}

.adventure-cta > b {
  font-size: 27px;
}

.adventure-cta:active {
  transform: translateY(5px);
  box-shadow: 0 3px 0 #b93720, 0 8px 14px rgba(220, 70, 36, 0.2);
}

.adventure-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 22px;
  color: #53697f;
  font-size: 12px;
  font-weight: 800;
}

.adventure-trust span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.adventure-trust i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #e2f4df;
  border: 2px solid #4e9c59;
  position: relative;
}

.adventure-trust i::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 3px;
  left: 3px;
  top: 3px;
  border-left: 2px solid #317843;
  border-bottom: 2px solid #317843;
  transform: rotate(-45deg);
}

.hero-character {
  position: relative;
  min-height: 430px;
  align-self: stretch;
}

.hero-sunburst {
  position: absolute;
  width: 310px;
  aspect-ratio: 1;
  top: 41px;
  right: 38px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 243, 203, 0.8), transparent 70%);
}

.hero-sprout {
  position: absolute;
  z-index: 3;
  width: min(390px, 90%);
  height: 390px;
  object-fit: contain;
  right: 4%;
  bottom: 3px;
  filter: drop-shadow(0 20px 18px rgba(43, 88, 53, 0.21));
  user-select: none;
  -webkit-user-drag: none;
}

.hero-ground {
  position: absolute;
  z-index: 2;
  left: 10%;
  right: -8%;
  bottom: 12px;
  height: 46px;
  border-radius: 50%;
  background: rgba(46, 126, 57, 0.25);
  filter: blur(2px);
}

.hero-speech {
  position: absolute;
  z-index: 5;
  top: 52px;
  left: 5%;
  padding: 12px 18px;
  border: 2px solid rgba(24, 54, 95, 0.1);
  border-radius: 18px 18px 5px 18px;
  background: #fff;
  color: var(--kid-ink);
  font-size: 14px;
  font-weight: 950;
  transform: rotate(-4deg);
  box-shadow: var(--kid-shadow-small);
}

.hero-float {
  position: absolute;
  z-index: 4;
  display: block;
}

.hero-float .premium-game-object,
.hero-float svg {
  width: 100%;
  height: 100%;
}

.hero-float--star {
  width: 64px;
  height: 64px;
  top: 78px;
  right: 7%;
  transform: rotate(10deg);
}

.hero-float--balloon {
  width: 78px;
  height: 78px;
  top: 174px;
  left: 0;
  transform: rotate(-8deg);
}

.worlds-section {
  padding: 72px 0 34px;
}

.worlds-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin: 0 3px 26px;
}

.section-kicker {
  color: #b64c2c;
}

.worlds-heading h2,
.picker-welcome h1,
.collection-copy h1 {
  margin: 6px 0 5px;
  color: var(--kid-ink);
  font-weight: 950;
  letter-spacing: -0.035em;
}

.worlds-heading h2 {
  font-size: clamp(32px, 4vw, 48px);
}

.worlds-heading p,
.picker-welcome p,
.collection-copy p {
  margin: 0;
  color: var(--kid-soft);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.5;
}

.text-button {
  min-height: 48px;
  flex: 0 0 auto;
  padding: 0 20px;
  border: 1px solid var(--kid-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--kid-blue);
  font-weight: 900;
  cursor: pointer;
}

.world-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.world-card {
  position: relative;
  min-width: 0;
  min-height: 226px;
  overflow: hidden;
  display: block;
  padding: 21px;
  border: 1px solid rgba(24, 54, 95, 0.1);
  border-radius: 30px;
  color: var(--kid-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 0 rgba(24, 54, 95, 0.08), var(--kid-shadow-small);
  transition: transform 180ms ease, box-shadow 180ms ease;
  isolation: isolate;
}

.world-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  right: -55px;
  bottom: -62px;
  background: rgba(255, 255, 255, 0.48);
}

.world-card--coral { background: linear-gradient(145deg, #ffe9db, #ffd2bd); }
.world-card--sunny { background: linear-gradient(145deg, #fff8cc, #ffe78f); }
.world-card--sky { background: linear-gradient(145deg, #e6f7ff, #bee9ff); }
.world-card--berry { background: linear-gradient(145deg, #f1eaff, #ded2ff); }
.world-card--ocean { background: linear-gradient(145deg, #ddf8f4, #afe8df); }
.world-card--peach { background: linear-gradient(145deg, #fff0ec, #ffd6d0); }
.world-card--mint { background: linear-gradient(145deg, #e8f8df, #c9ecbd); }
.world-card--tomato { background: linear-gradient(145deg, #ffe9dd, #ffcbb5); }

.world-card-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 72%;
}

.world-number {
  color: rgba(24, 54, 95, 0.62);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.11em;
}

.world-card-copy strong {
  margin-top: 8px;
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 950;
}

.world-prompt {
  margin-top: 8px;
  color: rgba(24, 54, 95, 0.73);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 750;
}

.world-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 17px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--kid-ink);
  font-size: 11px;
  font-weight: 900;
}

.world-card-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.world-art-piece {
  position: absolute;
  display: block;
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 8px 7px rgba(35, 66, 90, 0.16));
}

.world-art-piece .premium-game-object,
.world-art-piece svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.world-art-piece--1 { right: 9px; bottom: 13px; transform: rotate(5deg); }
.world-art-piece--2 { right: 51px; bottom: 70px; width: 60px; height: 60px; transform: rotate(-8deg); }
.world-art-piece--3 { right: -8px; bottom: 100px; width: 58px; height: 58px; transform: rotate(9deg); }

.home-shortcuts {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 16px;
  margin-top: 18px;
}

.home-shortcut,
.home-grownup-note {
  min-height: 94px;
  border: 1px solid var(--kid-line);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--kid-shadow-small);
}

.home-shortcut {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 19px;
  color: var(--kid-ink);
  text-align: left;
  cursor: pointer;
}

.shortcut-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #fff0a7;
  color: #d07816;
  font-size: 28px;
}

.home-shortcut strong,
.home-shortcut small {
  display: block;
}

.home-shortcut strong { font-size: 18px; font-weight: 950; }
.home-shortcut small { margin-top: 4px; color: var(--kid-soft); font-size: 12px; font-weight: 700; }
.home-shortcut > b { color: var(--kid-blue); font-size: 24px; }

.home-grownup-note {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 21px;
}

.home-grownup-note p {
  margin: 0;
  color: var(--kid-soft);
  font-size: 13px;
  line-height: 1.45;
}

.home-grownup-note strong { color: var(--kid-ink); font-size: 15px; }

.grownup-shield {
  width: 43px;
  height: 49px;
  flex: 0 0 auto;
  border: 3px solid #4b9d65;
  border-radius: 20px 20px 24px 24px;
  background: #e4f5e4;
  clip-path: polygon(50% 0, 95% 17%, 86% 72%, 50% 100%, 14% 72%, 5% 17%);
}

/* Learning-world picker */
main:has(.picker-screen) {
  justify-content: flex-start;
  padding-top: 25px;
  padding-bottom: 70px;
}

.game-screen.picker-screen {
  width: min(1120px, 100%);
  max-width: 1120px;
  gap: 20px;
}

.picker-top-bar {
  max-width: none;
  padding: 0;
}

.picker-top-bar .top-bar-title {
  color: var(--kid-ink);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.picker-screen .icon-btn {
  width: 50px;
  height: 50px;
  border: 1px solid var(--kid-line);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--kid-ink);
  font-size: 24px;
  font-weight: 900;
  box-shadow: var(--kid-shadow-small);
}

.ui-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Play screens inherit white text from the scenic night shell. Keep utility
   icons dark on their cream buttons so Home and Listen never disappear. */
.play-screen .icon-btn {
  color: var(--kid-ink);
}

.top-bar-logo {
  width: 94px;
  height: 48px;
  object-fit: contain;
}

.picker-welcome,
.collection-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 178px;
  padding: 30px clamp(25px, 4vw, 48px);
  border: 1px solid rgba(24, 54, 95, 0.1);
  border-radius: 33px;
  background: linear-gradient(125deg, rgba(255, 253, 246, 0.97), rgba(255, 237, 197, 0.96));
  box-shadow: var(--kid-shadow);
}

.picker-welcome::after,
.collection-hero::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -80px;
  bottom: -150px;
  border-radius: 50%;
  background: rgba(107, 183, 97, 0.3);
}

.picker-welcome h1,
.collection-copy h1 {
  font-size: clamp(30px, 4vw, 48px);
}

.picker-welcome > div,
.collection-copy {
  position: relative;
  z-index: 2;
}

.picker-surprise,
.all-games-button,
.show-more-button {
  min-height: 52px;
  border-radius: 18px;
  font-weight: 900;
  cursor: pointer;
}

.picker-welcome .picker-surprise {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 0 22px;
  border: 0;
  background: var(--kid-green);
  color: #fff;
  box-shadow: 0 6px 0 #17683e;
}

.picker-welcome .picker-surprise span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}

.picker-tools {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(24, 54, 95, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--kid-shadow-small);
  backdrop-filter: blur(10px);
}

.picker-search-row {
  display: flex;
  gap: 10px;
}

.picker-screen .picker-search {
  min-width: 0;
  min-height: 54px;
  flex: 1 1 auto;
  padding: 0 19px;
  border: 2px solid rgba(24, 54, 95, 0.14);
  border-radius: 18px;
  background: #fff;
  color: var(--kid-ink);
  font-size: 16px;
  font-weight: 750;
  outline: none;
}

.picker-screen .picker-search:focus {
  border-color: #3d82ca;
  box-shadow: 0 0 0 4px rgba(61, 130, 202, 0.13);
}

.all-games-button,
.picker-tools .picker-surprise {
  flex: 0 0 auto;
  padding: 0 19px;
  border: 2px solid rgba(24, 54, 95, 0.13);
  background: #fffaf0;
  color: var(--kid-ink);
}

.picker-count {
  min-height: 21px;
  margin-top: 11px;
  color: var(--kid-soft);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.picker-screen .picker-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 2px 3px;
  scrollbar-width: thin;
}

.picker-screen .picker-chip {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(24, 54, 95, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--kid-soft);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.picker-screen .picker-chip[aria-pressed="true"] {
  border-color: var(--kid-ink);
  background: var(--kid-ink);
  color: #fff;
}

.picker-screen .picker-grid:not(.world-grid) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
}

.picker-screen .picker-tile {
  position: relative;
  min-height: 245px;
  aspect-ratio: auto;
  justify-content: flex-start;
  gap: 6px;
  padding: 18px 14px 15px;
  border: 1px solid rgba(24, 54, 95, 0.11);
  border-radius: 27px;
  background: rgba(255, 253, 248, 0.96);
  color: var(--kid-ink);
  box-shadow: 0 7px 0 rgba(24, 54, 95, 0.07), var(--kid-shadow-small);
}

.picker-screen .picker-art {
  width: 100%;
  height: 136px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  padding: 10px;
  border-radius: 20px;
  background: linear-gradient(155deg, #eff9ff, #fff4d9);
}

.picker-screen .picker-art .premium-game-object,
.picker-screen .picker-art svg {
  width: 100%;
  height: 100%;
  max-width: 118px;
  object-fit: contain;
}

.picker-screen .picker-label {
  display: block;
  width: 100%;
  color: var(--kid-ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.18;
  text-align: left;
}

.picker-screen .picker-skill {
  display: block;
  width: 100%;
  color: var(--kid-soft);
  font-size: 10px;
  line-height: 1.25;
  text-align: left;
}

.picker-play {
  position: absolute;
  right: 13px;
  bottom: 12px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8f4ff;
  color: #2b6cae;
  font-weight: 950;
}

.picker-more {
  display: flex;
  justify-content: center;
}

.show-more-button {
  min-width: 230px;
  padding: 0 24px;
  border: 2px solid var(--kid-ink);
  background: #fff;
  color: var(--kid-ink);
  box-shadow: 0 5px 0 rgba(24, 54, 95, 0.18);
}

.picker-empty {
  grid-column: 1 / -1;
  min-height: 170px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 2px dashed rgba(24, 54, 95, 0.2);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--kid-soft);
  font-weight: 850;
  text-align: center;
}

.collection-hero {
  min-height: 205px;
  background: linear-gradient(135deg, #fff9df, #ffe9c0);
}

.collection-screen--coral .collection-hero { background: linear-gradient(135deg, #fff4ed, #ffd6c2); }
.collection-screen--sunny .collection-hero { background: linear-gradient(135deg, #fffceb, #ffe99c); }
.collection-screen--sky .collection-hero { background: linear-gradient(135deg, #f2fbff, #c7edff); }
.collection-screen--berry .collection-hero { background: linear-gradient(135deg, #faf7ff, #dfd5ff); }
.collection-screen--ocean .collection-hero { background: linear-gradient(135deg, #effcf9, #bbeadf); }
.collection-screen--peach .collection-hero { background: linear-gradient(135deg, #fff8f5, #ffd9d0); }
.collection-screen--mint .collection-hero { background: linear-gradient(135deg, #f5fbf0, #d2efc8); }
.collection-screen--tomato .collection-hero { background: linear-gradient(135deg, #fff6ee, #ffd1bd); }

.collection-copy { max-width: 610px; }

.collection-total {
  display: inline-flex;
  margin-top: 13px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--kid-ink);
  font-size: 12px;
  font-weight: 900;
}

.collection-art {
  position: relative;
  z-index: 2;
  width: 270px;
  height: 155px;
  flex: 0 0 auto;
}

.collection-art .world-art-piece--1 { right: 0; bottom: 0; width: 130px; height: 130px; }
.collection-art .world-art-piece--2 { right: 103px; bottom: 10px; width: 94px; height: 94px; }
.collection-art .world-art-piece--3 { right: 175px; bottom: 61px; width: 72px; height: 72px; }

.adventure-celebration-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: -4px 0 17px;
}

.adventure-celebration-progress span {
  width: 28px;
  height: 8px;
  border-radius: 999px;
  background: #dce5ec;
}

.adventure-celebration-progress .is-done {
  background: #65b662;
}

@media (hover: hover) and (pointer: fine) {
  .nav-action:hover,
  .text-button:hover,
  .all-games-button:hover,
  .picker-tools .picker-surprise:hover { background: #fff; transform: translateY(-1px); }
  .adventure-cta:hover { transform: translateY(-3px); box-shadow: 0 11px 0 #b93720, 0 21px 30px rgba(220, 70, 36, 0.24); }
  .world-card:hover { transform: translateY(-5px) rotate(-0.4deg); box-shadow: 0 12px 0 rgba(24, 54, 95, 0.07), 0 23px 35px rgba(42, 79, 110, 0.16); }
  .picker-screen .picker-tile:hover { transform: translateY(-4px); border-color: rgba(43, 118, 200, 0.45); box-shadow: 0 10px 0 rgba(24, 54, 95, 0.07), 0 23px 35px rgba(42, 79, 110, 0.15); }
}

@media (prefers-reduced-motion: no-preference) {
  .adventure-copy > *,
  .hero-character,
  .world-card {
    animation: kid-reveal 520ms both cubic-bezier(0.22, 1, 0.36, 1);
  }
  .adventure-copy > *:nth-child(2) { animation-delay: 60ms; }
  .adventure-copy > *:nth-child(3) { animation-delay: 110ms; }
  .adventure-copy > *:nth-child(4) { animation-delay: 160ms; }
  .hero-character { animation-delay: 120ms; }
  .world-card:nth-child(2) { animation-delay: 45ms; }
  .world-card:nth-child(3) { animation-delay: 90ms; }
  .world-card:nth-child(4) { animation-delay: 135ms; }
  .world-card:nth-child(5) { animation-delay: 180ms; }
  .world-card:nth-child(6) { animation-delay: 225ms; }
  .world-card:nth-child(7) { animation-delay: 270ms; }
  .world-card:nth-child(8) { animation-delay: 315ms; }
  .hero-sprout { animation: sprout-float 4.2s ease-in-out infinite; }
  .hero-float--star { animation: art-float 3.4s ease-in-out infinite; }
  .hero-float--balloon { animation: art-float 4.1s 500ms ease-in-out infinite reverse; }
}

@keyframes kid-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sprout-float {
  0%, 100% { transform: translateY(0) rotate(-0.5deg); }
  50% { transform: translateY(-7px) rotate(0.5deg); }
}

@keyframes art-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@media (max-width: 880px) {
  .adventure-hero {
    grid-template-columns: minmax(0, 1fr) 300px;
    min-height: 390px;
  }
  .adventure-copy { padding: 36px 18px 36px 35px; }
  .adventure-copy h1 { font-size: clamp(40px, 6.5vw, 57px); }
  .hero-character { min-height: 390px; }
  .hero-sprout { height: 330px; right: -3%; }
  .hero-sunburst { width: 250px; right: 10px; }
  .hero-speech { left: -3%; }
  .world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .world-card-copy strong { font-size: 26px; }
  .picker-screen .picker-grid:not(.world-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  body:has(.academy-home) > main { padding: 0 12px 46px; }
  .academy-nav { min-height: 79px; gap: 8px; }
  .academy-brand img { width: 48px; height: 48px; }
  .academy-brand-name strong { font-size: 22px; }
  .academy-brand-name small { font-size: 12px; }
  .nav-action { min-height: 43px; padding: 0 13px; font-size: 12px; }
  .academy-nav-actions { gap: 5px; }
  .nav-action { min-height: 41px; padding-inline: 11px; font-size: 11px; }
  .nav-action--grownup { gap: 5px; }
  .adventure-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: 31px;
  }
  .adventure-hero::after { inset: auto -20% -20% 4%; height: 42%; }
  .adventure-copy { z-index: 5; width: 100%; padding: 28px 22px 10px; }
  .adventure-copy h1 { font-size: clamp(40px, 12.2vw, 54px); }
  .adventure-copy > p { font-size: 15px; }
  .adventure-cta { min-height: 76px; grid-template-columns: 48px minmax(0, 1fr) auto; border-radius: 22px; }
  .adventure-cta-icon { width: 48px; height: 48px; border-radius: 15px; }
  .adventure-trust { gap: 8px 13px; margin-top: 20px; }
  .hero-character { width: 100%; min-height: 225px; }
  .hero-sprout { width: 245px; height: 245px; right: 8%; }
  .hero-sunburst { width: 190px; top: 12px; right: 34px; }
  .hero-speech { top: 35px; left: 8%; }
  .hero-float--star { width: 55px; height: 55px; top: 17px; right: 4%; }
  .hero-float--balloon { width: 66px; height: 66px; top: 108px; left: 4%; }
  .worlds-section { padding-top: 34px; }
  .worlds-heading { align-items: flex-start; margin-bottom: 20px; }
  .worlds-heading p { font-size: 14px; }
  .worlds-heading .text-button { display: none; }
  .world-grid { gap: 11px; }
  .world-card { min-height: 212px; padding: 16px; border-radius: 24px; }
  .world-card-copy { max-width: 77%; }
  .world-card-copy strong { font-size: clamp(19px, 5.7vw, 25px); }
  .world-prompt { font-size: 11px; }
  .world-count { margin-top: 14px; padding: 6px 8px; font-size: 10px; }
  .world-art-piece--1 { width: 72px; height: 72px; right: 3px; }
  .world-art-piece--2 { width: 51px; height: 51px; right: 38px; bottom: 65px; }
  .world-art-piece--3 { width: 47px; height: 47px; right: -8px; bottom: 91px; }
  .home-shortcuts { grid-template-columns: 1fr; }
  .home-grownup-note { display: none; }
  main:has(.picker-screen) { padding: 14px 11px 55px; }
  .picker-welcome,
  .collection-hero { min-height: 0; padding: 25px 21px; border-radius: 27px; }
  .picker-welcome { align-items: flex-start; flex-direction: column; }
  .picker-welcome .picker-surprise { width: 100%; justify-content: center; }
  .picker-search-row { flex-direction: column; }
  .all-games-button,
  .picker-tools .picker-surprise { width: 100%; }
  .picker-screen .picker-grid:not(.world-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .picker-screen .picker-tile { min-height: 216px; padding: 11px 9px 13px; border-radius: 22px; }
  .picker-screen .picker-art { height: 119px; padding: 8px; border-radius: 17px; }
  .picker-screen .picker-label { font-size: 13px; }
  .collection-art { width: 145px; height: 120px; margin-right: -30px; }
  .collection-art .world-art-piece--1 { width: 95px; height: 95px; }
  .collection-art .world-art-piece--2 { width: 64px; height: 64px; right: 69px; }
  .collection-art .world-art-piece--3 { display: none; }
}

@media (max-width: 390px) {
  .academy-brand { gap: 5px; }
  .academy-brand img { width: 43px; height: 43px; }
  .academy-brand-name strong { font-size: 20px; }
  .academy-brand-name small { font-size: 10px; }
  .nav-action { padding-inline: 8px; }
  .nav-action-dot { display: none; }
  .adventure-copy { padding-inline: 18px; }
  .adventure-cta { padding-right: 13px; gap: 9px; }
  .adventure-cta strong { font-size: 17px; }
  .adventure-cta small { font-size: 10px; }
  .adventure-trust span:last-child { display: none; }
  .world-card { min-height: 200px; }
  .world-card-copy { max-width: 82%; }
  .world-card-copy strong { font-size: 19px; }
  .world-number { font-size: 9px; }
  .world-prompt { max-width: 100px; }
  .world-art-piece--2 { display: none; }
  .collection-art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .academy-home *,
  .picker-screen * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Keep the play doors in reach instead of filling a phone with hero copy. */
body:has(.pack-screen, .play-screen) .top-bar-title { color: var(--kid-ink); }
.pack-screen .icon-btn { color: var(--kid-ink); }
.play-screen .skill-pill-row { display: none; }
.play-screen .repeat-btn { background: #e6f3ed; color: #205c46; box-shadow: 0 4px 0 #c3ded1; }
.academy-home .adventure-hero { min-height: 290px; }
.academy-home .hero-character { min-height: 290px; }
.academy-home .hero-sprout { height: 280px; width: 280px; }
.academy-home .adventure-copy { padding-block: 26px; }
.academy-home .adventure-copy h1 { font-size: clamp(30px, 4vw, 50px); }
/* A plain, warm backdrop is available without changing any game targets. */
body:has(#root[data-calm="true"]) .scenic-art,
body:has(#root[data-calm="true"]) .adventure-hero::after { display: none; }
body:has(.play-screen, .pack-screen, .overlay) #older-children { display: none; }
@media (max-width: 650px) {
  .academy-home .adventure-hero { display: grid; grid-template-columns: minmax(0, 1fr) 120px; min-height: 200px; }
  .academy-home .adventure-copy { padding: 22px 0 22px 20px; }
  .academy-home .adventure-copy { min-width: 0; width: auto; }
  .academy-home .adventure-copy h1 { font-size: clamp(26px, 6.2vw, 36px); margin-bottom: 14px; }
  .academy-home .adventure-copy > p, .academy-home .welcome-pill, .academy-home .adventure-trust { display: none; }
  .academy-home .adventure-cta { min-height: 64px; padding: 10px; grid-template-columns: 1fr auto; gap: 6px; }
  .academy-home .adventure-cta-icon, .academy-home .adventure-cta small { display: none; }
  .academy-home .hero-character { min-height: 200px; }
  .academy-home .hero-sprout { width: 150px; height: 150px; right: -14px; bottom: 10px; }
  .academy-home .hero-speech, .academy-home .hero-float { display: none; }
  .academy-home .hero-sunburst { width: 130px; right: -10px; top: 34px; }
  .journeys-section .worlds-heading { gap: 10px; align-items: center; }
  .journeys-section .section-kicker { display: none; }
  .journeys-section .worlds-heading h2 { font-size: 25px; }
  .journeys-section .comfort-button { font-size: 12px; padding: 10px; }
}
@media (max-width: 390px) {
  .journey-art .world-art-piece--2, .journey-art .world-art-piece--3 { display: block; }
}

/* Child-led story studios: one decision, a visible consequence, time to explore. */
.workshop-grid { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 800px; }
.helping-shared { display: flex; justify-content: center; gap: 8px; }
.helping-shared span { width: 48px; height: 48px; }
.helping-shared img, .helping-shared svg { width: 100%; height: 100%; object-fit: contain; }
.workshop-plan { display: flex; gap: 10px; justify-content: center; }
.workshop-plan .plan-item { width: 66px; height: 66px; }
.workshop-scene { position: relative; isolation: isolate; overflow: hidden; width: 100%; height: clamp(180px, 28vh, 300px); border: 3px solid #fff; border-radius: 32px; background: radial-gradient(ellipse at 24% 8%, #fff9cf 0, transparent 60%), linear-gradient(#dcf2ee 0 66%, #bae0b1 66%); box-shadow: 0 6px 0 #d0decf; }
.workshop-scene--picnic { background: radial-gradient(ellipse at 20% 0, #fff4b6, transparent 65%), linear-gradient(#f1f5db 0 65%, #c1dca4 65%); }
.workshop-scene--space { background: radial-gradient(circle at 15% 25%, #ffffff 0 2px, transparent 3px), radial-gradient(circle at 80% 12%, #fff 0 2px, transparent 3px), radial-gradient(ellipse at 70% 0, #5864ac, transparent 85%), #273662; box-shadow: 0 6px 0 #c8cce2; }
.workshop-ground { position: absolute; z-index: -1; bottom: -18%; left: -5%; width: 110%; height: 45%; background: #91bd84; border-radius: 50%; }
.workshop-scene--picnic .workshop-ground { bottom: 4%; left: 15%; width: 70%; height: 30%; border-radius: 50%; background: repeating-linear-gradient(90deg, #f7d8bb80 0 25px, transparent 25px 50px), repeating-linear-gradient(#fff6e3 0 25px, #edd1aa 25px 50px); transform: rotate(-3deg); }
.workshop-scene--space .workshop-ground { background: #a4b0d2; bottom: -24%; }
.workshop-prop, .workshop-place, .workshop-friend { position: absolute; display: block; bottom: 6%; width: 26%; height: 63%; transition: left .7s ease, bottom .7s ease, transform .7s ease; }
.workshop-prop { left: 6%; }
.workshop-place { right: 4%; width: 34%; height: 72%; }
.workshop-friend { left: 35%; width: 30%; height: 79%; }
.workshop-objects { position: absolute; display: flex; bottom: 4%; right: 9%; gap: 3px; transition: right .6s ease, bottom .6s ease; }
.workshop-objects span { display: block; width: clamp(42px, 8vw, 66px); height: clamp(42px, 8vw, 66px); }
.workshop-scene img, .workshop-scene svg { width: 100%; height: 100%; object-fit: contain; }
.workshop-cue { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 6px; border: 2px solid #fff; background: #fff9ed; border-radius: 18px; padding: 4px 10px; color: #263d45; }
.workshop-cue img, .workshop-cue svg { width: 38px; height: 38px; }
.workshop-action--share .workshop-objects, .workshop-action--feed .workshop-objects { right: 30%; bottom: 17%; }
.workshop-action--tidy .workshop-objects { left: 7%; right: auto; bottom: 8%; }
.workshop-action--launch .workshop-prop { left: 47%; bottom: 35%; transform: rotate(14deg) scale(.8); }
.workshop-action--launch .workshop-friend { left: 26%; bottom: 20%; transform: scale(.78); }
.workshop-action--land .workshop-prop { left: 55%; transform: rotate(-10deg); }
.workshop-action--rest .workshop-friend { transform: rotate(-14deg) translateY(6px); }
.workshop-action--play .workshop-friend { transform: rotate(6deg); }
.workshop-welcome { position: absolute; top: 35%; left: 30%; width: 60%; text-align: center; color: #315548; font-weight: 800; }
.workshop-scene--space .workshop-welcome { color: #fff; }
.workshop-request { max-width: 650px; text-align: center; color: #263d45; font-size: clamp(16px, 2vw, 21px); font-weight: 800; min-height: 27px; }
.workshop-request, .helping-request { background: #fffdf6; border: 2px solid #d1dfd3; border-radius: 18px; padding: 10px 14px; }
.workshop-tray { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; width: 100%; }
.workshop-choice { width: clamp(80px, 19vw, 124px); min-height: 106px; padding: 9px 6px; border: 2px solid #d1dfd3; border-radius: 22px; background: #fffdf6; box-shadow: 0 5px 0 #cbdccb; color: #263d45; font: inherit; cursor: pointer; }
.workshop-choice > span { display: block; width: 100%; height: 68px; }
.workshop-choice img, .workshop-choice svg { width: 100%; height: 100%; object-fit: contain; }
.workshop-choice strong { display: block; font-size: 12px; line-height: 1.25; padding-top: 4px; }
.workshop-choice:active { transform: translateY(3px); box-shadow: 0 2px 0 #cbdccb; }
.workshop-choice:focus-visible, .workshop-back:focus-visible { outline: 4px solid #28775a; outline-offset: 3px; }
.workshop-footer { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.workshop-back { min-height: 56px; padding: 12px 18px; border: 2px solid #c5d8cf; border-radius: 18px; color: #315548; background: #f3f8f3; font: inherit; font-weight: 800; cursor: pointer; }
.workshop-footer .cta { width: auto; min-width: 120px; min-height: 56px; padding: 12px 22px; }
#root[data-calm="true"] .workshop-scene *, #root[data-reduce-motion="true"] .workshop-scene * { transition: none; }
@media (prefers-reduced-motion: reduce) { .workshop-scene * { transition: none !important; } }
@media (max-height: 500px) { .workshop-scene { height: 154px; } .workshop-grid { gap: 10px; } .workshop-plan .plan-item { width: 56px; height: 56px; } }

.saved-stories-section { padding: 36px 0 16px; }
.hero-stories-button { margin-top: 12px; min-height: 56px; gap: 18px; }
.saved-stories-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.saved-story-card { padding: 18px; border: 2px solid #cbded4; border-bottom-width: 6px; border-radius: 28px; background: linear-gradient(145deg, #ffffff, #edf6ed); color: #243b53; text-align: left; cursor: pointer; }
.saved-story-card strong, .saved-story-card small { display: block; }
.saved-story-card strong { font-size: 19px; margin-top: 12px; }
.saved-story-card small { font-size: 13px; margin-top: 6px; }
.saved-story-pictures { display: flex; justify-content: center; align-items: center; gap: 4px; min-height: 86px; }
.saved-story-pictures > span { flex: 1; max-width: 100px; min-width: 0; }
.saved-story-pictures img, .saved-story-pictures svg { width: 100%; height: 86px; object-fit: contain; }
.saved-stories-note, .workshop-save-note { color: #475d59; font-size: 13px; text-align: center; margin: 8px 0; }
.workshop-save-note { max-width: 360px; background: #fffdf6; border-radius: 14px; padding: 6px 12px; }
.workshop-welcome-card { width: 100%; max-width: 540px; padding: 24px; border: 2px solid #cbded4; border-radius: 32px; background: linear-gradient(145deg, #fff, #f1f7ed); color: #243b53; display: flex; flex-direction: column; gap: 16px; text-align: center; }
.workshop-welcome-card h2, .workshop-welcome-card p { margin: 0; }
.workshop-welcome-card .cta, .workshop-welcome-card .comfort-button { min-height: 56px; }
.workshop-welcome-card button { display: flex; align-items: center; justify-content: center; gap: 12px; }
.workshop-welcome-card button img, .workshop-welcome-card button svg { width: 38px; height: 38px; object-fit: contain; }
.workshop-welcome-card small { font-size: 13px; color: #475d59; }
.workshop-plan button.plan-item { cursor: pointer; min-width: 56px; min-height: 56px; }

/* Success stays understandable with sound off and without a color cue. */
.success-smile { display: inline-flex; flex: 0 0 32px; width: 32px; height: 32px; vertical-align: middle; }
.success-smile svg { width: 100%; height: 100%; }
.celebration-smile { width: 38px; height: 38px; }
.tile.correct, button.correct { position: relative; }
.tile.correct::after, button.correct::after {
  content: ''; position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.5' fill='%23ffe08a' stroke='%238b621b' stroke-width='1.5'/%3E%3Ccircle cx='8.5' cy='9' r='1.2' fill='%2359451d'/%3E%3Ccircle cx='15.5' cy='9' r='1.2' fill='%2359451d'/%3E%3Cpath d='M7.5 14 Q12 20 16.5 14' fill='none' stroke='%2359451d' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
#root[data-calm="true"] .tile.correct, #root[data-calm="true"] button.correct,
#root[data-reduce-motion="true"] .tile.correct, #root[data-reduce-motion="true"] button.correct { animation: none !important; }

.focus-play-grid { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 580px; }
.focus-chapter { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #315548; background: #fffdf6; padding: 10px 16px; border-radius: 20px; text-align: center; }
.focus-chapter strong { font-size: 12px; letter-spacing: 1px; }
.focus-chapter span { font-size: 13px; }
.focus-collection { display: flex; gap: 8px; }
.focus-keepsake { display: grid; place-items: center; width: 54px; height: 54px; border: 2px solid #d1dfd3; border-radius: 16px; background: #fffdf6; color: #6d796b; font-size: 22px; font-weight: 800; }
.focus-keepsake img, .focus-keepsake svg { width: 38px; height: 38px; object-fit: contain; }
.focus-keepsake.is-found { background: #e4f2e5; border-color: #357c60; }
.focus-prompt { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; min-height: 52px; width: 100%; color: #263d45; background: #fffdf6; border: 2px solid #d1dfd3; border-radius: 18px; padding: 10px 14px; text-align: center; font-weight: 800; }
.focus-board { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(var(--focus-columns), minmax(0, 1fr)); gap: 10px; padding: 12px; width: min(100%, 460px); border-radius: 30px; background: radial-gradient(ellipse at 50% 0, #f7edbc, transparent 75%), #cfe4bb; }
.focus-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.focus-cell { position: relative; aspect-ratio: 1; min-width: 56px; min-height: 56px; padding: 10px; border: 2px solid #d1dfd3; border-bottom-width: 5px; border-radius: 24px; background: #fffdf6e6; cursor: pointer; }
.focus-cell > img, .focus-cell > svg { width: 100%; height: 100%; object-fit: contain; }
.focus-cell:disabled { cursor: default; opacity: 1; }
.focus-cell.is-found { background: #e4f2e5; border-color: #357c60; }
.focus-cell.is-hinted { border-color: #996813; background: #fff5d4; }
.focus-found { position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; }
.focus-found svg { width: 100%; height: 100%; }
.focus-route-number { position: absolute; bottom: 4px; left: 6px; display: grid; place-items: center; width: 28px; height: 28px; background: #ffe08a; color: #5b4517; border-radius: 50%; font-size: 18px; }
.focus-controls { display: flex; justify-content: center; width: 100%; }
.focus-controls button { min-height: 64px; min-width: 220px; }
.focus-note { margin: 0; padding: 6px 12px; border-radius: 12px; background: #fffdf6; color: #475d59; font-size: 13px; text-align: center; }
@media (orientation: landscape) and (max-height: 540px) { .focus-play-grid { gap: 8px; } .focus-board { max-width: 320px; } .focus-cell { border-radius: 18px; } }
@media (max-width: 600px) { .saved-stories-grid { grid-template-columns: 1fr; } .saved-story-card { display: grid; grid-template-columns: 110px 1fr; gap: 0 14px; align-items: center; } .saved-story-card .saved-story-pictures { grid-row: span 2; } .saved-story-card strong { margin: 0; } .saved-story-card small { margin: 0; } }
@media (max-width: 390px) { .workshop-choice { width: 76px; min-height: 104px; } .workshop-tray { gap: 7px; } .workshop-cue strong { font-size: 12px; } }

/* Play fits the visible screen, not just its width. Menus remain scrollable. */
body:has(.play-screen) > main {
  justify-content: flex-start;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
}
.play-screen { gap: 12px; }
.play-screen .top-bar { padding-inline: 0; }
.play-screen .top-bar > button { flex-shrink: 0; }
.play-screen .play-progress, .play-screen .instruction-card > div { min-width: 0; }
.play-screen .top-bar-title { text-align: center; overflow-wrap: anywhere; }
.play-screen .instruction-card { padding: 12px 16px; }
.play-screen .instruction-card h2 { overflow-wrap: anywhere; }
.play-screen #game-grid { width: 100%; min-width: 0; margin-inline: auto; }
.play-screen .premium-game-object { min-width: 0; min-height: 0; }
.workshop-grid, .focus-play-grid, .helping-grid { gap: 10px; }
.workshop-plan, .picture-plan { gap: 8px; }
.workshop-plan .plan-item, .picture-plan .plan-item { width: 56px; height: 56px; flex-shrink: 0; }
.workshop-scene { height: var(--scene-size, clamp(160px, 26dvh, 260px)); }
.helping-scene { min-height: 0; height: var(--scene-size, 180px); }
.helping-friend { height: 100%; min-width: 0; flex-shrink: 1; }
.workshop-tray {
  display: grid;
  grid-template-columns: repeat(var(--choice-columns, 4), minmax(0, 1fr));
  gap: 8px;
  max-width: 540px;
}
.workshop-choice { width: 100%; min-width: 56px; min-height: 90px; padding: 8px 5px; }
.workshop-choice > span { height: 54px; }
.workshop-choice strong { overflow-wrap: anywhere; }
.workshop-footer:empty, .workshop-tray:empty { display: none; }
.workshop-footer { gap: 8px; }
.workshop-back { padding: 10px 14px; }
.workshop-save-note { margin: 0; padding: 4px 8px; }
.focus-controls button { min-height: 56px; }
.focus-board { flex-shrink: 0; }
.focus-chapter { padding: 8px 12px; }
.focus-note { margin: 0; }

@media (max-height: 740px) {
  .focus-play-grid { gap: 8px; }
  .focus-chapter span, .focus-note { display: none; }
  .focus-keepsake { width: 38px; height: 38px; }
  .focus-keepsake img, .focus-keepsake svg { width: 30px; height: 30px; }
  .focus-prompt { padding: 8px 10px; font-size: 16px; }
}
@media (max-height: 620px) {
  .focus-chapter { display: none; }
}

@media (orientation: landscape) and (min-width: 760px) and (max-height: 820px) {
  .play-screen {
    display: grid;
    max-width: 1060px;
    grid-template-columns: minmax(200px, 25%) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 20px;
    row-gap: 12px;
    align-items: start;
  }
  .play-screen .top-bar { grid-column: 1; grid-row: 1; }
  .play-screen .instruction-card { grid-column: 1; grid-row: 2; }
  .play-screen .skill-pill-row { grid-column: 1; grid-row: 3; }
  .play-screen #game-grid { grid-column: 2; grid-row: 1 / span 3; justify-self: center; }
}

@media (orientation: landscape) and (max-height: 540px) {
  .play-screen { column-gap: 12px; }
  .game-grid.workshop-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 10px;
    align-items: start;
  }
  .workshop-plan { grid-column: 1 / -1; grid-row: 1; }
  .workshop-scene { grid-column: 1; grid-row: 2 / span 3; }
  .workshop-request, .workshop-tray, .workshop-footer { grid-column: 2; }
  .workshop-request { padding: 8px; font-size: 14px; }
  .workshop-tray { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workshop-choice { min-height: 76px; padding: 5px 4px; }
  .workshop-choice > span { height: 40px; }
  .workshop-choice strong { font-size: 12px; }
  .workshop-footer button, .workshop-footer .cta { min-width: 0; padding: 8px; font-size: 14px; }
  .workshop-save-note { display: none; }
}

@media (orientation: landscape) and (min-width: 650px) and (max-height: 540px) {
  .focus-play-grid {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(212px, 1fr);
    gap: 8px 10px;
    align-items: start;
  }
  .focus-collection { grid-column: 1; grid-row: 1; justify-content: center; flex-wrap: wrap; gap: 4px; }
  .focus-prompt { grid-column: 1; grid-row: 2; }
  .focus-controls { grid-column: 1; grid-row: 3; }
  .focus-controls button { min-width: 0; width: 100%; padding: 8px; font-size: 14px; }
  .focus-board { grid-column: 2; grid-row: 1 / span 3; justify-self: center; }
}

/* A drawing surface, not a set of numbered buttons. */
.game-grid.trace-grid { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.trace-canvas {
  display: block; width: min(100%, 420px, max(160px, calc(var(--game-available-height, 540px) - 128px)));
  aspect-ratio: 1; background: radial-gradient(ellipse at 50% 0, #ffffff, #fffaf0);
  border-radius: 30px; box-shadow: 0 6px 0 #dce9de, 0 16px 30px #31554812;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair;
}
.trace-canvas:focus-visible { outline: 4px solid #2c7860; outline-offset: 5px; }
.trace-canvas * { pointer-events: none; }
.trace-guide, .trace-progress, .trace-ink, .trace-arrow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trace-guide { stroke: #e0e7df; stroke-width: 9; }
.trace-guide.is-active { stroke: #d2e4d6; }
.trace-progress { stroke: #89c5a0; stroke-width: 7; }
.trace-ink { stroke: #25816c; stroke-width: 3.5; }
.trace-arrow { stroke: #256b58; stroke-width: 1.4; }
.trace-spot circle { fill: #367d60; stroke: #ffffff; stroke-width: 1.5; }
.trace-spot .trace-halo { fill: #ffffff9c; stroke: #367d60; stroke-width: 1; }
.trace-hint { margin: 0; max-width: 420px; min-height: 40px; color: #274d42; text-align: center; font-weight: 800; font-size: 16px; }
.trace-footer { display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; max-width: 420px; }
.trace-meter { flex: 1; min-width: 0; height: 12px; accent-color: #367d60; }
.trace-restart, .du-more { min-width: 56px; min-height: 56px; padding: 10px 14px; border: 2px solid #b8d3c0; border-radius: 18px; background: #fffdf6; color: #274d42; font: inherit; font-weight: 800; cursor: pointer; touch-action: manipulation; }

/* Show a small wardrobe at a time, without a tiny scrolling clothes tray. */
.du-wrap { display: grid; grid-template-columns: minmax(80px, 32%) minmax(0, 1fr); gap: 8px; align-items: start; max-width: 600px; margin-inline: auto; }
.du-friends, .du-categories, .du-footer { grid-column: 1 / -1; justify-content: center; }
.du-friend { width: 56px; height: 56px; }
.du-categories { display: flex; gap: 4px; flex-wrap: wrap; }
.du-category { display: grid; place-items: center; min-width: 56px; height: 56px; padding: 3px; border: 2px solid #d1dfd3; border-radius: 13px; background: #fffdf6; color: #274d42; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.du-category img { width: 27px; height: 27px; object-fit: contain; }
.du-category[aria-pressed="true"] { background: #e4f2e5; border-color: #357c60; }
.du-doll { grid-column: 1; grid-row: 3; justify-self: center; width: auto; height: clamp(130px, calc(var(--game-available-height, 650px) - 205px), 300px); aspect-ratio: 168 / 300; }
.du-tray { grid-column: 2; grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(56px, 1fr)); gap: 6px; width: 100%; max-width: 320px; max-height: none; overflow: visible; padding: 0; }
.du-item { width: 100%; min-width: 56px; height: clamp(56px, calc((var(--game-available-height, 650px) - 230px) / 2), 88px); }
.du-item[hidden], .du-more[hidden] { display: none; }
.du-footer { display: flex; gap: 8px; flex-wrap: wrap; }
.du-done { min-height: 56px; padding: 10px 16px; font-size: 15px; }
.du-more { font-size: 14px; }

.terra-wrap { gap: 10px; }
.terra-jar { width: min(240px, 100%, max(110px, calc((var(--game-available-height, 650px) - 310px) / 1.06))); }
.terra-controls { width: min(430px, 100%); }
.terra-row { grid-template-columns: 32px minmax(0, 1fr); padding: 6px 8px; gap: 8px; }
.terra-levels { grid-template-columns: repeat(3, minmax(56px, 1fr)); gap: 6px; }
.terra-level { min-width: 56px; min-height: 56px; padding: 8px 2px; }
.terra-status, .terra-meter { max-width: 100%; }
.sound-match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sound-match-grid .listen-btn { min-width: 64px; min-height: 64px; }
@media (min-width: 720px) {
  .sound-match-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (orientation: landscape) and (min-width: 650px) {
  .terra-wrap { display: grid; grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); align-items: center; gap: 8px 12px; }
  .terra-jar { grid-column: 1; grid-row: 1; justify-self: center; width: min(100%, 240px, max(110px, calc((var(--game-available-height, 650px) - 74px) / 1.06))); }
  .terra-controls { grid-column: 2; grid-row: 1; }
  .terra-status { grid-column: 1 / -1; grid-row: 2; }
  .terra-meter { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
}

/* Balance the game, not just its wallpaper. Only small choice boards use this. */
body:has(.choice-screen) > main { justify-content: center; padding-block: 24px; }
.play-screen .instruction-card .eyebrow { font-size: 11px; letter-spacing: 0.08em; }
.instruction-skill { display: block; margin-top: 6px; color: #526b70; font-size: 12px; font-weight: 700; line-height: 1.3; }
.play-screen.choice-screen { width: min(1040px, 100%); max-width: 600px; }
.play-screen #game-grid.choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(100%, 600px, calc(100dvh - 232px));
  gap: clamp(12px, 2vw, 22px);
  align-self: center;
}
.choice-grid .tile { border: 2px solid #e1e9e4; border-radius: clamp(22px, 3vw, 36px); padding: clamp(16px, 3vw, 36px); box-shadow: 0 6px 0 #c3d4cc55, 0 12px 28px #284c6420; }
.choice-grid .tile.tile-svg svg { max-width: 100%; max-height: 100%; }
.choice-grid .tile .premium-game-object { width: 100%; height: 100%; }
.choice-grid .tile:last-child:nth-child(3) { grid-column: 1 / -1; width: calc((100% - clamp(12px, 2vw, 22px)) / 2); justify-self: center; }

@media (min-width: 760px) and (min-height: 541px) and (orientation: landscape) {
  .play-screen.choice-screen {
    max-width: 1040px;
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(24px, 4vw, 64px);
    row-gap: 16px;
    align-content: center;
    align-items: center;
  }
  .choice-screen .top-bar { grid-column: 1; grid-row: 1; align-self: end; }
  .choice-screen .instruction-card { grid-column: 1; grid-row: 2; align-self: start; padding: 18px; }
  .choice-screen #game-grid.choice-grid { grid-column: 2; grid-row: 1 / span 2; width: min(100%, 600px, calc(100dvh - 64px)); justify-self: center; }
}
@media (orientation: landscape) and (max-height: 540px) {
  body:has(.choice-screen) > main { padding-block: 12px; }
  .choice-screen #game-grid.choice-grid { width: min(100%, calc(100dvh - 32px)); justify-self: center; }
  .choice-screen .instruction-skill { display: none; }
}

.academy-nav { flex-wrap: wrap; }
.academy-nav-actions { flex-wrap: wrap; }
.academy-nav-actions .nav-action { min-height: 48px; }
.nav-action--focus { color: #245d51; background: #f2faf4; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.nav-age { font-size: 10px; padding: 3px 6px; border-radius: 8px; background: #dbece0; }
.more-ways-banner { display: grid; grid-template-columns: 94px minmax(0, 1fr) auto; align-items: center; gap: 20px; margin: 22px 0; padding: 22px; border-radius: 28px; border: 1px solid #b5cec1; background: linear-gradient(120deg, #fcfff8, #e8f3e9); box-shadow: 0 7px 22px #2a5b4020; }
.more-ways-art { position: relative; height: 82px; }
.more-ways-art img { position: absolute; width: 74px; height: 74px; }
.more-ways-art img:last-child { width: 50px; height: 50px; right: -6px; bottom: -3px; }
.more-ways-banner h2 { margin: 5px 0 8px; font-size: clamp(19px, 2vw, 25px); line-height: 1.2; }
.more-ways-banner p { margin: 0; color: #476556; font-size: 14px; line-height: 1.5; max-width: 640px; }
.more-ways-banner .section-kicker { color: #2e7159; font-size: 10px; }
.more-ways-link { display: flex; gap: 12px; align-items: center; justify-content: center; min-height: 56px; padding: 13px 18px; border-radius: 18px; background: #24664f; color: #fff; text-decoration: none; font-size: 14px; font-weight: 800; }
@media (max-width: 650px) {
  .academy-nav { gap: 12px; }
  .academy-nav-actions { margin-left: auto; gap: 6px; }
  .nav-action--focus { padding-inline: 10px; font-size: 12px; }
  .more-ways-banner { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 16px; margin-block: 16px; }
  .more-ways-art { height: 58px; }
  .more-ways-art img { width: 52px; height: 52px; }
  .more-ways-art img:last-child { width: 34px; height: 34px; }
  .more-ways-banner p { font-size: 12px; }
  .more-ways-link { grid-column: 1 / -1; }
}