*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:#294c35}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:4px solid #315eae;outline-offset:5px}button:disabled{cursor:default}#abc-game{position:relative;isolation:isolate;height:100svh;min-height:560px;overflow:hidden;background:#d9e8a9}.garden{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:fill;opacity:.85}header{position:absolute;top:max(20px,env(safe-area-inset-top));left:25px;right:25px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:5}h1{font-size:clamp(25px,3vw,38px);letter-spacing:-.04em;margin:0;padding:10px 20px;background:#fffef0eb;border-radius:24px}h1 span{color:#dc6588}.pill{min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:#fffef4;border:2px solid white;border-radius:22px;padding:10px 17px;font-weight:800;color:#294c35;text-decoration:none;box-shadow:0 3px #48633720}.score-pill{display:flex;align-items:center;gap:12px;background:#fffef4;border:2px solid white;border-radius:23px;padding:10px 17px}.score-pill span{font-size:14px;max-width:65px}.score-pill strong{font-size:30px}.choices{position:absolute;top:23%;left:50%;transform:translateX(-50%);display:flex;gap:clamp(24px,6vw,90px);z-index:2}.picture{position:relative;width:clamp(115px,20vw,205px);height:clamp(115px,20vw,205px);background:white;border:4px solid #fffef1;border-radius:26px;padding:10px;box-shadow:0 7px #48734426;transform-origin:center;will-change:transform}.picture img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.picture.wrong{animation:wiggle .35s;border-color:#edb374}.picture.correct{border-color:#8dc572}.picture.eaten{opacity:0}#feedback{position:absolute;top:13%;left:15px;right:15px;text-align:center;font-size:17px;font-weight:800;margin:0;z-index:3}.abc-frog{position:absolute;left:50%;top:64%;width:clamp(145px,19vw,205px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}.abc-frog img{width:100%;height:100%;object-fit:contain;animation:breathe 3s infinite}.abc-frog.chomp img{animation:chomp .4s}.abc-frog.feeding img{animation:none}#tongue-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}#tongue-layer path{fill:none;stroke-linecap:round;stroke-linejoin:round}#abc-tongue-shadow{stroke:#a8436f70;stroke-width:15;transform:translateY(3px)}#abc-tongue{stroke:#ef7796;stroke-width:11}footer{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:25px;right:25px;display:flex;justify-content:center;align-items:flex-end}.letter-tile{display:flex;gap:8px;align-items:baseline;justify-content:center;min-width:120px;padding:8px 20px;background:#fff7c3;border:3px solid white;border-radius:25px;box-shadow:0 6px #886c3425}.letter-tile span{font-size:60px;font-weight:900;line-height:1.1}.letter-tile small{font-size:34px;font-weight:800;color:#829051}.actions{position:absolute;left:0;bottom:0;display:flex;gap:9px}#pause-panel{position:absolute;inset:0;background:#e7f1d4dd;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}#pause-panel[hidden]{display:none}#pause-panel p{font-size:28px;font-weight:800}.paused *{animation-play-state:paused!important}@keyframes breathe{50%{transform:scale(1.025,.98)}}@keyframes chomp{40%{transform:scale(1.1,.88)}75%{transform:scale(.97,1.05)}}@keyframes wiggle{25%,75%{translate:-5px 0}50%{translate:5px 0}}@media(max-width:600px){header{left:12px;right:12px;gap:7px}h1{font-size:24px;padding:11px 12px}.score-pill{padding:7px 10px;gap:6px}.score-pill span{font-size:12px;width:48px}.score-pill strong{font-size:25px}.pill{padding:9px 12px;font-size:14px}.choices{top:25%;gap:27px}.picture{width:136px;height:136px;border-radius:23px;padding:8px}#feedback{top:16%;font-size:15px}.abc-frog{top:64%;width:160px}.actions{bottom:109px;gap:7px}footer{left:15px;right:15px;bottom:18px}.letter-tile span{font-size:56px}.letter-tile{min-width:112px}.letter-tile small{font-size:30px}}@media(max-height:560px) and (min-width:601px){#abc-game{min-height:380px}header{top:10px}.choices{top:25%;gap:220px}.picture{width:110px;height:110px}.abc-frog{top:60%;width:145px}#feedback{top:21%}footer{bottom:12px}.letter-tile span{font-size:42px}.letter-tile small{font-size:25px}}@media(prefers-reduced-motion:reduce){.abc-frog img,.picture.wrong,.abc-frog.chomp img{animation:none}}
@media(max-width:360px){h1{font-size:21px;padding:10px 9px}.score-pill span{display:none}.score-pill{padding:8px 12px}}
/* The matching letter is the toddler's primary visual anchor. */
.garden{opacity:.65}
h1{background:#fffef0a6;font-size:clamp(23px,2.6vw,32px)}
.letter-tile{position:relative;min-width:0;width:clamp(180px,26vw,250px);height:clamp(150px,23svh,210px);padding:8px 18px;background:#ffe35b;border:6px solid #fff;border-radius:32px;align-items:center;box-shadow:0 7px 0 #bc8d2e,0 0 0 8px #ffe35b45,0 12px 28px #42632f28;isolation:isolate}
.letter-tile #target-letter{font-family:ui-rounded,"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-size:clamp(112px,18svh,166px);font-weight:900;line-height:1;color:#26366e;text-shadow:0 3px #fff9}
.letter-tile #small-letter{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.abc-frog{top:57%;width:clamp(140px,18vw,185px)}
.choices{top:22%}
.letter-tile.new-letter{animation:letter-arrival .55s ease-out}
@keyframes letter-arrival{0%{transform:scale(.9)}55%{transform:scale(1.055)}100%{transform:scale(1)}}
@media(max-width:600px){.letter-tile{width:54vw;max-width:210px;height:clamp(140px,23svh,195px);border-width:5px;border-radius:29px}.letter-tile #target-letter{font-size:clamp(104px,17svh,148px)}.abc-frog{top:57%;width:clamp(140px,19svh,160px)}.picture{width:clamp(115px,16svh,136px);height:clamp(115px,16svh,136px)}.actions{display:contents}.actions .pill{position:absolute;bottom:0;padding:8px 5px;min-width:0;width:60px;font-size:12px;background:#fffef1d9;box-shadow:none}.actions #abc-pause{left:-5px}.actions #abc-reset{right:-5px}footer{bottom:20px}}
@media(max-height:560px) and (min-width:601px){.letter-tile{height:125px;width:160px;border-radius:25px}.letter-tile #target-letter{font-size:98px}.abc-frog{top:49%;width:120px}.choices{top:29%}.picture{width:110px;height:110px}footer{bottom:12px}}
@media(prefers-reduced-motion:reduce){.letter-tile.new-letter{animation:none}}

.abc-modes{position:absolute;top:100px;left:10px;right:10px;display:flex;justify-content:center;gap:8px;z-index:6}.abc-modes .pill{font-size:14px;padding:8px 12px}.abc-modes [aria-pressed="true"]{background:#fff099;border-color:#9ca744}#feedback{top:158px;font-size:16px}.choices{top:29%}#sound-cue{border:0;background:none;font:900 clamp(24px,4vw,36px) ui-rounded,'Trebuchet MS',sans-serif;color:#26366e;line-height:1.2;min-height:80px}#sound-cue[hidden]{display:none}@media(max-height:600px){.abc-modes{top:70px}.abc-modes .pill{padding:5px 9px}#feedback{top:125px}.choices{top:32%}}@media(max-width:360px){.abc-modes{gap:4px}.abc-modes .pill{font-size:12px;padding:7px 8px}}

@media(max-width:600px){.abc-frog{top:60%;width:clamp(120px,18svh,160px)}}