/* Storybook layer: legible type for young readers, depth, and the opening and finale animations. */

:root{--cream:#fffaf0;--card-line:#e4e0c9;--card-shadow:0 1px 0 #ffffffcc inset,0 16px 34px -20px #34503a66,0 2px 6px -3px #34503a26;--pop:cubic-bezier(.34,1.56,.64,1);--ease-out:cubic-bezier(.22,1,.36,1)}
body{background:radial-gradient(1100px 620px at 94% -10%,#f5ddb066,transparent 62%),radial-gradient(900px 540px at -14% 16%,#dfe8cf99,transparent 60%),var(--paper);min-height:100svh}
/* Type: nothing a child reads drops below 11px. */

.eyebrow{font-size:11px;letter-spacing:2px}.score-heading .eyebrow{font-size:10px;letter-spacing:1.6px}
.hero-copy>p{font-size:16px;max-width:400px}
.hero-copy .hero-note{font-size:13px}
.welcome-bottom p,.footer{font-size:12.5px}
.art-label{font-size:12px}
.sidebar-heading{font-size:13px}.sidebar-heading span{font-size:12px}
.extra-count{font-size:11.5px}
.food-slot b{font-size:12px}.food-slot small{font-size:10.5px}
.panel-clock{font-size:12px}
.prize-preview{font-size:13px}
#adventure-dialog .puzzle-exit-note{font-size:11.5px}
.station-level small{font-size:10.5px}.station-level em{font-size:12.5px}
.station-food{font-size:12px}
.zone-quests button small{font-size:11px}.zone-quests button>div>b{font-size:13px}
.map-intro{font-size:13px!important}
.discovery-card p{font-size:12px}
.journal-stats span{font-size:12px}
.alyssia-checklist>span{font-size:12px}
.food-album b{font-size:12px}.food-album small{font-size:11px}
.cake-enhancements b{font-size:13px}.cake-enhancements small{font-size:11.5px}
.score-breakdown dt{font-size:12px}.score-card>p{font-size:11px}
/* Buttons feel like toys: a soft 3D base, a shine on hover and a real press. */

.button{border-radius:14px}
.button.primary{background:linear-gradient(180deg,#587b5f,#3f6047);box-shadow:0 5px 0 #2c4632,0 14px 24px -12px #2c4632cc;position:relative;overflow:hidden;isolation:isolate}
.button.primary:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffff45 50%,transparent 70%);translate:-120% 0;transition:translate .8s var(--ease-out);z-index:-1}
.button.primary:hover{background:linear-gradient(180deg,#507457,#365640)}
.button.primary:hover:after{translate:120% 0}
.button.primary:active{transform:translateY(4px);box-shadow:0 1px 0 #2c4632,0 6px 12px -8px #2c4632cc}
.button.primary:disabled{filter:saturate(.4);opacity:.7;transform:none}.answer-button,.station-level,.zone-quests button,.recipe-button,.memory-card,.letter-tile{transition:transform .18s var(--pop),background .2s,box-shadow .2s,border-color .2s}.station-level:hover:not(:disabled),.zone-quests button:hover:not(:disabled){transform:translateY(-2px)}.answer-button:active:not(:disabled),.letter-tile:active:not(:disabled){transform:translateY(2px) scale(.97)}
.answer-button.correct{animation:correct-pop .5s var(--pop)}
.wordmark svg{transition:rotate .6s var(--pop)}.wordmark:hover svg{rotate:72deg}
/* Dialogs open like a page lifted from the book. */

dialog{border:0;border-radius:26px;background:linear-gradient(180deg,#fffcf4,#f7f1e2);box-shadow:0 0 0 1px #ffffffa0 inset,0 40px 90px -30px #1d3325b3,0 0 0 1px #d8d6bf}
dialog[open]{animation:dialog-in .45s var(--pop)}
dialog[open]::backdrop{animation:fade-in .3s ease both;background:radial-gradient(circle at 50% 40%,#3a52428a,#1f3427b3);backdrop-filter:blur(5px)}
.dialog-close{background:#efe9d6;transition:rotate .3s var(--pop),background .2s}.dialog-close:hover{rotate:90deg;background:#e6dcc0}
/* ---------- Welcome: the cast arrives one by one ---------- */

.welcome .hero-copy>*{animation:rise .8s var(--ease-out) both}
.welcome .hero-copy>:nth-child(2){animation-delay:.08s}.welcome .hero-copy>:nth-child(3){animation-delay:.2s}.welcome .hero-copy>:nth-child(4){animation-delay:.32s}.welcome .hero-copy>:nth-child(5){animation-delay:.42s}.welcome .hero-copy>:nth-child(6){animation-delay:.5s}
.title-accent:after{transform-origin:left center;animation:underline-draw .9s .75s var(--ease-out) both}
.hero-art .garden-bg{animation:bloom 1.1s var(--ease-out) both}
.birthday-hero .anya{animation:slide-from-left .9s .5s var(--ease-out) both,idle-bob 4.6s 1.6s ease-in-out infinite}
.birthday-hero .alyssia{animation:slide-from-right .9s .65s var(--ease-out) both,idle-bob 5.2s 2s ease-in-out infinite}
.birthday-hero .pandora{transform-origin:bottom center;animation:hop-in .8s .95s var(--pop) both,puppy-wag 2.4s 2s ease-in-out infinite}
.birthday-hero .speech-bubble{transform-origin:right bottom;animation:pop-in .5s 1.45s var(--pop) both}
.birthday-hero .birthday-sticker{animation:spin-in .9s 1.15s var(--pop) both,wobble 5s 2.3s ease-in-out infinite}
.birthday-hero .art-label{animation:pop-in .45s var(--pop) both}
.birthday-hero .anya-label{animation-delay:1.3s}.birthday-hero .pandora-label{animation-delay:1.4s}.birthday-hero .alyssia-label{animation-delay:1.5s}
.hero-spark{animation:pop-in .5s 1.6s var(--pop) both,twinkle 2.6s 2.2s ease-in-out infinite}
.welcome-actions .button.primary{animation:cta-glow 2.8s 2s ease-in-out infinite}
.hero-balloons{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;border-radius:46% 46% 30% 30%}
.hero-balloons .balloon{left:calc(10% + var(--i)*34%);animation:balloon-rise calc(13s + var(--i)*3s) calc(var(--i)*-5s + 1s) linear infinite}
.hero-twinkles{position:absolute;inset:0;pointer-events:none;z-index:6}
/* Shared decorations */

.balloon{position:absolute;bottom:-90px;width:34px;height:42px;border-radius:50% 50% 48% 48%/55% 55% 45% 45%;background:radial-gradient(circle at 32% 28%,#ffffffa8 0 10%,transparent 26%),var(--c);box-shadow:inset -5px -6px 0 #0000001a}
.balloon:before{content:'';position:absolute;left:50%;bottom:-5px;translate:-50% 0;border:5px solid transparent;border-bottom:6px solid var(--c);border-top:0}
.balloon:after{content:'';position:absolute;left:50%;top:100%;width:1px;height:52px;background:#9d8f6e99;margin-top:5px}
.twinkle{position:absolute;left:var(--x);top:var(--y);font-style:normal;font-size:15px;line-height:1;color:#e8b65a;text-shadow:0 0 10px #ffe0a0;animation:twinkle 2.6s var(--d) ease-in-out infinite;pointer-events:none}
/* ---------- The story: a full-screen illustrated book ---------- */

#adventure-dialog.story-dialog{max-width:min(1120px,calc(100% - 32px));width:100%;max-height:calc(100svh - 32px);padding:0;overflow:auto;animation:book-open .6s var(--ease-out)}
.story-book{display:grid;grid-template-columns:1.12fr 1fr;min-height:min(620px,calc(100svh - 32px))}
.story-stage{position:relative;overflow:hidden;min-height:340px;border-radius:26px 0 0 26px}
.story-copy{display:flex;flex-direction:column;justify-content:center;padding:52px 52px 44px}
.story-copy>*{animation:rise .65s var(--ease-out) both}
.story-copy>:nth-child(2){animation-delay:.08s}.story-copy>:nth-child(3){animation-delay:.16s}.story-copy>:nth-child(4){animation-delay:.24s}.story-copy>:nth-child(5){animation-delay:.3s}.story-copy>:nth-child(6){animation-delay:.36s}.story-copy>:nth-child(7){animation-delay:.42s}
#adventure-dialog .story-copy .eyebrow{color:#9b7036;margin-bottom:16px}
#adventure-dialog .story-copy h2{font-size:clamp(32px,3.4vw,44px);line-height:1.08;letter-spacing:-1.4px;margin-bottom:18px}
.story-copy>p{font-size:16px;line-height:1.75;color:#5b6857}
.story-copy .button{margin-top:26px;width:100%}
.story-copy #intro-skip{display:block;margin:16px auto 0;font-size:13px}
.intro-rules{display:flex;align-items:center;gap:14px;background:#f6e8c6;border:1px solid #e6d3a5;border-radius:16px;padding:14px 16px;margin-top:20px}.intro-rules>.symbol{width:30px;height:30px;color:#a18348;animation:tick 2s steps(2) infinite}.intro-rules p{font-size:13px;line-height:1.65;color:#7b6747}
.intro-dots{display:flex;gap:7px;justify-content:flex-start;margin:24px 0 0}.intro-dots i{width:9px;height:9px;background:#d6d9c4;border-radius:9px;transition:width .4s}.intro-dots .done{background:#c7b07a}.intro-dots .active{background:#ba9653;width:30px}
/* Sky, sun, clouds and hills behind every illustrated stage. */

.story-sky{position:absolute;inset:0;background:linear-gradient(#f9e2b6 0%,#fbefd7 40%,#eef2df 64%,#dce7c8 100%);overflow:hidden;z-index:0}
.story-sun{position:absolute;right:11%;top:9%;width:86px;height:86px;border-radius:50%;background:radial-gradient(circle,#fff0bf 0 40%,#f6cf73 42% 58%,transparent 60%);filter:drop-shadow(0 0 26px #ffd98a)}
.story-sun:before{content:'';position:absolute;inset:-34px;border-radius:50%;background:repeating-conic-gradient(#f7d27f55 0 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(circle,transparent 42%,#000 44%,transparent 70%);mask:radial-gradient(circle,transparent 42%,#000 44%,transparent 70%);animation:spin 40s linear infinite}
.story-cloud{position:absolute;width:120px;height:34px;border-radius:40px;background:#fffdf7;box-shadow:0 6px 0 #ece3cc;animation:cloud-drift 46s linear infinite}
.story-cloud:before,.story-cloud:after{content:'';position:absolute;background:#fffdf7;border-radius:50%}
.story-cloud:before{width:54px;height:54px;left:18px;top:-28px}.story-cloud:after{width:40px;height:40px;left:60px;top:-18px}
.story-cloud.c1{top:12%;left:-10%;animation-delay:-8s}.story-cloud.c2{top:26%;left:-10%;scale:.7;animation-duration:60s;animation-delay:-34s}.story-cloud.c3{top:6%;left:-10%;scale:.55;animation-duration:70s;animation-delay:-52s;opacity:.8}
.story-hill{position:absolute;border-radius:50%;left:-20%;width:140%}
.story-hill.back{bottom:-30%;height:58%;background:#cfddb7;left:-35%}
.story-hill.front{bottom:-40%;height:58%;background:linear-gradient(#bfd2a3,#aac38e);left:5%}
.story-sky.festive{background:linear-gradient(#f8d9a8 0%,#fbeccd 42%,#f1f0db 66%,#dbe7c6 100%)}
.story-sky.dusk{background:linear-gradient(#e7c5ac 0%,#f2dcc4 42%,#eae6d3 66%,#d4dcc0 100%)}
.story-sky.dusk .story-sun{filter:saturate(.6);top:30%;opacity:.75}
/* Chapter 1: the house strains as Alessandro grows. */

.story-house{position:absolute;left:50%;bottom:4%;width:min(400px,66%);translate:-50% 0;z-index:2}
.intro-0 .scene-speech{position:absolute;right:6%;top:9%;left:auto;max-width:170px;font-size:13px;font-weight:900;line-height:1.5;padding:13px 15px;background:#fffaf0;border:1px solid #e0d8b6;border-radius:16px 16px 4px 16px;box-shadow:0 8px 20px -12px #6b5b3a;z-index:4;rotate:5deg;transform-origin:left bottom;animation:pop-in .5s .9s var(--pop) both,wobble 3s 1.6s ease-in-out infinite}
.alarm-marks{position:absolute;left:50%;top:-6px;translate:-50% 0;display:flex;gap:150px;z-index:3}
.alarm-marks i{font:900 30px Nunito,sans-serif;color:#cf7458;animation:alarm 1.2s ease-in-out infinite}.alarm-marks i:last-child{animation-delay:.6s}
.story-anya,.story-pandora,.story-alyssia{position:absolute;object-fit:contain;object-position:bottom;z-index:3;pointer-events:none}
.story-anya.peeking{left:3%;bottom:6%;height:40%;animation:slide-from-left .8s .4s var(--ease-out) both,idle-bob 3s 1.2s ease-in-out infinite}
.story-pandora.peeking{left:20%;bottom:5%;height:15%;transform-origin:bottom center;animation:hop-in .7s .7s var(--pop) both,puppy-wag 1.6s 1.4s ease-in-out infinite}
/* Chapter 2: Alyssia, the cake and its candles lighting one by one. */

.story-alyssia{left:4%;bottom:5%;height:82%;animation:slide-from-left .9s .2s var(--ease-out) both,idle-bob 3.4s 1.2s ease-in-out infinite}
.story-cake{position:absolute;right:4%;bottom:9%;z-index:2;scale:.95;transform-origin:right bottom;animation:rise .8s .5s var(--ease-out) both}
.story-cake .lit .flame{opacity:1;animation:flame-on .35s calc(1.1s + var(--i)*.16s) var(--pop) both,candle-flicker 1s calc(2.6s + var(--i)*-.2s) ease-in-out infinite alternate}
.story-ingredients{position:absolute;right:7%;top:33%;display:flex;gap:12px;z-index:3}
.story-ingredients span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fffaf0;box-shadow:0 8px 18px -10px #6b5b3a;animation:ingredient-drop .8s calc(.7s + var(--i)*.2s) var(--pop) both,idle-bob 2.6s calc(2s + var(--i)*.4s) ease-in-out infinite}
.story-ingredients .symbol{width:34px;height:34px}
/* Chapter 3: the trail of eight stations, and the team sets off. */

.story-trail{position:absolute;left:21%;top:5%;width:75%;height:58%;z-index:1;overflow:visible}
.story-trail polyline{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2s .3s var(--ease-out) forwards}
.trail-edge{stroke:#c7ae7c;stroke-width:15}.trail-path{stroke:#f6e7c3;stroke-width:10}
.trail-stop{transform-box:fill-box;transform-origin:center;animation:pop-in .45s calc(.45s + var(--i)*.2s) var(--pop) both}
.trail-stop circle{fill:#fffaf0;stroke:#c49a4e;stroke-width:2.5}.trail-stop text{font:900 15px Nunito,sans-serif;fill:#8c6a2f;text-anchor:middle}
.story-anya.walking{left:4%;bottom:4%;height:46%;animation:walk-in 1.4s .3s var(--ease-out) both,step-bob .5s 1.7s ease-in-out infinite}
.story-pandora.walking{left:25%;bottom:4%;height:17%;transform-origin:bottom center;animation:walk-in 1.4s .5s var(--ease-out) both,puppy-wag .6s 1.9s ease-in-out infinite}
.story-prizes{position:absolute;right:5%;bottom:7%;display:flex;flex-direction:column;gap:10px;z-index:3}
.story-prizes>span{display:flex;align-items:center;gap:9px;font-size:14px;background:#fffaf0;border-radius:14px;padding:8px 14px 8px 10px;box-shadow:0 8px 18px -12px #6b5b3a;animation:prize-arrive .7s calc(1.9s + var(--i)*.22s) var(--pop) both}
.story-prizes .symbol{width:30px;height:30px}
/* Leaving the story: curtains part over the garden. */

.adventure-curtain{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.curtain-half{position:absolute;top:0;bottom:0;width:51%;background:radial-gradient(circle at 30% 20%,#fff8e6 0 2px,transparent 3px) 0 0/34px 34px,linear-gradient(180deg,#f8e7c2,#efd9a8);animation:curtain-left 1.2s .75s cubic-bezier(.7,0,.3,1) forwards}
.curtain-half.left{left:0;box-shadow:inset -18px 0 30px -14px #b48d4f80}
.curtain-half.right{right:0;box-shadow:inset 18px 0 30px -14px #b48d4f80;animation-name:curtain-right}
.curtain-title{position:absolute;left:50%;top:50%;translate:-50% -50%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;animation:curtain-title 1.5s var(--ease-out) forwards}
.curtain-title b{font:400 clamp(48px,8vw,96px) Georgia,serif;letter-spacing:-2px;color:var(--ink);line-height:1}
.curtain-title small{font-size:15px;font-weight:800;color:#8a6d38}
.curtain-paw{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:#fff6dc;color:#a7823c;box-shadow:0 10px 24px -12px #8a6d38}.curtain-paw .symbol{width:40px;height:40px}
/* ---------- The garden screen: the whole window is the garden; everything else lives in the menu ---------- */

.in-adventure{overflow:hidden;overscroll-behavior:none}
.in-adventure .topbar,.in-adventure .footer{display:none}
.in-adventure .page-shell{max-width:none;padding:0}
.in-adventure main{min-height:0}
.garden-game{position:fixed;inset:0;z-index:1}
.garden-stage{position:absolute;inset:0;overflow:hidden;background:#b8cca0}
.garden-stage:before{content:'';position:absolute;inset:0;box-shadow:inset 0 -70px 80px -60px #2d493c66,inset 0 60px 70px -60px #2d493c55;pointer-events:none}
#garden-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline:none}
#garden-canvas:focus-visible{outline:3px solid #f7e6ac;outline-offset:-3px}
.stage-top{position:absolute;left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:calc(100% - 150px);pointer-events:none}
.stage-top>*{pointer-events:auto}
.hud-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.hud-button{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 16px 0 12px;border:0;border-radius:14px;background:#2d493c;color:#fff8e6;font-size:14px;font-weight:900;box-shadow:0 8px 18px -10px #1d3325;transition:transform .18s var(--pop)}
.hud-button:active{transform:scale(.95)}
.hud-button .symbol{width:22px;height:22px}
.hud-button.icon-only{width:44px;padding:0;justify-content:center;background:#fffaf0f2;color:var(--ink);border:1px solid #fff}
.hud-button.icon-only .symbol{width:16px;height:16px}
.hud-chip{display:flex;align-items:center;gap:5px;padding:5px 11px 5px 7px;background:#fffaf0f2;border:1px solid #fff;border-radius:999px;box-shadow:0 6px 14px -8px #2d493c80;font-size:14px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--ink)}
.hud-chip .symbol{width:21px;height:21px}
.clock-chip{min-height:44px;border-radius:14px;padding:0 12px;font-size:16px}.clock-chip .symbol{width:18px;height:18px}
.time-urgent .clock-chip{background:#f7ddd2;color:#a8573f;animation:urgent-pulse 1.4s ease-in-out infinite}
.hud-progress{padding:0;border:0;background:none;border-radius:999px}
.hud-progress:hover .hud-chip{background:#fff}
.hud-next{margin:0;font-size:12.5px;line-height:1.45;font-weight:800;padding:6px 12px;background:#2d493cd9;color:#fff8e6;border-radius:10px;box-shadow:0 6px 14px -8px #1d3325;pointer-events:none;transition:opacity .3s}
.hud-next:empty{display:none}
.just-earned{animation:earned-pop .9s var(--pop)}
.zoom-controls{position:absolute;right:max(12px,env(safe-area-inset-right));top:110px;display:flex;gap:6px}
.zoom-controls button{width:40px;height:40px;border:1px solid #fff;border-radius:12px;background:#fffaf0f2;color:var(--ink);font-size:22px;font-weight:800;box-shadow:0 6px 14px -8px #2d493c80}
.stage-feed{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));translate:-50% 0;width:min(560px,calc(100% - 24px));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.garden-message{margin:0;padding:10px 16px;border-radius:16px;background:#fffaf0f5;color:#4d5d48;font-size:14px;line-height:1.5;font-weight:700;text-align:center;box-shadow:0 12px 26px -14px #2d493c}
.garden-message.fresh{animation:toast-in .4s var(--pop)}
.travel-indicator,.pandora-activity{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:900;background:#2d493cd9;color:#fff8e6;white-space:nowrap}
.pandora-activity{background:#fff2cf;color:#866a36;border:1px solid #d9bf79}
.walk-pad{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px);gap:5px;touch-action:none}
.walk-pad button{border:1px solid #fff;background:#fffaf0e6;border-radius:13px;color:var(--ink);font-size:24px;line-height:1;box-shadow:0 4px 0 #6c7e4c40;user-select:none;touch-action:none}
.walk-pad button:first-child{grid-column:2}.walk-pad button:nth-child(2){grid-column:1;grid-row:2}.walk-pad button:nth-child(3){grid-column:2;grid-row:2}.walk-pad button:nth-child(4){grid-column:3;grid-row:2}
.walk-pad button:active{background:#f1dfa8;transform:translateY(2px)}
.stage-actions{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch;gap:8px}
.pandora-controls{display:flex;gap:6px;padding:6px;border:1px solid #fff;border-radius:18px;background:#fffaf0f0;box-shadow:0 10px 24px -14px #2d493c99}
.pandora-controls button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:60px;min-height:56px;padding:4px 2px;border:1px solid #e3dcc0;border-radius:13px;background:#fffdf5;color:var(--ink);font-size:11px;font-weight:900;line-height:1.1;box-shadow:0 2px 0 #d9d2b4;transition:transform .18s var(--pop),background .2s}
.pandora-controls button:hover{background:#f6e9c8}.pandora-controls button:active{transform:translateY(2px) scale(.96);box-shadow:none}
.pandora-controls .symbol{width:24px;height:24px}
.pandora-controls .sniff-button{background:#fae7b1;border-color:#e1c77f;color:#6f5729}
.sniff-button.is-guiding{animation:paw-pulse 1.4s ease-in-out infinite}
.interact-button{display:flex;gap:10px;align-items:center;justify-content:center;min-height:48px;border:0;border-radius:14px;background:linear-gradient(180deg,#587b5f,#3f6047);color:#fff9e5;font-size:15px;font-weight:900;box-shadow:0 4px 0 #2c4632}
.interact-button:active{transform:translateY(3px);box-shadow:0 1px 0 #2c4632}
.interact-button span{font-size:10px;border:1px solid #ffffff66;border-radius:5px;padding:1px 6px}
@media(hover:none){.interact-button span{display:none}}
@media(hover:hover) and (pointer:fine){.walk-pad{display:none}}
@media(max-width:900px){.stage-feed{bottom:calc(152px + env(safe-area-inset-bottom))}}
@media(max-width:420px){.walk-pad{grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px}.pandora-controls button{width:54px}.zoom-controls{top:94px}.stage-top{max-width:calc(100% - 132px)}.hud-button{padding:0 12px 0 10px}}
@media(max-width:360px){.walk-pad{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(2,38px);gap:4px}.pandora-controls button{width:50px;min-height:50px;font-size:10px}.pandora-controls .symbol{width:21px;height:21px}.hud-chip{font-size:12.5px;padding:4px 9px 4px 6px}.hud-chip .symbol{width:18px;height:18px}}
/* The menu drawer slides in from the right; on a phone it covers the screen. */

#adventure-dialog.menu-dialog{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(440px,100%);max-width:none;border-radius:26px 0 0 26px;padding:28px 22px calc(24px + env(safe-area-inset-bottom));animation:drawer-in .38s var(--ease-out)}
#adventure-dialog.menu-dialog h2{font-size:30px}
.menu-mission{font-size:14px!important;line-height:1.6!important;color:var(--muted);margin:8px 0 16px}
.menu-card{margin-top:12px;padding:16px;border:1px solid var(--card-line);border-radius:18px;background:var(--cream);box-shadow:var(--card-shadow)}
.menu-card .sidebar-heading{font-size:14px}
.menu-card .text-button{margin-top:10px;font-size:13px}
.menu-card .growth-track{display:flex;gap:3px}.menu-card .growth-tick{height:7px}
.menu-note{font-size:12.5px!important;line-height:1.6!important;color:#7e806b;margin-top:10px}.menu-note b{display:block;color:#8a6d38}
.menu-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.menu-tiles button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;border:1px solid var(--card-line);border-radius:16px;background:linear-gradient(160deg,#f2f5e8,#e5ecd6);color:var(--ink);text-align:left;transition:transform .18s var(--pop)}
.menu-tiles button:hover{transform:translateY(-2px)}.menu-tiles button:active{transform:scale(.97)}
.menu-tiles .symbol{width:28px;height:28px;margin-bottom:4px}.menu-tiles b{font-size:15px}.menu-tiles small{font-size:12px;line-height:1.4;color:var(--muted)}
.music-controls{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;align-items:center;gap:8px}
.music-now{display:flex;align-items:center;gap:8px;min-width:0}.music-note{font-size:25px;color:#a78b4f}.music-now>span:last-child{min-width:0}
.music-now b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#65734f}.music-now small{display:block;font-size:11.5px;line-height:1.6;color:#8c805f}
.music-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #d7d9c2;border-radius:12px;background:#f3eedb;color:#776c42;font-size:22px;line-height:1}.music-button:hover{background:#e9e1c5}.music-button .symbol{width:20px;height:20px}
.music-volume{grid-column:1/-1;display:flex;align-items:center;gap:12px;font-size:12px;color:#7d795f}.music-volume input{flex:1;min-width:0;min-height:30px;margin:0;accent-color:#85935e;cursor:pointer}
.autosave-note{display:flex;align-items:center;gap:6px;margin-top:16px;font-size:11.5px;color:#849178}.autosave-note .symbol{width:14px;height:14px}
@media(max-width:480px){#adventure-dialog.menu-dialog{border-radius:0;width:100%}}

@keyframes urgent-pulse{50%{scale:1.06;box-shadow:0 0 0 6px #e8a48f40}}
@keyframes paw-pulse{50%{scale:1.1}}
@keyframes drawer-in{from{translate:100% 0}}
@keyframes toast-in{from{opacity:0;translate:0 10px;scale:.96}}

.candle-slot{border-radius:8px;height:40px}
.food-slot{border-radius:12px}
/* ---------- Alessandro grows: his real poses inside the illustrated house ---------- */

.growth-house{position:relative;width:100%;aspect-ratio:1;--s:calc(.84 + var(--g,1)*.02)}
.growth-casa{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.growth-room{position:absolute;left:19%;right:19%;top:24%;bottom:15.5%}
.growth-room .pose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom center;transform-origin:bottom center;scale:var(--s)}
.growth-house.animate{animation:house-tremble .5s 1.15s ease-in-out 2}
.growth-house.animate .pose.before{animation:pose-out .45s 1.15s ease-in both}
.growth-house.animate .pose.after{animation:pose-in .7s 1.35s var(--pop) both,pose-breathe 2.4s 2.3s ease-in-out infinite}
.growth-sparks{position:absolute;left:50%;top:40%;width:0;height:0}
.growth-sparks i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#f3c766;box-shadow:0 0 8px #ffe2a0;rotate:var(--a);opacity:0;animation:growth-spark 1s 1.35s var(--ease-out) both}
.growth-sparks i:nth-child(3n){background:#fffaf0}
.growth-dust{position:absolute;left:0;right:0;top:9%;height:0}
.growth-dust i{position:absolute;top:0;width:22%;aspect-ratio:1.6;border-radius:50%;background:radial-gradient(circle,#fffaf0 0 35%,#fffaf000 70%);opacity:0;animation:dust-puff 1.1s 1.3s ease-out both}
.growth-dust i:nth-child(1){left:18%}.growth-dust i:nth-child(2){left:39%;animation-delay:1.4s}.growth-dust i:nth-child(3){left:60%;animation-delay:1.35s}
.menu-house{max-width:250px;margin:0 auto 6px}
.hero-casa{position:absolute;left:30%;top:1%;width:33%;z-index:1;animation:drop-in .9s .3s var(--pop) both}
/* Scenes that stop the clock: Alessandro's stretch and Pandora's party. */

#adventure-dialog.cutscene-dialog{max-width:min(520px,calc(100% - 24px));padding:0 0 28px;text-align:center;overflow:hidden auto}
#adventure-dialog.cutscene-dialog>:not(.cutscene-stage){margin-left:28px;margin-right:28px}
#adventure-dialog.cutscene-dialog h2{margin:8px auto 10px}
#adventure-dialog.cutscene-dialog .button{width:calc(100% - 56px);margin-top:20px}
.cutscene-stage{position:relative;height:min(330px,42svh);overflow:hidden;border-radius:26px 26px 0 0;margin-bottom:20px}
.cutscene-stage>.growth-house{position:absolute;left:50%;bottom:-3%;height:100%;width:auto;translate:-50% 0}
.growth-meter{display:flex;gap:4px;max-width:300px;margin:16px auto 0}
.growth-meter i{flex:1;height:8px;border-radius:9px;background:#e2e5d6}
.growth-meter .filled{background:#d5a055}.growth-meter .new{background:#bd654f;transform-origin:left center;animation:tick-fill .6s 1.6s var(--pop) both}
.stars-stage .star-orbit{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1;animation:spin 12s linear infinite}
.star-orbit i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;rotate:calc(var(--i)*45deg);transform:translateY(calc(-1*var(--r,118px)));animation:star-pop .5s calc(.3s + var(--i)*.12s) var(--pop) both}
.star-orbit .symbol{width:34px;height:34px;filter:drop-shadow(0 0 6px #ffe2a0);animation:twinkle 1.8s calc(var(--i)*.22s) ease-in-out infinite}
.pandora-party{position:absolute;left:50%;bottom:6%;height:62%;aspect-ratio:1;translate:-50% 0;z-index:2}
.pandora-happy{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 8px 6px #6b5b3a33)}
.party-ball{position:absolute;left:82%;bottom:3%;width:12%;height:12%;object-fit:contain;filter:drop-shadow(0 3px 2px #6b5b3a44)}
.pandora-hearts i{position:absolute;left:calc(22% + var(--i)*13%);bottom:55%;font-style:normal;font-size:22px;color:#d9826c;opacity:0;animation:heart-float 2.6s calc(.8s + var(--i)*.5s) ease-out infinite}
.woof-bubble{position:absolute;right:8%;top:12%;z-index:3;padding:9px 14px;border-radius:16px 16px 16px 4px;background:#fffaf0;border:1px solid #e0d8b6;font-size:15px;font-weight:900;color:#9a7c42;box-shadow:0 8px 18px -12px #6b5b3a;transform-origin:left bottom;animation:pop-in .5s .7s var(--pop) both,wobble 2.2s 1.4s ease-in-out infinite}
@keyframes drop-in{0%{opacity:0;translate:0 -70px}60%{opacity:1;translate:0 8px}100%{translate:0 0}}
@keyframes pose-out{0%{opacity:1;scale:var(--s)}70%{opacity:1;scale:calc(var(--s)*.94) calc(var(--s)*1.14)}100%{opacity:0;scale:calc(var(--s)*.9) calc(var(--s)*1.2)}}
@keyframes pose-in{0%{opacity:0;scale:calc(var(--s)*1.1) calc(var(--s)*.8)}55%{opacity:1;scale:calc(var(--s)*.95) calc(var(--s)*1.08)}100%{opacity:1;scale:var(--s)}}
@keyframes pose-breathe{50%{scale:calc(var(--s)*1.01) calc(var(--s)*1.025)}}
@keyframes growth-spark{0%{opacity:0;transform:translateY(0) scale(1)}10%{opacity:1}100%{opacity:0;transform:translateY(-120px) scale(.4)}}
@keyframes dust-puff{0%{opacity:0;scale:.3;translate:0 0}35%{opacity:.95}100%{opacity:0;scale:1.7;translate:0 -24px}}
@keyframes tick-fill{from{scale:0 1}}
@keyframes star-pop{from{opacity:0;scale:0}to{opacity:1;scale:1}}

@keyframes heart-float{0%{opacity:0;translate:0 0;scale:.6}20%{opacity:1}100%{opacity:0;translate:10px -90px;scale:1.3}}
/* ---------- Rewards ---------- */

#adventure-dialog.reward-dialog{text-align:center}
#adventure-dialog.reward-dialog h2{margin-left:auto;margin-right:auto}
#adventure-dialog.reward-dialog>p{margin-left:auto;margin-right:auto;max-width:420px}
.reward-hero{position:relative;width:180px;height:150px;margin:0 auto 6px;display:grid;place-items:center}
.reward-rays{position:absolute;inset:-10px;border-radius:50%;background:repeating-conic-gradient(#f5d58a66 0 10deg,transparent 10deg 24deg);-webkit-mask:radial-gradient(circle,#000 30%,transparent 68%);mask:radial-gradient(circle,#000 30%,transparent 68%);animation:spin 18s linear infinite,fade-in .6s both}
.reward-hero .reward-icon{position:relative;margin:0;width:96px;height:96px;background:radial-gradient(circle at 35% 30%,#fff8de,#f3dea4);box-shadow:0 0 0 10px #f6ebc980,0 16px 30px -14px #9b7036;animation:reward-bounce .8s var(--pop) both}
.reward-hero .reward-icon .symbol{width:50px;height:50px}
.reward-sparks,.finale-sparks,.firework{position:absolute;left:50%;top:50%;width:0;height:0}
.reward-sparks i,.finale-sparks i,.firework i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#e8b65a;rotate:var(--a);animation:spark-out .9s .1s var(--ease-out) both}
.reward-sparks i:nth-child(3n){background:#d9826c}.reward-sparks i:nth-child(3n+1){background:#8fae86}
.points-chip{position:absolute;right:-8px;top:8px;background:#45664d;color:#fff8e6;font-size:13px;font-weight:900;padding:6px 11px;border-radius:999px;box-shadow:0 8px 16px -8px #2c4632;animation:points-float .9s .35s var(--pop) both}
.reward-dialog .reward-actions .button{align-self:stretch}
/* ---------- Wish: smoke curls when the candles go out ---------- */

.blow-button:not(:disabled){animation:cta-glow 1.8s ease-in-out infinite}
.wish-choice{border-radius:16px;transition:background .2s,border-color .2s}.wish-choice:has(input:checked){background:#e6eed6;border-color:#9db484}
.cake-candle:after{content:'';position:absolute;left:50%;bottom:52px;width:10px;height:26px;margin-left:-5px;border-radius:50%;border-left:3px solid #b9b4a8aa;opacity:0;pointer-events:none}
.blown .cake-candle:after{animation:smoke 1.8s calc(.3s + var(--i)*.12s) ease-out forwards}
.wish-granted .wish-scene{animation:wish-glow 1.9s ease-out}
/* ---------- Finale overlays ---------- */

.finale{position:fixed;inset:0;z-index:80;pointer-events:none;display:grid;place-items:center;overflow:hidden}
.finale.win{background:radial-gradient(circle at 50% 46%,#fff6d8 0,#f9e2a8 34%,#f3d38ae6 60%,#e8c27acc 100%);animation:finale-out .7s 1.8s ease-in forwards}
.finale-ring{position:absolute;left:50%;top:46%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:6px solid #fffaf0;animation:ring-out 1.4s .15s var(--ease-out) both}
.finale-sparks{top:46%}
.finale-sparks i{width:12px;height:12px;left:-6px;top:-6px;animation:spark-far 1.3s .2s var(--ease-out) both}
.finale-sparks i:nth-child(odd){background:#fffaf0}.finale-sparks i:nth-child(4n){background:#d9826c}
.finale-title{position:relative;text-align:center;display:flex;flex-direction:column;gap:10px;animation:title-zoom 1.2s var(--pop) both}
.finale-title small{font-size:14px;font-weight:900;letter-spacing:3px;text-transform:uppercase;color:#8a6d38}
.finale-title b{font:italic 400 clamp(52px,9vw,112px)/1 Georgia,serif;color:#bd654f;letter-spacing:-2px;text-shadow:0 4px 0 #fff6dc}
.finale.lose{animation:finale-out .5s 1.4s ease-in forwards}
.finale-burst{display:grid;place-items:center;width:min(420px,80vw);aspect-ratio:1;background:#f7d36b;clip-path:polygon(50% 0,61% 30%,95% 18%,72% 45%,100% 62%,66% 66%,72% 100%,50% 76%,26% 98%,32% 66%,0 66%,28% 46%,6% 18%,39% 30%);animation:crac 1.3s var(--pop) both}
.finale-burst b{font:900 clamp(48px,9vw,92px) Nunito,sans-serif;color:#a8432f;rotate:-8deg;letter-spacing:-2px}
.quake{animation:quake .8s ease-in-out}
/* ---------- End screen ---------- */

.birthday-end .end-copy>*{animation:rise .75s var(--ease-out) both}
.birthday-end.is-won .end-copy>*{animation-delay:calc(1.9s + var(--i,0)*90ms)}.birthday-end.is-lost .end-copy>*{animation-delay:calc(.9s + var(--i,0)*90ms)}
.birthday-end .end-copy>:nth-child(2){--i:1}.birthday-end .end-copy>:nth-child(3){--i:2}.birthday-end .end-copy>:nth-child(4){--i:3}.birthday-end .end-copy>:nth-child(5){--i:4}.birthday-end .end-copy>:nth-child(6){--i:5}.birthday-end .end-copy>:nth-child(7){--i:6}.birthday-end .end-copy>:nth-child(8){--i:7}.birthday-end .end-copy>:nth-child(9){--i:8}
.birthday-end-art{border-radius:34px;overflow:hidden;box-shadow:0 0 0 8px #fffaf0,0 0 0 9px #dcdcc6,0 40px 60px -40px #2d493c99;background:none;isolation:isolate}
.birthday-end-art>*{z-index:1}.birthday-end-art>.story-sky{z-index:0}
.celebration-eight{left:50%;top:2%;translate:-50% 0;font-size:240px;opacity:.22;color:#e5b35a;animation:eight-in 1s 1.6s var(--pop) both}
.family-line img{animation:jump-in .8s var(--pop) both,celebrate-hop 1.6s ease-in-out infinite;transform-origin:bottom center}
.family-line img:nth-child(1){animation-delay:1.7s,2.6s}.family-line img:nth-child(2){animation-delay:1.85s,2.9s}.family-line img:nth-child(3){animation-delay:2s,2.75s}.family-line img:nth-child(4){animation-delay:2.15s,2.5s;animation-duration:.8s,.9s}
.celebration .birthday-cake{animation:cake-rise .9s 2.2s var(--pop) both}
.end-balloons{position:absolute;inset:0;pointer-events:none}
.end-balloons .balloon{left:calc(6% + var(--i)*20%);animation:balloon-rise calc(9s + var(--i)*1.7s) calc(1.6s + var(--i)*.5s) linear infinite}
.fireworks{position:absolute;inset:0;pointer-events:none}
.firework.f0{left:20%;top:18%}.firework.f1{left:78%;top:14%}.firework.f2{left:52%;top:30%}
.firework i{width:6px;height:6px;left:-3px;top:-3px;opacity:0;animation:firework 2.4s var(--ease-out) infinite}
.firework.f0 i{background:#d9826c;animation-delay:2.2s}.firework.f1 i{background:#e2a24f;animation-delay:2.8s}.firework.f2 i{background:#8fae86;animation-delay:3.4s}
.end-garden-flower{animation:pop-in .6s 2.4s var(--pop) both}
.score-progress i{animation:grow-x 1.5s 1.7s var(--ease-out) both}
.collapse-scene .score-progress i{animation-delay:1.1s}
.score-heading>strong{font-size:44px}
/* The house gives way only after the CRAC. */

.collapse-scene .storybook-house{bottom:70px;z-index:2}
.collapse-scene .broken-house .house-roof{animation-delay:.8s}
.collapse-scene .broken-house .house-walls:before,.collapse-scene .broken-house .house-walls:after{animation-delay:.8s}
.collapse-scene .broken-house .house-walls img{animation:last-stretch 1s .7s ease-out both}
.debris{position:absolute;left:50%;bottom:220px;width:0;height:0;z-index:3}
.debris i{position:absolute;width:14px;height:8px;background:#c7886c;border-radius:2px;box-shadow:0 2px 0 #9c7052;animation:debris 1.6s calc(.85s + var(--i)*.05s) cubic-bezier(.2,.6,.4,1) both;--dx:calc((var(--i) - 3)*48px)}
.debris i:nth-child(even){background:#dbbd89;box-shadow:0 2px 0 #b29563}
.dust{position:absolute;left:50%;bottom:58px;width:0;height:0;z-index:3}
.dust i{position:absolute;width:90px;height:60px;margin:-30px 0 0 -45px;border-radius:50%;background:radial-gradient(circle,#efe6d4 0 40%,#efe6d400 70%);animation:dust 1.8s calc(.9s + var(--i)*.08s) ease-out both;--dx:calc((var(--i) - 2)*70px)}
.loss-anya,.loss-pandora{position:absolute;object-fit:contain;object-position:bottom;z-index:3;pointer-events:none}
.loss-anya{left:4%;bottom:6%;height:34%;animation:slide-from-left .8s 1.3s var(--ease-out) both}
.loss-pandora{left:19%;bottom:5%;height:13%;transform-origin:bottom center;animation:hop-in .7s 1.5s var(--pop) both,puppy-wag 1.4s 2.3s ease-in-out infinite}
/* Confetti with shapes and drift */

.confetti span{left:var(--x);top:-30px;width:8px;height:14px;border-radius:2px;opacity:0;animation:confetti-drop var(--t) var(--d) cubic-bezier(.25,.6,.45,1) forwards}
.confetti span.round{width:10px;height:10px;border-radius:50%}
.confetti span.ribbon{width:5px;height:20px;border-radius:5px}

@keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes fade-in{from{opacity:0}}
@keyframes dialog-in{from{opacity:0;translate:0 24px;scale:.94}}
@keyframes book-open{from{opacity:0;scale:.92;rotate:-1.5deg}}
@keyframes bloom{from{opacity:0;scale:.9}}
@keyframes underline-draw{from{scale:0 1}}

@keyframes slide-from-left{from{opacity:0;translate:-70px 0}to{opacity:1;translate:0 0}}
@keyframes slide-from-right{from{opacity:0;translate:70px 0}to{opacity:1;translate:0 0}}
@keyframes walk-in{from{opacity:0;translate:-160% 0}to{opacity:1;translate:0 0}}
@keyframes hop-in{0%{opacity:0;translate:0 40px;scale:.6}60%{opacity:1;translate:0 -16px;scale:1.05}100%{opacity:1;translate:0 0;scale:1}}
@keyframes jump-in{0%{opacity:0;translate:0 80px;scale:.8}60%{opacity:1;translate:0 -22px;scale:1.03}100%{opacity:1;translate:0 0;scale:1}}
@keyframes eight-in{from{opacity:0;scale:.3}to{opacity:.22;scale:1}}
@keyframes pop-in{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes spin-in{from{opacity:0;rotate:-220deg;scale:.3}to{opacity:1;rotate:0deg;scale:1}}
@keyframes idle-bob{50%{translate:0 -7px}}
@keyframes step-bob{50%{translate:0 -5px}}
@keyframes puppy-wag{25%{rotate:-3deg}75%{rotate:3deg}}
@keyframes wobble{50%{rotate:-6deg}}
@keyframes twinkle{0%,100%{opacity:.25;scale:.7}50%{opacity:1;scale:1.15}}
@keyframes cta-glow{0%,100%{box-shadow:0 5px 0 #2c4632,0 14px 24px -12px #2c4632cc}50%{box-shadow:0 5px 0 #2c4632,0 0 0 8px #e9c56f40,0 14px 30px -10px #c99a4ccc}}
@keyframes balloon-rise{0%{translate:0 0;rotate:-4deg;opacity:0}8%{opacity:.95}50%{rotate:5deg}92%{opacity:.95}100%{translate:18px -720px;rotate:-3deg;opacity:0}}
@keyframes spin{to{rotate:360deg}}
@keyframes cloud-drift{from{translate:0 0}to{translate:calc(100vw + 260px) 0}}
@keyframes house-tremble{0%,100%{rotate:0deg}20%{rotate:-1.2deg}40%{rotate:1.2deg}60%{rotate:-.8deg}80%{rotate:.8deg}}
@keyframes alarm{0%,100%{opacity:0;translate:0 6px;scale:.6}40%,60%{opacity:1;translate:0 0;scale:1.15}}
@keyframes flame-on{from{opacity:0;scale:0}to{opacity:1;scale:1}}
@keyframes ingredient-drop{0%{opacity:0;translate:0 -80px}70%{opacity:1;translate:0 6px}100%{translate:0 0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes prize-arrive{from{opacity:0;translate:50px 0}to{opacity:1;translate:0 0}}
@keyframes tick{50%{rotate:12deg}}
@keyframes curtain-left{to{translate:-102% 0}}
@keyframes curtain-right{to{translate:102% 0}}
@keyframes curtain-title{0%{opacity:0;scale:.6}25%{opacity:1;scale:1.04}55%{opacity:1;scale:1}100%{opacity:0;scale:1.25}}

@keyframes earned-pop{0%{scale:1}35%{scale:1.32;rotate:-6deg}65%{scale:.94;rotate:3deg}100%{scale:1;rotate:0deg}}
@keyframes correct-pop{40%{scale:1.08}}
@keyframes reward-bounce{0%{opacity:0;scale:.2;rotate:-30deg}60%{opacity:1;scale:1.15;rotate:6deg}100%{scale:1;rotate:0deg}}
@keyframes spark-out{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-92px) scale(.4)}}
@keyframes spark-far{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-46vmin) scale(.3)}}
@keyframes points-float{from{opacity:0;translate:0 20px;scale:.5}to{opacity:1;translate:0 0;scale:1}}
@keyframes smoke{0%{opacity:0;translate:0 0;scale:.6}20%{opacity:.9}100%{opacity:0;translate:8px -46px;scale:1.6;rotate:20deg}}
@keyframes wish-glow{30%{filter:drop-shadow(0 0 30px #ffe2a0) brightness(1.08)}}
@keyframes finale-out{to{opacity:0;visibility:hidden}}
@keyframes ring-out{0%{opacity:1;scale:.2}100%{opacity:0;scale:9}}
@keyframes title-zoom{0%{opacity:0;scale:.4;translate:0 30px}100%{opacity:1;scale:1;translate:0 0}}
@keyframes crac{0%{opacity:0;scale:.2;rotate:-25deg}50%{opacity:1;scale:1.12;rotate:6deg}70%{scale:.96;rotate:-2deg}100%{opacity:1;scale:1;rotate:0deg}}
@keyframes quake{0%,100%{translate:0 0}10%{translate:-10px 4px}20%{translate:9px -5px}30%{translate:-8px 3px}40%{translate:7px -2px}55%{translate:-5px 2px}70%{translate:3px -1px}85%{translate:-2px 0}}
@keyframes celebrate-hop{0%,100%{translate:0 0}40%{translate:0 -10px}}
@keyframes cake-rise{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes firework{0%{opacity:0;transform:translateY(0) scale(.4)}8%{opacity:1}60%{opacity:1;transform:translateY(-70px) scale(1)}100%{opacity:0;transform:translateY(-82px) scale(.6)}}
@keyframes grow-x{from{width:0}}
@keyframes debris{0%{opacity:0;translate:0 0;rotate:0deg}10%{opacity:1}100%{opacity:0;translate:var(--dx) 160px;rotate:420deg}}
@keyframes dust{0%{opacity:0;translate:0 0;scale:.4}30%{opacity:.95}100%{opacity:0;translate:var(--dx) -30px;scale:1.8}}
@keyframes confetti-drop{0%{opacity:0;translate:0 0;rotate:0deg}8%{opacity:1}85%{opacity:1}100%{opacity:0;translate:var(--drift) calc(100vh + 40px);rotate:var(--spin)}}

@media(max-width:1100px){
 .story-copy{padding:40px 36px 34px}}
@media(max-width:760px){
 #adventure-dialog.story-dialog{max-height:calc(100svh - 20px);max-width:calc(100% - 20px)}
 .story-book{grid-template-columns:1fr;min-height:0}
 .story-stage{min-height:0;height:min(300px,40svh);border-radius:26px 26px 0 0}
 .story-copy{padding:24px 22px 26px}
 #adventure-dialog .story-copy h2{font-size:28px;margin-bottom:12px}
 .story-copy>p{font-size:14px;line-height:1.65}
 .story-copy .button{margin-top:20px}
 .intro-dots{margin-top:18px}
 .intro-rules{padding:11px 13px;margin-top:14px}.intro-rules p{font-size:12px}
 .story-house{width:min(260px,60%);bottom:3%}
 .intro-0 .scene-speech{max-width:130px;font-size:11px;padding:10px 11px;right:4%;top:6%}
 .story-cake{scale:.6}
 .star-orbit i{--r:96px}.woof-bubble{font-size:13px;right:4%}.cutscene-stage{height:min(280px,38svh)}
 .story-ingredients{right:4%;top:24%;gap:7px}.story-ingredients span{width:44px;height:44px}.story-ingredients .symbol{width:26px;height:26px}
 .story-prizes{gap:6px;right:3%}.story-prizes>span{font-size:12px;padding:6px 10px 6px 8px}.story-prizes .symbol{width:22px;height:22px}
 .story-trail{height:56%}
 .curtain-title small{font-size:13px}
 .reward-hero{width:150px;height:126px}.reward-hero .reward-icon{width:80px;height:80px}.reward-hero .reward-icon .symbol{width:42px;height:42px}
 .birthday-end-art{border-radius:26px}
 .celebration-eight{font-size:170px}
 .score-heading>strong{font-size:36px}
 .debris{bottom:180px}}
@media(max-width:360px){
 .story-prizes>span{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-delay:0s!important}.story-trail polyline{stroke-dashoffset:0}.adventure-curtain,.finale{display:none}}
.station-level>strong .symbol,.zone-quests button>b .symbol{width:20px;height:20px;color:#9a9a84}
.footer-dedication{font-size:12px}.panel-clock{padding-right:50px}