.activity-panel{position:fixed;right:28px;top:112px;width:310px;z-index:7;padding:24px;max-height:calc(100vh - 135px);overflow:auto}.activity-panel h2{font-size:29px;line-height:1.08;letter-spacing:-1px;margin:16px 0 10px}.activity-panel p{font-size:13px;line-height:1.6;color:#647769}.activity-panel .primary{margin-top:18px}.activity-panel .eyebrow{font-size:9px;letter-spacing:1px}.fuel-display{display:flex;justify-content:center;align-items:center;gap:16px;padding:18px 0;font-size:29px}.fuel-display strong{font-size:22px;min-width:65px}.tank{width:48px;height:116px;border:3px solid #3d6850;border-radius:14px;position:relative;overflow:hidden;background:#e6ecda}.tank i{position:absolute;bottom:0;left:0;right:0;height:0;background:repeating-linear-gradient(to top,#b1cf76 0px,#b1cf76 20px,#d3e4a9 20px,#d3e4a9 23px);transition:height .1s}.pump-button{display:flex;align-items:center;justify-content:center;gap:12px;background:#f4d077;border:3px solid #ffe9a9;border-radius:18px;width:100%;min-height:78px;font-size:33px;user-select:none;touch-action:none;box-shadow:0 4px #d6ac56}.pump-button span{font-size:12px;font-weight:850;letter-spacing:.8px}.pump-button:disabled{opacity:.65;cursor:default}.activity-hero,.picked-flowers{font-size:38px;color:#db8779;text-align:center;padding:28px 0}.flavors{display:flex;gap:7px}.flavors button{flex:1;min-width:0;min-height:75px;padding:10px 4px;border:2px solid #e8ddc5;background:#fff6e5;border-radius:15px;font-size:28px}.flavors span{display:block;font-size:9px;font-weight:700;margin-top:5px}.flavors button:disabled{opacity:.6}.activity-count{text-align:center;font-size:11px!important}.ice-stack{height:173px;position:relative;margin:8px 0}.cone-shape{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-top:76px solid #d5a15f;filter:drop-shadow(0 4px 0 #bd864a)}.scoop{position:absolute;width:68px;height:49px;border-radius:50% 50% 40% 40%;left:50%;transform:translateX(-50%);box-shadow:inset -5px -6px #0000000a,0 3px 0 #00000010;animation:scoop-pop .25s ease-out}@keyframes scoop-pop{from{transform:translate(-50%,-20px) scale(.5)}to{transform:translate(-50%,0) scale(1)}}#nearby{position:fixed;bottom:120px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:6;white-space:nowrap}#nearby button{background:#fff9e8ee;border:2px solid #fffaf0;border-radius:24px;min-height:52px;padding:12px 20px;font-weight:750;font-size:14px;box-shadow:0 4px #54795022}#visit-friend{background:#f8dc97!important;animation:invite 2s ease-in-out infinite}@keyframes invite{50%{transform:translateY(-4px)}}.at-stop .controls{opacity:.15;pointer-events:none}.at-stop .controls button{pointer-events:none}.at-stop #caption,.at-stop #letter{display:none}.trip-memories{font-size:12px;line-height:1.8;color:#6e806b}.finish-card{max-height:94vh;overflow:auto}
.narrator-button{width:100%;min-height:48px;border-radius:15px;background:#e6f1dc;border:2px solid #fff;font-size:12px;font-weight:800;margin:2px 0 9px;box-shadow:0 3px #45654b1c}
@media(max-width:720px){.activity-panel{width:270px;right:14px;top:135px;padding:18px;max-height:calc(100vh - 150px)}.activity-panel h2{font-size:25px}#nearby{bottom:110px}#nearby button{font-size:12px;padding:10px 14px}.basket{z-index:4}}
@media(max-height:540px){.activity-panel{top:72px;right:16px;width:300px;padding:15px;max-height:calc(100vh - 82px)}.activity-panel h2{font-size:23px;margin:9px 0}.activity-panel p{font-size:11px;margin:5px 0}.fuel-display{padding:5px 0}.tank{height:64px}.pump-button{min-height:55px}.activity-panel .primary{margin-top:10px}.ice-stack{height:118px}.scoop{height:35px;width:52px}.cone-shape{border-top-width:56px;border-left-width:22px;border-right-width:22px}.flavors button{min-height:58px;font-size:22px}.activity-hero,.picked-flowers{padding:12px 0;font-size:31px}#nearby{bottom:92px}}
/* Thumb docks: scene information stays high; every game action lives at an edge. */
:root{--edge-l:max(18px,env(safe-area-inset-left));--edge-r:max(18px,env(safe-area-inset-right));--edge-b:max(18px,env(safe-area-inset-bottom));--dock:220px}
.controls{left:var(--edge-l);right:var(--edge-r);bottom:var(--edge-b);z-index:8}
.controls button{min-width:82px;min-height:82px}.steering,.actions{gap:12px}#boost{min-width:94px;min-height:94px}
.top-actions{position:fixed;left:var(--edge-l);bottom:calc(var(--edge-b) + 106px);gap:12px;z-index:9}.top-actions .icon{width:56px;height:56px}
#nearby{left:auto;right:var(--edge-r);bottom:calc(var(--edge-b) + 108px);transform:none;width:var(--dock);display:grid;gap:8px;white-space:normal;z-index:8}
#nearby button{min-height:56px;padding:8px 12px;font-size:13px}#hint{pointer-events:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);font-size:9px;max-width:30vw;text-align:center}
#fork{inset:auto 0 calc(var(--edge-b) + 184px);transform:none;background:none;box-shadow:none;border:0;padding:0;pointer-events:none}
#fork>small{display:block;text-align:center}#fork>div{margin:0}#fork button{position:fixed;bottom:calc(var(--edge-b) + 184px);width:var(--dock);min-height:70px;pointer-events:auto;background:#fff3cc;box-shadow:0 4px #34504830}
#orchard{left:var(--edge-l)}#pond{right:var(--edge-r)}body:has(#fork:not([hidden])) #nearby{display:none}
.activity-panel{top:100px;right:var(--edge-r);bottom:auto;width:300px;padding:20px;max-height:calc(100dvh - 390px);overflow:auto}
.activity-panel h2{font-size:27px;margin:10px 0}.activity-panel p{margin:8px 0}.at-stop .controls{display:none}.at-stop .top-actions{bottom:calc(var(--edge-b) + 204px)}
.activity-panel .primary{position:fixed;bottom:var(--edge-b);left:var(--edge-l);width:var(--dock);min-height:60px;margin:0}
.pump-button,.flavors{position:fixed;right:var(--edge-r);bottom:var(--edge-b);width:var(--dock)}.flavors{gap:8px;flex-wrap:wrap}.flavors button{flex:1 0 60px;min-height:76px}
.word-tools{position:fixed;left:var(--edge-l);bottom:calc(var(--edge-b) + 72px);width:var(--dock);display:grid;grid-template-columns:1fr 1fr;gap:8px}
.word-tools button{min-height:56px;border-radius:16px;background:#fff3d8;border:2px solid white;font-size:12px;font-weight:750;padding:8px}.word-tools #animal-play{grid-column:span 2;background:#f5d57f}
.letter-tray{position:fixed;right:var(--edge-r);bottom:var(--edge-b);width:var(--dock);display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.letter-tray button{min-height:70px;border-radius:20px;font-size:30px;font-weight:850;background:#ffefd0;box-shadow:0 4px #b9a989;border:3px solid white;touch-action:manipulation}
.letter-tray button:disabled{opacity:.25;box-shadow:none}.letter-tray #word-again{grid-column:span 3;font-size:17px;min-height:56px;background:#cfe8b9}
.word-slots{display:flex;justify-content:center;gap:7px;margin-top:18px}.word-slots span{display:grid;place-items:center;border:2px dashed #9cb199;border-radius:12px;width:43px;height:52px;font-size:27px;font-weight:850;color:#91a189}.word-slots .filled{border-style:solid;background:#dcebc3;color:#315a48}
#word-feedback{text-align:center;font-weight:700;min-height:42px}.hint-letter{outline:4px solid #427257;animation:invite 1.5s infinite}.try-again{animation:gentle-wiggle .3s}@keyframes gentle-wiggle{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.modal .primary{position:fixed;right:var(--edge-r);bottom:var(--edge-b);width:var(--dock);min-height:60px}.modal .secondary{position:fixed;left:var(--edge-l);bottom:var(--edge-b);width:var(--dock);min-height:60px;margin:0}.modal .panel{margin-bottom:90px;max-height:calc(100dvh - 150px)}
.intro{top:100px;bottom:auto;max-height:calc(100dvh - 350px);overflow:auto}.intro fieldset{position:fixed;width:var(--dock);background:#fffcf1ed;padding:12px;border-radius:20px;margin:0}.intro fieldset:first-of-type{left:var(--edge-l);bottom:var(--edge-b)}.intro fieldset:nth-of-type(2){right:var(--edge-r);bottom:calc(var(--edge-b) + 76px)}.intro .gentle{position:fixed;right:var(--edge-r);bottom:calc(var(--edge-b) + 182px);width:var(--dock);min-height:48px;background:#fffcf1ed;padding:10px;border-radius:16px;margin:0}.gentle span{display:none}.gentle input{width:26px;height:26px}.intro .primary{position:fixed;right:var(--edge-r);bottom:var(--edge-b);width:var(--dock);min-height:60px}.colors button{width:44px;height:44px}.friends button{min-height:56px}.friends span{display:none}
@media(max-width:600px){:root{--dock:160px;--edge-l:max(10px,env(safe-area-inset-left));--edge-r:max(10px,env(safe-area-inset-right))}.controls button{min-width:66px;min-height:72px}#boost{min-width:78px;min-height:82px}.steering,.actions{gap:8px}.letter-tray{gap:6px}.letter-tray button{min-height:58px;font-size:25px}.word-tools button{font-size:11px}.activity-panel{top:120px;width:260px;max-height:calc(100dvh - 420px)}.intro{width:290px;top:70px;max-height:calc(100dvh - 360px)}.intro .colors{gap:2px}.colors button{width:32px;height:44px}.intro fieldset{padding:10px}.intro h1{font-size:48px}.intro h1 i{display:none}#hint{display:none}}
@media(max-height:600px){.activity-panel{top:64px;max-height:calc(100dvh - 260px);width:280px;padding:10px 16px}.activity-panel h2{font-size:21px}.activity-panel .eyebrow,.activity-panel #activity-help{display:none}.word-slots{margin-top:7px}.word-slots span{height:38px}.intro{top:64px;max-height:calc(100dvh - 190px);width:280px}.intro h1{font-size:36px}.intro-foot{display:none}#hint{display:none}}
@media(prefers-reduced-motion:reduce){.hint-letter,#visit-friend,.try-again{animation:none}}

/* Director cycle 001: hint is a preview, not a placed tile. */
.word-slots .ghost-letter{color:#729663;background:#f5f8ed;border-style:dashed;font-weight:500}
.at-stop .basket{display:none}

.friend-postcard{background:#fff4d9;border:2px dashed #d4b982;border-radius:14px;padding:10px;margin-top:10px;text-align:center}.postcard-heading{font-size:11px;font-weight:850;color:#486552}.postcard-stickers{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:6px}.friend-sticker{display:grid;place-items:center;min-width:37px}.friend-sticker b{font-size:26px;line-height:1.15}.friend-sticker small{font-size:9px;font-weight:750}.friend-postcard p{font-size:10px!important;margin:6px 0 0!important;line-height:1.2!important}#arrival-postcard .friend-postcard{margin:12px 0 0}
@media(max-height:760px){#stop-postcard .friend-postcard{padding:6px;margin-top:6px}#stop-postcard .friend-postcard p{display:none}#stop-postcard .friend-sticker b{font-size:22px}.activity-panel #word-feedback{min-height:0;margin:7px 0}}
@media(max-height:600px){#stop-postcard .postcard-heading{display:none}#stop-postcard .friend-postcard{padding:3px;margin-top:3px}#stop-postcard .postcard-stickers{margin:0}#stop-postcard .friend-sticker{display:flex;gap:3px}.activity-panel{max-height:calc(100dvh - 250px)}}

.letter-tray .word-choice{grid-column:span 3;min-height:58px;font-size:25px;letter-spacing:3px}
.wash-bubbles{position:fixed;right:var(--edge-r);bottom:var(--edge-b);width:var(--dock);z-index:9}
#activity-body #pump{position:relative;right:auto;bottom:auto;width:100%;min-height:56px;margin-top:10px;font-size:22px}

/* Scenery pass 2026-09-24: big hand-lettered place titles. */
#zone-title{position:fixed;left:50%;top:30vh;transform:translate(-50%,0) scale(.6);z-index:6;pointer-events:none;opacity:0;text-align:center;transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
#zone-title.show{opacity:1;transform:translate(-50%,0) scale(1)}
#zone-title i{display:block;font-style:normal;font-size:54px;line-height:1;filter:drop-shadow(0 3px 0 #2f3d3833)}
#zone-title b{display:block;white-space:nowrap;font-family:"Chalkboard SE","Segoe Print","Marker Felt","Comic Sans MS",cursive;font-size:clamp(38px,6.4vw,76px);font-weight:700;color:#fffaf0;letter-spacing:1px;-webkit-text-stroke:2px #2f3d38;paint-order:stroke fill;text-shadow:0 5px 0 #2f3d3844}
@media(prefers-reduced-motion:reduce){#zone-title{transition:opacity .3s}}

/* Smaller stop cards: the narrator reads the instructions, so the card keeps just the title and the word. */
.activity-panel{width:236px;padding:14px 16px;top:96px}
.activity-panel h2{font-size:21px;margin:6px 0 4px;letter-spacing:-.5px}
.activity-panel #activity-help{display:none}
.activity-panel .narrator-button{min-height:42px;margin:4px 0 6px}
.word-slots{margin-top:8px}.word-slots span{width:38px;height:46px;font-size:24px}
@media(max-width:600px){.activity-panel{width:210px}}

/* Sunny the sun narrates: sits on each caption bubble and talks while Ava's voice plays. */
#caption{padding-left:78px!important;overflow:visible}
#caption::before{content:'';position:absolute;left:-18px;top:50%;width:86px;height:86px;margin-top:-43px;background:url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cpath d="M50 50 L97.4 42.4 L97.4 57.6Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L94.9 67.1 L87.2 80.3Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L80.3 87.2 L67.1 94.9Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L57.6 97.4 L42.4 97.4Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L32.9 94.9 L19.7 87.2Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L12.8 80.3 L5.1 67.1Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L2.6 57.6 L2.6 42.4Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L5.1 32.9 L12.8 19.7Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L19.7 12.8 L32.9 5.1Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L42.4 2.6 L57.6 2.6Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L67.1 5.1 L80.3 12.8Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L87.2 19.7 L94.9 32.9Z" fill="%23ffb627"/%3E%3Ccircle cx="50" cy="50" r="31" fill="%23ffd23f" stroke="%23e79a1c" stroke-width="3"/%3E%3Ccircle cx="42" cy="44" r="10" fill="%23fff3a6" opacity=".55"/%3E%3Cellipse cx="39" cy="46" rx="3.6" ry="5" fill="%233b2a1a"/%3E%3Cellipse cx="61" cy="46" rx="3.6" ry="5" fill="%233b2a1a"/%3E%3Ccircle cx="40.2" cy="44.2" r="1.3" fill="%23fff"/%3E%3Ccircle cx="62.2" cy="44.2" r="1.3" fill="%23fff"/%3E%3Cellipse cx="31" cy="56" rx="5" ry="3.2" fill="%23f58a7a" opacity=".7"/%3E%3Cellipse cx="69" cy="56" rx="5" ry="3.2" fill="%23f58a7a" opacity=".7"/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 4px 0 #3d655122);animation:sunny-spin 14s linear infinite}
#caption::after{content:'';position:absolute;left:17px;top:50%;width:17px;height:11px;margin-top:6px;background:url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16"%3E%3Cpath d="M2 2 Q12 18 22 2 Z" fill="%238a2f2a" stroke="%233b2a1a" stroke-width="1.6" stroke-linejoin="round"/%3E%3Cpath d="M7 9 Q12 13 17 9 Q12 7 7 9Z" fill="%23f47b7b"/%3E%3C/svg%3E") center/contain no-repeat;transform-origin:50% 0;transform:scaleY(.35)}
body.narrator-talking #caption::before{animation:sunny-bob .42s ease-in-out infinite alternate}
body.narrator-talking #caption::after{animation:sunny-talk .17s ease-in-out infinite alternate}
@keyframes sunny-talk{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes sunny-bob{from{transform:translateY(-2px) rotate(-5deg)}to{transform:translateY(2px) rotate(5deg)}}
@keyframes sunny-spin{from{transform:rotate(0)}to{transform:rotate(0)}}
@media(max-width:720px){#caption{padding-left:62px!important}#caption::before{width:66px;height:66px;margin-top:-33px;left:-12px}#caption::after{left:14px;width:13px;height:9px;margin-top:4px}}
@media(prefers-reduced-motion:reduce){body.narrator-talking #caption::before{animation:none}}

/* Sunny guide at stops: sits beside the card with the current hint; a bouncing hand + glow marks what to tap. */
#sunny-guide{position:fixed;right:276px;top:104px;width:92px;height:92px;z-index:8;pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
#sunny-guide.show{opacity:1;transform:scale(1)}
#sunny-guide::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cpath d="M50 50 L97.4 42.4 L97.4 57.6Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L94.9 67.1 L87.2 80.3Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L80.3 87.2 L67.1 94.9Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L57.6 97.4 L42.4 97.4Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L32.9 94.9 L19.7 87.2Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L12.8 80.3 L5.1 67.1Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L2.6 57.6 L2.6 42.4Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L5.1 32.9 L12.8 19.7Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L19.7 12.8 L32.9 5.1Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L42.4 2.6 L57.6 2.6Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L67.1 5.1 L80.3 12.8Z" fill="%23ffb627"/%3E%3Cpath d="M50 50 L87.2 19.7 L94.9 32.9Z" fill="%23ffb627"/%3E%3Ccircle cx="50" cy="50" r="31" fill="%23ffd23f" stroke="%23e79a1c" stroke-width="3"/%3E%3Ccircle cx="42" cy="44" r="10" fill="%23fff3a6" opacity=".55"/%3E%3Cellipse cx="39" cy="46" rx="3.6" ry="5" fill="%233b2a1a"/%3E%3Cellipse cx="61" cy="46" rx="3.6" ry="5" fill="%233b2a1a"/%3E%3Ccircle cx="40.2" cy="44.2" r="1.3" fill="%23fff"/%3E%3Ccircle cx="62.2" cy="44.2" r="1.3" fill="%23fff"/%3E%3Cellipse cx="31" cy="56" rx="5" ry="3.2" fill="%23f58a7a" opacity=".7"/%3E%3Cellipse cx="69" cy="56" rx="5" ry="3.2" fill="%23f58a7a" opacity=".7"/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 4px 0 #3d655122)}
#sunny-guide::after{content:'';position:absolute;left:37px;top:52px;width:18px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16"%3E%3Cpath d="M2 2 Q12 18 22 2 Z" fill="%238a2f2a" stroke="%233b2a1a" stroke-width="1.6" stroke-linejoin="round"/%3E%3Cpath d="M7 9 Q12 13 17 9 Q12 7 7 9Z" fill="%23f47b7b"/%3E%3C/svg%3E") center/contain no-repeat;transform-origin:50% 0;transform:scaleY(.35)}
body.narrator-talking #sunny-guide::before{animation:sunny-bob .42s ease-in-out infinite alternate}
body.narrator-talking #sunny-guide::after{animation:sunny-talk .17s ease-in-out infinite alternate}
#sunny-guide span{position:absolute;right:88px;top:22px;background:#fff9ea;border:2px solid #ffd23f;border-radius:18px;padding:8px 12px;font-weight:800;font-size:15px;color:#3d4a3a;white-space:nowrap;box-shadow:0 4px 0 #3d655118}
#sunny-guide span:empty{display:none}
#sunny-guide span::after{content:'';position:absolute;right:-9px;top:50%;margin-top:-7px;border:7px solid transparent;border-left-color:#ffd23f;border-right:0}
#sunny-pointer{position:fixed;left:0;top:0;z-index:30;font-size:44px;line-height:1;pointer-events:none;opacity:0;transition:opacity .25s;filter:drop-shadow(0 3px 0 #0002)}
#sunny-pointer.show{opacity:1;animation:sunny-point .6s ease-in-out infinite alternate}
@keyframes sunny-point{from{margin-top:-8px}to{margin-top:4px}}
.sunny-target{outline:4px solid #ffd23f!important;outline-offset:3px;animation:sunny-glow 1s ease-in-out infinite alternate!important}
@keyframes sunny-glow{from{box-shadow:0 0 0 0 #ffd23f99}to{box-shadow:0 0 0 12px #ffd23f00,0 0 22px 6px #ffd23faa}}
@media(max-width:600px){#sunny-guide{right:246px;width:70px;height:70px}#sunny-guide::after{left:28px;top:40px;width:14px;height:9px}#sunny-guide span{right:66px;font-size:12px}}
@media(max-width:560px){#sunny-guide span{display:none}}
@media(prefers-reduced-motion:reduce){#sunny-pointer.show,.sunny-target{animation:none!important}}

/* Sunny the narrator (3D lemonade girl, narrator.js) replaces the drawn sun faces. */
#sunny-narrator{position:fixed;left:4px;top:30vh;width:176px;height:236px;padding:0;border:0;background:none;z-index:9;display:none;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;transition:opacity .4s}
#sunny-narrator canvas{width:176px;height:236px;display:block}
#sunny-narrator::after{content:'';position:absolute;left:34px;right:34px;bottom:4px;height:12px;border-radius:50%;background:#2d4a2a33;z-index:-1}
body.playing #sunny-narrator{display:block}
#sunny-narrator.ready{opacity:1}
#caption::before,#caption::after{display:none!important}
#caption{padding-left:18px!important}
#sunny-guide{left:168px;right:auto;top:calc(30vh + 22px);width:0;height:0}
#sunny-guide::before,#sunny-guide::after{display:none!important}
#sunny-guide span{left:0;right:auto;top:0;white-space:normal;width:max-content;max-width:230px}
#sunny-guide span::after{left:-9px;right:auto;border:7px solid transparent;border-right-color:#ffd23f;border-left:0}
@media (max-width:760px){#sunny-narrator{transform:scale(.72);transform-origin:left top}#sunny-guide{left:112px}}

/* Hop coaching: the Hop button pulses gold while the car is in the tap window. */
#hop.hop-now{background:#ffd84d!important;animation:hopNow .38s ease-in-out infinite alternate;box-shadow:0 0 0 6px #fff3b0,0 0 26px 10px #ffd84dcc!important}
@keyframes hopNow{from{transform:scale(1)}to{transform:scale(1.16)}}

.kidname{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:12px;font-weight:800}
.kidname input{flex:1;min-height:46px;border-radius:14px;border:2px solid #d9e2c6;background:#fffdf5;padding:0 14px;font:inherit;font-size:17px;color:#274540}
.kidname input:focus{outline:3px solid #92ab77;border-color:#92ab77}

/* fix-0924: caption never wider than the screen; no keyboard hint on touch; wash bubbles live inside the stop card. */
@media(min-width:721px){#caption{width:max-content;max-width:calc(100vw - 32px);white-space:normal;text-align:center}}
@media(pointer:coarse){#hint{display:none!important}}
.activity-panel .wash-bubbles{position:static;width:auto;right:auto;bottom:auto;z-index:auto}

/* slide-to-read (09-25): big word, finger slides under it, letters light in rainbow order. */
.letter-tray .read-strip{grid-column:1/-1;position:relative;display:flex;justify-content:center;gap:4px;padding:10px 10px 22px;border-radius:22px;background:#fff7e0;border:3px solid white;box-shadow:0 4px #b9a989;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}
.read-strip span{flex:1;max-width:58px;text-align:center;font-size:40px;font-weight:900;line-height:1.1;color:#b8bfae;transition:color .18s,transform .18s}
.read-strip span.lit{transform:translateY(-4px) scale(1.14)}
.read-strip span.lit:nth-child(6n+1){color:#e8453c}.read-strip span.lit:nth-child(6n+2){color:#f08a24}.read-strip span.lit:nth-child(6n+3){color:#d9a400}.read-strip span.lit:nth-child(6n+4){color:#3f9a4b}.read-strip span.lit:nth-child(6n+5){color:#2f7fd0}.read-strip span.lit:nth-child(6n+6){color:#8a4fc8}
.read-strip i{position:absolute;left:16px;right:16px;bottom:9px;height:7px;border-radius:4px;background:linear-gradient(90deg,#ffcf5c,#ff8a5c)}
.read-strip i::after{content:'';position:absolute;right:-9px;top:-5px;border:8.5px solid transparent;border-left:11px solid #ff8a5c;border-right:0}
#sunny-pointer.show.slide{animation:hand-slide 1.6s ease-in-out infinite!important}
@keyframes hand-slide{0%{translate:-80px 58px}75%,100%{translate:80px 58px}}
@media(prefers-reduced-motion:reduce){#sunny-pointer.show.slide{animation:none!important}}

/* word packs (09-25): picture above the word choices */
.activity-panel .word-pic{font-size:52px;line-height:1.05;text-align:center;margin:0 0 4px}
@media(max-height:560px){.activity-panel .word-pic{font-size:36px}}

/* trip map (09-25): where to + your sky, on the start screen (compact so it fits without scrolling) */
.intro .mission{display:none}.trip-map{margin:2px 0 4px}
.tm-title{font-size:10px;font-weight:850;letter-spacing:1.8px;color:#6d7b6f;margin:2px 2px 6px}.tm-title small{font-size:9px;letter-spacing:.4px;font-weight:700;color:#98a394;margin-left:6px}
.tm-trips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.tm-trips button{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:16px;background:#f0f0e3;border:3px solid transparent;min-height:56px;text-align:left;touch-action:manipulation;cursor:pointer}
.tm-trips i{font-style:normal;font-size:28px;line-height:1}.tm-trips b{font-size:12px;font-weight:800;color:#3e4a3f;line-height:1.15}
.tm-trips .selected{border-color:#f0a53a;background:#fff1cf;box-shadow:0 3px #e7c77f}
.tm-looks{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tm-looks button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;border-radius:14px;background:#eef4f7;border:2px solid white;font-size:22px;line-height:1.1;min-height:54px;touch-action:manipulation;cursor:pointer}
.tm-looks span{font-size:10px;font-weight:800;color:#50606a}

/* reading level (09-25) */
.intro:has(.trip-map) .intro-foot{display:none}.tm-looks{margin-bottom:10px}
.tm-read{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tm-read button{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:14px;background:#f3eefa;border:3px solid transparent;min-height:46px;text-align:left;touch-action:manipulation;cursor:pointer}
.tm-read i{font-style:normal;font-size:22px;line-height:1}.tm-read span{display:flex;flex-direction:column;line-height:1.1}.tm-read b{font-size:12px;font-weight:850;color:#3e4a3f}.tm-read small{font-size:9.5px;font-weight:700;color:#7d7a8c}
.tm-read .selected{border-color:#9b7fd6;background:#efe7ff;box-shadow:0 3px #c6b5ea}
.letter-tray.build{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.letter-tray.build button{min-height:62px;font-size:28px}.letter-tray.build button:disabled{opacity:.25}
.level-up{margin-bottom:10px;background:#efe7ff!important;color:#4a3a78!important}
.intro:has(.trip-map) h1{font-size:50px;margin:6px 0 4px}.intro:has(.trip-map) .lede{margin-bottom:8px}
@media(min-height:601px){.intro:has(.trip-map){max-height:calc(100dvh - 225px)}}

/* reading level 3 (09-25): three level buttons, the sentence line */
.tm-read{grid-template-columns:repeat(3,1fr)}.tm-read button{padding:5px 7px;gap:6px}.tm-read i{font-size:19px}
.activity-panel p.sentence3{margin:2px 0 8px;text-align:center;font-size:30px;font-weight:850;line-height:1.25;color:#3a3350}
.sentence3 .blank{display:inline-block;min-width:74px;border-bottom:4px dashed #e2a64b;color:#e2a64b}
.sentence3 .fit{color:#3f9a4b}
.word-pic+.sentence3{margin-top:-4px}
.activity-panel .sentence3~.word-slots{display:none}
@media(max-height:540px){.activity-panel p.sentence3{font-size:22px;margin:0 0 4px}}

/* owner 10-06: landscape steering - left arrow in the lower-left corner, right arrow in the lower-right corner (hop + boost sit just inside it). */
@media (orientation:landscape){.steering{display:contents}#left{order:0}.controls .actions{order:1;margin-left:auto}#right{order:2;margin-left:12px}}