:root {
  --ink: #26362f;
  --muted: #53645b;
  --cream: #fff8e8;
  --paper: #fffdf7;
  --green: #3f7d5a;
  --green-dark: #286044;
  --sun: #ffc94a;
  --coral: #ff816c;
  --blue: #78bde7;
  --lavender: #a899d8;
  --shadow: 0 18px 40px rgba(58, 75, 65, .12);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ink);
  background: #e7f2eb;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
button:focus-visible { outline: 4px solid #153d2a; outline-offset: 4px; }

.app-shell {
  width: min(100%, 960px);
  min-height: 100dvh;
  margin: 0 auto;
  background:
    radial-gradient(circle at 5% 12%, rgba(255,255,255,.9) 0 4%, transparent 4.2%),
    radial-gradient(circle at 92% 16%, rgba(255,255,255,.7) 0 3%, transparent 3.2%),
    linear-gradient(180deg, #e4f5ed 0%, var(--cream) 42%, #fff5dc 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 80px rgba(33, 75, 55, .16);
}

.topbar {
  position: relative;
  z-index: 20;
  min-height: 74px;
  padding: max(14px, env(safe-area-inset-top)) 22px 10px;
  display: grid;
  grid-template-columns: 112px 1fr 52px;
  align-items: center;
}
.brand { display: flex; justify-content: center; align-items: center; gap: 9px; font-weight: 900; font-size: 24px; letter-spacing: -.5px; }
.brand-mark { color: var(--green); font-size: 29px; line-height: 0; text-shadow: 8px -5px 0 #9ed9b8; }
.round-button {
  width: 48px; height: 48px; border-radius: 17px; border: 0; background: rgba(255,255,255,.78);
  box-shadow: 0 7px 20px rgba(49,72,60,.1); font-size: 24px; font-weight: 900; cursor: pointer;
}
.home-button { grid-column: 1; width:108px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;font-size:14px;font-weight:900;color:var(--green-dark); }
.home-icon{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;flex:0 0 21px}
.sound-button { grid-column: 3; }
.sound-button.muted { color: #a2aaa6; }

.screen { position: relative; min-height: calc(100dvh - 74px); }
.view { display: none; min-height: calc(100dvh - 74px); padding: 22px clamp(22px, 5vw, 54px) 38px; animation: arrive .45s cubic-bezier(.2,.8,.2,1); }
.active-view { display: flex; }
@keyframes arrive { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }

.welcome { flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 64px; }
.mascot-wrap { width: 230px; height: 220px; position: relative; display: grid; place-items: center; }
.mascot-wrap.compact { width: 200px; height: 180px; }
.mascot {
  position: relative; width: 156px; height: 156px; border-radius: 48% 52% 46% 54%;
  background: linear-gradient(145deg, #68ac82, #3f825f); box-shadow: inset -12px -13px 0 rgba(31,93,61,.15), 0 22px 32px rgba(39,98,66,.22);
}
.mascot::after { content: ""; position: absolute; left: 27px; right: 27px; bottom: 20px; height: 19px; border-radius: 50%; background: rgba(255,255,255,.18); }
.mascot-ear { position: absolute; width: 54px; height: 62px; top: -21px; background: #51966d; border-radius: 70% 25% 60% 30%; z-index: -1; }
.mascot-ear.left { left: 3px; transform: rotate(-26deg); }
.mascot-ear.right { right: 3px; transform: scaleX(-1) rotate(-26deg); }
.mascot-ear::after { content:""; position:absolute; inset: 12px 13px 17px; border-radius: inherit; background:#f2a495; }
.mascot-face { position: absolute; inset: 0; }
.eye { position: absolute; top: 60px; width: 13px; height: 18px; background: #1f3328; border-radius: 50%; }
.eye.left { left: 46px; }.eye.right { right: 46px; }
.eye::after { content:""; position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; left:2px; top:2px; }
.smile { position:absolute; width:40px; height:22px; left:58px; top:88px; border: 5px solid #1f3328; border-top:0; border-left-color:transparent; border-right-color:transparent; border-radius:0 0 50% 50%; }
.mascot-arm { position:absolute; width:62px; height:28px; border-radius:40px; background:#4b8f67; right:-34px; top:78px; transform-origin:left center; animation: wave 1.5s ease-in-out infinite; }
@keyframes wave { 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(-45deg)} }
.mascot-bounce { animation: bounce 1.25s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(4px) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)} }
.spark { position:absolute; color:var(--sun); font-size:28px; animation: twinkle 1.8s ease-in-out infinite; }
.spark-a { top:35px; right:8px; }.spark-b { bottom:28px; left:4px; animation-delay:.55s; font-size:20px; }
@keyframes twinkle { 0%,100%{transform:scale(.7) rotate(0);opacity:.5} 50%{transform:scale(1.25) rotate(20deg);opacity:1} }
.sky-decoration { position:absolute; background:rgba(255,255,255,.8); border-radius:80px; width:100px; height:34px; }
.sky-decoration::before,.sky-decoration::after { content:""; position:absolute; background:inherit; border-radius:50%; }
.sky-decoration::before { width:42px;height:42px;left:15px;top:-18px}.sky-decoration::after{width:50px;height:50px;right:10px;top:-23px}
.cloud-one{left:-30px;top:12%}.cloud-two{right:-45px;top:25%;transform:scale(.7)}
.eyebrow { margin: 0 0 8px; color: var(--green-dark); font-size: 14px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; }
h1,h2,p { max-width: 680px; }
h1 { font-size: clamp(42px, 8vw, 68px); letter-spacing: -1.5px; line-height: .98; margin: 5px 0 17px; }
h2 { font-size: clamp(31px, 6vw, 48px); letter-spacing: -1px; line-height: 1.04; margin: 4px 0 12px; }
.welcome-copy { color: var(--muted); font-size: clamp(18px,3vw,23px); line-height: 1.45; margin: 0 0 28px; }
.adult-first-run{width:min(100%,510px);margin:-7px 0 21px;padding:18px 19px;border-radius:18px;background:#fff9e9;text-align:left;box-shadow:0 9px 22px rgba(82,66,37,.09)}.adult-first-run p{margin:0;color:var(--ink);line-height:1.45}.adult-first-run ol{margin:12px 0 14px;padding-left:22px;color:var(--muted);line-height:1.55}.adult-first-run li+li{margin-top:3px}.child-name-field{display:block;margin-top:4px}.child-name-field span{display:block;margin-bottom:6px;font-size:14px;font-weight:900;color:var(--green-dark)}.child-name-field em{font-style:normal;font-weight:700;color:var(--muted)}.child-name-field input{box-sizing:border-box;width:100%;min-height:47px;border:2px solid #cce3d3;border-radius:13px;padding:0 13px;background:#fff;color:var(--ink);font:inherit;font-size:17px;outline:none}.child-name-field input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(82,150,109,.16)}.adult-first-run>small{display:block;margin-top:10px;color:var(--muted);font-size:12px;line-height:1.35}
.primary-button,.secondary-button {
  border:0; border-radius:24px; min-height:68px; padding:0 27px; cursor:pointer; font-size:22px; font-weight:900;
}
.primary-button { min-width:220px; color:white; background:var(--green); box-shadow:0 12px 0 #32714f, 0 19px 25px rgba(49,113,79,.22); display:flex; align-items:center; justify-content:space-between; gap:32px; }
.primary-button:active { transform:translateY(6px); box-shadow:0 6px 0 #32714f,0 10px 17px rgba(49,113,79,.18); }
.primary-button.small { min-width: 170px; margin: 22px auto 2px; justify-content:center; min-height:60px; }
.button-arrow { font-size:31px; }
.secondary-button { background:#fff; color:var(--green-dark); box-shadow:0 7px 20px rgba(49,72,60,.1); margin-top:18px; font-size:17px; }
.primary-button[hidden],.secondary-button[hidden],.card-status[hidden]{display:none}
.parent-link { margin-top:28px; border:0; background:transparent; color:var(--muted); text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.first-time-note { max-width:410px; margin:18px 0 0; color:var(--muted); font-size:14px; line-height:1.4; }
.first-time-note + .parent-link { margin-top:10px; }

.menu { flex-direction:column; max-width:840px; margin:0 auto; width:100%; }
.menu-heading { display:flex; align-items:center; gap:18px; margin:3px 0 24px; }
.menu-heading h2 { margin:0; font-size:clamp(32px,6vw,50px); }
.child-card{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;margin:-6px 0 11px;padding:11px 13px;border-radius:16px;background:#e8f4ec;color:var(--green-dark)}.child-card-mark{width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;border-radius:13px;background:var(--green);color:#fff;font-size:23px;font-weight:900}.child-card b,.child-card small{display:block}.child-card b{font-size:17px}.child-card small{margin-top:2px;color:var(--muted);font-size:12px}.child-card button{margin-left:auto;border:0;background:transparent;color:var(--green-dark);font-size:13px;font-weight:900;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.approach-note{display:flex;align-items:center;justify-content:space-between;gap:13px;width:100%;box-sizing:border-box;margin:0 0 15px;padding:13px 15px;border-radius:16px;background:#fff4d5;color:var(--ink)}.approach-note b{font-size:15px}.approach-note p{margin:3px 0 0;color:#6f5b2c;font-size:13px;line-height:1.35}.approach-note button{border:0;border-radius:11px;padding:9px 10px;background:#fff;color:var(--green-dark);font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 4px 10px rgba(93,70,26,.1)}
.continue-button{width:100%;min-height:68px;display:flex;align-items:center;gap:12px;padding:13px 19px;margin:0 0 13px;border:0;border-radius:21px;background:var(--green-dark);color:white;text-align:left;cursor:pointer;box-shadow:0 10px 22px rgba(38,96,68,.18)}
.continue-button[hidden]{display:none}.continue-button span:first-child{font-size:14px;opacity:.85}.continue-button b{font-size:21px;line-height:1.15}.continue-button span:last-child{margin-left:auto;font-size:25px;font-weight:900}
.level-shortcuts{display:flex;gap:9px;margin:0 0 24px}.level-shortcuts button{width:46px;height:46px;border:0;border-radius:16px;background:#fff;color:var(--green-dark);font-size:19px;font-weight:900;cursor:pointer;box-shadow:0 5px 13px rgba(45,72,54,.08)}.level-shortcuts button.current{background:var(--sun);color:var(--ink);box-shadow:0 0 0 3px rgba(232,174,53,.26),0 8px 18px rgba(166,113,15,.17)}.level-shortcuts button.done{background:#c9ead4}
.mini-mascot { width:72px;height:72px;flex:0 0 72px;border-radius:27px;background:var(--green);position:relative;box-shadow:0 11px 24px rgba(48,104,75,.2); }
.mini-mascot i { position:absolute;top:29px;width:7px;height:10px;border-radius:50%;background:#1f3328}.mini-mascot i:first-child{left:21px}.mini-mascot i:nth-child(2){right:21px}
.mini-mascot b { position:absolute;width:18px;height:10px;border:3px solid #1f3328;border-top:0;left:27px;top:44px;border-radius:0 0 50% 50%; }
.game-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.level-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; margin:0 0 13px;scroll-margin-top:12px; }
.level-heading.current-level{padding:11px 13px 10px;margin-left:-13px;margin-right:-13px;border-radius:16px;background:#fff4d3;box-shadow:0 7px 18px rgba(142,105,34,.1)}
.level-heading .level-name { font-size:23px; font-weight:900; letter-spacing:-.5px; }
.level-heading small { color:var(--muted); font-size:14px; font-weight:700; }
.level-count{margin-left:auto;padding:5px 10px;border-radius:12px;background:#fff;color:var(--green-dark);font-size:13px;white-space:nowrap}
.level-next-mark{padding:4px 8px;border-radius:9px;background:#edc45a;color:#45320a;font-size:11px;font-weight:900;white-space:nowrap}
.level-meter{height:7px;border-radius:99px;background:rgba(49,98,73,.12);overflow:hidden;margin:-5px 0 17px}
.level-meter span{display:block;width:0;height:100%;border-radius:inherit;background:var(--green);transition:width .45s ease}
.level-two-heading { margin-top:34px; }
.advanced-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.game-card { min-height:210px;border:0;border-radius:30px;padding:22px;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .2s ease; }
.game-card:active { transform:scale(.97); }
.game-card::after { content:"→";position:absolute;right:18px;bottom:17px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center;font-weight:900; }
.card-status{position:absolute;right:14px;top:12px;padding:7px 10px;border-radius:12px;background:#fff;color:var(--green-dark);font-size:12px;font-weight:900;box-shadow:0 4px 12px rgba(45,72,54,.09)}
.game-card.completed .card-status{background:#d8f0df}
.game-card.is-next,.movement-button.is-next{outline:3px solid #e8ae35;outline-offset:3px}
.color-card{background:#fff0c9}.animal-card{background:#e0f0ff}.size-card{background:#efe8ff}.basket-card{background:#def1e4}
.combo-card{background:#ffe3d9}.new-animal-card{background:#ddf1ef}.counting-card{background:#fff0bf}
.shapes-card{background:#fff0cd}.clues-card{background:#e3f1f5}.fruit-card{background:#ffe9dd}.sizecolor-card{background:#ede6ff}.two-step-card{background:#ddf1e4}.voice-challenge-card{background:#e2efff}.three-step-card{background:#fff0c9}.mixed-count-card{background:#f8e8f0}.adventure-card{background:#ddf0e6}
.shapes-art i{position:absolute;left:14px;top:7px;width:82px;height:78px;background:var(--coral);clip-path:polygon(50% 0,0 100%,100% 100%)}.shapes-art b{position:absolute;left:92px;top:23px;width:66px;height:66px;border-radius:17px;background:var(--blue);transform:rotate(9deg);box-shadow:0 8px 12px rgba(0,0,0,.1)}
.fruit-art,.mixed-art{font-size:39px;letter-spacing:-8px;white-space:nowrap;filter:drop-shadow(0 8px 7px rgba(80,55,30,.1))}
.two-tone i:first-child{background:var(--blue)}.two-tone i:last-child{background:var(--coral)}
.sequence-art i,.sequence-art b{position:absolute;display:block;box-shadow:0 7px 10px rgba(0,0,0,.1)}.sequence-art i{left:7px;top:10px;width:56px;height:56px;border-radius:50%;background:var(--coral)}.sequence-art b{left:70px;top:24px;width:52px;height:52px;border-radius:14px;background:var(--blue);transform:rotate(8deg)}.sequence-art em{position:absolute;left:125px;top:0;font-size:64px;font-style:normal;color:var(--sun);text-shadow:0 7px 9px rgba(150,98,0,.14)}
.combo-circle,.combo-square{position:absolute;display:block;box-shadow:0 8px 12px rgba(0,0,0,.1)}
.combo-circle{width:75px;height:75px;left:8px;top:2px;border-radius:50%;background:var(--coral)}
.combo-square{width:69px;height:69px;left:80px;top:24px;border-radius:17px;background:var(--blue);transform:rotate(12deg)}
.counting-art{font-size:47px;letter-spacing:-9px;white-space:nowrap;transform:rotate(-6deg);text-shadow:0 8px 12px rgba(100,50,20,.15)}
.parent-guide-button{align-self:center;border:0;background:transparent;color:var(--green-dark);font-weight:800;font-size:14px;text-decoration:underline;text-underline-offset:4px;line-height:1.35;margin:21px 0 2px;padding:10px;cursor:pointer}
.card-art { flex:1;position:relative;display:block;min-height:100px; }
.card-title { font-weight:900;font-size:21px;letter-spacing:-.4px;max-width:85%; }
.card-subtitle { margin-top:5px;font-size:14px;color:var(--muted);font-weight:700; }
.shape-circle,.shape-square { position:absolute;display:block;width:55px;height:55px;box-shadow:0 8px 12px rgba(0,0,0,.1); }
.shape-circle{left:5px;top:12px;border-radius:50%;background:var(--coral)}.shape-square{right:10px;top:19px;border-radius:13px;background:var(--blue);transform:rotate(9deg)}
.shape-star{position:absolute;left:50%;top:-7px;transform:translateX(-50%) rotate(-8deg);font-style:normal;color:var(--sun);font-size:73px;text-shadow:0 8px 10px rgba(173,118,0,.16)}
.animal-faces { position:relative;height:112px;filter:drop-shadow(0 10px 8px rgba(36,71,89,.15)); }
.animal-faces img { position:absolute;width:112px;height:112px;object-fit:contain;clip-path:inset(5%); }
.animal-faces img:first-child { left:3px;bottom:-4px;transform:rotate(-5deg); }
.animal-faces img:last-child { left:72px;bottom:2px;width:94px;height:94px;transform:rotate(7deg); }
.animal-faces.care-faces { display:flex;align-items:flex-end;justify-content:flex-start;gap:0; }
.animal-faces.care-faces img { position:relative;left:auto;bottom:auto;transform:none;width:34%;height:106px;min-width:0;object-fit:contain; }
.animal-faces.care-faces img:nth-child(2) { margin-left:-4%; }
.animal-faces.care-faces img:nth-child(3) { margin-left:-4%; }
.balls i { position:absolute;border-radius:50%;background:var(--lavender);box-shadow:inset -7px -8px 0 rgba(78,58,136,.12),0 9px 13px rgba(78,58,136,.16)}
.balls i:first-child{width:84px;height:84px;left:8px;top:0}.balls i:last-child{width:42px;height:42px;left:102px;top:48px;background:#c3b7e8}
.basket-art i { font-style:normal;font-size:70px;position:absolute;left:18px;top:-15px;z-index:2}.basket-art b{position:absolute;width:105px;height:65px;left:58px;top:34px;background:#ba8151;border-radius:8px 8px 30px 30px;box-shadow:inset 0 8px 0 rgba(255,255,255,.25);transform:rotate(5deg)}
.movement-button { width:100%;border:0;border-radius:26px;background:#294f40;color:white;margin-top:18px;padding:18px 22px;display:grid;grid-template-columns:55px 1fr 30px;text-align:left;align-items:center;gap:14px;cursor:pointer;box-shadow:var(--shadow); }
.movement-button.completed .movement-icon{background:#c7e9d1}
.movement-button b,.movement-button small{display:block}.movement-button b{font-size:18px}.movement-button small{opacity:.84;margin-top:4px}.movement-icon{width:52px;height:52px;border-radius:18px;background:#ffd05d;color:#294f40;display:grid;place-items:center;font-size:30px;font-weight:900}

.game { flex-direction:column;align-items:center;text-align:center;max-width:820px;margin:0 auto; }
.game-journey{align-self:flex-start;margin:3px 0 8px;color:var(--green-dark);font-size:13px;font-weight:900}
.progress-row { width:100%;display:flex;align-items:center;gap:12px;margin:4px 0 28px; }
.progress-track { flex:1;height:11px;border-radius:99px;background:rgba(49,98,73,.12);overflow:hidden}.progress-track span{display:block;height:100%;width:33%;border-radius:inherit;background:var(--green);transition:width .4s ease}
.progress-count { font-weight:900;color:var(--green-dark);font-size:14px; }
.instruction-wrap{display:flex;align-items:center;justify-content:center;gap:14px;min-height:100px}.instruction-wrap h2{font-size:clamp(30px,5.5vw,48px);margin:0;max-width:620px}
.listen-button{flex:0 0 55px;width:55px;height:55px;border-radius:19px;border:0;background:#fff;color:var(--green-dark);font-size:25px;box-shadow:0 8px 20px rgba(49,72,60,.12);cursor:pointer}
.target-stage{display:flex;align-items:center;justify-content:center;gap:12px;min-height:76px;margin:-8px 0 2px;color:var(--green-dark);font-size:16px;font-weight:900}.target-stage img{width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 7px 7px rgba(36,71,89,.14))}
.target-stage.story-cue{gap:16px;font-size:19px}.target-stage.story-cue img{width:94px;height:94px}
.options{width:100%;min-height:310px;display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,28px);flex-wrap:wrap;padding:25px 0 10px}
.option { border:0;background:#fff;border-radius:32px;min-width:150px;width:clamp(145px,25vw,190px);height:190px;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 32px rgba(50,74,62,.13),inset 0 -8px 0 rgba(51,72,62,.04);font-size:88px;position:relative;transition:transform .18s ease;touch-action:manipulation; }
.option:active{transform:scale(.94)}.option.correct{animation:correct .65s ease;background:#e1f5e7}.option.try-again{animation:shake .42s ease}
@keyframes correct{0%{transform:scale(.95)}55%{transform:scale(1.13) rotate(4deg)}100%{transform:none}}@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.option .paint { width:92px;height:92px;border-radius:28px;box-shadow:inset -8px -10px 0 rgba(0,0,0,.08),0 11px 18px rgba(39,55,48,.14);display:grid;place-items:center;color:rgba(255,255,255,.85);font-size:48px}.option .paint.circle{border-radius:50%}.option .paint.star-shape{background:transparent!important;box-shadow:none;font-size:112px;line-height:1}
.option .paint.triangle-shape{border-radius:0;clip-path:polygon(50% 0,0 100%,100% 100%)}
.option.fruit-option{font-size:85px}
.option .animal-image { width:100%;height:100%;object-fit:contain;padding:2px;clip-path:inset(5%);transform:scale(1.04);filter:drop-shadow(0 10px 8px rgba(36,71,89,.13));pointer-events:none; }
.option.ball-option span { display:block;border-radius:50%;background:#8daee9;box-shadow:inset -12px -13px 0 rgba(44,73,134,.14),0 13px 20px rgba(44,73,134,.18)}
.option.ball-option.large span{width:124px;height:124px}.option.ball-option.small span{width:64px;height:64px}
.option.count-option{font-size:46px;letter-spacing:-11px;white-space:nowrap;padding-right:10px}
.options.guided-counting{gap:clamp(10px,3vw,22px)}
.option.guided-count-option{width:clamp(105px,20vw,145px);min-width:105px;height:150px;border-radius:26px;font-size:74px;background:#fff6dc;box-shadow:0 12px 25px rgba(116,79,29,.13)}
.option.guided-count-option.counted{background:#e1f5e7;transform:translateY(-8px) scale(.96);pointer-events:none}.option.guided-count-option.counted::after{content:attr(data-count);position:absolute;right:12px;top:10px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-size:15px;font-weight:900}
.option.collected { opacity:.18;transform:translateY(25px) scale(.7);pointer-events:none;transition:.35s ease; }
.options.pairing{max-width:660px;min-height:280px;gap:16px;margin:0 auto}.options.pairing .option{width:150px;min-width:150px;height:150px;border-radius:26px}.option.pair-picked{background:#e1f5e7;transform:translateY(-5px) scale(.94);box-shadow:0 9px 20px rgba(49,111,79,.18)}.option.pair-picked::after{content:"✓";position:absolute;right:10px;top:9px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:white;font-size:18px;font-weight:900}
.hint { color:var(--muted);font-weight:700;font-size:16px;margin:5px 0 0; }

.celebration { flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:65px; }
.celebration h2{font-size:clamp(36px,7vw,58px);margin:2px 0 8px}.earned-stars{font-size:39px;color:var(--sun);letter-spacing:8px;text-shadow:0 5px 0 #e6a929;margin:12px 0 32px;animation:stars .9s ease both}@keyframes stars{from{transform:scale(.4);opacity:0}70%{transform:scale(1.15)}to{transform:none;opacity:1}}
.celebration-progress{margin:1px 0 0;color:var(--green-dark);font-size:16px;font-weight:900}
.next-game-copy{margin:0 0 17px;color:var(--muted);font-size:17px;line-height:1.35}
.celebration-actions{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin-top:17px}
.celebration-actions .secondary-button{min-height:54px;margin:0;padding:0 18px;font-size:15px}
.celebration-actions .primary-button{min-height:60px;min-width:180px;margin:0;font-size:17px}
.confetti{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#ff846e 0 4px,transparent 5px),radial-gradient(circle,#ffc947 0 4px,transparent 5px),radial-gradient(circle,#6bb58a 0 4px,transparent 5px),radial-gradient(circle,#79bde7 0 4px,transparent 5px);background-size:97px 99px,131px 127px,151px 149px,173px 169px;background-position:10px 30px,30px 0,0 70px,60px 20px;opacity:.32}
.parent-dialog { width:min(90%,560px);max-height:min(86dvh,800px);overflow:auto;border:0;border-radius:32px;padding:34px;color:var(--ink);box-shadow:0 30px 90px rgba(18,38,28,.32);background:#fffdf7}.parent-dialog::backdrop{background:rgba(30,56,43,.52);backdrop-filter:blur(5px)}.parent-dialog h2{font-size:38px;margin:4px 0 15px}.parent-dialog>p:not(.eyebrow){font-size:17px;line-height:1.55;color:var(--muted)}.dialog-close{position:absolute;right:20px;top:18px;min-width:82px;height:44px;border-radius:15px;border:0;background:#eef4ef;color:var(--green-dark);font-size:13px;font-weight:900;cursor:pointer}.parent-tips{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.parent-tips span{padding:16px;border-radius:18px;background:#edf6f0}.parent-tips b,.parent-tips small{display:block}.parent-tips small{color:var(--muted);margin-top:4px}
.parent-dialog h3{font-size:22px;margin:26px 0 10px}.game-benefits{display:grid;gap:8px}.game-benefits p{margin:0;padding:12px 14px;border-radius:15px;background:#f1f7f1;line-height:1.35}.game-benefits b,.game-benefits span{display:block}.game-benefits span{margin-top:3px;color:var(--muted);font-size:14px}.parent-dialog .parent-reminder{margin-top:20px;font-size:15px!important}
.parent-steps{display:grid;gap:8px}.parent-steps p{margin:0;padding:13px 14px;border-radius:15px;background:#fff5d7;line-height:1.35}.parent-steps b,.parent-steps span{display:block}.parent-steps span{margin-top:3px;color:#6f5b2c;font-size:14px}
.parent-progress{margin-top:19px;padding:14px 15px;border-radius:16px;background:#fff5d7;color:var(--ink)}.parent-progress summary{cursor:pointer;font-weight:900}.parent-progress p{margin:12px 0 7px!important;font-size:15px!important}.parent-progress small{color:var(--muted);line-height:1.35}
.voice-credit{display:block;margin:17px 2px 4px;color:var(--muted);font-size:12px;line-height:1.4}.voice-credit a{color:inherit}

@media (max-width: 590px) {
  .topbar{min-height:66px;padding-left:15px;padding-right:15px;grid-template-columns:104px 1fr 50px}.screen,.view{min-height:calc(100dvh - 66px)}
  .view{padding-left:16px;padding-right:16px}.welcome{padding-bottom:52px}.mascot-wrap{transform:scale(.84);margin:-18px 0}.adult-first-run{padding:16px;margin:-9px 0 18px}.adult-first-run p{font-size:15px}.adult-first-run ol{font-size:14px}.child-card{margin-top:-8px}.approach-note{padding:12px 13px}
  .game-grid{gap:11px}.game-card{min-height:186px;border-radius:24px;padding:17px}.card-title{font-size:18px}.card-subtitle{font-size:12px}.game-card::after{display:none}
  .advanced-grid{grid-template-columns:1fr 1fr}.continue-button{min-height:61px;flex-wrap:wrap;gap:4px 10px}.continue-button span:first-child{font-size:12px}.continue-button b{font-size:18px}.level-shortcuts{margin-bottom:18px}.level-shortcuts button{width:44px;height:44px}.fruit-art,.mixed-art{font-size:32px;letter-spacing:-8px}.shapes-art i{width:60px;height:57px}.shapes-art b{left:66px;width:51px;height:51px}.sequence-art i{width:45px;height:45px}.sequence-art b{left:51px;width:42px;height:42px}.sequence-art em{left:93px;font-size:50px}
  .level-heading .level-name{font-size:21px}.level-heading small{font-size:12px}.level-count{font-size:11px;padding:4px 7px}.level-two-heading{margin-top:26px}.counting-art{font-size:36px;letter-spacing:-8px}.combo-circle{width:59px;height:59px}.combo-square{left:59px;width:53px;height:53px}
  .option{min-width:128px;width:43vw;max-width:165px;height:165px;font-size:75px;border-radius:26px}.options{gap:12px;min-height:275px;padding-top:18px}
  .option.count-option{font-size:36px;letter-spacing:-9px}
  .option.guided-count-option{width:28vw;min-width:86px;height:132px;font-size:63px;border-radius:22px}
  .target-stage{min-height:61px;margin:-5px 0 0;font-size:14px}.target-stage img{width:55px;height:55px}.options.pairing{min-height:250px;gap:12px}.options.pairing .option{width:calc(42vw - 8px);min-width:124px;max-width:150px;height:138px}
  .target-stage.story-cue{font-size:16px;gap:10px}.target-stage.story-cue img{width:78px;height:78px}
  .option.fruit-option{font-size:70px}
  .instruction-wrap{align-items:flex-start}.listen-button{width:50px;height:50px;flex-basis:50px;border-radius:17px}.instruction-wrap h2{font-size:29px;text-align:left}
}
@media (max-width: 370px){.game-card{min-height:170px}.card-art{min-height:82px}.card-title{font-size:16px}.animal-faces{font-size:60px}.movement-button{padding:15px}}

/* Короткие горизонтальные экраны: задание помещается, меню уровней прокручивается. */
@media (orientation: landscape) and (max-height: 520px) {
  .app-shell { min-height: 100dvh; }
  .topbar {
    min-height: 52px;
    padding-top: max(4px, env(safe-area-inset-top));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: 4px;
    padding-left: max(16px, env(safe-area-inset-left));
    grid-template-columns: 92px 1fr 44px;
  }
  .round-button { width:44px; height:44px; border-radius:15px; font-size:21px; }.home-button{width:88px;padding:0 8px;gap:5px;font-size:12px}.home-icon{width:18px;height:18px;flex-basis:18px}
  .brand { gap:7px; font-size:20px; }
  .brand-mark { font-size:24px; }
  .screen, .view { min-height:calc(100dvh - 52px); }
  .view {
    padding-top: 3px;
    padding-right: max(22px, env(safe-area-inset-right));
    padding-bottom: max(7px, env(safe-area-inset-bottom));
    padding-left: max(22px, env(safe-area-inset-left));
  }

  .welcome { justify-content:flex-start; padding-bottom:8px; }
  .welcome .mascot-wrap { width:120px; height:82px; transform:scale(.5); margin:-20px 0 -8px; }
  .welcome .eyebrow { margin-bottom:2px; font-size:11px; }
  .welcome h1 { font-size:36px; line-height:1; margin:1px 0 5px; }
  .welcome-copy { font-size:15px; line-height:1.25; margin:0 0 9px; }
  .adult-first-run{padding:9px 13px;margin:0 0 8px}.adult-first-run p,.adult-first-run ol{font-size:11px;line-height:1.25}.adult-first-run ol{margin:5px 0 7px}.child-name-field span{font-size:11px;margin-bottom:2px}.child-name-field input{min-height:34px;font-size:14px}.adult-first-run>small{display:none}.child-card{margin:-3px 0 5px;padding:6px 9px}.child-card-mark{width:28px;height:28px;flex-basis:28px;border-radius:9px;font-size:17px}.child-card b{font-size:14px}.child-card small,.child-card button{font-size:11px}.approach-note{margin-bottom:6px;padding:7px 9px}.approach-note b{font-size:12px}.approach-note p{font-size:11px;margin-top:1px}.approach-note button{padding:6px 7px;font-size:11px}
  .first-time-note {font-size:11px;line-height:1.15;margin-top:7px;max-width:420px}
  .welcome .primary-button { min-height:50px; min-width:190px; border-radius:18px; font-size:18px; }
  .parent-link,.first-time-note + .parent-link { margin-top:5px; }

  .menu { max-width:100%; }
  .menu-heading { gap:7px; margin:0 0 6px; min-height:48px; }
  .menu-heading .mini-mascot { transform:scale(.68); margin:-11px; }
  .menu-heading .eyebrow { margin-bottom:1px; font-size:11px; }
  .menu-heading h2 { font-size:29px; line-height:1; }
  .continue-button{min-height:47px;padding:6px 13px;margin-bottom:6px;border-radius:15px}.continue-button span:first-child{font-size:11px}.continue-button b{font-size:16px}.level-shortcuts{margin-bottom:9px}.level-shortcuts button{width:33px;height:33px;border-radius:11px;font-size:15px}
  .level-heading{margin-bottom:6px}.level-heading .level-name{font-size:17px}.level-heading small{font-size:11px}.level-count{font-size:12px;padding:3px 7px}.level-meter{height:5px;margin:-2px 0 8px}.level-two-heading{margin-top:14px}
  .game-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
  .game-card { min-height:168px; border-radius:20px; padding:11px; }
  .level-two-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.level-two-grid .game-card{min-height:150px}
  .advanced-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.advanced-grid .game-card{min-height:150px}.fruit-art,.mixed-art{font-size:27px;letter-spacing:-7px}.shapes-art i{width:48px;height:46px}.shapes-art b{left:55px;top:15px;width:43px;height:43px}.sequence-art i{width:41px;height:41px}.sequence-art b{left:48px;width:40px;height:40px}.sequence-art em{left:95px;font-size:46px}
  .counting-art{font-size:30px;letter-spacing:-7px}.combo-circle{width:50px;height:50px}.combo-square{left:50px;top:12px;width:45px;height:45px}
  .parent-guide-button{font-size:11px;margin-top:6px;padding:5px}
  .game-card::after { display:none; }
  .card-art { min-height:78px; }
  .card-title { max-width:100%; font-size:16px; line-height:1.05; }
  .card-subtitle { margin-top:2px; font-size:12px; line-height:1.1; }
  .animal-faces { height:80px; }
  .animal-faces img { width:80px; height:80px; }
  .animal-faces img:last-child { left:52px; width:68px; height:68px; }
  .animal-faces.care-faces img { height:76px; }
  .movement-button {
    min-height:54px;
    margin-top:8px;
    padding:6px 13px;
    border-radius:18px;
    grid-template-columns:42px 1fr 22px;
    gap:10px;
  }
  .movement-icon { width:42px; height:42px; border-radius:14px; font-size:24px; }
  .movement-button b { font-size:16px; }
  .movement-button small { margin-top:1px; font-size:12px; }

  .game .progress-row { margin:0 0 4px; gap:9px; }
  .game-journey{font-size:11px;margin:0 0 2px}
  .progress-track { height:8px; }
  .progress-count { font-size:12px; }
  .instruction-wrap { min-height:50px; gap:10px; }
  .instruction-wrap h2 { max-width:none; font-size:clamp(24px, 4.2vw, 32px); line-height:1; }
  .listen-button { width:46px; height:46px; flex-basis:46px; border-radius:15px; font-size:22px; }
  .options { min-height:0; flex-wrap:nowrap; gap:12px; padding:7px 0 3px; }
  .option {
    min-width:112px;
    width:clamp(112px, 20vw, 142px);
    height:142px;
    border-radius:23px;
    font-size:62px;
  }
  .option .paint { width:74px; height:74px; }
  .option .paint.star-shape { font-size:88px; }
  .option.fruit-option{font-size:58px}
  .option.ball-option.large span { width:94px; height:94px; }
  .option.ball-option.small span { width:52px; height:52px; }
  .option.count-option{font-size:30px;letter-spacing:-8px}
  .hint { margin:1px 0 0; font-size:13px; line-height:1.1; }
  .target-stage{min-height:46px;margin:0;font-size:12px}.target-stage img{width:42px;height:42px}.options.pairing{min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-width:620px}.options.pairing .option{width:auto;min-width:0;height:116px;border-radius:20px}

  .celebration { justify-content:flex-start; padding-bottom:8px; }
  .celebration .mascot-wrap { width:120px; height:74px; transform:scale(.36); margin:-10px 0 0; }
  .celebration .eyebrow { margin-bottom:1px; font-size:11px; }
  .celebration h2 { font-size:34px; margin:0 0 3px; }
  .celebration-progress{font-size:12px}.earned-stars { font-size:27px; margin:5px 0 9px; }
  .next-game-copy{font-size:13px;margin:0 0 8px}
  .celebration .primary-button { min-height:50px; min-width:190px; border-radius:18px; font-size:18px; }
  .celebration-actions{margin-top:7px}.celebration .secondary-button { min-height:40px; margin-top:0; padding:0 14px; border-radius:15px; font-size:13px; }

  .parent-dialog { max-height:calc(100dvh - 16px); overflow:auto; padding:20px; border-radius:22px; }
  .parent-dialog h2 { font-size:29px; margin:1px 0 8px; }
  .parent-dialog > p:not(.eyebrow) { font-size:14px; line-height:1.35; margin:5px 0; }
  .parent-tips { margin-top:9px; }
  .parent-tips span { padding:10px; }
  .voice-credit { margin-top:8px; }
  .parent-dialog .primary-button.small { min-height:48px; margin-top:10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .view, .mascot-arm, .mascot-bounce, .spark, .earned-stars, .option.correct, .option.try-again { animation:none!important; }
  .progress-track span, .option, .game-card, .option.collected { transition:none!important; }
}