:root{--ink:#294b50;--muted:#6a8180;--cream:#f8f4e9;--paper:#fffdf7;--line:#dde8d8;--green:#2f8b72;--yellow:#f8c772;--salmon:#e98271}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden}body{font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;color:var(--ink);background:#cde6d9}button,select,input{font:inherit}button{cursor:pointer;border:0;touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #187aa2;outline-offset:3px}button:disabled{opacity:.5;cursor:default}.app{height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);max-width:1600px;margin:auto;background:var(--cream);box-shadow:0 0 70px #345c4a35}.topbar{height:72px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--paper);border-bottom:2px solid var(--line);padding:8px 18px}.identity{display:flex;align-items:center;gap:11px;min-width:0}.app-icon{width:47px;height:47px;border-radius:15px;flex:none}.identity strong{display:block;font-size:clamp(17px,2vw,25px);line-height:1.05;letter-spacing:-.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.identity small{display:block;font-size:10px;letter-spacing:1.6px;color:var(--green);font-weight:900;margin-top:4px}.top-actions{display:flex;align-items:center;gap:8px;flex:none}.time-pill{display:flex;align-items:center;gap:5px;background:#e4f4e7;border:2px solid #c8e8d6;border-radius:16px;padding:8px 11px;font-size:17px;min-width:100px;justify-content:center}.time-pill svg,.icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.icon-button{width:46px;height:46px;border-radius:15px;background:#eef4ee;color:#426a63;display:grid;place-items:center}.icon-button.active{background:#d6eee0;color:#25795a}.parent-icon{background:#fff0d2;color:#805e31}.main-layout{flex:1;min-height:0;display:flex;padding:11px;gap:11px}.targets{width:220px;flex:none;background:var(--paper);border:2px solid var(--line);border-radius:24px;display:flex;flex-direction:column;padding:16px;overflow:auto}.scene-heading small{font-size:10px;font-weight:950;color:var(--green);letter-spacing:2px}.scene-heading h1{font-size:clamp(19px,2vw,25px);line-height:1.1;margin:7px 0;color:#2e6266}.scene-heading>span{font-size:11px;font-weight:900;color:#7b928c}.target-intro{font-size:12px;font-weight:750;color:var(--muted);margin:17px 0 10px}.target-list{display:grid;gap:8px}.target{display:flex;align-items:center;gap:10px;background:#f4f4e9;border-radius:16px;min-height:69px;padding:6px 10px;border:2px solid #e9ead8}.target img{width:50px;height:48px;object-fit:contain}.target-info{display:flex;flex-direction:column;line-height:1.15}.target-info b{font-size:15px}.target-info span{font-size:13px;color:#6b827c;margin-top:5px;font-weight:800}.target.done{background:#e1f5e8;border-color:#aedcbd}.target-progress{margin-top:auto;padding-top:16px}.progress-label{display:flex;justify-content:space-between;font-size:12px;font-weight:800;gap:5px}.progress-label b{font-size:15px}.progress-track{height:12px;background:#e8e6d6;border-radius:12px;overflow:hidden;margin-top:8px}.progress-track>div{height:100%;width:0;background:#63b88c;transition:width .25s}.soft-button{background:#eaf2e9;color:#41685a;border-radius:13px;padding:11px;font-weight:900;margin-top:13px;text-align:left;min-height:45px}.button-icon{font-size:21px;margin-right:8px}.play-area{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;border:5px solid var(--paper);border-radius:25px;background:#b2dcc8;box-shadow:0 8px 28px #4968551f}.viewport{position:absolute;inset:0;touch-action:none;user-select:none;cursor:grab}.viewport.dragging{cursor:grabbing}#scene-svg{width:100%;height:100%;display:block;pointer-events:none}.scene-chip{position:absolute;top:12px;left:12px;background:#fffdf0ec;border:2px solid white;border-radius:13px;padding:7px 13px;font-size:13px;font-weight:900;pointer-events:none;box-shadow:0 4px 12px #3b624831}.zoom-controls{position:absolute;right:12px;top:12px;display:grid;gap:6px}.zoom-controls button{width:43px;height:43px;border-radius:13px;background:#fffdf0ed;color:var(--green);border:2px solid white;font-size:25px;font-weight:900;box-shadow:0 4px 12px #345a4933}.hint-ring{position:absolute;border:5px solid #f79c64;width:100px;height:100px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 0 9px #fff8d688;animation:pulse 1s ease-in-out 4}@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.28);opacity:.7}}.toast{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);background:#fffdf5;box-shadow:0 5px 20px #355b493c;border:2px solid #eddbbd;border-radius:16px;padding:9px 16px;font-size:15px;font-weight:900;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap;max-width:95%}.toast.show{opacity:1}.animal-image{filter:drop-shadow(0 5px 4px #526c5355);transition:filter .2s}.animal-found{filter:drop-shadow(0 0 10px #fff4a7)}.toolbar{height:68px;flex:none;display:flex;align-items:center;gap:9px;padding:8px 16px;background:var(--paper);border-top:2px solid var(--line)}.tool{border-radius:14px;padding:10px 17px;min-height:47px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:900}.tool span:first-child{font-size:23px;line-height:1}.tool.primary{background:var(--yellow);color:#674d28}.tool.secondary{background:#e9f3eb;color:#416858}.toolbar-note{margin-left:auto;font-weight:700;color:#8a9b8c;font-size:12px}.mobile-speak{display:none}.overlay{position:fixed;inset:0;z-index:30;background:#234648a9;display:grid;place-items:center;padding:16px;overflow:auto;backdrop-filter:blur(5px)}[hidden]{display:none!important}.dialog{background:#fffdf7;border:5px solid #fff;border-radius:28px;width:min(640px,100%);max-height:min(94dvh,800px);overflow:auto;padding:22px;box-shadow:0 24px 70px #15373d88;text-align:center}.dialog h2{font-size:clamp(25px,4vw,36px);margin:4px 0 9px;color:#2f6266;letter-spacing:-1px}.dialog p{margin:0 0 15px;color:#6b837c;font-weight:700;line-height:1.4}.dialog .hero-animals{display:flex;justify-content:center;gap:2px;height:110px}.hero-animals img{width:100px;max-width:30%;object-fit:contain}.dialog .eyebrow{color:var(--green);font-size:11px;font-weight:950;letter-spacing:2px}.dialog-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:18px}.dialog button{border-radius:14px;padding:12px 18px;font-weight:900;min-height:48px}.dialog .primary{background:#e98e71;color:#fff}.dialog .secondary{background:#e7f2e8;color:#376755}.scene-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;text-align:left}.scene-card{display:flex;align-items:center;gap:10px;background:#f1f5e8;border:2px solid #dbe8d5;min-height:86px;text-align:left!important;padding:8px!important}.scene-card img{width:86px;height:62px;object-fit:cover;border-radius:9px}.scene-card strong{display:block;font-size:14px}.scene-card small{display:block;color:#6c8077;margin-top:4px}.scene-card.locked{opacity:.6}.scene-card.current{border-color:#64b391}.parent-panel{text-align:left}.parent-panel label{display:block;font-weight:850;margin:14px 0}.parent-panel select,.parent-panel input{border:2px solid #cbded0;border-radius:11px;padding:10px;background:white;width:100%;font-size:17px}.parent-panel .toggle-line{display:flex;justify-content:space-between;align-items:center}.parent-panel .toggle-line input{width:25px;height:25px}.parent-panel .summary{background:#eaf5eb;border-radius:16px;padding:12px;line-height:1.5;font-weight:700}.parent-panel .summary small{display:block;font-size:12px}.parent-panel .danger{background:#f9e6df;color:#a35446}.parent-panel .error{color:#b34735;min-height:18px}.rotate-hint{position:fixed;inset:0;z-index:50;background:#fff9e9;text-align:center;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}.rotate-hint .rotate-art{font-size:90px;color:#5b9c7d}.rotate-hint strong{font-size:25px}.rotate-hint button{background:#def0e2;padding:13px 17px;border-radius:14px;margin-top:14px;color:var(--ink);font-weight:850}@media(max-width:850px){.targets{width:176px;padding:11px}.target{min-height:56px}.target img{width:41px;height:41px}.scene-heading h1{font-size:19px}.toolbar-note{display:none}.identity small{display:none}}@media(max-height:650px){.topbar{height:54px}.app-icon{width:37px;height:37px}.icon-button{width:39px;height:39px}.main-layout{padding:6px;gap:6px}.targets{padding:9px}.target-intro{margin:7px 0 5px}.target-list{gap:4px}.target{min-height:47px;padding:2px 5px}.target img{width:39px;height:39px}.target-info b{font-size:13px}.target-info span{margin-top:1px;font-size:11px}.target-progress{padding-top:6px}.soft-button{margin-top:5px;padding:6px;min-height:33px;font-size:11px}.toolbar{height:52px;padding:4px 8px}.tool{min-height:39px;padding:6px 10px}.dialog{padding:15px}.dialog .hero-animals{height:70px}.dialog .hero-animals img{width:75px}}@media(max-width:600px){.identity strong{font-size:15px}.app-icon{width:34px;height:34px}.topbar{padding:4px 7px}.top-actions{gap:4px}.time-pill{font-size:13px;min-width:72px;padding:7px 5px}.time-pill svg{width:16px;height:16px}.icon-button{width:36px;height:36px}.targets{display:none}.mobile-speak{display:flex}.toolbar{justify-content:space-around}.tool{font-size:11px;gap:3px;padding:6px 8px;flex-direction:column}.tool span:first-child{font-size:18px}.scene-chip{font-size:11px}.scene-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}