/* Doorway Odd and Even — Ladybird sort sub-activity styles.
 * Carved out of odd-and-even.css to keep per-sub-activity CSS independent.
 */
/* =========================================================
   Sub-activity C: Ladybird sorting
   =========================================================
   Flash frame 6: large lime-green meadow blob covers the stage
   area from approx. y 80–490 Flash px (→ CSS 3.75–22.97em).
   Two leaves at bottom: red/odd leaf at left (x≈1.12em, y≈19.22em),
   blue/even leaf at right (x≈26.44em, y≈19.12em).
   Ladybirds in scattered positions across the green meadow area.

   Green blob colours: #66ff00 bright lime edge, #7ed05e mid, radial.
*/

.oe-ladybird-sorting-area {
    background-color: #ffffff;
    position: relative;
    /* Clip stem tails / mid-slide ladybirds so they can't push the parent
       into a scrollable state. The .oe-ladybird-area inside keeps
       overflow:visible so the ladybird slide from meadow → leaf stays
       painted; anything past this sub-activity's bounds is invisible
       anyway. */
    overflow: hidden;
}

/* Instruction lives at the top of the sort area in the natural flex flow
   (mirrors Flash frame_06.as which paints `infoText` at the top of the
   stage above the meadow). Keeping it inline rather than absolutely
   positioned means the meadow / leaves / number-line layers can never
   occlude it, and the same textbox is available to cycle through
   sort → line → pattern call-out → end-state prompt. Constrained max
   height to keep the meadow area tall enough on the 16:9 stage. */
.oe-screen:has(.oe-ladybird-sorting-area:not(.hidden_panel)) .oe-activity-nav {
    padding: 0 1em;
    position: relative;
    z-index: 10;
}
.oe-screen:has(.oe-ladybird-sorting-area:not(.hidden_panel)) .oe-instruction {
    font-size: 0.85em;
    text-align: center;
    line-height: 1.2;
    /* Instruction textbox cycles through sort → line → pattern call-out →
       end-state prompt (matches Flash frame_06.as, which rewrites a single
       `infoText`). Allow up to three lines so the longest string (the
       pattern call-out) wraps cleanly without truncation. */
    max-height: 4em;
    /* Constrain width so the long sort-phase instruction wraps to two
       roughly-equal lines rather than a single ribbon across the stage;
       shorter cycle strings still centre inside the same block. Nudged
       down by half a line-height so the two-line block breathes below
       the activity-nav bar. */
    max-width: 30em;
    margin: 0.5em auto 0;
}

.oe-ladybird-phase {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    flex: 1;
    min-height: 0;
}

.oe-ladybird-phase.hidden_panel {
    display: none;
}

/* Meadow area: organic green blob covers the top portion. The blob SVG is
   absolutely positioned to fill the area; ladybirds are layered above it.
   Stacking order across the sub-mode (all in the shared .oe-ladybird-phase
   stacking context — .oe-ladybird-area intentionally does NOT set a
   z-index so its children paint against the phase's siblings, not against
   each other):
     meadow-bg (z:0)  <  leaves-row (z:1)  <  line-phase overlay (z:2)
     <  ladybird-btn (z:3)  <  on-line ladybird (z:20)  <  instruction (z:10+)
   so the green meadow / leaf is bottommost, the number line sits above
   the leaves, and the ladybirds paint above both.  Individual ladybirds
   parked on the line raise themselves to z:20 so they clear the line SVG
   cleanly. */
.oe-ladybird-area {
    position: relative;
    flex: 1;
    min-height: 11em;
    overflow: visible;
}

/* Meadow blob (the large green leaf ladybirds sit on) — flipped horizontally
   to match Flash's leaf orientation. `object-fit:fill` lets the SVG stretch
   horizontally to the requested width without bursting beyond it; the
   centred translateX keeps the blob horizontally symmetric. The blob
   silhouette is organic so a small horizontal squash is unnoticeable. */
.oe-meadow-bg {
    position: absolute;
    left: 50%;
    /* Push the meadow down a little so the instruction paragraph at the
       top of the sort area has clear space above.  The leaves row already
       absorbs the bottom of the area. */
    top: 3em;
    /* Sits comfortably inside the play area so the green blob doesn't
       crash the activity-area edges. */
    width: 93%;
    height: 82.5%;
    transform: translateX(-50%) scaleX(-1);
    object-fit: fill;
    object-position: center;
    pointer-events: none;
    /* Bottommost of the sort-phase layers so the number line and
       ladybirds always paint on top of the green blob. */
    z-index: 0;
}

