:root{font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;color:#31594c;background:#254f47;--dock:100px;--safeb:env(safe-area-inset-bottom);--safer:env(safe-area-inset-right)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;overflow:hidden}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation;border:0}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #0c8ab1;outline-offset:3px}button:disabled{opacity:.55;cursor:default}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app{height:100dvh;width:100vw;display:flex;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#bad8b5}
.play-area{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;background:#a6cfb4}.viewport{position:absolute;inset:0;cursor:grab;touch-action:none;user-select:none}.viewport.dragging{cursor:grabbing}#scene-svg{width:100%;height:100%;display:block;pointer-events:none}.animal-unit,.foreground-cover{pointer-events:none}.animal-image{filter:drop-shadow(0 3px 3px #34473855)}
.hud{position:relative;z-index:3;flex:0 0 var(--dock);width:var(--dock);display:flex;flex-direction:column;align-items:stretch;gap:5px;background:#fff9eaf2;border-left:2px solid #ffffffde;padding:8px 5px 9px;box-shadow:-5px 0 20px #173e3326}.hud-cap{text-align:center;letter-spacing:1px;font-size:10px;font-weight:950;color:#57806b;padding:5px 0 2px}.target-list{display:flex;flex-direction:column;align-items:stretch;gap:7px;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:thin}.target{background:#fff;border:2px solid #e6dcbf;border-radius:17px;min-height:102px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 2px;gap:2px}.target img{object-fit:contain;width:67px;height:65px;display:block;flex-shrink:0}.target .count{font-size:19px;line-height:1;font-weight:950;color:#3c7967;font-variant-numeric:tabular-nums}.target .count small{font-size:11px;font-weight:800}.target.done{background:#e5f5e8;border-color:#b9debe;opacity:.70}.target.done img{filter:grayscale(.3)}.hud-bottom{margin-top:auto;display:grid;gap:8px}.progress{text-align:center}.progress b{font-size:15px;color:#3e795c;white-space:nowrap;font-variant-numeric:tabular-nums}.progress-track{height:5px;border-radius:10px;background:#e3e8d7;overflow:hidden;margin:4px 7px 0}.progress-track>div{width:0;height:100%;background:#52ab79;transition:width .2s}.hud-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.hud-tools button{border-radius:12px;min-height:37px;background:#e9f2e9;color:#497a65;display:flex;align-items:center;justify-content:center}.hud-tools button svg{width:19px;height:19px}.hud-tools .hint-btn{grid-column:1/-1;display:flex;flex-direction:row;gap:4px;background:#f8c976;color:#65461c;min-height:43px;font-size:12px;font-weight:950}.hud-tools .hint-btn svg{width:22px;height:22px}
.tools-popover{position:fixed;z-index:8;right:calc(var(--dock) + env(safe-area-inset-right) + 8px);bottom:calc(env(safe-area-inset-bottom) + 9px);background:#fffdf4f5;padding:9px;box-shadow:0 6px 26px #163b3470;border:2px solid white;border-radius:16px;display:flex;flex-direction:column;gap:5px;min-width:142px}.tools-popover button{background:#eaf2e6;color:#386d5e;text-align:left;font-size:12px;font-weight:850;border-radius:9px;padding:9px}.tiny-time{font-size:12px;text-align:center;color:#71867b;padding:2px 0 5px}.toast{position:absolute;z-index:2;bottom:19px;left:50%;transform:translateX(-50%);background:#fffdf1f2;color:#346954;padding:9px 14px;border-radius:12px;box-shadow:0 6px 20px #173b3455;font-size:14px;font-weight:850;opacity:0;transition:opacity .18s;pointer-events:none;text-align:center;max-width:calc(100% - 24px)}.toast.show{opacity:1}
.overlay{position:fixed;inset:0;z-index:30;background:#1d4448bd;display:grid;place-items:center;padding:16px;overflow:auto;backdrop-filter:blur(5px)}.dialog{background:#fffdf6;border:4px solid white;border-radius:26px;max-height:94dvh;width:min(600px,100%);overflow:auto;padding:20px 21px;box-shadow:0 22px 65px #0c2e3499;text-align:center}.dialog h2{color:#306957;font-size:clamp(23px,3.3vw,33px);margin:8px 0 12px}.dialog p{font-weight:650;line-height:1.45;color:#6b8376;margin:0 0 14px}.dialog .eyebrow{color:#448968;font-size:12px;font-weight:950;letter-spacing:1.1px}.hero-animals{height:115px;display:flex;justify-content:center;align-items:center;gap:4px}.hero-animals img{height:105px;width:105px;max-width:29%;object-fit:contain}.dialog-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:17px}.dialog button{min-height:44px;border-radius:13px;padding:10px 15px;font-weight:850}.dialog .primary{color:white;background:#e98b68}.dialog .secondary{color:#3f725c;background:#e6f1e5}.dialog .danger{background:#fae5df;color:#ac5a4e}.scene-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:min(61dvh,500px);overflow:auto;text-align:left;padding:1px}.dialog:has(.scene-grid){width:min(870px,100%)}.scene-card{display:flex;align-items:center;gap:10px;text-align:left;border:2px solid #e0ead5;background:#f3f7e9;padding:6px!important;min-height:72px}.scene-card.current{border-color:#5aad83}.scene-card.locked{opacity:.5}.scene-card img{width:93px;height:65px;border-radius:9px;object-fit:cover;background:#d6e7d2;flex:none}.scene-card strong{display:block;font-size:13px;line-height:1.2}.scene-card small{display:block;color:#668676;font-size:11px;margin-top:4px}.parent-panel{text-align:left;max-height:60dvh;overflow:auto}.parent-panel label{display:block;margin:12px 0;font-size:14px;font-weight:800}.parent-panel input,.parent-panel select{display:block;width:100%;border:2px solid #c5dfcd;border-radius:9px;padding:8px;margin-top:4px;background:#fff;font-size:15px}.parent-panel .toggle-line{display:flex;align-items:center;justify-content:space-between}.parent-panel .toggle-line input{width:23px;height:23px}.parent-panel .summary{padding:9px;border-radius:10px;background:#e8f5e7;font-weight:650;line-height:1.5}.parent-panel .summary small{display:block;font-size:12px}.parent-panel .error{color:#b34b3d;min-height:18px}.found-collection{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;max-height:150px;overflow:auto}.found-collection img{width:48px;height:48px;background:#fff1d8;border-radius:10px;object-fit:contain}.more-animals{font-size:24px;color:#4b7965;font-weight:900}
.animal-collecting{transform-box:fill-box;transform-origin:center;animation:collect-animal 520ms ease-out both}.found-flare{transform-origin:0 0;animation:found-glow 520ms ease-out both}.found-ring{fill:none;stroke:#fff1a3;stroke-width:7}.world-hint{fill:#f7df8330;stroke:#fff1a4;stroke-width:5;filter:drop-shadow(0 0 4px #8b673b);pointer-events:none}.precise-hint{stroke:#ec9758}@keyframes collect-animal{0%{opacity:1;transform:scale(1)}40%{opacity:1;transform:translateY(-9px) scale(1.12)}100%{opacity:0;transform:translateY(-16px) scale(.80)}}@keyframes found-glow{0%{opacity:0;transform:scale(.7)}30%{opacity:.9}100%{opacity:0;transform:scale(1.28)}}
@media(max-height:610px) and (min-width:650px){:root{--dock:88px}.hud{padding:4px}.target{min-height:75px;border-radius:12px}.target img{width:50px;height:48px}.target .count{font-size:15px}.hud-tools .hint-btn{min-height:34px}.hud-cap{padding:2px}.progress b{font-size:12px}}
@media (orientation:portrait), (max-width:649px){.app{flex-direction:column}.hud{height:88px;flex:0 0 88px;width:100%;border-left:0;border-top:2px solid #fff;display:flex;flex-direction:row;align-items:center;gap:5px;padding:4px 7px}.hud-cap{display:none}.target-list{flex:1;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:4px;overflow-x:auto;overflow-y:hidden}.target{min-width:68px;min-height:75px;max-height:75px;border-radius:12px;gap:0;padding:2px}.target img{width:53px;height:49px}.target .count{font-size:14px}.target .count small{font-size:9px}.hud-bottom{margin-top:0;display:flex;align-items:center;flex-direction:row;gap:5px}.progress{min-width:46px}.progress b{font-size:12px}.progress-track{margin:4px 1px 0}.hud-tools{grid-template-columns:repeat(2,35px);gap:4px}.hud-tools button{min-height:32px}.hud-tools .hint-btn{grid-column:1/-1;min-height:35px}.hud-tools .hint-btn span{font-size:10px}.hud-tools .hint-btn svg{width:17px}.tools-popover{bottom:calc(91px + env(safe-area-inset-bottom));right:calc(5px + env(safe-area-inset-right))}.toast{bottom:7px;font-size:11px}.dialog{padding:14px}.dialog .hero-animals{height:82px}.dialog .hero-animals img{height:78px}.scene-grid{grid-template-columns:1fr}.scene-card{min-height:61px}.scene-card img{height:54px;width:76px}}
@media(max-width:360px){.hud{padding:3px}.target{min-width:60px}.target img{width:48px}.hud-tools{grid-template-columns:32px 32px}.progress{min-width:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* V6 · gentle decorative UI, source: Kenney CC0 UI Pack 2.0 */
:root{--dock:108px;color:#365d4b}
.app{background:#b9dacf}
.hud{background:linear-gradient(160deg,#fffaf3 0%,#e8f6e9 100%);border-left:2px solid #fff9;box-shadow:-6px 0 30px #365a4830}
.hud-cap{display:flex;flex-direction:column;align-items:center;gap:2px}
.kenney-badge{width:23px;height:23px;object-fit:contain}
.hud-tools .hint-btn{background:linear-gradient(145deg,#ffeaa5,#f4c777)}
.scene-ribbon{position:absolute;z-index:2;left:11px;top:11px;max-width:calc(100% - 28px);display:flex;gap:7px;align-items:center;flex-wrap:wrap;pointer-events:none}
.scene-ribbon span{background:#fff9e9e8;color:#386d53;border-radius:999px;border:1px solid #fff8;padding:5px 10px;box-shadow:0 3px 13px #315b3925;font-size:11px;font-weight:850}
.scene-ribbon #scene-title{font-size:13px;background:#fffbe8f5}
.dialog{background:linear-gradient(155deg,#fffef8,#fff6e8 60%,#f4fce9);border:4px solid #fff}
.dialog .primary{background:#e88b61}
.dialog .primary:hover{background:#d87652}
.dialog button{transition:transform .12s ease,filter .12s ease}
.dialog button:active{transform:scale(.97)}
.dialog .primary{border-bottom:4px solid #c9674b}
.dialog .secondary{border-bottom:3px solid #c5ddc4}
.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.mode-choice{border:2px solid #d9e8d5;background:#fff;border-radius:19px;min-height:128px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px!important;color:#386450}
.mode-choice img{height:52px;width:60px;object-fit:contain}
.mode-choice strong{font-size:15px}.mode-choice small{font-size:12px;color:#648579;line-height:1.3}
.mode-choice.active{border-color:#71bc87;background:#edfbec;box-shadow:inset 0 0 0 1px #71bc87}
.difficulty-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.difficulty-picker button{min-height:37px;padding:8px 13px;background:#eff2e9;color:#467b67;border:2px solid transparent}
.difficulty-picker button.active{border-color:#e9b866;background:#fff1cf;color:#6e582c}
.reward-stars{display:flex;justify-content:center;gap:9px;margin:12px 0}.reward-stars img{width:49px;height:49px;object-fit:contain;animation:reward-pop .6s both}.reward-stars img:nth-child(2){animation-delay:.12s}.reward-stars img:nth-child(3){animation-delay:.24s}
@keyframes reward-pop{0%{transform:translateY(20px) scale(.3);opacity:0}80%{transform:translateY(-5px) scale(1.11)}100%{transform:scale(1);opacity:1}}
.found-sparkle{animation:found-sparkle .56s ease-out both;pointer-events:none}
@keyframes found-sparkle{0%{opacity:0;transform:scale(.5)}50%{opacity:1}100%{opacity:0;transform:scale(1.3)}}
.mode-summary{font-size:13px!important;max-width:460px;margin:6px auto!important}
.scene-card small .star-icon{height:13px;width:13px;vertical-align:middle}
@media(orientation:portrait),(max-width:649px){.scene-ribbon{top:7px;left:7px}.scene-ribbon span{font-size:10px;padding:4px 7px}.mode-choice{min-height:107px}.mode-choice img{height:40px}.reward-stars img{width:37px;height:37px}.kenney-badge{display:none}}

/* Kenney CC0 UI buttons, used only inside the modal; gameplay HUD remains compact. */
.dialog .primary{background-image:url('../assets/kenney/ui/button-yellow.png');background-size:100% 100%;background-color:#eab764;color:#624719;border:0;box-shadow:none}
.dialog .secondary{background-image:url('../assets/kenney/ui/button-green.png');background-size:100% 100%;background-color:#28a574;color:#fff;border:0;box-shadow:none}
.dialog .primary:hover,.dialog .secondary:hover{filter:brightness(1.06)}