:root{--navy:#082b50;--blue:#1768a7;--sky:#55b9f5;--gold:#ffc928;--ink:#071a2f;--cream:#fff7dc;--grass:#2e9c46;--pixel:'Press Start 2P',monospace;--body:'Space Grotesk',sans-serif}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--navy);font-family:var(--body);color:white}button,a{font:inherit}.screen{display:none;position:absolute;inset:0}.screen.active{display:block}
#start{background:linear-gradient(90deg,rgba(4,25,48,.9),rgba(4,25,48,.18)),url('assets/world.png') center/cover no-repeat}.start-card{width:min(680px,90vw);margin:clamp(3rem,12vh,8rem) 0 0 clamp(1.25rem,8vw,8rem);text-shadow:0 3px 0 rgba(0,0,0,.25)}.eyebrow{font:clamp(.65rem,1.2vw,.85rem)/1 var(--pixel);letter-spacing:.12em;color:var(--gold)}h1,h2{font-family:var(--pixel);line-height:1.22;margin:.75rem 0 1.2rem}h1{font-size:clamp(2.4rem,7vw,6.5rem)}h1 em,h2 em{font-style:normal;color:var(--gold)}.start-card p{max-width:620px;font-size:clamp(1.05rem,2vw,1.45rem);line-height:1.55;font-weight:600}.primary{border:0;background:var(--gold);color:var(--ink);font:700 .78rem/1 var(--pixel);padding:1.15rem 1.35rem;box-shadow:0 6px 0 #b36b11;cursor:pointer;transform:translateY(0);transition:.15s}.primary:hover{filter:brightness(1.08);transform:translateY(-2px)}.primary:active{transform:translateY(4px);box-shadow:0 2px 0 #b36b11}.start-help{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.8rem;font:600 .82rem/1.4 var(--body);opacity:.9}
#play{background:#3ea4ef}.hud{position:absolute;z-index:30;top:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1rem,4vw,3rem);background:linear-gradient(180deg,rgba(5,33,63,.95),rgba(5,33,63,.76));border-bottom:3px solid rgba(255,255,255,.25);backdrop-filter:blur(6px)}.brand b{display:block;font:clamp(.7rem,1.5vw,1rem)/1.1 var(--pixel);color:var(--gold)}.brand small{font-size:.7rem;letter-spacing:.18em}.hud-stats{display:flex;gap:2rem;font:600 .78rem/1.2 var(--pixel)}.hud-stats b{color:var(--gold)}.icon-btn{width:42px;height:42px;border:2px solid white;border-radius:50%;background:transparent;color:white;font-size:1.2rem;cursor:pointer}
#viewport{position:absolute;inset:76px 0 0;overflow:hidden;touch-action:none}#world{position:absolute;height:100%;width:8800px;left:0;top:0;background:linear-gradient(#4ab0f4 0 62%,#3f9f47 62% 68%,#77441f 68%)}.sky-layer{position:absolute;inset:0;background:url('assets/world.png') left bottom/auto 100% repeat-x;opacity:.94}.path-line{position:absolute;left:0;right:0;bottom:24%;height:18px;background:#61ca4c;border-top:5px solid #bcf55f;border-bottom:5px solid #1f6d38;box-shadow:0 18px 0 #70421e}
.milestone{position:absolute;bottom:calc(24% + 14px);width:210px;height:210px;transform:translateX(-50%);text-align:center;cursor:pointer;filter:drop-shadow(0 8px 0 rgba(0,0,0,.23));transition:.2s}.milestone:hover,.milestone.near{transform:translateX(-50%) translateY(-7px)}.castle{font-size:105px;line-height:1;display:block}.milestone.visited .castle{filter:sepia(.1) saturate(1.5);text-shadow:0 0 20px var(--gold)}.flag{display:inline-block;position:absolute;top:3px;left:50%;background:var(--navy);border:3px solid white;color:var(--gold);font:600 .67rem/1 var(--pixel);padding:.55rem .65rem;transform:translateX(-50%);white-space:nowrap}.milestone.visited .flag{background:#237541}.label{display:block;background:rgba(4,30,55,.92);border:2px solid white;padding:.55rem .4rem;font:600 .68rem/1.4 var(--pixel);color:white;margin-top:-8px}.obstacle{position:absolute;bottom:calc(24% + 15px);font-size:58px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25));user-select:none}.coin{position:absolute;bottom:48%;font-size:35px;animation:float 1.2s ease-in-out infinite alternate}.coin.collected{display:none}@keyframes float{to{transform:translateY(-12px)}}
#player{position:absolute;left:150px;bottom:calc(24% + 17px);width:110px;height:122px;z-index:12;transition:filter .2s;will-change:transform}.sprite{width:100%;height:100%;background:url('assets/adventurer.png') 0 center/600% 100% no-repeat;filter:drop-shadow(0 7px 0 rgba(0,0,0,.22))}.walking .sprite{animation:walk .32s steps(2) infinite}.jumping .sprite{background-position:60% center}.celebrate .sprite{background-position:80% center}@keyframes walk{from{background-position:20% center}to{background-position:60% center}}#player.left .sprite{transform:scaleX(-1)}
#finish{position:absolute;left:8420px;bottom:calc(24% + 15px);width:280px;height:330px;text-align:center}.sun{position:absolute;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,#fff9b1 0 14%,#ffd53e 46%,rgba(255,203,30,0) 70%);left:25px;top:-100px;animation:pulse 1.8s infinite alternate}@keyframes pulse{to{filter:brightness(1.2);transform:scale(1.06)}}.final-door{position:absolute;bottom:0;left:70px;width:145px;height:230px;border:16px solid #f6cf68;border-bottom:0;border-radius:76px 76px 0 0;background:linear-gradient(#fff8c2,#ffbd26);box-shadow:0 0 45px #fff49b, inset 0 0 20px white}.final-door span{font-size:55px;position:absolute;top:70px;left:29px}.final-door+p{position:absolute;bottom:-48px;width:100%;font:.65rem var(--pixel);color:var(--navy)}
.nearby{position:absolute;z-index:25;left:50%;bottom:140px;transform:translateX(-50%);background:var(--ink);border:3px solid white;padding:.8rem 1rem;font:.66rem var(--pixel);animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:.55}}.mobile-controls{display:none;position:absolute;z-index:35;bottom:max(18px,env(safe-area-inset-bottom));left:16px;right:16px;justify-content:space-between;pointer-events:none}.mobile-controls button{pointer-events:auto;width:62px;height:62px;border-radius:50%;border:3px solid rgba(255,255,255,.9);background:rgba(6,38,70,.78);color:white;font:1.3rem var(--pixel);box-shadow:0 5px 0 rgba(0,0,0,.3)}.mobile-controls .jump{margin-left:auto;margin-right:8px}.mobile-controls .open{background:#db9a12;color:#12233b}
dialog{width:min(560px,calc(100vw - 2rem));border:5px solid var(--ink);background:var(--cream);color:var(--ink);padding:2rem;box-shadow:10px 10px 0 rgba(4,22,40,.55)}dialog::backdrop{background:rgba(3,17,31,.72);backdrop-filter:blur(5px)}.close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:2rem;cursor:pointer}.dialog-year{display:inline-block;background:var(--navy);color:var(--gold);padding:.6rem .7rem;font:.8rem var(--pixel)}.dialog-icon{font-size:3.5rem;margin:1rem 0 .4rem}.dialog-kicker{margin:0;color:#49708d;font:700 .75rem var(--pixel);line-height:1.45;text-transform:uppercase}.dialog-year+h2{}dialog h2{font-size:clamp(1.15rem,3vw,1.7rem);line-height:1.4;margin:.7rem 0}dialog>p:last-of-type{font-size:1.05rem;line-height:1.55}.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 1.4rem}.tags span{background:#d7ebf2;border:1px solid #9bbfcf;padding:.4rem .55rem;font-size:.78rem;font-weight:700}
.ending-screen{background:radial-gradient(circle at 50% 42%,#fff7b0 0,#ffc629 21%,#ef7e25 52%,#123e69 100%);overflow:hidden}.end-rays{position:absolute;inset:-80%;background:repeating-conic-gradient(rgba(255,255,255,.18) 0 8deg,transparent 8deg 18deg);animation:spin 35s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.ending-copy{position:relative;z-index:2;display:flex;height:100%;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:2rem;text-shadow:0 3px 0 rgba(0,0,0,.16)}.ending-copy h2{font-size:clamp(2rem,6vw,5.5rem);margin:1.2rem 0}.ending-copy p{max-width:700px;font-size:clamp(1rem,2vw,1.35rem);font-weight:700;line-height:1.5}.end-links{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}.end-links a,.end-links button{border:3px solid var(--ink);padding:1rem;background:var(--ink);color:white;text-decoration:none;font:700 .65rem var(--pixel);cursor:pointer}.end-links button{background:transparent;color:var(--ink)}
@media(max-width:760px){.hud{height:68px}.brand small{display:none}.hud-stats{gap:.75rem;font-size:.55rem}.hud-stats span:first-child{display:none}#viewport{top:68px}.mobile-controls{display:flex}.start-help{display:none}.start-card{margin-top:15vh}.milestone{transform:translateX(-50%) scale(.88)}.milestone:hover,.milestone.near{transform:translateX(-50%) translateY(-5px) scale(.88)}.nearby{bottom:105px}dialog{padding:1.5rem}.icon-btn{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
.milestone,.milestone:hover,.milestone.near{appearance:none;border:0;background:transparent;padding:0;width:280px;height:260px;transform:translateX(-50%);bottom:calc(24% + 12px);filter:none;box-shadow:none}
.castle{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none}
.milestone.near .castle{filter:drop-shadow(0 0 9px #fff8a3)}
.milestone.visited .castle{filter:drop-shadow(0 0 6px #e8c75b)}
.flag{top:-38px;background:transparent;border:0;font:700 14px/1.5 var(--body);text-shadow:2px 2px 2px #071a2f,-1px -1px #071a2f;color:#fff4b0;padding:0}
.label{position:absolute;left:-10px;right:-10px;bottom:-45px;background:transparent;border:0;color:white;text-shadow:2px 2px 2px #071a2f,-1px -1px #071a2f;font:700 16px/1.4 var(--body);padding:0}
.milestone.visited .flag{background:transparent;color:#ffe27b}
#player{width:78px;height:116px;pointer-events:none}
.sprite,.walking .sprite,.jumping .sprite{animation:none;background:none;image-rendering:pixelated}
.enemy{position:absolute;bottom:calc(24% + 17px);width:78px;height:58px;z-index:11;pointer-events:none}
.enemy-sprite{width:100%;height:100%;background:url('assets/monster.png') 0 center/400% 100%;image-rendering:pixelated}
.enemy.defeated{display:none}
#player.hurt{opacity:.55;filter:drop-shadow(0 0 7px white)}
.chapter-hud{position:absolute;left:20px;top:88px;z-index:30;display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:14px;text-shadow:1px 1px #071a2f}
.chapter-hud select{max-width:90vw;background:#082b50;color:white;border:1px solid #8bbada;padding:9px;font:600 16px var(--body)}
.chapter-hud span{background:#082b50cc;padding:8px}
#lives{color:#ff8c89;white-space:nowrap;font:700 20px var(--body)}
#feedback{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);text-align:center;z-index:20;background:#082b50dd;padding:8px 14px;font-size:14px;max-width:90vw;width:max-content;pointer-events:none}
.nearby{animation:none;font:700 14px/1.4 var(--body);color:#fff7dc;max-width:90vw;cursor:pointer}
dialog{max-height:85dvh;overflow-y:auto}dialog .primary{line-height:1.6}dialog:focus-visible{outline:3px solid #ffc928}
.hud-stats{font:600 14px var(--body)}.tags span{font-size:14px}.dialog-kicker{font:700 14px/1.5 var(--body)}
@media(max-width:760px){.chapter-hud{top:76px;left:12px;gap:4px}.chapter-hud span{display:none}.milestone,.milestone:hover,.milestone.near{transform:translateX(-50%);width:220px;height:215px}.label{font-size:16px}.hud-stats{gap:8px}#feedback{bottom:90px;font-size:14px}.nearby{bottom:145px}.brand b{font-size:10px}.start-help{display:flex}.start-card{margin-top:6vh}.start-card h1{font-size:clamp(2rem,8vw,4rem)}}
@media(max-height:550px){.milestone,.milestone:hover,.milestone.near{height:150px;width:175px}.flag{top:-20px}.chapter-hud{top:78px}.start-card{margin-top:20px}.start-card h1{font-size:2rem}.start-card p{font-size:16px}.start-help{margin-top:12px}}