/* Leaves row at bottom of screen. Leaves slightly overlap at the centre
   (matching Flash). "done" yellow button sits in the centre. */
.oe-leaves-row {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    min-height: 7em;
    margin-top: -2.5em; /* leaves rise into the meadow area, as in Flash */
    z-index: 1;
}

/* Leaf buttons — use Flash leafLeft / leafRight SVGs.
   Each leaf is large (~20em wide); both leaves slightly overlap near the
   centre, with the done button in front. */
.oe-leaf-btn {
    position: relative;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    /* Leaves read as the visual centrepiece of the sorting phase
       (matches Flash framing). */
    width: 19.8em;
    max-width: 49%;
    flex: 0 0 auto;
}

/* Coloured stem below each leaf — matches Flash, which paints a dark
   red/blue stem flanking the central "done" button. Positioned
   absolutely under the leaf so the leaf body still sits flush in the
   row; stem peeks out below. */
.oe-leaf-stem {
    position: absolute;
    width: 1.7em;
    height: auto;
    /* Drop the stem down so most of it pokes out below the leaf body. */
    bottom: -2em;
    display: block;
    pointer-events: none;
    z-index: 0;
}

/* Anchor the red stem to the right-hand (rounded) base of the odd leaf,
   the blue stem mirrored on the left base of the even leaf — same
   layout as the Flash reference. */
.oe-odd-leaf  .oe-leaf-stem { right: 28%; }
.oe-even-leaf .oe-leaf-stem { left:  28%; transform: scaleX(-1); }

/* Push the two big leaves apart so the "done" button has clear separation
   between them — Flash framed them with a generous gap. */
.oe-leaf-btn.oe-odd-leaf  { margin-right: 1.5em; }
.oe-leaf-btn.oe-even-leaf { margin-left:  1.5em; }

.oe-leaf-img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    /* Keep the leaf body painted above its coloured stem (which sits
       absolute under the leaf via .oe-leaf-stem). */
    position: relative;
    z-index: 1;
}

/* Shape-based hit-testing: once ladybird-sort.js has inlined the leaf
   SVG in place of the <img>, the button's rectangular bounding box no
   longer receives mouse clicks — only the painted leaf silhouette does.
   The button stays keyboard-focusable and switch-scanner-activatable
   (both fire clicks synthetically, bypassing pointer hit-testing).
   The leaf SVGs render their silhouette via `<use xlink:href="#shape0">`
   pointing at <path>s inside <defs>. The SVG root is `pointer-events:
   none` so transparent bounding-box corners fall through to whatever is
   underneath; the <use> element re-enables `visiblePainted`, hit-testing
   only the painted pixels of its referenced geometry. Hits on those
   pixels bubble through the SVG root and the leaf <button> to fire the
   button's click handler. */
.oe-leaf-btn.oe-leaf-shape-hit {
    pointer-events: none;
}
.oe-leaf-btn.oe-leaf-shape-hit svg.oe-leaf-img {
    pointer-events: none;
}
.oe-leaf-btn.oe-leaf-shape-hit svg.oe-leaf-img use {
    pointer-events: visiblePainted;
    cursor: pointer;
}

/* Coloured-pill label inside each leaf (mirrors Flash "odd"/"even"
   text-boxes pinned to the leaf's narrow tip). */
.oe-leaf-label {
    position: absolute;
    bottom: 0.4em;
    background: #ffffff;
    border: 2px solid #2d0d09;
    border-radius: 0.3em;
    padding: 0.05em 0.6em;
    font-weight: bold;
    font-size: 1.05em;
    pointer-events: none;
    z-index: 2;
}

