/* Doorway Odd and Even — 100-square tutorial sub-activity styles.
 * Carved out of odd-and-even.css to keep per-sub-activity CSS independent.
 */
/* =========================================================
   Sub-activity D: 100-square tutorial
   =========================================================
   Flash frame 7: white background.
   100-square grid: x 155–572 Flash px → 9.69–35.74em CSS,
                    y 120–537 Flash px → 5.62–25.17em CSS.
   Four leaf navigation buttons: x≈660px → 41.29em CSS,
     y 126.7 / 216.7 / 306.6 / 396.6 Flash → 5.94 / 10.16 / 14.37 / 18.59em CSS.
   Flash leaf style: light-blue ovals (#aaffff fill, #5e9eff stroke),
   labelled "1." "2." "3." "4." with the digit left-aligned inside
   the oval and the dot centred (Flash sprite layout — see
   screenshots/odd-and-even/06_activity_pattern_100_flash.png).

   Layout: side-by-side flex (grid left, tab + next column right).
*/

.oe-tutorial-area {
    background-color: #ffffff;
    /* Establish containing block for the absolute-positioned congrats
       overlay so its inset:0 fills the sub-activity, not the whole stage. */
    position: relative;
}

/* Body: side-by-side 100-square + right-hand column (tabs + next).
   Stretches to fill remaining vertical space below the instruction. */
.oe-tutorial-body {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1em;
    flex: 1;
    min-height: 0;
}

/* 100-square grid — Flash colours: red odd, blue even cells with thick
   black gridlines. White cell text gives WCAG-acceptable contrast on
   the saturated Flash blue (#1037ff vs #000 is 1.7:1; vs #fff is
   12.3:1) and stays readable on the red (#ef2938 vs #fff is 4.7:1,
   passes AA for large bold text). Flash showed black numerals over
   the same red/blue but the cell text in Flash was tiny — the HTML5
   numerals are full-cell so contrast matters more. */
.oe-100-square {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 1px;
    background: #000;
    border: 2px solid #000;
    align-content: stretch;
    flex: 0 1 auto;
    aspect-ratio: 1;
    max-height: 100%;
}

.oe-100-square-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    aspect-ratio: 1;
    font-weight: bold;
    text-shadow: 0 0 0.15em rgba(0, 0, 0, 0.45);
}

.oe-100-square-cell.oe-cell-odd {
    background-color: #ef2938;
    color: #fff;
}

.oe-100-square-cell.oe-cell-even {
    background-color: #1037ff;
    color: #fff;
}

/* Instruction panel — green-bordered box (matches Flash infoText style).
   Width is constrained so the longest panel (panel 3) wraps to two
   lines; height is reserved at 2 lines so shorter panels (1, 2, 4)
   don't collapse the row and reflow the body below. */
.oe-tutorial-panel {
    padding: 0.4em 0.8em;
    background-color: #ffffff;
    border: 2px solid #4a8e3a;
    border-radius: 0.4em;
    text-align: center;
    max-width: 30em;
    min-height: 2.6em;
    align-self: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oe-tutorial-text {
    font-size: 1em;
    margin: 0;
    line-height: 1.25;
}

/* Right-hand column: page-tab ovals stacked vertically with the gold
   "next" oval directly below them. Replaces the bottom-row pencil
   next button (frees vertical space, groups page nav). */
.oe-tutorial-right-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    flex: 0 0 auto;
}

/* Page tabs — light-blue ovals (Flash leaf1..leaf4).
   In Flash only leaf1 starts visible; pressing next reveals 2 → 3 → 4
   (frame_07.as:36-51). The .oe-tutorial-tab-pending modifier keeps the
   yet-to-be-revealed ovals hidden but reserves their flex slot so the
   marker can still be positioned over them. Tabs sit close together
   (small gap) so the gold next button fits underneath without pushing
   the column past the 100-square. */
.oe-tutorial-tabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
    padding: 0;
    position: relative;
    width: 4.4em;
    flex: 0 0 auto;
}

/* Number sits in the LEFT portion of the oval (not centred / right-
   shifted) — uses flex-start with a left padding so the "1" / "2"
   etc. sit clearly left-of-centre and the dot trails immediately
   after. */
.oe-tutorial-tab {
    width: 4.4em;
    height: 2.6em;
    padding: 0 0 0 0.9em;
    border-radius: 50%;
    background: #aaffff;
    border: 2px solid #5e9eff;
    font-family: inherit;
    font-weight: bold;
    font-size: 1em;
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    user-select: none;
    visibility: visible;
    transition: opacity 0.25s ease-out;
    flex: 0 0 auto;
}

.oe-tutorial-tab .oe-tab-num {
    /* Digit sits in the left portion of the oval. */
    display: inline-block;
    text-align: left;
}

.oe-tutorial-tab .oe-tab-dot {
    /* Dot trails immediately after the digit. */
    display: inline-block;
}

.oe-tutorial-tab.oe-tutorial-tab-pending {
    visibility: hidden;
}

/* Position marker — a small blue sphere that moves between the active
   ovals on `next`. Mirrors Flash ladyBirdMove (frame_07.as:58-61), which
   used a ladybird sprite; the HTML5 version uses a generic blue dot so
   it reads as a "you are here" marker rather than a literal bug on a
   page-tab. CSS-only (no image asset). JS sets --oe-lb-top in em to
   match the active oval's vertical centre. */
.oe-tutorial-marker {
    position: absolute;
    left: 50%;
    top: var(--oe-lb-top, 1.3em);
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #6db3ff 0%, #1037ff 60%, #082394 100%);
    box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.25);
    transform: translate(-50%, -50%);
    transition: top 0.6s ease-in-out;
    pointer-events: none;
    z-index: 1;
}

