/* The Case of the Missing Picnic Basket. Reuses .mx-card / .mx-stage / .mx-hud from mystery.css.
   Stage units: 1cqw = 1% of the 16:9 stage width. Tokens always pair an icon with a word. */
.cs-card{max-width:min(1100px,calc((100svh - 450px) * 16 / 9));min-width:min(100%,640px)}
.cs-stage>*{position:absolute}
.cs-scene{inset:0;width:100%;height:100%;display:block}
.cs-waves path{animation:cs-wave 4s ease-in-out infinite}
.cs-waves path:nth-child(2n){animation-delay:-1.4s;animation-duration:5s}
.cs-waves path:nth-child(3n){animation-delay:-2.6s}
.cs-sparkles path{animation:mx-twinkle 2.6s ease-in-out infinite}
.cs-sparkles path:nth-child(2n){animation-delay:-1.2s}
.cs-clouds{animation:cs-cloud 40s linear infinite alternate}
.cs-canopy{transform-origin:1480px 400px;animation:cs-sway 6s ease-in-out infinite}
.cs-foam{animation:cs-foam 3.6s ease-in-out infinite}

/* Friends in the scene: same size language, same friendly face */
.cs-in-scene{z-index:3;border:0;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cs-in-scene :is(svg,img){width:100%;height:auto;display:block;filter:drop-shadow(0 .4cqw .4cqw #0004)}
.cs-in-scene:focus-visible{outline:.35cqw solid #fff;outline-offset:.3cqw;border-radius:1cqw}
.cs-at-otter{clip-path:inset(0 0 30% 0);animation:cs-bob 3s ease-in-out infinite}
.cs-at-otter::after,.cs-at-duck::after{content:'';position:absolute;left:5%;right:5%;bottom:30%;height:12%;border-radius:50%;border:.3cqw solid #e9f7ff;opacity:.7;animation:cs-ripple 3s ease-out infinite}
.cs-at-duck{animation:cs-bob 2.6s ease-in-out infinite}
.cs-at-duck{clip-path:inset(0 0 17% 0)}
.cs-at-duck::after{bottom:14%}
.cs-at-fox{animation:cs-breathe 4s ease-in-out infinite;transform-origin:50% 100%}
.cs-at-crab{animation:cs-scuttle 5s ease-in-out infinite}
.cs-in-scene.wiggle{animation:cs-hop .7s cubic-bezier(.3,1.6,.5,1)}
.cs-dragon{left:.5%;bottom:1%;height:36%;z-index:4;filter:drop-shadow(0 .5cqw .8cqw #0005);animation:mx-breathe 4.5s ease-in-out infinite;transform-origin:50% 100%}

/* The trail that links every clue to one visitor */
.cs-trail-glow{inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:0;transition:opacity .8s}
.cs-trail-glow polyline{stroke-width:max(.55cqw,5px);stroke-dasharray:max(1.6cqw,12px) max(1.1cqw,9px);filter:drop-shadow(0 0 .4cqw #ffe28a);animation:cs-march 1.6s linear infinite}
.show-trail .cs-trail-glow,.cs-phase-explore .cs-trail-glow{opacity:1}
.cs-phase-explore .cs-trail-glow{opacity:.6}

/* Clue magnifiers */
.cs-spot{z-index:5;width:max(7.5cqw,54px);height:max(7.5cqw,54px);translate:-50% -50%;padding:.8cqw;border:0;border-radius:50%;background:radial-gradient(closest-side,#fff5c4cc,#fff5c400);cursor:pointer;animation:mx-pulse 1.7s ease-in-out infinite}
.cs-spot svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 .5cqw #8a5a20)}
.cs-spot:focus-visible{outline:.35cqw solid #fff}
.cs-spot.done{animation:none;cursor:default;background:#fff8ea;border:.3cqw solid #f6cf72;width:max(5cqw,40px);height:max(5cqw,40px)}
.cs-spot-token svg{color:#3b2160}
.cs-phase-accuse .cs-spot{animation:none}

/* Tracing wet tracks */
.cs-trace{z-index:6;width:max(5cqw,46px);height:max(5cqw,46px);translate:-50% -50%;border-radius:50%;border:.3cqw dashed #ffffffaa;background:#2d7fa833;color:#fff;font:900 max(1.6cqw,13px) ui-rounded,'Segoe UI',sans-serif;cursor:pointer;touch-action:none}
.cs-trace span{opacity:0}
.cs-trace.next{border-style:solid;border-color:#fff3b0;background:#5fb3d999;box-shadow:0 0 2cqw #fff3b0;animation:mx-pulse 1.2s ease-in-out infinite}
.cs-trace.next span{opacity:1}
.cs-trace.traced{background:#2d7fa8cc;border:.3cqw solid #fff}
.cs-trace.traced span{opacity:1}
.trace-mode .cs-in-scene,.trace-mode .cs-dragon{opacity:.55}
.traced-all .cs-trace{animation:cs-pop .5s ease both}

/* Clue close-up stage */
.cs-dim{inset:0;background:#1c1233b8;z-index:1}
.cs-lens{z-index:3;left:4%;top:7%;width:38%;aspect-ratio:1;border-radius:50%;background:#fff8ea;box-shadow:0 0 0 1cqw #f6cf72,0 0 0 1.6cqw #8a5a20,0 2cqw 4cqw #0008;overflow:visible}
.step-discover .cs-lens{animation:cs-zoom .9s cubic-bezier(.2,.9,.3,1.2) both}
.cs-lens>svg,.cs-lens>.cs-wet-lens{width:100%;height:100%;display:block;border-radius:50%;overflow:hidden}
.cs-lens::after{content:'';position:absolute;right:-12%;bottom:-12%;width:22%;height:6%;background:#8a5a20;border-radius:1cqw;rotate:45deg;transform-origin:0 50%}
.cs-lens-label{position:absolute;left:50%;bottom:-10%;translate:-50% 0;display:flex;align-items:center;gap:.6cqw;white-space:nowrap;padding:.5cqw 1.4cqw;border-radius:99px;background:#fff8ea;color:#3b2160;font:900 max(1.6cqw,12px) ui-rounded,'Segoe UI',sans-serif;border:.25cqw solid #f6cf72}
.cs-lens-label svg{width:max(2cqw,16px);height:max(2cqw,16px)}
.step-discover .cs-lens>svg{animation:cs-focus 2.2s ease-out both}
.cs-wet-lens{position:relative;display:block}
.cs-wet-lens>svg{width:100%;height:100%;display:block}
.cs-drips i{position:absolute;width:3cqw;height:3cqw;border-radius:50% 50% 50% 0;rotate:-45deg;background:#5fb3d9;opacity:.8;animation:cs-drip 2s ease-in infinite}
.cs-drips i:nth-child(1){left:30%;top:20%}.cs-drips i:nth-child(2){left:60%;top:30%;animation-delay:.7s}.cs-drips i:nth-child(3){left:46%;top:60%;animation-delay:1.3s}
.cs-look{z-index:4;left:56%;top:44%;font-size:max(2cqw,16px)!important}
.cs-teach{z-index:3;left:47%;top:5%;width:50%;bottom:5%;display:flex;flex-wrap:wrap;align-content:flex-start;gap:1.2cqw}
.cs-fact-chip{display:flex;flex-direction:column;align-items:center;gap:.5cqw;padding:1cqw;border-radius:1.6cqw;background:#fff8ea;color:#3b2160;font:800 max(1.4cqw,11px)/1.2 ui-rounded,'Segoe UI',sans-serif;text-align:center;opacity:.35;scale:.92;transition:opacity .5s,scale .5s;flex:1 1 28%}
.cs-fact-chip.lit{opacity:1;scale:1;box-shadow:0 0 0 .3cqw #f6cf72,0 0 2cqw #f6cf7288}
.cs-fact-chip svg{width:min(9cqw,100%);height:auto;display:block}
.cs-clue-print .cs-fact-chip,.cs-clue-tracks .cs-fact-chip{flex:1 1 45%}
.cs-fact-chip .cs-swim{display:flex;gap:1cqw}
.cs-swim-panel{display:flex;flex-direction:column;align-items:center;font-size:max(1.1cqw,10px)}
.cs-swim-panel svg{width:8cqw}
.cs-paddle{transform-origin:60px 100px;animation:cs-paddle 1.4s ease-in-out infinite}
.cs-water-push{animation:cs-push 1.4s ease-out infinite}
.cs-water-slip{animation:cs-slip 1.4s ease-out infinite;opacity:.6}
.cs-mini-water{display:block;width:9cqw;height:5cqw;border-radius:1cqw;background:linear-gradient(#5fb8de,#2d7fa8);box-shadow:inset 0 -1cqw 0 #d9bf86}
.cs-splashers{display:flex;gap:.4cqw}
.cs-splashers span{width:4.5cqw}.cs-splashers :is(svg,img){width:100%!important;height:auto}
.cs-inspect{flex:1 1 100%;display:flex;align-items:center;gap:1.4cqw;padding:1.2cqw;border-radius:1.6cqw;background:#fff8ea;color:#3b2160;font:900 max(1.8cqw,13px) ui-rounded,'Segoe UI',sans-serif;box-shadow:0 0 0 .35cqw #f6cf72;animation:cs-pop .5s cubic-bezier(.2,.9,.3,1.4) both}
.cs-inspect-art svg{width:13cqw;height:auto;display:block}
.cs-pair{display:flex;gap:.6cqw}
.cs-inspect-art .cs-pair svg{width:11cqw}
.cs-mini-move{display:block;width:13cqw}
.cs-solved-burst{z-index:5;left:23%;top:40%;width:8cqw;color:#f6cf72;animation:cs-burst 1.2s ease-out both}
.cs-solved-burst svg{width:100%}

/* Movement loops (field guide + "could it get wet?") */
.cs-move-otter :is(svg,img){animation:cs-swim 2.4s ease-in-out infinite}
.cs-move-fox :is(svg,img){animation:cs-trot .5s ease-in-out infinite alternate}
.cs-move-duck :is(svg,img){animation:cs-bob 1.6s ease-in-out infinite}
.cs-move-crab :is(svg,img){animation:cs-scuttle 2s ease-in-out infinite}

/* Revisit a wrong pick: one gentle comparison */
.cs-compare{z-index:3;left:8%;right:8%;top:10%;bottom:10%;display:flex;align-items:center;justify-content:center;gap:3cqw}
.cs-compare>div{display:flex;flex-direction:column;align-items:center;gap:1cqw;padding:1.6cqw;border-radius:2cqw;background:#fff8ea;color:#3b2160;font:900 max(1.8cqw,13px) ui-rounded,'Segoe UI',sans-serif;animation:cs-pop .6s cubic-bezier(.2,.9,.3,1.4) both}
.cs-compare>div:last-child{animation-delay:.3s}
.cs-compare-art svg{width:17cqw;height:auto;display:block}
.cs-compare-art .cs-pair svg{width:12cqw}
.cs-compare b{display:flex;align-items:center;gap:.6cqw}.cs-compare b svg{width:max(2.2cqw,18px);height:max(2.2cqw,18px)}
.cs-vs{color:#fff;font:900 6cqw Georgia,serif;opacity:0;transition:opacity .5s}
.revisit-then .cs-vs{opacity:1}

/* Explain: choose every matching clue */
.cs-explain-row{z-index:3;left:4%;right:4%;top:14%;bottom:8%;display:flex;gap:2cqw;justify-content:center;align-items:stretch}
.cs-explain-card{position:relative;flex:1;max-width:28%;display:flex;flex-direction:column;align-items:center;gap:1cqw;padding:1.4cqw;border-radius:2cqw;border:.35cqw solid #f0dfb5;background:#fff8ea;color:#3b2160;font:900 max(1.8cqw,13px) ui-rounded,'Segoe UI',sans-serif;cursor:pointer;transition:translate .2s}
.cs-explain-card svg{width:100%;height:auto}
.cs-explain-card b{display:flex;align-items:center;gap:.6cqw}
.cs-explain-card b svg{width:max(2.2cqw,16px)}
.cs-explain-card.chosen{border-color:#f6cf72;box-shadow:0 0 0 .4cqw #f6cf72,0 0 3cqw #f6cf72aa;translate:0 -1cqw}
.cs-check{position:absolute;top:-1.2cqw;right:-1.2cqw;width:4cqw;height:4cqw;display:grid;place-items:center;border-radius:50%;background:#2e674b;color:#fff;font-size:2.4cqw}
.cs-otter-chosen{z-index:4;left:2%;top:2%;width:11cqw}
.cs-explain-art{width:100%}

/* Reconstruction */
.cs-actor{z-index:6;width:11cqw;translate:-50% -60%;opacity:0;transition:left 1.8s ease-in-out,top 1.8s ease-in-out,opacity .6s}
.cs-actor :is(svg,img){width:100%;display:block}
.cs-carried{position:absolute;left:52%;top:-14%;width:45%;opacity:0;transition:opacity .4s}
.cs-basket-start,.cs-basket-safe{z-index:5;width:7cqw;translate:-50% -50%;transition:opacity .5s}
.cs-basket-safe{opacity:0}
.cs-rc-mark{z-index:7;width:max(4cqw,30px);height:max(4cqw,30px);padding:.6cqw;translate:-50% -50%;border-radius:50%;background:#fff8ea;color:#3b2160;box-shadow:0 0 0 .3cqw #f6cf72,0 0 2cqw #f6cf72;opacity:0;scale:.3;transition:opacity .5s,scale .5s cubic-bezier(.2,.9,.3,1.6)}
.cs-sorry{z-index:6;left:77%;top:52%;width:9cqw;opacity:0;transition:opacity .6s}
.reconstructing .cs-at-otter{opacity:0;transition:opacity .5s}
.rc-splash .cs-splash{animation:cs-splash 1.6s ease-out 2}
.rc-otter .cs-actor{opacity:1}
.cs-walker{animation:cs-trot .45s ease-in-out infinite alternate}
.rc-wet .cs-rc-tracks,.rc-print .cs-rc-print,.rc-fur .cs-rc-fur{opacity:1;scale:1}
.rc-carry .cs-carried{opacity:1}.rc-carry .cs-basket-start{opacity:0}
.rc-basket .cs-basket-safe{opacity:1}.rc-basket .cs-carried{opacity:0}
.rc-swim .cs-actor{opacity:0}
.rc-sorry .cs-sorry{opacity:1;animation:cs-hop 1s ease 2}
.rc-sorry .cs-at-otter{opacity:0}

/* Case board (HUD) */
.cs-board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:900px;margin:0 auto 12px}
.cs-friend{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 8px 10px;min-height:150px;border-radius:18px;border:3px solid #f0dfb5;background:#fff8ea;color:#3b2160;font:800 15px ui-rounded,'Segoe UI',sans-serif;cursor:pointer;transition:translate .2s,box-shadow .2s}
.cs-friend:hover,.cs-friend:focus-visible{translate:0 -3px;box-shadow:0 0 18px #f6cf72aa;border-color:#f6cf72}
.cs-friend-art{height:62px;display:flex;align-items:flex-end}
.cs-friend{min-width:0}
.cs-friend-art{max-width:100%;justify-content:center}
.cs-friend-art :is(svg,img){height:64px;width:auto;max-width:100%;object-fit:contain}
.cs-friend-tokens{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:28px}
.cs-friend.placed{border-color:#2e674b;box-shadow:0 0 0 3px #2e674b55}
.cs-friend.seen{border-color:#c9b9e6}
.cs-seen{position:absolute;top:6px;right:8px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#2e674b;color:#fff;font-size:14px}
.cs-friend.ruled-out{opacity:.7}
.cs-evidence{display:block}
.cs-evidence svg{width:64px;height:auto}
.cs-evidence .cs-pair svg{width:44px}
.cs-evidence .cs-mini-move{width:80px}
.show-evidence{box-shadow:0 0 0 3px #f6cf72,0 0 18px #f6cf7288}
.cs-demo{display:flex;gap:8px;font-weight:900}
.cs-demo span{display:flex;align-items:center;gap:2px}.cs-demo svg{width:18px;height:18px}
.cs-token{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 5px;border-radius:99px;font:800 12px ui-rounded,'Segoe UI',sans-serif;border:2px solid currentColor;background:#fff}
.cs-token svg{width:16px;height:16px}
.cs-token-fur{color:#7a4a22}.cs-token-wet{color:#1f6f99}.cs-token-webbed{color:#b45a10}
.cs-token.pending{animation:cs-pop .4s cubic-bezier(.2,.9,.3,1.6) both;border-style:dashed}
.cs-token.glow-decisive{box-shadow:0 0 0 3px #f6cf72,0 0 14px #f6cf72}
.cs-placing{display:flex;align-items:center;gap:8px;color:#ffe7a3;font-weight:800}
.cs-tip{align-self:center;color:#d9cdee;font-weight:700}
.cs-steps li svg{width:16px;height:16px}
.no-captions .cs-caption{display:none}
.fb-correct .cs-board{animation:cs-pop .5s ease}

/* Field guide */
.cs-guide{border:0;padding:0;background:transparent;width:min(900px,calc(100vw - 24px));max-width:none;max-height:calc(100svh - 24px);color:#34204f}
.cs-guide::backdrop{background:#140c26c4}
.cs-guide-inner{max-height:calc(100svh - 24px);overflow:auto;padding:22px;border-radius:26px;background:linear-gradient(#fffaf0,#fbefd7);border:4px solid #f6cf72}
.cs-guide-head{display:flex;justify-content:space-between;align-items:center}
.cs-guide-head h2{margin:0;font-family:Georgia,serif;color:#3b2463}
.cs-guide-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.cs-guide-tabs button{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:96px;padding:8px;border-radius:16px;border:3px solid #f0dfb5;background:#fff;color:#3b2160;font:800 14px ui-rounded,'Segoe UI',sans-serif;cursor:pointer}
.cs-guide-tabs button[aria-pressed="true"]{border-color:#5b3a9c;box-shadow:0 0 0 3px #5b3a9c33}
.cs-tab-art :is(svg,img){height:52px;width:auto}
.cs-guide-hero{width:200px;margin:0 auto}
.cs-guide-hero :is(svg,img){width:100%}
.cs-guide-page h3{text-align:center;font-family:Georgia,serif;font-size:26px;margin:4px 0 10px;color:#3b2463}
.cs-guide-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.cs-guide-fact{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border-radius:18px;border:3px solid #f0dfb5;background:#fff;color:#34204f;font:600 15px/1.35 ui-rounded,'Segoe UI',sans-serif;text-align:center;cursor:pointer}
.cs-guide-fact b{font-size:17px;color:#3b2463}
.cs-guide-fact.lit{border-color:#f6cf72;box-shadow:0 0 16px #f6cf7288}
.cs-guide-art svg{width:110px;height:auto}
.cs-guide-art .cs-pair svg{width:84px}
.cs-guide-art .cs-mini-move{width:150px}
.cs-listen{font-weight:900;color:#5b3a9c}

/* Finish */
.cs-badge{width:170px}
.cs-badge{margin-bottom:14px}
.cs-badge img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 25%;display:block;border-radius:50%;background:#fff8ea;box-shadow:0 0 0 6px #f6cf72}
.cs-logic{width:100%;max-width:760px;margin:16px auto;border-collapse:separate;border-spacing:0 6px;color:#fff8ea}
.cs-logic caption{font-weight:900;color:#ffe7a3;margin-bottom:6px}
.cs-logic th,.cs-logic td{padding:8px 10px;background:#ffffff12;text-align:center;font-weight:800}
.cs-logic th svg{width:16px;height:16px;vertical-align:-3px}
.cs-logic th small{display:block;font-weight:600;color:#d9cdee}
.cs-logic tbody th{text-align:left;display:flex;align-items:center;gap:8px}
.cs-row-art :is(svg,img){width:56px;height:auto}
.cs-logic tr.culprit th,.cs-logic tr.culprit td{background:#f6cf7233;box-shadow:inset 0 0 0 2px #f6cf7288}

@media (max-width:650px){
 .cs-board{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cs-spot{width:44px;height:44px;padding:4px}.cs-spot.done{width:34px;height:34px}
 .cs-trace{width:40px;height:40px}
 .cs-friend{min-height:120px}
 .cs-guide-tabs{grid-template-columns:repeat(2,1fr)}
 .cs-clue-stage,.cs-revisit,.cs-explain{aspect-ratio:3/4}
 .cs-clue-stage .cs-lens{left:24%;top:3%;width:52%}
 .cs-clue-stage .cs-lens-label{font-size:13px;bottom:-12%}
 .cs-teach{left:3%;width:94%;top:50%;bottom:1%;gap:1.6cqw}
 .cs-fact-chip{font-size:12px;padding:2cqw}
 .cs-fact-chip svg{width:14cqw}
 .cs-swim-panel svg{width:16cqw}.cs-swim-panel{font-size:11px}
 .cs-splashers span{width:9cqw}.cs-mini-water{width:18cqw;height:10cqw}
 .cs-inspect{font-size:15px;padding:2cqw}
 .cs-inspect-art svg{width:22cqw}.cs-inspect-art .cs-pair svg{width:19cqw}.cs-mini-move{width:26cqw}
 .cs-look{left:50%;top:62%;translate:-50% 0}
 .cs-compare{flex-direction:column;gap:2cqw;top:4%;bottom:4%}
 .cs-compare-art svg{width:30cqw}.cs-compare-art .cs-pair svg{width:26cqw}.cs-compare>div{font-size:15px;padding:3cqw}
 .cs-vs{font-size:12cqw}
 .cs-explain-row{flex-direction:column;top:16%;bottom:3%;align-items:center}
 .cs-explain-card{max-width:none;width:80%;flex-direction:row;font-size:15px;padding:2cqw}
 .cs-explain-art{width:24cqw;flex:none}
 .cs-otter-chosen{width:22cqw}
 .cs-solved-burst{left:40%;top:20%;width:20cqw}
 .cs-logic th,.cs-logic td{padding:6px 4px;font-size:12px}.cs-row-art :is(svg,img){width:34px}.cs-logic tbody th{flex-direction:column;align-items:flex-start;gap:2px}
 .cs-steps li{font-size:0}.cs-steps li span{font-size:16px}
}

@keyframes cs-wave{0%,100%{transform:translateX(0)}50%{transform:translateX(26px)}}
@keyframes cs-cloud{to{transform:translateX(80px)}}
@keyframes cs-sway{0%,100%{rotate:0deg}50%{rotate:1.2deg}}
@keyframes cs-foam{0%,100%{opacity:.8;transform:translateY(0)}50%{opacity:.4;transform:translateY(6px)}}
@keyframes cs-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(5%) rotate(1deg)}}
@keyframes cs-ripple{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.3);opacity:0}}
@keyframes cs-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,.985)}}
@keyframes cs-scuttle{0%,100%{transform:translateX(0)}25%{transform:translateX(12%)}75%{transform:translateX(-12%)}}
@keyframes cs-hop{0%,100%{transform:none}40%{transform:translateY(-14%) scale(1.04)}}
@keyframes cs-march{to{stroke-dashoffset:-60}}
@keyframes cs-zoom{from{transform:scale(.2) translate(40%,40%);opacity:0}to{transform:none;opacity:1}}
@keyframes cs-focus{from{filter:blur(6px);transform:scale(1.25)}to{filter:none;transform:none}}
@keyframes cs-drip{0%{transform:translateY(0);opacity:0}20%{opacity:.85}100%{transform:translateY(8cqw);opacity:0}}
@keyframes cs-paddle{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes cs-push{0%{transform:translateY(0);opacity:1}100%{transform:translateY(10px);opacity:.2}}
@keyframes cs-slip{0%{transform:translateY(0);opacity:.6}100%{transform:translateY(-12px);opacity:0}}
@keyframes cs-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes cs-burst{0%{transform:scale(.3);opacity:0}40%{transform:scale(1.4);opacity:1}100%{transform:translate(0,30cqw) scale(.6);opacity:0}}
@keyframes cs-swim{0%,100%{transform:translateX(-6%) rotate(-3deg)}50%{transform:translateX(6%) rotate(3deg)}}
@keyframes cs-trot{from{transform:translateY(0)}to{transform:translateY(-6%)}}
@keyframes cs-splash{0%{opacity:0;transform:translateY(20px)}30%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}

/* Reduce motion: the same story in still frames; positions jump instead of gliding. */
:root[data-reduced="true"] .cs-card *,:root[data-reduced="true"] .cs-guide *,:root[data-reduced="true"] .cs-finish *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.cs-card *,.cs-guide *,.cs-finish *{animation:none!important;transition:none!important}}

/* Supplied character art (images) */
.cs-animal{display:block;width:100%;height:auto}
.cs-mini-move img,.cs-otter-chosen img{width:100%;height:auto}