/* Mindful Tree — "Grow your Mindful Tree" (kids' game). Loaded after main.css; reuses its tokens. */
:root {
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --soft-spring: cubic-bezier(.22, 1.3, .36, 1);
  --leaf-dd: #2F6E39;
  --edge: #E6DCCB;
  --header-h: 78px;
}
@media (max-width: 1080px) { :root { --header-h: 68px; } }

.play-page { background-color: var(--cream); --gu-blue: #DCEBF6; --gu-sun: #FBE8C6; --gu-plum: #F2DDEA; --gu-leaf: #D9EDD7; }
.play-page [hidden] { display: none !important; }
.play-page main { overflow-x: clip; }

/* ---------- header ---------- */
.play-page .site-header,
.play-page .site-header.scrolled {
  background: rgba(238, 247, 237, .9);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(31, 58, 85, .07);
}
.play-page .nav { gap: 14px; }
.play-page .nav-links a { white-space: nowrap; }
.play-toggles { display: flex; gap: 10px; flex: none; }
.ptoggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 5px 18px 5px 5px;
  border: 0; border-radius: 999px; background: #fff; cursor: pointer; color: var(--ink);
  font: 700 15.5px/1 var(--kid); letter-spacing: .005em;
  box-shadow: 0 3px 0 rgba(31, 58, 85, .08), 0 10px 22px -14px rgba(31, 58, 85, .45);
  transition: transform .4s var(--spring), box-shadow .3s; -webkit-tap-highlight-color: transparent;
}
.ptoggle:hover { transform: translateY(-2px); }
.ptoggle:active { transform: scale(.9); transition-duration: .1s; }
.ptoggle-ic {
  position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--leaf-soft); box-shadow: inset 0 0 0 2.5px var(--leaf);
  transition: background .3s, box-shadow .3s;
}
.ptoggle-ic svg, .ptoggle-ic img { width: 36px; height: 36px; transition: filter .3s, opacity .3s, transform .45s var(--spring); }
.ptoggle-ic img { width: 42px; height: 42px; }
.ptoggle[aria-pressed="false"] .ptoggle-ic { background: #EEF0F1; box-shadow: inset 0 0 0 2.5px #D5DADF; }
.ptoggle[aria-pressed="false"] .ptoggle-ic svg, .ptoggle[aria-pressed="false"] .ptoggle-ic img { filter: grayscale(1); opacity: .45; transform: scale(.92); }
.ptoggle[aria-pressed="false"] .ptoggle-ic::after {
  content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 3.5px; margin-left: -1.75px;
  background: var(--plum); border-radius: 3px; transform: rotate(-45deg); box-shadow: 0 0 0 2px #EEF0F1;
}
.ptoggle[aria-pressed="false"] .ptoggle-tx { color: var(--ink-3); }
.ptoggle .wv { transition: opacity .3s; }
.ptoggle[aria-pressed="true"]:hover .wv2 { animation: wave-out 1s ease-out infinite; }
@keyframes wave-out { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.no-tts .ptoggle#t-read, .no-tts .hear { display: none; }
@media (max-width: 1240px) and (min-width: 1081px) { .ptoggle-tx { display: none; } .ptoggle { padding: 5px; } }
@media (max-width: 760px) {
  .ptoggle { padding: 4px; min-height: 0; }
  .ptoggle-tx { display: none; }
  .ptoggle-ic { width: 48px; height: 48px; }
  .play-toggles { gap: 8px; }
}
@media (max-width: 440px) { .play-page .brand span { display: none; } }

/* ---------- game frame ---------- */
.game {
  position: relative; display: flex; justify-content: center; align-items: flex-start;
  min-height: 100svh; padding: calc(var(--header-h) + 22px) var(--gutter) 48px;
  font-family: var(--kid);
}
.game { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg, #E6F1F6 0, var(--leaf-50) 46%, var(--leaf-50) 100%); padding-bottom: clamp(130px, 14vw, 200px); }
.garden-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.gb-sun { position: absolute; right: max(-60px, calc(50% - 760px)); top: calc(var(--header-h) - 40px); width: clamp(260px, 34vw, 520px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(252, 226, 176, .75) 0, rgba(252, 226, 176, .28) 38%, rgba(252, 226, 176, 0) 68%); }
.gb-cloud { position: absolute; width: clamp(90px, 11vw, 150px); height: auto; opacity: .9; animation: gb-drift 26s ease-in-out infinite alternate; }
.gb-cloud.pc1 { left: max(-30px, calc(50% - 700px)); top: calc(var(--header-h) + 70px); }
.gb-cloud.pc2 { right: max(-20px, calc(50% - 640px)); top: calc(var(--header-h) + 300px); width: clamp(70px, 8vw, 110px); animation-duration: 34s; animation-delay: -10s; }
@keyframes gb-drift { from { transform: translateX(-14px); } to { transform: translateX(22px); } }
.gb-hills { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(110px, 13vw, 200px); }
.gb-leaf { position: absolute; display: block; width: 26px; height: 26px; border-radius: 50% 4px 50% 4px; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 3px 6px -2px rgba(31, 58, 85, .25); animation: leaf-float 9s ease-in-out infinite; }
.gb-leaf::after { content: ""; position: absolute; left: 14%; right: 14%; top: 50%; height: 1.5px; margin-top: -.75px; background: rgba(255, 255, 255, .6); transform: rotate(-45deg); }
.pl1 { --c1: #CFE9CF; --c2: #86C48D; left: 5%; top: 38%; }
.pl2 { --c1: #EBCFE2; --c2: #C98CB8; left: 11%; top: 74%; width: 18px; height: 18px; animation-duration: 11s; animation-delay: -3s; }
.pl3 { --c1: #BFDCF0; --c2: #8FC0E3; right: 7%; top: 56%; width: 22px; height: 22px; animation-duration: 10s; animation-delay: -6s; }
.pl4 { --c1: #CFE9CF; --c2: #4FA45A; right: 13%; top: 22%; width: 16px; height: 16px; animation-duration: 12s; animation-delay: -2s; }
.pl5 { --c1: #F8E2BC; --c2: #F2B65A; left: 22%; top: 16%; width: 14px; height: 14px; animation-duration: 13s; animation-delay: -8s; }
.pl6 { --c1: #EBCFE2; --c2: #B474A3; right: 4%; top: 70%; width: 20px; height: 20px; animation-duration: 10s; animation-delay: -5s; }
@keyframes leaf-float { 0%, 100% { transform: translate(0, 0) rotate(-14deg); } 50% { transform: translate(10px, -16px) rotate(18deg); } }
.stage { position: relative; z-index: 1; width: 100%; max-width: 1000px; }
@media (max-width: 760px) {
  .game { padding: calc(var(--header-h) + 12px) 16px 110px; }
  .gb-leaf { transform: scale(.8); }
  .pl3, .pl5, .gb-cloud.pc2 { display: none; }
  .gb-cloud.pc1 { top: auto; bottom: 150px; left: -24px; opacity: .7; }
}
.screen { position: relative; }
.screen:focus { outline: none; }
[tabindex="-1"]:focus { outline: none; }

/* ---------- type ---------- */
.kid-eyebrow { font: 800 13px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--plum); margin: 0 0 14px; }
.kid-h1 { font: 800 clamp(42px, 6.2vw, 72px)/.98 var(--kid); letter-spacing: -.02em; color: var(--ink); margin: 0 0 22px; font-variation-settings: normal; }
.kid-h1 em { font: inherit; font-style: normal; color: var(--leaf-d); display: block; font-variation-settings: normal; }
.kid-h2 { font: 800 clamp(26px, 3vw, 34px)/1.05 var(--kid); letter-spacing: -.015em; color: var(--ink); margin: 0 0 14px; font-variation-settings: normal; }
.tiny { font: 600 14px/1.4 var(--text); color: var(--ink-3); margin: 14px 0 0; }

/* ---------- Tilly + speech bubble ---------- */
.tilly { display: flex; align-items: flex-end; gap: 10px; }
.tilly-owl {
  width: 84px; height: auto; flex: none; transform-origin: 50% 92%;
  animation: tilly-bob 3.8s ease-in-out infinite;
  filter: drop-shadow(0 10px 10px rgba(59, 135, 70, .16));
}
@keyframes tilly-bob { 0%, 100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-6px) rotate(2.5deg); } }
.tilly.is-speaking .tilly-owl { animation: tilly-talk .52s ease-in-out infinite; }
@keyframes tilly-talk { 0%, 100% { transform: translateY(0) rotate(-3deg) scale(1); } 50% { transform: translateY(-4px) rotate(3deg) scale(1.035); } }
@keyframes owl-pose { 0% { transform: scale(.82) rotate(-6deg); } 100% { transform: scale(1) rotate(0); } }
.screen .tilly-owl.pose { animation: owl-pose .6s var(--spring); }
.bubble {
  position: relative; flex: 1; min-width: 0; min-height: 64px; display: flex; align-items: center;
  background: #fff; border-radius: 24px; padding: 13px 60px 13px 18px;
  box-shadow: 0 2px 0 rgba(31, 58, 85, .05), 0 14px 30px -18px rgba(31, 58, 85, .42);
}
.bubble::before {
  content: ""; position: absolute; left: -7px; bottom: 20px; width: 18px; height: 18px; background: #fff;
  border-radius: 3px; transform: rotate(45deg);
}
.say { margin: 0; font: 600 clamp(17px, 1.75vw, 21px)/1.32 var(--kid); color: var(--ink); text-wrap: pretty; }
.say.pop { animation: say-pop .55s var(--soft-spring); }
@keyframes say-pop { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.hear {
  position: absolute; right: 9px; top: 50%; width: 44px; height: 44px; margin-top: -22px;
  border: 0; border-radius: 50%; background: var(--leaf-50); cursor: pointer; display: grid; place-items: center;
  transition: transform .4s var(--spring), background .25s; -webkit-tap-highlight-color: transparent;
}
.hear img { width: 34px; height: 34px; }
.hear:hover { transform: scale(1.08); background: var(--leaf-soft); }
.hear:active { transform: scale(.88); }
.tilly.is-speaking .hear { background: var(--leaf-soft); animation: hear-pulse 1.1s ease-out infinite; }
@keyframes hear-pulse { 0% { box-shadow: 0 0 0 0 rgba(79, 164, 90, .5); } 100% { box-shadow: 0 0 0 13px rgba(79, 164, 90, 0); } }
.tilly-solo .bubble::before { left: 26px; bottom: auto; top: -7px; }
@media (min-width: 761px) { .tilly-owl { width: 112px; } }

/* read-along highlight */
.is-reading { position: relative; z-index: 1; }
.choice-btn.is-reading, .mode.is-reading { box-shadow: 0 0 0 4px var(--leaf), 0 4px 0 var(--edge), 0 14px 24px -18px rgba(31, 58, 85, .5); transform: scale(1.025); }
.stone.is-reading .stone-disc { transform: translateY(-6px) scale(1.08); box-shadow: 0 0 0 4px var(--leaf), 0 6px 0 #DCCDB2; }

/* ---------- kid buttons ---------- */
.kbtn {
  --c: var(--leaf-d); --cd: var(--leaf-dd);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--c); color: #fff;
  font: 800 20px/1 var(--kid); letter-spacing: .005em; text-decoration: none; cursor: pointer; user-select: none;
  box-shadow: 0 5px 0 var(--cd), 0 16px 26px -16px rgba(31, 58, 85, .6);
  transition: transform .45s var(--spring), box-shadow .2s, background .2s; -webkit-tap-highlight-color: transparent;
}
.kbtn:hover { transform: translateY(-2px); color: #fff; }
.kbtn:active { transform: translateY(4px) scale(.96); box-shadow: 0 1px 0 var(--cd), 0 8px 14px -12px rgba(31, 58, 85, .5); transition-duration: .08s; }
.kbtn .arr { width: 24px; height: 24px; transition: transform .35s var(--spring); }
.kbtn:hover .arr { transform: translateX(4px); }
.kbtn > img { width: 36px; height: 36px; margin-left: -10px; }
.kbtn-ghost { --c: #fff; --cd: var(--edge); color: var(--ink); }
.kbtn-ghost:hover { color: var(--ink); }
.kbtn-sun { --c: #F6C46F; --cd: #D3953A; color: var(--ink); }
.kbtn-sun:hover { color: var(--ink); }
.kbtn-plum { --c: var(--plum); --cd: var(--plum-d); }
.kbtn-sm { min-height: 48px; padding: 0 20px; font-size: 17px; box-shadow: 0 4px 0 var(--cd); }
.link-btn { border: 0; background: none; padding: 8px 0; cursor: pointer; font: 700 14.5px/1.2 var(--text); color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-btn:hover { color: var(--plum); }

/* ---------- START ---------- */
.start-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(20px, 4vw, 56px); align-items: center; min-height: min(620px, calc(100svh - var(--header-h) - 120px)); }
.start-owl { position: relative; display: grid; place-items: center; }
.start-sun { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #FFF6E6 0, #FCEBD0 55%, rgba(252, 235, 208, 0) 72%); }
.owl-big { position: relative; width: min(360px, 100%); animation-duration: 4.4s; filter: drop-shadow(0 26px 26px rgba(59, 135, 70, .22)); }
.name-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.name-form input {
  flex: 1 1 220px; min-width: 0; min-height: 60px; padding: 0 22px; border: 3px solid transparent; border-radius: 999px;
  background: #fff; color: var(--ink); font: 700 21px/1 var(--kid); outline: 0;
  box-shadow: inset 0 2px 0 rgba(31, 58, 85, .05), 0 0 0 2px rgba(31, 58, 85, .1);
  transition: border-color .2s, box-shadow .2s;
}
.name-form input::placeholder { color: #9AA8B5; font-weight: 600; }
.name-form input:focus { border-color: var(--blue-soft); box-shadow: 0 0 0 4px rgba(62, 140, 196, .15); }
.name-form .kbtn { flex: 0 0 auto; }
@media (max-width: 760px) {
  .start-grid { grid-template-columns: 1fr; gap: 6px; min-height: 0; text-align: left; }
  .start-owl { margin: -4px auto 0; }
  .owl-big { width: min(190px, 52vw, 26svh); }
  .start-sun { width: 92%; }
  .kid-h1 { font-size: clamp(36px, 10.5vw, 46px); margin-bottom: 16px; text-align: center; }
  .kid-eyebrow { text-align: center; }
  .name-form .kbtn { flex: 1 1 100%; }
}

/* ---------- MAP ---------- */
.map-grid { display: grid; gap: 14px; grid-template-areas: "head" "scene" "stones" "side"; }
.map-head { grid-area: head; }
.map-head .kid-h2 { display: none; }
.map-scene { grid-area: scene; position: relative; justify-self: center; width: min(100%, calc(46svh * 400 / 384)); }
.tree-svg { display: block; width: 100%; height: auto; aspect-ratio: 400 / 384; overflow: visible; }
.tree-svg .cloud { animation: cloud-drift 18s ease-in-out infinite alternate; }
.tree-svg .c2 { animation-duration: 24s; animation-delay: -6s; }
@keyframes cloud-drift { from { transform: translateX(-6px); } to { transform: translateX(10px); } }
.stones { grid-area: stones; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px 0 10px; }
.stones-path { position: absolute; left: 0; top: 0; width: 100%; height: 86px; z-index: 0; }
.stone {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); font-family: var(--kid); -webkit-tap-highlight-color: transparent;
}
.stone.s1, .stone.s3 { margin-top: 14px; }
.stone-disc {
  position: relative; display: grid; place-items: center; width: clamp(68px, 18vw, 92px); aspect-ratio: 1;
  border-radius: 47% 53% 50% 50% / 53% 47% 53% 47%; background: var(--tint, #fff);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7), 0 6px 0 #DCCDB2, 0 18px 22px -14px rgba(31, 58, 85, .55);
  transition: transform .45s var(--spring), box-shadow .3s;
}
.stone-disc > img:first-child { width: 78%; height: auto; transition: transform .45s var(--spring); }
.stone:hover .stone-disc { transform: translateY(-5px) rotate(-3deg); }
.stone:hover .stone-disc > img:first-child { transform: scale(1.06) rotate(4deg); }
.stone:active .stone-disc { transform: translateY(4px) scale(.93); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7), 0 2px 0 #DCCDB2; transition-duration: .1s; }
.stone-label { font: 700 clamp(14px, 1.45vw, 16.5px)/1.12 var(--kid); text-align: center; max-width: min(100%, 11ch); text-wrap: balance; overflow-wrap: break-word; }
/* German compounds (Gefühlsfreunde, Pusteblumen-Atmen) may break with a real hyphen; English never does */
html[lang="de"] .game { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
html[lang="de"] .stone-label { hyphenate-limit-chars: 8 4 4; }
.stone-star { position: absolute; right: -10px; top: -12px; width: 46%; height: auto; display: none; filter: drop-shadow(0 4px 4px rgba(31, 58, 85, .2)); }
.stone.done .stone-star { display: block; animation: star-pop .7s var(--spring) both; }
.stone.done .stone-disc { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7), 0 0 0 4px var(--leaf-soft), 0 6px 0 #A9D6AB, 0 18px 22px -14px rgba(31, 58, 85, .55); }
.stone.next .stone-disc::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px dashed var(--leaf);
  animation: spin 14s linear infinite; opacity: .8;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes star-pop { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: scale(1) rotate(0); } }
.map-side { grid-area: side; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.growth { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.growth li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px; border-radius: 999px; background: rgba(255, 255, 255, .75); font: 700 14px/1 var(--kid); color: var(--ink-3); transition: background .3s, color .3s; }
.growth i { width: 13px; height: 13px; border-radius: 50% 2px 50% 2px; background: #D7DDD7; transition: background .4s, transform .5s var(--spring); }
.growth li.on { background: #fff; color: var(--ink); box-shadow: 0 6px 14px -10px rgba(31, 58, 85, .5); }
.growth li.on i { background: var(--leaf); transform: rotate(-12deg) scale(1.15); }
.cert-btn img { animation: star-wiggle 2.4s ease-in-out infinite; }
@keyframes star-wiggle { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12); } }
.cert-btn.show { animation: btn-pop .8s var(--spring) backwards; }
@keyframes btn-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.reset-ask { background: #fff; border-radius: 20px; padding: 14px 16px; box-shadow: var(--shadow); }
.reset-ask p { margin: 0 0 10px; font: 700 15.5px/1.35 var(--text); color: var(--ink-2); }
.reset-btns { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) {
  .map-side { align-items: center; text-align: center; }
  .growth { justify-content: center; }
  .growth li { font-size: 13px; padding: 6px 10px 6px 8px; }
}
@media (min-width: 900px) {
  .map-grid { grid-template-columns: 310px minmax(0, 1fr); grid-template-areas: "head scene" "side scene" "side stones"; grid-template-rows: auto 1fr auto; column-gap: 36px; row-gap: 16px; align-items: start; }
  .map-head .kid-h2 { display: block; }
  .map-head .tilly { flex-direction: column; align-items: flex-start; gap: 14px; }
  .map-head .tilly-owl { width: 132px; margin-left: 12px; }
  .map-head .bubble { width: 100%; }
  .map-head .bubble::before { left: 54px; top: -7px; bottom: auto; }
  .map-scene { width: min(100%, calc((100svh - var(--header-h) - 250px) * 400 / 384)); min-width: min(100%, 420px); }
  .stones { margin-top: -6px; }
}

/* ---------- adventure chrome ---------- */
.adv-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.back-btn {
  flex: none; width: 52px; height: 52px; border: 0; border-radius: 50%; background: #fff; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 4px 0 var(--edge), 0 10px 18px -12px rgba(31, 58, 85, .5);
  transition: transform .4s var(--spring); -webkit-tap-highlight-color: transparent;
}
.back-btn svg { width: 24px; height: 24px; }
.back-btn:hover { transform: translateX(-3px); }
.back-btn:active { transform: scale(.88); }
.adv-titles { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.adv-h { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 clamp(22px, 2.8vw, 32px)/1.05 var(--kid); letter-spacing: -.015em; color: var(--ink); font-variation-settings: normal; }
.adv-h img { width: 46px; height: 46px; flex: none; }
.pips { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.pips li { width: 13px; height: 13px; border-radius: 50% 2px 50% 2px; background: rgba(31, 58, 85, .13); transition: background .35s, transform .5s var(--spring); }
.pips li.on { background: var(--leaf); transform: rotate(-12deg) scale(1.18); }
.pips li.now { background: var(--sun); }
.adv .tilly { margin-bottom: 14px; }
.adv-body { position: relative; }
@media (max-width: 760px) {
  .adv-h { font-size: 22px; }
  .adv-h img { width: 36px; height: 36px; }
  .adv-titles { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pips li { width: 11px; height: 11px; }
  .adv .tilly-owl { width: 70px; }
  .adv .tilly { margin-bottom: 10px; }
}

.adv-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 0 6px; }
.done-star { width: clamp(110px, 16vw, 150px); height: auto; filter: drop-shadow(0 14px 16px rgba(201, 138, 43, .35)); animation: star-pop .9s var(--spring) both; }
.done-h { margin: 6px 0 0; font: 800 clamp(28px, 3.4vw, 38px)/1.05 var(--kid); color: var(--ink); }
.done-sub { margin: 0; max-width: 32em; font: 600 18px/1.4 var(--kid); color: var(--ink-2); }
.done-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }

/* ---------- choices ---------- */
.choices { display: grid; gap: 12px; }
.choice-btn {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 12px 18px 12px 14px;
  border: 0; border-radius: 22px; background: #fff; color: var(--ink); text-align: left; cursor: pointer;
  font: 700 21px/1.2 var(--kid);
  box-shadow: 0 4px 0 var(--edge), 0 14px 24px -18px rgba(31, 58, 85, .5);
  transition: transform .45s var(--spring), box-shadow .25s, background .25s, opacity .35s; -webkit-tap-highlight-color: transparent;
}
.choice-btn:hover { transform: translateY(-2px); }
.choice-btn:active { transform: translateY(3px) scale(.98); box-shadow: 0 1px 0 var(--edge); transition-duration: .08s; }
.choice-btn .mk { width: 32px; height: 32px; flex: none; border-radius: 50% 6px 50% 6px; background: var(--mk, var(--leaf-soft)); display: grid; place-items: center; transition: background .3s, transform .5s var(--spring); }
.choice-btn .mk svg { width: 20px; height: 20px; opacity: 0; transition: opacity .2s; }
.choice-btn:nth-child(1) { --mk: var(--blue-soft); }
.choice-btn:nth-child(2) { --mk: var(--plum-soft); }
.choice-btn:nth-child(3) { --mk: #F8E2BC; }
.choice-btn.right { background: var(--leaf-50); box-shadow: inset 0 0 0 3px var(--leaf), 0 4px 0 #A9D6AB, 0 14px 24px -18px rgba(31, 58, 85, .5); }
.choice-btn.right .mk { background: var(--leaf); transform: rotate(-10deg) scale(1.1); }
.choice-btn.right .mk svg { opacity: 1; }
.choice-btn.nope { opacity: .42; animation: nudge .5s ease-out; }
.choice-btn:disabled { cursor: default; }
.choice-btn.enter { animation: choice-in .55s var(--soft-spring) backwards; }
@keyframes choice-in { 0% { opacity: 0; transform: translateY(16px) scale(.96); } 100% { opacity: 1; transform: none; } }
.next-btn.enter { animation: btn-pop .6s var(--spring) backwards; }
.choice-btn:disabled:hover { transform: none; }
.choice-btn.right:disabled { opacity: 1; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 55% { transform: translateX(4px); } 80% { transform: translateX(-2px); } }
.choices-long .choice-btn { font-size: 18.5px; font-weight: 600; line-height: 1.25; padding-top: 13px; padding-bottom: 13px; }
.next-btn { margin-top: 16px; width: 100%; }
@media (min-width: 761px) { .next-btn { width: auto; } }

/* ---------- feelings ---------- */
.feel-body { display: grid; gap: 16px; justify-items: center; }
.feel-side { width: 100%; }
.face-card {
  position: relative; width: min(220px, 56vw, 27svh); aspect-ratio: 1; border-radius: 50%; overflow: hidden; display: grid; place-items: end center;
  background: radial-gradient(circle at 50% 38%, #fff 0, var(--blue-50) 72%);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .85), 0 22px 40px -24px rgba(31, 58, 85, .45);
  transition: background .5s;
}
.face-card img { width: 90%; height: auto; transform: translateY(4%); }
.face-card.yay { background: radial-gradient(circle at 50% 38%, #fff 0, var(--leaf-soft) 78%); }
.face-card.in img { animation: face-in .7s var(--spring); }
@keyframes face-in { 0% { transform: translateY(40%) scale(.7); opacity: 0; } 100% { transform: translateY(4%) scale(1); opacity: 1; } }
.face-card.yay img { animation: face-yay .7s var(--spring); }
@keyframes face-yay { 0% { transform: translateY(4%) scale(1); } 40% { transform: translateY(-4%) scale(1.06) rotate(-3deg); } 100% { transform: translateY(4%) scale(1); } }
@media (min-width: 761px) {
  .feel-body { grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 48px); justify-items: stretch; }
  .face-card { width: 290px; }
}

/* ---------- kind choices ---------- */
.kind-body { display: grid; gap: 14px; }
.scene-pic { position: relative; margin: 0 6px; height: clamp(150px, 27svh, 250px); isolation: isolate; }
.scene-pic::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 62% 38% 54% 46% / 49% 58% 42% 51%; background: var(--plum-soft); transform: rotate(-4deg) translate(7px, 8px); }
.scene-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; border-radius: 54% 46% 44% 56% / 58% 44% 56% 42%; box-shadow: 0 18px 30px -20px rgba(31, 58, 85, .5); }
.scene-pic.in img { animation: pic-in .8s var(--soft-spring); }
@keyframes pic-in { 0% { opacity: 0; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@media (min-width: 761px) {
  .kind-body { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(22px, 3vw, 36px); align-items: start; }
  .scene-pic { height: auto; aspect-ratio: 1; margin: 6px 14px 6px 6px; }
}

/* ---------- breathing ---------- */
.breathe-body { display: flex; flex-direction: column; align-items: center; }
.dandelion {
  position: relative; display: block; width: min(300px, 72vw, 38svh); padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
@media (min-width: 761px) { .dandelion { width: min(340px, 42svh); } }
.dandelion svg { display: block; width: 100%; height: auto; overflow: visible; }
.dandelion:focus-visible { outline-offset: 6px; border-radius: 30px; }
.ring-track { fill: none; stroke: #DDEBF5; stroke-width: 11; }
.ring-fill { fill: none; stroke-width: 11; stroke-linecap: round; }
#dl-head { transform-box: view-box; }
.dandelion.full .ring-fill { filter: drop-shadow(0 0 6px rgba(79, 164, 90, .6)); }
.dandelion.idle-hint #dl-head { animation: dl-breathe 3s ease-in-out infinite; transform-origin: 150px 128px; }
@keyframes dl-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.phase { margin: 6px 0 0; min-height: 1.2em; font: 800 clamp(22px, 2.8vw, 30px)/1.15 var(--kid); color: var(--ink); text-align: center; }
.count { margin: 2px 0 0; min-height: 46px; font: 800 44px/1 var(--kid); color: var(--blue-d); }
.count.tick { animation: tick .5s var(--spring); }
@keyframes tick { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.kbd-tip { margin: 6px 0 0; font: 600 14px/1.3 var(--text); color: var(--ink-3); }
@media (hover: none) { .kbd-tip { display: none; } }

/* ---------- leaf memory ---------- */
.mem-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 540px; margin: 6px auto 0; }
.mode {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 12px 18px; border: 0; border-radius: 28px; background: #fff; cursor: pointer; color: var(--ink);
  box-shadow: 0 5px 0 var(--edge), 0 18px 28px -20px rgba(31, 58, 85, .5);
  transition: transform .45s var(--spring), box-shadow .25s; -webkit-tap-highlight-color: transparent;
}
.mode:hover { transform: translateY(-3px) rotate(-1deg); }
.mode:active { transform: translateY(4px) scale(.96); box-shadow: 0 1px 0 var(--edge); transition-duration: .08s; }
.mode b { font: 800 22px/1.1 var(--kid); }
.mode small { font: 600 15px/1 var(--kid); color: var(--ink-3); }
.mode-leaves { display: grid; gap: 5px; height: 66px; align-content: center; }
.mode-leaves.m4 { grid-template-columns: repeat(4, 20px); }
.mode-leaves.m8 { grid-template-columns: repeat(8, 12px); gap: 4px; }
.mode-leaves.m8 i { height: 12px; }
.mode-leaves i { display: block; height: 20px; border-radius: 50% 3px 50% 3px; background: var(--leaf-soft); }
.mode-leaves i:nth-child(3n+2) { background: var(--blue-soft); }
.mode-leaves i:nth-child(3n) { background: var(--plum-soft); }
.mem-stats { display: flex; justify-content: center; gap: 10px; margin: 0 0 14px; font: 700 16px/1 var(--kid); color: var(--ink-2); }
.mem-stats > span { background: #fff; border-radius: 999px; padding: 9px 16px; box-shadow: 0 6px 14px -10px rgba(31, 58, 85, .45); }
.mem-stats b { color: var(--ink); font-size: 18px; margin-left: 4px; }
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(9px, 2.6vw, 16px); width: 100%; max-width: 470px; margin: 0 auto; perspective: 1000px; }
.board.big { max-width: min(470px, 46svh); }
.leafcard { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 50% 10px 50% 10px; }
.leafcard.deal { animation: deal .6s var(--spring) backwards; }
@keyframes deal { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.lc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .62s var(--soft-spring); }
.leafcard.flipped .lc-in { transform: rotateY(180deg); }
.leafcard:not(.flipped):hover .lc-in { transform: rotateY(12deg) translateY(-2px); }
.lc-back, .lc-front {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50% 10px 50% 10px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 4px 0 rgba(31, 58, 85, .1), 0 12px 18px -12px rgba(31, 58, 85, .5);
}
.lc-back { background: linear-gradient(140deg, var(--l1, #CFE9CF), var(--l2, #9FD0A3)); overflow: hidden; }
.lc-back::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2.5px; margin-top: -1.25px; border-radius: 2px; background: rgba(255, 255, 255, .7); transform: rotate(-45deg); }
.lc-back::after { content: ""; position: absolute; inset: 22%; border-radius: 50% 6px 50% 6px; border: 2px solid rgba(255, 255, 255, .35); border-width: 0 2px 0 2px; transform: rotate(-45deg); }
.lc-front { background: var(--paper); transform: rotateY(180deg); box-shadow: inset 0 0 0 3px var(--l1, var(--leaf-soft)), 0 4px 0 rgba(31, 58, 85, .1), 0 12px 18px -12px rgba(31, 58, 85, .5); }
.lc-front img { width: 70%; height: auto; }
.leafcard.matched .lc-front { background: var(--leaf-50); box-shadow: inset 0 0 0 3px var(--leaf), 0 0 0 4px rgba(79, 164, 90, .2), 0 4px 0 rgba(31, 58, 85, .1); }
.leafcard.matched .lc-front img { animation: matched .7s var(--spring); }
@keyframes matched { 0% { transform: scale(1); } 45% { transform: scale(1.18) rotate(-8deg); } 100% { transform: scale(1); } }
.leafcard:focus-visible { outline-offset: 4px; }

/* ---------- finale ---------- */
.fin-grid { display: grid; gap: 16px; justify-items: center; grid-template-areas: "tilly" "cert" "btns" "note"; }
.fin-grid .tilly { grid-area: tilly; width: 100%; }
.cert-frame { grid-area: cert; }
.fin-btns { grid-area: btns; }
.fin-grid .tiny { grid-area: note; }
@media (min-width: 900px) {
  .fin-grid { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "tilly cert" "btns cert" "note cert"; grid-template-rows: auto auto 1fr; column-gap: 40px; align-items: start; justify-items: stretch; }
  .fin-grid .tilly { flex-direction: column; align-items: flex-start; gap: 14px; }
  .fin-grid .tilly-owl { width: 132px; margin-left: 12px; }
  .fin-grid .bubble::before { left: 54px; top: -7px; bottom: auto; }
  .fin-btns { flex-direction: column; align-items: stretch; }
  .fin-grid .tiny { text-align: left; }
  .cert-frame { align-self: center; margin-top: 8px; }
}
.cert-frame { width: 100%; max-width: 720px; padding: 10px; background: #fff; border-radius: 22px; box-shadow: var(--shadow-lift); transform: rotate(-1deg); }
.cert-frame canvas { display: block; width: 100%; height: auto; border-radius: 14px; }
.cert-frame.in { animation: cert-in 1s var(--soft-spring) both; }
@keyframes cert-in { 0% { opacity: 0; transform: translateY(30px) rotate(-6deg) scale(.9); } 100% { opacity: 1; transform: rotate(-1deg); } }
.fin-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.fin-grid .tiny { text-align: center; margin-top: 0; }
@media (max-width: 760px) { .fin-btns .kbtn { flex: 1 1 100%; } }
.noscript { font: 700 20px/1.4 var(--kid); text-align: center; padding: 40px 10px; }

/* ---------- particles ---------- */
.fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 120; }

/* ---------- for grown-ups ---------- */
.grownups { position: relative; z-index: 2; padding: clamp(36px, 5vw, 70px) 0 clamp(80px, 9vw, 130px); }
.gu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 3vw, 40px); }
.gu-card { display: flex; flex-direction: column; gap: 6px; }
.gu-card img { position: relative; width: 74px; height: 74px; margin: 0 0 12px -4px; }
.gu-card { position: relative; }
.gu-card::before { content: ""; position: absolute; left: -14px; top: -12px; width: 96px; height: 92px; border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; background: var(--blob, var(--leaf-soft)); transform: rotate(-8deg); }
.gu-card > * { position: relative; }
.gu-card h3 { font-size: 22px; margin-bottom: 4px; }
.gu-card p { color: var(--ink-2); font-size: 16px; margin: 0; }
.gu-k { font: 800 12px/1 var(--text) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf-d) !important; }
.gu-two { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 80px); margin-top: clamp(56px, 7vw, 96px); align-items: center; }
.gu-safe { padding: 0; }
.gu-cta { position: relative; padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px); isolation: isolate; }
.gu-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 90px 150px 110px 170px / 80px 110px 100px 140px; background: radial-gradient(circle at 30% 30%, #E7F4E4, var(--leaf-soft)); }
.gu-cta::after { content: ""; position: absolute; inset: 6% -3% -4% 8%; z-index: -2; border-radius: 120px 90px 160px 100px / 100px 80px 130px 90px; background: var(--blue-50); transform: rotate(4deg); }
.gu-safe h3, .gu-cta h3 { font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 8px; }
.gu-safe .ticks { margin-bottom: 22px; }
.gu-cta { overflow: visible; }
.gu-cta p { color: var(--ink-2); max-width: 32em; }
.gu-owl { width: 112px; height: auto; float: right; margin: -78px -10px 4px 12px; animation: tilly-bob 4.2s ease-in-out infinite; filter: drop-shadow(0 14px 14px rgba(59, 135, 70, .2)); }
@media (max-width: 1000px) { .gu-grid { grid-template-columns: 1fr 1fr; } .gu-two { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .gu-grid { grid-template-columns: 1fr; }
  .gu-owl { width: 86px; margin-top: -48px; }
  .gu-cta { padding: 34px 24px 36px; }
  .gu-cta::before { border-radius: 56px 96px 64px 104px / 52px 76px 60px 90px; }
  .gu-cta::after { border-radius: 80px 56px 96px 64px / 70px 52px 84px 60px; inset: 4% -2% -3% 6%; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .tilly-owl, .owl-big, .gu-owl, .tree-svg .cloud, .gb-cloud, .gb-leaf, .stone.next .stone-disc::after, .cert-btn img { animation: none !important; }
}