.hero .quiet-note{max-width:340px}
.hero-primary-actions{display:flex;align-items:center;gap:23px;flex-wrap:wrap}
.browse-link{font-size:13px;color:#e4e8d1;text-decoration:none;border-bottom:1px solid #d5debc60;padding:10px 0}
.browse-link:hover{color:#fff5c9}
.hero #start-adventure{font-family:var(--sans);border:0;cursor:pointer}
.playfield{height:280px;bottom:95px}
.trail-platform{height:11px;border-top-color:#d3e6ac9e;background:linear-gradient(#a4bf728c,#2a573bbb);box-shadow:0 8px 22px #041d2240,0 0 25px #a2cc721a}
.trail-platform:nth-child(odd){animation:platform-breathe 5s ease-in-out infinite}
.trail-ground{bottom:33px}
.trail-heading{font-size:11px;letter-spacing:.14em;color:#c7d7b28c}
.trail-portal{position:absolute;right:-19px;bottom:20px;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:9;color:#f9df95;min-width:62px;min-height:90px;padding:6px}
.trail-portal>span{width:47px;height:60px;display:grid;place-items:center;border:1px solid #e5d6959c;border-radius:50% 50% 10px 10px;background:linear-gradient(#deec9a18,#f2d98642);box-shadow:0 0 25px #e1d78938,inset 0 0 20px #e3d69722;font-size:25px;animation:portal-call 2.6s ease-in-out infinite}
.trail-portal small{font-size:9px;letter-spacing:.08em}
.trail-portal:hover>span{box-shadow:0 0 55px #ffe89777;transform:scale(1.08)}
.treasure{right:10px;bottom:135px;z-index:8;background:#153e30c4}
.treasure.unlocked{animation:chest-hop 2.6s ease-in-out infinite}
.treasure.opened{animation:none}
.spring-pad{position:absolute;transform:translate(-50%,-50%);width:43px;height:16px;border-radius:50%;background:#abd79331;border:1px solid #d1e99d80;box-shadow:0 0 22px #b5e8992e;text-align:center;line-height:13px;font-size:23px;color:#dbedac;z-index:2}
.spring-pad.bounced{animation:spring-bounce .45s ease}
.trail-light{animation:light-bob 2.4s ease-in-out infinite;filter:drop-shadow(0 0 7px #eee3a15e)}
.trail-light.collected{animation:none}
.light-score{font-size:16px;font-weight:600;white-space:nowrap;color:#fff2b2;text-shadow:0 1px 12px #2c5921;animation:score-rise 1s ease-out forwards}
.companion{width:125px;height:132px;transform:translate(-50%,-100%)}
.companion>img{display:none}
.nilo-puppet{position:absolute;width:140px;height:140px;left:calc(50% - 70px);bottom:-3px;transform-origin:50% 88%;transform:scaleX(var(--facing,1));animation:puppet-breathe 3.7s ease-in-out infinite}
.nilo-puppet>span:not(.lantern-light){position:absolute;inset:0;background:url('assets/nilo.webp') center/100% 100% no-repeat;pointer-events:none}
.nilo-body{clip-path:polygon(0 0,100% 0,100% 40%,73% 40%,73% 72%,100% 72%,100% 83%,0 83%);transform-origin:50% 81%;z-index:3}
.nilo-leg{z-index:4;transform-origin:51% 79%}
.back-leg{clip-path:inset(77% 23% 0 55%);transform-origin:61% 79%;z-index:1}
.front-leg{clip-path:inset(76% 43% 0 32%);transform-origin:48% 79%;z-index:5}
.nilo-cloak{clip-path:polygon(12% 43%,39% 44%,45% 72%,38% 92%,10% 96%);transform-origin:35% 43%;z-index:2;animation:cloak-idle 4.1s ease-in-out infinite}
.nilo-lantern{clip-path:inset(38% 10% 29% 70%);transform-origin:76% 39%;z-index:4;animation:lantern-idle 3.3s ease-in-out infinite}
.lantern-light{position:absolute;left:73%;top:52%;width:21%;height:20%;background:radial-gradient(#ffec9b6e,transparent 70%);border-radius:50%;mix-blend-mode:screen;filter:blur(4px);animation:lantern-glow 2.3s ease-in-out infinite;z-index:6;pointer-events:none}
.companion-shadow{width:57px;left:calc(50% - 28px);bottom:1px;transition:transform .2s,opacity .2s}
.companion.airborne .companion-shadow{transform:scale(.65);opacity:.45}
.companion.walking .nilo-puppet{animation:body-stride .38s linear infinite}
.companion.walking .front-leg{animation:front-stride .38s linear infinite}
.companion.walking .back-leg{animation:back-stride .38s linear infinite}
.companion.walking .nilo-cloak{animation:cloak-stride .38s ease-in-out infinite}
.companion.walking .nilo-lantern{animation:lantern-stride .38s ease-in-out infinite}
.companion.airborne .nilo-puppet{animation:none;transform:scaleX(var(--facing,1)) rotate(-8deg) scale(.94,1.08)}
.companion.airborne .front-leg{transform:rotate(-19deg) translateY(-4px)}
.companion.airborne .back-leg{transform:rotate(21deg) translateY(-6px)}
.companion.airborne .nilo-cloak{transform:rotate(13deg)}
.companion.falling .nilo-puppet{transform:scaleX(var(--facing,1)) rotate(5deg) scale(1.02,.98)}
.companion.jumping .nilo-puppet{animation:puppet-jump .38s ease}
.companion.landing .nilo-puppet{animation:puppet-land .24s ease}
.companion.waving .nilo-puppet{animation:puppet-wave 1.3s ease-in-out}
.companion.celebrating .nilo-puppet{animation:puppet-celebrate .65s ease-in-out 2}
.companion.celebrating .nilo-lantern{animation:lantern-cheer .65s ease-in-out 2}
.companion.casting .nilo-puppet{animation:puppet-cast .7s ease}
.companion.casting .lantern-light,.companion.charged .lantern-light{width:80%;height:80%;left:45%;top:12%;background:radial-gradient(#ffeea14a,transparent 65%)}
.companion-name{bottom:-20px;font-size:10px}
.companion-speech{top:0;max-width:260px;border:1px solid #fff5c474;background:#f3f0d5;z-index:18}
.fx-particle{position:absolute;pointer-events:none;z-index:19;width:5px;height:5px;background:#ffe9a2;box-shadow:0 0 12px #fdebab9e;border-radius:50%;animation:particle-burst .9s var(--delay) ease-out forwards}
.fx-particle.dust{width:8px;height:4px;background:#bccb9863;box-shadow:none;filter:blur(1px)}
.magic-pulse{position:absolute;width:30px;height:30px;border-radius:50%;border:2px solid #e5f5b5;background:radial-gradient(#d8e99e25,transparent 60%);pointer-events:none;z-index:10;transform:translate(-50%,-50%);box-shadow:0 0 30px #e3efa931;animation:cast-pulse .85s ease-out forwards}
.all-lights-found .scene-picture{filter:brightness(1.07) saturate(1.11)}
.grove.all-lights-found .grove-picture{filter:brightness(.9) saturate(1.1)}

.scene-picture{animation:world-breath 23s ease-in-out infinite alternate;translate:var(--player-pan,0px) 0}
.scene-picture::after{content:'';position:absolute;inset:0;background:inherit;background-size:cover;mask-image:linear-gradient(#000,transparent 43%);transform-origin:center top;animation:canopy-sway 14s ease-in-out infinite alternate;opacity:.38}
.scene-section::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#fff3b510 44%,transparent 51%,#e9f5c606 57%,transparent 65%);mix-blend-mode:screen;animation:forest-rays 18s ease-in-out infinite alternate}
.scene-section::before{content:'';position:absolute;inset:30% -15% -10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 25% 70%,#c4e5c115,transparent 43%),radial-gradient(ellipse at 80% 40%,#c4e5c10a,transparent 40%);filter:blur(26px);animation:forest-mist 17s ease-in-out infinite alternate}
.pond-picture::after{mask-image:linear-gradient(transparent 50%,#000 75%);animation:water-flow 7s ease-in-out infinite alternate;opacity:.5;transform-origin:center 70%}
.pond::after{background:repeating-linear-gradient(0deg,transparent 0 25px,#d8f9de08 27px,transparent 31px);mask-image:linear-gradient(transparent 40%,#000 70%,transparent);animation:water-shimmer 9s linear infinite;opacity:.8}
.grove-light{animation:grove-glow 5s ease-in-out infinite}
.grove.awake .grove-light{opacity:1}
.magic-awake::after{background:radial-gradient(ellipse at 55% 70%,#eeefbb28,transparent 66%);animation:world-magic 1.6s ease-out}
.mote{animation-duration:calc(var(--duration)*.8);will-change:transform,opacity}

.journey-hud{position:fixed;top:23px;left:50%;transform:translateX(-50%);width:min(690px,calc(100vw - 36px));display:flex;align-items:center;justify-content:space-between;gap:25px;padding:16px 21px;border:1px solid #dae4b929;border-radius:12px;background:#0c2a24dc;backdrop-filter:blur(18px);box-shadow:0 10px 40px #09282040;z-index:24}
.journey-location{display:flex;align-items:center;gap:13px;min-width:0}
.journey-location>span{font-size:12px;color:#dbc780;white-space:nowrap}
.journey-location>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.journey-location strong{font-size:14px;font-weight:500;color:#eef0d6;white-space:nowrap}
.journey-track{width:110px;height:2px;background:#d4e1bb22}
.journey-track i{display:block;height:100%;background:#e3d18e;transition:width .5s}
.level-panel{min-width:158px;display:grid;grid-template-columns:1fr auto;gap:7px 12px}
.level-panel>span{font-size:11px;color:#ced8b5}
.level-panel>b{font-size:11px;font-weight:500;color:#e7d598}
#xp-meter{height:4px;grid-column:1/-1;background:#e0eac216;border-radius:4px;overflow:hidden}
#xp-fill{height:100%;background:linear-gradient(90deg,#b6db98,#f2d98f);transition:width .6s ease}
.combo-label{position:absolute;right:5px;top:calc(100% + 12px);font-size:12px;letter-spacing:.08em;color:#f9e29e;opacity:0;transform:translateY(-5px);transition:opacity .2s,transform .2s;text-shadow:0 2px 15px #092a25}
.combo-label.show{opacity:1;transform:none}
.reward-banner{position:fixed;top:118px;left:50%;transform:translate(-50%,-15px) scale(.97);z-index:50;display:flex;align-items:center;gap:15px;padding:17px 25px;background:#f0e8c4;border:1px solid #fff3ce;border-radius:12px;box-shadow:0 15px 80px #071b2970;color:#1c402f;opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;max-width:calc(100vw - 35px);width:max-content}
.reward-banner>span{font-size:34px;line-height:1;color:#72802e}
.reward-banner>div{display:flex;flex-direction:column;gap:6px}
.reward-banner strong{font-family:var(--serif);font-size:23px;font-weight:500}
.reward-banner small{font-size:12px;line-height:1.6;color:#5a7151}
.reward-banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
.chapter-curtain{position:fixed;inset:0;background:linear-gradient(#09271a0a,#0a242ce8 45%,#0b272be8 55%,#102c1910);z-index:25;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;opacity:0;pointer-events:none;transition:opacity .5s}
.chapter-curtain.show{opacity:1}
.chapter-curtain>span{font-size:13px;letter-spacing:.16em;color:#d8d79d}
.chapter-curtain>strong{font-family:var(--serif);font-size:clamp(27px,4vw,50px);font-weight:400;color:#f7eccd;text-align:center}
.travel-companion{position:fixed;width:150px;height:150px;left:50%;top:68%;z-index:26;transform:translate(-50%,var(--travel-hop,0px));pointer-events:none;opacity:0;transition:opacity .3s}
.travel-companion.show{opacity:1}
.travel-companion .nilo-puppet{animation:body-stride .36s linear infinite}
.travel-companion .front-leg{animation:front-stride .36s linear infinite}
.travel-companion .back-leg{animation:back-stride .36s linear infinite}
.travel-companion .nilo-lantern{animation:lantern-stride .36s linear infinite}
.chapter-curtain.show~.game-controls{pointer-events:none}

.game-controls{bottom:101px;gap:8px}
.game-controls .control-label{margin-right:5px}
.game-controls .control-label strong{font-size:12px}
.game-controls .control-label>span{font-size:11px;max-width:155px;line-height:1.5}
.game-controls #magic-button{position:relative;width:65px;height:43px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;color:#f3e4ac;background:#e7d89718;overflow:hidden}
.game-controls #magic-button>span{font-size:20px}
.game-controls #magic-button:after{content:'';position:absolute;inset:auto 0 0;height:var(--cooldown,0%);background:#071f2561;pointer-events:none}
.game-controls #guided-button{width:40px;color:#d9dfa6;font-size:21px;background:#b7d19414}
.game-controls #guided-button[aria-pressed=true]{background:#bad298;color:#163b2a;border-color:#dfedb6}
.game-controls #jump-button{width:68px;font-size:12px}
.game-controls button{width:38px}
.playing .experience-dock{z-index:24}
.playing .toast{bottom:177px}
.playing .chapter-nav{opacity:.3}
.playing .header{opacity:.35}
.playing .playfield:focus{outline:0}
.playing .scene-content,.playing .hero-content{transition:opacity .5s}
.guided-walk #guided-button{box-shadow:0 0 22px #cce3a122}
.treasure-reveal{animation:treasure-appear .7s ease-out}
.journey-results{margin:33px auto 0;max-width:620px}
.result-title{display:inline-block;border:1px solid #e3d7984c;border-radius:30px;padding:10px 18px;font-size:12px;color:#e4d89e;background:#b2ca7710;margin-bottom:25px}
.result-numbers{display:flex;justify-content:center;gap:44px}
.result-numbers>div{display:flex;flex-direction:column;gap:9px}
.result-numbers strong{font-family:var(--serif);font-size:35px;font-weight:400;color:#f4e4b6}
.result-numbers span{font-size:12px;color:#aec4a9}
.result-actions{display:flex;justify-content:center;gap:13px;margin:27px 0}
.result-actions button{font-family:var(--sans);font-size:13px}
.journey-finished .ending-link{display:none}
.journey-finished .ending{padding-top:100px;min-height:900px}
.ending.celebration .ending-glow{background:radial-gradient(ellipse at 50% 45%,#82ae4729,transparent 68%);animation:final-glow 5s ease-in-out infinite alternate}
.ending.celebration{overflow:hidden}
.paused .scene-picture{animation:none;translate:none}
.paused .scene-section::after,.paused .scene-section::before,.paused .scene-picture::after{animation:none}
.paused .fx-particle{display:none}
.paused .magic-pulse{animation:none;width:var(--reach);height:var(--reach);opacity:.3}
.paused .nilo-puppet{animation:none!important}
.paused .chapter-curtain{transition:none}

@keyframes puppet-breathe{50%{transform:scaleX(var(--facing,1)) translateY(-2px) rotate(-1deg)}
}
@keyframes cloak-idle{50%{transform:rotate(2.8deg)}
}
@keyframes lantern-idle{50%{transform:rotate(4deg)}
}
@keyframes lantern-glow{50%{opacity:.6;scale:1.25}
}
@keyframes body-stride{0%,100%{transform:scaleX(var(--facing,1)) translateY(-1px) rotate(-1deg)}
25%{transform:scaleX(var(--facing,1)) translateY(-5px) rotate(2deg)}
50%{transform:scaleX(var(--facing,1)) translateY(0) rotate(1deg)}
75%{transform:scaleX(var(--facing,1)) translateY(-5px) rotate(-2deg)}
}
@keyframes front-stride{0%,100%{transform:rotate(-17deg) translateX(3px)}
50%{transform:rotate(17deg) translate(-3px,-2px)}
}
@keyframes back-stride{0%,100%{transform:rotate(16deg) translate(-3px,-2px)}
50%{transform:rotate(-16deg) translateX(3px)}
}
@keyframes cloak-stride{50%{transform:rotate(7deg) translateX(-1px)}
}
@keyframes lantern-stride{0%,100%{transform:rotate(-9deg)}
50%{transform:rotate(13deg)}
}
@keyframes puppet-jump{0%{transform:scaleX(var(--facing,1)) scale(1.14,.82)}
40%{transform:scaleX(var(--facing,1)) scale(.88,1.14) rotate(-8deg)}
100%{transform:scaleX(var(--facing,1)) scale(.94,1.06)}
}
@keyframes puppet-land{0%{transform:scaleX(var(--facing,1)) scale(1.19,.78)}
100%{transform:scaleX(var(--facing,1)) scale(1)}
}
@keyframes puppet-wave{15%,55%{transform:scaleX(var(--facing,1)) rotate(-8deg) translateY(-4px)}
35%,75%{transform:scaleX(var(--facing,1)) rotate(6deg)}
100%{transform:scaleX(var(--facing,1))}
}
@keyframes puppet-celebrate{0%,100%{transform:scaleX(var(--facing,1)) scale(1.04,.96)}
45%{transform:scaleX(var(--facing,1)) translateY(-24px) rotate(-8deg) scale(.97,1.05)}
70%{transform:scaleX(var(--facing,1)) translateY(-10px) rotate(7deg)}
}
@keyframes lantern-cheer{45%{transform:rotate(-27deg) translateY(-5px)}
}
@keyframes puppet-cast{25%{transform:scaleX(var(--facing,1)) rotate(8deg) scale(.98)}
60%{transform:scaleX(var(--facing,1)) rotate(-7deg) scale(1.04)}
}
@keyframes particle-burst{from{opacity:1;transform:translate(-50%,-50%) rotate(0)}
to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r)) scale(.2)}
}
@keyframes cast-pulse{to{width:var(--reach);height:var(--reach);opacity:0;border-width:1px}
}
@keyframes portal-call{50%{box-shadow:0 0 38px #e7d39466,inset 0 0 27px #e3d69736}
}
@keyframes chest-hop{0%,80%,100%{translate:0 0;rotate:0deg}
85%{translate:0 -4px;rotate:-5deg}
90%{rotate:5deg}
95%{rotate:-3deg}
}
@keyframes spring-bounce{25%{scale:1.35 .55}
55%{scale:.8 1.6}
}
@keyframes world-breath{from{scale:1.01;background-position:49% 50%}
to{scale:1.05;background-position:51% 48%}
}
@keyframes canopy-sway{from{transform:rotate(-.6deg) translateX(-5px)}
to{transform:rotate(.8deg) translateX(6px)}
}
@keyframes forest-rays{from{transform:translateX(-30px) rotate(-2deg);opacity:.45}
to{transform:translateX(35px) rotate(2deg);opacity:.9}
}
@keyframes forest-mist{from{transform:translateX(-3%) translateY(0);opacity:.6}
to{transform:translateX(5%) translateY(-25px);opacity:1}
}
@keyframes water-flow{from{transform:translateX(-3px) scaleY(1)}
to{transform:translateX(4px) scaleY(1.016)}
}
@keyframes water-shimmer{to{background-position:0 60px}
}
@keyframes grove-glow{50%{filter:brightness(1.3);scale:1.02}
}
@keyframes world-magic{0%,100%{opacity:0}
40%{opacity:1}
}
@keyframes platform-breathe{50%{box-shadow:0 8px 22px #041d2240,0 0 25px #a2cc7230}
}
@keyframes treasure-appear{from{transform:translateY(20px) scale(.5);opacity:0}
60%{transform:translateY(-10px) scale(1.12)}
to{transform:none;opacity:1}
}
@keyframes final-glow{to{filter:brightness(1.35)}
}

@media(max-width:1100px){.game-controls .control-label{display:none}
.game-controls button{width:44px}
.hero-caption{display:none}
}

@media(max-width:760px){.playfield{height:280px;bottom:83px;left:19px;right:38px}
.hero{min-height:1000px}
.grove,.pond{min-height:1070px}
.trail-heading{font-size:10px;top:-18px}
.trail-platform{height:9px}
.treasure{right:-16px;bottom:149px;padding:9px;min-width:44px}
.trail-portal{right:-25px;bottom:20px;min-width:53px}
.trail-portal>span{width:39px;height:53px;font-size:23px}
.trail-portal small{font-size:8px}
.companion{width:106px;height:117px}
.nilo-puppet{width:123px;height:123px;left:calc(50% - 61px);bottom:-3px}
.companion-name{font-size:9px;bottom:-18px}
.companion-speech{max-width:215px;font-size:12px}
.hero-primary-actions{gap:17px}
.browse-link{font-size:12px}
.hero .quiet-note{max-width:300px;font-size:12px;line-height:1.7}
.journey-hud{top:14px;padding:12px 14px;gap:14px;width:calc(100vw - 28px);border-radius:9px}
.journey-location{gap:9px}
.journey-location>span{font-size:10px}
.journey-location strong{font-size:11px;max-width:125px;white-space:normal;line-height:1.5}
.journey-track{width:75px}
.level-panel{min-width:110px;max-width:120px;gap:6px}
.level-panel>span{font-size:10px}
.level-panel>b{font-size:10px}
.reward-banner{top:105px;padding:15px 17px;gap:11px}
.reward-banner strong{font-size:18px}
.reward-banner small{font-size:11px}
.reward-banner>span{font-size:29px}
.combo-label{font-size:10px;top:calc(100% + 8px)}
.game-controls{bottom:91px;padding:10px;gap:7px}
.game-controls button{width:39px;height:42px}
.game-controls #jump-button{width:59px;font-size:11px;gap:4px}
.game-controls #magic-button{width:55px;font-size:10px;gap:3px}
.game-controls #guided-button{width:33px}
.game-controls #exit-play{width:18px;margin-left:0}
.game-controls #jump-button svg{width:14px}
.playing .toast{bottom:160px}
.result-numbers{gap:30px}
.result-numbers strong{font-size:30px}
.result-numbers span{font-size:11px}
.result-title{font-size:11px;line-height:1.7;max-width:300px}
.result-actions{gap:9px;flex-wrap:wrap}
.result-actions button{font-size:12px}
.journey-finished .ending{min-height:990px;padding-top:85px}
.travel-companion{top:67%;width:130px;height:130px}
.chapter-curtain>strong{max-width:85%;line-height:1.4}
.chapter-curtain>span{font-size:12px}
.bag-summary{gap:24px}
.bag-summary strong{font-size:29px}
.bag-summary span{font-size:11px}
.chapter-nav{right:10px}
.spring-pad{width:35px}
}

@media(prefers-reduced-motion:reduce){.scene-picture,.scene-picture::after,.scene-section::after,.scene-section::before{animation:none!important;translate:none!important}
.fx-particle{display:none}
.chapter-curtain,.reward-banner{transition:none}
.magic-pulse{animation:none;width:var(--reach);height:var(--reach);opacity:.3}
.nilo-puppet{animation:none!important}
}


.travelling .companion{opacity:0}
.travelling .game-controls{pointer-events:none;opacity:.65}
.travelling .playfield{pointer-events:none}
.playing .header:focus-within{opacity:1}

.game-controls #guided-button svg{width:21px;height:21px}
.game-controls button{flex-shrink:0}
.journey-track{overflow:hidden}