/* ==========================================================================
   BusyDayKit — Explorer character stage (V11)
   One document-space overlay: rope, ledges and the kid. Everything inside is
   positioned in DOCUMENT pixels by character-v11.js (one coordinate space).
   The stage never takes layout space and never intercepts the pointer, except
   on the kid's own button.
   ========================================================================== */
.cv-stage{position:absolute;inset:0;z-index:60;pointer-events:none;overflow:hidden;contain:layout paint}

/* ---- rope ---- */
.cv-rope{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cv-rope path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cv-rope-shadow{stroke:#1a0f08;stroke-width:9;opacity:.55}
.cv-rope-strand{stroke:#b98046;stroke-width:6}
.cv-rope-twist{stroke:#f0cf92;stroke-width:2;stroke-dasharray:4 7;opacity:.9}
.cv-rope-coil{stroke:#8d5a2b;stroke-width:5}
.cv-rope-coil-hi{stroke:#e8c27f;stroke-width:1.6}
.cv-rope-knot{fill:#b98046;stroke:#f6c56c;stroke-width:2.2}
html[data-theme="light"] .cv-rope-shadow{opacity:.35}

/* ---- ledges: small, empty, decorative perches in the left gutter ---- */
.cv-ledge{position:absolute;height:12px;border-radius:7px;pointer-events:none;background:linear-gradient(180deg,#ffc56a,#d9791a);box-shadow:0 0 14px rgba(255,159,28,.55),0 6px 10px rgba(0,0,0,.35)}
.cv-ledge::before,.cv-ledge::after{content:"";position:absolute;top:10px;width:5px;height:14px;border-radius:0 0 3px 3px;background:#8a4a14}
.cv-ledge::before{left:10px}.cv-ledge::after{right:10px}
.cv-ledge.is-near{box-shadow:0 0 22px rgba(255,159,28,.95),0 6px 10px rgba(0,0,0,.35)}
html[data-theme="light"] .cv-ledge{box-shadow:0 0 10px rgba(255,159,28,.4),0 5px 9px rgba(16,41,81,.25)}

/* ---- planters: decorative cover for the kid's hide-and-seek; drawn in front of him, never interactive ---- */
.cv-props{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.cv-prop{position:absolute;pointer-events:none;box-sizing:border-box;border-radius:46% 46% 9px 9px / 34% 34% 9px 9px;border:2px solid rgba(255,186,90,.55);
  background:radial-gradient(circle at 28% 20%,#6ff0b0 0 11%,transparent 12%),radial-gradient(circle at 72% 30%,#3fc98a 0 13%,transparent 14%),radial-gradient(circle at 45% 52%,#2f9f6c 0 16%,transparent 17%),linear-gradient(180deg,#27885d 0 66%,#c7691b 66% 100%);
  box-shadow:0 0 12px rgba(52,211,153,.35),0 6px 10px rgba(0,0,0,.35)}
html[data-theme="light"] .cv-prop{box-shadow:0 0 8px rgba(52,211,153,.3),0 5px 9px rgba(16,41,81,.25)}

/* temporary landing platform: pops out for one play sequence, then folds away */
@keyframes cv-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes cv-unpop{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.4)}}
.cv-pop{animation:cv-pop .35s cubic-bezier(.2,1.4,.4,1) both}
.cv-unpop{animation:cv-unpop .3s ease-in both}
.cv-ledge.cv-pop,.cv-ledge.cv-unpop{transform-origin:50% 0}
.cv-prop.cv-pop,.cv-prop.cv-unpop{transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){.cv-pop,.cv-unpop{animation:none}}

/* ---- the kid ---- */
.cv-kid{position:absolute;left:0;top:0;width:200px;height:250px;transform-origin:0 0;will-change:transform;pointer-events:none}
.cv-kid[hidden]{display:none}
.cv-svg{position:absolute;left:0;top:0;width:200px;height:250px;overflow:visible;pointer-events:none;filter:drop-shadow(0 8px 8px rgba(0,0,0,.4))}
/* Button covers just the body (in the kid's local 200x250 space). */
.cv-kid-btn{position:absolute;left:52px;top:6px;width:104px;height:212px;padding:0;margin:0;border:0;border-radius:44px;background:transparent;pointer-events:auto;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cv-kid-btn:focus-visible{outline:6px solid #ffbc54;outline-offset:2px;background:rgba(255,188,84,.12)}
.cv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* expression marks (? … anger) */
.cv-mark{opacity:0;transition:opacity .12s}
.cv-svg[data-mark="curious"] .cv-mark-q,
.cv-svg[data-mark="suspicious"] .cv-mark-dots,
.cv-svg[data-mark="angry"] .cv-mark-anger,
.cv-svg[data-mark="wheee"] .cv-mark-wheee,
.cv-svg[data-mark="zzz"] .cv-mark-zzz{opacity:1}

@media (prefers-reduced-motion:reduce){
  .cv-mark{transition:none}
}
@media print{.cv-stage{display:none}}