@charset "UTF-8";

:root{
  --ink:#283246;
  --cream:#fff7df;
  --sky:#bcecff;
  --grass:#a9dc78;
  --peach:#ffad78;
  --pink:#ff8fb5;
  --violet:#9d8cff;
  --outline:#3d4960;
  --radius-sm:18px;
  --radius-md:24px;
  --radius-lg:32px;
  --outline-width:3px;
  --tactile-shadow:0 6px 0 #3d496033;
  --space-1:6px;
  --space-2:10px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --press-time:140ms;
  --page-time:320ms;
  --game-accent:#ff9f43;
  --game-accent-deep:#c96622;
  --game-soft:#fff0bd;
  --game-surface:#fffaf0;
  --game-backdrop:#d8f3bb;
  --game-glow:#fff7c7;
}

body{
  min-width:320px;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%,#fff 0 3%,transparent 3.3%),
    linear-gradient(180deg,var(--sky) 0 190px,#eef9d8 520px,#fff7df 100%);
}

.game-shell[data-companion="amber"]{
  --game-accent:#ff9f43;
  --game-accent-deep:#c96622;
  --game-soft:#fff0bd;
  --game-surface:#fffaf0;
  --game-backdrop:#cceca4;
  --game-glow:#fff7c7;
}

.game-shell[data-companion="aqua"]{
  --game-accent:#43bfe8;
  --game-accent-deep:#237eaa;
  --game-soft:#c9f4ff;
  --game-surface:#f2fcff;
  --game-backdrop:#b8e9ec;
  --game-glow:#e6fbff;
}

.game-shell[data-companion="lilac"]{
  --game-accent:#a98bea;
  --game-accent-deep:#7155b8;
  --game-soft:#eadfff;
  --game-surface:#fbf7ff;
  --game-backdrop:#dcd1f5;
  --game-glow:#fff0ff;
}

.game-shell{
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  min-width:0;
  min-height:100vh;
  overflow-x:clip;
  background:
    radial-gradient(circle at 92% 7%,var(--game-glow) 0 7%,transparent 7.3%),
    linear-gradient(180deg,#ffffff66 0 96px,transparent 96px),
    linear-gradient(145deg,var(--game-backdrop),var(--cream) 62%);
}

.game-shell :where(button,a,[role="button"],input,select){
  min-height:44px;
}

.game-shell a{
  display:inline-block;
}

.game-shell .provider-identity{display:flex}

.game-shell button{
  transition:transform var(--press-time) ease,box-shadow var(--press-time) ease,filter var(--press-time) ease;
}

.game-shell :where(.btn-primary,.toy-button,.care-tool,.learning-island){
  min-height:56px;
}

.game-shell button:not(:disabled):active{
  transform:translateY(4px);
}

.game-hud{
  grid-column:1/-1;
  position:sticky;
  top:0;
  z-index:40;
  height:auto;
  min-height:88px;
  display:grid;
  grid-template-columns:minmax(210px,1fr) auto auto auto;
  align-items:center;
  gap:var(--space-3);
  padding:12px 24px;
  border:0;
  border-bottom:var(--outline-width) solid var(--outline);
  background:#fffdf2ed;
  box-shadow:0 5px 0 #3d496014;
  backdrop-filter:blur(10px);
}

.game-title{
  min-height:60px;
  margin:0;
  padding:3px 10px 3px 4px;
  gap:10px;
  border-radius:var(--radius-sm);
}

.game-title img{
  width:48px;
  height:56px;
  filter:drop-shadow(0 4px 0 #3d496020);
}

.game-title__full{display:block}
.game-title .game-title__short{display:none}
.game-title strong{font-size:1.1rem;line-height:1.2;color:var(--ink)}
.game-title small{display:block;margin-top:3px;font-size:.65rem;font-weight:800;letter-spacing:.12em;color:#6c7485}

.hud-date{
  display:grid;
  min-width:120px;
  line-height:1.25;
  color:#6b7180;
}

.hud-date span{font-size:.68rem;font-weight:900;letter-spacing:.12em}
.hud-date b{font-size:.86rem;color:var(--ink)}

.hud-stats{display:flex;align-items:center;gap:8px}
.hud-chip{
  min-height:54px;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:1fr 1fr;
  align-items:center;
  column-gap:7px;
  min-width:92px;
  padding:6px 13px;
  border:2px solid var(--outline);
  border-radius:999px;
  background:#fff;
  box-shadow:0 4px 0 #3d496025;
  line-height:1;
}

.hud-chip>span{grid-row:1/3;font-size:1.3rem}
.hud-chip>b{align-self:end;font-size:1rem}
.hud-chip>small{align-self:start;margin-top:2px;font-size:.75rem;font-weight:800;color:#3f4656}
.hud-chip--leaf{background:#effbdc}
.hud-chip--star{background:#fff3bd}
.hud-chip--star>span{color:#e1a526}
.hud-chip--today{background:var(--game-soft)}
.hud-chip--today>span{color:var(--game-accent-deep)}
.hud-chip--today b small{font-size:.68rem}

.parent-zone--quick{
  padding:0;
  border:0;
  background:transparent;
}

.game-hud .parent-button{
  min-width:106px;
  min-height:50px;
  justify-content:center;
  border:2px solid var(--outline);
  border-radius:999px;
  background:#eef1f8;
  box-shadow:0 4px 0 #3d49602e;
  color:#3f4960;
}

.game-dock{
  grid-column:1;
  grid-row:2;
  position:sticky;
  inset:auto;
  top:112px;
  z-index:30;
  width:auto;
  height:calc(100vh - 128px);
  align-self:start;
  margin:16px 8px 16px 12px;
  padding:10px 8px;
  border:var(--outline-width) solid var(--outline);
  border-radius:28px;
  background:#fffdf2e8;
  box-shadow:var(--tactile-shadow);
}

.game-dock__nav{display:grid;gap:10px}
.game-dock__nav button{
  min-width:78px;
  min-height:70px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  padding:8px 6px;
  border:2px solid transparent;
  border-radius:20px;
  background:transparent;
  color:#616b7d;
  font-size:.78rem;
  font-weight:900;
  text-align:center;
}

.game-dock__nav button:hover{background:#fff}
.game-dock__nav button[aria-current="page"]{
  color:var(--ink);
  border-color:var(--outline);
  background:var(--game-soft);
  box-shadow:0 5px 0 var(--game-accent-deep);
}

.game-dock__nav button[aria-current="page"]:active{box-shadow:0 1px 0 var(--game-accent-deep)}
.game-dock__nav .nav-icon{width:32px;height:32px;font-size:1.55rem}

.game-stage{
  grid-column:2;
  grid-row:2;
  width:100%;
  min-width:0;
  margin:0;
}

.game-world{
  position:relative;
  width:min(1280px,100%);
  max-width:none;
  min-width:0;
  min-height:calc(100vh - 88px);
  margin:0 auto;
  padding:28px clamp(22px,4vw,54px) 48px;
  animation:game-world-in var(--page-time) cubic-bezier(.2,.8,.2,1) both;
}

.game-shell :where(.card,.home-grid,.world-home,.care-layout,.record-grid,.mission-grid,.metrics,.theme-grid,.learn-categories,.adventure-path){
  min-width:0;
  max-width:100%;
}

.game-world::before{
  content:"";
  position:absolute;
  inset:12px 16px auto;
  height:210px;
  z-index:-1;
  pointer-events:none;
  border:2px solid #ffffffa8;
  border-radius:var(--radius-lg);
  background:linear-gradient(145deg,#ffffff6e,transparent 60%);
}

.game-shell .btn{
  min-height:50px;
  border:var(--outline-width) solid var(--outline);
  border-radius:var(--radius-sm);
  box-shadow:var(--tactile-shadow);
}

.game-shell .btn-primary{
  min-height:56px;
  background:var(--game-accent);
  color:var(--ink);
  box-shadow:0 6px 0 var(--game-accent-deep);
}

.game-shell .btn-primary:hover{background:var(--game-accent);filter:saturate(1.08) brightness(1.03)}
.game-shell .btn-primary:not(:disabled):active{box-shadow:0 2px 0 var(--game-accent-deep)}
.game-shell .btn-ghost{background:#fffdf2;color:var(--ink)}

.game-shell .card{
  border:var(--outline-width) solid #3d496028;
  border-radius:var(--radius-lg);
  background:var(--game-surface);
  box-shadow:0 7px 0 #3d496014;
}

.parent-zone{
  color:#344059;
  background:#f7f2e5;
}

.provider-footer.parent-zone{
  width:min(1180px,calc(100% - 44px));
  margin:18px auto 34px;
  padding:18px 22px;
  border:2px solid #69728766;
  border-radius:var(--radius-md);
  box-shadow:0 4px 0 #3d49601d;
}

.parent-zone__note{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid #77809438;
}

.parent-zone__note>span{font-size:1.25rem}
.parent-zone__note p{font-weight:900}
.parent-zone__note .text-link{margin-left:auto;color:#40506d;min-height:44px}
.provider-footer .provider{margin:0;padding:0;border:0;background:transparent}

@keyframes game-world-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:900px){
  .game-hud{grid-template-columns:minmax(190px,1fr) auto auto}
  .hud-date{display:none}
  .hud-chip{min-width:78px;padding-inline:10px}
}

@media(min-width:701px) and (max-width:900px){
  .game-world{padding:24px 24px 42px}
  .world-home,.care-layout{grid-template-columns:1fr}
  .learning-islands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .provider-footer.parent-zone{width:calc(100% - 48px)}
}

@media(max-width:700px){
  body{background:linear-gradient(180deg,var(--sky),#eef9d8 58%,var(--cream))}
  .game-shell{display:block;padding-bottom:calc(91px + env(safe-area-inset-bottom))}
  .game-hud{
    position:sticky;
    display:flex;
    min-height:76px;
    gap:7px;
    padding:7px 10px;
    border-bottom-width:2px;
  }
  .game-title{min-width:0;min-height:52px;padding:2px;flex:0 0 72px;gap:3px}
  .game-title img{width:34px;height:42px}
  .game-title .game-title__full{display:none}
  .game-title .game-title__short{display:block;color:var(--ink);font-size:.72rem;font-weight:900;letter-spacing:0;line-height:1}
  .hud-stats{display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));gap:4px;flex:1;min-width:0}
  .hud-chip{
    min-width:0;
    min-height:50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1px;
    width:auto;
    padding:4px;
    border-width:2px;
    border-radius:16px;
  }
  .hud-chip>span{font-size:.96rem;line-height:1}
  .hud-chip>b{font-size:.8rem;line-height:1}
  .hud-chip>small{display:none}
  .hud-chip--today{display:flex}
  .parent-zone--quick{flex:0 0 auto}
  .game-hud .parent-button{min-width:48px;width:48px;min-height:48px;padding:4px;border-radius:16px}
  .game-hud .parent-label{display:none}
  .game-dock{
    position:fixed;
    inset:auto 8px calc(8px + env(safe-area-inset-bottom)) 8px;
    width:auto;
    height:auto;
    margin:0;
    padding:6px;
    border-width:2px;
    border-radius:24px;
    background:#fffdf5f5;
    box-shadow:0 5px 0 #3d496030;
    backdrop-filter:blur(12px);
  }
  .game-dock__nav{grid-template-columns:repeat(4,1fr);gap:5px}
  .game-dock__nav button{
    min-width:0;
    min-height:64px;
    padding:5px 3px;
    border-radius:17px;
    font-size:.72rem;
  }
  .game-dock__nav button[aria-current="page"]{box-shadow:0 4px 0 var(--game-accent-deep)}
  .game-stage{width:100%}
  .game-world{
    grid-template-columns:1fr;
    max-width:100%;
    min-height:calc(100vh - 76px);
    padding:18px 14px 28px;
    overflow-x:clip;
  }
  .world-home,.care-layout{grid-template-columns:1fr}
  .care-layout,.record-grid,.mission-grid,.metrics,.theme-grid{grid-template-columns:1fr}
  .game-world::before{inset:7px 6px auto;height:160px;border-radius:24px}
  .provider-footer.parent-zone{width:calc(100% - 28px);margin:10px auto 22px;padding:15px}
  .parent-zone__note{display:grid;grid-template-columns:auto 1fr;gap:7px 10px}
  .parent-zone__note .text-link{grid-column:1/-1;margin:0;text-align:left}
}

@media(prefers-reduced-motion:reduce){
  .game-shell *,
  .game-shell *::before,
  .game-shell *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}

/* The companion room uses three CSS-only scenery planes, so it remains light and themeable. */
.world-layer{pointer-events:none}
.world-room{
  --room-sky:#dff5c8;
  --room-horizon:#aad979;
  --room-ground:#82b35e;
  --room-detail:#4d813f;
  background:linear-gradient(180deg,var(--room-sky) 0 58%,var(--room-horizon) 58% 75%,var(--room-ground) 75%);
}
.world-layer--back{
  background:
    radial-gradient(ellipse at 16% 19%,#fff 0 5%,transparent 5.4%),
    radial-gradient(ellipse at 23% 18%,#fff 0 7%,transparent 7.4%),
    radial-gradient(ellipse at 30% 21%,#fff 0 5%,transparent 5.4%),
    radial-gradient(circle at 84% 17%,#fff4a2 0 8%,#fff8c8 8.5% 11%,transparent 11.4%);
  opacity:.92;
}
.world-layer--mid::before,
.world-layer--mid::after{
  content:"";
  position:absolute;
  pointer-events:none;
}
.world-layer--mid::before{
  left:-7%;
  right:36%;
  bottom:17%;
  height:42%;
  border-radius:52% 75% 0 0;
  background:color-mix(in srgb,var(--room-horizon) 86%,white);
  transform:rotate(3deg);
}
.world-layer--mid::after{
  left:46%;
  right:-9%;
  bottom:17%;
  height:35%;
  border-radius:78% 48% 0 0;
  background:color-mix(in srgb,var(--room-horizon) 78%,var(--room-detail));
  transform:rotate(-3deg);
}
.world-layer--front{
  background:
    radial-gradient(ellipse at 7% 86%,var(--room-detail) 0 4%,transparent 4.5%),
    radial-gradient(ellipse at 15% 96%,#fff2a2 0 2.2%,transparent 2.7%),
    radial-gradient(ellipse at 88% 92%,var(--room-detail) 0 5%,transparent 5.5%),
    radial-gradient(ellipse at 96% 78%,#fff 0 2%,transparent 2.5%),
    linear-gradient(180deg,transparent 0 45%,color-mix(in srgb,var(--room-ground) 88%,#fff) 46% 100%);
  opacity:.9;
}

.game-shell[data-companion="amber"] .world-room{
  --room-sky:#dcf7c9;
  --room-horizon:#a9db76;
  --room-ground:#75a957;
  --room-detail:#3f7738;
  background:linear-gradient(180deg,#d8f4ff 0 48%,#dff4b8 48% 67%,#91c66d 67% 100%);
}
.game-shell[data-companion="amber"] .world-layer--mid{
  background:
    radial-gradient(ellipse at 9% 58%,#4d8b43 0 5%,transparent 5.5%),
    radial-gradient(ellipse at 94% 52%,#5a9448 0 7%,transparent 7.5%);
}
.game-shell[data-companion="aqua"] .world-room{
  --room-sky:#d9f8ff;
  --room-horizon:#8de2ed;
  --room-ground:#65bfc8;
  --room-detail:#248ca6;
  background:linear-gradient(180deg,#dffbff 0 42%,#aeeaf2 42% 68%,#78cfdb 68% 100%);
}
.game-shell[data-companion="aqua"] .world-layer--back{
  background:
    radial-gradient(circle at 14% 21%,#ffffffb8 0 2%,transparent 2.4%),
    radial-gradient(circle at 24% 34%,#ffffffa6 0 3%,transparent 3.4%),
    radial-gradient(circle at 78% 18%,#ffffffc2 0 2.5%,transparent 2.9%),
    radial-gradient(circle at 91% 37%,#ffffff9e 0 4%,transparent 4.4%);
}
.game-shell[data-companion="aqua"] .world-layer--front{
  background:
    radial-gradient(ellipse at 12% 88%,#fff2b7 0 4%,transparent 4.5%),
    radial-gradient(ellipse at 89% 92%,#ffcec4 0 3.5%,transparent 4%),
    repeating-radial-gradient(ellipse at 50% 120%,#9ce7ee 0 16px,#6bc7d2 17px 34px);
  opacity:.88;
}
.game-shell[data-companion="lilac"] .world-room{
  --room-sky:#ddd2ff;
  --room-horizon:#bda6e8;
  --room-ground:#9e86d2;
  --room-detail:#6d56a8;
  background:linear-gradient(180deg,#cbd3ff 0 45%,#ded1ff 45% 68%,#ae98dd 68% 100%);
}
.game-shell[data-companion="lilac"] .world-layer--back{
  background:
    radial-gradient(circle at 12% 20%,#fffbd5 0 1.3%,transparent 1.7%),
    radial-gradient(circle at 28% 31%,#fff 0 1%,transparent 1.4%),
    radial-gradient(circle at 73% 15%,#fffbd5 0 1.5%,transparent 1.9%),
    radial-gradient(circle at 90% 32%,#fff 0 1.1%,transparent 1.5%),
    radial-gradient(circle at 82% 13%,#fff2a2 0 7%,#fff8c8 7.5% 10%,transparent 10.4%);
}
.game-shell[data-companion="lilac"] .world-layer--front{
  background:
    radial-gradient(circle at 9% 80%,#fff2a2 0 2%,transparent 2.5%),
    radial-gradient(circle at 91% 82%,#f7d5ff 0 2.4%,transparent 2.9%),
    linear-gradient(180deg,transparent 0 45%,#a991dc 46% 100%);
}

.world-room .pet-tag,
.world-room .life-speech{
  border:2px solid #fff;
  background:#fffdf2e8;
  box-shadow:0 4px 0 #3d49601f;
}
.world-room .stage-tag{
  padding:5px 12px;
  border:2px solid #ffffffb8;
  border-radius:999px;
  background:#fffdf2c7;
  color:#3f4b5f;
  font-weight:900;
}
.world-room .growth{
  padding:10px 14px;
  border:2px solid #ffffffbd;
  border-radius:18px;
  background:#fffdf2d6;
}
.world-room .bar{background:#ffffffc7;border:1px solid #3d496026}
.world-room .bar>span{background:var(--game-accent-deep)}
.adventure-invite{
  background:
    radial-gradient(circle at 93% 14%,var(--game-glow) 0 12%,transparent 12.5%),
    var(--game-surface)!important;
}
.adventure-stage.is-current .adventure-stage__state{background:#fff;color:#3a4354}
.adventure-stage.is-completed .adventure-stage__icon{border-color:#5d7e5066;background:#f5ffe0}

@media(max-width:700px){
  .world-room{width:100%;min-width:0}
  .world-layer--mid::before{left:-20%;right:31%;height:35%}
  .world-layer--mid::after{left:42%;right:-22%;height:30%}
  .adventure-path{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;overflow:visible}
}

/* Mini-games are small physical play sets: one instruction, one stage, one clear action. */
.mini-area{max-width:820px}
.mini-card{
  min-height:560px;
  padding:24px clamp(18px,4vw,38px) 30px;
  overflow:hidden;
  border-color:#3d496044!important;
  background:linear-gradient(180deg,#fffef8,var(--game-surface))!important;
}
.mini-instruction{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  margin:0 auto 12px;
}
.mini-instruction h1{margin:0;text-align:left;font-size:clamp(1.3rem,3vw,1.75rem)}
.mini-instruction .game-demo{
  margin:0;
  padding:7px 12px;
  border:2px solid #3d49603d;
  border-radius:999px;
  background:#fff;
  color:#4d5870;
  font-weight:900;
}
.play-stage{
  position:relative;
  z-index:1;
  min-height:322px;
  margin:8px 0 14px;
  padding:18px clamp(12px,3vw,28px) 20px;
  border:3px solid #3d496047;
  border-radius:30px;
  box-shadow:inset 0 -7px 0 #3d496014,0 5px 0 #3d49601b;
  isolation:isolate;
}
.toy-button{
  position:relative;
  min-height:56px;
  border:3px solid var(--outline)!important;
  box-shadow:0 7px 0 #3d49604d!important;
  font-weight:900;
  cursor:pointer;
}
.toy-button:not(:disabled):hover{filter:saturate(1.08) brightness(1.03)}
.toy-button:not(:disabled):active{
  transform:translateY(5px)!important;
  box-shadow:0 2px 0 #3d49604d!important;
}
.toy-button:focus-visible{outline:4px solid #fff;box-shadow:0 0 0 7px var(--game-accent-deep),0 7px 0 #3d49604d!important}
.toy-button:disabled{cursor:default;filter:saturate(.75);opacity:.72}
.toy-button--small{min-width:66px;font-size:1.55rem}
.toy-button--primary{box-shadow:0 7px 0 var(--game-accent-deep)!important}
.toy-button--primary:not(:disabled):active{box-shadow:0 2px 0 var(--game-accent-deep)!important}

.play-stage--snack{
  background:
    linear-gradient(135deg,#ffffff35 25%,transparent 25%) 0 0/34px 34px,
    linear-gradient(315deg,#ffffff35 25%,transparent 25%) 0 0/34px 34px,
    #f5b684;
}
.play-stage--snack::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:10px;
  border:2px dashed #fff9;
  border-radius:23px;
  pointer-events:none;
}
.picnic-fringe{
  position:absolute;
  inset:auto 24px -11px;
  height:14px;
  background:repeating-linear-gradient(90deg,#d77f5d 0 4px,transparent 4px 10px);
  clip-path:polygon(0 0,100% 0,98% 100%,96% 0,94% 100%,92% 0,90% 100%,88% 0,86% 100%,84% 0,82% 100%,80% 0,78% 100%,76% 0,74% 100%,72% 0,70% 100%,68% 0,66% 100%,64% 0,62% 100%,60% 0,58% 100%,56% 0,54% 100%,52% 0,50% 100%,48% 0,46% 100%,44% 0,42% 100%,40% 0,38% 100%,36% 0,34% 100%,32% 0,30% 100%,28% 0,26% 100%,24% 0,22% 100%,20% 0,18% 100%,16% 0,14% 100%,12% 0,10% 100%,8% 0,6% 100%,4% 0,2% 100%);
}
.play-stage--snack .snack-request{position:absolute;left:24px;top:18px;gap:8px}
.play-stage--snack .snack-request img{width:112px;height:120px;filter:drop-shadow(0 6px 0 #7c47362b)}
.play-stage--snack .number-cloud{
  padding:8px 15px;
  border:3px solid #7b6048;
  background:#fffdf2;
  box-shadow:0 5px 0 #7b60483b;
}
.play-stage--snack .number-cloud b{font-size:2rem}
.play-stage--snack .snack-bowl{
  width:min(360px,72%);
  min-height:112px;
  margin:70px auto 16px;
  border:3px solid #466679;
  background:linear-gradient(180deg,#e8fbff,#b5dce5);
  box-shadow:inset 0 -12px 0 #7fb6c5,0 8px 0 #4768784c;
}
.play-stage--snack .snack-controls{position:relative;z-index:2;margin:0 auto 12px}
.play-stage--snack .snack-source{background:#fff2c9;border-radius:20px}

.play-stage--shape{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  align-items:center;
  gap:18px;
  background:
    radial-gradient(circle at 13% 18%,#fff 0 3px,transparent 4px),
    radial-gradient(circle at 87% 82%,#fff 0 3px,transparent 4px),
    #cceff2;
}
.play-stage--shape .shape-target{
  min-height:230px;
  padding:12px 8px;
  border:3px solid #3d496047;
  border-radius:26px;
  background:#fffce8;
  box-shadow:0 7px 0 #678b9544;
}
.play-stage--shape .shape-target>span:first-child{font-size:.9rem;font-weight:900;color:#43516a}
.play-stage--shape .shape-target .toy-shape{color:var(--game-accent-deep);filter:drop-shadow(0 5px 0 #3d496033)}
.shape-board{
  position:relative;
  padding:32px 17px 22px;
  border:4px solid #795a39;
  border-radius:28px;
  background:linear-gradient(150deg,#f4c26f,#dea253);
  box-shadow:inset 0 5px 0 #ffe4a2,0 9px 0 #795a3966;
}
.shape-board__peg{position:absolute;top:12px;width:12px;height:12px;border-radius:50%;background:#795a39;box-shadow:inset 0 2px 0 #fff7}
.shape-board__peg--left{left:16px}.shape-board__peg--right{right:16px}
.shape-board .shape-options{margin:0;gap:12px}
.shape-board .shape-hole{
  min-height:128px;
  padding:0;
  border-color:#6f563e!important;
  border-radius:24px;
  background:#c88c46;
  box-shadow:inset 0 8px 0 #795a3966,0 7px 0 #795a39!important;
}
.shape-board .shape-hole .toy-shape{color:#795a39;text-shadow:0 2px 0 #f8d28b66}
.shape-board .shape-hole.fitted{background:#e9f3bd;box-shadow:inset 0 5px 0 #fff9,0 7px 0 #678046!important}
.shape-board .shape-hole.fitted .toy-shape{color:var(--game-accent-deep)}

.play-stage--hide{
  padding-top:12px;
  background:linear-gradient(180deg,#bdeaff 0 46%,#d7efa9 46% 68%,#81bd68 68%);
}
.play-stage--hide::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:auto 0 0;
  height:32%;
  border-radius:0 0 26px 26px;
  background:repeating-radial-gradient(ellipse at 50% 110%,#73ad5b 0 16px,#85bd68 17px 32px);
  pointer-events:none;
}
.play-stage--hide .game-hint{
  position:relative;
  z-index:3;
  display:inline-block;
  margin:0;
  padding:7px 15px;
  border:2px solid #3d49603f;
  border-radius:999px;
  background:#fffdf2e8;
  color:#3e4c61;
  font-weight:900;
}
.garden-sky span{position:absolute;z-index:-1;width:80px;height:24px;border-radius:999px;background:#fff9;filter:blur(.3px)}
.garden-sky span::before,.garden-sky span::after{content:"";position:absolute;bottom:0;border-radius:50%;background:inherit}
.garden-sky span::before{left:13px;width:34px;height:34px}.garden-sky span::after{right:9px;width:27px;height:27px}
.garden-sky span:first-child{left:9%;top:35px}.garden-sky span:last-child{right:8%;top:62px;scale:.72}
.play-stage--hide .hide-garden{
  position:relative;
  z-index:2;
  margin:18px auto 13px;
  padding:0 8px 10px;
  background:transparent;
}
.play-stage--hide .hiding-place{
  min-width:0;
  min-height:196px;
  padding:0 2px 9px;
  border-color:transparent!important;
  border-radius:28px;
  background:transparent;
  box-shadow:0 7px 0 transparent!important;
}
.play-stage--hide .hiding-place[data-game-answer]{border-color:#527b4c!important;background:#ffffff24;box-shadow:0 7px 0 #436b3e66!important}
.play-stage--hide .hiding-place[data-game-answer]:active{box-shadow:0 2px 0 #436b3e66!important}
.play-stage--hide .bush{filter:drop-shadow(0 8px 0 #315b343d)}
.toy-button--peek{display:inline-grid;place-items:center;margin:2px auto;padding:8px 18px;border-radius:999px;background:#fffdf2;color:#3d4960}
.shape-board .shape-hole.toy-button:focus-visible{
  outline:4px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 7px var(--game-accent-deep),inset 0 8px 0 #795a3966,0 7px 0 #795a39!important;
}
.play-stage--hide .hiding-place.toy-button:focus-visible{
  outline:4px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 7px var(--game-accent-deep),0 7px 0 #436b3e66!important;
}

.answer-state{
  min-height:64px;
  width:min(520px,100%);
  margin:16px auto 10px;
  padding:11px 18px;
  justify-content:center;
  border:2px solid transparent;
  border-radius:20px;
  background:#ffffffb8;
  color:#596478;
}
.answer-state b{font-size:1.25rem;color:inherit}
.answer-state.is-ready{border-color:#3d496024;background:#fffdf2b8}
.answer-state.is-correct{border-color:#77a950;background:#ebf9d8;color:#386b34;box-shadow:0 5px 0 #547d3536}
.answer-state.is-retry{border-color:#d49a55;background:#fff2d4;color:#79552f;box-shadow:0 5px 0 #a96e3033}
.reward-ribbon{
  position:relative;
  z-index:4;
  width:min(290px,80%);
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:2px auto 0;
  border:3px solid #8f6127;
  border-radius:16px 16px 8px 8px;
  background:linear-gradient(180deg,#ffe98c,#ffc94f);
  box-shadow:0 6px 0 #a66e2f55;
  color:#654315;
  animation:reward-ribbon-in .45s cubic-bezier(.2,.85,.3,1.18) both;
}
.reward-ribbon::before,.reward-ribbon::after{content:"";position:absolute;z-index:-1;bottom:-12px;border-style:solid}
.reward-ribbon::before{left:-18px;border-width:18px 18px 0 0;border-color:#e89c3d transparent transparent}
.reward-ribbon::after{right:-18px;border-width:18px 0 0 18px;border-color:#e89c3d transparent transparent}
.reward-ribbon strong{font-size:1.1rem;letter-spacing:.06em}
.reward-star{color:#fff8c4;font-size:1.2rem;text-shadow:0 2px 0 #9d672f}
.reward-star--small{font-size:.8rem}
.mini-card.success .mini-companion{margin-top:5px;margin-bottom:4px;width:132px;height:112px}
.mini-card.success>.toy-button--primary{margin-top:10px}

@keyframes reward-ribbon-in{
  from{opacity:0;transform:translateY(8px) scale(.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:700px){
  .mini-card{min-height:520px;padding:17px 12px 24px}
  .mini-instruction{grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-bottom:9px}
  .mini-instruction h1{font-size:1.18rem;line-height:1.45}
  .mini-instruction .game-demo{padding:5px 9px;font-size:.75rem}
  .play-stage{min-height:310px;margin-inline:-1px;padding:12px 9px 16px;border-radius:25px}
  .play-stage--snack .snack-request{left:10px;top:12px}
  .play-stage--snack .snack-request img{width:90px;height:103px}
  .play-stage--snack .number-cloud{padding:6px 10px}
  .play-stage--snack .number-cloud b{font-size:1.6rem}
  .play-stage--snack .snack-bowl{width:82%;min-height:96px;margin-top:66px}
  .play-stage--snack .snack-source{padding:8px 13px;font-size:1.8rem}
  .play-stage--snack .snack-source span{font-size:.84rem}
  .play-stage--shape{grid-template-columns:100px minmax(0,1fr);gap:9px}
  .play-stage--shape .shape-target{min-height:205px;padding:8px 3px}
  .play-stage--shape .shape-target .toy-shape{width:76px;height:82px;font-size:62px}
  .shape-board{padding:28px 8px 15px;border-radius:23px}
  .shape-board .shape-options{grid-template-columns:repeat(var(--choices),minmax(0,1fr));gap:5px}
  .shape-board .shape-hole{min-height:94px;border-width:2px!important;border-radius:17px}
  .shape-board .shape-hole .toy-shape{width:100%;height:68px;font-size:clamp(2rem,10vw,3rem)}
  .play-stage--hide .hide-garden{margin-top:12px;padding-inline:0}
  .play-stage--hide .hiding-place{min-height:174px}
  .play-stage--hide .bush{font-size:61px}
  .play-stage--hide .hiding-place img{width:66px;height:94px;bottom:30px}
  .answer-state{margin-top:12px;padding:9px 12px}
  .reward-ribbon{min-height:44px}
}

@media(max-width:520px){
  .play-stage--shape{grid-template-columns:1fr}
  .play-stage--shape .shape-target{min-height:92px;display:grid;grid-template-columns:1fr auto auto;padding:7px 12px}
  .play-stage--shape .shape-target .toy-shape{width:58px;height:64px;font-size:48px}
  .play-stage--shape .down-arrow{transform:rotate(-90deg)}
  .shape-board{padding-top:25px}
  .play-stage--hide .bush{font-size:52px}
}

@media(prefers-reduced-motion:reduce){
  .reward-ribbon{animation:none}
}

/* Playful secondary worlds: learning, care, growth, and the calm parent area. */
.learning-map{
  position:relative;
  isolation:isolate;
}
.learning-map::before{
  content:"";
  position:absolute;
  inset:84px -18px 76px;
  z-index:-1;
  border-radius:42px;
  background:
    radial-gradient(circle at 16% 17%,#fff 0 18px,transparent 19px),
    radial-gradient(circle at 87% 38%,#fff9 0 28px,transparent 29px),
    linear-gradient(180deg,#c6edff 0 48%,#e8f7d1 48% 100%);
  box-shadow:inset 0 0 0 3px #ffffff80;
}
.learning-islands{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px 20px;
  padding:14px 12px 34px;
}
.learning-island{
  position:relative;
  isolation:isolate;
  min-height:230px;
  overflow:hidden;
  padding:26px 22px 20px;
  border:3px solid color-mix(in srgb,var(--cat) 52%,var(--outline));
  border-radius:48% 52% 27% 31% / 28% 27% 19% 21%;
  background:
    radial-gradient(circle at 75% 25%,#fff9 0 24px,transparent 25px),
    linear-gradient(160deg,color-mix(in srgb,var(--cat) 18%,white),#fffdf2 64%);
  box-shadow:0 11px 0 color-mix(in srgb,var(--cat) 35%,#849453),0 17px 18px #3d496025;
  transform:translateY(var(--island-shift,0px));
}
.learning-island::after{
  content:"";
  position:absolute;
  inset:auto 14% -16px;
  z-index:-1;
  height:42px;
  border-radius:50%;
  background:color-mix(in srgb,var(--cat) 28%,#9ccc6a);
  filter:blur(.2px);
}
.learning-island:hover:not(:disabled){
  transform:translateY(calc(var(--island-shift,0px) - 7px)) rotate(-.5deg);
  box-shadow:0 15px 0 color-mix(in srgb,var(--cat) 35%,#849453),0 21px 22px #3d496025;
}
.learning-island .category-symbol{
  position:relative;
  z-index:2;
  width:66px;
  height:66px;
  border:3px solid #fff;
  border-radius:23px;
  background:color-mix(in srgb,var(--cat) 26%,white);
  box-shadow:0 6px 0 color-mix(in srgb,var(--cat) 36%,#65717d);
  font-size:2rem;
}
.learning-island .category-symbol.numbers{font-size:1.22rem}
.learning-island__copy{position:relative;z-index:2}
.learning-island__copy h2{font-size:1.28rem}
.learning-island__copy p{color:#4d5870;font-weight:700}
.learning-island__scenery{
  position:absolute;
  top:20px;
  right:18px;
  color:color-mix(in srgb,var(--cat) 72%,#3d4960);
  font-size:1.1rem;
  letter-spacing:.28em;
  opacity:.62;
}
.learning-island__cloud{
  position:absolute;
  top:13px;
  right:46px;
  width:58px;
  height:22px;
  border-radius:999px;
  background:#fff9;
}
.learning-island__progress{position:relative;z-index:2;color:#3d4960;font-weight:900}
.learning-island .bar{position:relative;z-index:2;height:11px;border:2px solid #ffffffcc;background:#dbe2d5}
.learning-review{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:6px;
  background:linear-gradient(135deg,#fff7d9,#fffdf2);
}
.learning-review .eyebrow{margin-bottom:4px}
.learning-review p{margin-top:5px;color:#5e6574}

.care-world{position:relative}
.care-toolbox{align-content:center;gap:16px}
.care-tool{
  position:relative;
  isolation:isolate;
  min-height:126px;
  overflow:hidden;
  padding:19px 20px;
  border:3px solid var(--outline);
  border-radius:28px;
  background:linear-gradient(145deg,#fff9d9,#ffd497);
  box-shadow:0 8px 0 #c5753d66;
}
.care-tool--water{background:linear-gradient(145deg,#e3fbff,#91dbed);box-shadow:0 8px 0 #3a98b066}
.care-tool--rest{background:linear-gradient(145deg,#f6efff,#c5aef4);box-shadow:0 8px 0 #745eb066}
.care-tool:hover:not(:disabled){transform:translateY(-4px) rotate(-.35deg)}
.care-tool:active:not(:disabled){box-shadow:0 3px 0 #3d496044}
.care-tool:disabled{filter:saturate(.5);opacity:.68;box-shadow:0 4px 0 #3d496035}
.care-tool__glow{
  position:absolute;
  inset:-26px auto auto -18px;
  z-index:-1;
  width:112px;
  height:112px;
  border-radius:50%;
  background:#fff8;
}
.care-tool .care-symbol{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  flex:0 0 76px;
  border:3px solid #fff;
  border-radius:25px;
  background:#ffffffb8;
  box-shadow:0 5px 0 #3d496026;
  font-size:2.75rem;
}
.care-tool__copy{position:relative;z-index:1}
.care-tool__copy strong{font-size:1.06rem}
.care-tool__copy p{color:#3f4a5e;font-weight:650}
.care-tool .end{font-weight:900;color:#344059}

.growth-gallery{
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 8%,#fff 0 3px,transparent 4px),
    radial-gradient(circle at 88% 18%,#fff6bd 0 4px,transparent 5px),
    linear-gradient(180deg,#dff4ff 0 34%,#fff9de 34% 100%);
}
.growth-gallery__intro{color:#536077;margin-bottom:8px}
.growth-gallery__pedestals{align-items:end;margin:22px 0 34px}
.growth-gallery .growth-pedestal{
  position:relative;
  min-height:254px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:visible;
  padding:15px 10px 20px;
  border:0;
  border-radius:36px 36px 18px 18px;
  background:linear-gradient(180deg,#ffffffd9 0 72%,#e6c985 72% 82%,#b78a4a 82% 100%);
  box-shadow:0 12px 0 #6a554136,0 18px 22px #3d496024;
}
.growth-gallery .growth-pedestal.current{
  outline:4px solid var(--game-accent);
  outline-offset:4px;
  background:linear-gradient(180deg,var(--game-glow) 0 72%,#ffd773 72% 82%,var(--game-accent-deep) 82% 100%);
}
.growth-pedestal img{
  height:164px;
  padding:0!important;
  transform-origin:50% 100%;
  animation:pedestal-idle 3.4s ease-in-out calc(var(--pedestal) * -.55s) infinite;
}
.growth-pedestal figcaption{display:grid;gap:1px;position:relative;z-index:2}
.growth-pedestal figcaption small{font-size:.68rem;color:#687084}
.growth-pedestal figcaption strong{font-size:1rem}
.growth-pedestal figcaption em{font-size:.72rem;font-style:normal;color:#714c1f;font-weight:900}
.growth-pedestal__spark{position:absolute;top:12px;right:18px;color:#efb92e;font-size:1.3rem;animation:pedestal-spark 1.8s ease-in-out infinite}
.adult-showcase{
  position:relative;
  overflow:hidden;
  padding:28px 20px 18px;
  border:3px solid #4d5670;
  border-radius:30px;
  background:linear-gradient(180deg,#414967 0 20%,#fff8e8 20% 100%);
}
.adult-showcase h2{position:relative;z-index:1;color:#fff;margin-bottom:28px}
.adult-showcase__light{position:absolute;inset:0 22% auto;height:210px;background:linear-gradient(100deg,transparent,#fff8cf77,transparent);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.adult-showcase .adult-branches{position:relative;z-index:1}

.evolution-stage{
  position:relative;
  isolation:isolate;
  min-height:720px;
  overflow:hidden;
  border:4px solid #573f67;
  background:linear-gradient(180deg,#28213e 0 56%,#6b3f58 56% 60%,#fff2c8 60% 100%);
}
.evolution-stage__content{position:relative;z-index:4;color:#fff}
.evolution-stage__content>.eyebrow{color:#fff4ad}
.evolution-stage__content>p{color:#fff}
.evolution-stage__content>.btn{max-width:520px;color:var(--ink)}
.evolution-curtain{
  position:absolute;
  inset:0 auto 0;
  z-index:3;
  width:28%;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,#b62355 0 22px,#7c1740 22px 44px);
  box-shadow:inset -14px 0 20px #42112d66;
  animation:curtain-open 1.1s cubic-bezier(.3,.7,.2,1) both;
}
.evolution-curtain--left{left:0;transform-origin:left}
.evolution-curtain--right{right:0;transform-origin:right;box-shadow:inset 14px 0 20px #42112d66}
.evolution-spotlight{
  position:absolute;
  z-index:1;
  inset:-40px 13% auto;
  height:500px;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 20%,#fff7b48f 50%,transparent 80%);
  clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);
  animation:spotlight-sway 4.8s ease-in-out infinite alternate;
}
.evolution-stage .growth-reveal,.evolution-stage .before-after{position:relative;z-index:2}

.parent-zone--calm{
  color:#f5f0e3;
  border-color:#2c3855!important;
  background:linear-gradient(145deg,#24304b,#34415e)!important;
  box-shadow:0 6px 0 #111a2c38!important;
}
.parent-zone--calm .parent-zone__note{border-color:#f7efd32e}
.parent-zone--calm .parent-zone__note>span,.parent-zone--calm .parent-zone__note p{color:#f8f1df}
.parent-zone--calm .text-link{color:#fff3c2}
.parent-zone__controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  min-height:44px;
  margin:-4px 0 12px;
  padding-bottom:12px;
  border-bottom:1px solid #f7efd32e;
}
.parent-zone__status{margin-right:auto;font-size:.82rem;color:#dce3ef;overflow-wrap:anywhere}
.parent-zone--calm .provider{color:#28334a;background:#fffaf0}
.parent-zone--page{
  padding:clamp(24px,4vw,44px);
  border-color:#46516a!important;
  background:linear-gradient(145deg,#fffaf0,#f3eddf)!important;
  box-shadow:inset 10px 0 0 #35415d,0 8px 0 #2b344938!important;
}
.parent-zone--page .eyebrow{color:#40506d}

@keyframes pedestal-idle{
  0%,100%{transform:translateY(0) rotate(-.4deg)}
  50%{transform:translateY(-7px) rotate(.4deg)}
}
@keyframes pedestal-spark{0%,100%{transform:scale(.75) rotate(0);opacity:.45}50%{transform:scale(1.2) rotate(35deg);opacity:1}}
@keyframes curtain-open{from{width:49%}to{width:28%}}
@keyframes spotlight-sway{from{transform:translateX(-3%) rotate(-2deg)}to{transform:translateX(3%) rotate(2deg)}}

@media(max-width:850px){
  .learning-islands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .care-toolbox{grid-template-columns:repeat(3,minmax(0,1fr))}
  .care-tool{min-height:164px;flex-direction:column;text-align:center;padding:16px 8px}
  .care-tool .end{margin:0}
}

@media(max-width:700px){
  .learning-map::before{inset:76px -10px 92px}
  .learning-islands{gap:18px 10px;padding-inline:2px}
  .learning-island{min-height:210px;padding:20px 13px 16px;border-radius:38px 38px 25px 25px}
  .learning-island .category-symbol{width:56px;height:56px;font-size:1.65rem}
  .learning-island__copy h2{font-size:1.06rem}
  .learning-island__copy p{font-size:.78rem}
  .learning-island__scenery{right:9px;font-size:.82rem}
  .learning-review{align-items:stretch;flex-direction:column;padding:19px}
  .learning-review .btn{width:100%}
  .care-toolbox{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .care-tool{min-height:158px;padding:12px 5px;border-width:2px;border-radius:22px}
  .care-tool .care-symbol{width:60px;height:60px;flex-basis:60px;font-size:2rem;border-radius:20px}
  .care-tool__copy strong{font-size:.83rem}
  .care-tool__copy p{font-size:.68rem}
  .care-tool .end{font-size:.72rem}
  .growth-gallery .growth-pedestal{min-height:180px;padding-inline:3px}
  .growth-pedestal img{height:105px}
  .growth-pedestal figcaption small{display:none}
  .adult-showcase{padding-inline:10px}
  .evolution-stage{min-height:650px;padding-inline:14px}
  .evolution-curtain{width:18%}
  .parent-zone__note{align-items:flex-start;flex-wrap:wrap}
  .parent-zone__note .text-link{width:100%;margin-left:0;text-align:left}
  .parent-zone__controls{flex-wrap:wrap;justify-content:flex-start;gap:8px 16px}
  .parent-zone__status{width:100%}
}

@media(max-width:420px){
  .learning-islands{grid-template-columns:1fr;padding-inline:12px}
  .learning-island{min-height:190px}
  .care-toolbox{grid-template-columns:1fr}
  .care-tool{min-height:112px;flex-direction:row;text-align:left;padding:12px 14px}
  .care-tool .end{margin-left:auto}
}

@media(prefers-reduced-motion:reduce){
  .learning-island,.learning-island:hover:not(:disabled){transform:none}
  .growth-pedestal img,.growth-pedestal__spark,.evolution-curtain,.evolution-spotlight{animation:none}
  .evolution-curtain{width:20%}
}

/* Keep evolution result copy readable where the dark stage meets its cream floor. */
.evolution-stage__result{
  position:relative;
  z-index:5;
  width:min(600px,94%);
  margin:-8px auto 0;
  padding:18px 22px 22px;
  border:3px solid #6b5267;
  border-radius:28px;
  color:#283246;
  background:#fffaf0;
  box-shadow:0 8px 0 #3f2d4438;
}
.evolution-stage__result .before-after{margin-top:0}
.evolution-stage__result figcaption{color:var(--ink)}
.evolution-stage__result>p{color:#283246;margin-top:7px}
.evolution-stage__result>h2{color:#283246}
.evolution-stage__result>.btn{max-width:520px;margin-inline:auto;color:var(--ink)}

@media(max-width:700px){
  .evolution-stage__result{width:96%;padding:15px 12px 18px;border-radius:22px}
}