/* Gold "next" oval under the tabs — same family as the done / retry
   circle elsewhere in odd-and-even, but wider (oval) so the label
   reads on one line. Taller than the number tabs above so it reads
   as the primary action affordance (per-user feedback). */
.oe-tutorial-next-btn.oe-tutorial-next {
    width: 4.4em;
    height: 7.2em;
    border-radius: 50%;
    border: 2px solid #b8860b;
    background: radial-gradient(circle at 35% 30%, #fff19a 0%, #f1c40f 60%, #d4ac0d 100%);
    color: #1a1a1a;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    padding: 0;
}

.oe-tutorial-next-btn.oe-tutorial-next:focus-visible {
    outline: 0.2em solid gold;
    outline-offset: 0.1em;
}
@media (hover: hover) {
    .oe-tutorial-next-btn.oe-tutorial-next:hover {
        outline: 0.2em solid gold;
        outline-offset: 0.1em;
    }
}

.oe-tutorial-next-btn.oe-tutorial-next.hidden_panel {
    display: none;
}

/* --- End-state overlay: Flash congratulations bubble + balloons ---
   Overlays the existing tutorial scene (mirrors the sibling sub-
   activities and Flash frame_07.as:101 which attaches the congratulations
   clip on top of the existing 100-square / leaves). Uses the shared
   congratulations bubble copy across all five sub-activities. */
.oe-tutorial-congrats {
    position: absolute;
    inset: 0;
    /* Extend the overlay upward over the activity-nav band so the
       balloons rise past the top instruction — matches the shoes
       pattern. */
    top: -3.5em;
    z-index: 600;
    pointer-events: none;
    display: block;
    padding: 0;
}

.oe-tutorial-congrats .oe-balloons {
    position: absolute;
    inset: 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_07.as:101 → ≈ 100000). */
    z-index: 700;
}

/* Align wrapper mirrors .oe-tutorial-body: flex row with a square slot
   (matching the 100-square footprint) and a rail spacer (matching the
   right-hand tab column width + gap). Anchored to the bottom of the
   overlay so the slot lines up with the actual .oe-tutorial-body which
   sits below the instruction panel. Height matches the body (100%
   minus the instruction panel row and the `top: -3.5em` extension). */
.oe-tutorial-congrats .oe-tutorial-congrats-align {
    position: absolute;
    left: 0;
    right: 0;
    /* Line the mirror's bottom up with the tutorial-area's bottom —
       the actual .oe-tutorial-body extends to the same bottom edge. */
    bottom: 0;
    /* Height matches the body: overlay is inset:0 with top:-3.5em, so
       total overlay height is area-height + 3.5em; the instruction
       panel + its parent gap occupy ~4em (2.6em min-height + 0.4em
       vertical padding + 2px border + 0.75em sub-activity gap), so
       body height ≈ area-height − 4em. */
    top: calc(3.5em + 4em);
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1em;
    pointer-events: none;
    z-index: 2;
}

/* Slot mirrors .oe-100-square — aspect-ratio 1 fills the body height
   so its centre lines up with the actual 100-square's centre. */
.oe-tutorial-congrats .oe-tutorial-congrats-slot {
    aspect-ratio: 1;
    max-height: 100%;
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Rail spacer mirrors .oe-tutorial-right-col width so the slot ends
   up biased left by the same amount as the real 100-square. */
.oe-tutorial-congrats .oe-tutorial-congrats-rail {
    width: 4.4em;
    flex: 0 0 auto;
}

/* Bubble card centred inside the slot — no background/border so the
   Flash congratulations bubble (with its own black outline) reads as
   a single speech-bubble. */
.oe-tutorial-congrats .oe-tutorial-congrats-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
    pointer-events: auto;
    max-width: 100%;
    text-align: center;
    z-index: 2;
}

/* Back pencil — sits on the LEFT edge of the tutorial-area, vertically
   centred on the body (below the instruction panel). Offset from the
   bottom by half the body height so it lines up with the 100-square
   centre. Overlay's own extension over the nav band (top: -3.5em)
   pushes the whole coordinate system up, so bottom is measured from
   the tutorial-area's bottom edge. */
.oe-tutorial-congrats .oe-tutorial-congrats-back {
    position: absolute;
    left: 1em;
    /* Body height ≈ (overlay height − 3.5em extension − 4em panel row),
       so half of that is our lift from the overlay's bottom. */
    bottom: calc((100% - 7.5em) / 2);
    transform: translateY(50%);
    pointer-events: auto;
    z-index: 2;
}

/* Repeat pencil (Flash frame_07.as:100 repeatButton). Sits at the
   bottom-right corner of the tutorial area at end-state — Flash placed
   the repeat pencil at bottom-right; the HTML5 equivalent is anchored
   via absolute positioning inside the celebration overlay. Right-
   pointing pencil (the default direction) is intentional: matches the
   pencil family convention used elsewhere for "forward" actions
   (back = left-pointing, repeat/next = right-pointing). */
.oe-tutorial-congrats .oe-tutorial-congrats-repeat {
    position: absolute;
    /* Nudged in from the sub-activity edge so the pencil body clears
       the celebration bubble and reads as a corner affordance. The
       larger right offset accommodates the pencil nib (right-pointing
       pencils extend ~1.4em past the label body) so the full nib stays
       inside the tutorial-area bounds. Offsets compensate for the
       overlay's `top: -3.5em` (which extends the overlay up over the
       activity-nav band) — the pencil should sit within the tutorial-
       area bounds, not float over the top nav. */
    right: 1.8em;
    bottom: 1em;
    pointer-events: auto;
    z-index: 2;
}