:root{--ink:#092f52;--teal:#078e92;--blue:#126fc2;--gold:#ffbd2e;--danger:#c92f50;--glass:rgba(255,255,255,.94);--top:64px}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}.runner{position:fixed;inset:0;padding-top:var(--top);font-family:Poppins,system-ui,sans-serif;color:var(--ink);background:#79cdf0;isolation:isolate}.runner[hidden],[hidden]{display:none!important}
.arc-top{z-index:310}.sky,.game-stage{position:absolute;inset:var(--top) 0 0}.sky{overflow:hidden;background:linear-gradient(#62c4ef 0 48%,#d9f0d2 80%);transition:background 1.3s ease}.runner.phase-orchard .sky{background:linear-gradient(#73c8ef,#f5d7a1 70%,#b9d994)}.runner.phase-creek .sky{background:linear-gradient(#60b8e8,#c8ebea 68%,#8dcdb0)}.runner.phase-sunset .sky{background:linear-gradient(#5d70bd,#f3a478 60%,#866aa0)}
.sun{position:absolute;width:90px;height:90px;border-radius:50%;right:10%;top:8%;background:#ffe890;box-shadow:0 0 0 24px #ffe89042,0 0 55px #ffe89099}.cloud{position:absolute;width:105px;height:30px;border-radius:30px;background:#fff9;filter:drop-shadow(0 7px 8px #4885a522);animation:drift 22s linear infinite}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit;bottom:0}.cloud:before{width:52px;height:52px;left:16px}.cloud:after{width:65px;height:65px;right:9px}.cloud-a{top:14%;left:7%}.cloud-b{top:27%;left:55%;animation-duration:29s;animation-delay:-12s;transform:scale(.75)}.cloud-c{top:8%;left:82%;animation-duration:35s;animation-delay:-19s;transform:scale(.55)}@keyframes drift{to{translate:-130vw 0}}
.far-hill{position:absolute;bottom:87px;width:40vw;min-width:300px;height:26vh;border-radius:55% 55% 0 0;background:linear-gradient(145deg,#74b96e,#438d61);opacity:.72;box-shadow:inset -50px 20px #28745c2e}.hill-a{left:-8%}.hill-b{left:30%;height:20vh;opacity:.55}.hill-c{right:-12%;height:30vh}.game-stage{z-index:3;overflow:hidden;touch-action:none;user-select:none;cursor:pointer}.object-layer{position:absolute;inset:0;z-index:8}.ground{position:absolute;left:0;right:0;bottom:0;height:96px;z-index:6;background:linear-gradient(#61bd49 0 16px,#94673e 17px 100%);border-top:6px solid #3f963f;box-shadow:0 -8px 20px #23652b33}.ground:before{content:"";position:absolute;left:0;right:0;top:-14px;height:20px;background:repeating-linear-gradient(105deg,transparent 0 12px,#56ad46 13px 17px,transparent 18px 25px)}.ground-markings{position:absolute;inset:27px 0 0;background:radial-gradient(circle,#4c2c2140 0 2px,transparent 3px);background-size:34px 29px}
.mira{position:absolute;left:15%;bottom:84px;width:96px;height:96px;z-index:14;transform-origin:50% 100%;filter:drop-shadow(0 9px 6px #0004)}.mira img{width:100%;height:100%;object-fit:contain}.mira.running{animation:runBob .27s ease-in-out infinite alternate}.mira.jumping{animation:none;rotate:-8deg}.mira.double{filter:drop-shadow(0 0 18px #ffe870)}.mira.hurt{animation:hurt .5s ease}.mira.dashing{filter:drop-shadow(0 0 15px #fff) drop-shadow(0 0 28px #ffe236);animation:dashPulse .2s ease-in-out infinite alternate}@keyframes runBob{to{translate:0 -5px;rotate:2deg}}@keyframes hurt{25%{translate:-15px 0;rotate:-15deg}50%{translate:12px 0;rotate:12deg}75%{translate:-7px 0}}@keyframes dashPulse{to{scale:1.12}}
.game-object{position:absolute;left:0;bottom:90px;width:64px;height:64px;display:grid;place-items:center;font-size:48px;line-height:1;filter:drop-shadow(0 5px 4px #0003);will-change:transform}.game-object.obstacle{font-size:56px}.game-object.tree{font-size:72px;width:76px;height:88px}.game-object.collectible{animation:itemFloat .75s ease-in-out infinite alternate}.game-object.star{filter:drop-shadow(0 0 10px #ffd323)}@keyframes itemFloat{to{translate:0 -6px}}
.hud{position:fixed;top:74px;left:10px;right:10px;z-index:40;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.hud-group{display:flex;gap:8px;align-items:center}.hud-center{position:absolute;left:50%;translate:-50% 0}.hud-chip,.round-btn,.star-meter{min-height:48px;border:2px solid #fff;background:var(--glass);border-radius:999px;box-shadow:0 7px 18px #1755762c;display:flex;align-items:center;justify-content:center;font-size:1.02rem;font-weight:900;color:var(--ink);backdrop-filter:blur(8px)}.hud-chip{padding:7px 15px}.hud-chip strong{font-size:1.18rem;margin:0 3px}.unit{font-size:.75rem}.round-btn{width:48px;padding:0;pointer-events:auto;cursor:pointer;border-color:#fff}.hearts{color:#db3154;letter-spacing:2px}.hearts.low{animation:heartWarn .7s ease infinite alternate}@keyframes heartWarn{to{scale:1.06;background:#fff0f1}}.combo{opacity:.65;transition:.2s}.combo.hot{opacity:1;background:#fff4d5;color:#a34f00;scale:1.05}.star-meter{width:112px;height:48px;position:relative;overflow:hidden;background:#15395b;color:#fff}.star-meter span{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#ffb929,#fff477);transition:width .22s}.star-meter b{position:relative;font-size:1.45rem;text-shadow:0 1px 4px #0008}.star-meter.ready{animation:readyPulse .55s ease infinite alternate}@keyframes readyPulse{to{scale:1.08;box-shadow:0 0 25px #ffe34f}}
.control-bar{position:fixed;z-index:42;bottom:15px;left:0;right:0;display:flex;justify-content:center;pointer-events:none}.jump-btn{pointer-events:auto;width:min(430px,76vw);min-height:72px;border:3px solid #ffffffd9;border-radius:24px;background:linear-gradient(135deg,#0caf9e,#08798e);box-shadow:0 9px 0 #07596a,0 15px 25px #0003;color:#fff;font:900 1.45rem Poppins,sans-serif;cursor:pointer;text-shadow:0 2px 2px #064b5b}.jump-btn small{font-size:.68rem;display:block;opacity:.82;font-weight:700}.jump-btn:active{translate:0 5px;box-shadow:0 4px 0 #07596a,0 8px 15px #0003}
.screen{position:fixed;inset:var(--top) 0 0;z-index:100;display:grid;place-items:center;padding:18px;background:#073f6a8f;backdrop-filter:blur(5px);overflow:auto}.start-screen{background:linear-gradient(#0b56838c,#164f5399)}.start-card,.dialog-card,.result-card{width:min(760px,96vw);background:#fffffff3;border:2px solid #ffffff;border-radius:30px;text-align:center;box-shadow:0 24px 70px #001c3470}.start-card{padding:18px 32px 20px}.mascot-wrap{width:115px;height:104px;margin:-5px auto -10px;animation:mascotBob 1.6s ease-in-out infinite}.mascot-wrap img{width:100%;height:100%;object-fit:contain}@keyframes mascotBob{50%{translate:0 -7px}}.eyebrow{margin:0;color:#08727b;font-weight:900;letter-spacing:.12em;font-size:.74rem}.start-card h1,.dialog-card h2,.result-card h2{font:800 clamp(2rem,5vw,3.2rem) 'Playfair Display',serif;color:var(--ink);margin:.1rem 0}.lede{margin:.15rem auto .7rem;max-width:600px;font-weight:600;color:#325b71}.how-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:.65rem 0}.how-row span{background:#e8f7f4;border-radius:999px;padding:7px 12px;font-size:.85rem;font-weight:700}.how-row b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--teal);color:white;margin-right:4px}.mode-picker{border:0;padding:0;margin:.7rem auto;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;max-width:650px}.mode-picker legend{font-weight:900;margin:0 auto 7px}.mode-option{cursor:pointer}.mode-option input{position:absolute;opacity:0}.mode-option span{display:flex;flex-direction:column;align-items:center;padding:11px 8px;border:2px solid #b8d3db;border-radius:16px;background:white;transition:.15s}.mode-option small{color:#627988}.mode-option.selected span,.mode-option:has(input:checked) span{border-color:var(--teal);background:#e8fbf7;box-shadow:0 0 0 3px #0ba69a2b}.mode-option input:focus-visible+span{outline:3px solid #f28d17;outline-offset:2px}.start-actions,.result-actions{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}.primary-btn,.secondary-btn,.text-btn{border-radius:15px;padding:13px 22px;min-height:50px;font:800 1rem Poppins,sans-serif;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.primary-btn{color:#fff;border:0;background:linear-gradient(135deg,#0cad9e,#126fc2);box-shadow:0 7px 16px #116d8d4a}.secondary-btn{color:var(--ink);border:2px solid #bfd2da;background:#fff}.text-btn{color:#174e76;border:0;background:transparent;text-decoration:underline}.key-hint{font-size:.78rem;color:#587181;margin:.65rem 0 0}kbd{background:#fff;border:1px solid #aebfc7;border-bottom-width:3px;border-radius:5px;padding:1px 5px}
.countdown{position:fixed;inset:var(--top) 0 0;z-index:90;display:grid;place-items:center;background:#073f6a38;pointer-events:none}.countdown span{display:grid;place-items:center;width:150px;height:150px;border-radius:50%;background:#fff;color:var(--blue);font:900 5rem Poppins,sans-serif;box-shadow:0 20px 55px #001d496e;animation:countPop .85s ease both}@keyframes countPop{from{scale:.3;opacity:0}40%{scale:1.12;opacity:1}to{scale:1}}
.dialog-card{width:min(430px,94vw);padding:32px}.dialog-card>*{margin:8px auto;display:flex}.dialog-card h2{display:block}.dialog-icon{font-size:3rem;display:block}.result-card{width:min(640px,96vw);padding:20px 25px}.result-badge{font-size:3rem;height:55px}.result-reason{margin:.1rem 0 .8rem;color:#4b6878}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.result-grid div{background:#eef8f6;border-radius:14px;padding:9px}.result-grid span{display:block;color:#5b7180;font-size:.76rem}.result-grid strong{font-size:1.16rem}.mission-panel{text-align:left;background:#fff8dc;border:1px solid #f0d67a;border-radius:16px;padding:10px 16px;margin:10px 0}.mission-panel h3{font-size:.86rem;margin:0 0 4px}.mission-panel p{display:inline-block;font-size:.77rem;margin:2px 12px 2px 0}.mission-panel .done{color:#0a775f;font-weight:800}
.phase-banner{position:fixed;z-index:70;top:135px;left:50%;translate:-50% 0;background:#073f6de8;border:2px solid #fff;color:#fff;padding:10px 22px;border-radius:999px;font-weight:900;box-shadow:0 10px 28px #0004;animation:banner 2.2s ease forwards}@keyframes banner{0%{opacity:0;translate:-50% -20px}15%,75%{opacity:1;translate:-50% 0}100%{opacity:0;translate:-50% -10px}}.toast{position:fixed;z-index:65;left:50%;top:45%;translate:-50% -50%;color:#fff;font-size:2rem;font-weight:900;text-shadow:0 3px 8px #003b56;opacity:0;pointer-events:none}.toast.show{animation:toast .7s ease}@keyframes toast{0%{opacity:0;scale:.6}30%{opacity:1;scale:1.12}100%{opacity:0;translate:-50% -75px}}.screen-shake{animation:shake .28s linear}@keyframes shake{25%{translate:-7px 0}50%{translate:7px 0}75%{translate:-4px 0}}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:650px){:root{--top:60px}.arc-top .title,#arcPlayer{display:none!important}.arc-top{height:60px}.runner{padding-top:60px}.hud{top:68px;left:7px;right:7px}.hud-chip,.round-btn,.star-meter{min-height:43px;height:43px}.round-btn{width:43px}.hud-chip{padding:5px 10px}.hud-left .hearts{position:fixed;top:117px;left:8px}.star-meter{width:73px}.control-bar{bottom:13px}.jump-btn{width:72vw;min-height:68px}.mira{left:11%;width:82px;height:82px}.start-card{padding:12px 14px 16px}.mascot-wrap{width:95px;height:82px}.lede{font-size:.9rem}.how-row{gap:5px}.how-row span{font-size:.72rem;padding:6px 8px}.mode-picker{gap:5px}.mode-option span{padding:8px 3px;font-size:.78rem}.mode-option small{font-size:.64rem}.key-hint{display:none}.result-grid{grid-template-columns:repeat(2,1fr)}.result-card{padding:14px}.mission-panel p{display:block}.phase-banner{top:123px;white-space:nowrap}.object-layer{overflow:hidden}}
@media(max-height:700px){.mascot-wrap{display:none}.how-row{margin:.35rem}.start-card{padding-top:12px}.result-badge{display:none}.result-grid div{padding:5px}.mission-panel{padding:7px 12px}.result-card h2{font-size:1.8rem}}
@media(prefers-reduced-motion:reduce){.cloud,.mascot-wrap,.mira.running,.game-object.collectible,.star-meter.ready{animation:none!important}.sky{transition:none}.toast.show,.phase-banner{animation-duration:.01ms}.screen-shake{animation:none}.mira{filter:none}}
@media(prefers-contrast:more){.sky{background:#8ed9ff}.game-object{filter:drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000)}.hud-chip,.round-btn{border-color:#001e38}.primary-btn,.jump-btn{background:#006b70}}
.start-card,.dialog-card,.result-card{max-width:100%}
@media(max-width:650px){.start-card,.dialog-card,.result-card{width:100%}}

/* Game-feel pass: the character must visibly run, react, and leave the ground
   on the same frame as the player's input. */
.ground-markings{animation:groundRush .48s linear infinite}
@keyframes groundRush{to{background-position:-68px 0}}
.mira{width:104px;height:104px;will-change:transform,translate,rotate}
.mira:after{content:"";position:absolute;z-index:-1;left:13px;bottom:4px;width:76px;height:14px;border-radius:50%;background:#6b4b3340;filter:blur(2px);transform-origin:center}
.mira img{display:block}
.mira.running{animation:runStride .18s cubic-bezier(.3,.1,.7,.9) infinite alternate}
.mira.running:after{animation:dustPulse .36s ease-out infinite}
.mira.entering{animation:runIn .65s ease-out both}
.mira.jumping{animation:none;rotate:-8deg}
.mira.jumping:after{scale:.72;opacity:.35}
.mira.double{rotate:9deg}
.mira.hurt{animation:hurtStrong .52s ease!important;filter:drop-shadow(0 0 12px #ff123d) grayscale(.25)}
.mira.dashing{animation:dashPulseStrong .14s ease-in-out infinite alternate}
@keyframes runStride{from{translate:-3px 1px;rotate:-3deg;scale:1.03 .96}to{translate:6px -7px;rotate:3deg;scale:.98 1.04}}
@keyframes runIn{from{translate:-120px 0;opacity:.2}to{translate:0 0;opacity:1}}
@keyframes dustPulse{from{scale:.65;opacity:.65}to{scale:1.18;opacity:.08}}
@keyframes hurtStrong{20%{translate:-30px -5px;rotate:-18deg;scale:.94}45%{translate:16px 0;rotate:12deg}70%{translate:-10px 0;rotate:-6deg}}
@keyframes dashPulseStrong{to{translate:9px -4px;scale:1.13}}
.jump-btn:active,.jump-btn.fired{translate:0 5px;box-shadow:0 4px 0 #07596a,0 8px 15px #0003;background:linear-gradient(135deg,#0ed0b8,#168fe5)}
.toast{z-index:165;top:42%;font-size:2.15rem;text-shadow:0 3px 8px #003b56,0 0 3px #003b56;white-space:nowrap}
.runner.hit-flash:after{content:"";position:fixed;inset:var(--top) 0 0;z-index:150;pointer-events:none;background:#e9294438;border:10px solid #ff3155;animation:damageFlash .55s ease forwards}
@keyframes damageFlash{0%,35%{opacity:1}100%{opacity:0}}
@media(max-width:650px){.mira{width:90px;height:90px}.toast{font-size:1.55rem}}
@media(prefers-reduced-motion:reduce){.ground-markings,.mira.running,.mira.running:after{animation:none!important}.runner.hit-flash:after{animation:none;opacity:.35}}