@font-face{font-family:Fredoka;src:url("assets/fonts/fredoka-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Nunito;src:url("assets/fonts/nunito-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url("assets/fonts/nunito-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--forest:#1c5b4a;--teal:#123f3c;--coral:#e46757;--yellow:#f4c342;--cream:#f7f4ea;--ink:#16312f;--safe:clamp(18px,4vw,64px)}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#0a2927;color:var(--cream);font-family:Nunito,system-ui,sans-serif;overflow:hidden}
button{font:700 clamp(16px,2.2vw,30px)/1 Fredoka,Nunito,sans-serif;letter-spacing:.01em;color:var(--cream);background:var(--forest);border:3px solid transparent;border-radius:14px;min-height:56px;padding:14px 28px;cursor:pointer;transition:transform .14s ease-out,background .14s ease-out,border-color .14s ease-out}
button:hover{background:#24745e}
button:focus-visible,.focused{outline:5px solid var(--cream);outline-offset:4px;border-color:var(--yellow);background:var(--yellow);color:var(--teal);transform:scale(1.025)}
button[disabled]{opacity:.45;cursor:not-allowed}
#game-shell{position:fixed;inset:0;display:grid;place-items:center;background:#0a2927;isolation:isolate}
#game{position:absolute;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));image-rendering:auto;background:#dcefd6;box-shadow:0 24px 64px #041817}
#story-image{position:absolute;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));object-fit:contain;object-position:center;background:#0a2927;z-index:1}
.screen{position:absolute;inset:max(0px,calc((100vh - min(100vh,100vw * 9 / 16))/2)) max(0px,calc((100vw - min(100vw,100vh * 16 / 9))/2));z-index:3;display:flex;align-items:center;justify-content:center;padding:var(--safe);pointer-events:none}
.screen>*{pointer-events:auto}
.panel{background:rgba(18,63,60,.94);border:3px solid rgba(247,244,234,.75);border-radius:24px;padding:clamp(22px,3vw,44px);box-shadow:0 14px 36px rgba(4,28,25,.35);max-width:1000px;width:min(92%,1000px)}
.title-panel{display:flex;flex-direction:column;align-items:center;gap:12px;background:rgba(247,244,234,.96);border-color:var(--yellow);max-width:520px;color:var(--ink);padding:20px 34px 28px}
.logo{width:min(260px,46vh);height:min(250px,42vh);object-fit:contain}
.menu{display:flex;flex-direction:column;gap:12px;width:min(380px,86vw)}
h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Fredoka,Nunito,sans-serif;text-wrap:balance}h1{font-size:clamp(36px,5vw,70px)}h2{font-size:clamp(30px,4vw,54px)}h3{font-size:clamp(23px,2.7vw,34px)}p{font-size:clamp(18px,2vw,29px);line-height:1.35;text-wrap:pretty}
.subtle{opacity:.84;font-size:clamp(15px,1.5vw,22px)}
.difficulty-grid{display:flex;gap:22px;margin-top:30px}.difficulty{flex:1;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;text-align:left}.difficulty strong{font-size:clamp(22px,2.5vw,34px)}.difficulty span{font:400 clamp(16px,1.7vw,23px)/1.35 Nunito,sans-serif}.difficulty small{font:700 16px/1.25 Nunito,sans-serif;color:inherit}
.dialogue{align-self:flex-end;margin-bottom:2%;max-width:1170px}.speaker{color:var(--yellow);font:600 clamp(20px,2.3vw,31px)/1 Fredoka,sans-serif}.dialogue-copy{font-size:clamp(22px,2.8vw,38px);max-width:36ch;margin:8px 0 18px}.mission{color:var(--yellow);font-weight:700;max-width:58ch}.dialogue-actions{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:16px}.dialogue-actions .hint{opacity:.8;font-size:18px}.story-screen{justify-content:flex-end;align-items:center;padding:1.2%}.story-screen .dialogue{align-self:center;margin:0;width:26%;max-width:none;max-height:96%;overflow:auto;padding:clamp(14px,1.8vw,26px)}.story-screen .speaker{font-size:clamp(17px,1.7vw,25px)}.story-screen .dialogue-copy{font-size:clamp(16px,1.75vw,27px);line-height:1.25;max-width:none;margin:8px 0 14px}.story-screen .mission{font-size:clamp(14px,1.35vw,20px);line-height:1.25;white-space:pre-line}.story-screen .dialogue-actions{align-items:stretch;flex-direction:column;gap:10px;margin-top:14px}.story-screen .dialogue-actions button{width:100%;min-height:50px;padding:12px 10px;font-size:clamp(16px,1.5vw,22px)}.story-screen .dialogue-actions .hint{font-size:clamp(13px,1.1vw,16px);order:2}
.map-panel{background:#f0efdf;color:var(--ink);max-width:1180px}.map-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.trail{display:flex;align-items:center;justify-content:space-between;margin:70px 10px 45px;position:relative}.trail:before{content:"";position:absolute;left:5%;right:5%;top:50%;border-top:7px dashed var(--forest)}.level-node{position:relative;width:118px;height:118px;border-radius:50%;padding:0;z-index:1;font-size:34px}.level-node span{position:absolute;top:126px;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 18px/1 Nunito,sans-serif;color:var(--ink)}.level-node.done{background:var(--yellow);color:var(--teal)}.level-node.locked{background:#82958b}.map-footer{display:flex;align-items:center;justify-content:space-between;gap:20px}.map-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.notebook{background:#f5f1dc;color:var(--ink);max-width:1120px;border:14px solid #684832;position:relative}.notebook:after{content:"";position:absolute;top:0;bottom:0;left:50%;width:8px;background:#d2bf91}.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:30px}.stamp{text-align:center;position:relative;z-index:1}.stamp-mark{width:100px;height:100px;border-radius:50%;display:grid;place-items:center;margin:auto;background:#c5c8ba;border:4px solid var(--teal);font-size:42px}.stamp.found .stamp-mark{background:var(--yellow)}.stamp p{font-size:18px;margin-top:10px}.stamp small{color:var(--forest)}
.settings{display:grid;gap:10px;margin-top:24px}.setting{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 16px;border-radius:12px}.setting:focus-within{background:#dfe9d6}.setting button{min-width:260px}
#hud{position:absolute;z-index:2;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));pointer-events:none;padding:4% 4%;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;font:700 clamp(16px,2vw,28px)/1 Fredoka,sans-serif;text-shadow:0 2px 3px #0a2927}
#hearts,#level-label,#clues{background:rgba(18,63,60,.88);border-radius:14px;padding:12px 18px}#hearts{justify-self:start;color:var(--coral);letter-spacing:5px}#level-label{justify-self:center}#clues{justify-self:end;color:var(--yellow)}
#toast{position:absolute;z-index:4;bottom:max(4%,72px);left:50%;transform:translateX(-50%);background:rgba(18,63,60,.95);border:2px solid var(--cream);border-radius:15px;padding:13px 24px;font-weight:700;font-size:clamp(16px,1.8vw,25px);max-width:72%;text-align:center}
#touch-controls{position:absolute;z-index:6;inset:auto 0 0;display:flex;justify-content:space-between;align-items:flex-end;padding:20px;pointer-events:none}#touch-controls button{pointer-events:auto;width:76px;height:68px;padding:0;background:rgba(18,63,60,.78);touch-action:none}.touch-move{display:flex;gap:10px}.touch-jump{margin-left:auto;margin-right:15px;width:110px!important}.touch-pause{position:fixed;right:20px;top:88px;width:54px!important;height:54px!important}
.credits{text-align:center}.credits p{line-height:1.65;margin-top:24px}.case-closed{font-size:clamp(48px,7vw,88px);color:var(--yellow);text-align:center;margin-bottom:24px}
@media (max-width:800px),(max-height:520px){.difficulty-grid{gap:9px;margin-top:14px}.difficulty{min-height:170px;padding:12px}.difficulty span{font-size:14px}.difficulty small{display:none}.panel{padding:18px}.trail{margin:35px 5px}.level-node{width:72px;height:72px;min-height:72px;font-size:22px}.level-node span{top:78px;font-size:13px}.stamps{margin-top:10px}.stamp-mark{width:70px;height:70px}.dialogue{margin-bottom:0}.dialogue-copy{margin:4px 0 8px}}
@media (max-width:800px),(max-height:520px){.map-footer{gap:10px}.map-footer p{font-size:16px}.map-actions{gap:8px}.map-actions button{min-height:44px;padding:10px 14px;font-size:15px}}
@media (max-width:800px),(max-height:520px){.story-screen{padding:1%}.story-screen .dialogue{width:26%;padding:10px;border-radius:14px}.story-screen .dialogue-copy{font-size:16px;line-height:1.18;margin:5px 0 8px}.story-screen .mission{font-size:13px;line-height:1.16}.story-screen .dialogue-actions{gap:5px;margin-top:7px}.story-screen .dialogue-actions button{min-height:40px;padding:8px 5px;font-size:14px}.story-screen .dialogue-actions .hint{display:none}}
@media (pointer:coarse){#touch-controls:not([hidden]){display:flex}}
@media (prefers-reduced-motion:reduce){button{transition:none}}
[hidden]{display:none!important}

@media (max-height:520px){.title-panel{max-height:96%;padding:7px 22px;gap:5px}.title-panel .logo{width:140px;height:96px}.title-panel .menu{gap:6px}.title-panel .menu button{min-height:42px;padding:8px 20px}.title-panel .subtle{display:none}}