.mission{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:var(--bg);--block-size: clamp(64px, 9vmin, 84px);--plan-block-size: clamp(60px, 8vmin, 72px)}.mission-header{display:flex;align-items:center;gap:.75rem;padding:.6rem .8rem;background:#fff9}.mission-back{min-width:64px;min-height:48px;padding:.4rem .9rem;border-radius:999px;background:#fff;font-weight:700;box-shadow:0 2px 0 var(--shadow)}.mission-speak{flex:1;text-align:left;padding:.5rem .9rem;border-radius:12px;background:#fff;font-size:1.05rem;min-height:48px;box-shadow:0 2px 0 var(--shadow)}.mission-stage{flex:1 1 auto;min-height:38vh;display:flex;align-items:center;justify-content:center;padding:.4rem;container-type:size}.mission-canvas{width:min(100cqw,100cqh * 4 / 3,720px);height:min(100cqh,100cqw * 3 / 4,540px);display:flex;align-items:center;justify-content:center}.mission-canvas canvas{border-radius:18px;box-shadow:0 6px 0 var(--shadow);width:100%;height:100%}.mission-controls{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:start;padding:.8rem;background:#ffffff8c;flex:0 1 auto;max-height:48vh;min-height:0;overflow-y:auto}.palette{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,var(--block-size));gap:.5rem;align-self:start;align-content:start}.palette-block{min-width:var(--block-size);height:var(--block-size);padding:.3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;background:#fff;border-radius:16px;box-shadow:0 4px 0 var(--shadow);font-weight:700;transition:transform .08s ease}.palette-block[disabled]{opacity:.5;pointer-events:none}.palette-block:active{transform:translateY(2px);box-shadow:0 2px 0 var(--shadow)}.palette-block[data-kind=forward]{background:#cce8ff}.palette-block[data-kind=turn_right]{background:#ffe5b3}.palette-block[data-kind=turn_left]{background:#ffe0c2}.palette-block[data-kind=jump]{background:#c9efb8}.palette-block[data-kind=back_step]{background:#ffd6d6}.palette-block[data-kind=shoo]{background:#d8c8f0}.palette-block-icon{font-size:2.1rem;line-height:1}.palette-block-label{font-size:1.05rem}.plan-wrapper{background:#fff;border-radius:16px;padding:.6rem;box-shadow:inset 0 2px 6px #00000014;min-height:clamp(96px,18vh,170px);max-height:clamp(140px,26vh,220px);overflow-y:auto;align-self:start}.plan{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}.plan-empty{color:#777;text-align:center;padding:1rem .5rem;font-size:1rem;width:100%}.plan-block{position:relative;width:var(--plan-block-size);height:var(--plan-block-size);background:#f6efe2;border-radius:14px;box-shadow:0 2px 0 var(--shadow);font-weight:700;-webkit-user-select:none;user-select:none;touch-action:none;animation:plan-add .22s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding-top:10px;transition:transform .12s ease}@keyframes plan-add{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.plan-block-step{position:absolute;top:3px;left:4px;background:#fff;border-radius:999px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.62rem}.plan-block-icon{font-size:1.5rem;line-height:1}.plan-block-label{font-size:.68rem}.plan-block-delete{position:absolute;top:2px;right:2px;width:24px;height:24px;border-radius:50%;background:var(--danger);color:#fff;font-size:.7rem;font-weight:700;box-shadow:0 1px #0003;display:flex;align-items:center;justify-content:center;line-height:1}.plan-block--dragging{z-index:6;box-shadow:0 8px 0 var(--shadow),0 0 16px #0000002e;background:#fff7e0}.mission-play{min-width:110px;align-self:stretch;min-height:100%;padding:1rem;border-radius:18px;background:var(--play);color:#fff;font-size:1.6rem;font-weight:800;box-shadow:0 4px 0 var(--play-strong);transition:transform .08s ease}.mission-play[disabled]{opacity:.55}.mission-play:not([disabled]):active{transform:translateY(2px);box-shadow:0 2px 0 var(--play-strong)}@media (orientation: landscape){.mission{display:grid;grid-template-columns:1fr clamp(220px,30%,340px);grid-template-rows:auto 1fr;grid-template-areas:"header header" "stage controls";min-height:0}.mission-header{grid-area:header}.mission-stage{grid-area:stage;min-height:0}.mission-controls{grid-area:controls;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;align-items:stretch;max-height:none;height:100%}.palette{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(var(--block-size),1fr));grid-template-rows:none}.plan-wrapper{min-height:0;max-height:none}.mission-play{align-self:stretch;min-height:clamp(64px,9vh,110px)}}.mission-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:10;animation:overlay-in .2s ease}.mission-overlay-card{background:#fff;border-radius:24px;padding:1.8rem 2.2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;box-shadow:0 8px 0 var(--shadow)}.mission-overlay-title{font-size:1.8rem;font-weight:800}.mission-overlay-cta{min-height:64px;min-width:200px;padding:.9rem 1.6rem;border-radius:999px;background:var(--accent);color:var(--ink);font-size:1.3rem;font-weight:700;box-shadow:0 4px 0 var(--accent-strong)}.zoo{position:relative;width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column}.zoo-sky{position:absolute;top:0;right:0;bottom:40%;left:0;background:linear-gradient(to bottom,#b8e0ff 0%,#d8f0ff 80%,transparent 100%)}.zoo-ground{position:absolute;top:50%;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#6cbf52,#4a9a36)}.zoo-header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;z-index:4}.zoo-header-actions{display:flex;align-items:center;gap:.6rem}.zoo-reset{height:56px;padding:0 1.1rem;border-radius:999px;background:#ffffffbf;font-size:1rem;font-weight:700;color:var(--ink);box-shadow:0 3px 0 var(--shadow)}.zoo-title{margin:0;font-size:clamp(1.6rem,4vw,2.4rem);color:var(--ink);text-shadow:2px 2px 0 rgba(255,255,255,.6)}.zoo-mute{width:56px;height:56px;border-radius:50%;background:#ffffffbf;font-size:1.8rem;box-shadow:0 3px 0 var(--shadow)}.zoo-empty{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;margin-top:4vh;padding:1rem 1.5rem;background:#ffffffb3;border-radius:1rem;align-self:center;font-size:1.3rem}.zoo-stage{position:relative;flex:1;z-index:2;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:.6rem 1.4rem;padding:.8rem .8rem 1.2rem}.zoo-cluster{position:relative;flex:0 0 auto}.zoo-animal{position:absolute;border-radius:16px;display:flex;align-items:center;justify-content:center;background:transparent;transform:translate(-50%,-50%);transition:transform .18s ease;filter:drop-shadow(2px 4px 0 rgba(0,0,0,.18))}.zoo-animal img{width:100%;height:100%;object-fit:contain;pointer-events:none}.zoo-animal:active{filter:drop-shadow(2px 2px 0 rgba(0,0,0,.18))}.zoo-animal--reacting{animation:zoo-bounce .55s ease}.zoo-animal--arrival{animation:zoo-arrival 1.4s ease}.zoo-animal--milestone{animation:zoo-milestone 1.8s ease;z-index:6}.zoo-animal-fallback{font-size:3rem;color:#fff;background:#888;width:100%;height:100%;border-radius:16px;display:flex;align-items:center;justify-content:center}@keyframes zoo-bounce{0%{transform:translate(-50%,-50%) scale(1)}30%{transform:translate(-50%,-56%) scale(1.15)}60%{transform:translate(-50%,-48%) scale(.95)}to{transform:translate(-50%,-50%) scale(1)}}@keyframes zoo-arrival{0%{transform:translate(-50%,-90%) scale(1.4);filter:drop-shadow(0 0 24px gold)}60%{transform:translate(-50%,-52%) scale(1.1);filter:drop-shadow(0 0 16px gold)}to{transform:translate(-50%,-50%) scale(1);filter:drop-shadow(2px 4px 0 rgba(0,0,0,.18))}}@keyframes zoo-milestone{0%{transform:translate(-50%,-120%) scale(1.7);filter:drop-shadow(0 0 30px gold)}40%{transform:translate(-50%,-45%) scale(1.25);filter:drop-shadow(0 0 22px gold)}70%{transform:translate(-50%,-52%) scale(1.08);filter:drop-shadow(0 0 14px gold)}to{transform:translate(-50%,-50%) scale(1);filter:drop-shadow(2px 4px 0 rgba(0,0,0,.18))}}.zoo-arrival-banner{position:absolute;top:5rem;left:50%;z-index:8;background:#fff8c8f5;color:var(--ink);padding:.7rem 1.3rem;border-radius:999px;font-size:clamp(1.1rem,3.4vw,1.4rem);font-weight:800;white-space:nowrap;box-shadow:0 4px 0 var(--shadow);transform:translate(-50%);animation:banner-pop .4s ease,banner-fade .5s ease 1.9s both}@keyframes banner-pop{0%{transform:translate(-50%) scale(.6);opacity:0}to{transform:translate(-50%) scale(1);opacity:1}}@keyframes banner-fade{to{opacity:0}}.zoo-controls{position:relative;z-index:5;padding:1rem 1.2rem 1.6rem;display:flex;align-items:center;justify-content:center}.zoo-cta{background:var(--accent);color:var(--ink);padding:1rem 2rem;border-radius:999px;font-size:1.4rem;font-weight:700;min-height:64px;min-width:64px;box-shadow:0 4px 0 var(--accent-strong);transition:transform .08s ease}.zoo-cta:active{transform:translateY(2px);box-shadow:0 2px 0 var(--accent-strong)}.zoo-complete{background:#ffffffd9;color:var(--ink);padding:.8rem 1.2rem;border-radius:999px;font-size:1.2rem;font-weight:700}.zoo-dialog-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:20;animation:overlay-in .18s ease}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.zoo-dialog-card{background:#fff;border-radius:24px;padding:2rem 2.2rem;display:flex;flex-direction:column;align-items:center;gap:1.4rem;box-shadow:0 8px 0 var(--shadow);max-width:340px;width:90%}.zoo-dialog-message{font-size:1.4rem;font-weight:700;text-align:center;line-height:1.35;margin:0;color:var(--ink)}.zoo-dialog-buttons{display:flex;flex-direction:column;gap:.75rem;width:100%}.zoo-dialog-confirm{min-height:64px;border-radius:999px;background:var(--danger);color:#fff;font-size:1.2rem;font-weight:700;box-shadow:0 4px #0003}.zoo-dialog-cancel{min-height:64px;border-radius:999px;background:#00000014;color:var(--ink);font-size:1.2rem;font-weight:700}:root{--bg: #c9e9b8;--bg-deep: #94c98c;--ink: #1d2b1a;--accent: #ffb74a;--accent-strong: #ff8b1f;--danger: #d96a3a;--play: #3a8c3a;--play-strong: #2a6c2a;--shadow: rgba(0, 0, 0, .18);font-family:Comic Sans MS,Chalkboard SE,Trebuchet MS,system-ui,sans-serif;font-size:clamp(16px,2.4vw,22px);color:var(--ink)}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}#root{display:flex;flex-direction:column}button{font:inherit;color:inherit;border:none;background:none;cursor:pointer;padding:0}.loading-screen{display:flex;align-items:center;justify-content:center;height:100%;font-size:2rem}