.oe-odd-leaf  .oe-leaf-label { left: 30%; color: #ef2938; }
.oe-even-leaf .oe-leaf-label { right: 30%; color: #1037ff; }

.oe-leaf-done-btn {
    position: relative;
    z-index: 2;
    align-self: center;
    /* ≈30% wider than the shared .oe-done-circle (3em → 3.9em) so the
       label has breathing room. Height stays at 3em, so border-radius:50%
       renders it as a horizontal ellipse rather than a circle. */
    width: 3.9em;
    height: 3em;
    /* Lift the button ~40% of its own height (≈1.2em) so it sits closer
       to the leaves without changing the row's layout box. */
    transform: translateY(-40%);
}

/* Own row below the leaves so the done button sits clearly below the
   leaf line, not between the leaves. */
.oe-ladybird-done-row {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Clear the leaf stems (`.oe-leaf-stem { bottom: -2em }`) so the
       done button sits below them. */
    margin-top: 2em;
}

.oe-ladybird-btn {
    position: absolute;
    width: 3.6em;
    height: 4em;
    background: none;
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    /* Ladybirds paint above the leaves (z:1) and the number-line overlay
       (z:2) so they read as sitting on top of the scene during both the
       sort and number-line phases. */
    z-index: 3;
}

/* Ladybird-sort feedback bubble — must paint above the meadow,
   ladybirds, leaves AND the number-line overlay so the "oops" /
   "well done" message is always visible. Anchored to the centre of
   the play area so it doesn't get squashed into the leaves row. */
.oe-ladybird-feedback {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    pointer-events: none;
}

/* Bespoke reveal keyframe that preserves the centering translate. The
   shared `oe-feedback-reveal` animates transform: translateY(…) which
   overrides our translate(-50%, -50%) — the bubble would pop to the
   bottom-right (its natural top-left-anchored position) and jump to
   centre on animation end. Matches the pattern coconut-shy already uses
   for its level-complete bubble. */
@keyframes oe-ladybird-feedback-reveal {
    0%   { opacity: 0; transform: translate(-50%, calc(-50% - 0.3em)); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}
.oe-ladybird-feedback.oe-feedback-reveal {
    animation: oe-ladybird-feedback-reveal 0.4s ease-out;
}

/* Slide between positions (meadow → click point on leaf → back to meadow
   on wrong-Done). Mirrors Flash dynamicTween (frame_06.as `clickToMove` /
   `dynamicTween`) which eased the ladybird MovieClip between coordinates
   over ~0.6 s. Applied via the `oe-lb-moving` class so the initial random
   placement on build doesn't animate. */
.oe-ladybird-btn.oe-lb-moving {
    transition: left 0.6s ease-out, top 0.6s ease-out;
}

/* Number-line phase: slow the slide ~3x so the journey from the leaf up
   to the number-line slot reads as a deliberate "lining up" motion
   (matches Flash dynamicTween's longer interval `2` arg on
   frame_06.as:374 for this phase vs the snappier `1` used for sort
   placements). */
.oe-ladybird-btn.oe-lb-on-line.oe-lb-moving,
.oe-ladybird-btn.oe-lb-line-target.oe-lb-moving {
    transition: left 1.8s ease-out, top 1.8s ease-out;
}

.oe-ladybird-btn img {
    width: 100%;
    height: 100%;
}

/* Ladybird number overlay — sits on the head plate (the dark cap at the
   top of the body) in white so children read odd/even at a glance. The
   lb1.svg…lb10.svg head occupies the top ~30% of the sprite; centring
   the span at ~22% lands the digit on the head so the digit reads as
   printed on the head plate. */
.oe-lb-number {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-weight: bold;
    font-size: 0.8em;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

/* Selected state — thick green ring appears WHILE the ladybird is still
   on the meadow (selection / pre-placement). aria-pressed flips to "false"
   the moment the leaf is clicked, so the ring vanishes as the ladybird
   starts moving. The fill colour of the body (set on correct placement via
   _recolourLadybirdBody) is the only persistent outcome signal.

   Ring is drawn only by box-shadow — leaving the button's 2px border
   transparent — so the global :focus dotted-black outline (which lands
   0.1em outside the border-box, inside the box-shadow band) sits over a
   single continuous green band rather than splitting two green rings. */
.oe-ladybird-btn[aria-pressed="true"] {
    box-shadow: 0 0 0 0.45em #2ca02c;
}

/* Number-line area — overlays the leaves + meadow during the number-line
   phase. The line phase wrapper is absolutely positioned over the sort
   phase (which stays visible) so the user sees the ladybirds-on-leaves
   underneath the number line image. z-index sits between the leaves
   row (z:1) and the ladybird-area (z:3) so the line paints above the
   leaves but below the ladybirds that get moved onto it. */
.oe-ladybird-line-phase {
    position: absolute;
    left: 0;
    right: 0;
    /* Line sits at the very top of the sort area so it clears the
       centered "Well done…" feedback bubble (top:35%) that stays
       visible when the line phase begins. */
    top: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;  /* let clicks fall through to ladybirds; line overlays re-enable */
}
.oe-ladybird-line-phase .oe-number-line {
    pointer-events: auto;
}
.oe-number-line {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 0;
    height: 4em;
    background: transparent;
    border: none;
}
.oe-number-line-img {
    width: 100%;
    height: auto;
    display: block;
}
/* Ladybirds parked on the number line raise themselves further within
   the ladybird-area's stacking context so they clear their own siblings
   cleanly. The ladybird-area (z:3) already stacks above the line-phase
   overlay (z:2), so on-line ladybirds paint above the number-line SVG
   rather than being swallowed by its digits. */
.oe-ladybird-btn.oe-lb-on-line {
    pointer-events: none;
    z-index: 20;
}
/* Locked correctly-placed ladybirds during a wrong-Done retry. Mirrors
   Flash frame_06.as:160-189 — correctly-placed ladybirds cannot be moved
   off their leaf once Done has been pressed with any wrong placements. */
.oe-ladybird-btn.oe-lb-locked {
    pointer-events: none;
    cursor: default;
}

/* =========================================================
   Phase 4: dynamic state classes
   ========================================================= */

/* Ladybird sorting — body colour change on correct placement is handled
   by swapping the lb svg's body fill (`_recolourLadybirdBody` in
   ladybird-sort.js). Mirrors Flash frame_06.as `body.gotoAndStop(2)`
   (red — odd on odd leaf) and `body.gotoAndStop(3)` (blue — even on
   even leaf). A ladybird placed on the WRONG leaf stays neutral (default
   off-white body, see frame_06.as:312/334 `body.gotoAndStop(1)`). The
   colour communicates correctness; outline/border is reserved for the
   "selected" state (green) only. */

/* Number line phase — the actual placed ladybirds (already in
   .oe-ladybird-area) act as the click targets; no separate "waiting"
   buttons are rendered. Line-phase ladybirds carry the
   `.oe-lb-line-target` marker class but no toggle-selected state —
   click auto-places the next ladybird on the line, so aria-pressed is
   removed on line-phase entry (see `_wireLineLadybirds` in
   ladybird-sort.js). */

/* --- Ladybird sort: wrong-parity wobble ("oops") ---
   Mirrors Flash frame_06.as oops.gotoAndPlay(2) (lines 208, 262, 310, 332):
   a short side-to-side shake when a ladybird is placed on the wrong leaf.
   Outcome is also conveyed by the ladybird staying neutral (default
   off-white body, Flash `body.gotoAndStop(1)` analogue) and the spoken
   feedback. */
@keyframes oe-lb-wobble {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-0.4em) rotate(-6deg); }
    40%  { transform: translateX(0.4em)  rotate(6deg); }
    60%  { transform: translateX(-0.25em) rotate(-3deg); }
    80%  { transform: translateX(0.25em)  rotate(3deg); }
    100% { transform: translateX(0); }
}

.oe-ladybird-btn.oe-lb-wobble {
    animation: oe-lb-wobble 0.55s ease-in-out;
}

/* --- Ladybird sort: arrival on leaf (settle scale) ---
   When a ladybird is placed on a leaf, give it a gentle scale-down so the
   placement is visually reinforced. DOM remains in place; the SVG-body
   recolour from `_recolourLadybirdBody` is the persistent signal when
   placement is correct. */
@keyframes oe-lb-settle {
    0%   { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.oe-ladybird-btn.oe-lb-just-placed {
    animation: oe-lb-settle 0.35s ease-out;
}

/* =========================================================
   Ladybird-sort congratulations overlay
   =========================================================
   Mirrors Flash frame_06.as:411 (`_root.attachMovie("congratulations"…)`)
   which painted on top of the existing meadow + sorted ladybirds rather
   than replacing them. We use the shared `.oe-balloons` / `.oe-balloon`
   animation already defined in odd-and-even.css for house-painting; only
   the wrapper and card are local. Absolute positioning keeps the preceding
   elements from being squashed when the congrats becomes visible. */
.oe-ladybird-congrats {
    position: absolute;
    inset: 0;
    /* Extend the overlay upward over the activity-nav band so the
       balloons rise past the top "Well done…" instruction — matches
       the shoes pattern. */
    top: -3.5em;
    z-index: 600;
    pointer-events: none;  /* balloons + backdrop ignore clicks; card re-enables */
    display: block;
    padding: 0;
}
.oe-ladybird-congrats .oe-ladybird-congrats-card {
    position: absolute;
    left: 50%;
    /* Biased slightly below vertical centre so the bubble clears the
       "Well done! Press back…" prompt in the top instruction band while
       still leaving room for the Back pencil beneath.  The wrapper is a
       positioning shell only — no background or border — so the Flash
       congratulations bubble (with its own black outline) reads as a
       single speech-bubble rather than as a bubble nested inside an
       outer card. */
    top: 48%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
    pointer-events: auto;
    max-width: 24em;
    text-align: center;
    /* Bubble sits ahead of the meadow / leaves layer so the message
       reads cleanly over the sorted scene rather than getting cropped. */
    z-index: 2;
}

/* Scope the .oe-balloons positioning to the ladybird congrats overlay —
   the shared .oe-balloon block in odd-and-even.css covers the sprite
   image styling and the rise-sway keyframes, but each per-sub-activity
   wrapper supplies its own absolute container so the balloons fill the
   correct stage region. */
.oe-ladybird-congrats .oe-balloons {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    /* Balloons render above every other layer at the celebration moment
       — Flash's congratulations clip attaches with a very high depth
       (frame_06.as:411 → ≈ 100000). */
    z-index: 700;
}

/* Switch-scanner group-level focus: at the top level of the sort-phase
   scan the ladybirds group (.oe-ladybird-area) highlights as a whole.
   The shared rectangular ring wraps the entire meadow, so suppress it
   and glow each member instead. Also override the shared rule's
   `z-index: 1` back to auto — the shared rule promotes the group into a
   new stacking context which drags the whole area (meadow blob + all
   ladybirds) above the sibling .oe-leaves-row (z:1). With `z-index:
   auto` the area doesn't create a stacking context and the meadow blob
   (z:0), ladybirds (z:3) and leaves-row (z:1) resolve against the phase
   div directly — placed ladybirds paint above leaves, meadow blob stays
   below both. */
.oe-ladybird-area.scan_highlight {
    box-shadow: none;
    z-index: auto;
}

/* Scan-highlight — consumes the shared `--dw-scan-shape-hug-filter`
   from shared/doorway.css. Ladybird-sort's local override wants a
   fatter bloom than the project default and effectively no halo (the
   sprites already contrast against every leaf background). Ladybirds
   and leaves opt into the shared box-shadow-suppression rule via the
   .dw-scan-shape-hug class (set on the ladybird buttons at build time
   in ladybird-sort.js, on the leaf buttons directly in the HTML). */
.oe-ladybird-sorting-area {
    --dw-scan-bloom: 0.25em;
    --dw-scan-halo: 0.01em;
}
.oe-ladybird-area.scan_highlight .oe-ladybird-btn:not(.oe-lb-locked):not(.oe-lb-on-line) img,
.oe-ladybird-btn.scan_highlight img,
.oe-ladybird-btn:focus-visible img,
.oe-leaf-btn.scan_highlight .oe-leaf-img,
.oe-leaf-btn:focus-visible .oe-leaf-img {
    filter: var(--dw-scan-shape-hug-filter);
}

/* Done button scan-highlight: the shared rule paints an orange
   box-shadow, but the done button's dark-gold 2px border (see
   .oe-done-circle in odd-and-even-house-painting.css) sits between the
   yellow fill and the ring and reads as a black band. Recolour the
   border to the same orange as the ring so the two merge into a single
   solid orange band around the yellow disc. */
.oe-leaf-done-btn.scan_highlight {
    border-color: var(--oe-scan-orange, #ff9300);
    /* Solid inner ring (spread) fades out through a wider blurred halo
       so the edge softens like the ladybird / leaf highlights rather
       than reading as a hard rectangle. */
    box-shadow: 0 0 0 0.25em var(--oe-scan-orange, #ff9300),
                0 0 0.5em 0.25em var(--oe-scan-orange, #ff9300);
}