/* Four actual acting poses; the floating tool scene has no panel or header. */
.actor-pose { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:none; user-select:none; }
.cartoon-tool-fx { position:absolute; left:9px; right:9px; height:250px; z-index:45; display:none; pointer-events:none; }
.cartoon-tool-fx.show { display:block; }
.ct-spotlight { position:absolute; inset:-12px -5px 0; background:radial-gradient(ellipse,#e5f1c8ef 8%,#c8eea4b8 47%,transparent 73%); }
.ct-actor { position:absolute; left:-9px; bottom:18px; height:calc(100% - 20px); aspect-ratio:4/5; z-index:3; transform-origin:45% 95%; }
.ct-actor-placeholder { background:#c8eea4; }
.ct-actor-placeholder .actor-pose { mix-blend-mode:multiply; }
.cartoon-tool-fx[data-phase="intro"] .pose-boast { display:block; }
.cartoon-tool-fx[data-phase="action"] .pose-shout { display:block; }
.cartoon-tool-fx:is([data-phase="result"],[data-phase="exit"]) .pose-panic { display:block; animation:ct-panic-out .35s step-end both; }
.cartoon-tool-fx:is([data-phase="result"],[data-phase="exit"]) .pose-flop { display:block; animation:ct-flop-in .35s step-end both; }
.cartoon-tool-fx[data-phase="action"] .ct-actor { animation:ct-shove 1.05s ease-in-out both; }
.cartoon-tool-fx:is([data-phase="result"],[data-phase="exit"]) .ct-actor { animation:ct-recoil .6s ease-out both; }
.ct-speech { position:absolute; top:2px; left:104px; right:4px; min-height:38px; z-index:6; display:grid; place-items:center; padding:5px 9px; border:2px solid #403c30; border-radius:15px 15px 15px 3px; background:#fffceb; color:#3f4e30; box-shadow:0 2px 0 #83945f44; text-align:center; }
.ct-speech::before { content:''; position:absolute; left:8px; bottom:-9px; width:11px; height:11px; border:2px solid #403c30; border-width:0 0 2px 2px; background:#fffceb; transform:skewY(-25deg); }
.ct-speech b { font-size:20px; line-height:25px; font-weight:900; }
.ct-speech .ct-shout,.ct-speech .ct-after { display:none; }
.ct-speech .ct-after { font-size:12px; line-height:17px; font-weight:750; }
.cartoon-tool-fx[data-phase="action"] .ct-before { display:none; }
.cartoon-tool-fx[data-phase="action"] .ct-shout { display:block; }
.cartoon-tool-fx:is([data-phase="result"],[data-phase="exit"]) .ct-before { display:none; }
.cartoon-tool-fx:is([data-phase="result"],[data-phase="exit"]) .ct-after { display:block; }
.ct-props { position:absolute; top:49px; left:132px; right:5px; bottom:26px; z-index:2; }
.ct-card { position:absolute; left:calc(50% - 24px); top:16px; width:48px; height:62px; display:grid; grid-template-rows:40px 14px; justify-items:center; padding:3px 2px; border:1.5px solid #7d8f5d; border-radius:6px; background:#fffdf3; box-shadow:0 3px 0 #91a76c; transform:translateX(var(--x0)); }
.ct-card img { width:40px; height:40px; object-fit:contain; mix-blend-mode:multiply; }
.ct-card b { color:#2f713b; font-size:10px; line-height:14px; white-space:nowrap; }
.cartoon-tool-fx[data-tool="bomb"][data-phase="action"] .ct-card { animation:ct-card-pop 1.05s ease-in-out both; }
.cartoon-tool-fx:is([data-tool="bomb"],[data-tool="stash"]):is([data-phase="result"],[data-phase="exit"]) .ct-card { visibility:hidden; }
.ct-poof { position:absolute; inset:13px 6px 0; opacity:0; z-index:4; }
.ct-poof i { position:absolute; left:10%; top:10%; width:60%; height:65%; border:2px solid #6b7851; border-radius:50%; background:#fffbe6; }
.ct-poof i:nth-child(2) { left:35%; top:20%; width:55%; }
.ct-poof i:nth-child(3) { left:30%; top:0; width:42%; }
.ct-poof b { position:absolute; left:30%; top:21%; color:#a7442e; font:900 28px/1.2 'Microsoft JhengHei',sans-serif; transform:rotate(-12deg); }
.cartoon-tool-fx[data-phase="action"] .ct-poof { animation:ct-poof .9s .35s ease-out both; }
.ct-folder { position:absolute; right:4px; bottom:0; width:94px; height:64px; border:3px solid #614c32; border-radius:5px 9px 10px 10px; background:#cba565; z-index:5; }
.ct-folder::before { content:''; position:absolute; left:-3px; top:-11px; width:39px; height:11px; border:3px solid #614c32; border-bottom:0; border-radius:6px 6px 0 0; background:#cba565; }
.ct-folder i { position:absolute; inset:11px -3px -3px; border:3px solid #614c32; border-radius:6px 6px 9px 9px; background:#eed69b; }
.ct-folder b { position:absolute; inset:25px 0 0; text-align:center; color:#79552b; font-size:15px; line-height:20px; }
.cartoon-tool-fx[data-tool="stash"][data-phase="action"] .ct-card { animation:ct-file-away 1.05s ease-in-out both; }
.cartoon-tool-fx[data-tool="stash"][data-phase="action"] .ct-folder { animation:ct-folder-snap 1.05s ease-out both; }
.cartoon-tool-fx[data-tool="stash"] .ct-poof { inset:auto -3px -3px auto; width:110px; height:80px; }
.cartoon-tool-fx[data-tool="shuffle"][data-phase="action"] .ct-card { animation:ct-whirl 1.05s ease-in-out both; }
.cartoon-tool-fx[data-tool="shuffle"]:is([data-phase="result"],[data-phase="exit"]) .ct-card { transform:translateX(var(--x1)); }
.ct-wind { position:absolute; left:5%; right:5%; top:-2px; height:100%; border:4px solid #e5f7c7; border-left-color:#6da882; border-right-color:#6da882; border-radius:50%; opacity:0; }
.cartoon-tool-fx[data-tool="shuffle"][data-phase="action"] .ct-wind { animation:ct-wind 1.05s ease-out both; }
.ct-chips { position:absolute; left:50%; top:45%; z-index:5; }
.ct-chips i { position:absolute; width:11px; height:15px; border:2px solid #fff4cd; background:var(--topic); border-radius:3px; opacity:0; }
.ct-chips i:nth-child(1){--dx:-65px;--dy:-25px}.ct-chips i:nth-child(2){--dx:-38px;--dy:35px}.ct-chips i:nth-child(3){--dx:-12px;--dy:-42px}.ct-chips i:nth-child(4){--dx:18px;--dy:34px}.ct-chips i:nth-child(5){--dx:43px;--dy:-35px}.ct-chips i:nth-child(6){--dx:65px;--dy:19px}
.cartoon-tool-fx[data-tool="bomb"][data-phase="action"] .ct-chips i { animation:ct-chip 1.05s ease-out both; }
.ct-result { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:5px; margin:0; color:#376c35; font-size:12px; line-height:22px; font-weight:800; text-shadow:0 1px #f5ffdf,1px 0 #f5ffdf,-1px 0 #f5ffdf,0 -1px #f5ffdf; }
.ct-result img { width:23px; height:23px; object-fit:contain; }
.cartoon-tool-fx[data-phase="exit"] { opacity:0; transition:opacity .2s; }
#app[data-chapter-tool-fx="stash"] .stash-bar { outline:2px solid #ad8344; outline-offset:1px; }
.cartoon-tool-fx[data-reduced="true"] * { animation:none!important; }
.cartoon-tool-fx[data-reduced="true"] .pose-panic { display:none; }
.chapter-tray-burst { position:absolute; pointer-events:none; }
.chapter-tray-burst i { position:absolute; width:7px; height:10px; border:1px solid #fff7df; border-radius:2px; background:var(--topic); }
@keyframes ct-shove {0%{transform:translateX(-6px) rotate(-6deg)}30%{transform:translateX(12px) rotate(5deg)}52%{transform:translateX(8px) rotate(0)}70%{transform:translateX(13px) rotate(4deg)}100%{transform:translateX(3px)}}
@keyframes ct-recoil {0%{transform:translateX(4px) translateY(-6px) rotate(-6deg)}50%{transform:translateX(-15px) translateY(9px) rotate(-10deg)}100%{transform:translateX(-10px) translateY(5px) rotate(-5deg)}}
@keyframes ct-panic-out {0%,99%{opacity:1}100%{opacity:0}}
@keyframes ct-flop-in {0%,99%{opacity:0}100%{opacity:1}}
@keyframes ct-card-pop {0%,20%{transform:translateX(var(--x0));opacity:1}50%{transform:translateX(0) translateY(7px) scale(1.12);opacity:1}100%{transform:translateX(var(--x0)) translateY(-30px) rotate(25deg) scale(.25);opacity:0}}
@keyframes ct-poof {0%{opacity:0;transform:scale(.2)}35%{opacity:1;transform:scale(1.2)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
@keyframes ct-file-away {0%,15%{left:calc(50% - 24px);top:16px;transform:translateX(var(--x0));opacity:1}75%{left:calc(100% - 75px);top:calc(100% - 75px);transform:translateY(8px) scale(.7);opacity:1}100%{left:calc(100% - 75px);top:calc(100% - 65px);transform:translateY(12px) scale(.5);opacity:0}}
@keyframes ct-folder-snap {0%,60%{transform:rotate(0)}70%{transform:rotate(-9deg) scale(1.1)}83%{transform:rotate(7deg)}100%{transform:rotate(0)}}
@keyframes ct-whirl {0%{transform:translateX(var(--x0))}33%{transform:translateX(0) translateY(-32px) rotate(-75deg)}66%{transform:translateX(var(--x1)) translateY(24px) rotate(65deg)}100%{transform:translateX(var(--x1))}}
@keyframes ct-wind {0%{opacity:0;transform:rotate(0) scale(.5)}25%{opacity:1}70%{opacity:1}100%{opacity:0;transform:rotate(300deg) scale(1.1)}}
@keyframes ct-chip {0%,52%{opacity:0;transform:translate(0,0)}55%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(110deg)}}

/* The short film is a timed cartoon world, not a speaking portrait in a box. */
.forest-film { --film-offset:0ms; position:relative; height:270px; overflow:hidden; border:2px solid #92ad78; border-radius:17px; background:linear-gradient(#c8e6ed 0%,#e5f5dd 65%,#b7d779 65%,#d5e99a); isolation:isolate; }
.forest-world { position:absolute; inset:0; transform-origin:50% 75%; animation-name:forest-camera; }
.forest-cloud { position:absolute; top:9%; width:53px; height:17px; border-radius:50%; background:#ffffffb8; animation-name:forest-cloud-drift; }
.forest-cloud::before { content:''; position:absolute; top:-9px; left:13px; width:26px; height:22px; border-radius:50%; background:inherit; }
.cloud-a { left:5%; }.cloud-b { right:5%; top:17%; transform:scale(.75); }
.forest-hill { position:absolute; left:-10%; right:-10%; top:60%; height:50%; background:#c8e89c; border-radius:50% 55% 0 0; }
.forest-soil { position:absolute; left:70%; bottom:18%; width:92px; height:33px; border:3px solid #8b7044; border-radius:50%; background:#c8a577; transform:translateX(-50%); }
.forest-tree { position:absolute; left:70%; bottom:28%; width:78px; height:100px; transform:translateX(-50%); opacity:.45; animation-name:forest-expect; }
.forest-tree i { position:absolute; left:0; top:17px; width:51px; height:49px; border:3px dashed #7c9a58; border-radius:50%; background:#c4e29388; }
.forest-tree i:nth-child(2){left:27px;top:20px}.forest-tree i:nth-child(3){left:18px;top:0;width:46px}
.forest-tree b { position:absolute; left:34px; top:57px; width:10px; height:43px; border:2px dashed #8e9a65; border-top:0; }
.forest-actor { position:absolute; left:1%; bottom:2%; height:92%; aspect-ratio:4/5; transform-origin:43% 96%; animation-name:forest-acting; z-index:3; }
.forest-film[data-beat="0"] .pose-boast,.forest-film[data-beat="1"] .pose-shout,.forest-film[data-beat="2"] .pose-panic,.forest-film[data-beat="3"] .pose-flop { display:block; }
.forest-words { position:absolute; left:34%; top:52%; z-index:4; }
.forest-words b { position:absolute; left:0; top:0; white-space:nowrap; font-size:20px; line-height:26px; color:#fff9dc; font-weight:950; -webkit-text-stroke:1px #806b42; paint-order:stroke fill; text-shadow:1px 2px #7b774855; opacity:0; }
.forest-words b:nth-child(1){animation-name:forest-word-one}.forest-words b:nth-child(2){animation-name:forest-word-two}.forest-words b:nth-child(3){animation-name:forest-word-three}
.forest-paper { position:absolute; left:70%; bottom:23%; width:25%; max-width:96px; height:40%; border:3px solid #806137; border-radius:3px 12px 4px 4px; background:#fff5d5; box-shadow:4px 4px 0 #8e774e33; transform:translateX(-50%) scaleY(0); transform-origin:50% 100%; opacity:0; animation-name:forest-paper-grow; z-index:2; }
.forest-paper i { position:absolute; right:-3px; top:-3px; width:20px; height:19px; border:3px solid #806137; border-top:0; border-right:0; border-radius:0 8px 0 5px; background:#e5cf98; }
.forest-paper b { position:absolute; left:50%; top:16%; transform:translateX(-50%); writing-mode:vertical-rl; font-size:18px; line-height:22px; letter-spacing:3px; color:#89602d; }
.forest-paper span { position:absolute; left:12px; right:12px; bottom:12px; height:3px; background:#d4bf87; }.forest-paper span:last-child{bottom:5px}
.forest-dust { position:absolute; left:52%; bottom:15%; width:38%; height:31%; opacity:0; transform-origin:50% 100%; animation-name:forest-dust-pop; z-index:4; }
.forest-dust i { position:absolute; left:0; bottom:0; width:55%; height:55%; border:2px solid #9ba774; border-radius:50%; background:#f8efcf; }.forest-dust i:nth-child(2){left:35%;height:70%}.forest-dust i:nth-child(3){left:25%;bottom:20%;height:65%}
.forest-prize { position:absolute; left:86%; bottom:26px; width:63px; height:62px; display:grid; justify-items:center; transform:translateX(-50%); opacity:0; animation-name:forest-prize-drop; z-index:5; }
.forest-prize img { width:43px; height:43px; object-fit:contain; filter:drop-shadow(0 2px 0 #fff5d5); }.forest-prize b{padding:0 5px;border-radius:9px;background:#fff7d8;color:#537735;font-size:10px;line-height:15px;white-space:nowrap}
.forest-film .forest-caption { position:absolute; left:5px; right:5px; bottom:3px; z-index:6; margin:0; color:#3d6238; font-size:14px; line-height:20px; text-align:center; font-weight:850; text-shadow:0 1px #f5ffdd,1px 0 #f5ffdd,-1px 0 #f5ffdd; }
.forest-world,.forest-cloud,.forest-tree,.forest-actor,.forest-words b,.forest-paper,.forest-dust,.forest-prize { animation-duration:8000ms; animation-timing-function:linear; animation-delay:var(--film-offset); animation-fill-mode:both; animation-play-state:paused; }
.film-reward-note { display:flex; justify-content:center; align-items:center; gap:6px; }.film-reward-note img{width:25px;height:25px;object-fit:contain}
.modal:has(.forest-film) { padding:12px 13px; }
.modal:has(.forest-film) h2 { font-size:22px; margin:2px 0 8px; }
.modal:has(.forest-film) .film-reward-note { margin:7px 0 0; font-size:11px; line-height:16px; }
.modal:has(.forest-film) .short-progress { margin-top:8px; height:5px; }
.modal:has(.forest-film) .modal-actions .btn { min-height:40px; margin-top:6px; padding:8px; }
.modal:has(.forest-film) .modal-actions .btn:last-child { min-height:30px; padding:3px 8px; border:0; background:none; box-shadow:none; font-size:11px; color:#81916b; }
@keyframes forest-camera {0%,51%{transform:none}52.5%{transform:translate(2px,0) rotate(.5deg)}54%{transform:translate(-2px,1px) rotate(-.5deg)}56%,100%{transform:none}}
@keyframes forest-cloud-drift {from{translate:-4px 0}to{translate:7px 0}}
@keyframes forest-expect {0%,50%{opacity:.45}54%,100%{opacity:0}}
@keyframes forest-acting {0%,24.9%{transform:none}25%{transform:translateX(5px) rotate(3deg)}29%{transform:translateX(0) rotate(-2deg)}33%{transform:translateX(5px) rotate(3deg)}37%{transform:translateX(0) rotate(-2deg)}41%{transform:translateX(5px) rotate(3deg)}45%{transform:translateX(0) rotate(-2deg)}49%{transform:translateX(5px) rotate(3deg)}52.5%{transform:translate(-8px,-13px) rotate(-9deg)}58%{transform:translate(-13px,0) rotate(-4deg)}74.9%{transform:translate(-8px,0) rotate(-3deg)}75%{transform:translate(-14px,7px) rotate(-7deg)}83%,100%{transform:translate(-11px,5px) rotate(-4deg)}}
@keyframes forest-word-one {0%,24.9%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(.6)}41%{opacity:1;transform:translate(105px,48px) rotate(12deg) scale(1.05)}43%,100%{opacity:0;transform:translate(105px,48px) scale(.3)}}
@keyframes forest-word-two {0%,30.9%{opacity:0;transform:scale(.4)}31%{opacity:1;transform:scale(.6)}47%{opacity:1;transform:translate(100px,45px) rotate(-10deg) scale(1.05)}49%,100%{opacity:0;transform:translate(100px,45px) scale(.3)}}
@keyframes forest-word-three {0%,35.9%{opacity:0;transform:scale(.4)}36%{opacity:1;transform:scale(.6)}51%{opacity:1;transform:translate(106px,49px) rotate(8deg) scale(1.05)}53%,100%{opacity:0;transform:translate(106px,49px) scale(.3)}}
@keyframes forest-paper-grow {0%,52%{opacity:0;transform:translateX(-50%) scaleY(0)}53%{opacity:1;transform:translateX(-50%) scaleY(.08)}65%{opacity:1;transform:translateX(-50%) scaleY(1.12) rotate(4deg)}70%{opacity:1;transform:translateX(-50%) scaleY(1) rotate(-3deg)}75%,100%{opacity:1;transform:translateX(-50%) scaleY(1) rotate(2deg)}}
@keyframes forest-dust-pop {0%,51.9%{opacity:0;transform:scale(.1)}52%{opacity:1;transform:scale(.4)}58%{opacity:1;transform:scale(1)}65%,100%{opacity:0;transform:scale(1.2)}}
@keyframes forest-prize-drop {0%,87.4%{opacity:0;transform:translate(-50%,-70px) scale(.4)}87.5%{opacity:1;transform:translate(-50%,-55px) scale(.5)}94%{opacity:1;transform:translate(-50%,4px) scale(1.12)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
.forest-film[data-reduced="true"] * { animation:none!important; }
.forest-film[data-reduced="true"][data-beat="1"] .forest-words b { opacity:1; position:relative; display:block; font-size:15px; line-height:19px; }
.forest-film[data-reduced="true"]:is([data-beat="2"],[data-beat="3"]) .forest-tree{opacity:0}
.forest-film[data-reduced="true"]:is([data-beat="2"],[data-beat="3"]) .forest-paper{opacity:1;transform:translateX(-50%) scaleY(1)}
.forest-film[data-reduced="true"][data-prize="true"] .forest-prize{opacity:1}
@media(max-height:700px) { .forest-film{height:190px}.forest-film .forest-caption{font-size:12px;line-height:17px}.forest-paper b{font-size:15px;line-height:18px;letter-spacing:2px}.forest-prize{width:50px;height:48px}.forest-prize img{width:31px;height:31px}.forest-prize b{font-size:8px;line-height:12px} }
@media(max-width:360px) { .ct-speech{left:95px;right:0}.ct-speech b{font-size:17px;line-height:22px}.ct-speech .ct-after{font-size:11px;line-height:16px}.ct-props{left:123px;right:0}.ct-card b{font-size:9.5px}.ct-result{font-size:10px}.ct-result img{width:20px;height:20px}.modal:has(.forest-film){padding:10px}.modal:has(.forest-film) h2{font-size:20px;margin-bottom:6px} }