:root{color-scheme:dark;--mint:#b6edd2;--cream:#fff0d6;--gold:#efb76c;--ink:#102f32}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--cream);font-family:Arial,Helvetica,sans-serif}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,canvas:focus-visible{outline:3px solid var(--gold);outline-offset:4px}button:disabled{opacity:.55;cursor:progress}[hidden]{display:none!important}#game{position:relative;width:100%;height:100%;isolation:isolate}#world{display:block;width:100%;height:100%;outline:0;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,28,31,.6),transparent 23%,transparent 72%,rgba(5,24,28,.6)),radial-gradient(ellipse at center,transparent 48%,rgba(5,22,27,.25))}.hud{position:absolute;z-index:2}.topbar{top:28px;left:34px;right:34px;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;pointer-events:none}.brand{display:flex;gap:12px;align-items:center;font-size:21px;font-weight:800;letter-spacing:4px;color:var(--cream);text-shadow:0 2px 15px #102f32}.brand svg{width:38px;height:38px;color:var(--gold)}.brand small{font-size:8px;display:block;font-weight:600;letter-spacing:3px;margin-top:6px;color:var(--mint)}.quest{text-align:center;display:flex;flex-direction:column;gap:7px;padding:0 12px;text-shadow:0 2px 12px #102f32}.eyebrow{font-size:10px;letter-spacing:2.6px;font-weight:700;color:var(--mint)}.quest strong{font-family:Georgia,serif;font-weight:400;font-size:24px}.quest>span:last-child{font-size:12px;color:#e1eadd}.actions{display:flex;gap:7px;pointer-events:auto}.actions button{background:#153b3cb0;border:1px solid #b6edd23b;border-radius:9px;height:40px;min-width:42px;padding:0 11px;font-size:12px;backdrop-filter:blur(10px)}.actions button:hover{background:#2b5654}.actions #sound{font-size:18px;display:flex;gap:6px;align-items:center}.actions #sound span{font-size:9px}.counters{top:114px;left:38px;display:flex;gap:24px}.counter{display:grid;grid-template-columns:25px auto;align-items:center;gap:3px 7px}.counter .spark,.shrine-symbol{grid-row:1/3;color:var(--gold);font-size:27px}.counter b{font-size:22px;font-weight:500}.counter b span{font-size:13px;color:#b8ccbd;margin-left:5px}.counter small{font-size:8px;letter-spacing:1.5px}.bottom{left:34px;right:34px;bottom:24px;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none}.controls{display:flex;flex-direction:column;gap:9px;font-size:11px;color:#e8efdf;text-shadow:0 2px 5px #102f32}.controls div{display:flex;gap:10px;align-items:center}kbd{font:600 10px Arial,sans-serif;padding:6px 7px;border:1px solid #cee8ce60;border-bottom-width:2px;border-radius:5px;background:#173b3a9c;color:var(--cream);white-space:nowrap}.mouse-help{margin-left:4px;color:#c2d8c8}.map-wrap{width:150px}.map-wrap canvas{width:150px;height:150px;background:#092e32bb;border:1px solid #b6edd23f;border-radius:50%;box-shadow:0 4px 30px #081d2540}.map-wrap>span{display:block;margin-top:9px;font-size:7px;letter-spacing:1px}.map-wrap b{float:right;color:var(--gold)}#toast{position:absolute;z-index:4;left:50%;top:24%;transform:translateX(-50%) translateY(-8px);padding:14px 24px;border-radius:30px;border:1px solid #b6edd23d;background:#153d3ddd;backdrop-filter:blur(12px);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;font-size:14px;max-width:90%;text-align:center}#toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}.hint{bottom:19%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#102f32db;border:1px solid #b6edd28a;border-radius:10px;padding:12px 17px;font-size:14px}.scent{right:40px;top:31%;display:flex;flex-direction:column;text-align:center;gap:5px;color:var(--mint)}.scent span{font-size:9px;letter-spacing:2px}.scent b{font:24px Georgia,serif}.scent i{font-size:45px;font-style:normal}.overlay{position:absolute;z-index:6;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,rgba(6,27,30,.91),rgba(7,29,32,.68) 36%,transparent 85%)}.intro-panel{width:590px;margin-left:7vw;padding:40px 0}.intro-panel h1{font-family:Georgia,serif;font-size:clamp(40px,4.4vw,72px);line-height:1.08;font-weight:400;letter-spacing:-2px;margin:25px 0}.intro-panel h1 em,.dialog em{font-weight:400;color:var(--mint)}.intro-panel p{font-size:16px;line-height:1.8;color:#d1ded1;max-width:440px}.intro-buttons{display:flex;gap:12px;margin-top:33px;align-items:center}.primary,.secondary{border-radius:8px;padding:15px 22px;border:1px solid transparent;font-size:13px;font-weight:700}.primary{background:var(--mint);color:var(--ink);box-shadow:0 3px 20px #8ed8b526}.primary:hover{background:#d0f6dc}.secondary{background:#153b3a73;border-color:#b6edd250;color:#e7eedc}.secondary:hover{background:#24524d}.secondary span{margin-left:12px}.intro-meta{display:flex;gap:15px;align-items:center;margin-top:35px;color:#aacbb9;font-size:9px;letter-spacing:2px}.intro-meta i{width:3px;height:3px;background:var(--gold);border-radius:50%}.build-note{display:block;margin-top:16px;font-size:10px;color:#8cac9c}.intro-caption{position:absolute;right:4vw;bottom:7vh;display:flex;flex-direction:column;gap:10px;text-align:right}.intro-caption span{font-size:9px;letter-spacing:2px;color:var(--mint)}.intro-caption b{font:26px Georgia,serif}.centered{justify-content:center;background:#071e2488;backdrop-filter:blur(10px)}.dialog{text-align:center;max-width:540px;padding:44px;background:#123638ee;border:1px solid #b6edd236;border-radius:20px;box-shadow:0 25px 100px #061e2444}.dialog h2{font:40px/1.18 Georgia,serif;margin:20px 0}.dialog p{font-size:14px;line-height:1.7;color:#c2d6c4}.dialog button{display:block;width:100%;margin-top:12px}.dialog-note{margin:24px 0 0!important;font-size:11px!important;line-height:1.9!important}#result{font-size:12px;color:var(--mint);margin:20px 0}#failure{position:absolute;inset:auto 15px 15px;z-index:10;background:#672e23;padding:20px;border-radius:10px;font-size:15px}#demoLabel{position:absolute;top:114px;right:34px;z-index:3;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:1px;color:var(--gold)}#demoLabel span{color:#b8ccbd;letter-spacing:0}#demoLabel button{background:#163c39;border:1px solid #b6edd255;padding:9px 12px;border-radius:7px;font-size:11px}.touch-controls{display:none;bottom:24px;left:24px;right:24px;justify-content:space-between;align-items:flex-end;pointer-events:none}#stick{width:108px;height:108px;border:1px solid #b6edd25c;border-radius:50%;background:#173b3a66;position:relative;touch-action:none;pointer-events:auto}#stick i{width:44px;height:44px;border-radius:50%;background:#b6edd269;position:absolute;top:31px;left:31px;border:1px solid #b6edd278}.touch-buttons{display:grid;grid-template-columns:repeat(2,60px);gap:8px;pointer-events:auto}.touch-buttons button{border-radius:50%;width:60px;height:60px;border:1px solid #b6edd26b;background:#153b3a99;font-size:9px;touch-action:none}.touch-buttons button:active{background:#719f86}body.started #welcome{display:none}body.in-intro .counters,body.in-intro .bottom,body.in-intro .quest,body.in-intro .touch-controls{visibility:hidden}body.in-intro .topbar{z-index:7;pointer-events:none}body.in-intro .actions{display:none}
@media(max-width:800px){.topbar{top:18px;left:18px;right:18px;gap:10px}.brand{font-size:16px;letter-spacing:2px}.brand svg{width:28px}.brand small{font-size:6px;letter-spacing:2px}.quest{position:absolute;top:62px;left:0;right:0}.quest .eyebrow{font-size:8px}.quest strong{font-size:20px}.quest>span:last-child{font-size:11px}.actions button{height:34px;min-width:34px;padding:0 8px;font-size:10px}.counters{top:151px;left:20px;gap:20px}.counter b{font-size:20px}.counter small{font-size:7px}.bottom{bottom:20px;left:20px;right:20px}.controls{display:none}.map-wrap{width:96px;margin-left:auto;margin-bottom:132px}.map-wrap canvas{width:96px;height:96px}.map-wrap>span{font-size:6px;line-height:1.5}.touch-controls{display:flex}.intro-panel{margin:0 7vw;width:86vw;padding:10px 0 90px}.intro-panel h1{font-size:43px;letter-spacing:-1px}.intro-panel p{font-size:14px;line-height:1.7;max-width:400px}.intro-buttons{flex-direction:column;align-items:stretch;max-width:330px}.intro-caption{display:none}.intro-meta{margin-top:24px}.intro-panel .eyebrow{font-size:8px}.dialog{padding:28px;margin:18px}.dialog h2{font-size:32px}#demoLabel{top:211px;right:20px;left:20px;justify-content:flex-start;gap:8px;font-size:8px}#demoLabel span{display:none}.scent{right:22px;top:33%;}.scent span{font-size:7px}.scent b{font-size:18px}.scent i{font-size:32px}.hint{bottom:190px;font-size:12px;white-space:nowrap}#toast{top:40%;font-size:12px}.overlay{background:linear-gradient(90deg,#071f23ed,#071f2399)} }
@media(pointer:coarse) and (min-width:801px){.touch-controls{display:flex}.controls{display:none}.map-wrap{margin-bottom:210px}}@media(prefers-reduced-motion:reduce){#toast{transition:none}}
.actions{max-width:258px;flex-wrap:wrap;justify-content:flex-end}.actions button{font-size:10px}.animal-status{top:182px;left:38px;font-size:9px;letter-spacing:1.3px;color:#c7dcc7;pointer-events:none}.animal-status>span{color:var(--mint)}.animal-status div{display:flex;gap:9px;align-items:center;margin-top:10px;font-size:8px}.animal-status i{width:3px;height:3px;background:var(--gold);border-radius:50%}.animal-status b{font-weight:400}.lab-link{display:block;font-size:11px;line-height:1.7;margin-top:20px;color:var(--mint);text-underline-offset:4px}.touch-buttons{grid-template-columns:repeat(2,54px);gap:6px}.touch-buttons button{width:54px;height:54px;font-size:8px}#photoPanel{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:9;text-align:center;padding:18px 24px;background:#123638ee;border:1px solid #b6edd255;border-radius:14px;min-width:300px}#photoPanel>span{font-size:9px;color:var(--mint);letter-spacing:2px}#photoPanel p{font-size:12px}#photoPanel button{padding:9px 15px;border:1px solid #b6edd255;background:#214d48;border-radius:6px;font-size:12px}.photo-mode .hud,.photo-mode .vignette,.photo-mode #toast,.photo-mode #demoLabel{visibility:hidden!important}.in-intro .animal-status{visibility:hidden}
@media(max-width:800px){.actions{max-width:142px;gap:4px}.actions button{height:28px;min-width:35px;font-size:8px;padding:0 6px}.actions #sound{font-size:14px}.quest{top:76px}.counters{top:159px}.animal-status{top:214px;left:20px;font-size:8px}.animal-status div{font-size:7px}.map-wrap{margin-bottom:193px}#demoLabel{top:263px}#toast{top:47%}.intro-panel h1{font-size:40px}.intro-meta{margin-top:20px}.intro-buttons{margin-top:22px}.lab-link{font-size:10px}.build-note{margin-top:12px}.intro-panel{padding-bottom:15px}}
