/* ==========================================================================
   Family DEV gate (DEV hostnames only; overlay is hidden unless locked)
   ========================================================================== */

.dev-gate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 20000;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: #0f172a;
}

html.dev-gate-locked .dev-gate-overlay,
.dev-gate-overlay.is-on {
    display: flex;
}

html.dev-gate-locked {
    overflow: hidden;
}

html.dev-gate-locked body {
    overflow: hidden;
}

.dev-gate-card {
    width: 100%;
    max-width: 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem 1.15rem 1.15rem;
    background: #ffffff;
    border-radius: 1.15rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.dev-gate-kicker {
    margin: 0;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
}

.dev-gate-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dev-gate-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.85rem;
    border: 2px solid #cbd5e1;
    border-radius: 0.75rem;
    font-size: 1.05rem;
    color: #1e293b;
    background: #f8fafc;
}

.dev-gate-input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

.dev-gate-submit {
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0.75rem;
    background: #10b981;
    color: #ffffff;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

.dev-gate-submit:active,
.dev-gate-submit.is-pressed {
    transform: translateY(1px);
}

/* ==========================================================================
   MathQuest Kids - Modern, Playful Design System & Stylesheet
   ========================================================================== */

@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/fredoka-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Fredoka';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/fredoka-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/plus-jakarta-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/plus-jakarta-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Base Neutral Palette */
    --bg-base: #f8fafc;
    --bg-card: #ffffff;
    --bg-card-secondary: #f1f5f9;
    --border-light: #e2e8f0;
    --border-medium: #cbd5e1;

    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    /* Theme Dynamic Colors (Defaults: Emerald) */
    --theme-primary: #10b981;
    --theme-primary-dark: #059669;
    --theme-primary-light: #d1fae5;
    --theme-glow: rgba(16, 185, 129, 0.25);

    /* Operation Colors */
    --color-add: #3b82f6;
    --color-add-light: #dbeafe;
    --color-sub: #f97316;
    --color-sub-light: #ffedd5;
    --color-mul: #8b5cf6;
    --color-mul-light: #ede9fe;
    --color-div: #ec4899;
    --color-div-light: #fce7f3;

    /* Badges & Rewards */
    --color-gold: #f59e0b;
    --color-gold-light: #fef3c7;
    --color-coral: #ef4444;

    /* Typography */
    --font-heading: 'Fredoka', cursive, sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-math: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Radii & Shadows */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-bouncy: 0 8px 0 rgba(0, 0, 0, 0.1);

    /* Room for the docked tab bar. The bar itself hides on scroll down. */
    --kid-tab-bar-space: calc(52px + 0.4rem + 2px + env(safe-area-inset-bottom, 0px));
}

/* Theme Variations */
body[data-theme-color="blue"] {
    --theme-primary: #3b82f6;
    --theme-primary-dark: #2563eb;
    --theme-primary-light: #dbeafe;
    --theme-glow: rgba(59, 130, 246, 0.25);
}

body[data-theme-color="purple"] {
    --theme-primary: #8b5cf6;
    --theme-primary-dark: #7c3aed;
    --theme-primary-light: #ede9fe;
    --theme-glow: rgba(139, 92, 246, 0.25);
}

body[data-theme-color="coral"] {
    --theme-primary: #f97316;
    --theme-primary-dark: #ea580c;
    --theme-primary-light: #ffedd5;
    --theme-glow: rgba(249, 115, 22, 0.25);
}

body[data-theme-color="gold"] {
    --theme-primary: #f59e0b;
    --theme-primary-dark: #d97706;
    --theme-primary-light: #fef3c7;
    --theme-glow: rgba(245, 158, 11, 0.25);
}

/* Global Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

button, input, select, .op-chip, .keypad-btn, .choice-bubble-btn {
    touch-action: manipulation;
    -webkit-touch-callout: none;
}

/* App, not web page: a long press anywhere must not start an iOS text selection (handles + Copy menu; on a button
   it also cancels the press). Only places a kid types stay selectable. iOS Safari still needs the -webkit- prefix. */
body, button, .btn {
    -webkit-user-select: none;
    user-select: none;
}

input, textarea, [contenteditable]:not([contenteditable="false"]) {
    -webkit-user-select: text;
    user-select: text;
}

/* Codes a parent may need to copy by hand when the clipboard is unavailable (the copy alert shows them instead). */
.share-code-val,
.room-code-val,
#styledAlertContent code,
#styledAlertContent strong {
    -webkit-user-select: text;
    user-select: text;
}

/* Every button answers a press, even ones with no pressed style of their own. The whole selector sits inside
   `:where`, so this rule has zero specificity and any component's own :active / transform / filter still wins.
   `is-pressed` is set from JS (installPressFeedback) because iOS delays or drops :active inside scrolling panels.
   Drag pieces (Number Blocks, ten-frames) keep their size under the finger, and Muncher cells keep their own
   press, which marks only the legal moves. */
:where(button:not(:disabled):not(.nb-block, .muncher-cell, .ten-frames-wrapper *):active,
       button:not(:disabled):not(.nb-block, .muncher-cell, .ten-frames-wrapper *).is-pressed) {
    transform: scale(0.96);
    filter: brightness(0.94);
}

html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    touch-action: manipulation;
}

body {
    background-color: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.5;
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--kid-tab-bar-space);
    -webkit-touch-callout: none;
}

/* Crawlable intro: in the HTML for search engines, clipped out of the kid UI. */
.seo-intro {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard users who tab into its links see it while they are there. */
.seo-intro:focus-within {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0.75rem 1rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: #fff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.2);
}

.seo-intro:focus-within h1 {
    font-size: 1.1rem;
    margin: 0 0 0.35rem;
}

.seo-intro nav a {
    margin-right: 1rem;
}

/* Confetti Layer - hidden by default to prevent intercepting touches */
.confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    display: none;
}

/* ==========================================================================
   Header & Profile Selector
   ========================================================================== */

.app-header {
    background: var(--bg-card);
    border-bottom: 2px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    /* viewport-fit=cover: keep pills / Learn peek below the Dynamic Island */
    padding-top: env(safe-area-inset-top, 0px);
}

.header-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.45rem 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: nowrap;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Shared kid close / dismiss ✕ — Learn, Hint pages, Number Blocks, modals, Arcade cabinets */
.mq-close-x,
.hint-page-close,
.nb-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 3px solid #1e293b;
    border-radius: 0.85rem;
    background: #ef4444;
    color: #fff;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
}

.mq-close-x:focus-visible,
.hint-page-close:focus-visible,
.nb-close-btn:focus-visible {
    outline: 3px solid #1e293b;
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .mq-close-x,
    .hint-page-close,
    .nb-close-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.35rem;
    }
}

.learn-focus-exit {
    display: none;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-icon {
    width: 44px;
    height: 44px;
    background: var(--theme-primary-dark);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 10px var(--theme-glow);
}

.brand-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.brand-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.brand-version {
    font-family: var(--font-math);
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--bg-card-secondary);
    color: var(--theme-primary-dark);
    padding: 0.12rem 0.45rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-medium);
    vertical-align: middle;
}

.brand-guide-link {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--theme-primary-dark);
    text-decoration: none;
    background: var(--theme-primary-light);
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--theme-primary);
}

.brand-tagline {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Header Profile Group */
.header-profile-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.header-today-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 44px;
    padding: 0.3rem 0.55rem;
    background: var(--color-gold-light);
    border: 2px solid #fde68a;
    border-radius: var(--radius-full);
    color: #b45309;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
}

.header-today-pill.is-done {
    background: var(--theme-primary-light);
    border-color: var(--theme-primary);
    color: var(--theme-primary-dark);
}

.header-today-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.header-today-label {
    flex-shrink: 0;
}

.reward-pill, .streak-pill {
    background: var(--bg-card-secondary);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-full);
    padding: 0.35rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    flex: 0 0 auto;
}

button.header-stat-btn {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
}

@media (hover: hover) {
    button.header-stat-btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }
}

.header-coin-icon {
    display: inline-flex;
    align-items: center;
    font-size: 1.05rem;
    line-height: 1;
}

.header-cal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.header-cal-tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 1.18em;
    height: 1.22em;
    background: #fff;
    border: 2px solid #1e293b;
    border-radius: 0.24em;
    box-sizing: border-box;
}

.header-cal-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.3em;
    background: #0369a1;
    border-bottom: 1.5px solid #1e293b;
}

.header-cal-ring {
    position: absolute;
    top: -0.12em;
    width: 0.2em;
    height: 0.26em;
    background: #fff;
    border: 1.5px solid #1e293b;
    border-radius: 999px;
    z-index: 1;
}

.header-cal-ring:first-child {
    left: 0.2em;
}

.header-cal-ring:nth-child(2) {
    right: 0.2em;
}

.header-cal-face {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading);
    font-size: 0.58em;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
    padding-bottom: 0.05em;
    letter-spacing: -0.04em;
}

.header-cal-face.is-wide {
    font-size: 0.5em;
}

.reward-pill {
    color: #b45309;
    background: var(--color-gold-light);
    border-color: #fde68a;
}

.streak-pill {
    color: #c2410c;
    background: var(--color-sub-light);
    border-color: #fed7aa;
}

.profile-switch-btn {
    background: var(--bg-card-secondary);
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-full);
    padding: 0.2rem 0.7rem 0.2rem 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 44px;
    min-height: 44px;
    flex: 0 1 auto;
    max-width: 100%;
}

@media (hover: hover) {
    .profile-switch-btn:hover {
        border-color: var(--theme-primary);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }
}

.active-avatar {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    padding: 0;
}

.profile-portrait {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.profile-portrait-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.profile-portrait-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.25rem;
    line-height: 1;
}

.profile-info-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;
}

.profile-name {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 7.5rem;
}

.profile-age-badge {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--theme-primary-dark);
}

.icon-btn {
    background: var(--bg-card-secondary);
    border: 2px solid var(--border-light);
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s;
    flex-shrink: 0;
}

@media (hover: hover) {
    .icon-btn:hover {
        transform: scale(1.08);
    }
}

/* ==========================================================================
   Navigation Tabs
   ========================================================================== */

.nav-bar {
    background: var(--bg-card);
    border-top: 2px solid var(--border-light);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.2rem 0.12rem calc(0.2rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-wrap: nowrap;
    gap: 0.08rem;
}

.nav-tab {
    background: none;
    border: none;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-secondary);
    padding: 0.22rem 0.04rem;
    min-width: 44px;
    min-height: 52px;
    flex: 1 1 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    cursor: pointer;
    border-top: 3px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
}

.tab-emoji {
    font-size: 1.3rem;
    line-height: 1;
}

@media (hover: hover) {
    .nav-tab:hover {
        color: var(--text-primary);
    }
}

.nav-tab.active {
    color: var(--theme-primary-dark);
    border-top-color: var(--theme-primary);
}

.nav-tab-secondary {
    display: none;
}

/* Who's playing lives in the dock, not the header. Modal door, not a pane. */
.nav-tab-profile {
    min-width: 44px;
    min-height: 52px;
    gap: 0.06rem;
    padding: 0.14rem 0.04rem 0.16rem;
}

.nav-tab-profile .tab-profile-avatar,
.nav-tab-profile .active-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.nav-tab-profile .tab-profile-name {
    font-size: inherit;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-tab-profile.is-open {
    color: var(--theme-primary-dark);
    border-top-color: var(--theme-primary);
}

/* Narrow phones: one step down so Arcade / World stay one unwrapped row. */
@media (max-width: 340px) {
    .nav-tab {
        font-size: 0.86rem;
    }

    .tab-emoji {
        font-size: 1.2rem;
    }
}

.kid-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    transform: translateY(0);
    transition: transform 0.2s ease;
}

/* X-style: hide on scroll down, return on scroll up. Not always visible. */
.kid-tab-bar.is-away {
    transform: translateY(100%);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .kid-tab-bar {
        transition: none;
    }
}

body.learn-focus,
body.arcade-open {
    padding-bottom: 0;
}

body.learn-focus .kid-tab-bar,
body.arcade-open .kid-tab-bar {
    display: none;
}

/* SHEET-04: "Keep going" sits on top of the tab bar while a Learn question waits behind the closed sheet. */
.learn-keep-going-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: calc(100% - 1rem);
    max-width: 560px;
    min-height: 44px;
    margin: 0.35rem auto 0;
    padding: 0.4rem 0.85rem;
    border: 2px solid var(--theme-primary);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
    touch-action: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.learn-keep-going-bar[hidden] {
    display: none;
}

.learn-keep-going-title {
    flex: none;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--theme-primary);
    color: #fff;
    font-size: 0.8rem;
}

.learn-keep-going-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.learn-keep-going {
    padding-bottom: calc(var(--kid-tab-bar-space) + 52px);
}

/* ==========================================================================
   Main Content Layout
   ========================================================================== */

.main-content {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 1rem 1.25rem;
    flex: 1;
}

/* My World / Studio needs a wider column on laptop so the doll stage
   is not a phone-width strip beside the wardrobe. */
@media (min-width: 1100px) {
    .main-content:has(#worldTab.active) {
        max-width: 1100px;
    }
}

/* Avatar Studio: page scrolls normally. overflow-x: clip (not hidden)
   so position:sticky on the doll stage still works. Header scrolls away
   so only the stage box stays pinned. */
html:has(#subviewAvatar.active),
body:has(#subviewAvatar.active) {
    overflow-x: clip;
}

body:has(#subviewAvatar.active) .app-header {
    position: relative;
}

.tab-pane {
    display: none;
    animation: fadeIn 0.25s ease-out;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Arcade cabinet shelf — laid out like an app store: Today-style large title, a Game of the Day
   feature card, then an "All Games" list of icon rows with GET-style Play pills. Wood + gold per ARCADE_UX. */
.arcade-hero {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.35rem 0.25rem 0.85rem;
    margin-bottom: 0.15rem;
    border-bottom: 2px solid rgba(146, 64, 14, 0.22);
}

.arcade-kicker {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #b45309;
}

.arcade-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 2.15rem;
    line-height: 1.05;
    color: var(--text-primary, #1e293b);
}

.arcade-game-grid {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding-top: 0.85rem;
}

.arcade-shelf-loading {
    margin: 0.5rem 0 0;
    font-weight: 700;
    color: var(--text-muted, #64748b);
}

.arcade-shelf-retry {
    align-self: flex-start;
    min-height: 44px;
    margin: 0.5rem 0 0;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    border: 3px solid #78350f;
    background: #fde68a;
    color: #78350f;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

/* --- Game loading screen (ARCADE-02): the first open of a game while its scripts download --- */
.arcade-load-screen {
    --arcade-accent: #f59e0b;
    position: fixed;
    inset: 0;
    z-index: 12600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    background:
        radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--arcade-accent) 55%, #1c1008) 0%, #1c1008 75%);
    color: #fffbeb;
    touch-action: manipulation;
}

.arcade-load-screen.hidden {
    display: none;
}

.arcade-load-back {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 3px solid #fde68a;
    background: rgba(28, 16, 8, 0.6);
    color: #fde68a;
    font: inherit;
    font-size: 1.3rem;
    font-weight: 800;
    cursor: pointer;
}

.arcade-load-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: min(340px, 100%);
    text-align: center;
}

.arcade-load-icon {
    display: block;
    width: clamp(84px, 22vmin, 128px);
    height: clamp(84px, 22vmin, 128px);
    font-size: clamp(64px, 18vmin, 104px);
    line-height: 1;
    animation: arcade-load-bob 1.1s ease-in-out infinite;
}

.arcade-load-icon svg {
    width: 100%;
    height: 100%;
}

@keyframes arcade-load-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .arcade-load-icon { animation: none; }
}

.arcade-load-title {
    margin: 0;
    font-family: var(--font-heading, inherit);
    font-size: clamp(1.4rem, 5vmin, 2rem);
    font-weight: 800;
    color: #fff;
}

.arcade-load-status {
    margin: 0;
    font-weight: 700;
    color: #fde68a;
}

.arcade-load-bar {
    width: 100%;
    height: 16px;
    border-radius: 999px;
    border: 3px solid #fde68a;
    background: rgba(28, 16, 8, 0.55);
    overflow: hidden;
}

.arcade-load-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #fbbf24, #fde68a);
    transition: width 0.2s ease-out;
}

.arcade-load-bar.hidden,
.arcade-load-retry.hidden {
    display: none;
}

.arcade-load-retry {
    min-height: 48px;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    border: 3px solid #78350f;
    background: #fde68a;
    color: #78350f;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

/* --- Game of the Day --- */
.arcade-feature {
    --arcade-accent: #f59e0b;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "copy art"
        "foot foot";
    align-items: center;
    gap: 0.75rem 0.9rem;
    width: 100%;
    min-height: 13rem;
    padding: 1.1rem 1.1rem 0.9rem;
    border-radius: 1.35rem;
    border: 3px solid #f59e0b;
    background:
        radial-gradient(130% 120% at 100% 0%, var(--arcade-accent) 0%, transparent 62%),
        linear-gradient(160deg, #1c1008 0%, #3d2410 70%, #5c3412 120%);
    box-shadow: 0 5px 0 #92400e, 0 14px 28px rgba(28, 16, 8, 0.22);
    color: #fffbeb;
    text-align: left;
    font: inherit;
    cursor: pointer;
    appearance: none;
    overflow: hidden;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.arcade-feature:active {
    transform: translateY(3px) scale(0.99);
    box-shadow: 0 2px 0 #92400e, 0 8px 16px rgba(28, 16, 8, 0.2);
}

@media (hover: hover) {
    .arcade-feature:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 0 #92400e, 0 18px 32px rgba(245, 158, 11, 0.3);
    }
}

.arcade-feature-copy {
    grid-area: copy;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.arcade-feature-kicker {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fde68a;
}

.arcade-feature-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.05;
    color: #fffbeb;
    text-shadow: 0 2px 0 rgba(28, 16, 8, 0.55);
}

.arcade-feature-tag {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fef3c7;
}

.arcade-feature-art {
    grid-area: art;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.25rem;
    height: 7.25rem;
    border-radius: 1.6rem;
    background: #fffbeb;
    border: 3px solid #92400e;
    box-shadow: 0 5px 0 #92400e;
    transform: rotate(4deg);
}

.arcade-feature-art .arcade-game-mark {
    width: 6.1rem;
    height: 6.1rem;
}

.arcade-feature-foot {
    grid-area: foot;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(253, 230, 138, 0.28);
}

.arcade-feature-meta {
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fde68a;
}

/* GET-style pill: gold on wood, brown ink, press shadow (ARCADE_UX pills). */
.arcade-get-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.6rem;
    min-height: 2.25rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 3px solid #92400e;
    background: linear-gradient(180deg, #fde68a 0%, #fbbf24 55%, #f59e0b 100%);
    box-shadow: 0 3px 0 #92400e;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7c2d12;
}

/* --- All Games list --- */
.arcade-section-title {
    margin: 0.6rem 0.25rem -0.2rem;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--text-primary, #1e293b);
}

.arcade-list {
    list-style: none;
    margin: 0;
    padding: 0.2rem 0.85rem;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 1.5rem;
    border-radius: 1.2rem;
    border: 3px solid #78350f;
    background: #2a1c10;
    box-shadow: 0 4px 0 #92400e;
}

@media (min-width: 760px) {
    .arcade-list {
        grid-template-columns: 1fr 1fr;
    }
}

.arcade-list-item {
    margin: 0;
    border-bottom: 1px solid rgba(253, 230, 138, 0.16);
}

.arcade-list-item:last-child {
    border-bottom: 0;
}

@media (min-width: 760px) {
    .arcade-list-item:nth-last-child(2):nth-child(odd) {
        border-bottom: 0;
    }
}

.arcade-game-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 5.6rem;
    padding: 0.75rem 0;
    border: 0;
    background: none;
    color: #fffbeb;
    text-align: left;
    cursor: pointer;
    appearance: none;
    font: inherit;
    transition: transform 0.14s ease;
}

.arcade-game-card:active:not(:disabled) {
    transform: scale(0.98);
}

.arcade-game-card.is-muncher,
.arcade-game-card.is-live {
    color: #fffbeb;
}

.arcade-game-card.is-soon {
    opacity: 0.6;
    cursor: default;
}

@media (hover: hover) {
    .arcade-game-card:hover:not(:disabled) .arcade-game-icon-wrap {
        transform: translateY(-2px) rotate(-3deg);
    }
}

.arcade-game-icon-wrap {
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.05rem;
    background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
    box-shadow: 0 3px 0 #92400e;
    border: 3px solid #92400e;
    transition: transform 0.16s ease;
}

.arcade-game-card.is-soon .arcade-game-icon-wrap {
    background: #1c1008;
    box-shadow: none;
    border-style: dashed;
    border-color: #78350f;
    font-size: 1.6rem;
}

.arcade-game-mark {
    width: 3.4rem;
    height: 3.4rem;
    display: block;
}

.arcade-game-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.arcade-game-name {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fffbeb;
}

.arcade-game-tag {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fde68a;
}

.arcade-game-meta {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #d6b98c;
}

.arcade-game-solved {
    color: #86efac;
    white-space: nowrap;
}

.arcade-game-cta.arcade-get-pill {
    min-width: 4.1rem;
    min-height: 2.1rem;
    padding: 0 0.85rem;
    font-size: 0.82rem;
}

.arcade-game-card.is-soon .arcade-game-cta {
    background: #3d2410;
    border-color: #78350f;
    box-shadow: none;
    color: #d6b98c;
}

@media (max-width: 380px) {
    .arcade-feature {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 0;
    }
    .arcade-feature-art {
        width: 5.4rem;
        height: 5.4rem;
        border-radius: 1.25rem;
    }
    .arcade-feature-art .arcade-game-mark {
        width: 4.5rem;
        height: 4.5rem;
    }
    .arcade-feature-title {
        font-size: 1.5rem;
    }
    .arcade-game-icon-wrap {
        width: 3.5rem;
        height: 3.5rem;
    }
    .arcade-game-mark {
        width: 2.95rem;
        height: 2.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .arcade-feature,
    .arcade-game-card,
    .arcade-game-icon-wrap {
        transition: none;
    }
}

.muncher-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.muncher-title-icon {
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.muncher-title-icon .arcade-game-mark {
    width: 2.55rem;
    height: 2.55rem;
}

.card {
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}

.section-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

/* ==========================================================================
   Learn tab (Tab 1) - Consolidated Controls
   ========================================================================== */

.mode-selection-bar {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.15rem 1.35rem;
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.topics-selection-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.topic-picker-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: stretch;
    width: 100%;
}

.topic-row-label {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #94a3b8);
    padding-top: 0.55rem;
    line-height: 1.1;
}

.topic-category-chips {
    /* row container; chips live in .topic-cat-chip-list */
}

.topic-cat-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
}

.topic-cat-chip {
    background: transparent;
    border: 2px solid transparent;
    border-bottom: 3px solid transparent;
    border-radius: 0.55rem 0.55rem 0.35rem 0.35rem;
    padding: 0.45rem 0.7rem;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: all 0.18s ease;
    flex: 1 1 auto;
    min-height: 44px;
    white-space: nowrap;
}

@media (hover: hover) {
    .topic-cat-chip:hover {
        color: var(--theme-primary-dark);
        background: rgba(0, 0, 0, 0.03);
    }
}

.topic-cat-chip.active {
    background: var(--theme-primary);
    border-color: var(--theme-primary-dark);
    color: #ffffff;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

.topic-skill-row {
    background: var(--bg-card-secondary, #f1f5f9);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.65rem;
}

.topic-skill-chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    padding: 0.15rem 0 0.1rem;
}

.topic-skill-chip-list::-webkit-scrollbar {
    height: 5px;
}

.topic-skill-chip-list::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 999px;
}

.operation-chips {
    /* skill row container; chips live in .topic-skill-chip-list */
}

.op-chip {
    background: #ffffff;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.65rem;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
    box-sizing: border-box;
    min-height: 44px;
}

/* Hub skill tiles wrap so the picker can use the screen */
.topic-skill-chip-list .op-chip {
    flex: 1 1 7.6rem;
    width: auto;
    min-width: 7.2rem;
    max-width: none;
}

.op-chip .op-symbol {
    font-size: 1.1rem;
}

@media (hover: hover) {
    .op-chip:hover {
        border-color: var(--border-medium);
        transform: translateY(-2px);
        background: #ffffff;
        box-shadow: var(--shadow-sm);
    }
}

.op-chip.active {
    background: var(--theme-primary-light);
    border-color: var(--theme-primary);
    color: var(--theme-primary-dark);
    box-shadow: 0 4px 12px var(--theme-glow);
    transform: translateY(-1px);
}

/* Skill row scrolls horizontally — no vertical lift (Chrome clips overflow-x containers) */
.topic-skill-chip-list .op-chip.active {
    transform: none;
}

@media (hover: hover) {
    .topic-skill-chip-list .op-chip:hover {
        transform: none;
    }
}

@media (hover: hover) {
    .topic-skill-chip-list .op-chip:hover {
        border-color: var(--theme-primary);
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06), var(--shadow-sm);
    }
}

.topic-skill-chip-list .op-chip.active {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2), 0 3px 10px var(--theme-glow);
}

/* ==========================================================================
   Learn hub vs focus — two modes, not one stacked page
   ========================================================================== */

.learn-hub,
.learn-focus {
    width: 100%;
}

body.learn-hub #learnHub,
body.learn-hub .learn-hub {
    display: block;
}

body.learn-hub #learnFocus,
body.learn-hub .learn-focus {
    display: none;
}

body.learn-focus #learnHub,
body.learn-focus .learn-hub {
    display: block;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

/* Sheet scroll must not chain to the Learn hub / page behind it. */
html.learn-focus,
html.learn-focus body,
body.learn-focus {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Hint overlays sit above the Learn sheet. Keep right-axis slide +
   in-overlay pan even while the hub/body scroll lock is on. */
html.learn-focus .hint-page-overlay,
body.learn-focus .hint-page-overlay,
body.learn-focus .number-blocks-overlay,
body.learn-focus .strategy-hints-overlay,
body.learn-focus .mul-div-hints-overlay,
body.learn-focus .visual-hints-overlay {
    touch-action: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
}

html.learn-focus .hint-page-header,
html.learn-focus .hint-page-edge-grab,
html.learn-focus .hint-page-handle,
html.learn-focus .hint-page-scrim,
body.learn-focus .hint-page-header,
body.learn-focus .hint-page-edge-grab,
body.learn-focus .hint-page-handle,
body.learn-focus .hint-page-scrim {
    touch-action: pan-x;
}

/* SPAWN shelf fill still drags right to dismiss (pan-x), but the Learn lock
 * must not freeze the column: short landscape phones scroll it to reach
 * +100 / Clear / fuse. See .nb-shelf overflow-y:auto. */
html.learn-focus .nb-shelf,
html.learn-focus .nb-shelf-label,
html.learn-focus .nb-shelf-hint,
body.learn-focus .nb-shelf,
body.learn-focus .nb-shelf-label,
body.learn-focus .nb-shelf-hint {
    touch-action: pan-x pan-y;
}

html.learn-focus .hint-page-shell,
html.learn-focus .hint-page-body,
html.learn-focus .nb-shell,
html.learn-focus .mdh-shell,
html.learn-focus .vh-shell,
html.learn-focus .sh-stage,
html.learn-focus .nb-stage,
html.learn-focus .nb-stage-row,
html.learn-focus .mdh-stage,
html.learn-focus .vh-stage,
body.learn-focus .hint-page-shell,
body.learn-focus .hint-page-body,
body.learn-focus .nb-shell,
body.learn-focus .mdh-shell,
body.learn-focus .vh-shell,
body.learn-focus .sh-stage,
body.learn-focus .nb-stage,
body.learn-focus .nb-stage-row,
body.learn-focus .mdh-stage,
body.learn-focus .vh-stage {
    touch-action: pan-y;
}

body.learn-focus #learnFocus,
body.learn-focus .learn-focus:not(.hidden) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

body.learn-focus .main-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.45rem 0.7rem 0.7rem;
}

body.learn-focus #playTab.tab-pane.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

body.learn-focus .arena-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: auto;
    overflow: visible;
    padding: 0.7rem 0.75rem 0.85rem;
}

/* Learn question sheet — slides up from the bottom over a soft scrim */
.learn-sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(15, 23, 42, 0.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
    overscroll-behavior: none;
    touch-action: none;
}

body.learn-focus #learnFocusScrim:not(.hidden),
body.learn-focus .learn-sheet-scrim:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

#learnFocus.learn-sheet,
body.learn-focus #learnFocus.learn-sheet:not(.hidden) {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--learn-sheet-top, 3.6rem) + 11px);
    bottom: 0;
    z-index: 90;
    width: auto;
    max-width: none;
    transform: translateY(110%);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 1.15rem 1.15rem 0 0;
    background: var(--bg-card, #fff);
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.18);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
}

#learnFocus.learn-sheet.is-open,
body.learn-focus #learnFocus.learn-sheet.is-open:not(.hidden) {
    transform: translateY(0);
}

#learnFocus.learn-sheet.is-dragging,
body.learn-focus #learnFocus.learn-sheet.is-dragging:not(.hidden) {
    transition: none;
}

#learnFocus.learn-sheet.is-dismissing,
body.learn-focus #learnFocus.learn-sheet.is-dismissing:not(.hidden) {
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Learn sheet: one scrolling column. No pinned keypad, no pinned mode chips. */
#learnFocus.learn-sheet,
body.learn-focus #learnFocus.learn-sheet:not(.hidden) {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

body.learn-focus .arena-card {
    gap: 0.55rem;
}

body.learn-focus .learn-sheet-handle {
    flex-shrink: 0;
}

body.learn-focus .arena-header,
body.learn-focus .learn-mode-with-help,
body.learn-focus .interaction-zone {
    position: static;
}

/* Tip + question + diagram + Answer stay in the same flow as the keypad. */
body.learn-focus .learn-sheet-prompt {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    gap: 0.55rem;
    overflow: visible;
}

body.learn-focus .clock-visualizer-container:not(.hidden),
body.learn-focus .visual-models-section:not(.hidden) {
    flex: 0 0 auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
}

body.learn-focus .visual-models-section {
    margin-bottom: 0;
    padding: 0.45rem 0.7rem;
}

body.learn-focus .visual-helper-container {
    min-height: 0;
}

body.learn-focus .equation-display {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    margin: 0;
    justify-content: center;
    overflow: visible;
}

body.learn-focus .equation-row-wrapper,
body.learn-focus .equation-center-slot {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    overflow: visible;
}

body.learn-focus .equation-text,
body.learn-focus .vertical-equation-container {
    min-height: 0;
}

body.learn-focus .time-prompt-container {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    justify-content: flex-start;
    overflow: visible;
}

body.learn-focus .time-prompt-container .equation-word-prompt,
body.learn-focus .time-answer-row {
    flex-shrink: 0;
}

body.learn-focus .time-prompt-container .prompt-inline-visual:not(.hidden) {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

body.learn-focus .interaction-zone {
    flex: 0 0 auto;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
}

.learn-sheet-handle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    touch-action: none;
    cursor: grab;
}

.learn-sheet-handle::after {
    content: '';
    width: 2.6rem;
    height: 0.38rem;
    border-radius: 999px;
    background: #94a3b8;
}

.learn-sheet-grab {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    z-index: 2;
    pointer-events: auto;
    touch-action: none;
}

/* SHEET-02: ⌄ by the handle closes the sheet (same slide as a swipe). Above the grab strip. */
.learn-sheet-close {
    position: absolute;
    top: 4px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
}

.learn-sheet-close:active {
    background: #e2e8f0;
}

body.learn-focus .app-header {
    /* Stay pinned in the sheet peek even if a scroll ancestor unsticks sticky. */
    position: sticky;
    top: 0;
    z-index: 120;
    padding-top: env(safe-area-inset-top, 0px);
}

@media (prefers-reduced-motion: reduce) {
    .learn-sheet-scrim,
    #learnFocus.learn-sheet {
        transition: none;
    }
}

/* SHEET-03: the top bar is ⭐ · 🪙 · 🔇 on every tab; ⭐ hides only until there is a kid to count for. */
.header-today-pill.is-empty {
    display: none;
}

/* SHEET-03: the 🔥 answer streak sits in the sheet's handle strip, left of the handle (no height of its own).
   Under the grab strip, so a swipe that starts on it still moves the sheet. */
#learnFocus > .streak-multiplier {
    position: absolute;
    top: 9px;
    left: 12px;
    z-index: 1;
    pointer-events: none;
    font-size: 0.82rem;
    line-height: 1;
    padding: 0.32rem 0.6rem;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .header-container {
        padding: 0.35rem 0.5rem;
        gap: 0.35rem;
    }

    .header-profile-group {
        gap: 0.28rem;
    }

    .reward-pill, .streak-pill {
        padding: 0.28rem 0.5rem;
        gap: 0.22rem;
        font-size: 0.92rem;
    }

    .header-today-pill {
        font-size: 0.78rem;
        padding: 0.3rem 0.45rem;
        gap: 0.2rem;
    }

    body.learn-focus .equation-display {
        min-height: 0;
    }

    body.learn-focus .equation-text {
        min-height: 0;
        font-size: 2.15rem;
    }

    body.learn-focus .vertical-equation-container {
        min-height: 0;
    }

    body.learn-focus .keypad-btn {
        min-height: 44px;
        padding: 0.45rem 0.3rem;
    }
}

@media (min-width: 768px) {
    .topic-skill-chip-list .op-chip {
        flex: 1 1 8.4rem;
        min-height: 48px;
    }
}

.progress-tools-card {
    margin-bottom: 1rem;
}

.progress-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.progress-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.55rem 0.7rem;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-card-secondary);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

@media (hover: hover) {
    .progress-tool-btn:hover {
        border-color: var(--theme-primary);
    }
}

.secondary-tab-back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0.75rem;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

/* ==========================================================================
   Math Question Arena
   ========================================================================== */

.arena-card {
    text-align: center;
    padding: 1.25rem 1.25rem 1.5rem;
    border: 3px solid var(--theme-primary);
    box-shadow: 0 12px 24px var(--theme-glow);
    position: relative;
    overflow: hidden;
}

.arena-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.34rem;
    margin-bottom: 0.75rem;
    flex-wrap: nowrap;
}

/* SHEET-03: one row. History navigation (Prev | Question # | Next/live) leads the Keypad / Choice row,
   so the sheet spends one toolbar's height, not two. */
.arena-counter-nav {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    column-gap: 0.2rem;
    width: auto;
    flex: 0 0 auto;
}

.arena-counter-nav #prevQuestionBtn {
    grid-column: 1;
    justify-self: start;
}

.arena-counter-nav #nextQuestionBtn {
    grid-column: 3;
    justify-self: end;
}

.arena-nav-btn {
    background: var(--bg-card-secondary);
    border: 1.5px solid var(--border-medium);
    border-radius: var(--radius-full);
    padding: 0.22rem 0.4rem;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

@media (hover: hover) {
    .arena-nav-btn:hover:not(:disabled) {
        background: #ffffff;
        border-color: var(--theme-primary);
        color: var(--theme-primary-dark);
        transform: translateY(-1px);
    }
}

/* The pill stays small, but its tap area is ~40px tall so a small finger does not miss it
   (8px more above and below; any more would cover the toolbar under it). */
.arena-nav-btn {
    position: relative;
}

.arena-nav-btn::after {
    content: '';
    position: absolute;
    inset: -8px -6px;
}

.arena-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: var(--border-light);
}

.arena-counter {
    grid-column: 2;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 0.62rem;
    line-height: 1.05;
    color: var(--text-secondary);
    white-space: nowrap;
}

.arena-counter strong {
    color: var(--text-primary);
    font-size: 1rem;
}

/* SHEET-03: in the one-row header the labelled chips stack their word under the icon, so Prev · # · Keypad ·
   Choice · Help · 🔊 fit across a 360px phone at the same 44px height. */
.arena-header .learn-mode-with-help .input-mode-chip,
.arena-header .learn-mode-with-help .equation-strategies-btn,
.arena-header .learn-mode-with-help #equationHelpBtn.help-icon-tenframe:not(.help-chip-icon-only),
.arena-header .learn-mode-with-help #equationHelpBtn.help-icon-strategies:not(.help-chip-icon-only),
.arena-header .learn-mode-with-help #readingReplayBtn,
.arena-header .learn-mode-with-help #mathVoiceReplayBtn {
    flex-direction: column;
    gap: 1px;
    min-width: 46px;
    padding: 0.1rem 0.3rem;
}

.arena-header .learn-mode-with-help .learn-chip-svg,
.arena-header .learn-mode-with-help .help-sparkle-svg {
    width: 22px;
    height: 22px;
}

.arena-header .learn-mode-with-help .learn-chip-icon {
    font-size: 1rem;
    line-height: 1;
}

.arena-header .learn-mode-with-help .learn-chip-label {
    font-size: 0.62rem;
}

/* #1716: K–G1 with sound on add 🔊 Hear it and the 🔊 Voice chip to that row (seven things with Strategies). On a narrow
   phone the row tightens its gaps and chips so they still fit; if they ever can't, Hint · Hear it · Voice wrap under
   the row instead of running off the sheet. */
.arena-header .learn-mode-with-help {
    flex-wrap: wrap;
    row-gap: 0.3rem;
}

@media (max-width: 380px) {
    .arena-header,
    .arena-header .learn-mode-with-help,
    .arena-header .learn-toolbar-pair,
    .arena-header .learn-help-pair {
        gap: 0.18rem;
    }
    .arena-header .learn-mode-with-help .input-mode-chip,
    .arena-header .learn-mode-with-help .equation-strategies-btn,
    .arena-header .learn-mode-with-help #equationHelpBtn.help-icon-tenframe:not(.help-chip-icon-only),
    .arena-header .learn-mode-with-help #equationHelpBtn.help-icon-strategies:not(.help-chip-icon-only),
    .arena-header .learn-mode-with-help #readingReplayBtn,
    .arena-header .learn-mode-with-help #mathVoiceReplayBtn {
        min-width: 42px;
        padding: 0.1rem 0.16rem;
    }
    .arena-header .learn-mode-with-help #equationHelpBtn.help-chip-icon-only,
    .arena-header .learn-mode-with-help .math-voice-toggle {
        width: 40px;
        min-width: 40px;
    }
}

/* The next-question slot holds no width while it is hidden (live question). */
.arena-counter-nav #nextQuestionBtn.hidden {
    display: none;
}

.arena-timer-badge {
    background: #fee2e2;
    border: 2px solid #f87171;
    color: #b91c1c;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    animation: timerPulse 1s infinite alternate;
}

@keyframes timerPulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

.streak-multiplier {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: #c2410c;
    background: var(--color-sub-light);
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
}

/* ==========================================================================
   Analog Clock & Time Mode Visualizer
   ========================================================================== */

.clock-visualizer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    animation: fadeIn 0.3s ease;
}

.clock-wrapper {
    width: 220px;
    height: 220px;
    /* A round box-shadow, not a drop-shadow filter. iOS Safari rasterised the
       filter layer only where it was on screen, so a clock redrawn while the
       kid was scrolled down came back with its top cut off. */
    border-radius: 50%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.analog-clock {
    width: 100%;
    height: 100%;
}

.clock-outer-rim {
    fill: #1e293b;
    stroke: #0f172a;
    stroke-width: 3;
}

.clock-face {
    fill: #ffffff;
    stroke: #e2e8f0;
    stroke-width: 2;
}

.clock-tick-major {
    stroke: #334155;
    stroke-width: 3;
    stroke-linecap: round;
}

.clock-tick-minor {
    stroke: #94a3b8;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.clock-number {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    fill: #1e293b;
    text-anchor: middle;
    dominant-baseline: central;
}

.clock-wedge {
    fill: rgba(249, 115, 22, 0.25);
    stroke: #f97316;
    stroke-width: 2;
    stroke-dasharray: 4, 4;
}

.clock-hour-hand {
    stroke: #2563eb;
    stroke-width: 7;
    stroke-linecap: round;
}

.clock-minute-hand {
    stroke: #ef4444;
    stroke-width: 4.5;
    stroke-linecap: round;
}

.clock-center-pin {
    fill: #f59e0b;
    stroke: #b45309;
    stroke-width: 2.5;
}

.clock-prompt-note {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 0.75rem;
    background: var(--bg-card-secondary);
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
}

/* #2061: on the Learn sheet the clock, the question, the Time box, the keypad and Submit fit one 390 × 844 screen
   (SHEET-03). Every Learn time question prints its own ask in the question pill, so the caption under the clock only
   said it twice; the face takes its size from the screen's height (220px on a tall screen, never under 150px). */
body.learn-focus .clock-prompt-note {
    display: none;
}

body.learn-focus .clock-visualizer-container {
    margin-bottom: 0;
}

body.learn-focus .clock-wrapper {
    width: clamp(150px, 19svh, 220px);
    height: clamp(150px, 19svh, 220px);
}

/* The smaller face keeps its numbers big enough to read (17 of the 220 viewBox clears the major ticks at r 85). */
body.learn-focus .clock-number {
    font-size: 17px;
}

/* ==========================================================================
   Multi-Model Visualizer for Visual Learners (Ten-Frames, Arrays, Number Line)
   ========================================================================== */

.visual-models-section {
    background: var(--bg-card-secondary);
    border: 2px dashed var(--border-medium);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    animation: fadeIn 0.25s ease;
}

.visual-models-toolbar {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.vmodel-tabs {
    display: inline-flex;
    background: #ffffff;
    padding: 3px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-light);
    gap: 4px;
}

.vmodel-tab {
    background: none;
    border: none;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.15s ease;
}

.vmodel-tab.active {
    background: var(--theme-primary);
    color: #ffffff;
    box-shadow: 0 2px 6px var(--theme-glow);
}

.visual-helper-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90px;
}

.vmodel-pane {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    container-type: inline-size;
}

/* ONE Learn Help visual fill — count_objects-class (~14rem row). New art in
   #promptInlineVisual / .vmodel-pane inherits this instead of shipping as a
   1.6rem postage stamp. Do not target Arcade, chips, or skill icons. */
.prompt-inline-visual > *:not(.word-story-badge),
.vmodel-pane > * {
    min-width: min(100%, 14rem);
    max-width: 100%;
    box-sizing: border-box;
}

/* 1. Ten-Frames Visualizer Model */
.ten-frames-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.ten-frames-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ten-frame-box {
    background: #ffffff;
    border: 3px solid #64748b;
    border-radius: var(--radius-sm);
    display: grid;
    /* Fill the Learn Help pane like .bond-ten-frame — fixed 36px cells sat as
       postage stamps (~52% of an 18rem card; smaller still on phone 28px). */
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem;
    padding: 0.45rem;
    box-shadow: var(--shadow-sm);
    width: min(100%, 14rem);
    max-width: 14rem;
    flex: 1 1 9rem;
    box-sizing: border-box;
    container-type: inline-size;
}

.ten-frame-cell {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
    box-sizing: border-box;
}

.ten-frames-wrapper.is-interactive .ten-frame-box {
    /* Wide enough for 44px cells on desktop; wrap to one frame per row on phone
       instead of shrinking/clipping the second frame. */
    width: min(100%, 16.5rem);
    max-width: 16.5rem;
    flex: 1 1 14rem;
    min-width: min(100%, 14rem);
    border-color: #1e293b;
    box-shadow: none;
}

.tf-tray-desk .ten-frame-box {
    /* Wide enough for 5 × 44px cells (same contract as interactive Help frames).
       Banks wrap to one-per-row inside the 390 tray so the 2×5 box never clips. */
    width: min(100%, 16.5rem);
    max-width: 16.5rem;
    flex: 1 1 14rem;
    min-width: min(100%, 14rem);
    padding: 0.28rem;
    gap: 0.22rem;
}

.tf-desk-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding-bottom: 0.15rem;
}

.tf-tray-desk {
    gap: 0.45rem;
    max-width: 390px;
    width: 100%;
    margin: 0 auto;
}

.tf-tray {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 3px solid #1e293b;
    border-radius: 18px;
    background: #e2e8f0;
    padding: 0.4rem 0.4rem 0.35rem;
    overflow: hidden;
}

.tf-tray-top {
    width: 100%;
}

.tf-pads,
.tf-banks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}

.tf-bank,
.tf-pocket {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    /* ≥16.5rem so two banks cannot squeeze into the 390 tray side-by-side
       when each needs a full 5 × 44px ten-frame (AUD-4 F-01). */
    min-width: min(100%, 14rem);
    flex: 1 1 16.5rem;
    background: #f8f4ec;
    border: 3px solid #1e293b;
    border-radius: 14px;
    padding: 0.3rem 0.3rem 0.4rem;
    box-sizing: border-box;
}

.tf-bank-label {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.02em;
}

.tf-pad-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    width: 100%;
    min-width: 0;
}

.tf-three-stage {
    display: block;
    width: 100%;
    max-width: 390px;
    height: min(52vw, 248px);
    border: 3px solid #1e293b;
    border-radius: 16px;
    background: #e2e8f0;
    touch-action: none;
    box-sizing: border-box;
}

.tf-desk.is-three-live .tf-tray {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.tf-rod-rail,
.tf-shelf-rail,
.tf-flat-rail,
.tf-cube-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.3rem;
    min-height: 0;
    width: 100%;
    max-width: 16.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.2rem;
    border: 3px solid #1e293b;
    border-radius: 12px;
    background: #fffdf8;
    box-sizing: border-box;
}

.tf-tens-shelf {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
}

.tf-tens-shelf .tf-rod-rail {
    max-width: 100%;
}

.tf-rod-chip,
.tf-flat-chip,
.tf-thousand-chip {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: grab;
    touch-action: none;
    flex: 0 0 auto;
}

.tf-rod-chip {
    width: min(100%, 6.6rem);
    height: 2.6rem;
    min-width: 44px;
    min-height: 44px;
}

.tf-flat-chip {
    width: min(100%, 5.2rem);
    height: 3.2rem;
    min-width: 44px;
    min-height: 44px;
}

.tf-thousand-chip {
    width: 3.2rem;
    height: 3.4rem;
    min-width: 44px;
    min-height: 44px;
}

.tf-rod-chip svg,
.tf-flat-chip svg,
.tf-thousand-chip svg {
    width: 100%;
    height: 100%;
    display: block;
}

.tf-tray-desk .token-blue,
.tf-tray-desk .token-orange,
.tf-tray-desk .token-purple {
    background: transparent;
}

.tf-tray-desk .token-orange {
    outline: 2px solid #334155;
    outline-offset: 1px;
}

.tf-frame-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 14rem;
    min-width: min(100%, 14rem);
}

.tf-frame-handle {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    min-height: 44px;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-full);
    border: 3px solid #1e293b;
    background: #fde68a;
    color: #1e293b;
    cursor: grab;
    touch-action: none;
}

.tf-pocket {
    min-height: 8.5rem;
    background: #f8f4ec;
}

.tf-pocket-art {
    width: min(100%, 8.5rem);
}

.tf-pocket-art svg {
    width: 100%;
    height: auto;
    display: block;
}

.tf-pocket-tray {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    min-height: 4.4rem;
    width: 100%;
}

.tf-desk .frame-token {
    width: 82%;
    height: 82%;
    max-width: 2.6rem;
    max-height: 2.6rem;
    border-radius: 0;
    background: none;
    box-shadow: none;
    animation: tfSnapIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
    position: relative;
}

.tf-desk .frame-token svg,
.tf-counter-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.tf-desk .frame-token.is-in-pocket {
    width: 2.4rem;
    height: 2.4rem;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    cursor: grab;
    touch-action: none;
    min-width: 44px;
    min-height: 44px;
}

.tf-counter.is-lifted,
.tf-rod-chip.is-lifted,
.tf-flat-chip.is-lifted,
.tf-thousand-chip.is-lifted,
.tf-frame-handle.is-lifted,
.tf-ghost.is-lifted {
    transform: translateY(-10px) scale(1.12);
    z-index: 6;
    box-shadow: 0 12px 0 rgba(30, 41, 59, 0.2);
}

.tf-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 80;
    margin: 0;
}

.tf-desk.is-dragging [data-tf-drop] {
    transition: transform 0.12s ease-out;
}

@keyframes tfSnapIn {
    from { transform: scale(0.86); }
    to { transform: scale(1); }
}

.ten-frames-wrapper.is-interactive .ten-frame-cell {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    padding: 0;
    margin: 0;
    color: inherit;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
}
/* Desk: prefer 44px touch targets, but never let 5 cells + gaps exceed the
   frame's inline size (container-type on .ten-frame-box). */
.ten-frames-wrapper.is-interactive.tf-tray-desk .ten-frame-cell {
    min-width: min(44px, calc((100cqi - 4 * 0.22rem) / 5));
    min-height: min(44px, calc((100cqi - 4 * 0.22rem) / 5));
}

.ten-frames-wrapper.is-interactive .ten-frame-cell:focus-visible {
    outline: 3px solid var(--theme-primary);
    outline-offset: 2px;
}

.ten-frame-toolbar {
    display: flex;
    justify-content: center;
    width: 100%;
}

.ten-frame-reset-btn {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 800;
    min-height: 44px;
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-medium);
    background: #ffffff;
    color: var(--text-primary);
    cursor: pointer;
    touch-action: manipulation;
}

.ten-frame-reset-btn:focus-visible {
    outline: 3px solid var(--theme-primary);
    outline-offset: 2px;
}

.ten-frame-soft-hint {
    font-weight: 700;
}

.frame-token {
    width: 78%;
    height: 78%;
    max-width: 2.6rem;
    max-height: 2.6rem;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 -2px 0 rgba(0,0,0,0.2);
    animation: popDot 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.token-blue { background: #3b82f6; }
.token-orange { background: #f97316; }
.token-purple { background: #8b5cf6; }
.token-pink { background: #ec4899; }

.token-crossed::after {
    content: '✖';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    text-shadow: 0 0 3px #991b1b;
}

.token-dimmed {
    opacity: 0.35;
    filter: grayscale(0.5);
}

/* 2. Multiplication Grid Array Model */
.array-model-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.array-grid-box {
    background: #ffffff;
    border: 3px solid #8b5cf6;
    border-radius: var(--radius-md);
    padding: 0.75rem;
    display: grid;
    gap: 6px;
    box-shadow: var(--shadow-sm);
    box-sizing: border-box;
    max-width: 100%;
}

/* Fill the Learn card like unitGrid — not fixed 28px-cell postage stamps. */
.array-grid-box.array-grid-scaled .array-cell {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
}

.array-cell {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, #a78bfa, #8b5cf6);
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.25);
    animation: popDot 0.2s ease;
}

.array-caption {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #6d28d9;
}

/* 3. Division Equal Sharing Buckets */
/* Equal groups must look equal: fixed equal tracks from --cols (set by
   renderGroupsView / the Learn groups visual via balancedCols), never
   flex-grow on wrapped cards, so a short last row keeps the same card size. */
.buckets-model-wrapper {
    --bucket-card-max: 9.5rem;
    --bucket-gap: 0.85rem;
    display: grid;
    grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--bucket-gap);
    justify-content: center;
    /* Old 9.5rem card cap lives on the wrapper so tracks stay equal. */
    width: min(100%, calc(var(--cols, 2) * var(--bucket-card-max) + (var(--cols, 2) - 1) * var(--bucket-gap)));
    margin: 0 auto;
    box-sizing: border-box;
}

.buckets-model-wrapper.buckets-model-pile {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 22rem);
    justify-items: center;
}

.sharing-bucket-card {
    background: #ffffff;
    border: 2px solid #ec4899;
    border-radius: var(--radius-md);
    padding: 0.55rem 0.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    /* Width comes from the wrapper grid track; tokens scale with it (cqi). */
    min-width: 0;
    container-type: inline-size;
    box-sizing: border-box;
    box-shadow: var(--shadow-sm);
}

.bucket-header {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #be185d;
}

.sharing-bucket-card .bucket-header {
    font-size: clamp(0.7rem, 14cqi, 0.95rem);
    white-space: nowrap;
    text-align: center;
}

/* Rows of 5, independent of card width: 7 is always 5 + 2. */
.bucket-items-grid {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    gap: clamp(0.1rem, 3cqi, 0.4rem);
    justify-content: center;
    max-width: 100%;
    box-sizing: border-box;
}

.sharing-bucket-card .bucket-items-grid > div {
    grid-column: 1 / -1;
}

.sharing-bucket-card .bucket-item-emoji {
    width: clamp(0.6rem, 16cqi, 1.9rem);
    height: clamp(0.6rem, 16cqi, 1.9rem);
    font-size: clamp(0.5rem, 14cqi, 1.65rem);
}

.bucket-item-token {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #ec4899;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);
}

/* 4. Number Line SVG */
.number-line-wrapper {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.numline-svg {
    width: 100%;
    height: 90px;
    overflow: visible;
}

.vmodel-caption {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-top: 0.75rem;
    background: #ffffff;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-light);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: var(--shadow-sm);
    max-width: 100%;
}

.vmodel-caption-steps {
    flex-wrap: wrap;
    justify-content: center;
    border-radius: var(--radius-md);
    padding: 0.55rem 0.7rem;
    line-height: 1.35;
    text-align: center;
}

.vmodel-step {
    display: block;
    flex: 1 1 100%;
}

.vmodel-step-arrow {
    display: none;
    color: var(--text-muted);
    font-size: 0.82rem;
    flex-shrink: 0;
}

@media (min-width: 520px) {
    .vmodel-caption-steps {
        border-radius: var(--radius-full);
        padding: 0.4rem 1rem;
    }

    .vmodel-step {
        display: inline;
        flex: 0 1 auto;
    }

    .vmodel-step-arrow {
        display: inline;
    }
}

.vmodel-caption strong {
    color: var(--text-primary);
}

/* One flex child so mid-sentence <strong> numbers are not gapped as items. */
.vmodel-caption-sentence {
    justify-content: center;
    text-align: center;
    line-height: 1.35;
    gap: 0;
}

/* Ten-frame desk caption names the banks, not a colour the cubes never wear. */
.tf-equation-caption .tf-cap-a,
.tf-equation-caption .tf-cap-b {
    color: #1e293b;
    font-weight: 800;
    white-space: nowrap;
}

.bucket-item-more {
    font-size: 0.8rem;
    font-weight: 800;
    color: #a16207;
    align-self: center;
}

/* Labelled remainder for painter-capped card runs (AUD5-03): the model draws at
   most 12 cards, and this says how many it left out. */
.vmodel-more-note {
    font-size: 0.85rem;
    font-weight: 800;
    color: #a16207;
    text-align: center;
}

.bucket-item-emoji {
    font-size: clamp(1.6rem, 4.5vw, 2.5rem);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: popDot 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Big Equation Display (Stabilized Height to prevent Layout Shift) */
.equation-display {
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0.25rem 0 0.45rem;
}

.equation-row-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
}

.equation-center-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.learn-toolbar-chip,
.equation-help-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0;
    background: #fffdf6;
    border: 2.5px solid #1e293b;
    border-radius: 12px;
    color: #1e293b;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.15s ease, transform 0.15s ease;
    user-select: none;
    flex-shrink: 0;
}

.equation-help-btn {
    width: 44px;
}

.equation-strategies-btn,
#equationHelpBtn.help-icon-tenframe,
#equationHelpBtn.help-icon-strategies {
    width: auto;
    padding: 0.18rem 0.55rem;
    gap: 0.28rem;
}

/* Number board path: the ten-frame glyph carries the chip on its own. No visible
   word, so collapse the empty label and centre the icon in a square tap target.
   Sparkle Place / Hint / Strategies keep growing for their visible labels. */
#equationHelpBtn.help-chip-icon-only {
    width: 44px;
    padding: 0;
    gap: 0;
}

#equationHelpBtn.help-chip-icon-only .help-hint-label,
#equationHelpBtn .help-hint-label:empty {
    display: none;
}

@media (hover: hover) {
    .learn-toolbar-chip:hover,
    .equation-help-btn:hover {
        background: #fff8e8;
    }
}

.learn-toolbar-chip:active,
.equation-help-btn:active,
.learn-toolbar-chip.is-pressed,
.equation-help-btn.is-pressed {
    transform: translateY(1px) scale(0.97);
}

.learn-toolbar-chip.active,
.equation-help-btn.active {
    background: #f8edd0;
    color: #1e293b;
    border-color: #1e293b;
    box-shadow: none;
}

.learn-chip-icon,
.help-btn-tenframe,
.help-btn-sparkle {
    display: block;
    line-height: 0;
}

.learn-chip-svg {
    display: block;
    width: 28px;
    height: 28px;
}

.learn-chip-label {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
}

.help-tenframe-svg {
    display: block;
    width: 32px;
    height: 15px;
}

.help-sparkle-svg {
    width: 26px;
    height: 26px;
}

#equationHelpBtn.help-icon-tenframe .help-btn-sparkle,
#equationHelpBtn.help-icon-strategies .help-btn-tenframe {
    display: none;
}

.help-btn-label {
    font-size: 0.76rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

@media (max-width: 440px) {
    .equation-center-slot {
        justify-content: center;
    }

    .visual-models-section {
        padding: 0.65rem 0.5rem;
    }

    .numline-svg {
        height: 68px;
    }

    .vmodel-caption {
        font-size: 0.74rem;
        padding: 0.45rem 0.55rem;
    }
}

/* Base-10 Place Value Visualizer (Hundreds, Tens, Ones) */
.base10-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    max-width: 640px;
}

.base10-equation-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    width: 100%;
}

.base10-operand-card {
    background: #ffffff;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: var(--shadow-sm);
    min-width: 130px;
}

.base10-card-header {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.base10-columns-container {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    min-height: 70px;
}

.base10-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.base10-col-title {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.base10-col-hundreds .base10-col-title { color: #6d28d9; }
.base10-col-tens .base10-col-title { color: #1d4ed8; }
.base10-col-ones .base10-col-title { color: #15803d; }

/* Count fidelity (AUD6-02): a place paints all 9 of its blocks, so the rows
   wrap instead of truncating to "+6". 5 flats per line keeps 9 on a 320 phone. */
.base10-flat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
    justify-content: center;
    max-width: 252px;
}

.base10-rod-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: flex-end;
    justify-content: center;
    max-width: 202px;
}

.base10-more {
    align-self: center;
}

.base10-hundred-flat {
    width: 48px;
    height: 48px;
    background: repeating-linear-gradient(0deg, transparent, transparent 4px, #eab308 4px, #eab308 5px),
                repeating-linear-gradient(90deg, transparent, transparent 4px, #eab308 4px, #eab308 5px),
                #fde047;
    border: 2px solid #ca8a04;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(202, 138, 4, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 900;
    color: #854d0e;
}

.base10-ten-rod {
    width: 14px;
    height: 52px;
    background: repeating-linear-gradient(0deg, #3b82f6, #3b82f6 4px, #2563eb 4px, #2563eb 5px);
    border: 1.5px solid #1d4ed8;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(37, 99, 235, 0.25);
}

.base10-ten-rod.orange-rod {
    background: repeating-linear-gradient(0deg, #f97316, #f97316 4px, #ea580c 4px, #ea580c 5px);
    border-color: #c2410c;
}

.base10-ten-rod.crossed-rod {
    background: repeating-linear-gradient(0deg, #f87171, #f87171 4px, #ef4444 4px, #ef4444 5px);
    border-color: #b91c1c;
    position: relative;
    opacity: 0.85;
}
.base10-ten-rod.crossed-rod::after {
    content: '✖';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 900;
    text-shadow: 0 1px 1px rgba(127, 29, 29, 0.6);
}

.base10-hundred-flat.crossed-flat {
    background: repeating-linear-gradient(0deg, transparent, transparent 4px, #f87171 4px, #f87171 5px),
                repeating-linear-gradient(90deg, transparent, transparent 4px, #f87171 4px, #f87171 5px),
                #fca5a5;
    border-color: #b91c1c;
    color: #7f1d1d;
    position: relative;
    opacity: 0.9;
}
.base10-hundred-flat.crossed-flat::after {
    content: '✖';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(127, 29, 29, 0.7);
}

.base10-ones-grid {
    display: grid;
    grid-template-columns: repeat(2, 12px);
    gap: 3px;
    align-items: center;
}

.base10-one-cube {
    width: 12px;
    height: 12px;
    background: #10b981;
    border: 1.5px solid #059669;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.3);
}

.base10-one-cube.orange-cube {
    background: #f97316;
    border-color: #ea580c;
}

.base10-one-cube.crossed-cube {
    background: #ef4444;
    position: relative;
}
.base10-one-cube.crossed-cube::after {
    content: '✖';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 8px;
    font-weight: 900;
}

.base10-regroup-badge {
    background: #fef3c7;
    border: 1.5px dashed #f59e0b;
    border-radius: var(--radius-full);
    padding: 0.3rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: #b45309;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    animation: gentlePulse 2s ease infinite;
}

/* Multiplication Area Model */
/* Large ×/÷ Hint surfaces — partial products + long-division skeleton.
   Used when mulDivVisualTooBig(q): the 0–12 token models would only paint
   "+N more". Nothing here is ever prefilled — the slots and quotient boxes stay
   empty so the page teaches the method without handing over the answer. */
.mdh-bigmodel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
}

.mdh-bigmodel-coach {
    max-width: 26rem;
    font-size: clamp(0.85rem, 3.4vw, 1rem);
    font-weight: 800;
    line-height: 1.35;
    color: #334155;
    text-align: center;
}

.pp-split {
    font-size: clamp(0.95rem, 3.8vw, 1.15rem);
    font-weight: 900;
    line-height: 1.6;
    color: #1e293b;
    text-align: center;
}

.pp-chip {
    display: inline-block;
    margin: 0 0.15rem;
    padding: 0.05rem 0.45rem;
    border: 2px solid #38bdf8;
    border-radius: 0.55rem;
    background: #e0f2fe;
    color: #075985;
}

.pp-plus { color: #64748b; }

.pp-rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
    max-width: 20rem;
}

.pp-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto 3.4rem;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    border: 2.5px solid #1e293b;
    border-radius: 0.75rem;
    background: #fff;
    font-size: clamp(0.95rem, 3.8vw, 1.15rem);
    font-weight: 900;
    color: #1e293b;
}

.pp-row .pp-part { text-align: right; }
.pp-row .pp-op,
.pp-row .pp-eq { color: #64748b; }

.pp-slot {
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.2rem;
    height: 1.9rem;
    border: 2.5px dashed #94a3b8;
    border-radius: 0.5rem;
    background: #f8fafc;
}

.pp-row-total {
    border-color: #ca8a04;
    background: #fef3c7;
}

.pp-row-total .pp-total-label { color: #92400e; }

.pp-slot-answer {
    border-style: solid;
    border-color: #ca8a04;
    background: #fff;
    color: #92400e;
}

/* Long division bracket: divisor in the gutter, dividend under the vinculum,
   one empty quotient box per place. */
.ld-frame {
    display: inline-grid;
    grid-template-columns: auto repeat(var(--cols, 3), minmax(1.75rem, 2.3rem));
    align-items: end;
    row-gap: 0.15rem;
    font-weight: 900;
    color: #1e293b;
}

.ld-gutter { display: block; }

.ld-place {
    font-size: 0.65rem;
    font-weight: 900;
    color: #64748b;
    text-align: center;
}

.ld-box {
    height: 2rem;
    margin: 0 0.12rem;
    border: 2.5px dashed #94a3b8;
    border-radius: 0.4rem;
    background: #f8fafc;
}

.ld-divisor {
    padding: 0.25rem 0.45rem 0.25rem 0;
    font-size: clamp(1.05rem, 4.4vw, 1.4rem);
    text-align: right;
}

.ld-digit {
    padding: 0.25rem 0;
    border-top: 3px solid #1e293b;
    font-size: clamp(1.05rem, 4.4vw, 1.4rem);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.ld-digit-first {
    border-left: 3px solid #1e293b;
    border-top-left-radius: 0.6rem;
}

.area-model-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    max-width: 500px;
}

.area-model-figure {
    --area-border: 2.5px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.35rem;
    row-gap: 0.2rem;
    width: 100%;
    box-sizing: border-box;
}
/* Unit squares: cap the width so a small product doesn't balloon into huge cells. */
.area-model-figure.has-unit-cells {
    width: min(100%, calc(var(--total-cols, 10) * 2.4rem + 2.5rem));
}

.area-edge-corner { display: block; }

.area-edge-top-row {
    display: flex;
    /* Match the container border so top labels line up over their parts. */
    padding: 0 var(--area-border);
    min-width: 0;
}

.area-edge-label {
    font-size: 0.85rem;
    font-weight: 900;
    line-height: 1.1;
    color: #5b21b6;
    text-align: center;
    white-space: nowrap;
}
.area-edge-top {
    flex: var(--cols, 1) 1 0;
    min-width: 0;
    padding-bottom: 2px;
    border-bottom: 2px solid currentColor;
}
.area-block-ones-label { color: #9d174d; }
.area-edge-side {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-right: 3px;
    border-right: 2px solid #5b21b6;
}

.area-model-container {
    display: flex;
    /* Stretch so every part is the same height (same row count). */
    align-items: stretch;
    border: var(--area-border, 2.5px) solid #8b5cf6;
    border-radius: var(--radius-md);
    background: #ffffff;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.area-sub-block {
    /* Width proportional to the part's column count (like .sh-array-part). */
    flex: var(--cols, 1) 1 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    position: relative;
    min-width: 0;
}
/* Part divider drawn as an overlay so it never steals width from the cells. */
.area-sub-block + .area-sub-block::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1.5px;
    width: 3px;
    background: #6d28d9;
    z-index: 1;
    pointer-events: none;
}

.area-block-tens { background: #ede9fe; color: #5b21b6; }
.area-block-ones { background: #fdf2f8; color: #9d174d; }

.area-part-grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: 0;
}
.area-part-cell {
    display: block;
    aspect-ratio: 1;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: #c4b5fd;
}
.area-block-ones .area-part-cell { background: #f9a8d4; }

/* Large factors: proportional place-value blocks, no unit squares. */
.area-model-figure.is-place-value .area-sub-block {
    min-height: 5.5rem;
    padding: 0.5rem 0.2rem;
    align-items: center;
}
/* Tiny parts (e.g. 20 + 1) keep a readable minimum width. */
.area-model-figure.is-place-value .area-sub-block,
.area-model-figure.is-place-value .area-edge-top {
    min-width: 2.75rem;
}

.area-sub-val {
    font-size: 1.05rem;
    font-weight: 900;
    margin: 2px 0;
    white-space: nowrap;
}

.equation-text {
    font-family: var(--font-math);
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    line-height: 1.1;
    min-height: 180px;
}

.time-prompt-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 180px;
    animation: fadeIn 0.2s ease;
}

.equation-word-prompt {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    background: var(--bg-card-secondary);
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-medium);
    max-width: 90%;
    text-align: center;
    line-height: 1.35;
}

.reading-sound-off-hint {
    display: block;
    margin: 0.5rem auto 0;
    min-height: 44px;
    padding: 0.4rem 1rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    background: #fef3c7;
    border: 2px solid #f59e0b;
    border-radius: 999px;
    cursor: pointer;
}

.reading-sound-off-hint.hidden {
    display: none;
}

/* A short landscape phone: the 🔇 hint sits beside the prompt, not under it,
   so a picture cue (Clap the Beats) stays in view (issue #1911). */
@media (orientation: landscape) and (max-height: 500px) {
    .time-prompt-container:has(> .reading-sound-off-hint:not(.hidden)) {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .time-prompt-container:has(> .reading-sound-off-hint:not(.hidden)) > :not(.equation-word-prompt):not(.reading-sound-off-hint) {
        width: 100%;
    }

    .time-prompt-container > .reading-sound-off-hint {
        margin: 0;
    }
}

.time-answer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 0.15rem;
}

.time-answer-label {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-secondary);
}

.time-answer-slot {
    font-family: var(--font-math);
    font-size: 2.3rem;
    font-weight: 800;
    min-width: 110px;
    height: 52px;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   Vertical Column Math Layout (Multi-Digit Place Values & Regrouping)
   ========================================================================== */

.vertical-equation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 180px;
    margin: 0;
    animation: fadeIn 0.2s ease;
}

.stacked-math-card {
    background: #ffffff;
    border: 2.5px solid var(--border-medium);
    border-radius: var(--radius-lg);
    padding: 0.65rem 1.25rem 0.85rem;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    box-shadow: var(--shadow-sm);
    min-width: 180px;
}

/* Place Value Header Row */
.stacked-pv-header-row {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    width: 100%;
}

.pv-col-chip {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 44px;
    text-align: center;
}

.pv-col-hundredthousands { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.pv-col-tenthousands { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.pv-col-thousands { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.pv-col-hundreds { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.pv-col-tens { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.pv-col-ones { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }

/* Carrying & Borrowing Visual Cue Rows */
.stacked-regroup-row {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    min-height: 28px;
    width: 100%;
}

.regroup-cue-cell {
    min-width: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carry-pill {
    background: #fef3c7;
    border: 1.5px solid #f59e0b;
    color: #b45309;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 800;
    border-radius: var(--radius-full);
    padding: 0.1rem 0.45rem;
    animation: popDot 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
}

.borrow-pill {
    background: #ffedd5;
    border: 1.5px solid #ea580c;
    color: #c2410c;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
    border-radius: 6px;
    padding: 0.1rem 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    animation: popDot 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.borrow-pill .slashed-digit {
    text-decoration: line-through;
    opacity: 0.6;
    margin-right: 2px;
}

.borrow-pill .new-val {
    color: #ea580c;
    font-size: 0.88rem;
}

/* Muted stand-in when a column needs no regrouping: keeps the cue row in place
   so the kid can see that nothing moved, without competing with real pills. */
.no-regroup-pill {
    background: #f1f5f9;
    border: 1.5px dashed #cbd5e1;
    color: #94a3b8;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-radius: var(--radius-full);
    padding: 0.1rem 0.45rem;
}

/* Answer-free coach line under the place-value headers (no-regroup facts only). */
.stacked-place-coach {
    width: 100%;
    margin: 0 0 0.35rem;
    text-align: center;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
    text-align: center;
    color: #334155;
}

/* Number Rows */
.stacked-num-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.stacked-op-symbol {
    font-family: var(--font-math);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--theme-primary-dark);
    margin-right: auto;
    line-height: 1;
    padding-right: 0.75rem;
}

.stacked-digit-cell {
    font-family: var(--font-math);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--text-primary);
    min-width: 44px;
    text-align: center;
    line-height: 1.1;
}

.stacked-digit-cell.slashed {
    text-decoration: line-through;
    color: #94a3b8;
}

/* Divider Line */
.stacked-divider-line {
    width: 100%;
    height: 4px;
    background: #1e293b;
    border-radius: 2px;
    margin: 0.4rem 0 0.5rem;
}

/* Answer Row (Column-Guided Slots) */
.stacked-answer-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.column-answer-slot {
    font-family: var(--font-math);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--theme-primary);
    min-width: 44px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-medium);
    border-radius: var(--radius-sm);
    background: var(--bg-card-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

.column-answer-slot.active-slot {
    border: 3px solid var(--theme-primary);
    background: #ffffff;
    box-shadow: 0 0 0 4px var(--theme-glow);
    animation: activeSlotPulse 1.2s infinite alternate;
}

.column-answer-slot.has-value {
    color: var(--text-primary);
    background: #ffffff;
    border: 2.5px solid var(--theme-primary-dark);
}

.column-answer-slot.active-slot.has-value {
    border: 3px solid var(--theme-primary);
    box-shadow: 0 0 0 4px var(--theme-glow);
}

@keyframes activeSlotPulse {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

.stacked-answer-placeholder {
    font-family: var(--font-math);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--theme-primary);
    min-width: 70px;
    text-align: right;
    border-bottom: 4px solid var(--theme-primary);
    padding-right: 4px;
    line-height: 1.1;
    animation: blinkPlaceholder 1.5s infinite;
}

.op-badge-time { background: #e0f2fe; color: #0284c7; }
.op-badge-place { background: #ccfbf1; color: #0f766e; }
.op-badge-missing { background: #ffedd5; color: #c2410c; }
.op-badge-money { background: #fef9c3; color: #a16207; }
.op-badge-count { background: #dcfce7; color: #15803d; }
.op-badge-fraction { background: #ffe4e6; color: #be123c; }
.op-badge-word { background: #e0e7ff; color: #3730a3; }
.op-badge-pattern { background: #fce7f3; color: #9d174d; }
.op-badge-order { background: #e0f2fe; color: #0369a1; }
.op-badge-evenodd { background: #f3e8ff; color: #6b21a8; }
.op-badge-estimate { background: #ecfccb; color: #3f6212; }
.op-badge-measure { background: #ffedd5; color: #9a3412; }
.op-badge-calendar { background: #e0e7ff; color: #4338ca; }
.op-badge-shapes { background: #ccfbf1; color: #0f766e; }
.op-badge-area { background: #d1fae5; color: #047857; }
.op-badge-perimeter { background: #cffafe; color: #0e7490; }
.op-badge-factors { background: #fce7f3; color: #9d174d; }
.op-badge-fracops { background: #ffe4e6; color: #9f1239; }
.op-badge-decimals { background: #ccfbf1; color: #0f766e; }
.op-badge-volume { background: #ede9fe; color: #6d28d9; }
.op-badge-coords { background: #e0f2fe; color: #0369a1; }
.op-badge-express { background: #fce7f3; color: #9d174d; }
.op-badge-convert { background: #ffedd5; color: #c2410c; }
.op-badge-data { background: #fef3c7; color: #92400e; }
.fill-time { background: #0284c7; }
.fill-place { background: #0d9488; }
.fill-missing { background: #d97706; }
.fill-money { background: #ca8a04; }
.fill-count { background: #16a34a; }
.fill-fraction { background: #e11d48; }
.fill-word { background: #4f46e5; }
.fill-pattern { background: #db2777; }
.fill-order { background: #0284c7; }
.fill-evenodd { background: #7c3aed; }
.fill-estimate { background: #65a30d; }
.fill-measure { background: #ea580c; }
.fill-calendar { background: #4f46e5; }
.fill-shapes { background: #0d9488; }
.fill-area { background: #059669; }
.fill-perimeter { background: #0891b2; }
.fill-factors { background: #db2777; }
.fill-fracops { background: #e11d48; }
.fill-decimals { background: #0d9488; }
.fill-volume { background: #7c3aed; }
.fill-coords { background: #0284c7; }
.fill-express { background: #db2777; }
.fill-convert { background: #ea580c; }
.fill-data { background: #ca8a04; }

.place-value-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
}
.place-value-compare-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
}
.place-value-compare-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    background: #ffffff;
    border: 2px solid var(--border-medium, #cbd5e1);
    border-radius: var(--radius-md, 0.75rem);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    min-width: 7.5rem;
}
.place-value-compare-header {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
}
.place-value-compare-vs {
    align-self: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.place-value-compare-card .vmodel-caption {
    font-size: 0.72rem;
}
.place-value-blocks-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    align-items: flex-end;
}
.pv-block-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.55rem;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 0.75rem;
}
/* Two side-by-side cards of 9 flats would push the compare fold further than it
   already sits, so the compare copy of a hundred is smaller. The kid counts
   flats here, not the cells inside one. */
.place-value-compare .base10-hundred-flat {
    width: 34px;
    height: 34px;
    font-size: 0.6rem;
}
.place-value-compare .base10-flat-row {
    max-width: 182px;
}

/* Marks where to look — the asked place (digit_value) or the first place that
   differs (which_greater). Never the greater card. */
.pv-block-group.pv-col-focus,
.pv-block-group.pv-col-diff {
    background: #fde68a;
    outline: 2px solid #b45309;
    outline-offset: -1px;
}

.pv-block-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #0f766e;
}

.money-coins-visual,
.count-objects-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
}
.prompt-inline-visual {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0.55rem 0 0.15rem;
    padding: 0.55rem 0.65rem;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 0.85rem;
    /* Shared Learn Help fill: children size against this card (cqi), not 1.6rem stamps. */
    container-type: inline-size;
}
.prompt-inline-visual.hidden {
    display: none;
}
.prompt-inline-grid {
    max-width: 100%;
}
.money-coins-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: center;
    align-items: flex-start;
}
.money-coin-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.money-coin-group-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #a16207;
}
.money-coin-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    align-items: center;
    /* Wider wrap so scaled Learn coins are not crushed into an 11rem strip. */
    max-width: min(100%, 18rem);
}
.money-coin {
    /* Fixed ~2rem slots sat as postage stamps in the Learn equation card —
       reverse art and diameter gaps were unreadable. Scale like capacity jars. */
    width: 5.5rem;
    height: 5.5rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.money-coin .money-coin-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
/* Real US diameters vs quarter: dime 17.91, penny 19.05, nickel 21.21, quarter 24.26.
   Slots = 5.5rem × SCALE (0.738 / 0.785 / 0.874 / 1). */
.money-coin.coin-dime { width: 4.06rem; height: 4.06rem; }
.money-coin.coin-penny { width: 4.32rem; height: 4.32rem; }
.money-coin.coin-nickel { width: 4.81rem; height: 4.81rem; }
.money-coin.coin-quarter { width: 5.5rem; height: 5.5rem; }
.op-chip .op-symbol .money-chip-svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}
.money-coin-more {
    font-size: 0.8rem;
    font-weight: 800;
    color: #a16207;
    align-self: center;
}
/* Skip-count chips: quarters 25, 50, 75 under the biggest group, or the coin
   value counted up to a make_amount total the stem already prints. */
.money-skip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
    align-items: center;
    max-width: min(100%, 18rem);
}
.money-skip-chip {
    padding: 0.2rem 0.5rem;
    border-radius: 0.55rem;
    background: #fef3c7;
    color: #92400e;
    font-weight: 900;
    font-size: 0.85rem;
    line-height: 1.2;
}
.money-skip-chip.is-total {
    background: #fde68a;
    color: #78350f;
}
/* coin_value hides the cents on the face, so the kid counts the pennies the
   coin trades for. Compact slots keep 25 of them on a phone. */
.money-trade-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    width: 100%;
}
.money-trade-arrow {
    font-size: 1.1rem;
    font-weight: 900;
    color: #a16207;
    line-height: 1;
}
.money-trade-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
    max-width: min(100%, 13rem);
}
.money-trade-row .money-coin,
.money-trade-row .money-coin.coin-penny {
    width: 2.3rem;
    height: 2.3rem;
}
.money-coin-note {
    font-size: 0.78rem;
    font-weight: 700;
    color: #a16207;
    text-align: center;
    max-width: 18rem;
}
/* change: an open count-up from price to paid. Hops are unlabelled. */
.money-change-line {
    width: 100%;
    max-width: 22rem;
    display: flex;
    justify-content: center;
}
.money-change-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.money-change-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 12rem;
    padding: 0.75rem 1rem;
    background: rgba(255,255,255,0.6);
    border-radius: 0.85rem;
}
.money-change-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 700;
}
/* count_objects: shrink-wrap + 1.45rem tokens left small-n sets (e.g. 4 apples)
   as postage stamps (~39% W of an 18rem Learn card). Fill like bags / of_group. */
.count-objects-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.35rem, 3cqi, 0.7rem);
    justify-content: space-evenly;
    align-content: center;
    width: min(100%, 14rem);
    max-width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    min-height: 5.5rem;
    padding: 0.4rem 0.2rem;
}
/* Help-only (AUD7-07): fixed rows of 5 so 10 subitizes as 5 + 5 and 7 as 5 + 2 with the
   orphans left-aligned. The Learn prompt grid (.prompt-inline-grid) keeps the free wrap. */
.count-objects-grid.is-help-rows5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    justify-content: center;
    justify-items: center;
    align-items: center;
}
.count-object-token {
    /* Cap ~2.4rem so 10–12 item count sets stay in the Learn card (not a tower). */
    font-size: clamp(1.55rem, 15cqi, 2.4rem);
    line-height: 1;
}

.data-chart-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: min(100%, 20rem);
    margin: 0 auto;
    padding: 0.15rem 0.1rem;
}

.data-chart-row {
    display: grid;
    grid-template-columns: minmax(4.5rem, 5.5rem) 1fr 2rem;
    gap: 0.45rem;
    align-items: center;
}

.data-chart-label {
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--text-primary, #0f172a);
    line-height: 1.15;
}

.data-chart-track {
    height: 1.65rem;
    min-height: 1.65rem;
    background: #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.data-chart-fill {
    height: 100%;
    min-height: 1.65rem;
    align-self: stretch;
    display: block;
    min-width: 0.45rem;
    border-radius: 0.5rem;
    transition: width 0.25s ease;
}

.data-chart-fill-0 { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.data-chart-fill-1 { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.data-chart-fill-2 { background: linear-gradient(90deg, #f97316, #fb923c); }
.data-chart-fill-color-red { background: linear-gradient(90deg, #dc2626, #f87171); }
.data-chart-fill-color-blue { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.data-chart-fill-color-green { background: linear-gradient(90deg, #16a34a, #4ade80); }
.data-chart-fill-color-yellow { background: linear-gradient(90deg, #eab308, #fde047); }
.data-chart-fill-color-orange { background: linear-gradient(90deg, #ea580c, #fb923c); }
.data-chart-fill-color-purple { background: linear-gradient(90deg, #7c3aed, #a78bfa); }

/* Countable bars (K/G1 “How many cats?”): one cell per unit, no printed value. */
.data-chart-fill-units {
    display: flex;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}

.data-chart-unit {
    flex: 1 1 0;
    min-width: 0;
    border-right: 2px solid rgba(255, 255, 255, 0.85);
}

.data-chart-unit:last-child {
    border-right: 0;
}

.data-chart-val {
    font-weight: 800;
    font-size: 0.95rem;
    text-align: right;
    color: var(--text-primary, #0f172a);
    font-variant-numeric: tabular-nums;
}

.line-plot-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: min(100%, 22rem);
    margin: 0 auto;
    padding: 0.35rem 0.2rem 0.15rem;
}

.line-plot-title {
    font-weight: 800;
    font-size: 0.85rem;
    text-align: center;
    color: var(--text-primary, #0f172a);
}

.line-plot-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.15rem;
    min-height: 6.5rem;
    border-bottom: 3px solid #334155;
    padding: 0 0.15rem;
}

.line-plot-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.line-plot-stack {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.05rem;
    min-height: 4.8rem;
    justify-content: flex-start;
}

.line-plot-x {
    font-weight: 900;
    font-size: 0.78rem;
    line-height: 1;
    color: #0f172a;
}

.line-plot-tick {
    margin-top: 0.2rem;
    font-weight: 800;
    font-size: 0.72rem;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

.data-values-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    width: min(100%, 20rem);
    margin: 0 auto;
}

.data-value-chip {
    min-width: 2.1rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.55rem;
    background: #e0f2fe;
    border: 2px solid #38bdf8;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Phase 5 sentence/passage strip (sentenceStrip visual engine) — sentence_read, comprehension. */
.reading-sentence-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: min(100%, 26rem);
    margin: 0 auto;
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    background: #e0f2fe;
    border: 2px solid #38bdf8;
}

.reading-sentence-text {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.5;
    color: #0f172a;
    text-align: center;
}

/* Read a Sentence: the sentence to decode is the biggest text on screen. */
.reading-sentence-text.is-sentence {
    font-size: 1.6rem;
    line-height: 1.4;
}

/* read-the-word: the printed word is the task, not a caption. */
.reading-tile.reading-big-word {
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 2.4rem;
    font-weight: 700;
    padding: 0.2rem 1.2rem;
    min-width: 0;
}

/* letter_sound sound_for_letter: the letter to hear is the task. */
.reading-tile.reading-big-letter {
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 0.2rem 1.4rem;
    min-width: 0;
}

.reading-speak-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 2px solid #0284c7;
    background: #ffffff;
    color: #0284c7;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
}

.reading-speak-btn:active,
.reading-speak-btn.is-pressed {
    background: #bae6fd;
}

.reading-speak-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Phase 6 visual-teaching layer — same chip language, teaching colors. */
/* letter_sound: picture of the spoken keyword (goat for /g/) in place of
   the printed word. */
.reading-keyword-picture {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0.6rem;
}
/* Framed as its own card so it never reads as part of the avatar face
   below (a hat right above the head looked like the avatar wore it). */
.reading-keyword-picture-svg {
    display: block;
    width: 6.5rem;
    height: 6.5rem;
    padding: 0.4rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    box-sizing: content-box;
}

/* Two Words Make One (compound_words, LVOC-01): sun ➕ flower, each a tappable picture over its word;
   after the answer the two become one card with the word in two colours. */
.reading-compound-parts {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.reading-compound-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}
.reading-compound-part .reading-keyword-picture-svg {
    width: 5.5rem;
    height: 5.5rem;
    pointer-events: none;
}
.reading-compound-word {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
    pointer-events: none;
}
.reading-compound-plus {
    font-size: 1.6rem;
}
.reading-compound-joined {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
}
.reading-compound-joined .reading-keyword-picture-svg {
    width: 11rem;
    height: 5.8rem;
}
.reading-compound-split {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.reading-compound-half-1 { color: #2563eb; }
.reading-compound-half-2 { color: #ea580c; }
/* Word Parts (word_parts, LVOC-02): the base's picture and word with the part on a tile (un- happy), or the
   meaning card; after the answer the meaning card with the word in two colours (un|happy) and what the part means.
   The tile is one colour for every part, so it never matches a meaning card's colour. */
.reading-word-part-card {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.reading-word-part-base {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
.reading-word-part-base .reading-keyword-picture-svg {
    width: 5.5rem;
    height: 5.5rem;
}
.reading-word-part-word {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e293b;
}
.reading-word-part-tile {
    padding: 0.3rem 0.7rem;
    border-radius: 0.8rem;
    background: #ede9fe;
    border: 3px solid #1e293b;
    color: #6d28d9;
    font-size: 1.7rem;
    font-weight: 800;
}
.reading-word-part-meaning .reading-keyword-picture-svg,
.reading-word-part-joined .reading-keyword-picture-svg {
    width: 12rem;
    height: auto;
    aspect-ratio: 228 / 100;
}
.reading-word-part-joined {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.6rem;
}
.reading-word-part-split {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.reading-word-part-part-text { color: #6d28d9; }
.reading-word-part-base-text { color: #2563eb; }
.reading-word-part-means {
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
    text-align: center;
}
.choice-bubble-btn.choice-picture svg.reading-word-part-meaning-svg {
    width: 100%;
    max-width: 9rem;
    height: auto;
    aspect-ratio: 228 / 100;
    padding: 0.2rem;
}

/* Opposites (opposites, LVOC-03): the prompt's picture over its word; after the answer the pair side by side. */
.reading-opposite-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.6rem;
}
.reading-opposite-card .reading-keyword-picture-svg {
    width: 6rem;
    height: 6rem;
}
.reading-opposite-word {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1e293b;
}
.reading-opposite-pair {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1.2rem;
}
.reading-opposite-pair .reading-opposite-card:first-child .reading-opposite-word { color: #2563eb; }
.reading-opposite-pair .reading-opposite-card:last-child .reading-opposite-word { color: #ea580c; }

.choice-bubble-btn.choice-picture svg.reading-compound-pair-svg {
    width: 100%;
    max-width: 9rem;
    height: auto;
    aspect-ratio: 228 / 100;
    padding: 0.2rem;
}

.reading-mouth-hint {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0369a1;
    margin-bottom: 0.35rem;
}

/* letter_sound: the Mouth Coach face (lib/mouth-coach.js) demonstrates the
   mouth shape, with the text cue as a caption underneath. */
.reading-mouth-hint-coach {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
.reading-mouth-hint-face {
    width: 8.75rem;
    height: 7rem;
}
.reading-mouth-hint-face svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* letter_sound animated mouth cue: absolutely-stacked frames (one per
   timeline beat) crossfading via opacity, a pulsing highlight ring on the
   emphasized beat's frame. No text under it — the cue is spoken, and
   tapping the face replays it. See buildMouthAnimHint in app.js. */
.reading-mouth-anim-box {
    position: relative;
    width: 11rem;
    height: 8.8rem;
    margin: 0 auto;
}
/* The frame SVGs fill the whole box (the Mouth Coach viewBox is 140x112,
   the same 5:4 aspect as the box). */
.reading-mouth-anim-box .reading-mouth-hint-face {
    width: 100%;
    height: 100%;
}
.reading-mouth-anim-frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.reading-mouth-anim-frame.is-on {
    opacity: 1;
}
.reading-mouth-anim-ring {
    position: absolute;
    left: 50%;
    top: 64%;
    width: 50%;
    height: 42%;
    transform: translate(-50%, -50%) scale(0.82);
    border: 3px solid #f59e0b;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}
.reading-mouth-anim-frame.is-on .reading-mouth-anim-ring {
    animation: reading-mouth-anim-pulse 0.9s ease-in-out infinite;
}
@keyframes reading-mouth-anim-pulse {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
    50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.06); }
}
/* Tap the face to hear + watch it again (replayReadingPrompt). */
.reading-mouth-tap {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
}
.reading-mouth-tap:active,
.reading-mouth-tap.is-pressed {
    transform: scale(0.96);
}
.reading-mouth-tap:focus-visible {
    outline: 3px solid #38bdf8;
    outline-offset: 4px;
    border-radius: 1rem;
}
@media (prefers-reduced-motion: reduce) {
    .reading-mouth-anim-frame {
        transition: none;
    }
    .reading-mouth-anim-frame.is-on .reading-mouth-anim-ring {
        animation: none;
    }
}

/* Refresh / cold load: the browser blocked reading auto-speak until the first
   tap, so the 🔊 Hear it button pulses to invite it (app.js
   setReadingSpeakWaitingCue). Cleared on the first gesture, Next, or close. */
.learn-toolbar-chip.reading-speak-waiting,
.reading-nook-speak-btn.reading-speak-waiting {
    animation: reading-speak-waiting-pulse 1.1s ease-in-out infinite;
}
@keyframes reading-speak-waiting-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
    50%      { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .learn-toolbar-chip.reading-speak-waiting,
    .reading-nook-speak-btn.reading-speak-waiting {
        animation: none;
        box-shadow: 0 0 0 3px #f59e0b;
    }
}

/* letter_name: the focus letter pops in to "introduce itself". */
@keyframes reading-focus-pop {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.reading-focus-pop {
    animation: reading-focus-pop 0.45s ease-out;
    background: #fef3c7;
    border-color: #f59e0b;
}

/* cvc_decode: Elkonin boxes — one tappable box per phoneme. */
.reading-elkonin-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
    margin-top: 0.6rem;
}
.reading-elkonin-box {
    width: 3rem;
    height: 3rem;
    border-radius: 0.55rem;
    background: #ffffff;
    border: 2px dashed #38bdf8;
    font-size: 1.2rem;
    cursor: pointer;
}
.reading-elkonin-box:active,
.reading-elkonin-box.is-pressed {
    background: #e0f2fe;
}

/* letter_sound sound_for_letter: one 🔊 button per answer, under the letter.
   Big enough for a finger; the one playing lights up. */
.reading-hear-sounds {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    width: 100%;
    margin-top: 0.6rem;
}
.reading-hear-sound-btn {
    min-width: 4.2rem;
    min-height: 3rem;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: #ffffff;
    border: 2px solid #38bdf8;
    color: #0f172a;
    font-size: 1.25rem;
    font-weight: 800;
    cursor: pointer;
}
.reading-hear-sound-btn:active,
.reading-hear-sound-btn.is-playing {
    background: #e0f2fe;
    border-color: #0284c7;
    transform: scale(1.06);
}

/* digraphs_blends: the cluster reads as one stuck-together unit. */
.reading-cluster-mark {
    background: #bbf7d0;
    border-radius: 0.3rem;
    padding: 0 0.15rem;
}
/* Tile stays white (green reads as "correct"); a small underline joins the
   letters into one unit instead. */
.reading-cluster-tile {
    text-decoration: underline;
    text-decoration-color: #38bdf8;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

/* cvce_vowel_teams: magic-e gold, vowel team purple. Tiles get an underline in
   that color, not a fill, so they don't look selected or like a hint. */
.reading-magic-e-mark {
    background: #fef3c7;
    border-radius: 0.3rem;
    padding: 0 0.15rem;
    font-weight: 900;
}
.reading-magic-e-tile {
    text-decoration: underline;
    text-decoration-color: #f59e0b;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}
.reading-team-mark {
    background: #e9d5ff;
    border-radius: 0.3rem;
    padding: 0 0.15rem;
}
.reading-team-tile {
    text-decoration: underline;
    text-decoration-color: #a855f7;
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

/* sentenceStrip: tracking-finger word highlight during Read Aloud. */
.reading-track-word {
    border-radius: 0.25rem;
    padding: 0 0.1rem;
    transition: background 0.15s;
}
.reading-track-word.is-tracking {
    background: #fef08a;
}

/* comprehension: thought-bubble badge for inference questions. */
.reading-think-badge {
    font-size: 0.8rem;
    font-weight: 700;
    color: #7c3aed;
    background: #f5f3ff;
    border: 2px dashed #a855f7;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
}
/* skip_count (AUD7-03): one row of EQUAL chips with "+step" hops between them.
   The row is a grid of `--chips` 1fr tracks (app.js publishes the chip count) with an
   auto track for each hop, so a wrapped "?" can no longer flex-grow to 3x a number.
   column-gap stays 0 — the hop label carries the spacing, and the trailing (empty) hop
   track then collapses to 0 so the chips stay centred. */
.count-skip-row {
    display: grid;
    grid-template-columns: repeat(var(--chips, 4), minmax(0, 1fr) auto);
    column-gap: 0;
    row-gap: 0.35rem;
    align-items: center;
    justify-content: center;
    width: min(100%, 19rem);
    max-width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    min-height: 5.5rem;
    padding: 0.4rem 0.2rem;
}
.count-skip-chip {
    /* The 1fr track sets the width; inline-size containment keeps a 3-digit chip from
       widening its own track (G4) and lets the digits scale with the chip, not the row. */
    container-type: inline-size;
    min-width: 0;
    padding: clamp(0.35rem, 9cqi, 0.7rem) 0.15rem;
    border-radius: 0.65rem;
    background: #dcfce7;
    color: #166534;
    font-weight: 900;
    font-size: clamp(0.95rem, 30cqi, 1.85rem);
    line-height: 1.1;
    text-align: center;
    box-sizing: border-box;
}
.count-skip-chip.is-blank {
    background: #fef3c7;
    color: #92400e;
}
.count-skip-hop {
    padding: 0 clamp(0.15rem, 1.6cqi, 0.4rem);
    color: #059669;
    font-weight: 800;
    font-size: clamp(0.6rem, 3.6cqi, 0.85rem);
    white-space: nowrap;
    text-align: center;
}
/* one_more_less / before_after (AUD7-04): answer-free hop strip. The SVG keeps its own
   320x92 viewBox, so the strip scales with the stage instead of the glyph budget. */
.count-sense-line {
    display: flex;
    justify-content: center;
    width: min(100%, 20rem);
    max-width: 100%;
    padding: 0.2rem 0;
}
.count-sense-svg {
    width: 100%;
    height: auto;
    overflow: visible;
}
.fraction-visual,
.fraction-shape-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.fraction-bar {
    display: flex;
    width: min(100%, 16rem);
    height: 2.6rem;
    border: 2px solid #9f1239;
    border-radius: 0.55rem;
    overflow: hidden;
    background: #fff;
}
.fraction-bar-seg {
    flex: 1;
    border-right: 2px solid #9f1239;
    background: #fff1f2;
}
.fraction-bar-seg:last-child { border-right: none; }
.fraction-bar-seg.is-shaded { background: #fb7185; }
/* LFRAC-01: a fraction on a number line (0 and 1 only); hops draw in after the answer. */
.fraction-numline-wrap {
    width: min(100%, 20rem);
}
.fraction-numline-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    background: #fff;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
}
.fraction-numline-svg .frac-line-end {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 15px;
    font-weight: 800;
    fill: #0f172a;
}
.fraction-numline-svg .frac-hop-label {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 11px;
    font-weight: 800;
    fill: #15803d;
    animation: frac-hop-fade 0.3s ease-out both;
}
.fraction-numline-svg .frac-hop {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: frac-hop-draw 0.4s ease-out forwards;
}
.fraction-numline-svg .frac-hop-frog {
    font-size: 18px;
    animation: frac-hop-fade 0.3s ease-out both;
}
@keyframes frac-hop-draw { to { stroke-dashoffset: 0; } }
@keyframes frac-hop-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .fraction-numline-svg .frac-hop,
    .fraction-numline-svg .frac-hop-label,
    .fraction-numline-svg .frac-hop-frog { animation: none; stroke-dashoffset: 0; opacity: 1; }
}
/* LADD-01: add/sub hops on an open number line; landing numbers fill in after the answer. */
.addsub-numline-wrap {
    width: min(100%, 20rem);
}
.addsub-numline-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    background: #fff;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
}
.addsub-numline-svg .addsub-line-start,
.addsub-numline-svg .addsub-land-label {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 16px;
    font-weight: 800;
    fill: #0f172a;
}
.addsub-numline-svg .addsub-land-label { fill: #6d28d9; }
.addsub-numline-svg .addsub-hop-label {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 14px;
    font-weight: 800;
    fill: #6d28d9;
}
.addsub-numline-svg .addsub-land-dot,
.addsub-numline-svg .addsub-land-label,
.addsub-numline-svg .addsub-hop-frog {
    animation: frac-hop-fade 0.3s ease-out both;
}
.addsub-numline-svg .addsub-hop-frog { font-size: 18px; }
@media (prefers-reduced-motion: reduce) {
    .addsub-numline-svg .addsub-land-dot,
    .addsub-numline-svg .addsub-land-label,
    .addsub-numline-svg .addsub-hop-frog { animation: none; opacity: 1; }
}
/* LADD-02: a loose group; after the answer it slides into pairs (one column per pair) and an odd one glows alone. */
.evenodd-pair-wrap {
    width: min(100%, 340px);
}
.evenodd-pair-box {
    position: relative;
    width: 100%;
    aspect-ratio: 100 / 75;
    background: #fff;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
    overflow: hidden;
}
.evenodd-pair-item {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: clamp(22px, 8cqi, 27px);
    line-height: 1;
    transition: left 0.7s ease-in-out, top 0.7s ease-in-out;
}
.evenodd-pair-item.is-alone {
    border-radius: 50%;
    animation: evenodd-alone-glow 1.2s ease-in-out 0.7s 3 both;
    filter: drop-shadow(0 0 6px #f59e0b);
}
.evenodd-pair-pill {
    position: absolute;
    top: 25%;
    height: 50%;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #ede9fe;
    border: 2px solid #c4b5fd;
    animation: frac-hop-fade 0.3s ease-out 0.7s both;
}
.evenodd-pair-sentence {
    margin-top: 0.4rem;
    text-align: center;
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #6d28d9;
    animation: frac-hop-fade 0.3s ease-out 0.7s both;
}
@keyframes evenodd-alone-glow {
    0%, 100% { filter: drop-shadow(0 0 4px #f59e0b); }
    50% { filter: drop-shadow(0 0 12px #f59e0b); }
}
@media (prefers-reduced-motion: reduce) {
    .evenodd-pair-item { transition: none; }
    .evenodd-pair-item.is-alone,
    .evenodd-pair-pill,
    .evenodd-pair-sentence { animation: none; opacity: 1; }
}
/* of_group: shrink-wrap + 1.35rem tokens left 4-item sets as postage stamps
   (~49% of an 18rem Learn card). Fill like bags / tenFrame; tokens scale with cqi. */
.fraction-group-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.35rem, 3cqi, 0.7rem);
    justify-content: space-evenly;
    align-content: center;
    width: min(100%, 14rem);
    max-width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    min-height: 5.5rem;
    padding: 0.4rem 0.2rem;
}
.fraction-group-item {
    /* Cap ~2.4rem so 12–24 item of_group sets stay in the Learn card (not a tower). */
    font-size: clamp(1.55rem, 15cqi, 2.4rem);
    line-height: 1;
    opacity: 0.35;
    filter: grayscale(0.4);
}
.fraction-group-item.is-shaded {
    opacity: 1;
    filter: none;
}

/* of_group Help: equal share boxes (G1). Free-wrapping .fraction-group-grid is
   still used on the Learn prompt; Help paints a pile + N equal empty boxes so
   rows never look like the wrong groups (½ of 6 ≠ 4+2). */
.fraction-share-model {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: min(100%, 14rem);
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.fraction-share-pile {
    display: grid;
    gap: clamp(0.35rem, 3cqi, 0.7rem);
    width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    justify-items: center;
    padding: 0.35rem 0.15rem;
}
.fraction-share-boxes {
    /* Equal tracks from --shares (set in JS). Never flex-grow on wrapped cards. */
    display: grid;
    grid-template-columns: repeat(var(--shares, 2), minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 0.45rem;
    width: 100%;
    box-sizing: border-box;
}
.fraction-share-box {
    min-width: 0;
    min-height: 3.25rem;
    background: #fffdf8;
    border: 3px solid #1e293b;
    border-radius: 0.75rem;
    box-sizing: border-box;
}

/* pattern emoji_pattern: shrink-wrap + 1.6rem tokens left ABAB? rows as postage
   stamps (~16% H of an 18rem Learn card). Fill like count_objects / skip_count. */
.pattern-emoji-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.35rem, 3cqi, 0.7rem);
    justify-content: space-evenly;
    align-content: center;
    align-items: center;
    width: min(100%, 14rem);
    max-width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    min-height: 5.5rem;
    padding: 0.4rem 0.2rem;
}
.pattern-emoji-token {
    /* Cap ~3rem so 7-token rows stay in the Learn card (not a tower). */
    font-size: clamp(1.75rem, 18cqi, 3rem);
    line-height: 1;
    min-width: clamp(2rem, 18cqi, 3.25rem);
    text-align: center;
}
/* Number patterns in the hint: one row, the "?" never wraps onto a line of its own. */
.enrichment-hint .pattern-emoji-row {
    flex-wrap: nowrap;
    width: 100%;
    min-height: 0;
}

.enrichment-hint .pattern-emoji-row .pattern-emoji-token {
    font-size: clamp(1.1rem, 11cqi, 2.4rem);
    min-width: 0;
}

.pattern-emoji-token.is-blank {
    font-weight: 800;
    color: var(--theme-primary-dark);
    background: var(--theme-primary-light);
    border-radius: 0.45rem;
    padding: clamp(0.15rem, 2cqi, 0.35rem) clamp(0.35rem, 4cqi, 0.65rem);
}

.shape-identify-wrap {
    display: flex;
    justify-content: center;
    /* Fill the Learn card like labeledRect / unitPrism — not a postage stamp. */
    width: min(100%, 14rem);
    margin: 0 auto;
    padding: 0.35rem 0;
}
.shape-glyph {
    width: 100%;
    max-width: 14rem;
    aspect-ratio: 1;
    height: auto;
    background: var(--theme-primary);
    box-sizing: border-box;
}
.shape-circle { border-radius: 50%; }
.shape-square { border-radius: 0.35rem; }
.shape-rectangle {
    width: 100%;
    max-width: 14rem;
    aspect-ratio: 5 / 3;
    height: auto;
    border-radius: 0.35rem;
}
/* Border-triangle (width/height 0) cannot scale with the card — use clip-path.
   Inset 6%/94% left a small triangle in a white square (postage stamp). Fill
   the glyph box so identify triangles use the same Help-pane fill as count_objects. */
.shape-triangle {
    width: 100%;
    max-width: 14rem;
    aspect-ratio: 1;
    height: auto;
    background: var(--theme-primary);
    border: none;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.shape-hexagon {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.shapes-visual-mount {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.2rem 0 0.45rem;
}

.solid-svg {
    /* Match identify glyphs — fill the Learn card, not a 6.4rem stamp. */
    width: min(100%, 14rem);
    height: auto;
    display: block;
}

.solid-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: min(100%, 14rem);
}

.solid-card-label {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
}

.shape-pair-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.shape-pair-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    /* Two-across compare/rolls: keep each figure readable but under half the card. */
    width: min(42%, 7.5rem);
    min-width: 5.5rem;
}

.shape-pair-slot .shape-identify-wrap {
    width: 100%;
}

.shape-pair-slot .shape-glyph,
.shape-pair-slot .shape-rectangle,
.shape-pair-slot .shape-triangle {
    max-width: none;
}

.shape-pair-slot .solid-card {
    width: 100%;
}

.shape-pair-slot .solid-svg {
    width: 100%;
}

/* LGEO-01: a rectangle ruled into rows and columns of squares; three across when the kid picks one. */
.partition-grid-wrap {
    width: min(100%, 13rem);
}
.partition-grid-svg {
    width: 100%;
    height: auto;
    display: block;
}
.partition-grid-row {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    width: min(100%, 22rem);
}
.partition-grid-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 0;
    min-width: 0;
}

.angle-draw-wrap,
.line-figure-wrap,
.protractor-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.angle-draw-svg {
    width: min(100%, 14rem);
    height: auto;
    display: block;
}
/* Fill the Learn card like angleDraw / protractor — not an 8.5rem postage stamp. */
.line-figure-svg {
    width: min(100%, 16rem);
    height: auto;
    display: block;
}

.protractor-svg {
    width: min(100%, 16rem);
    height: auto;
    display: block;
}

.line-figure-svg .line-figure-label {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    fill: #475569;
}

.protractor-svg .protractor-tick-label {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    fill: #475569;
}

.rect-measure-mount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0 0.35rem;
}

.area-unit-grid {
    display: grid;
    gap: 3px;
    background: var(--theme-primary-dark, #047857);
    border: 3px solid var(--theme-primary-dark, #047857);
    width: fit-content;
    max-width: 100%;
}

.area-unit-cell {
    width: 1.45rem;
    height: 1.45rem;
    background: var(--theme-primary-light, #a7f3d0);
    box-sizing: border-box;
}

.area-unit-grid.is-compact .area-unit-cell {
    width: 1.05rem;
    height: 1.05rem;
}

/* Area unit_squares: fill the Learn card like unitPrism — not a postage stamp. */
.area-unit-grid.unit-grid-scaled {
    /* Definite width so a centered flex mount does not shrink-wrap to tiny cells. */
    width: 14rem;
    max-width: 100%;
    box-sizing: border-box;
}

.area-unit-grid.unit-grid-scaled .area-unit-cell {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
}

.labeled-rect-wrap {
    width: min(100%, 16rem);
}

.labeled-rect-svg {
    width: 100%;
    height: auto;
    display: block;
}

.labeled-rect-svg .labeled-rect-text {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 16px;
    font-weight: 800;
    fill: var(--text-primary, #0f172a);
}

.rect-measure-caption {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary, #475569);
}

.factor-prompt-row,
.fracops-pair-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    width: 100%;
}

.factor-prompt-num {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    min-width: 3.5rem;
    text-align: center;
    padding: 0.35rem 0.6rem;
    background: var(--theme-primary-light, #a7f3d0);
    border: 2px solid var(--theme-primary-dark, #047857);
    border-radius: var(--radius-md);
}

.fracops-bar-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    min-width: 8rem;
    flex: 1 1 8rem;
}

/* Fixed 2.2rem squares left frac_times_whole / frac_div_whole wholes (e.g. 3
   ones) as postage stamps (~41% of an 18rem Learn card). Fill like of_group /
   count_objects; squares scale with cqi. Cap so 6–8 ones stay in the card. */
.fracops-units-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    align-content: center;
    gap: clamp(0.35rem, 3cqi, 0.7rem);
    /* Definite 14rem like decimal-tenths-bar / of_group so shrink-wrap hosts
       do not collapse the row back to postage-stamp content width. */
    width: 14rem;
    max-width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    min-height: 5.5rem;
    padding: 0.4rem 0.2rem;
}

.fracops-unit-square {
    width: clamp(2.4rem, 22cqi, 4.25rem);
    height: clamp(2.4rem, 22cqi, 4.25rem);
    border: 2px solid #9f1239;
    border-radius: 0.4rem;
    background: #fb7185;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.decimal-tenths-bar {
    display: flex;
    /* Definite 14rem width so the bar fills the Learn card (percentage width
       collapsed inside the centered flex host when the mount had no width). */
    width: 14rem;
    max-width: 100%;
    box-sizing: border-box;
    height: 2.6rem;
    border: 2px solid #0f766e;
    border-radius: 0.45rem;
    overflow: hidden;
    background: #fff;
}

.decimal-tenth-cell {
    flex: 1;
    border-right: 2px solid #0f766e;
    background: #ecfdf5;
}

.decimal-tenth-cell:last-child { border-right: none; }
.decimal-tenth-cell.is-shaded { background: #34d399; }

.decimal-hundredths-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    /* Match unitGrid / percent hundredGrid fill — not a shrink-wrap stamp. */
    width: 14rem;
    max-width: 100%;
    box-sizing: border-box;
    gap: 1px;
    background: #0f766e;
    border: 2px solid #0f766e;
}

.decimal-hundredth-cell {
    aspect-ratio: 1;
    background: #ecfdf5;
}

.decimal-hundredth-cell.is-shaded { background: #34d399; }

.decimal-place-row {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    width: min(100%, 18rem);
    margin: 0 auto;
}

.decimal-place-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 4.2rem;
}

.decimal-place-digit {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    width: 2.6rem;
    text-align: center;
    border: 2px solid #0f766e;
    border-radius: 0.5rem;
    background: #ecfdf5;
}

.decimal-money-amount {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
}

.decimal-money-amount.is-parts {
    font-size: clamp(1.35rem, 4.5vw, 2rem);
    line-height: 1.25;
    text-align: center;
    max-width: 16rem;
}

.volume-visual-mount,
.coords-visual-mount,
.express-visual-mount,
.convert-visual-mount,
.integers-visual-mount,
.ratios-visual-mount,
.percent-visual-mount,
.decimals-visual-mount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
}

.fracops-visual-mount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
}

.unit-prism-layers {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.4rem;
    align-items: stretch;
    /* Fill the Learn card like labeledPrism / labeledRect — not a postage stamp. */
    width: min(100%, 14rem);
}

.unit-prism-layers .area-unit-grid.unit-prism-layer {
    width: 100%;
}

.unit-prism-layers .area-unit-cell {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
}

.unit-prism-layer-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    width: 100%;
}

.unit-prism-layer-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted, #5b6474);
    white-space: nowrap;
}

.coord-plane-svg {
    width: min(100%, 16rem);
    height: auto;
    display: block;
    background: #fff;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
}

.coord-plane-svg .coord-axis-label {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 10px;
    fill: #64748b;
}

.coord-plane-svg .coord-point-label {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 14px;
    font-weight: 800;
    fill: #0f172a;
}

.express-text {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    padding: 0.5rem 0.85rem;
    background: #fff;
    border: 2px solid #c4b5fd;
    border-radius: 0.75rem;
    text-align: center;
}

.convert-units-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.convert-unit-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.2rem;
    padding: 0.5rem 0.8rem;
    border-radius: 0.75rem;
    background: #fff;
    border: 2px solid #fdba74;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    color: #9a3412;
}

.convert-unit-chip.is-to {
    border-style: dashed;
    color: #c2410c;
}

.convert-arrow {
    font-size: 1.45rem;
    font-weight: 800;
    color: #c2410c;
}

.int-equation {
    font-family: var(--font-math), var(--font-heading), system-ui, sans-serif;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    text-align: center;
    line-height: 1.15;
    letter-spacing: 0.02em;
    padding: 0.1rem 0.25rem;
    white-space: nowrap;
}

.int-equation-hint {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-secondary, #475569);
    text-align: center;
}

.equation-word-prompt.is-skill-instruction {
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.28rem 0.75rem;
    color: var(--text-secondary, #475569);
}

.int-number-line-wrap {
    width: min(100%, 20rem);
}

.int-number-line-svg {
    width: 100%;
    height: auto;
    display: block;
    background: #fff;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
}

.int-number-line-svg .int-line-label {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 10px;
    fill: #64748b;
}

.int-number-line-svg .int-line-mark {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 12px;
    font-weight: 800;
    fill: #047857;
}

.ratio-tape-wrap,
.ratio-unit-groups {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
}

.ratio-tape-bar {
    display: grid;
    grid-template-columns: 4.4rem 1fr 2rem;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.ratio-tape-label,
.ratio-tape-count,
.ratio-unit-group-label,
.ratio-unit-story,
.ratio-tape-ratio {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    text-align: center;
}

.ratio-tape-label {
    font-size: 1.2rem;
    text-align: right;
    text-transform: capitalize;
}

.ratio-tape-count,
.ratio-tape-ratio {
    font-size: 1.35rem;
}

.ratio-unit-story {
    font-size: 1.15rem;
}

.ratio-tape-row {
    /* Shared --ratio-max-units grid: longest bar fills the track; shorter
       bars keep true n/max width. Fixed 1.55rem + wrap/clamp made 8:12 look 1:1. */
    display: grid;
    grid-template-columns: repeat(var(--ratio-max-units, 1), minmax(0, 1fr));
    gap: 0.22rem;
    width: 100%;
    align-items: stretch;
    box-sizing: border-box;
}

.ratio-tape-cell {
    width: auto;
    min-width: 0;
    height: auto;
    aspect-ratio: 1;
    border: 2px solid #0f172a;
    border-radius: 0.35rem;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fdba74;
    box-sizing: border-box;
}

.ratio-tape-cell.is-hidden {
    background: #e2e8f0;
    color: #64748b;
    font-weight: 800;
}

/* Hidden tape length (tape_complete / unitRate): span n of maxUnits columns (not 1 cell, not rem-clamp). */
.ratio-tape-cell.is-span {
    grid-column: span var(--ratio-span, 1);
    justify-self: stretch;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Height = one unit square (spanned width / span). Keep width inside
       the grid track — bare aspect-ratio was inflating past span columns. */
    aspect-ratio: var(--ratio-span, 1) / 1;
    height: auto;
}

.ratio-tape-cell.is-tapped {
    outline: 3px solid #0f172a;
    transform: translateY(-1px);
}

/* Equal groups must look equal: fixed equal tracks from --cols (set by
   buildRatiosSkillVisual), never flex-grow on wrapped bags, so a short last
   row keeps the same bag width (12 in 4 bags was 110px, 110px, 110px, 144px). */
.ratio-unit-groups {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    grid-auto-rows: 1fr;
    justify-content: center;
    gap: 0.55rem;
}

@media (min-width: 768px) {
    .ratio-unit-groups {
        grid-template-columns: repeat(var(--cols-wide, var(--cols, 4)), minmax(0, 1fr));
    }
}

.ratio-unit-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    /* Width comes from the equal grid track; min-width 0 lets it shrink. */
    min-width: 0;
    box-sizing: border-box;
}
.ratio-unit-group .ratio-tape-row {
    width: 100%;
}

.ratio-unit-group-label {
    font-size: 1.05rem;
    color: #475569;
}
.percent-hundred-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    width: min(100%, 16rem);
    gap: 1px;
    background: #0f766e;
    border: 2px solid #0f766e;
    border-radius: 0.45rem;
    overflow: hidden;
}

.percent-hundred-cell {
    aspect-ratio: 1;
    background: #ecfdf5;
}

.percent-hundred-cell.is-shaded { background: #34d399; }

.percent-bar-wrap {
    width: min(100%, 20rem);
}

.percent-bar-svg {
    width: 100%;
    height: auto;
    display: block;
    background: #fff;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
}

.percent-bar-svg .percent-bar-tick {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 11px;
    fill: #64748b;
}

.percent-bar-svg .percent-bar-mark {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 13px;
    font-weight: 800;
    fill: #047857;
}

.probability-visual-mount,
.pythagorean-visual-mount {
    display: flex;
    justify-content: center;
    width: 100%;
}

.prob-bag {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    align-content: center;
    /* Fill the Learn card like spinners — shrink-wrap + 1.1rem tokens sat as a postage stamp. */
    width: min(100%, 14rem);
    max-width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    min-height: 7.5rem;
    padding: 1rem 1.1rem 1.15rem;
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    border: 2px solid #94a3b8;
    border-radius: 0 0 1.25rem 1.25rem;
    border-top: none;
    position: relative;
}

.prob-bag::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 10%;
    width: 80%;
    height: 12px;
    background: #cbd5e1;
    border: 2px solid #94a3b8;
    border-radius: 0.5rem 0.5rem 0 0;
}

.prob-bag-token {
    width: clamp(1.35rem, 14cqi, 2.35rem);
    height: clamp(1.35rem, 14cqi, 2.35rem);
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.15);
    flex: 0 0 auto;
}

.prob-spinner-wrap,
.prob-bag-wrap {
    display: flex;
    justify-content: center;
    /* Fill the Learn card like identify / unitGrid — not a 10rem stamp. */
    width: 100%;
}

.prob-spinner-svg {
    width: min(100%, 14rem);
    height: auto;
    display: block;
}

.prob-pair-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.prob-pair-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    /* Two-across compare: keep each spinner readable but under half the card. */
    width: min(42%, 7.5rem);
    min-width: 5.5rem;
}

.prob-pair-card .prob-spinner-wrap {
    width: 100%;
}

.prob-pair-card .prob-spinner-svg {
    width: 100%;
}

/* Pair compare slots are ~half card — keep bag tokens readable but not oversized. */
.prob-pair-card .prob-bag {
    width: 100%;
    min-height: 5.5rem;
    padding: 0.75rem 0.65rem 0.85rem;
}

.prob-pair-card .prob-bag-token {
    width: clamp(1.15rem, 16cqi, 1.85rem);
    height: clamp(1.15rem, 16cqi, 1.85rem);
}

.prob-pair-label {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: #334155;
}

.pyth-tri-wrap {
    width: 100%;
}

.pyth-tri-svg {
    width: 100%;
    height: auto;
    display: block;
    background: #fff;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
}

.pyth-tri-svg .pyth-tri-label {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 16px;
    font-weight: 800;
    fill: #0f766e;
}

.measure-bars-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: min(100%, 18rem);
    margin: 0 auto;
}
.measure-bar-row {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0.45rem;
    align-items: center;
}
.measure-bar-row:not(.no-val) {
    grid-template-columns: 1.5rem 1fr 1.6rem;
}
.measure-bar-label {
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    font-size: 1rem;
}
.measure-bar-track {
    min-height: 1.55rem;
    background: #e2e8f0;
    border-radius: 0.45rem;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}
.measure-bar-track.with-ticks {
    background: transparent;
    overflow: visible;
}
.measure-bar-units {
    display: flex;
    gap: 3px;
    min-height: 1.55rem;
}
.measure-unit-tick {
    flex: 1 1 0;
    min-width: 0.85rem;
    background: var(--theme-primary);
    border-radius: 0.28rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.measure-bar-fill {
    /* The track only has a min-height, so height: 100% resolved to 0 and the
       K ribbons ("Which ribbon is longer?") drew as empty grey tracks. */
    align-self: stretch;
    min-height: 1.55rem;
    background: var(--theme-primary);
    border-radius: 0.45rem;
}
.measure-bar-val {
    font-weight: 800;
    font-size: 0.9rem;
    text-align: right;
}
/* count_units: fixed 1.35rem tokens + a full-width 14rem rail left short
   ribbons as a postage-stamp cluster over an empty line. Fill like
   count_objects; equal 1fr columns + 100% rail so ribbon length = unit count. */
.measure-units-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    width: min(100%, 14rem);
    max-width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
    margin: 0 auto;
    padding: 0.35rem 0.15rem 0.2rem;
}
.measure-units-row {
    display: grid;
    gap: clamp(0.15rem, 2cqi, 0.45rem);
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-items: center;
}
.measure-unit-token {
    /* Cap ~2.4rem so 3-unit ribbons are readable; 1fr columns shrink for 8–10. */
    font-size: clamp(1.35rem, 12cqi, 2.4rem);
    line-height: 1;
    min-width: 0;
    text-align: center;
}
.measure-units-rail {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--theme-primary);
    opacity: 0.35;
}

.measure-visual-mount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
}

.measure-mass-wrap,
.measure-capacity-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1.4rem;
    width: min(100%, 20rem);
    margin: 0 auto;
}

.measure-mass-side,
.measure-capacity-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.measure-mass-label {
    font-weight: 800;
    font-size: 0.95rem;
}

.measure-mass-stack {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.2rem;
    /* Fill the Learn card like capacity jars — not a 4.5rem postage stamp. */
    min-width: min(100%, 7.5rem);
    min-height: 8rem;
    padding: 0.55rem 0.75rem;
    border: 2px solid #cbd5e1;
    border-radius: 0.65rem;
    background: #f8fafc;
}

.measure-mass-weight {
    font-size: 1.35rem;
    line-height: 1;
    color: #334155;
}

.measure-capacity-jar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 0.35rem;
    /* Fixed 4.6rem jar sat as a postage stamp in the Learn equation card.
       Scale like identify / unitGrid — single jar fills most of the card. */
    width: min(100%, 11rem);
    min-height: 9rem;
    padding: 0.65rem 0.55rem;
    border: 3px solid #94a3b8;
    border-top: none;
    border-radius: 0 0 0.85rem 0.85rem;
    background: #e0f2fe;
    box-sizing: border-box;
}

/* Two-across compare: keep each jar readable but under half the card. */
.measure-capacity-side .measure-capacity-jar {
    width: min(100%, 7.5rem);
    min-height: 7.5rem;
}

.measure-capacity-cup {
    font-size: 1.55rem;
    line-height: 1;
}

.measure-ruler-wrap {
    width: min(100%, 22rem);
}

.measure-ruler-svg {
    width: 100%;
    height: auto;
    display: block;
    background: #fff;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
}

.measure-ruler-svg .measure-ruler-tick-n {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    fill: #475569;
}

.measure-ruler-svg .measure-ruler-side-label {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 13px;
    font-weight: 800;
    fill: #0f172a;
}

/* LMEAS-01: the measuring jug and the kitchen scale. Every mark's number has the same look. Sized by height, so the
   tool and its four tiles fit one portrait screen down to 360 × 640. */
.measure-scale-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.measure-scale-svg {
    height: min(15rem, 27vh);
    width: auto;
    max-width: 100%;
    display: block;
    background: #fff;
    border-radius: 0.75rem;
    border: 2px solid #e2e8f0;
}

.measure-scale-svg .measure-scale-n {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 17px;
    font-weight: 700;
    fill: #334155;
    stroke: #fff;
    stroke-width: 3px;
    paint-order: stroke;
}

.measure-scale-svg.is-dial .measure-scale-n {
    font-size: 15px;
}

/* Two jugs under a two-line prompt: a shorter picture. */
.measure-scale-svg.is-pour {
    height: min(13rem, 23vh);
}

.measure-scale-svg.is-pour .measure-scale-n {
    font-size: 15px;
}

.measure-scale-svg .measure-scale-unit {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 17px;
    font-weight: 800;
    fill: #0f172a;
}

.measure-scale-svg .measure-scale-item {
    font-size: 26px;
}

/* A short landscape phone: a little taller than 27vh, still above the tiles. */
@media (orientation: landscape) and (max-height: 500px) {
    .measure-scale-svg,
    .measure-scale-svg.is-pour {
        height: 11rem;
    }
}

.enrichment-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem;
}
.word-story-hint,
.word-story-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.word-story-badge {
    font-size: 2.4rem;
    line-height: 1;
}
.keypad-colon { background: #f1f5f9; font-size: 1.8rem; }

@media (max-width: 600px) {
    .visual-models-section {
        padding: 0.75rem 0.65rem;
        margin-bottom: 1rem;
    }

    .visual-models-toolbar {
        margin-bottom: 0.65rem;
    }

    .vmodel-tabs {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        border-radius: var(--radius-md);
    }

    .vmodel-tab {
        font-size: 0.72rem;
        padding: 0.32rem 0.55rem;
    }

    .number-line-wrapper {
        max-width: 100%;
    }

    .numline-svg {
        height: 76px;
    }

    .vmodel-caption {
        font-size: 0.78rem;
    }

    .stacked-math-card {
        min-width: 0;
        padding: 0.55rem 0.85rem 0.75rem;
        transform: scale(0.92);
        transform-origin: top center;
    }

    .mode-selection-bar {
        padding: 0.75rem 0.85rem;
        gap: 0.55rem;
    }

    .topic-picker-row {
        gap: 0.35rem;
    }

    .topic-row-label {
        font-size: 0.65rem;
        padding-top: 0;
    }

    .topic-cat-chip-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .topic-cat-chip {
        flex: 1 1 auto;
        font-size: 0.82rem;
        padding: 0.4rem 0.55rem;
        min-height: 44px;
    }

    .topic-skill-chip-list {
        gap: 0.35rem;
    }

    .topic-skill-chip-list .op-chip {
        flex: 1 1 6.8rem;
        width: auto;
        min-width: 6.6rem;
        max-width: none;
        min-height: 44px;
        padding: 0.45rem 0.55rem;
        font-size: 0.82rem;
        border-radius: var(--radius-sm);
    }

    .equation-display {
        min-height: 180px;
    }

    .equation-text {
        font-size: 2.5rem;
        gap: 0.4rem;
        min-height: 160px;
    }

    .vertical-equation-container {
        min-height: 160px;
    }
}

.math-operator {
    color: var(--theme-primary-dark);
}

.math-equals {
    color: var(--text-muted);
}.answer-placeholder {
    color: var(--theme-primary);
    background: var(--bg-card-secondary);
    border: 2.5px dashed var(--theme-primary);
    border-radius: var(--radius-sm);
    min-width: 80px;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    line-height: 1;
    animation: blinkPlaceholder 1.5s infinite;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.answer-placeholder.has-value {
    color: var(--text-primary);
    border: 2.5px solid var(--theme-primary);
    background: #ffffff;
    animation: none;
    box-shadow: 0 4px 12px var(--theme-glow);
}

.stacked-answer-placeholder {
    font-family: var(--font-math);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--theme-primary);
    background: var(--bg-card-secondary);
    border: 2.5px dashed var(--theme-primary);
    border-radius: var(--radius-sm);
    min-width: 80px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.5rem;
    line-height: 1;
    animation: blinkPlaceholder 1.5s infinite;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.stacked-answer-placeholder.has-value {
    color: var(--text-primary);
    border: 2.5px solid var(--theme-primary);
    background: #ffffff;
    animation: none;
    box-shadow: 0 4px 12px var(--theme-glow);
}

@keyframes blinkPlaceholder {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Floating Instant Feedback Toast (Zero Layout Shift, Tap-to-Dismiss Interactive) */
.feedback-banner {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
    pointer-events: auto;
    cursor: pointer;
    padding: 0.45rem 1.15rem;
    /* A pill on one line, a rounded box when a long miss line wraps (issue #2327). */
    border-radius: 1.4rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.25;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    /* One line while it fits; a longer line (Word Parts: "It's color + less = colorless, without color. Next time!")
       wraps inside the card instead of running off both sides of a phone (issue #2327). max-content keeps the
       left: 50% box from shrinking to half the card. */
    width: max-content;
    max-width: min(92vw, calc(100% - 12px));
    white-space: normal;
    text-wrap: balance;
    text-align: center;
    animation: toastSlideDown 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    user-select: none;
}

@media (hover: hover) {
    .feedback-banner:hover {
        transform: translateX(-50%) translateY(-2px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    }
}

.feedback-banner:active,
.feedback-banner.is-pressed {
    transform: translateX(-50%) translateY(0);
}

.feedback-dismiss-hint {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.76rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.22);
    padding: 0.12rem 0.45rem;
    border-radius: var(--radius-full);
    margin-left: 0.25rem;
    opacity: 0.95;
}

.feedback-success {
    background: #10b981;
    color: #ffffff;
    border: 2px solid #059669;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

.feedback-wrong {
    background: #ef4444;
    color: #ffffff;
    border: 2px solid #dc2626;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35);
}

@keyframes toastSlideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -12px) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

/* Interaction & Keypad */
.interaction-zone {
    max-width: 380px;
    margin: 0 auto;
}

.learn-mode-with-help {
    display: flex;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.34rem;
    flex-wrap: nowrap;
}

.learn-help-pair {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    margin-left: auto;
    flex-shrink: 0;
}

.learn-mode-with-help .learn-toolbar-chip,
.learn-mode-with-help .equation-help-btn,
.learn-mode-with-help .input-mode-chip {
    flex: 0 0 auto;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

.learn-mode-with-help .equation-strategies-btn,
.learn-mode-with-help #equationHelpBtn.help-icon-tenframe,
.learn-mode-with-help #equationHelpBtn.help-icon-strategies {
    width: auto;
    padding: 0.18rem 0.55rem;
    gap: 0.28rem;
}

.learn-mode-with-help #equationHelpBtn.help-chip-icon-only {
    width: 44px;
    padding: 0;
    gap: 0;
}

.learn-mode-with-help .input-mode-chip {
    width: auto;
    padding: 0.18rem 0.55rem;
    gap: 0.28rem;
}

/* Input Mode Switcher (adjacent Keypad / Choice pair) */
.input-mode-switcher,
.learn-toolbar-pair {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    background: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
}

.input-mode-chip {
    background: #fffdf6;
    border: 2.5px solid #1e293b;
    border-radius: 12px;
    padding: 0.18rem 0.55rem;
    width: auto;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    gap: 0.28rem;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.input-mode-chip .learn-chip-svg {
    width: 22px;
    height: 22px;
}

@media (hover: hover) {
    .input-mode-chip:hover {
        background: #fff8e8;
    }
}

.input-mode-chip.active {
    background: #f8edd0;
    border-color: #1e293b;
    color: #1e293b;
    box-shadow: none;
}

/* Choice Bubbles (1-Tap Multiple Choice Grid) */
.choice-bubbles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    animation: fadeIn 0.2s ease;
}

.choice-bubble-btn {
    background: #ffffff;
    border: 2.5px solid var(--border-medium);
    border-bottom: 5px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-family: var(--font-math);
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--text-primary);
    padding: 0.85rem 0.4rem;
    cursor: pointer;
    transition: all 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    min-height: 76px;
}

.choice-bubble-btn:active,
.choice-bubble-btn.is-pressed {
    transform: translateY(3px);
    border-bottom-width: 2px;
}

/* Reading picture answers (word_to_picture, rhyme, first_sound): the drawing
 * is the answer — no printed word. */
.choice-bubble-btn.choice-picture {
    padding: 0.35rem;
}
.choice-bubble-btn.choice-picture svg {
    width: 84px;
    height: 84px;
    pointer-events: none;
}

/* Clap the Beats (syllables): 👏 · 👏👏 · 👏👏👏, one hand per beat, never wrapped. */
.choice-bubble-btn.choice-claps {
    font-size: 1.7rem;
    letter-spacing: -0.1em;
    white-space: nowrap;
    padding: 0.35rem 0.2rem;
}

/* The clap-out after a miss: a hand under the picture per beat, clapping in turn. */
.reading-clap-out {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    font-size: 2rem;
    line-height: 1;
}
.reading-clap-hand {
    opacity: 0.25;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.reading-clap-hand.is-clap {
    opacity: 1;
    animation: readingClap 0.4s ease;
    transform: scale(1);
}
@keyframes readingClap {
    0% { transform: scale(0.8); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .reading-clap-hand.is-clap { animation: none; }
}

/* Blend the Sounds (blend_segment): one dot per sound, lit while its sound plays, then left lit as heard. */
.reading-blend-dots {
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    width: 100%;
    padding: 0.4rem 0;
}
.reading-blend-dot {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #e2e8f0;
    border: 3px solid #94a3b8;
    transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
/* One colour for every dot: the answer cards are tinted blue, orange, purple, and a dot must not point at a card. */
.reading-blend-dot.is-heard { background: #fde047; border-color: #ca8a04; }
.reading-blend-dot.is-on { transform: scale(1.45); }
@media (prefers-reduced-motion: reduce) {
    .reading-blend-dot { transition: none; }
    .reading-blend-dot.is-on { transform: none; box-shadow: 0 0 0 4px #1e293b; }
}

.choice-bubble-btn:nth-child(1) { border-color: #93c5fd; border-bottom-color: #3b82f6; }
.choice-bubble-btn:nth-child(2) { border-color: #fdba74; border-bottom-color: #f97316; }
.choice-bubble-btn:nth-child(3) { border-color: #c4b5fd; border-bottom-color: #8b5cf6; }
.choice-bubble-btn:nth-child(4) { border-color: #86efac; border-bottom-color: #10b981; }

/* Phones keep :hover after a tap on the reused chip. Do not tint text. */
@media (hover: hover) {
    .choice-bubble-btn:hover {
        border-color: var(--theme-primary);
        background: var(--theme-primary-light);
        color: var(--theme-primary-dark);
        transform: translateY(-2px);
        border-bottom-width: 6px;
    }

    .choice-bubble-btn:nth-child(1):hover { background: #eff6ff; }
    .choice-bubble-btn:nth-child(2):hover { background: #fff7ed; }
    .choice-bubble-btn:nth-child(3):hover { background: #f5f3ff; }
    .choice-bubble-btn:nth-child(4):hover { background: #f0fdf4; }
}

/* Read mode: Tap-Sequence (tap letter/grapheme tiles in order — §7 Phase 4) */
.tap-sequence-container {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    animation: fadeIn 0.2s ease;
}

.tap-build-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
}

.tap-build-slot {
    min-width: 2.4rem;
    min-height: 2.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-md);
    border: 2.5px dashed var(--border-medium);
    background: var(--bg-card-secondary);
    font-family: var(--font-math);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tap-build-slot.has-value {
    border-style: solid;
    border-color: var(--theme-primary);
    background: var(--theme-primary-light);
    color: var(--theme-primary-dark);
}

.tap-tile-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.tap-tile-btn {
    background: #ffffff;
    border: 2.5px solid var(--border-medium);
    border-bottom: 5px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-family: var(--font-math);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    padding: 0.6rem 0.9rem;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: var(--shadow-sm);
    min-height: 56px;
    min-width: 56px;
}

.tap-tile-btn:active,
.tap-tile-btn.is-pressed {
    transform: translateY(3px);
    border-bottom-width: 2px;
}

.tap-tile-btn.is-used,
.tap-tile-btn:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

.tap-backspace-btn {
    align-self: center;
}

.tap-backspace-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Keypad Container */
.keypad-container {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

/* Onscreen Keypad */
.onscreen-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.keypad-btn {
    background: #ffffff;
    border: 2px solid var(--border-medium);
    border-bottom: 4px solid var(--border-medium);
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0.6rem 0.4rem;
    min-height: 44px;
    cursor: pointer;
    transition: all 0.1s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keypad-btn:active,
.keypad-btn.is-pressed {
    transform: translateY(2px);
    border-bottom-width: 2px;
}

.keypad-backspace {
    background: var(--bg-card-secondary);
    color: var(--text-secondary);
    font-size: 1.3rem;
}

.keypad-clear {
    background: var(--bg-card-secondary);
    color: #ef4444;
    font-size: 1.05rem;
    font-weight: 800;
}

.btn-huge-submit {
    width: 100%;
    padding: 0.85rem 1.25rem;
    font-size: 1.2rem;
    font-weight: 800;
    border-radius: var(--radius-md);
    letter-spacing: 0.03em;
    box-shadow: 0 4px 0 var(--theme-primary-dark);
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

/* Pressed while the finger is down (`is-pressed` is set from JS — iOS drops `:active` inside the scrolling sheet).
   Higher specificity than `.btn-primary:active` so the submit keeps its own deeper press. */
.btn-primary.btn-huge-submit {
    transition: transform 0.06s ease, box-shadow 0.06s ease, filter 0.06s ease;
}

.btn-primary.btn-huge-submit:active,
.btn-primary.btn-huge-submit.is-pressed {
    transform: translateY(4px);
    box-shadow: 0 0 0 var(--theme-primary-dark);
    filter: brightness(0.88);
}

/* History Review Container in Interaction Zone */
.review-mode-action-container {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
    animation: fadeIn 0.2s ease;
}

.review-status-card {
    background: #ffffff;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    box-shadow: var(--shadow-sm);
}

.review-status-card.status-correct {
    background: #f0fdf4;
    border-color: #86efac;
}

.review-status-card.status-wrong {
    background: #fef2f2;
    border-color: #fca5a5;
}

.review-status-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.review-status-details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.review-status-details strong {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-primary);
}

.review-status-details span {
    font-size: 0.88rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.btn-return-live {
    width: 100%;
    padding: 0.85rem 1.25rem;
    font-size: 1.15rem;
    font-weight: 800;
    border-radius: var(--radius-md);
    letter-spacing: 0.02em;
    box-shadow: 0 4px 0 var(--theme-primary-dark);
}

.hint-bar {
    margin-top: 1rem;
}

.btn-hint {
    background: none;
    border: 2px dashed var(--border-medium);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    cursor: pointer;
}

@media (hover: hover) {
    .btn-hint:hover {
        border-color: var(--theme-primary);
        color: var(--theme-primary-dark);
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.btn-primary {
    background: var(--theme-primary);
    color: #ffffff;
    box-shadow: 0 4px 0 var(--theme-primary-dark);
}

.btn-primary:active,
.btn-primary.is-pressed {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--theme-primary-dark);
}

.btn-secondary {
    background: var(--bg-card-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-medium);
}

.btn-gold {
    background: var(--color-gold);
    color: #78350f;
    box-shadow: 0 4px 0 #b45309;
}

.btn-gold:active,
.btn-gold.is-pressed {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #b45309;
}

.btn-sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
}

.btn-full {
    width: 100%;
}

/* ==========================================================================
   Quest home (kid pride) & leftover Progress/Stats helpers
   ========================================================================== */

.quest-today-card,
.quest-skills-card,
.quest-trophies-card,
.quest-rehab-card {
    margin-bottom: 1rem;
}

.quest-today-meter {
    margin-top: 0;
    padding: 0.15rem 0 0.35rem;
    border-top: none;
}

.quest-skills-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.quest-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.35rem 0.7rem;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-full);
    background: var(--bg-card-secondary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-primary);
}

.quest-skill-pct {
    color: var(--text-secondary);
}

.quest-earned-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.quest-earned-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.4rem 0.75rem;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-card-secondary);
    font-family: var(--font-heading);
    font-weight: 700;
}

.quest-earned-ico {
    font-size: 1.15rem;
}

.quest-rehab-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
}

.quest-rehab-chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-md);
    background: #fff7ed;
    border: 2px solid #fdba74;
    font-weight: 700;
    color: #9a3412;
}

.quest-quiet-empty {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
}

.quest-home-jump {
    min-height: 44px;
}

.settings-grownup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.settings-grownup-actions .btn {
    min-height: 44px;
}

.practice-cal-nav .btn {
    min-height: 44px;
    min-width: 44px;
}

.stats-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.stat-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.bg-emerald { background: #d1fae5; }
.bg-gold { background: #fef3c7; }
.bg-coral { background: #ffedd5; }
.bg-purple { background: #ede9fe; }

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stat-value {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

/* Mastery Bars */
.mastery-bars-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.25rem;
}

@media (max-width: 650px) {
    .mastery-bars-grid {
        grid-template-columns: 1fr;
    }
}

.mastery-item {
    background: var(--bg-card-secondary);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mastery-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.op-badge {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-full);
}

.op-badge-add { background: var(--color-add-light); color: var(--color-add); }
.op-badge-sub { background: var(--color-sub-light); color: var(--color-sub); }
.op-badge-mul { background: var(--color-mul-light); color: var(--color-mul); }
.op-badge-div { background: var(--color-div-light); color: var(--color-div); }

.mastery-percent {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.progress-bar-bg {
    width: 100%;
    height: 12px;
    background: #e2e8f0;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    transition: width 0.5s ease-out;
    border-radius: var(--radius-full);
}

.fill-add { background: var(--color-add); }
.fill-sub { background: var(--color-sub); }
.fill-mul { background: var(--color-mul); }
.fill-div { background: var(--color-div); }

.mastery-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* History Table */
.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.table-responsive {
    overflow-x: auto;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.history-table th {
    text-align: left;
    padding: 0.75rem;
    border-bottom: 2px solid var(--border-medium);
    font-family: var(--font-heading);
    color: var(--text-secondary);
}

.history-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-light);
    font-weight: 600;
}

/* ==========================================================================
   Trophies & Badges (Tab 3)
   ========================================================================== */

.trophies-intro {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.trophy-big-icon {
    font-size: 3rem;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.badge-card {
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.badge-card.locked {
    opacity: 0.55;
    filter: grayscale(0.8);
}

.badge-card.unlocked {
    border-color: var(--color-gold);
    background: linear-gradient(180deg, #fffbeb, #ffffff);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.2);
    transform: translateY(-2px);
}

.badge-card-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--bg-card-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.badge-card.unlocked .badge-card-icon {
    background: var(--color-gold-light);
}

.badge-card-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
}

.badge-card-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

/* ==========================================================================
   Mistake Rehab (Tab 4)
   ========================================================================== */

.rehab-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.rehab-icon {
    font-size: 2.5rem;
}

.rehab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.rehab-card {
    background: var(--bg-card);
    border: 2px solid #fecaca;
    border-left: 6px solid #ef4444;
    border-radius: var(--radius-md);
    padding: 1.15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

.rehab-eq {
    font-family: var(--font-math);
    font-size: 1.4rem;
    font-weight: 800;
}

.rehab-answer-tag {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: #166534;
    background: #dcfce7;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

.empty-state-card {
    background: var(--bg-card);
    border: 2px dashed var(--border-medium);
    border-radius: var(--radius-lg);
    padding: 3rem 1.5rem;
    text-align: center;
}

.empty-emoji {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    display: inline-block;
}

/* ==========================================================================
   Settings
   ========================================================================== */

.settings-card {
    padding: 1.15rem 1.05rem 0.85rem;
    overflow: hidden;
    /* Clip without making the card a scroll container: with `hidden` the
       sticky Save bar stuck inside the card, 64px up, over the last row
       (Family) on iPad instead of to the screen. */
    overflow: clip;
}

.settings-card .settings-head {
    margin-bottom: 0.85rem;
    align-items: flex-start;
}

.settings-card .section-subtitle {
    max-width: 28rem;
}

.settings-accordion {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    overflow: hidden;
}

.settings-acc {
    border-top: 1px solid var(--border-light);
}

.settings-acc:first-child {
    border-top: none;
}

.settings-acc-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    background: var(--bg-card-secondary);
}

.settings-acc-summary::-webkit-details-marker {
    display: none;
}

.settings-acc-summary::after {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2.5px solid var(--theme-primary-dark);
    border-bottom: 2.5px solid var(--theme-primary-dark);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.settings-acc[open] > .settings-acc-summary {
    background: var(--theme-primary-light);
    color: var(--theme-primary-dark);
}

.settings-acc[open] > .settings-acc-summary::after {
    transform: rotate(45deg);
}

.settings-acc-body {
    padding: 0.85rem 0.9rem 1rem;
    background: #fff;
}

.settings-row-head,
.settings-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    min-width: 0;
}

.settings-copy {
    flex: 1 1 10rem;
}

.settings-row-head .section-form-label,
.settings-copy .section-form-label {
    margin-bottom: 0;
}

.settings-hint-body {
    margin: 0.35rem 0 0;
    padding: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.settings-copy .settings-hint-body,
.settings-row-head .settings-hint-body {
    margin-top: 0;
}

.settings-card .section-form-label + .settings-hint-body,
.settings-card .form-group > .settings-hint-body {
    margin-top: 0.35rem;
}

.settings-card .form-group > .settings-hint-body {
    margin-bottom: 0.45rem;
}

.settings-quest-facts {
    list-style: none;
    margin: 0.2rem 0 0.7rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.settings-quest-facts li {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.settings-quest-goal {
    margin-bottom: 0.15rem;
}

.settings-card .toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.settings-card .form-section {
    margin-top: 0.95rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-light);
}

.settings-card .form-section.settings-cluster-first {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.settings-card .section-form-label {
    font-size: 0.95rem;
}

.settings-card .grade-preset-grid,
.settings-card .settings-grade-list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin-top: 0;
}

.settings-card .age-card-radio {
    display: block;
    flex: 0 0 auto;
    width: 100%;
}

.settings-card .age-card-content,
.settings-card .grade-preset-grid .age-card-content {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    height: auto;
    min-height: 48px;
    padding: 0.55rem 0.7rem;
    gap: 0.55rem;
}

.settings-card .age-card-icon,
.settings-card .grade-preset-grid .age-card-icon {
    font-size: 1.25rem;
    margin-bottom: 0;
    line-height: 1.25;
    flex-shrink: 0;
}

.settings-card .age-card-copy {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.12rem;
    min-width: 0;
    flex: 1 1 auto;
}

.settings-card .age-card-content strong,
.settings-card .grade-preset-grid .age-card-content strong {
    font-size: 0.92rem;
}

.settings-card .age-card-content small {
    display: none;
}

.settings-card .age-desc {
    display: block;
    margin-top: 0;
    font-size: 0.75rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.settings-card .age-card-radio input:checked + .age-card-content {
    transform: none;
}

.settings-cluster-note {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0.65rem;
    line-height: 1.35;
}

.settings-rest-group {
    margin-top: 0.85rem;
}

.settings-save-bar {
    position: sticky;
    bottom: calc(var(--kid-tab-bar-space) + 0.25rem);
    z-index: 40;
    margin: 0.85rem -0.15rem 0;
    padding: 0.55rem 0.15rem 0.2rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--bg-card) 32%);
}

.settings-save-bar .btn {
    min-height: 48px;
}

@media (max-width: 720px) {
    body:has(#settingsTab.active) {
        padding-bottom: calc(var(--kid-tab-bar-space) + 4.35rem);
    }

    .settings-save-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--kid-tab-bar-space);
        z-index: 90;
        margin: 0;
        padding: 0.55rem 0.85rem 0.45rem;
        background: color-mix(in srgb, var(--bg-base) 86%, #ffffff);
        border-top: 2px solid var(--border-light);
        box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.06);
    }

    body:has(#settingsTab.active):has(.kid-tab-bar.is-away) .settings-save-bar {
        bottom: 0;
    }
}

@media (max-width: 600px) {
    .settings-card {
        padding: 0.95rem 0.75rem 0.7rem;
    }

    .settings-acc-summary {
        padding: 0.65rem 0.75rem;
    }

    .settings-acc-body {
        padding: 0.75rem 0.7rem 0.9rem;
    }

    .parent-report-settings-row {
        align-items: flex-start;
    }

    .settings-grownup-actions {
        width: 100%;
    }

    .settings-grownup-actions .btn,
    .parent-report-settings-row .btn {
        flex: 1 1 auto;
    }
}

.age-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.85rem;
    margin-top: 0.75rem;
}

.grade-preset-grid .age-card-content {
    padding: 0.85rem 0.65rem;
}

.grade-preset-grid .age-card-icon {
    font-size: 1.55rem;
}

.grade-preset-grid .age-card-content strong {
    font-size: 0.98rem;
}

.age-card-radio input {
    display: none;
}

.age-card-content {
    background: var(--bg-card-secondary);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1.15rem 0.85rem;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
    height: 100%;
}

.age-card-icon {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.age-card-content strong {
    font-family: var(--font-heading);
    font-size: 1.1rem;
}

.age-card-content small {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--theme-primary-dark);
}

.age-desc {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
    line-height: 1.3;
}

.age-card-radio input:checked + .age-card-content {
    background: var(--theme-primary-light);
    border-color: var(--theme-primary);
    box-shadow: 0 4px 12px var(--theme-glow);
    transform: translateY(-2px);
}

.form-section {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light);
}

.section-form-label {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.5rem;
}

.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.form-control {
    background: #ffffff;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    outline: none;
}

.form-control:focus {
    border-color: var(--theme-primary);
}

/* Switch */
.switch-container {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    cursor: pointer;
}

.switch-container input {
    display: none;
}

.switch-slider {
    width: 46px;
    height: 26px;
    background: var(--border-medium);
    border-radius: var(--radius-full);
    position: relative;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.switch-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.switch-container input:checked + .switch-slider {
    background: var(--theme-primary);
}

.switch-container input:checked + .switch-slider::before {
    transform: translateX(20px);
}

.switch-text {
    display: flex;
    flex-direction: column;
}

.switch-text small {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

/* ==========================================================================
   Modals
   ========================================================================== */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
}

.modal-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 500px;
    position: relative;
    z-index: 10;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: popModal 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    max-height: 90vh;
    overflow-y: auto;
}

@keyframes popModal {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 2px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-icon {
    font-size: 1.5rem;
}

.modal-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
}

.modal-close-btn:not(.mq-close-x) {
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}

.modal-body {
    padding: 1.5rem;
}

.modal-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Reading Nook (My Place world tap) — reuses .modal / .choice-bubbles-grid, just sizes the reading-specific parts.
   The World overlay itself sits at z-index 12000 (.kid-world-overlay); this popup opens ON TOP of it, so it needs to clear that. */
#readingNookModal {
    z-index: 12500;
}

.reading-nook-speak-btn {
    margin-bottom: 0.75rem;
}

.reading-nook-visual {
    margin-bottom: 0.75rem;
}

.reading-nook-prompt {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    text-align: center;
    margin-bottom: 1rem;
}

.reading-nook-choices .choice-bubble-btn {
    font-size: 1.4rem;
}

.reading-nook-feedback {
    text-align: center;
    font-weight: 700;
    margin-top: 0.75rem;
}

.reading-nook-feedback.is-correct { color: var(--success, #10b981); }
.reading-nook-feedback.is-wrong { color: var(--danger, #ef4444); }

/* Profiles List — kid-first doll tiles + manage */
.profile-doll-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.profile-pick-actions {
    display: flex;
    gap: 0.55rem;
}

.profile-pick-actions .btn {
    flex: 1 1 0;
    min-height: 44px;
}

.profile-pick-empty {
    grid-column: 1 / -1;
    margin: 0.35rem 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

.profile-doll-tile {
    appearance: none;
    border: 3px solid #1e293b;
    border-radius: 14px;
    background: #fffaf1;
    padding: 0.45rem 0.35rem 0.55rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

@media (hover: hover) {
    .profile-doll-tile:hover {
        transform: translateY(-1px);
    }
}

.profile-doll-tile.is-active {
    border-color: var(--theme-primary, #10b981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

.profile-doll-tile-face {
    width: 100%;
    height: 5.1rem;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-doll-tile-face .profile-portrait,
.profile-doll-tile-face .profile-portrait-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.profile-doll-tile-face .profile-portrait-emoji {
    font-size: 2rem;
}

.profile-doll-tile-name {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: #1e293b;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-manage-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

.profiles-manage-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
}

.profile-manage-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-card-secondary);
}

.profile-manage-face {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-manage-face .profile-portrait,
.profile-manage-face .profile-portrait-emoji {
    width: 100%;
    height: 100%;
}

.profile-manage-name {
    flex: 1;
    min-width: 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-manage-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.profiles-list-container {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
}

.profile-card-item {
    background: var(--bg-card-secondary);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .profile-card-item:hover {
        border-color: var(--theme-primary);
    }
}

.profile-card-item.is-editing {
    border-color: #d97706;
    background: #fffbeb;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}

.profile-card-item.just-saved {
    border-color: #059669;
    background: #ecfdf5;
}

.profile-form-status {
    margin: 0 0 0.85rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    background: #ecfdf5;
    border: 1.5px solid #6ee7b7;
    color: #065f46;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
}

.add-profile-box {
    border-radius: var(--radius-md);
    padding: 0.15rem;
}

.add-profile-box.is-collapsed .add-profile-form {
    display: none;
}

.add-profile-box.is-adding .btn#btnOpenAddProfile,
.add-profile-box.is-editing .btn#btnOpenAddProfile,
.add-profile-box.is-adding #btnOpenAddProfile,
.add-profile-box.is-editing #btnOpenAddProfile {
    display: none;
}

.add-profile-box.is-collapsed #btnOpenAddProfile {
    display: block;
}

.add-profile-form {
    padding: 1rem 1rem 1.1rem;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-medium);
    background: var(--bg-card-secondary);
}

.add-profile-box.is-adding .add-profile-form {
    border-color: #10b981;
    background: #f0fdf4;
}

.add-profile-box.is-editing .add-profile-form {
    border-color: #d97706;
    background: #fffbeb;
}

.add-profile-mode-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    margin-bottom: 0.45rem;
    background: #d1fae5;
    color: #065f46;
}

.add-profile-box.is-editing .add-profile-mode-badge {
    background: #fde68a;
    color: #92400e;
}

.btn-save-edit {
    background: #d97706;
    color: #fff;
    border: none;
}

@media (hover: hover) {
    .btn-save-edit:hover {
        background: #b45309;
        color: #fff;
    }
}

.profile-item-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-item-avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-profile-hint,
.field-help {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.35;
    margin: 0.2rem 0 0.45rem;
    font-weight: 600;
}

.add-profile-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile-item-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
}

.profile-item-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.profile-item-actions {
    display: flex;
    gap: 0.4rem;
}

.avatar-picker-row, .color-picker-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.avatar-pick-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border-medium);
    background: #ffffff;
    font-size: 1.35rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
}

.avatar-pick-btn.active {
    border-color: var(--theme-primary);
    transform: scale(1.15);
    background: var(--theme-primary-light);
}

.color-pick-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: transform 0.15s;
}

.color-pick-btn.active {
    transform: scale(1.2);
    border-color: var(--text-primary);
}

/* Celebration Modal */
.celebration-card {
    text-align: center;
    max-width: 420px;
}

.celebration-body {
    padding: 2.25rem 1.5rem;
}

.celebration-badge-hero {
    font-size: 4rem;
    margin-bottom: 0.5rem;
    animation: bounceHero 1s infinite alternate;
}

@keyframes bounceHero {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

.celebration-title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
}

.celebration-subtitle {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.celeb-score-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    background: var(--bg-card-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.celeb-score-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.celeb-score-val {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-primary);
    display: block;
}

.highlight-gold {
    color: #b45309;
}

.unlocked-badge-callout {
    background: #fffbeb;
    border: 2px solid var(--color-gold);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    margin-bottom: 1rem;
}

.trophy-unlock-icon {
    font-size: 2rem;
}

.hidden {
    display: none !important;
}

.mt-2 { margin-top: 0.75rem; }
.mt-3 { margin-top: 1.25rem; }

/* ==========================================================================
   My World & Avatar Studio Styles (100% Mobile Responsive)
   ========================================================================== */

.coin-pill {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #b45309 !important;
}

.world-studio-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.world-header-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
    border: 2px solid #fde68a;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.world-banner-info {
    min-width: 0;
    flex: 1 1 200px;
}

.world-coin-badge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #ffffff;
    border: 2px solid #f59e0b;
    border-radius: var(--radius-lg);
    padding: 0.4rem 0.85rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.18);
    flex-shrink: 0;
}

.coin-icon-large {
    font-size: 1.8rem;
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.4));
    animation: coinSpin 4s ease-in-out infinite alternate;
}

@keyframes coinSpin {
    0% { transform: scale(1) rotate(-5deg); }
    100% { transform: scale(1.1) rotate(5deg); }
}

.coin-balance-text {
    display: flex;
    flex-direction: column;
}

.coin-balance-val {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: #b45309;
    line-height: 1;
}

.coin-balance-text small {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Studio Layout Grid */
.studio-layout-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
}

.studio-stage-pin {
    position: sticky;
    top: 0;
    z-index: 30;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--bg-base);
    padding: 0.15rem 0 0.25rem;
}

.studio-shop-scroll {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    overflow: visible;
}

.studio-shop-scroll > * {
    scroll-margin-top: 21.5rem;
}

.studio-checkout {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.15rem 0 0;
}

.studio-checkout:has(#stageTryOnRow:not(.hidden)) {
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border: 2px solid #f59e0b;
    border-radius: var(--radius-lg);
    padding: 0.4rem 0.5rem 0.55rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.22);
}

/* Laptop+: full-height doll on the left; chrome + wardrobe scroll. */
@media (min-width: 861px) {
    .studio-layout-grid {
        display: grid;
        grid-template-columns: minmax(22rem, 1fr) minmax(0, 1.15fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "pin shop"
            "chrome shop";
        gap: 0.75rem 1rem;
        align-items: start;
    }

    .studio-stage-pin {
        grid-area: pin;
        align-self: start;
    }

    .studio-shop-scroll {
        display: contents;
    }

    .studio-stage-chrome {
        grid-area: chrome;
    }

    .studio-wardrobe-card {
        grid-area: shop;
    }

    .studio-shop-scroll > * {
        scroll-margin-top: 21rem;
    }
}

/* Left Column: Character Stage */
.studio-stage-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: stretch;
    padding: 0.75rem 0 0.85rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* Stage Viewport */
.avatar-interactive-stage {
    width: 100%;
    max-width: none;
    height: 320px;
    border-radius: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15), var(--shadow-md);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin: 0;
    box-sizing: border-box;
}

@media (min-width: 861px) {
    .avatar-interactive-stage {
        height: 320px;
    }
}

.avatar-interactive-stage.is-panning {
    cursor: grabbing;
}

.stage-zoom-surface {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    will-change: transform;
    z-index: 5;
}

.stage-parallax-layer {
    z-index: 1;
    transform-origin: center center;
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    .stage-parallax-layer.stage-parallax-animating {
        transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
    }
}

.stage-vignette {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 20;
    background: radial-gradient(ellipse at 50% 42%, transparent 35%, rgba(15, 23, 42, 0.28) 100%);
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.22);
}

.avatar-doll-rim {
    position: absolute;
    bottom: 28px;
    width: 150px;
    height: 190px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 8;
    background: radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 42%, transparent 72%);
    filter: blur(1px);
}

@media (prefers-reduced-motion: reduce) {
    .stage-vignette {
        background: radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(15, 23, 42, 0.18) 100%);
    }
    .avatar-doll-rim {
        opacity: 0.65;
    }
    .avatar-cheer-bubble {
        animation: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .stage-zoom-surface.stage-zoom-animating {
        transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
    }
}

.stage-zoom-controls {
    position: absolute;
    left: 0.4rem;
    bottom: 0.4rem;
    z-index: 25;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: auto;
    max-width: calc(100% - 0.8rem);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    pointer-events: none;
}

.stage-focus-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
}

.stage-focus-chip {
    border: 2px solid var(--border-medium);
    background: var(--bg-card-secondary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 800;
    font-family: var(--font-heading);
    cursor: pointer;
    min-height: 32px;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .stage-focus-chip:hover {
        border-color: var(--theme-primary);
        color: var(--theme-primary-dark);
    }
}

.stage-focus-chip.active {
    background: var(--theme-primary-light);
    border-color: var(--theme-primary);
    color: var(--theme-primary-dark);
}

.stage-zoom-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-width: 100%;
    background: var(--bg-card-secondary);
    border: 2px solid var(--border-medium);
    border-radius: 999px;
    padding: 0.2rem 0.45rem;
    box-sizing: border-box;
}

.stage-zoom-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: var(--text-primary);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, background 0.12s ease;
}

@media (hover: hover) {
    .stage-zoom-btn:hover {
        background: var(--theme-primary-light);
        transform: scale(1.06);
    }
}

.stage-zoom-btn:active,
.stage-zoom-btn.is-pressed {
    transform: scale(0.94);
}

.stage-zoom-reset {
    font-size: 0.95rem;
}

.stage-zoom-label {
    min-width: 3.2rem;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-secondary);
}

#avatarStage .stage-zoom-toolbar {
    pointer-events: auto;
    gap: 0.12rem;
    flex-wrap: nowrap;
    padding: 0.1rem 0.14rem;
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(8px);
}

#avatarStage .stage-zoom-btn {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.94);
}

#avatarStage .stage-zoom-label {
    min-width: 2rem;
    font-size: 0.62rem;
    color: #f8fafc;
}

.stage-zoom-hint {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
}

@media (max-width: 480px) {
    .stage-zoom-hint {
        font-size: 0.62rem;
    }
}

/* Backdrops — flat fills that match each ink scene (no CSS gradients). The Backgrounds tab's
   card thumbs (.wardrobe-backdrop-thumb.bg-*) share the sky fill. */
.wardrobe-backdrop-thumb.bg-galaxy { background: #1e1b4b; }
.wardrobe-backdrop-thumb.bg-kingdom { background: #bae6fd; }
.wardrobe-backdrop-thumb.bg-sunset { background: #fdba74; }
.wardrobe-backdrop-thumb.bg-neon { background: #18181b; }
.wardrobe-backdrop-thumb.bg-sanrio { background: #fde8f0; }
.wardrobe-backdrop-thumb.bg-godzilla { background: #3f1d1d; }
.wardrobe-backdrop-thumb.bg-sports { background: #7dd3fc; }

.avatar-interactive-stage.bg-galaxy {
    background: #1e1b4b;
    border: 3px solid #6366f1;
}

.avatar-interactive-stage.bg-kingdom {
    background: #bae6fd;
    border: 3px solid #f472b6;
}

.avatar-interactive-stage.bg-sunset {
    background: #fdba74;
    border: 3px solid #fb923c;
}

.avatar-interactive-stage.bg-neon {
    background: #18181b;
    border: 3px solid #06b6d4;
}

.avatar-interactive-stage.bg-sanrio {
    background: #fde8f0;
    border: 3px solid #f472b6;
}

.avatar-interactive-stage.bg-godzilla {
    background: #3f1d1d;
    border: 3px solid #c8503f;
}

.avatar-interactive-stage.bg-sports {
    background: #7dd3fc;
    border: 3px solid #10b981;
}

/* Scenery Vector Objects Viewport */
.stage-scenery-viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
    border-radius: inherit;
}

.stage-scenery-viewport svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Scenery Micro-Animations */
@keyframes starTwinkle {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes planetFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes cloudDrift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

@keyframes palmSway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(2.5deg); }
}

@keyframes sakuraFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(8px, 12px) rotate(22deg); }
}

.anim-twinkle { animation: starTwinkle 2.5s infinite ease-in-out; transform-origin: center; }
.anim-planet { animation: planetFloat 4s infinite ease-in-out; transform-origin: center; }
.anim-cloud { animation: cloudDrift 6s infinite ease-in-out; }
.anim-palm { animation: palmSway 3.5s infinite ease-in-out; transform-origin: bottom center; }
.anim-sakura { animation: sakuraFloat 4s infinite ease-in-out; }

.stage-aura {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
    pointer-events: none;
    animation: auraPulse 3s ease-in-out infinite alternate;
}

@keyframes auraPulse {
    0% { transform: scale(0.9); opacity: 0.5; }
    100% { transform: scale(1.2); opacity: 0.9; }
}

.stage-shadow {
    position: absolute;
    bottom: 20px;
    width: 110px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    filter: blur(4px);
    pointer-events: none;
}

.avatar-svg-viewport {
    width: 192px;
    height: 230px;
    z-index: 10;
    animation: avatarBreathing 3s ease-in-out infinite;
    transform-origin: bottom center;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.28)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.12));
}

.avatar-interactive-stage:active .avatar-svg-viewport,
.avatar-interactive-stage.is-pressed .avatar-svg-viewport {
    transform: scale(0.94);
}

.avatar-interactive-stage.cheer .avatar-svg-viewport {
    animation: avatarCheerJump 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes avatarBreathing {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(-4px) scaleY(1.02); }
}

@keyframes avatarCheerJump {
    0% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-25px) scale(1.06) rotate(-4deg); }
    70% { transform: translateY(-8px) scale(1.03) rotate(4deg); }
    100% { transform: translateY(0) scale(1); }
}

/* Companion Pet */
.companion-pet-stage {
    position: absolute;
    bottom: 22px;
    right: 20px;
    width: 48px;
    height: 48px;
    z-index: 15;
    animation: petFloat 2.5s ease-in-out infinite alternate;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

@keyframes petFloat {
    0% { transform: translateY(0) rotate(-3deg); }
    100% { transform: translateY(-6px) rotate(3deg); }
}

/* Live pet toys — roam the floor; tap is a cute trick, never a quiz. */
.companion-pet-stage[data-pet-toy],
.companion-pet-stage[data-pet-toy="godzilla_mini_kaiju"] {
    bottom: auto;
    right: auto;
    left: 0;
    top: 0;
    width: 72px;
    height: 72px;
    animation: none;
    filter: none;
    cursor: pointer;
    pointer-events: auto;
    z-index: 16;
}

.pet-toy-stomp {
    transform-origin: 40px 68px;
    transform-box: view-box;
}

.companion-pet-stage[data-pet-toy] .pet-toy-stomp,
[data-pet-toy="godzilla_mini_kaiju"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1));
}

[data-walk="stomp"][data-stomp-phase="lift"][data-stomp-foot="l"] .pet-toy-stomp,
[data-pet-toy="godzilla_mini_kaiju"][data-stomp-phase="lift"][data-stomp-foot="l"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-8px) rotate(-9deg);
}

[data-walk="stomp"][data-stomp-phase="lift"][data-stomp-foot="r"] .pet-toy-stomp,
[data-pet-toy="godzilla_mini_kaiju"][data-stomp-phase="lift"][data-stomp-foot="r"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-8px) rotate(9deg);
}

[data-walk="stomp"][data-stomp-phase="plant"] .pet-toy-stomp,
[data-pet-toy="godzilla_mini_kaiju"][data-stomp-phase="plant"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(2px) scaleY(0.92);
}

.pet-godzilla-foot {
    transform-box: fill-box;
    transform-origin: center top;
}

[data-stomp-phase="lift"][data-stomp-foot="l"] .pet-godzilla-foot-l {
    transform: translateY(-7px) rotate(-16deg);
}

[data-stomp-phase="lift"][data-stomp-foot="r"] .pet-godzilla-foot-r {
    transform: translateY(-7px) rotate(16deg);
}

[data-walk="sneak"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) scaleY(0.86) translateY(4px);
}
[data-walk="sneak"][data-stomp-phase="lift"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) scaleY(0.9) translateY(-2px);
}
[data-walk="sneak"][data-stomp-phase="hold"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) scaleY(0.84) translateY(5px);
}

[data-walk="scurry"][data-stomp-phase="lift"][data-stomp-foot="l"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-3px) rotate(-5deg);
}
[data-walk="scurry"][data-stomp-phase="lift"][data-stomp-foot="r"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-3px) rotate(5deg);
}

[data-walk="trot"][data-stomp-phase="lift"][data-stomp-foot="l"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-6px) rotate(-6deg);
}
[data-walk="trot"][data-stomp-phase="lift"][data-stomp-foot="r"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-6px) rotate(6deg);
}
[data-walk="trot"][data-stomp-phase="plant"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(1px) scaleY(0.96);
}

[data-walk="march"][data-stomp-phase="lift"][data-stomp-foot="l"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-7px);
}
[data-walk="march"][data-stomp-phase="lift"][data-stomp-foot="r"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-7px);
}
[data-walk="march"][data-stomp-phase="plant"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(2px);
}

[data-walk="prance"][data-stomp-phase="lift"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-12px) rotate(-7deg);
}
[data-walk="prance"][data-stomp-phase="plant"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(2px) scaleY(0.9);
}

[data-walk="dash-pause"][data-stomp-phase="lift"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) skewX(-10deg) scaleX(1.08);
}
[data-walk="dash-pause"][data-stomp-phase="hold"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1));
}

[data-walk="ooze"][data-stomp-phase="lift"] .pet-toy-stomp {
    transform: scaleX(calc(var(--pet-face, 1) * 1.28)) scaleY(0.78) translateY(4px);
}
[data-walk="ooze"][data-stomp-phase="plant"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) scaleY(1.04);
}

[data-walk="float"] .pet-toy-stomp {
    animation: petToyFloatBob 1.5s ease-in-out infinite;
}
[data-walk="flutter"] .pet-toy-stomp,
[data-walk="flap"] .pet-toy-stomp {
    animation: petToyFlutter 0.32s ease-in-out infinite;
}
[data-walk="soar"] .pet-toy-stomp {
    animation: petToySoar 1.05s ease-in-out infinite;
}
[data-walk="hover-square"] .pet-toy-stomp {
    animation: petToyHover 0.9s ease-in-out infinite;
}
[data-walk="hop-count"][data-stomp-phase="hop"] .pet-toy-stomp,
[data-walk="bounce-count"][data-stomp-phase="hop"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) scaleY(0.92);
}

@keyframes petToyFloatBob {
    0% { transform: scaleX(var(--pet-face, 1)) translateY(0); }
    100% { transform: scaleX(var(--pet-face, 1)) translateY(-5px); }
}
@keyframes petToyFlutter {
    0%, 100% { transform: scaleX(var(--pet-face, 1)) rotate(-4deg) translateY(-2px); }
    50% { transform: scaleX(var(--pet-face, 1)) rotate(4deg) translateY(2px); }
}
@keyframes petToySoar {
    0%, 100% { transform: scaleX(var(--pet-face, 1)) translateY(0) rotate(-3deg); }
    50% { transform: scaleX(var(--pet-face, 1)) translateY(-6px) rotate(3deg); }
}
@keyframes petToyHover {
    0%, 100% { transform: scaleX(var(--pet-face, 1)) translateY(0); }
    50% { transform: scaleX(var(--pet-face, 1)) translateY(-4px); }
}

.pet-cloud-ear,
.pet-hamster-cheek,
.pet-mothra-wing,
.pet-eagle-wing,
.pet-dragon-wing,
.pet-fox-tails,
.pet-robot-arm {
    transform-box: fill-box;
    transform-origin: center;
}

[data-walk="float"] .pet-cloud-ear-l { animation: petEarSwayL 1.2s ease-in-out infinite; }
[data-walk="float"] .pet-cloud-ear-r { animation: petEarSwayR 1.2s ease-in-out infinite; }
[data-trick="ear-flop"][data-trick-frame="2"] .pet-cloud-ear-l { transform: rotate(-28deg) translateY(8px); }
[data-trick="ear-flop"][data-trick-frame="2"] .pet-cloud-ear-r { transform: rotate(28deg) translateY(8px); }

[data-trick="cheeks"][data-trick-frame="2"] .pet-hamster-cheek {
    transform: scale(1.65);
}

[data-walk="flutter"] .pet-mothra-wing-l,
[data-walk="flap"] .pet-dragon-wing-l { animation: petWingL 0.28s ease-in-out infinite; }
[data-walk="flutter"] .pet-mothra-wing-r,
[data-walk="flap"] .pet-dragon-wing-r { animation: petWingR 0.28s ease-in-out infinite; }
[data-walk="soar"] .pet-eagle-wing-l { animation: petWingL 0.7s ease-in-out infinite; }
[data-walk="soar"] .pet-eagle-wing-r { animation: petWingR 0.7s ease-in-out infinite; }
[data-trick="wings-spread"][data-trick-frame="2"] .pet-eagle-wing-l { transform: rotate(-18deg) translateX(-4px); }
[data-trick="wings-spread"][data-trick-frame="2"] .pet-eagle-wing-r { transform: rotate(18deg) translateX(4px); }

[data-walk="dash-pause"] .pet-fox-tails { transform-origin: left center; }
[data-trick="tails"][data-trick-frame="2"] .pet-fox-tails { transform: rotate(-16deg); }

[data-trick="salute"][data-trick-frame="1"] .pet-robot-arm-r,
[data-trick="salute"][data-trick-frame="2"] .pet-robot-arm-r {
    transform: rotate(-52deg) translate(-4px, -10px);
}

@keyframes petEarSwayL {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(8deg); }
}
@keyframes petEarSwayR {
    0%, 100% { transform: rotate(4deg); }
    50% { transform: rotate(-8deg); }
}
@keyframes petWingL {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(-12deg); }
}
@keyframes petWingR {
    0%, 100% { transform: rotate(0); }
    50% { transform: rotate(12deg); }
}

[data-trick="pounce"][data-trick-frame="2"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(10px, -16px) rotate(-14deg);
}
[data-trick="spin"][data-trick-frame="2"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) rotate(180deg);
}
[data-trick="spin"][data-trick-frame="3"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) rotate(360deg);
}
[data-trick="squish"][data-trick-frame="2"] .pet-toy-stomp {
    transform: scaleX(calc(var(--pet-face, 1) * 1.4)) scaleY(0.42) translateY(16px);
}
[data-trick="header"][data-trick-frame="2"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-8px);
}
[data-trick="sparkle-stamp"][data-trick-frame="2"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(3px) scaleY(0.88);
}
[data-trick="spark-sneeze"][data-trick-frame="2"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(-2px, -3px) rotate(-6deg);
}

.pet-toy-fire-frame,
.pet-toy-dust,
.pet-toy-fx-frame,
.pet-toy-count {
    display: none;
}

.is-puff-1 .pet-toy-fire-frame-1,
.is-puff-2 .pet-toy-fire-frame-2,
.is-puff-3 .pet-toy-fire-frame-3,
[data-trick-frame="1"] .pet-toy-fx-frame-1,
[data-trick-frame="2"] .pet-toy-fx-frame-2,
[data-trick-frame="3"] .pet-toy-fx-frame-3,
.is-trick-1 .pet-toy-fx-frame-1,
.is-trick-2 .pet-toy-fx-frame-2,
.is-trick-3 .pet-toy-fx-frame-3 {
    display: inline;
}

[data-count="1"] .pet-toy-count-1,
[data-count="2"] .pet-toy-count-2,
[data-count="3"] .pet-toy-count-3 {
    display: inline;
}

[data-stomp-phase="plant"] .pet-toy-dust {
    display: inline;
}

[data-pet-mode="perch"] .pet-toy-floor-shadow,
[data-pet-mode="hop-up"] .pet-toy-floor-shadow,
[data-pet-mode="hop-down"] .pet-toy-floor-shadow {
    opacity: 0.08;
}

[data-pet-mode="hide"] .pet-toy-floor-shadow,
[data-pet-mode="hide-miss"] .pet-toy-floor-shadow {
    opacity: 0;
}

/* Fully conceal the pet while hunting. Furniture paint-in-front is the cover;
   this clip hides ears, tail, and any pose that would peek through gaps. */
.house-room-svg [data-pet-mode="hide"] .pet-toy-actor,
.house-room-svg [data-pet-mode="hide-miss"] .pet-toy-actor,
.house-room-svg [data-pet-mode="hide"],
.house-room-svg [data-pet-mode="hide-miss"] {
    clip-path: inset(100%);
}

.pet-toy-mood {
    transform-origin: 40px 68px;
    transform-box: view-box;
}

[data-hungry="1"] .pet-toy-mood {
    transform: rotate(-10deg) translateY(6px);
}

.pet-toy-hide-fx,
.pet-toy-found-fx {
    display: none;
}

[data-pet-mode="hide"] .pet-toy-hide-fx,
[data-pet-mode="hide-miss"] .pet-toy-hide-fx {
    display: inline;
}

[data-pet-mode="hide-found"] .pet-toy-found-fx {
    display: inline;
}

[data-pet-mode="hide"] .pet-toy-stomp,
[data-pet-mode="hide-miss"] .pet-toy-stomp,
[data-pet-mode="hide-found"] .pet-toy-stomp {
    animation: none;
}

[data-hide-pose="sneak-behind"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="sneak-behind"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) scaleY(0.7) translate(10px, 12px) rotate(-16deg);
}
[data-hide-pose="scrunch"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="scrunch"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(calc(var(--pet-face, 1) * 1.18)) scaleY(0.62) translateY(14px);
}
[data-hide-pose="float-peek"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="float-peek"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(6px, -8px) rotate(-8deg);
}
[data-hide-pose="stuff"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="stuff"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) scale(1.08, 0.88) translate(8px, 8px);
}
[data-hide-pose="hop-peek"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="hop-peek"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(4px, -6px) rotate(10deg);
}
[data-hide-pose="flutter-peek"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="flutter-peek"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(8px, -10px) rotate(12deg);
}
[data-hide-pose="hover-behind"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="hover-behind"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(6px, -12px);
}
[data-hide-pose="tail-out"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="tail-out"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(-14px, 8px) rotate(22deg);
}
[data-hide-pose="wing-peek"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="wing-peek"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(10px, -6px) rotate(-12deg);
}
[data-hide-pose="bounce-peek"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="bounce-peek"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) scaleY(0.82) translate(4px, 6px);
}
[data-hide-pose="dash-hide"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="dash-hide"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) skewX(-14deg) translate(8px, 6px);
}
[data-hide-pose="flap-peek"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="flap-peek"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(6px, -8px) rotate(-10deg);
}
[data-hide-pose="ooze-hide"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="ooze-hide"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(calc(var(--pet-face, 1) * 1.36)) scaleY(0.48) translateY(16px);
}
[data-hide-pose="spin-hide"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="spin-hide"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) rotate(-28deg) translate(8px, 8px);
}
[data-hide-pose="salute-hide"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="salute-hide"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(8px, 4px) rotate(-6deg);
}
[data-hide-pose="prance-hide"][data-pet-mode="hide"] .pet-toy-stomp,
[data-hide-pose="prance-hide"][data-pet-mode="hide-miss"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(6px, -4px) rotate(8deg);
}

[data-pet-mode="hide-miss"] .pet-toy-actor {
    animation: petHideMissShake 0.28s ease-in-out 2;
}

[data-found-pose="pounce-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(-12px, -18px) rotate(-16deg);
}
[data-found-pose="stomp-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-10px) rotate(-8deg);
}
[data-found-pose="float-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-20px);
}
[data-found-pose="pop-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) scale(1.16) translateY(-8px);
}
[data-found-pose="hop-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-22px);
}
[data-found-pose="flutter-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(-8px, -16px) rotate(10deg);
}
[data-found-pose="hover-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-18px);
}
[data-found-pose="tail-wag"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(-10px, -8px) rotate(14deg);
}
[data-found-pose="soar-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(-14px, -20px) rotate(-8deg);
}
[data-found-pose="bounce-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-24px);
}
[data-found-pose="dash-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(-18px, -6px) skewX(-10deg);
}
[data-found-pose="spark-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translate(-6px, -14px) rotate(-12deg);
}
[data-found-pose="squish-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(calc(var(--pet-face, 1) * 1.2)) scaleY(0.7) translateY(-8px);
}
[data-found-pose="spin-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) rotate(200deg) translateY(-10px);
}
[data-found-pose="salute-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-12px);
}
[data-found-pose="sparkle-out"][data-pet-mode="hide-found"] .pet-toy-stomp {
    transform: scaleX(var(--pet-face, 1)) translateY(-16px) rotate(8deg);
}

@keyframes petHideMissShake {
    0%, 100% { transform: translateX(0); }
    35% { transform: translateX(-5px); }
    70% { transform: translateX(5px); }
}

.pet-toy-speech-host {
    pointer-events: none;
}

.pet-toy-speech text {
    font-family: var(--font-heading, Nunito, sans-serif);
}

.pet-biscuit-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 18;
}

.pet-biscuit-stage .pet-biscuit {
    position: absolute;
    pointer-events: auto;
    width: 44px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    z-index: 18;
}

.pet-biscuit-svg,
.pet-biscuit-group .pet-biscuit {
    overflow: visible;
    pointer-events: auto;
    cursor: pointer;
}

.prop-ice-cream {
    cursor: pointer;
}

.prop-ice-cherry {
    transform-box: fill-box;
    transform-origin: center;
}

#svgProp[data-scoops="1"] .prop-ice-scoop-2,
#svgProp[data-scoops="1"] .prop-ice-scoop-3,
.prop-ice-cream[data-scoops="1"] .prop-ice-scoop-2,
.prop-ice-cream[data-scoops="1"] .prop-ice-scoop-3 {
    display: none;
}

#svgProp[data-scoops="1"] .prop-ice-cherry,
.prop-ice-cream[data-scoops="1"] .prop-ice-cherry {
    transform: translateY(36px);
}

#svgProp[data-scoops="2"] .prop-ice-scoop-3,
.prop-ice-cream[data-scoops="2"] .prop-ice-scoop-3 {
    display: none;
}

#svgProp[data-scoops="2"] .prop-ice-cherry,
.prop-ice-cream[data-scoops="2"] .prop-ice-cherry {
    transform: translateY(18px);
}

/* Held prop idle loops. The selectors are classes on the prop art in
   lib/avatar-doll-parts.js, so the Studio doll, the House doll and portraits
   all move the same way. Every loop starts and ends on the drawn pose, which
   is also the reduced-motion still. Moving parts carry `prop-anim`. Shop
   thumbs stay still; the try-on doll shows the motion. Whole-prop sways turn
   about the fist in doll units (the hand is at 144,155). Amplitudes are
   deliberately chunky so motion reads on the stage doll (not just speed). */
.prop-atomic-saber,
.prop-skate,
.prop-boxing,
.prop-guitar,
.prop-snow-skis,
.prop-snowboard,
.prop-ski-poles,
.prop-hockey-stick,
.prop-sled {
    transform-box: view-box;
}

.prop-atomic-saber { transform-origin: 144px 160px; }
.prop-skate { transform-origin: 150px 178px; }
.prop-boxing { transform-origin: 158px 184px; }
.prop-guitar { transform-origin: 146px 178px; }
.prop-snow-skis { transform-origin: 144px 160px; }
.prop-snowboard { transform-origin: 146px 160px; }
.prop-ski-poles { transform-origin: 144px 160px; }
.prop-hockey-stick { transform-origin: 148px 160px; }
.prop-sled { transform-origin: 146px 160px; }

.prop-saber-core,
.prop-mic-sparkle,
.prop-bone-glint,
.prop-trophy-glint,
.prop-wand-star,
.prop-wand-sparkle,
.prop-katana-spark,
.prop-shield-glint,
.prop-ski-glint,
.prop-pole-glint,
.prop-sled-glint,
.prop-hockey-puck {
    transform-box: fill-box;
    transform-origin: center;
}

.prop-ice-drip {
    transform-box: fill-box;
    transform-origin: 50% 0;
}

.prop-cupcake-cherry,
.prop-skate-flame {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .prop-ice-drip { animation: propIceDrip 2.6s ease-in-out infinite; }
    .prop-ice-drip-2 { animation-delay: -1.3s; }
    .prop-mic-sparkle { animation: propTwinkle 1.8s ease-in-out infinite; }
    .prop-mic-sparkle-2 { animation-delay: -0.9s; }
    .prop-cupcake-sprinkles { animation: propBob 1.6s ease-in-out infinite; }
    .prop-cupcake-cherry { animation: propCherryBounce 1.6s ease-in-out -0.4s infinite; }
    .prop-atomic-saber { animation: propSaberSway 2.8s ease-in-out infinite; }
    .prop-saber-blade { animation: propSaberFlicker 1.2s linear infinite; }
    .prop-saber-core { animation: propSaberHum 1s ease-in-out infinite; }
    .prop-bone-gleam { animation: propGleam 2.4s ease-in-out infinite; }
    .prop-bone-glint { animation: propTwinkle 2.4s ease-in-out -1.2s infinite; }
    .prop-trophy-shine { animation: propGleam 2s ease-in-out infinite; }
    .prop-trophy-glint { animation: propTwinkle 2s ease-in-out -1s infinite; }
    .prop-skate { animation: propSkateTilt 2.8s ease-in-out infinite; }
    .prop-skate-flame { animation: propFlameFlicker 1.1s ease-in-out infinite; }
    .prop-boxing { animation: propGloveBob 1.4s ease-in-out infinite; }
    .prop-wand-star { animation: propStarTwinkle 2.2s ease-in-out infinite; }
    .prop-wand-sparkle { animation: propTwinkle 2.2s ease-in-out -1.1s infinite; }
    .prop-wand-sparkle-2 { animation-delay: -0.4s; }
    .prop-katana-shine { animation: propGleam 1.6s ease-in-out infinite; }
    .prop-katana-shine-2 { animation-delay: -0.8s; }
    .prop-katana-spark { animation: propTwinkle 1.6s ease-in-out -0.4s infinite; }
    .prop-katana-spark-2 { animation-delay: -1.2s; }
    .prop-boba-pearl { animation: propPearlFloat 2.4s ease-in-out infinite; }
    .prop-boba-pearl-2 { animation-delay: -0.8s; }
    .prop-boba-pearl-3 { animation-delay: -1.6s; }
    .prop-guitar { animation: propGuitarStrum 2.4s ease-in-out infinite; }
    .prop-pad-light { animation: propLedBlink 1.5s ease-in-out infinite; }
    .prop-pad-light-2 { animation-delay: -0.5s; }
    .prop-pad-light-3 { animation-delay: -1s; }
    .prop-pad-led { animation: propButtonBlink 2.4s ease-in-out infinite; }
    .prop-pad-led-2 { animation-delay: -0.6s; }
    .prop-pad-led-3 { animation-delay: -1.2s; }
    .prop-pad-led-4 { animation-delay: -1.8s; }
    .prop-shield-gleam { animation: propGleam 2.6s ease-in-out infinite; }
    .prop-shield-glint { animation: propTwinkle 2.6s ease-in-out -1.3s infinite; }
    .prop-snow-skis { animation: propSkiSway 3s ease-in-out infinite; }
    .prop-ski-glint { animation: propTwinkle 3s ease-in-out -1.5s infinite; }
    .prop-snowboard { animation: propBoardRock 2.6s ease-in-out infinite; }
    .prop-board-gleam { animation: propGleam 2.2s ease-in-out infinite; }
    .prop-ski-poles { animation: propPoleBob 2.2s ease-in-out infinite; }
    .prop-pole-glint { animation: propTwinkle 2.2s ease-in-out -1.1s infinite; }
    .prop-hockey-stick { animation: propStickSlap 2.4s ease-in-out infinite; }
    .prop-hockey-puck { animation: propPuckNudge 2.4s ease-in-out -0.6s infinite; }
    .prop-sled { animation: propSledRock 3.2s ease-in-out infinite; }
    .prop-sled-glint { animation: propTwinkle 3.2s ease-in-out -1.6s infinite; }
}

@media (prefers-reduced-motion: reduce) {
    .prop-anim {
        animation: none;
    }
}

.wardrobe-item-svg .prop-anim {
    animation: none;
}

@keyframes propIceDrip {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.55); }
}

@keyframes propTwinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(0.4) rotate(55deg); opacity: 0.35; }
}

@keyframes propBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes propCherryBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(-14deg); }
}

@keyframes propSaberSway {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-7deg); }
    75% { transform: rotate(8deg); }
}

@keyframes propSaberFlicker {
    0%, 14%, 18%, 48%, 52%, 78%, 82%, 100% { opacity: 1; }
    16% { opacity: 0.5; }
    50% { opacity: 0.65; }
    80% { opacity: 0.45; }
}

@keyframes propSaberHum {
    0%, 100% { transform: scaleX(1) scaleY(1); opacity: 1; }
    50% { transform: scaleX(0.4) scaleY(1.06); opacity: 0.85; }
}

@keyframes propGleam {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.12; }
}

@keyframes propSkateTilt {
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(-9deg); }
    70% { transform: rotate(8deg); }
}

@keyframes propFlameFlicker {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(0.75, 1.4); }
}

@keyframes propGloveBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(-9deg); }
}

@keyframes propStarTwinkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.35) rotate(22deg); }
}

@keyframes propPearlFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes propGuitarStrum {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-7deg); }
    75% { transform: rotate(6deg); }
}

@keyframes propSkiSway {
    0%, 100% { transform: rotate(0deg); }
    30% { transform: rotate(-8deg); }
    70% { transform: rotate(7deg); }
}

@keyframes propBoardRock {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(9deg); }
    75% { transform: rotate(-7deg); }
}

@keyframes propPoleBob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-7px) rotate(5deg); }
}

@keyframes propStickSlap {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-11deg); }
    60% { transform: rotate(6deg); }
}

@keyframes propSledRock {
    0%, 100% { transform: rotate(0deg); }
    35% { transform: rotate(7deg); }
    75% { transform: rotate(-9deg); }
}

@keyframes propPuckNudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
}

@keyframes propLedBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.08; }
}

@keyframes propButtonBlink {
    0%, 50%, 100% { fill-opacity: 1; }
    70% { fill-opacity: 0.12; }
}

.avatar-cheer-bubble {
    position: relative;
    top: auto;
    margin: 0 auto;
    background: #ffffff;
    border: 2px solid #fde047;
    border-radius: var(--radius-full);
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    z-index: 2;
    animation: bubbleFloat 2s ease-in-out infinite alternate;
}

@keyframes bubbleFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

.stage-preview-bar,
.stage-studio-bar {
    width: 100%;
    max-width: none;
    background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
    border: 2px solid #f59e0b;
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.3rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.22);
    animation: none;
    box-sizing: border-box;
}

.studio-bar-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    width: 100%;
    flex-wrap: wrap;
}

.studio-bar-wallet {
    justify-content: space-between;
}

.studio-bar-wallet > * {
    flex: 0 1 auto;
    min-width: 0;
}

.studio-bar-coin {
    padding: 0.15rem 0.7rem;
    gap: 0.3rem;
    min-height: 2.75rem;
}

.studio-bar-coin .coin-icon-large {
    font-size: 1.2rem;
    animation: none;
}

.studio-bar-coin .coin-balance-val {
    font-size: 1.1rem;
}

.stage-studio-bar .world-cart-btn {
    padding: 0.25rem 0.8rem;
    min-height: 2.75rem;
}

.stage-studio-bar .cart-btn-icon {
    font-size: 1.1rem;
}

.stage-studio-bar .cart-btn-text {
    font-size: 0.8rem;
}

.doll-look-hit {
    fill: transparent;
    pointer-events: all;
    cursor: pointer;
}

.studio-bar-tryon {
    flex-direction: column;
    align-items: stretch;
    scroll-margin-top: 21.5rem;
}

.studio-bar-tryon.hidden {
    display: none !important;
}

.stage-tryon-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
    max-height: 9.5rem;
    overflow-y: auto;
}

.tryon-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    min-width: 0;
    min-height: 2.75rem;
}

.studio-bar-tryon .btn {
    min-height: 2.75rem;
    flex-shrink: 0;
}

.studio-cart-actions #btnRevertPreview {
    align-self: stretch;
}

.studio-cart-select-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    min-width: 0;
    width: 100%;
}

.studio-cart-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    padding: 0.35rem 0.75rem 0;
    box-sizing: border-box;
}

.studio-checkout:has(#stageTryOnRow:not(.hidden)) .studio-cart-actions {
    padding: 0.35rem 0 0;
}

.studio-cart-primary {
    display: grid;
    grid-template-areas: "slot";
    width: 100%;
    min-width: 0;
}

.studio-cart-primary > .btn {
    grid-area: slot;
    width: 100%;
    min-height: 2.75rem;
}

.studio-cart-actions .btn {
    width: 100%;
    min-height: 2.75rem;
}

.stage-studio-bar .cart-item-row {
    padding: 0.3rem 0.35rem;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.stage-studio-bar .cart-item-name {
    font-size: 0.78rem;
}

.stage-studio-bar .cart-item-price {
    font-size: 0.72rem;
    padding: 0.15rem 0.4rem;
}

.stage-studio-bar .studio-cart-summary {
    padding: 0.4rem 0.45rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.stage-studio-bar .cart-summary-row {
    font-size: 0.72rem;
    gap: 0.35rem;
}

.stage-studio-bar .cart-summary-row.total-row {
    font-size: 0.8rem;
}

.tryon-added-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    padding: 0.25rem 0.6rem;
    border: 2px solid #f59e0b;
    border-radius: 999px;
    background: #fffbeb;
    font-size: 0.72rem;
    font-weight: 800;
    color: #92400e;
    white-space: nowrap;
}

.coin-svg {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.12em;
    flex-shrink: 0;
}

@keyframes slideDownPreview {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.stage-preview-bar.hidden {
    display: none !important;
}

.preview-item-title {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
    color: #78350f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

.preview-buttons-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.btn-gold-shine {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    border: none;
    font-weight: 800;
    font-size: 0.78rem;
    padding: 0.35rem 0.55rem;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.4);
    animation: pulseGold 2s infinite ease-in-out;
}

@media (hover: hover) {
    .btn-gold-shine:hover {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        transform: translateY(-1px);
    }
}

@keyframes pulseGold {
    0%, 100% { box-shadow: 0 3px 8px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 3px 14px rgba(245, 158, 11, 0.65); }
}

.studio-cart-actions #btnSaveHeroProfile {
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
}

/* Right Column: Wardrobe Browser */
.studio-wardrobe-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.wardrobe-category-tabs {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--border-light);
    width: 100%;
    max-width: 100%;
    scrollbar-width: none;
}

.wardrobe-category-tabs::-webkit-scrollbar {
    display: none;
}

.wardrobe-tab-btn {
    background: var(--bg-card-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-full);
    padding: 0.35rem 0.7rem;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .wardrobe-tab-btn:hover {
        color: var(--text-primary);
        border-color: var(--theme-primary);
    }
}

.wardrobe-tab-btn.active {
    background: var(--theme-primary);
    color: #ffffff;
    border-color: var(--theme-primary);
    box-shadow: 0 2px 8px var(--theme-glow);
}

/* Color Picker Toolbar */
.wardrobe-color-picker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    background: var(--bg-card-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.color-picker-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.palette-swatches-row {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    max-width: 100%;
}

.palette-swatch-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

@media (hover: hover) {
    .palette-swatch-btn:hover {
        transform: scale(1.2);
    }
}

.palette-swatch-btn.active {
    transform: scale(1.25);
    outline: 2px solid var(--theme-primary);
}

/* Wardrobe Items Grid */
.wardrobe-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 0.55rem;
    max-height: 360px;
    overflow-y: auto;
    padding: 0.2rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.wardrobe-item-card {
    background: #ffffff;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    position: relative;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-xs);
    min-width: 0;
    box-sizing: border-box;
}

@media (hover: hover) {
    .wardrobe-item-card:hover {
        border-color: var(--theme-primary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }
}

.wardrobe-item-card.equipped {
    border-color: var(--theme-primary);
    background: var(--theme-primary-light);
}

.wardrobe-item-card.locked {
    opacity: 0.9;
}

.wardrobe-item-card.previewing {
    border-color: #f59e0b !important;
    background: #fffbeb !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.45) !important;
    transform: translateY(-2px) scale(1.02);
}

.wardrobe-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.6rem;
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 0.15rem;
}

/* The shop thumbnail is the doll's own art, so let it fill the card. */
.wardrobe-item-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.wardrobe-swatch-dot {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 3px solid #1e293b;
    display: block;
}

.wardrobe-icon-none {
    font-size: 1.5rem;
    font-weight: 800;
    color: #94a3b8;
}

.wardrobe-item-name {
    font-family: var(--font-heading);
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.wardrobe-item-badge {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.12rem 0.4rem;
    border-radius: var(--radius-full);
}

.wardrobe-item-badge.badge-equipped {
    background: var(--theme-primary);
    color: #ffffff;
}

.wardrobe-item-badge.badge-previewing {
    background: #f59e0b;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.4);
    animation: pulseBadge 1.5s infinite ease-in-out;
}

@keyframes pulseBadge {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(0.96); }
}

.wardrobe-item-badge.badge-price {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.wardrobe-item-badge.badge-free {
    background: #f1f5f9;
    color: #475569;
}

/* ==========================================================================
   Wardrobe Shopping Cart & Checkout Modal
   ========================================================================== */

.world-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.world-cart-btn {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: var(--radius-full);
    padding: 0.5rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) {
    .world-cart-btn:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
        background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    }
}

.world-cart-btn:active,
.world-cart-btn.is-pressed {
    transform: scale(0.96);
}

.world-cart-btn.has-items {
    animation: cartPulse 2s infinite ease-in-out;
}

.studio-cart-badge {
    cursor: default;
}

.studio-cart-badge:active,
.studio-cart-badge.is-pressed {
    transform: none;
}

@media (hover: hover) {
    .studio-cart-badge:hover {
        transform: none;
    }
}

@keyframes cartPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 3px 16px rgba(245, 158, 11, 0.65); transform: translateY(-1px); }
}

.cart-btn-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.cart-btn-text {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 800;
    color: #78350f;
}

.cart-btn-badge {
    background: #f59e0b;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Avatar Cart Modal */
.avatar-cart-modal-card {
    max-width: 480px;
}

.cart-wallet-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cart-wallet-info {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
}

.cart-wallet-label {
    color: var(--text-secondary);
    font-weight: 700;
}

.cart-wallet-val {
    color: #b45309;
    font-weight: 800;
    font-family: var(--font-heading);
}

.cart-select-all-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.btn-text-action {
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--theme-primary);
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    border-radius: var(--radius-xs);
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .btn-text-action:hover {
        background: var(--theme-primary-light);
        text-decoration: underline;
    }
}

.divider-dot {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.cart-items-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 0.25rem;
    margin-bottom: 0.85rem;
}

.cart-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.75rem;
    gap: 0.65rem;
    transition: all 0.18s ease;
}

.cart-item-row.selected {
    border-color: #f59e0b;
    background: #fffbeb;
}

@media (hover: hover) {
    .cart-item-row:hover {
        border-color: #f59e0b;
    }
}

.cart-item-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
}

.cart-item-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #f59e0b;
    cursor: pointer;
    flex-shrink: 0;
}

.cart-item-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.cart-item-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.1rem;
}

.cart-item-name {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-item-cat-badge {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-card-secondary);
    padding: 0.08rem 0.35rem;
    border-radius: var(--radius-sm);
    width: fit-content;
}

.cart-item-right {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

.cart-item-price {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 800;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.cart-item-remove-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem;
    line-height: 1;
    border-radius: 50%;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .cart-item-remove-btn:hover {
        color: #ef4444;
        background: #fee2e2;
    }
}

/* Empty Cart State */
.cart-empty-state {
    text-align: center;
    padding: 1.8rem 1rem;
    background: var(--bg-card-secondary);
    border-radius: var(--radius-md);
    border: 2px dashed var(--border-medium);
    margin-bottom: 0.85rem;
}

.cart-empty-icon {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 0.4rem;
}

.cart-empty-state h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.cart-empty-state p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    max-width: 280px;
    margin: 0 auto;
}

/* Summary Card */
.cart-summary-card {
    background: var(--bg-card-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
}

.cart-summary-row.total-row {
    font-size: 0.95rem;
    font-weight: 800;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border-light);
}

.cart-total-price {
    font-family: var(--font-heading);
    color: #b45309;
    font-size: 1.05rem;
}

.cart-summary-row.remaining-row {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.cart-insufficient-funds {
    margin-top: 0.35rem;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.6rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: #991b1b;
}

.btn-full {
    width: 100%;
}

/* ==========================================================================
   Cloud Backup & Multi-Device Sync
   ========================================================================== */

.profile-modal-top-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ==========================================================================
   Hero Dream House Furniture & Decor Store Styles (Phase 2)
   ========================================================================== */

/* Try-on strip: a slim bar so the room, not the chrome, stays the hero. */
.house-preview-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.3rem 0.45rem;
    margin-bottom: 0.4rem;
    background: #fffbeb;
    border: 2px solid #d97706;
    border-radius: var(--radius-full);
}

.preview-banner-left {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.preview-badge-pill {
    background: #d97706;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.14rem 0.45rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.preview-item-name {
    color: #78350f;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preview-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.28rem;
}

.house-preview-banner .btn {
    padding: 0.22rem 0.55rem;
    font-size: 0.72rem;
    border-radius: var(--radius-full);
}

.house-room-card {
    position: relative;
}

.house-store-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.65rem;
    border-bottom: 2px solid var(--border-light);
    flex-shrink: 0;
}

.house-store-header .modal-title {
    margin: 0;
    text-align: center;
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-back-btn {
    font-size: 1.6rem;
    line-height: 1;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.house-store-header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.coin-icon-small {
    display: inline-flex;
    align-items: center;
    font-size: 1.05rem;
    line-height: 1;
}

.store-cart-badge-btn {
    position: relative;
    background: #ffffff;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.25rem 0.5rem;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

@media (hover: hover) {
    .store-cart-badge-btn:hover {
        background: var(--bg-card-secondary);
        border-color: var(--theme-primary);
    }
}

.store-cart-counter {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #ffffff;
}

.house-store-categories-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.55rem 0.1rem 0.6rem;
    border-bottom: 2px solid var(--border-light);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}

.house-store-categories-bar::-webkit-scrollbar {
    display: none;
}

.house-store-categories-bar .house-pill {
    flex: 0 0 auto;
    flex-direction: row;
    box-sizing: border-box;
    height: var(--house-pill-height, 3.25rem);
    min-height: var(--house-pill-height, 3.25rem);
    max-height: var(--house-pill-height, 3.25rem);
    padding: 0 0.7rem;
    font-size: 0.82rem;
    border-radius: 16px;
    gap: 0.28rem;
}

.house-store-categories-bar .house-pill-icon {
    font-size: 1.05rem;
}

@media (max-width: 560px) {
    .house-store-header .modal-title {
        font-size: 0.85rem;
    }
    .store-back-btn {
        width: 28px;
        height: 28px;
        font-size: 1.4rem;
    }
}

/* Phone: one fat tile column so thumbs can tap a piece. */
.house-store-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
}

.house-store-card {
    position: relative;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    border-radius: var(--radius-md);
    padding: 0.5rem 0.55rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
    .house-store-card:hover {
        border-color: #0f766e;
    }
}

.house-store-card.selected-card {
    border-color: #0f766e;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.28);
    background: #f0fdfa;
}

.house-store-card.previewing-card {
    border-color: #d97706;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.25);
    background: #fffbeb;
}

.store-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.3rem;
    min-height: 1.1rem;
}

.store-card-name {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    min-height: 1.95rem;
}

.store-card-badge {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
    border: 1.5px solid transparent;
}

.store-card-badge.is-active {
    background: #0f766e;
    color: #ffffff;
}

.store-card-badge.is-preview {
    background: #f59e0b;
    color: #ffffff;
}

.store-card-badge.is-owned {
    background: #e2e8f0;
    color: #475569;
}

.store-card-visual {
    width: 100%;
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
}

.store-card-visual .house-thumb-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.store-card-emoji {
    font-size: 2.4rem;
}

.store-card-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    min-height: 1.7rem;
}

.store-card-price {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.85rem;
    color: #b45309;
}

.store-card-price .coin-svg {
    width: 16px;
    height: 16px;
}

.store-card-slot {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0;
}

.store-pill {
    border: none;
    background: #ffffff;
    color: #0f766e;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    min-height: 40px;
    border-radius: var(--radius-full);
    border: 2px solid #0f766e;
}

.store-pill-try,
.store-pill-primary {
    background: #0f766e;
    color: #ffffff;
}

.store-pill-primary {
    padding: 0.4rem 0.8rem;
}

.store-pill-incart {
    background: #fde68a;
    color: #92400e;
    border-color: #d97706;
}

.store-pill:active,
.store-pill.is-pressed {
    transform: translateY(1px);
}

@media (min-width: 768px) {
    .house-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .store-card-visual {
        height: 96px;
    }
}

.cart-item-thumb {
    width: 46px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cart-item-thumb .house-thumb-svg {
    width: 100%;
    height: 100%;
}

.cart-item-price {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
}

.cart-item-price .coin-svg {
    width: 15px;
    height: 15px;
}

.house-cart-checkout-actions {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding-top: 0.75rem;
    padding-bottom: max(0.4rem, env(safe-area-inset-bottom, 0px));
}

.house-cart-confirm-btn {
    min-height: 52px;
    font-size: 1.05rem;
}

.cloud-sync-card-inner {
    background: var(--bg-card-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.cloud-sync-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.cloud-sync-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cloud-sync-info strong {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--text-primary);
}

.cloud-sync-info small {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.cloud-sync-key-row {
    border-top: 1px solid var(--border-light);
    padding-top: 0.6rem;
}

.cloud-sync-key-row .cloud-sync-info {
    min-width: 0;
    flex: 1 1 12rem;
}

.cloud-sync-key-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
    word-break: break-all;
}

.linked-devices-list {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0.6rem;
    text-align: left;
}

.linked-devices-list li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border-light);
}

.linked-devices-list .btn {
    margin-left: 0.4rem;
}

.linked-devices-actions {
    margin: 0 0 0.6rem;
}

.pair-code-big {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-align: center;
    margin: 0.6rem 0 0.2rem;
    color: var(--text-primary);
}

.pair-code-countdown {
    display: block;
    text-align: center;
    color: var(--text-secondary);
}

.cloud-sync-key-value.is-placeholder {
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--text-secondary);
    word-break: normal;
}

.cloud-sync-actions-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Cloud Sync Modal */
.cloud-sync-modal-card {
    max-width: 480px;
}

.cloud-modal-tabs {
    display: flex;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.cloud-tab-btn {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 0.5rem 0.85rem;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .cloud-tab-btn:hover {
        color: var(--text-primary);
    }
}

.cloud-tab-btn.active {
    color: var(--theme-primary);
    border-bottom-color: var(--theme-primary);
}

.sync-key-display-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px dashed #22c55e;
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.sync-key-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #15803d;
    letter-spacing: 0.05em;
}

.sync-key-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sync-key-code {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: #14532d;
    background: #ffffff;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid #86efac;
    letter-spacing: 0.06em;
    -webkit-user-select: all;
    user-select: all;
}

.sync-key-help {
    font-size: 0.76rem;
    color: #166534;
    margin: 0;
    max-width: 320px;
    line-height: 1.3;
}

.sync-payload-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    background: var(--bg-card-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.5rem;
    margin-bottom: 0.85rem;
}

.summary-metric {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: center;
}

.metric-icon {
    font-size: 1.3rem;
}

.summary-metric strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    line-height: 1.1;
    color: var(--text-primary);
}

.summary-metric small {
    display: block;
    font-size: 0.68rem;
    color: var(--text-secondary);
}

.sync-toast-alert {
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sync-toast-alert.success {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #15803d;
}

.sync-toast-alert.error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.sync-input-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.sync-input-stack {
    flex-direction: column;
    align-items: stretch;
}

.restore-preview-box {
    background: var(--bg-card-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
}

.restore-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-light);
}

.restore-profiles-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.restore-profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.65rem;
}

.restore-profile-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.restore-profile-info .profile-portrait,
.restore-profile-info .profile-portrait-emoji {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.restore-profile-avatar {
    font-size: 1.3rem;
}

.restore-profile-name {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 800;
}

.restore-profile-stats {
    display: flex;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.btn-emerald {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

@media (hover: hover) {
    .btn-emerald:hover {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
    }
}

/* =============================================================================
   MATH VILLAGE TOWN & CO-OP ISLAND STYLES
   ============================================================================= */

.subnav-badge {
    background: #fef08a;
    color: #854d0e;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-full);
    border: 1px solid #facc15;
}

.world-subview {
    display: none;
}

.world-subview.active {
    display: block;
    animation: fadeInView 0.25s ease-out;
}

@keyframes fadeInView {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Village Header & Banner */
.village-header-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.85rem;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    border: 2px solid #bbf7d0;
}

.village-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.village-name-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.village-icon-main {
    font-size: 1.4rem;
}

.village-name {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: #065f46;
    margin: 0;
}

.btn-icon-tiny {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.2rem;
    opacity: 0.7;
    transition: opacity 0.15s;
}

@media (hover: hover) {
    .btn-icon-tiny:hover {
        opacity: 1;
    }
}

.village-meta-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 700;
    flex-wrap: wrap;
}

.village-level-badge {
    background: #dcfce7;
    color: #15803d;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
    border: 1px solid #86efac;
    font-weight: 800;
}

.village-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.btn-harvest {
    background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
    color: #713f12;
    border: 1.5px solid #eab308;
    font-weight: 800;
    box-shadow: 0 3px 6px rgba(234, 179, 8, 0.25);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@media (hover: hover) {
    .btn-harvest:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 4px 10px rgba(234, 179, 8, 0.35);
    }
}

.btn-harvest.claimed {
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #cbd5e1;
    box-shadow: none;
    cursor: default;
    transform: none;
}

/* Quick Action Toolbar */
.village-action-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Island Interactive Canvas */
.village-island-card {
    padding: 0.5rem;
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.village-canvas-container {
    width: 100%;
    min-height: 380px;
    height: 440px;
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: radial-gradient(circle at center, #1e3a8a 0%, #0f172a 100%);
}

.village-canvas-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Building Plot Nodes & Hover States */
.plot-node {
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease;
    transform-origin: center bottom;
}

@media (hover: hover) {
    .plot-node:hover {
        transform: scale(1.08) translateY(-4px);
        filter: drop-shadow(0 8px 16px rgba(250, 204, 21, 0.5));
    }
}

.plot-pulse-ring {
    animation: plotPulse 2s infinite ease-out;
}

@keyframes plotPulse {
    0% { r: 18; opacity: 0.8; stroke-width: 3; }
    100% { r: 36; opacity: 0; stroke-width: 1; }
}

.plot-building-badge {
    fill: #0f172a;
    rx: 8;
    stroke: #fbbf24;
    stroke-width: 1.5;
}

/* Active Island Avatars */
.island-avatar-doll {
    transform-box: fill-box;
    transform-origin: center;
    animation: islandDollBounce 2s ease-in-out infinite alternate;
}

@keyframes islandDollBounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

/* Village Buildings Summary Grid */
.village-summary-card {
    padding: 1.25rem;
    background: #ffffff;
    border: 1px solid var(--border-medium);
}

.village-active-bonus-pill {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
}

.village-buildings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.village-building-tile {
    background: #f8fafc;
    border: 1.5px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .village-building-tile:hover {
        border-color: var(--primary-color);
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
}

.vbt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vbt-title-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.vbt-icon {
    font-size: 1.5rem;
}

.vbt-title {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-primary);
}

.vbt-level {
    font-size: 0.72rem;
    font-weight: 800;
    background: #e2e8f0;
    color: #334155;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-full);
}

.vbt-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.35;
    margin: 0;
}

.vbt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border-light);
}

.vbt-perk {
    font-size: 0.74rem;
    font-weight: 700;
    color: #059669;
}

/* =============================================================================
   BUILDING MODAL & UPGRADE SHOP
   ============================================================================= */
.building-modal-card {
    max-width: 460px;
}

.building-preview-stage {
    background: radial-gradient(circle, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    margin-bottom: 0.85rem;
}

.building-details-card {
    background: #f8fafc;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.building-badge-tier {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 800;
    color: #1e293b;
}

.building-status-active {
    font-size: 0.72rem;
    font-weight: 800;
    color: #16a34a;
}

.building-description {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

.building-perks-box, .building-next-perks-box {
    background: #ffffff;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
}

.building-perks-box h5, .building-next-perks-box h5 {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}

.building-perks-box ul, .building-next-perks-box ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: var(--text-secondary);
}

.building-next-perks-box {
    background: #fefce8;
    border-color: #fef08a;
}

.building-next-perks-box h5 {
    color: #854d0e;
}

/* =============================================================================
   CO-OP VILLAGE MATH QUESTS MODAL
   ============================================================================= */
.coop-quest-modal-card {
    max-width: 540px;
}

.coop-mode-tabs {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.coop-tab-btn {
    flex: 1;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-medium);
    background: #f8fafc;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: all 0.2s ease;
}

.coop-tab-btn.active {
    background: #ffffff;
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.12);
}

.coop-quest-progress-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1.5px solid #334155;
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    color: #ffffff;
    margin-bottom: 0.85rem;
}

.coop-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
}

.coop-quest-counter {
    color: #fde047;
    font-size: 0.88rem;
}

.coop-progress-bar {
    height: 12px;
}

.coop-avatars-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: #f1f5f9;
    border-radius: var(--radius-md);
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.85rem;
}

.coop-player-card {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.coop-avatar-icon {
    font-size: 1.5rem;
}

.coop-player-info {
    display: flex;
    flex-direction: column;
}

.coop-player-info strong {
    font-size: 0.82rem;
    color: var(--text-primary);
}

.coop-score-badge {
    font-size: 0.72rem;
    font-weight: 800;
    color: #2563eb;
}

.coop-synergy-badge {
    background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
    border: 1px solid #eab308;
    color: #854d0e;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    animation: synergyPulse 1.5s infinite alternate ease-in-out;
}

@keyframes synergyPulse {
    0% { transform: scale(0.95); opacity: 0.9; }
    100% { transform: scale(1.05); opacity: 1; }
}

.coop-question-card {
    background: #ffffff;
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    text-align: center;
    margin-bottom: 0.85rem;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.1);
}

.coop-prompt-badge {
    font-size: 0.78rem;
    font-weight: 800;
    color: #4f46e5;
    margin-bottom: 0.4rem;
}

.coop-math-problem {
    font-family: var(--font-mono);
    font-size: 1.8rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.85rem;
}

.coop-choices-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.coop-choice-btn {
    padding: 0.75rem;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: #f8fafc;
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@media (hover: hover) {
    .coop-choice-btn:hover {
        border-color: var(--primary-color);
        background: #eef2ff;
        transform: translateY(-2px);
    }
}

.coop-choice-btn.correct {
    background: #22c55e !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    animation: correctPop 0.3s ease;
}

.coop-choice-btn.wrong {
    background: #ef4444 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

.coop-emotes-bar {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.coop-emote-btn {
    padding: 0.35rem 0.6rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-medium);
    background: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .coop-emote-btn:hover {
        background: #f1f5f9;
        color: var(--text-primary);
        transform: scale(1.05);
    }
}

/* Co-Op Victory Card */
.coop-victory-card {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: var(--radius-lg);
    animation: zoomInVictory 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes zoomInVictory {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.victory-confetti-icon {
    font-size: 2.5rem;
    margin-bottom: 0.4rem;
}

.victory-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: #15803d;
    margin-bottom: 0.35rem;
}

.victory-desc {
    font-size: 0.85rem;
    color: #166534;
    margin-bottom: 0.85rem;
}

.victory-rewards-row {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.victory-reward-pill {
    background: #ffffff;
    border: 1.5px solid #86efac;
    color: #15803d;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
}

/* =============================================================================
   MULTIPLAYER ROOM MODAL
   ============================================================================= */
.multiplayer-modal-card {
    max-width: 480px;
}

.multiplayer-intro-banner {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    color: #1e40af;
    margin-bottom: 0.85rem;
}

.room-code-display-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0f172a;
    border: 2px solid #3b82f6;
    border-radius: var(--radius-md);
    padding: 0.65rem 1rem;
    margin-top: 0.4rem;
}

.room-code-val {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 800;
    color: #60a5fa;
    letter-spacing: 0.15em;
}

.room-input-group {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.room-code-input {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.local-sibling-select-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}

.sibling-chip-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-medium);
    background: #ffffff;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

@media (hover: hover) {
    .sibling-chip-btn:hover {
        border-color: var(--primary-color);
        background: #f5f3ff;
    }
}

.sibling-chip-btn.active {
    background: #e0e7ff;
    border-color: #4f46e5;
    color: #4338ca;
}

/* ==========================================================================
   Hero Dream House & Room Decor Studio (v0.4.2)
   ========================================================================== */

/* Room pills under the canvas: Store / Nap / Streak / Pet / Hide */
.house-action-toolbar,
.house-store-categories-bar {
    --house-pill-height: 3.25rem;
}

/* Room pills under the canvas: Store / Nap / Friends / Pet / Hide */
.house-action-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

.house-pill {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.5rem 0.35rem;
    border-radius: var(--radius-full);
    border: 2.5px solid #1e293b;
    background: #ffffff;
    color: #1e293b;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.82rem;
    line-height: 1.1;
    cursor: pointer;
    box-shadow: 0 2px 0 rgba(30, 41, 59, 0.28);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.house-pill:active,
.house-pill.is-pressed {
    transform: translateY(2px);
    box-shadow: 0 0 0 rgba(30, 41, 59, 0.28);
}

.house-pill-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.house-pill-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.house-pill-store { background: #63b3aa; }
.house-pill-nap { background: #c3b3e6; }
.house-pill-streak { background: #f09a5c; }
.house-pill-pet { background: #f2bccb; }
.house-pill-hide { background: #99f6e4; }
.house-pill-store-wall { background: #fde68a; }
.house-pill-store-gadget { background: #93c5fd; }
.house-pill-store-room { background: #86efac; }
.house-pill-store-owned { background: #d8b4fe; }

.house-pill.is-active {
    background: #1e293b;
    color: #ffffff;
}

.house-action-toolbar .house-pill {
    box-sizing: border-box;
    position: relative;
    height: var(--house-pill-height);
    min-height: var(--house-pill-height);
    max-height: var(--house-pill-height);
    overflow: visible;
}

.house-action-toolbar .house-pill-store {
    position: relative;
}

.house-pill-cart-count {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%, -35%);
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    border: 2px solid #ffffff;
    background: #ef4444;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Store category row: colored fills must beat the default white .house-pill. */
.house-store-categories-bar .house-pill[data-cat="all"] { background: #63b3aa; }
.house-store-categories-bar .house-pill[data-cat="bed"] { background: #c3b3e6; }
.house-store-categories-bar .house-pill[data-cat="desk"] { background: #f09a5c; }
.house-store-categories-bar .house-pill[data-cat="seating"] { background: #f2bccb; }
.house-store-categories-bar .house-pill[data-cat="rug"] { background: #99f6e4; }
.house-store-categories-bar .house-pill[data-cat="wallDecor"] { background: #fde68a; }
.house-store-categories-bar .house-pill[data-cat="gadget"] { background: #93c5fd; }
.house-store-categories-bar .house-pill[data-cat="theme"] { background: #86efac; }
.house-store-categories-bar .house-pill.is-active {
    background: #1e293b;
    color: #ffffff;
}

/* Phone: stack the glyph over the word so nothing truncates. */
@media (max-width: 560px) {
    .house-action-toolbar,
    .house-store-categories-bar {
        --house-pill-height: 3.35rem;
    }
    .house-action-toolbar {
        gap: 0.3rem;
    }
    .house-pill {
        flex-direction: column;
        gap: 0.1rem;
        padding: 0.4rem 0.15rem;
        font-size: 0.72rem;
        border-radius: 16px;
    }
    .house-action-toolbar .house-pill {
        height: var(--house-pill-height);
        min-height: var(--house-pill-height);
        max-height: var(--house-pill-height);
    }
    .house-pill-icon {
        font-size: 1rem;
    }
    .house-store-categories-bar .house-pill {
        flex-direction: row;
        height: var(--house-pill-height);
        min-height: var(--house-pill-height);
        max-height: var(--house-pill-height);
        padding: 0 0.7rem;
        font-size: 0.82rem;
        border-radius: 16px;
        gap: 0.28rem;
    }
    .house-store-categories-bar .house-pill-icon {
        font-size: 1.05rem;
    }
}

.house-room-card {
    background: #ffffff;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.house-canvas-container {
    position: relative;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #f6ead3;
    border: 2.5px solid #1e293b;
    touch-action: pan-y;
}

.house-zoom-surface {
    width: 100%;
    transform-origin: center center;
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    .house-zoom-surface.house-zoom-animating {
        transition: transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1);
    }
}

.house-zoom-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.house-room-svg.lighting-day .house-floor-shadow { opacity: 0.2; }
.house-room-svg.lighting-sunset .house-floor-shadow { opacity: 0.3; }
.house-room-svg.lighting-night .house-floor-shadow { opacity: 0.42; }

@media (prefers-reduced-motion: no-preference) {
    .house-drape-left {
        transform-origin: 90px 44px;
        animation: houseDrapeSway 5.5s ease-in-out infinite;
    }
    .house-drape-right {
        transform-origin: 300px 44px;
        animation: houseDrapeSway 6.2s ease-in-out infinite reverse;
    }
    .house-fairy-bulb {
        animation: houseFairyTwinkle 2.2s ease-in-out infinite;
    }
    .house-fairy-bulb.d2 { animation-delay: 0.25s; }
    .house-fairy-bulb.d3 { animation-delay: 0.5s; }
    .house-fairy-bulb.d4 { animation-delay: 0.75s; }
    .house-fairy-bulb.d5 { animation-delay: 1s; }
    .house-fairy-bulb.d6 { animation-delay: 1.25s; }
    .house-sill-plant { transform-box: fill-box; transform-origin: center bottom; animation: housePlantSway 4s ease-in-out infinite; }
    .house-music-star { transform-box: fill-box; transform-origin: center; animation: houseMusicStarSpin 6s linear infinite; }
    .house-goldfish { transform-box: fill-box; transform-origin: center; animation: houseGoldfishSwim 3.2s ease-in-out infinite; }
}

@keyframes houseDrapeSway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1.6deg); }
}
@keyframes houseFairyTwinkle {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
@keyframes housePlantSway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(5deg); }
}
@keyframes houseMusicStarSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes houseGoldfishSwim {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(3px, -2px); }
}

.house-canvas-container .house-movable,
.house-canvas-container .house-doll-actor {
    cursor: grab;
    /* Play-mode drag: the piece moves, the House page does not scroll. */
    touch-action: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.house-room-svg .furniture-hotspot,
.house-room-svg .house-doll-actor,
.house-room-svg .house-movable {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.house-doll-actor[data-doll-pose="sit-chair"] .house-doll-shadow {
    opacity: 0.22;
    transform: translateY(-8px) scale(0.9, 0.75);
}
.house-doll-actor[data-doll-pose="sit-desk"] .house-doll-shadow {
    opacity: 0.2;
    transform: translate(12px, -10px) scale(0.82, 0.65);
}
.house-doll-actor[data-doll-pose^="sit-desk-"] .house-doll-shadow {
    opacity: 0.2;
    transform: translate(12px, -10px) scale(0.82, 0.65);
}

/* Pho Stall: chopsticks dip from the mouth to the bowl, the broth steams.
   Reduced motion keeps the still frame (sticks at the mouth). */
@media (prefers-reduced-motion: no-preference) {
    .house-doll-eat-sticks {
        transform-box: view-box;
        transform-origin: 144px 155px;
        animation: houseDollEatPho 1.5s ease-in-out infinite;
    }
    .house-room-svg .house-pho-steam {
        animation: housePhoSteam 2.4s ease-in-out infinite;
    }
    .house-room-svg .house-pho-steam.d2 { animation-delay: -1.2s; }
}
@media (prefers-reduced-motion: reduce) {
    .house-doll-eat-sticks,
    .house-room-svg .house-pho-steam { animation: none; }
}
@keyframes houseDollEatPho {
    0%, 100% { transform: rotate(0deg); }
    45%, 60% { transform: translate(0px, 8px) rotate(-36deg); }
}
@keyframes housePhoSteam {
    0%, 100% { transform: translate(0px, 0px); }
    50% { transform: translate(2px, -5px); }
}
.house-doll-actor[data-doll-pose="lie-bed"] .house-doll-shadow {
    opacity: 0.16;
    transform: translate(24px, -42px) rotate(-70deg) scale(1.2, 0.45);
}

.house-arrange-hint,
.house-hide-seek-hint {
    margin: 0 0 0.65rem;
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-sm);
    background: #fffbeb;
    border: 2px solid #fde68a;
    color: #92400e;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.house-hide-seek-hint {
    background: #ecfdf5;
    border-color: #6ee7b7;
    color: #065f46;
}

.house-canvas-container.is-hide-seek .furniture-hotspot[data-slot] {
    cursor: pointer;
}

.house-room-svg .room-pet-speech,
.house-room-svg .house-hunt-bubble {
    pointer-events: none;
}

.house-room-svg .pet-toy-speech text {
    font-size: 11px;
}

/* Room toys: no hover/focus glow. Kids are touching pieces, not selecting UI. */
.furniture-hotspot {
    cursor: pointer;
}

.furniture-hotspot:hover,
.furniture-hotspot:focus,
.furniture-hotspot:focus-visible,
.furniture-hotspot:active,
.house-doll-actor:hover,
.house-doll-actor:focus,
.house-doll-actor:focus-visible,
.house-doll-actor:active {
    filter: none;
    outline: none;
    box-shadow: none;
}

/* Avatar Nap State */
.avatar-sleeping {
    animation: gentleBreathe 3s ease-in-out infinite alternate;
}

@keyframes gentleBreathe {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-4px); }
}

.sleep-zzz {
    font-family: var(--font-heading);
    font-weight: 800;
    fill: #93c5fd;
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: floatZzz 2.5s ease-in-out infinite;
}

@keyframes floatZzz {
    0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
    50% { opacity: 1; transform: translate(10px, -20px) scale(1); }
    100% { opacity: 0; transform: translate(20px, -45px) scale(1.4); }
}

/* Jukebox: bounce + floating notes while a track is playing. Glow alone is not enough. */
.jukebox-music-notes {
    display: none;
    pointer-events: none;
}

.jukebox-playing-glow {
    filter: drop-shadow(0 0 8px #ec4899);
}

.jukebox-playing-glow .jukebox-music-notes {
    display: inline;
}

.jukebox-playing-glow .jukebox-body {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: jukeboxBounce 0.45s ease-in-out infinite;
}

@keyframes jukeboxBounce {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-12px); }
    70% { transform: translateY(-4px); }
}

.jukebox-music-note {
    font-family: var(--font-heading);
    font-weight: 800;
    fill: #ec4899;
    pointer-events: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: jukeboxNoteFloat 1.35s ease-out infinite;
}

.jukebox-music-note:nth-child(2) {
    fill: #38bdf8;
    animation-delay: 0.45s;
}

.jukebox-music-note:nth-child(3) {
    fill: #f59e0b;
    animation-delay: 0.9s;
}

@keyframes jukeboxNoteFloat {
    0% { opacity: 0; transform: translate(0, 6px) scale(0.7); }
    10% { opacity: 1; }
    62% { opacity: 1; }
    100% { opacity: 0; transform: translate(16px, -56px) scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
    .jukebox-playing-glow .jukebox-body { animation: none; }
    .jukebox-music-note { animation: none; opacity: 1; }
}

/* ==========================================================================
   Context-Styled Alert & Confirm Modal System
   ========================================================================== */

.styled-alert-card {
    max-width: 440px;
    border-radius: 26px;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
    text-align: center;
    overflow: hidden;
    background: #ffffff;
}

.styled-alert-header {
    padding: 1.85rem 1.5rem 1.15rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
    border-bottom: 2px solid rgba(226, 232, 240, 0.8);
    transition: background 0.2s ease;
}

.styled-alert-hero-icon {
    font-size: 3.8rem;
    line-height: 1;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.12));
    animation: alertIconBounce 1.4s infinite ease-in-out alternate;
}

@keyframes alertIconBounce {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-8px) scale(1.08); }
}

.styled-alert-header .modal-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
}

.styled-alert-body {
    padding: 1.5rem 1.75rem;
}

.styled-alert-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.25;
}

.styled-alert-content {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 1.25rem;
}

.styled-alert-content strong {
    color: var(--text-primary);
    font-weight: 700;
}

.styled-alert-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.styled-alert-actions .btn {
    min-width: 120px;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 16px;
}

/* Custom Context Theme Variations */
/* 1. Pet Companion Theme */
.styled-alert-card.context-pet .styled-alert-header {
    background: linear-gradient(135deg, #fdf2f8 0%, #fae8ff 50%, #ede9fe 100%);
    border-bottom-color: #fbcfe8;
}
.styled-alert-card.context-pet .styled-alert-title {
    color: #9d174d;
}

/* 2. Math Study Board / Chalkboard Theme */
.styled-alert-card.context-board .styled-alert-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-bottom-color: #334155;
}
.styled-alert-card.context-board .styled-alert-hero-icon {
    filter: drop-shadow(0 6px 14px rgba(245, 158, 11, 0.5));
}

/* 3. Gold Coins & Shop Theme */
.styled-alert-card.context-coins .styled-alert-header {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-bottom-color: #fcd34d;
}
.styled-alert-card.context-coins .styled-alert-title {
    color: #92400e;
}

/* 4. Danger / Delete Confirm Theme */
.styled-alert-card.context-danger .styled-alert-header {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-bottom-color: #fca5a5;
}
.styled-alert-card.context-danger .styled-alert-title {
    color: #991b1b;
}

/* 5. Success / Save Theme */
.styled-alert-card.context-success .styled-alert-header {
    background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
    border-bottom-color: #a7f3d0;
}
.styled-alert-card.context-success .styled-alert-title {
    color: #065f46;
}

/* Study Board Stats Grid */
.study-board-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 0.85rem 0.5rem;
    margin-bottom: 1.25rem;
}

.study-board-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.study-board-stat-icon {
    font-size: 1.3rem;
}

.study-board-stat-val {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
}

/* =============================================================================
   PHASE 4: CROSS-FAMILY HOUSE VISITING, NEIGHBORS & GUESTBOOK STYLES
   ============================================================================= */

/* Neighbors Toolbar Pulse Button */
.btn-neighbors-pulse {
    position: relative;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    color: #166534;
    font-weight: 800;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) {
    .btn-neighbors-pulse:hover {
        background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
        border-color: #4ade80;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(34, 197, 94, 0.25);
    }
}

/* Visiting Mode Floating Banner */
.house-visiting-banner {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 30;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid #38bdf8;
    border-radius: 18px;
    padding: 0.65rem 1.15rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 189, 248, 0.35);
    animation: slideDownBanner 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.visiting-banner-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.visiting-badge-pill {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.65rem;
    border-radius: 100px;
    border: 1px solid #38bdf8;
}

.visiting-host-name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: #f8fafc;
}

.visiting-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Neighbors Modal Layout */
.neighbors-modal-card {
    max-width: 680px;
    width: 95%;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.neighbors-tabs-bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 1.5rem;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.neighbor-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    border: 2px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

@media (hover: hover) {
    .neighbor-tab-btn:hover {
        background: #f1f5f9;
        color: var(--text-primary);
    }
}

.neighbor-tab-btn.active {
    background: #ffffff;
    border-color: #3b82f6;
    color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.neighbors-modal-body {
    padding: 1.25rem 1.5rem;
    max-height: 480px;
    overflow-y: auto;
}

.neighbors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

/* Individual Neighbor Card */
.neighbor-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 18px;
    padding: 1rem;
    gap: 0.75rem;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

@media (hover: hover) {
    .neighbor-card:hover {
        border-color: #38bdf8;
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
    }
}

.neighbor-card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.neighbor-avatar-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    border: 2px solid #7dd3fc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.neighbor-info {
    flex: 1;
    min-width: 0;
}

.neighbor-name {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neighbor-room-theme {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0284c7;
}

.neighbor-meta-pills {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* My Share Code Card */
.my-share-code-card {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    border: 2px solid #5eead4;
    border-radius: 20px;
    padding: 1.15rem;
    margin-bottom: 1.25rem;
}

.share-code-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.share-code-icon {
    font-size: 1.6rem;
}

.share-code-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: #115e59;
    display: block;
}

.share-code-sub {
    font-size: 0.8rem;
    color: #0f766e;
    margin: 2px 0 0 0;
}

.share-code-box {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #ffffff;
    border: 2px dashed #14b8a6;
    border-radius: 14px;
    padding: 0.5rem 0.85rem;
}

.share-code-val {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: #0f766e;
}

.share-code-sync-msg {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Friend Code Lookup Box */
.friend-lookup-card {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    padding: 1.15rem;
}

.friend-lookup-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.friend-lookup-row {
    display: flex;
    gap: 0.6rem;
}

.friend-lookup-input {
    flex: 1;
    height: 48px;
    border: 2px solid #cbd5e1;
    border-radius: 14px;
    padding: 0 1rem;
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.friend-lookup-input:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.lookup-status-msg {
    margin-top: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
}

.lookup-status-msg.error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.lookup-status-msg.success {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #166534;
}

/* Guestbook Modal Layout */
.guestbook-modal-card {
    max-width: 640px;
    width: 95%;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.25);
    overflow: hidden;
}

.guestbook-modal-body {
    padding: 1.25rem 1.5rem;
    max-height: 520px;
    overflow-y: auto;
}

/* Guestbook Stamp Picker Card */
.guestbook-stamp-picker-card {
    background: linear-gradient(135deg, #fefce8 0%, #fef08a 100%);
    border: 2px solid #fde047;
    border-radius: 20px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.stamp-picker-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: #854d0e;
    margin: 0 0 2px 0;
}

.stamp-picker-sub {
    font-size: 0.78rem;
    color: #a16207;
    margin: 0 0 0.75rem 0;
}

.stamp-options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

@media (max-width: 600px) {
    .stamp-options-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stamp-option-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: #ffffff;
    border: 2px solid #facc15;
    border-radius: 12px;
    padding: 0.45rem 0.5rem;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
    color: #713f12;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (hover: hover) {
    .stamp-option-btn:hover {
        transform: translateY(-2px) scale(1.03);
        border-color: #eab308;
        background: #fef9c3;
        box-shadow: 0 6px 14px rgba(234, 179, 8, 0.25);
    }
}

.stamp-emoji {
    font-size: 1.15rem;
}

/* Custom Note Pin Row */
.custom-note-pin-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.guestbook-note-input {
    flex: 1;
    min-width: 0;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    border: 2px solid #fde047;
    background: #ffffff;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
}

.guestbook-note-input:focus {
    border-color: #eab308;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
}

/* Guestbook Corkboard Container */
.guestbook-corkboard-container {
    background: #fdfbf7;
    background-image: radial-gradient(#e2d9cc 1px, transparent 1px);
    background-size: 16px 16px;
    border: 2px solid #e7dfd5;
    border-radius: 20px;
    padding: 1.15rem;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

.corkboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed #d1c7b7;
}

.corkboard-title {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 800;
    color: #786f63;
}

.btn-refresh-notes {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 100px;
    padding: 0.25rem 0.65rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.18s ease;
}

@media (hover: hover) {
    .btn-refresh-notes:hover {
        border-color: #3b82f6;
        color: #2563eb;
        background: #eff6ff;
        transform: scale(1.04);
    }
}

.guestbook-stamps-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Individual Guestbook Post-It Stamp Card */
.guestbook-stamp-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 0.85rem 1rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

@media (hover: hover) {
    .guestbook-stamp-card:hover {
        transform: translateY(-2px);
    }
}

.stamp-washi-tape {
    position: absolute;
    top: -6px;
    left: 20px;
    width: 38px;
    height: 12px;
    background: rgba(251, 191, 36, 0.6);
    border-radius: 2px;
    transform: rotate(-3deg);
}

.stamp-card-avatar {
    font-size: 1.6rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.stamp-card-content {
    flex: 1;
    min-width: 0;
}

.stamp-card-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
}

.stamp-card-author {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-primary);
}

.stamp-card-time-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.stamp-card-time {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.btn-delete-stamp {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
}

@media (hover: hover) {
    .btn-delete-stamp:hover {
        color: #ef4444;
        background-color: #fee2e2;
    }
}

.stamp-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    border: 1px solid #fde047;
    border-radius: 100px;
    padding: 0.25rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: #854d0e;
}

.guestbook-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
}

.guestbook-empty-state .empty-emoji {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.guestbook-empty-state h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.35rem 0;
}

.guestbook-empty-state p {
    font-size: 0.82rem;
    margin: 0;
}

@keyframes slideDownBanner {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.study-board-stat-lbl {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Pet Joy Badges */
.pet-joy-card {
    background: #fdf2f8;
    border: 2px solid #fbcfe8;
    border-radius: 16px;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    margin-bottom: 1.25rem;
}

.pet-joy-avatar {
    font-size: 2rem;
    flex-shrink: 0;
}

.pet-joy-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #831843;
    line-height: 1.35;
}

/* ==========================================================================
   Parent Progress Report
   ========================================================================== */

.parent-report-settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.parent-gate-card {
    max-width: 440px;
}

.parent-gate-desc {
    margin-bottom: 1rem;
}

.parent-gate-equation {
    font-family: var(--font-math);
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1.1rem 1rem;
    margin-bottom: 1rem;
}

.parent-gate-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.parent-gate-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.parent-gate-input {
    font-family: var(--font-math);
    font-size: 1.25rem;
    text-align: center;
}

.parent-gate-feedback {
    font-size: 0.86rem;
    font-weight: 600;
    min-height: 1.2em;
}

.parent-gate-feedback.is-error {
    color: var(--color-coral);
}

.parent-gate-feedback.is-success {
    color: var(--theme-primary-dark);
}

body.parent-report-open {
    overflow: hidden;
}

.parent-report-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background:
        radial-gradient(ellipse at top left, rgba(16, 185, 129, 0.12), transparent 45%),
        radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.12), transparent 40%),
        #f1f5f9;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.parent-report-shell {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 1.25rem 1rem 2.5rem;
}

.parent-report-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.parent-report-kicker {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-primary-dark);
    margin-bottom: 0.2rem;
}

.parent-report-header h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 3vw, 1.9rem);
    color: var(--text-primary);
    line-height: 1.15;
}

.parent-report-sub {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 0.25rem;
    max-width: 36rem;
}

.parent-report-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}

.parent-report-kid-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.parent-report-kid-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1.5px solid var(--border-medium);
    background: #fff;
    color: var(--text-primary);
    border-radius: var(--radius-md);
    padding: 0.45rem 0.8rem;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.parent-report-kid-chip.active {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px var(--theme-glow);
    transform: translateY(-1px);
}

.parent-report-document {
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.35rem 1.25rem 1.75rem;
}

.parent-report-doc-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--border-light);
}

.parent-report-kid-chip .profile-portrait,
.parent-report-kid-chip .profile-portrait-emoji {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-card-secondary);
}

.parent-report-avatar {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: var(--radius-md);
    display: grid;
    place-items: center;
    font-size: 2rem;
    background: linear-gradient(160deg, var(--theme-primary-light), #fff);
    border: 1px solid var(--border-light);
    flex-shrink: 0;
    overflow: hidden;
    padding: 0;
}

.coop-avatar-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sibling-chip-btn .profile-portrait,
.sibling-chip-btn .profile-portrait-emoji {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
}

.parent-report-kid-name {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    color: var(--text-primary);
}

.parent-report-headline {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-top: 0.2rem;
}

.parent-report-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 0.35rem;
}

.parent-report-section {
    margin-top: 1.35rem;
}

.parent-report-section h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--text-primary);
}

.parent-report-section-sub {
    color: var(--text-muted);
    font-size: 0.84rem;
    margin: 0.2rem 0 0.75rem;
}

.parent-report-snap-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.parent-report-snap-card {
    background: linear-gradient(180deg, #f8fafc, #ffffff);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 0.85rem 0.9rem;
}

.parent-report-snap-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.parent-report-snap-value {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--text-primary);
}

.parent-report-skills {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* PARENT-01: the World section's skill rows sit under its four cards */
.parent-report-week-grid + #parentReportWorldSkills {
    margin-top: 14px;
}

/* PARENT-02: Daily World time, under the report's World section (screen only). */
.parent-world-time { display: grid; gap: 8px; margin-top: 14px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.parent-world-time-label { display: grid; gap: 4px; font-size: 14px; line-height: 1.4; }
.parent-world-time-label span { color: #475569; font-size: 13px; }
.parent-world-time-select { max-width: 260px; min-height: 44px; }
.parent-world-time-used { margin: 0; color: #475569; font-size: 13px; }
.parent-world-time-used:empty { display: none; }

.parent-report-skill-row {
    display: grid;
    grid-template-columns: minmax(7rem, 11rem) 1fr auto;
    gap: 0.65rem;
    align-items: center;
}

.parent-report-skill-label strong {
    display: block;
    font-size: 0.92rem;
}

.parent-report-skill-label span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.parent-report-skill-bar-track {
    height: 0.55rem;
    background: var(--bg-card-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.parent-report-skill-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--theme-primary);
}

.parent-report-skill-bar-fill.op-add { background: var(--color-add); }
.parent-report-skill-bar-fill.op-sub { background: var(--color-sub); }
.parent-report-skill-bar-fill.op-mul { background: var(--color-mul); }
.parent-report-skill-bar-fill.op-div { background: var(--color-div); }
.parent-report-skill-bar-fill.op-time { background: #0ea5e9; }
.parent-report-skill-bar-fill.op-place { background: #0d9488; }
.parent-report-skill-bar-fill.op-missing { background: #d97706; }
.parent-report-skill-bar-fill.op-money { background: #ca8a04; }
.parent-report-skill-bar-fill.op-count { background: #16a34a; }
.parent-report-skill-bar-fill.op-fraction { background: #e11d48; }
.parent-report-skill-bar-fill.op-word { background: #4f46e5; }
.parent-report-skill-bar-fill.op-pattern { background: #db2777; }
.parent-report-skill-bar-fill.op-order { background: #0284c7; }
.parent-report-skill-bar-fill.op-evenodd { background: #7c3aed; }
.parent-report-skill-bar-fill.op-estimate { background: #65a30d; }
.parent-report-skill-bar-fill.op-measure { background: #ea580c; }
.parent-report-skill-bar-fill.op-calendar { background: #4f46e5; }
.parent-report-skill-bar-fill.op-shapes { background: #0d9488; }
.parent-report-skill-bar-fill.op-compare { background: #2563eb; }
.parent-report-skill-bar-fill.op-bonds { background: #7c3aed; }
.parent-report-skill-bar-fill.op-groups { background: #db2777; }
.parent-report-skill-bar-fill.op-area { background: #059669; }
.parent-report-skill-bar-fill.op-perimeter { background: #0891b2; }
.parent-report-skill-bar-fill.op-factors { background: #db2777; }
.parent-report-skill-bar-fill.op-fracops { background: #e11d48; }
.parent-report-skill-bar-fill.op-decimals { background: #0d9488; }
.parent-report-skill-bar-fill.op-volume { background: #7c3aed; }
.parent-report-skill-bar-fill.op-coords { background: #0284c7; }
.parent-report-skill-bar-fill.op-express { background: #db2777; }
.parent-report-skill-bar-fill.op-convert { background: #ea580c; }
.parent-report-skill-bar-fill.op-data { background: #ca8a04; }

.parent-report-skill-pct {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    min-width: 2.5rem;
    text-align: right;
}

.parent-report-table {
    width: 100%;
}

.parent-report-empty,
.parent-report-empty-inline {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.parent-report-focus-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0;
}

.parent-report-focus-list li {
    position: relative;
    padding: 0.75rem 0.9rem 0.75rem 1.9rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.92rem;
    line-height: 1.4;
}

.parent-report-focus-list li::before {
    content: "→";
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    color: #b45309;
    font-weight: 700;
}

.parent-report-wins-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.9rem;
}

.parent-report-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.parent-report-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--color-gold-light);
    border: 1px solid #fcd34d;
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
}

@media (max-width: 720px) {
    .parent-report-snap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parent-report-skill-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label pct"
            "bar bar";
    }

    .parent-report-skill-label { grid-area: label; }
    .parent-report-skill-pct { grid-area: pct; }
    .parent-report-skill-bar-track { grid-area: bar; }

    .parent-report-header {
        flex-direction: column;
    }
}

@media print {
    @page {
        margin: 0.6in;
    }

    html, body,
    body.parent-report-open,
    body.fridge-print-open {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        background: #fff !important;
    }

    /* Hide chrome; print only the active sheet. Do not use visibility:hidden on
       body * — Chrome/Safari often emit a blank page with that trick. */
    body.fridge-print-open > *:not(#fridgeCalendarPrint) {
        display: none !important;
    }

    body.fridge-print-open #fridgeCalendarPrint {
        display: block !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
        padding: 0;
        box-shadow: none;
    }

    body.parent-report-open:not(.fridge-print-open) > *:not(#parentReportOverlay) {
        display: none !important;
    }

    body.parent-report-open:not(.fridge-print-open) #parentReportOverlay {
        display: block !important;
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        background: #fff !important;
        z-index: auto !important;
    }

    .no-print {
        display: none !important;
    }

    .parent-report-shell {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .parent-report-document {
        box-shadow: none;
        border: none;
        padding: 0;
    }

    .practice-cal-cell {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        min-height: 2.6rem;
        border: 1px solid #cbd5e1;
    }
}

.parent-report-empty-panel {
    width: 100%;
    padding: 0.95rem 1rem;
    border: 1px dashed var(--border-medium);
    border-radius: var(--radius-md);
    background: #f8fafc;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.45;
}

.parent-report-week-grid {
    margin-top: 0.15rem;
}

.parent-report-skill-row.is-struggle .parent-report-skill-label strong {
    color: #b45309;
}

.parent-report-skill-flag {
    display: inline-block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    font-weight: 800;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
}

.parent-report-needs {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.parent-report-need-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid #fecaca;
    background: #fff1f2;
    border-radius: var(--radius-md);
}

.parent-report-need-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.parent-report-need-copy strong {
    font-family: var(--font-heading);
    color: #9f1239;
}

.parent-report-need-copy span {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.parent-report-focus-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.parent-report-practice-btn {
    flex-shrink: 0;
}

/* Arcade cabinet overlay (Number Muncher now; shared chrome for later games) */
body.arcade-open,
body.muncher-open,
body.painter-open,
body.truck-open,
body.orb-open,
body.answer-slice-open {
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

.arcade-overlay,
.arcade-overlay *,
.muncher-overlay,
.muncher-overlay *,
.painter-overlay,
.painter-overlay *,
.truck-overlay,
.truck-overlay *,
.orb-overlay,
.orb-overlay *,
.recipe-overlay,
.recipe-overlay *,
.answer-slice-overlay,
.answer-slice-overlay * {
    touch-action: none;
}

.arcade-overlay,
.muncher-overlay {
    --arcade-gold: #fbbf24;
    --arcade-gold-deep: #f59e0b;
    --arcade-brown: #7c2d12;
    --arcade-brown-edge: #92400e;
    --arcade-cream: #fffbeb;
    --arcade-ink: #7c2d12;
    --arcade-wood: #2a1c10;
    --arcade-wood-mid: #3d2a18;
    --muncher-gold: var(--arcade-gold);
    --muncher-gold-deep: var(--arcade-gold-deep);
    --muncher-brown: var(--arcade-brown);
    --muncher-brown-edge: var(--arcade-brown-edge);
    --muncher-cream: var(--arcade-cream);
    --muncher-ink: var(--arcade-ink);
    --muncher-wood: var(--arcade-wood);
    --muncher-wood-mid: var(--arcade-wood-mid);
    position: fixed;
    inset: 0;
    z-index: 1200;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(245, 158, 11, 0.28), transparent 55%),
        linear-gradient(160deg, #1c1008 0%, #3d2410 50%, #78350f 120%);
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0.55rem;
}

.arcade-overlay.hidden,
.muncher-overlay.hidden { display: none; }

.arcade-shell,
.muncher-shell {
    width: min(720px, 100%);
    margin: 0 auto;
    background: linear-gradient(180deg, #4a311c 0%, var(--muncher-wood) 100%);
    border-radius: 1.15rem;
    border: 4px solid var(--muncher-gold-deep);
    padding: 0.55rem 0.65rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    box-shadow: none;
    outline: 4px solid var(--muncher-brown);
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    color: var(--muncher-cream);
}

.arcade-header,
.muncher-header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.4rem;
}

.muncher-header .muncher-title-row {
    flex: 0 1 auto;
    min-width: 0;
    gap: 0.4rem;
}

.muncher-title-icon {
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
    border: 2px solid var(--muncher-brown-edge);
    box-shadow: 0 2px 0 var(--muncher-brown-edge);
}

.muncher-title-icon .arcade-game-mark {
    width: 1.85rem;
    height: 1.85rem;
}

/* Miss card (phase 3): "here is why" after a wrong answer. Floats over the stage, never blocks play. */
.arcade-miss-card {
    position: absolute;
    left: 50%;
    bottom: max(0.9rem, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 40;
    width: min(92%, 24rem);
    padding: 0.55rem 0.85rem 0.6rem;
    border: 3px solid #7c2d12;
    border-radius: 1rem;
    background: #fffbeb;
    box-shadow: 0 5px 0 #92400e;
    color: #1e293b;
    font-family: var(--font-heading, 'Fredoka', sans-serif);
    text-align: center;
    /* Pass-through by default: a swipe or tap that starts on the card still reaches the board.
       Cabinets opt in to tap-to-dismiss only when nothing under the card is playable. */
    pointer-events: none;
    animation: arcade-miss-in 180ms ease-out;
}
.arcade-miss-card[hidden] { display: none; }
.arcade-miss-card.is-miss { border-color: #b91c1c; box-shadow: 0 5px 0 #7f1d1d; }
.arcade-miss-card.is-hint { border-color: #0369a1; box-shadow: 0 5px 0 #075985; }
.arcade-miss-title {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: #b91c1c;
}
.arcade-miss-card.is-hint .arcade-miss-title { color: #0369a1; }
.arcade-miss-text {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.3;
}
/* Short phones (≤ 640 px tall): a compact card so it never hides a row of tiles or a bubble. */
@media (max-height: 640px) {
    .arcade-miss-card {
        width: min(88%, 20rem);
        padding: 0.35rem 0.6rem 0.4rem;
        border-width: 2px;
        box-shadow: 0 3px 0 #92400e;
    }
    .arcade-miss-title { font-size: 0.98rem; }
    .arcade-miss-text { font-size: 0.84rem; line-height: 1.22; }
}
@keyframes arcade-miss-in {
    from { opacity: 0; transform: translate(-50%, 0.6rem); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .arcade-miss-card { animation: none; }
}

.arcade-btn,
.muncher-arcade-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-height: 3.4rem;
    padding: 0.7rem 1.45rem 0.75rem;
    border-radius: 999px;
    border: 3px solid #b45309;
    background: linear-gradient(180deg, #fffbeb 0%, #fbbf24 55%, #f59e0b 100%);
    color: var(--muncher-ink);
    font-family: var(--font-heading);
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 5px 0 #92400e, 0 10px 18px rgba(146, 64, 14, 0.28);
    cursor: pointer;
    appearance: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    .arcade-btn:hover,
    .muncher-arcade-btn:hover {
        background: linear-gradient(180deg, #fef3c7 0%, #f59e0b 55%, #d97706 100%);
    }
}

.arcade-btn:focus-visible,
.muncher-arcade-btn:focus-visible {
    outline: 3px solid var(--muncher-gold);
    outline-offset: 3px;
}

.arcade-btn:active,
.muncher-arcade-btn:active,
.arcade-btn.is-pressed,
.muncher-arcade-btn.is-pressed {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #92400e, 0 4px 10px rgba(146, 64, 14, 0.2);
}

.arcade-header .mq-close-x,
.muncher-header .mq-close-x {
    flex-shrink: 0;
}

.arcade-header h2,
.muncher-header h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--muncher-cream);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.muncher-hud {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

.muncher-rule-card {
    background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
    border: 3px solid var(--muncher-brown-edge);
    border-radius: 0.8rem;
    padding: 0.4rem 0.75rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.55rem;
    box-shadow: 0 3px 0 var(--muncher-brown-edge);
    width: 100%;
}

.muncher-rule-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muncher-brown-edge);
    flex-shrink: 0;
}

.muncher-rule-card strong {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--muncher-ink);
    text-transform: capitalize;
    line-height: 1.2;
    text-align: center;
}

.muncher-stats {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.28rem;
    align-items: center;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--muncher-ink);
    flex-shrink: 0;
    margin-left: auto;
}

.muncher-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    min-height: 2.05rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    border: 2px solid var(--muncher-brown-edge);
    background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
    box-shadow: 0 2px 0 var(--muncher-brown-edge);
    font-size: 0.92rem;
    white-space: nowrap;
}

.muncher-stat-chip strong {
    color: var(--muncher-ink);
}

.muncher-hint-btn {
    min-width: 0;
    min-height: 2.45rem;
    padding: 0.28rem 0.7rem 0.32rem;
    font-size: 0.92rem;
    box-shadow: 0 3px 0 #92400e, 0 6px 12px rgba(146, 64, 14, 0.25);
}

.muncher-hint-btn[aria-pressed="true"] {
    background: linear-gradient(180deg, #fef3c7 0%, #fbbf24 55%, #d97706 100%);
}

.muncher-hint {
    display: none;
    position: absolute;
    left: 0.45rem;
    right: 0.45rem;
    bottom: 0.4rem;
    z-index: 8;
    margin: 0;
    padding: 0.28rem 0.55rem;
    border-radius: 0.55rem;
    background: rgba(28, 16, 8, 0.72);
    font-family: var(--font-heading);
    font-weight: 700;
    color: #fffbeb;
    font-size: 0.82rem;
    line-height: 1.3;
    text-align: center;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.muncher-overlay.is-hinting .muncher-hint {
    display: block;
}

.muncher-board-wrap {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: none;
    user-select: none;
}

/* Miss card sits on the half of the board away from the hero (and the revealed tile). */
.muncher-board-wrap.is-miss-card-top > .arcade-miss-card {
    top: 0.6rem;
    bottom: auto;
}

.muncher-board-wrap.is-chomping .muncher-avatar-wrap {
    animation: muncher-chomp 0.35s ease;
}

.muncher-board-wrap.is-hurt {
    animation: muncher-shake 0.4s ease;
}

@keyframes muncher-chomp {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.12) translateY(2px); }
}

@keyframes muncher-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.muncher-overlay.is-canvas-stage #muncherGrid {
    display: none;
    pointer-events: none;
}
.muncher-overlay.is-dom-stage #muncherStage,
.muncher-overlay.is-idle #muncherStage { display: none; }
.muncher-overlay.is-canvas-stage.is-idle #muncherStage { display: none; }
.muncher-overlay.is-canvas-stage.is-countdown #muncherStage,
.muncher-overlay.is-canvas-stage.is-playing #muncherStage,
.muncher-overlay.is-canvas-stage.is-gameover #muncherStage { display: block; }

.muncher-stage {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: none;
    border-radius: 1rem;
    touch-action: none;
    background: #1c1008;
    box-shadow: inset 0 0 0 3px var(--muncher-gold-deep);
}

.muncher-crawler-grid {
    display: grid;
    gap: 0.35rem;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    align-content: center;
    background: linear-gradient(180deg, #78350f 0%, #451a03 100%);
    border: 3px solid var(--muncher-gold-deep);
    border-radius: 1rem;
    padding: 0.45rem;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.28);
}

.muncher-cell {
    aspect-ratio: 1;
    border-radius: 0.65rem;
    border: 3px solid #1e293b;
    background: #fffbeb;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    overflow: visible;
    padding: 0;
    font: inherit;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.muncher-cell.is-adjacent-target {
    border-color: #1e293b;
    background: #fde68a;
    cursor: pointer;
}

.muncher-cell.is-adjacent-target:active:not(:disabled),
.muncher-cell.is-adjacent-target.is-pressed:not(:disabled) {
    transform: scale(0.97);
}

.muncher-cell.has-player.can-munch {
    box-shadow: 0 0 0 3px #f59e0b;
}

.muncher-cell.is-floor {
    background: #f1f5f9;
    border-color: #1e293b;
}

.muncher-cell.is-number {
    background: #fffbeb;
    border-color: #1e293b;
    font-family: var(--font-heading);
    font-size: clamp(1rem, 3.8vw, 1.45rem);
    font-weight: 800;
    color: #1e293b;
}

.muncher-cell.is-number.is-wrong-flash {
    background: #fee2e2;
    border-color: #1e293b;
}

.muncher-cell.is-cleared {
    background: #dcfce7;
    border-color: #1e293b;
}

.muncher-cell.is-missed {
    background: #fef9c3;
    border-style: dashed;
    border-color: #1e293b;
}

/* Wrong tile already munched: greyed + crossed, cannot be munched again. */
.muncher-cell.is-number.is-wrong {
    background: #e2e8f0 linear-gradient(to top right, transparent calc(50% - 2px), rgba(220, 38, 38, 0.55) calc(50% - 2px), rgba(220, 38, 38, 0.55) calc(50% + 2px), transparent calc(50% + 2px));
    border-color: #64748b;
}

/* Same as canvas / WebGL: the step highlight wins, the cross stays on top. */
.muncher-cell.is-number.is-wrong.is-adjacent-target {
    background-color: #fde68a;
    border-color: #1e293b;
}

.muncher-cell.is-number.is-wrong .muncher-cell-value {
    opacity: 0.45;
}

/* Post-hit grace: hero blinks while the troggle rests. */
.muncher-cell.has-player.is-invulnerable .muncher-avatar-wrap {
    animation: muncher-grace-blink 0.36s steps(2, jump-none) infinite;
}

@keyframes muncher-grace-blink {
    from { opacity: 1; }
    to { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .muncher-cell.has-player.is-invulnerable .muncher-avatar-wrap {
        animation: none;
        opacity: 0.6;
    }
}

.muncher-cell.has-player,
.muncher-cell.has-troggle {
    z-index: 2;
    overflow: visible;
}

.muncher-cell.has-player {
    box-shadow: 0 0 0 2px var(--muncher-gold);
}

.muncher-avatar-wrap,
.muncher-troggle-wrap {
    width: 78%;
    height: 78%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center bottom;
    overflow: visible;
    pointer-events: none;
}

.muncher-avatar-svg,
.muncher-actor-svg,
.muncher-troggle-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.muncher-facing-left .muncher-avatar-wrap,
.muncher-facing-left.muncher-avatar-wrap {
    transform: scaleX(-1);
}

.muncher-cell-value {
    position: relative;
    z-index: 1;
}
.muncher-cell-value.is-long-label {
    font-size: 0.82em;
    letter-spacing: -0.03em;
}

.muncher-cell.has-player .muncher-cell-value,
.muncher-cell.has-troggle .muncher-cell-value {
    position: absolute;
    bottom: 0.1rem;
    left: 0;
    right: 0;
    z-index: 3;
    font-size: 0.85em;
    pointer-events: none;
}

.muncher-grid {
    display: grid;
    gap: 0.45rem;
    width: 100%;
}

.muncher-tile {
    aspect-ratio: 1;
    border: 3px solid #1e293b;
    border-radius: 0.75rem;
    background: #fffbeb;
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 4vw, 1.55rem);
    font-weight: 800;
    color: #1e293b;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

@media (hover: hover) {
    .muncher-tile:hover:not(:disabled) {
        transform: translateY(-2px);
        border-color: var(--muncher-gold-deep);
        background: #fffbeb;
    }
}

.muncher-tile:disabled {
    cursor: default;
}

.muncher-tile.is-eaten-good {
    background: #dcfce7;
    border-color: #16a34a;
    color: #166534;
}

.muncher-tile.is-eaten-bad {
    background: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}

.muncher-tile.is-missed {
    background: #fef9c3;
    border-color: #ca8a04;
    border-style: dashed;
}

.muncher-footer {
    display: flex;
    justify-content: center;
}

.muncher-screen {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1rem 0.9rem;
    background: rgba(28, 18, 10, 0.92);
    border: 3px solid var(--muncher-gold-deep);
    border-radius: 0.95rem;
    text-align: center;
    box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.25);
}

.muncher-screen.hidden { display: none; }

.muncher-screen-hero {
    width: 5.4rem;
    height: 5.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.muncher-screen-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.7rem;
    color: var(--muncher-cream);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}

.muncher-screen-copy {
    margin: 0;
    max-width: 22rem;
    color: #fde68a;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.4;
}

.muncher-screen-btn {
    min-width: 10.5rem;
    min-height: 3.4rem;
    padding: 0.7rem 1.45rem 0.75rem;
    font-size: 1.28rem;
    box-shadow: 0 5px 0 #92400e, 0 10px 18px rgba(146, 64, 14, 0.28);
}

.muncher-countdown {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: clamp(4rem, 18vw, 6.5rem);
    font-weight: 800;
    color: var(--muncher-gold);
    text-shadow: 0 8px 0 rgba(146, 64, 14, 0.55);
    background: rgba(28, 18, 10, 0.42);
    border-radius: 0.9rem;
    pointer-events: none;
}

.muncher-countdown.hidden { display: none; }

.muncher-countdown.is-go {
    color: #fef3c7;
    font-size: clamp(3rem, 14vw, 5rem);
}

.muncher-over-kicker {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--muncher-gold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.82rem;
}

.muncher-over-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: min(18rem, 100%);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.muncher-over-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
    border: 3px solid var(--muncher-brown-edge);
    border-radius: 0.75rem;
    padding: 0.42rem 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--muncher-brown-edge);
    box-shadow: 0 3px 0 var(--muncher-brown-edge);
}

.muncher-over-list strong {
    color: var(--muncher-ink);
}

.muncher-over-reward {
    margin: 0.15rem 0 0;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--muncher-gold);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.muncher-overlay.is-idle .muncher-hud,
.muncher-overlay.is-idle .muncher-rule-card {
    display: none;
}

.muncher-result {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--muncher-ink);
    background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
    border: 3px solid var(--muncher-brown-edge);
    border-radius: 0.75rem;
    padding: 0.75rem;
    box-shadow: 0 3px 0 var(--muncher-brown-edge);
}

.muncher-result.hidden { display: none; }

@media (max-width: 600px) {
    .arcade-shell,
    .muncher-shell { padding: 0.4rem 0.45rem 0; }
    .arcade-header h2,
    .muncher-header h2 { display: none; }
    .muncher-stats { gap: 0.22rem; }
    .muncher-hint-btn { padding: 0.28rem 0.65rem 0.32rem; }
    .parent-report-need-card { flex-direction: column; align-items: stretch; }
    .parent-report-focus-list li { flex-direction: column; }
}

.painter-board-wrap {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Top-aligned: spare height collects under Confirm, where the why-card goes. */
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 0.5rem 0.45rem 0.4rem;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    background:
        linear-gradient(180deg, #7dd3fc 0%, #bae6fd 38%, #bbf7d0 100%);
    border: 3px solid var(--muncher-gold-deep);
    border-radius: 1rem;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.18);
}

/* Sideways stage (JS adds is-side): grid on the left, status + Confirm beside it. */
.painter-board-wrap.is-side {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    justify-items: center;
    align-content: center;
    column-gap: 0.6rem;
    row-gap: 0.4rem;
}
.painter-board-wrap.is-side > .painter-grid { grid-column: 1; grid-row: 1 / 3; align-self: center; max-height: none; }
.painter-board-wrap.is-side > .painter-status { grid-column: 2; grid-row: 1; align-self: end; }
.painter-board-wrap.is-side > .painter-confirm-wrap { grid-column: 2; grid-row: 2; align-self: start; flex-wrap: wrap; }

.painter-board-wrap.is-good {
    animation: muncher-chomp 0.35s ease;
}

.painter-board-wrap.is-hurt {
    animation: muncher-shake 0.4s ease;
}

.painter-grid {
    display: grid;
    /* Board is 6×6 (G3), 8×8 (G4–5) or 10×10 (G6+); JS sets --painter-cols and an
       inline px width/height = min(stage width, stage height − controls). The widths
       below are the fallback before the stage is measured. */
    grid-template-columns: repeat(var(--painter-cols, 6), 1fr);
    gap: 0.28rem;
    width: min(100%, 22rem);
    max-height: calc(100% - 5.2rem);
    aspect-ratio: 1;
    min-height: 0;
}

.painter-grid[data-board="8"] {
    gap: 0.2rem;
    width: min(100%, 24rem);
}

.painter-grid[data-board="10"] {
    gap: 0.14rem;
    width: min(100%, 26rem);
}

.painter-grid[data-board="8"] .painter-cell,
.painter-grid[data-board="10"] .painter-cell {
    border-radius: 0.26rem;
    border-width: 1.5px;
}

.painter-cell {
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
    border-radius: 0.4rem;
    border: 2px solid #d6a15a;
    background: #fffbeb;
    padding: 0;
    font: inherit;
    appearance: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(124, 45, 18, 0.08);
}

.painter-cell:active:not(:disabled),
.painter-cell.is-pressed:not(:disabled) {
    transform: scale(0.96);
}

.painter-cell.is-painted {
    background: linear-gradient(180deg, #86efac 0%, #22c55e 100%);
    border-color: #166534;
    box-shadow: inset 0 0 0 1px rgba(20, 83, 45, 0.25), 0 2px 0 #166534;
}

.painter-cell:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 1px;
}

/* Missing-side rounds: the given side is pre-painted gold and locked. */
.painter-cell.is-anchor {
    background: linear-gradient(180deg, #fde68a 0%, #f59e0b 100%);
    border-color: #92400e;
    box-shadow: inset 0 0 0 1px rgba(120, 53, 15, 0.3), 0 2px 0 #92400e;
    cursor: default;
}

/* Solved hold (~0.8 s): the finished rectangle glows before the next target. */
.painter-board-wrap.is-solved .painter-cell.is-painted:not(.is-anchor) {
    background: linear-gradient(180deg, #bbf7d0 0%, #16a34a 100%);
    box-shadow: 0 0 0 2px #facc15, 0 2px 0 #166534;
}

.painter-status {
    flex-shrink: 0;
    margin: 0;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 251, 235, 0.92);
    color: #7c2d12;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
}

.painter-choices {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.painter-choice-btn {
    min-width: 4.2rem;
    min-height: 2.8rem;
    font-size: 1.2rem;
}

/* Math-miss teach (≤ 2 s, input locked): kid's rows counted + dashed correct box. */
.painter-grid {
    position: relative;
}

.painter-cell {
    color: #7c2d12;
    font-weight: 800;
    font-size: clamp(0.62rem, 2.6vw, 0.9rem);
    line-height: 1;
}

.painter-cell.is-painted {
    color: #052e16;
}

.painter-cell.is-ghost:not(.is-painted):not(.is-anchor) {
    background: #dbeafe;
}

.painter-ghost {
    position: absolute;
    inset: -2px;
    border: 3px dashed #1d4ed8;
    border-radius: 0.45rem;
    pointer-events: none;
    animation: painter-ghost-in 0.25s ease-out;
}

.painter-ghost[hidden] {
    display: none;
}

/* Solved "proof": rows count up on the rule card (4, 8, 12 → 4 × 3 = 12). DOM path:
   counted rows glow gold-green in turn. 3D path: a transparent WebGL canvas sits
   exactly over the grid (lib/plot-painter-three.js) and the painted DOM squares dim
   to sockets beneath the lifting tiles. */
.painter-cell.is-painted.is-counted:not(.is-anchor) {
    background: linear-gradient(180deg, #d9f99d 0%, #4ade80 100%);
    box-shadow: 0 0 0 2px #facc15, 0 2px 0 #166534;
}

/* Rows not counted yet wait flat and faded, so the lit rows read as the count. */
.painter-grid.is-proof .painter-cell.is-painted:not(.is-counted):not(.is-anchor) {
    opacity: 0.5;
    box-shadow: inset 0 0 0 1px rgba(20, 83, 45, 0.25);
}

.painter-proof-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.painter-proof-canvas[hidden] {
    display: none;
}

.painter-grid.is-proof-3d .painter-cell.is-painted {
    opacity: 0.35;
}

.painter-overlay .muncher-rule-card.is-proof strong {
    text-transform: none;
}

.painter-overlay .muncher-rule-card.is-proof strong.is-pop {
    animation: painter-count-pop 0.22s ease-out;
}

.painter-overlay .muncher-rule-card.is-proof-final strong {
    color: #15803d;
}

@keyframes painter-count-pop {
    from { transform: scale(1.18); }
    to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .painter-overlay .muncher-rule-card.is-proof strong.is-pop { animation: none; }
}

@keyframes painter-ghost-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* The why-card: JS (placeMissCard) measures the free band under Confirm/choices and
   sets `top` so it covers neither the grid nor a button. Compact so it fits that band
   on a 320×568 phone. If the band is too short, .is-teaching-tight hides the locked
   Confirm/choice row for the pause and the card takes its place. */
.painter-board-wrap > .arcade-miss-card {
    bottom: 0.3rem;
    width: calc(100% - 0.8rem);
    max-width: 24rem;
    padding: 0.2rem 0.55rem 0.28rem;
    border-width: 2px;
    box-shadow: 0 3px 0 #7f1d1d;
}

.painter-board-wrap > .arcade-miss-card .arcade-miss-title {
    font-size: 0.95rem;
    line-height: 1.15;
}

.painter-board-wrap > .arcade-miss-card .arcade-miss-text {
    margin-top: 0.05rem;
    font-size: 0.82rem;
    line-height: 1.2;
}

.painter-board-wrap.is-teaching-tight .painter-confirm-wrap,
.painter-board-wrap.is-teaching-tight .painter-status {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .painter-ghost { animation: none; }
}

.painter-confirm-wrap {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    min-height: 3.2rem;
}

.painter-confirm-btn {
    min-width: 9.5rem;
    min-height: 2.8rem;
    padding: 0.45rem 1.2rem 0.5rem;
    font-size: 1.1rem;
}

.painter-confirm-btn.hidden,
.painter-overlay.is-idle .painter-confirm-wrap,
.painter-overlay.is-gameover .painter-confirm-wrap,
.painter-overlay.is-countdown .painter-confirm-wrap {
    display: none;
}

.painter-idle-hero {
    width: 5.2rem;
    height: 5.2rem;
    align-items: center;
}

.painter-idle-hero .arcade-game-mark {
    width: 4.6rem;
    height: 4.6rem;
}

.painter-overlay.is-idle .muncher-hud,
.painter-overlay.is-idle .muncher-rule-card,
.painter-overlay.is-idle .painter-status,
.painter-overlay.is-gameover .painter-status {
    display: none;
}

body.bridge-open {
    overflow: hidden;
}

.bridge-overlay,
.bridge-overlay * {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.bridge-overlay .muncher-rule-card strong {
    text-transform: none;
}

.bridge-board-wrap,
.bridge-board,
.split-bond,
.split-bubble,
.split-train,
.split-row,
.split-unit,
.split-gap,
.split-pick,
#bridgeBoard,
#bridgeBoardWrap,
#bridgeRuleText {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.bridge-board-wrap {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 0.45rem 0.4rem;
    overflow: hidden;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    background:
        linear-gradient(180deg, #7dd3fc 0%, #bae6fd 42%, #38bdf8 78%, #0ea5e9 100%);
    border: 3px solid var(--muncher-gold-deep);
    border-radius: 1rem;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.18);
}

.bridge-board-wrap.is-good {
    animation: muncher-chomp 0.35s ease;
}

.bridge-board-wrap.is-hurt {
    animation: muncher-shake 0.4s ease;
}

.bridge-board {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Overflow spills downward, so the bubbles (under the miss card) stay on top. */
    justify-content: safe center;
    gap: 0.7rem;
    container-type: inline-size;
    container-name: split-board;
}

.split-bond {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.split-bond-parts {
    display: flex;
    gap: 0.55rem;
}

.split-bubble {
    min-width: 3.2rem;
    min-height: 3.2rem;
    border-radius: 999px;
    border: 3px solid #7c2d12;
    background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
    color: #7c2d12;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: 0 3px 0 #92400e;
}

.split-bubble.is-whole {
    min-width: 3.6rem;
    min-height: 3.6rem;
    background: linear-gradient(180deg, #fef3c7 0%, #fbbf24 100%);
}

.split-train {
    /* Gap hit box is 2.75rem with margin-inline -1.025rem, so each crack
       occupies 0.7rem of train width. Size units from the board (columns +
       cracks per row) so a 10-cube row stays inset instead of hugging the gold
       frame. Trains over 10 wrap into rows of ten (row 1 ends in the gap after
       10). --split-units is columns per row; --split-cracks is cracks per row. */
    --split-units: 10;
    --split-cracks: 9;
    --split-gutter: 0.75rem;
    --split-crack-net: 0.7rem;
    --split-open: 0.7rem;
    --split-unit-max: 2.15rem;
    --split-unit-min: 0.75rem;
    --split-unit: min(
        var(--split-unit-max),
        max(
            var(--split-unit-min),
            calc(
                (
                    var(--split-board-w, 100cqi)
                    - 2 * var(--split-gutter)
                    - var(--split-cracks) * var(--split-crack-net)
                    - var(--split-open)
                ) / var(--split-units)
            )
        )
    );
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding: 0.45rem var(--split-gutter);
    gap: 0.2rem;
}

.split-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.split-train[data-split-band="rods"],
.split-train[data-split-band="mixed"] {
    --split-unit-max: 1.85rem;
}

.split-train[data-split-band="mixed"] .split-row {
    align-items: flex-end;
}

/* The crack opens with transforms only: nothing reflows under the finger and
   the previewed gap itself never moves. Sides shift half the open space each. */
.split-train .split-unit,
.split-train .split-gap,
.split-train .split-gap:active {
    transform: translateX(var(--split-shift, 0));
    transition: transform 0.12s ease-out;
}

.split-train.is-cracked .is-left {
    --split-shift: calc(var(--split-open) / -2);
}

.split-train.is-cracked .is-right {
    --split-shift: calc(var(--split-open) / 2);
}

.split-unit.is-cube {
    width: var(--split-unit);
    height: var(--split-unit);
    border-radius: 0.4rem;
    border: 2px solid #7c2d12;
    background: linear-gradient(180deg, #fde68a 0%, #f59e0b 100%);
    box-shadow: 0 3px 0 #92400e;
    flex: 0 0 auto;
}

.split-unit.is-rod {
    width: var(--split-unit);
    height: clamp(3.2rem, 14vw, 4.4rem);
    border-radius: 0.35rem;
    border: 2px solid #7c2d12;
    background: linear-gradient(180deg, #fdba74 0%, #ea580c 100%);
    box-shadow: 0 3px 0 #9a3412;
    flex: 0 0 auto;
}

.split-unit.is-left {
    background: linear-gradient(180deg, #fde68a 0%, #f59e0b 100%);
}

.split-unit.is-right {
    background: linear-gradient(180deg, #86efac 0%, #22c55e 100%);
    border-color: #166534;
}

/* Fives banding: cubes 6–10 of each ten carry an inner stripe (no layout change). */
.split-unit.is-cube.is-five {
    box-shadow: 0 3px 0 #92400e, inset 0 0 0 3px rgba(124, 45, 18, 0.28);
}

.split-unit.is-cube.is-five.is-right {
    box-shadow: 0 3px 0 #92400e, inset 0 0 0 3px rgba(22, 101, 52, 0.35);
}

.split-gap {
    width: 2.75rem;
    min-width: 2.75rem;
    margin-inline: -1.025rem;
    align-self: stretch;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    cursor: pointer;
    position: relative;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
}

.split-gap::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 12%;
    bottom: 12%;
    width: 3px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(124, 45, 18, 0.28);
}

.split-gap.is-preview {
    z-index: 3;
}

.split-gap.is-preview::after {
    width: 5px;
    background: #7c2d12;
}

.split-gap[aria-disabled="true"] {
    cursor: default;
}

.split-gap:focus-visible {
    outline: 3px solid #1e3a8a;
    outline-offset: -6px;
    border-radius: 0.5rem;
}

.split-picks {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
}

.split-pick {
    min-width: 3.4rem;
    min-height: 3.4rem;
    padding: 0 0.6rem;
    border-radius: 1rem;
    border: 3px solid #7c2d12;
    background: linear-gradient(180deg, #ffffff 0%, #fde68a 100%);
    color: #7c2d12;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    box-shadow: 0 4px 0 #92400e;
    cursor: pointer;
    touch-action: manipulation;
}

.split-pick:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #92400e;
}

.split-pick:focus-visible {
    outline: 3px solid #1e3a8a;
    outline-offset: 2px;
}

.split-pick.is-tried,
.split-pick:disabled,
.split-pick[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    transform: none;
}

/* WebGL stage (lib/bond-split-three.js): the canvas takes the train's slot and
   bleeds into the wrap padding for bigger cubes; the DOM train stays in the page
   visually hidden so its labelled gap buttons still serve keyboard / screen readers. */
.split-stage3d {
    display: none;
}

.bridge-overlay.is-webgl-stage .split-stage3d {
    display: flex;
    justify-content: center;
    width: calc(100% + 0.9rem);
    margin-inline: -0.45rem;
    touch-action: none;
}

.split-stage3d canvas {
    display: block;
    max-width: 100%;
    touch-action: none;
}

.bridge-overlay.is-webgl-stage .split-train-slot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Short phones on the 3D stage (the canvas is taller than the DOM train): sit
   the board low and trim the bubbles so the top-anchored miss card clears the
   whole-number bubble (measured at 320×568 with rods, tens-and-ones, 20 cubes). */
@media (max-height: 700px) {
    .bridge-overlay.is-webgl-stage .bridge-board {
        justify-content: flex-end;
        justify-content: safe flex-end;
    }

    .bridge-overlay.is-webgl-stage .split-bubble {
        min-width: 2.7rem;
        min-height: 2.7rem;
        font-size: 1.05rem;
    }

    .bridge-overlay.is-webgl-stage .split-bubble.is-whole {
        min-width: 3rem;
        min-height: 3rem;
    }
}

/* Sideways phone (#1781): the board is too short for bubbles over train over
   picks, so they sit in one row: bubbles | train | picks (a column). The picks
   column is reserved before the crack so the train does not jump. The 3D canvas
   fits the row's height too (--split-stage-fit, read by lib/bond-split-three.js). */
@media (orientation: landscape) and (max-height: 500px) {
    .bridge-board {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) minmax(3.4rem, auto);
        grid-template-rows: minmax(0, 1fr);
        grid-template-areas: "bond train picks";
        align-items: center;
        justify-items: center;
        column-gap: 0.6rem;
    }

    .bridge-board > .split-bond,
    .bridge-board > .split-bond-slot {
        grid-area: bond;
    }

    .bridge-board > .split-train,
    .bridge-board > .split-stage3d {
        grid-area: train;
    }

    .bridge-board > .split-picks,
    .bridge-board > .split-picks-slot {
        grid-area: picks;
    }

    .split-picks {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* DOM train: size cubes from the middle column, not the whole board. */
    .split-train {
        --split-board-w: calc(100cqi - 11.75rem);
    }

    .bridge-overlay.is-webgl-stage .split-stage3d {
        --split-stage-fit: height;
        align-self: stretch;
        align-items: center;
        width: 100%;
        height: 100%;
        min-height: 0;
        margin-inline: 0;
        overflow: hidden;
    }
}

/* Count-up after a miss: the pile to count is numbered 1..n (10, 20 … on rods). */
.split-unit.is-counted {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: 2px solid #1e3a8a;
    outline-offset: 1px;
}

.split-unit.is-counted b {
    font-family: var(--font-heading);
    font-size: clamp(0.6rem, calc(var(--split-unit) * 0.5), 0.95rem);
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.split-pick.is-answer {
    border-color: #166534;
    background: linear-gradient(180deg, #f0fdf4 0%, #86efac 100%);
    animation: split-answer-pulse 0.9s ease-in-out 3;
}

@keyframes split-answer-pulse {
    50% { transform: scale(1.1); }
}

/* Miss card sits at the top of the stage over the bond bubbles, never over the
   train or the pick buttons below them. Card ≤ ~5.5rem tall at 320px (3 short
   lines) vs ~7rem of bubbles above the train, so a 2-row train stays clear. */
.bridge-board-wrap > .arcade-miss-card {
    top: 0.4rem;
    bottom: auto;
    width: min(94%, 22rem);
    padding: 0.4rem 0.7rem 0.45rem;
}

.bridge-board-wrap > .arcade-miss-card .arcade-miss-title {
    font-size: 1rem;
}

.bridge-board-wrap > .arcade-miss-card .arcade-miss-text {
    font-size: 0.85rem;
    line-height: 1.25;
}

/* Short phones: the stage has empty sky above the grid, so the card always goes up there. */
@media (max-height: 640px) {
    .muncher-board-wrap > .arcade-miss-card {
        top: 0.45rem;
        bottom: auto;
        padding: 0.25rem 0.6rem 0.3rem;
    }
    /* No free band for a full card on a short phone: the title already names the fact ("9 is odd"). */
    .muncher-board-wrap > .arcade-miss-card .arcade-miss-text {
        display: none;
    }
    .bridge-board-wrap > .arcade-miss-card {
        padding: 0.3rem 0.55rem 0.35rem;
    }
    .bridge-board-wrap > .arcade-miss-card .arcade-miss-title { font-size: 0.92rem; }
    .bridge-board-wrap > .arcade-miss-card .arcade-miss-text { font-size: 0.78rem; line-height: 1.18; }
}

@media (prefers-reduced-motion: reduce) {
    .split-pick.is-answer { animation: none; }
}

.bridge-idle-hero {
    width: 5.2rem;
    height: 5.2rem;
    align-items: center;
}

.bridge-idle-hero .arcade-game-mark {
    width: 4.6rem;
    height: 4.6rem;
}

.bridge-overlay.is-idle .muncher-hud,
.bridge-overlay.is-idle .muncher-rule-card {
    display: none;
}

body.truck-open {
    overflow: hidden;
}

.truck-overlay,
.truck-overlay * {
    touch-action: none;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.truck-overlay .muncher-rule-card strong,
.truck-overlay .truck-rule-card strong,
.truck-overlay .truck-corner-rule {
    text-transform: none;
}

.truck-play-hud {
    position: absolute;
    inset: 0.45rem 0.5rem auto;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none;
    gap: 0.4rem;
}

.truck-corner {
    font-family: var(--font-heading);
    font-weight: 800;
    color: #fffbeb;
    text-shadow: 0 1px 0 #1e293b, 0 0 8px rgba(30, 41, 59, 0.45);
    font-size: 1.05rem;
    line-height: 1.1;
}

.truck-corner-rule {
    padding: 0.2rem 0.65rem;
    border: 3px solid #1e293b;
    border-radius: 999px;
    background: #fde68a;
    color: #1e293b;
    text-shadow: none;
    box-shadow: 0 2px 0 #92400e;
    font-size: 1.05rem;
}

.truck-corner-nw,
.truck-corner-ne {
    min-width: 2.6rem;
}

.truck-board-wrap {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 12rem;
    outline: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: none;
    background: #8fa8b6;
    border: 3px solid var(--muncher-gold-deep);
    border-radius: 1rem;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.18);
}

.truck-board-wrap[data-truck-track="fair"] { background: #8fa8b6; }
.truck-board-wrap[data-truck-track="desert"] { background: #fb923c; }
.truck-board-wrap[data-truck-track="stadium"] { background: #1e3a5f; }
.truck-board-wrap[data-truck-track="jungle"] { background: #86c99a; }
.truck-board-wrap[data-truck-track="drag"] { background: #0f172a; }
.truck-board-wrap[data-truck-track="snow"] { background: #bcd3ea; }

.truck-board-wrap.is-good {
    animation: muncher-chomp 0.35s ease;
}

.truck-board-wrap.is-hurt {
    animation: muncher-shake 0.4s ease;
}

.truck-hit-face {
    position: absolute;
    /* Left shoulder under the hearts (HIT_FACE_SLOT in truck-three): clear of
       the question banner and of the lanes where the next gates come in. */
    top: 34%;
    left: 17%;
    transform: translate(-50%, -50%);
    width: min(28vw, 7.5rem);
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.truck-hit-face[hidden] {
    display: none !important;
}

.truck-hit-face svg {
    width: 100%;
    height: auto;
    display: block;
}

/* The kid's live face window (Family DEV, lib/truck-circuit-three.js): the stage draws her inside this frame, in the
   pop-up face's old corner. The frame's corner radius stays inside its border, so no square corner of the drawing shows. */
.truck-face-cam {
    position: absolute;
    top: 34%;
    left: 15%;
    transform: translate(-50%, -50%);
    width: min(24vw, 6.5rem);
    aspect-ratio: 1;
    box-sizing: border-box;
    border: 5px solid #f8fafc;
    border-radius: 14px;
    box-shadow: 0 0 0 2px #1e293b, 0 6px 14px rgba(15, 23, 42, 0.35);
    z-index: 3;
    pointer-events: none;
}

.truck-face-cam[hidden] {
    display: none !important;
}

.truck-stage {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: none;
    touch-action: none;
}

.truck-overlay.is-webgl-stage.is-countdown .truck-stage,
.truck-overlay.is-webgl-stage.is-playing .truck-stage,
.truck-overlay.is-webgl-stage.is-gameover .truck-stage {
    display: block;
    position: absolute;
    inset: 0;
}

.truck-overlay.is-webgl-stage.is-countdown .truck-fallback,
.truck-overlay.is-webgl-stage.is-playing .truck-fallback,
.truck-overlay.is-webgl-stage.is-gameover .truck-fallback,
.truck-fallback.is-hidden-stage {
    display: none !important;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.truck-fallback {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

.truck-fallback-lane {
    position: relative;
    flex: 1 1 0;
    min-height: 2.4rem;
    border-left: 3px solid #1e293b;
    background: #c4a574;
    overflow: hidden;
}

.truck-board-wrap[data-truck-track="desert"] .truck-fallback-lane { background: #d97706; }
.truck-board-wrap[data-truck-track="stadium"] .truck-fallback-lane { background: #57534e; }
.truck-board-wrap[data-truck-track="jungle"] .truck-fallback-lane { background: #8a6a43; }
.truck-board-wrap[data-truck-track="drag"] .truck-fallback-lane { background: #3f3f46; }
.truck-board-wrap[data-truck-track="snow"] .truck-fallback-lane { background: #94a3b8; }

.truck-fallback-lane.is-hero {
    box-shadow: inset 0 0 0 3px #fbbf24;
}

.truck-fallback-pack {
    position: absolute;
    left: 8%;
    right: 8%;
    width: auto;
    bottom: 28%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
}

/* The next set shows its numbers early; smaller and softer reads as further away. */
.truck-fallback-pack.is-far {
    bottom: 62%;
    transform: scale(0.86);
    filter: saturate(0.8) brightness(0.96);
}

.truck-fallback-pack::before,
.truck-fallback-pack::after {
    content: '';
    position: absolute;
    top: 8%;
    bottom: 8%;
    width: 8px;
    border: 3px solid #1e293b;
    background: #92400e;
    border-radius: 3px;
}
.truck-fallback-pack::before { left: 6px; }
.truck-fallback-pack::after { right: 6px; }

.truck-fallback-sign {
    min-width: 3.2rem;
    padding: 0.15rem 0.45rem;
    border: 3px solid #1e293b;
    border-radius: 0.55rem;
    background: #fffbeb;
    color: #1e293b;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.05rem;
}

/* Short stages (< 650px): compact miss card. WebGL parks it under the question
   banner's (top set inline by truck-cabinet); the DOM fallback hugs the bottom. */
.truck-board-wrap > .arcade-miss-card.truck-card-compact {
    width: min(88%, 20rem);
    padding: 0.3rem 0.65rem 0.35rem;
    bottom: 0.3rem;
    border-width: 2px;
    box-shadow: 0 3px 0 #7f1d1d;
}
.truck-board-wrap > .arcade-miss-card.truck-card-top { bottom: auto; }
.truck-board-wrap > .arcade-miss-card.truck-card-compact .arcade-miss-title { font-size: 0.95rem; }
.truck-board-wrap > .arcade-miss-card.truck-card-compact .arcade-miss-text { font-size: 0.82rem; margin-top: 0; }
/* The card now holds the upper band, so the laugh/cry face drops a little. */
@media (max-height: 649px) {
    .truck-hit-face { top: 46%; }
    .truck-face-cam { top: 46%; }
}

/* After a miss the right gate pulses green during the bounce beat. */
.truck-fallback-sign.is-answer {
    background: #bbf7d0;
    border-color: #15803d;
    box-shadow: 0 0 0 3px #4ade80;
    animation: truck-answer-pulse 0.4s ease-in-out infinite alternate;
}
@keyframes truck-answer-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .truck-fallback-sign.is-answer { animation: none; }
}

.truck-fallback-junk {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.78rem;
    color: #1e293b;
    text-transform: uppercase;
}

.truck-fallback-junk.is-crush {
    animation: truck-crush 0.7s ease forwards;
}

@keyframes truck-crush {
    0% { transform: translateY(0) rotate(0); }
    35% { transform: translateY(-18px) rotate(-20deg); }
    70% { transform: translateY(-4px) rotate(180deg) scaleY(0.45); }
    100% { transform: translateY(8px) rotate(180deg) scaleY(0.2); }
}

.truck-fallback-hero {
    position: absolute;
    width: 4.6rem;
    height: 3.2rem;
    z-index: 3;
    pointer-events: none;
    bottom: 6%;
    left: calc(8% + var(--truck-lane, 1) * 30%);
    top: auto;
    transition: left 0.14s ease;
}

.truck-fallback-hero.is-bounce {
    animation: muncher-shake 0.4s ease;
}

.truck-fallback-hero .truck-idle-svg,
.truck-idle-hero .truck-idle-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.truck-idle-hero {
    width: 6rem;
    height: 4.2rem;
}

.truck-overlay.is-idle .truck-play-hud {
    display: none;
}

/* Off-road garage (flag-off, ?truck=circuit): the idle screen is the 3D
   turntable with a picker panel; the gold idle card steps aside. */
/* Off-road circuit: race place under the LAP pill, and the result as a bottom
   sheet so the 3D podium shows above it. */
.truck-place-pill {
    display: none;
}

/* Live place: a quick green pop when the kid passes, red when passed. */
.truck-place-pill.is-up { animation: truck-place-up 0.6s ease-out; }
.truck-place-pill.is-down { animation: truck-place-down 0.6s ease-out; }
@keyframes truck-place-up {
    0% { transform: scale(1); }
    35% { transform: scale(1.35); color: #4ade80; }
    100% { transform: scale(1); }
}
@keyframes truck-place-down {
    0% { transform: scale(1); }
    35% { transform: scale(1.2); color: #f87171; }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .truck-place-pill.is-up,
    .truck-place-pill.is-down { animation: none; }
}

.truck-overlay.is-circuit.is-countdown .truck-place-pill:not([hidden]),
.truck-overlay.is-circuit.is-playing .truck-place-pill:not([hidden]) {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 3.2rem);
    right: calc(env(safe-area-inset-right, 0px) + 0.55rem);
    z-index: 8;
    display: inline-flex;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.82);
    border: 1px solid rgba(250, 204, 21, 0.5);
    color: #facc15;
    font-style: italic;
    font-weight: 900;
    font-size: 1.05rem;
}

.truck-overlay.is-circuit.is-gameover .truck-board-wrap {
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.truck-overlay.is-circuit.is-gameover #truckScreenOver {
    inset: auto 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
    padding: 0.8rem 0.9rem 1rem;
    background: rgba(13, 16, 24, 0.86);
}

.truck-overlay.is-circuit.is-gameover .muncher-hint,
.truck-overlay.is-circuit.is-gameover .truck-play-hud,
.truck-overlay.is-circuit.is-gameover .muncher-title-row,
.truck-overlay.is-circuit.is-gameover #truckHintBtn {
    display: none;
}

.truck-overlay.is-circuit.is-gameover .truck-shell {
    padding: 0;
    gap: 0;
    background: #0b1220;
}

.truck-overlay.is-circuit.is-gameover .muncher-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) calc(env(safe-area-inset-right, 0px) + 0.55rem) 0 0;
    pointer-events: none;
}

.truck-overlay.is-circuit.is-gameover .muncher-header button {
    pointer-events: auto;
}

.truck-overlay.is-circuit.is-gameover .muncher-over-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

/* Full-screen like the race: only the Exit ✕ floats in the corner. */
.truck-overlay.is-garage .truck-shell {
    padding: 0;
    gap: 0;
    background: #0b1220;
}

.truck-overlay.is-garage .muncher-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) calc(env(safe-area-inset-right, 0px) + 0.55rem) 0 0;
    pointer-events: none;
}

.truck-overlay.is-garage .muncher-title-row,
.truck-overlay.is-garage #truckHintBtn {
    display: none;
}

.truck-overlay.is-garage .muncher-header button {
    pointer-events: auto;
}

.truck-overlay.is-garage .truck-board-wrap {
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #0b1220;
}

.truck-overlay.is-webgl-stage.is-garage .truck-stage {
    display: block;
    position: absolute;
    inset: 0;
}

.truck-overlay.is-garage .truck-fallback,
.truck-overlay.is-garage #truckScreenIdle,
.truck-overlay.is-garage .muncher-hint {
    display: none !important;
}

/* Kart-style select screens. Step 1: truck tiles under the live 3D turntable.
   Step 2: track tiles under a big map, the truck in a small 3D window by the ✕.
   --pick-* (truck) and --track-* (track) are set on #truckOverlay from JS. */
.truck-overlay {
    --pick-body: #b8bec6;
    --pick-glow: #38bdf8;
    --pick-accent: #0f172a;
    --track-sky: #7dd3fc;
    --track-accent: #fbbf24;
}

.truck-garage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #f8fafc;
    text-align: center;
    z-index: 4;
    pointer-events: none;
}

.truck-garage.hidden,
.truck-select.hidden,
.truck-change-btn.hidden {
    display: none;
}

.truck-select {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(32rem, 100%);
    margin: 0 auto;
    padding: 0.75rem calc(env(safe-area-inset-right, 0px) + 0.85rem) calc(env(safe-area-inset-bottom, 0px) + 0.85rem) calc(env(safe-area-inset-left, 0px) + 0.85rem);
    box-sizing: border-box;
}

.truck-select-trucks {
    border-radius: 1.4rem 1.4rem 0 0;
    background: linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, 0.82) 22%, #0b1220 60%);
}

.truck-select-tracks {
    height: 100%;
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
    /* Plain fallbacks first: iOS < 16.2 drops a declaration with color-mix(). */
    background: #0b1220;
    background:
        radial-gradient(120% 45% at 50% 0%, color-mix(in srgb, var(--track-sky) 45%, transparent), transparent 70%),
        #0b1220;
}

.truck-select-steps {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.truck-select-steps li {
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

.truck-select-steps li.is-on {
    background: #fb923c;
    color: #1e293b;
}

.truck-select-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Room on the right for the 3D truck window and the ✕. */
    min-height: 4.6rem;
    padding-right: 10.25rem;
}

.truck-select-back {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: 0 0.95rem;
    border-radius: 999px;
    border: 2px solid rgba(148, 163, 184, 0.5);
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    touch-action: manipulation;
}

/* Angled name banner in the picked truck's (or track's) colours. */
.truck-select-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem;
}

.truck-select-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: skewX(-12deg);
    border-radius: 0.6rem;
    border-left: 6px solid var(--pick-glow);
    background: linear-gradient(90deg, #1e293b, rgba(15, 23, 42, 0.92) 85%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--pick-body) 70%, #0f172a), rgba(15, 23, 42, 0.92) 85%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.truck-track-banner::before {
    border-left-color: var(--track-accent);
    background: linear-gradient(90deg, #1e293b, rgba(15, 23, 42, 0.92) 85%);
    background: linear-gradient(90deg, color-mix(in srgb, var(--track-sky) 70%, #0f172a), rgba(15, 23, 42, 0.92) 85%);
}

.truck-garage-kicker {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fdba74;
}

.truck-garage-label {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.truck-garage-name,
.truck-track-name {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
    font-style: italic;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 0 #0f172a;
}

.truck-garage-tag {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: #e2e8f0;
}

.truck-garage-arrow {
    position: relative;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: rgba(15, 23, 42, 0.55);
    color: #f8fafc;
    font-size: 1rem;
    cursor: pointer;
    touch-action: manipulation;
}

.truck-garage-arrow:active,
.truck-select-back:active {
    transform: scale(0.94);
}

/* ---- Tiles ---- */
.truck-tile-grid {
    display: grid;
    /* Seven trucks (MT-13) in one row on a 360-wide phone. */
    grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
    gap: 0.3rem;
    padding: 0.35rem 0.5rem;
}

.truck-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 5.6rem;
    padding: 0.25rem 0.1rem 0.35rem;
    border-radius: 0.8rem;
    border: 3px solid rgba(148, 163, 184, 0.35);
    background: linear-gradient(165deg, var(--tile-body, #334155) -40%, #111827 80%);
    background: linear-gradient(165deg, color-mix(in srgb, var(--tile-body, #334155) 55%, #0f172a) 0%, #111827 80%);
    color: #f8fafc;
    cursor: pointer;
    touch-action: manipulation;
    transform: skewX(-7deg);
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
    -webkit-tap-highlight-color: transparent;
}

.truck-tile > * {
    transform: skewX(7deg);
}

.truck-tile.is-on {
    border-color: var(--tile-glow);
    transform: skewX(-7deg) scale(1.07);
    box-shadow: 0 0 0 2px #0b1220, 0 0 18px var(--tile-glow);
    box-shadow: 0 0 0 2px #0b1220, 0 0 18px color-mix(in srgb, var(--tile-glow) 70%, transparent);
    animation: truck-tile-pulse 1.2s ease-in-out infinite;
    z-index: 1;
}

.truck-tile:focus-visible {
    outline: 3px solid #f8fafc;
    outline-offset: 3px;
}

@keyframes truck-tile-pulse {
    50% { box-shadow: 0 0 0 2px #0b1220, 0 0 28px var(--tile-glow); }
}

.truck-tile-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 3.4rem;
}

.truck-tile-svg {
    width: 88%;
    height: auto;
}

.truck-tile-img {
    width: 112%;
    max-width: none;
    height: auto;
    margin: -0.4rem -6% -0.2rem;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5));
    pointer-events: none;
}

.truck-tile-name {
    /* Seven names in a row (MT-13): small on a 360-wide phone, full size on wider ones. */
    font-size: clamp(0.6rem, 2.7vw, 0.78rem);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1.1;
}

.truck-tile-badge {
    position: absolute;
    top: -0.55rem;
    left: -0.3rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.35rem;
    background: var(--tile-glow);
    color: #0f172a;
    font-size: 0.7rem;
    font-weight: 900;
    font-style: italic;
    opacity: 0;
    transition: opacity 0.14s ease;
}

.truck-tile.is-on .truck-tile-badge {
    opacity: 1;
}

.truck-track-tile {
    min-height: 5.2rem;
    background: linear-gradient(180deg, var(--tile-sky) 0%, var(--tile-ground) 70%);
}

.truck-track-tile .truck-tile-name {
    padding: 0.1rem 0.3rem;
    border-radius: 0.3rem;
    background: rgba(15, 23, 42, 0.72);
    font-size: 0.7rem;
}

.truck-track-tile .truck-tile-badge {
    left: auto;
    right: -0.3rem;
    background: #0f172a;
    border: 2px solid var(--tile-glow);
    opacity: 1;
}

.truck-tile-map {
    width: 100%;
    height: 2.9rem;
    flex: 1 1 auto;
}

/* ---- Track map and info ---- */
.truck-track-hero {
    position: relative;
    flex: 1 1 auto;
    min-height: 8.5rem;
    border-radius: 1rem;
    overflow: hidden;
    border: 3px solid #1e293b;
    box-shadow: 0 0 0 2px var(--track-accent), 0 10px 24px rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--track-accent) 60%, transparent), 0 10px 24px rgba(0, 0, 0, 0.45);
}

.truck-track-map {
    display: block;
    width: 100%;
    height: 100%;
}

.truck-track-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.truck-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.8rem;
    font-weight: 800;
}

.truck-chip-emoji {
    font-size: 0.9rem;
    line-height: 1;
}

.truck-chip-ico {
    display: inline-block;
    width: 0.95rem;
    height: 0.85rem;
}

.truck-chip-ico.is-jump {
    background: #facc15;
    clip-path: polygon(0 100%, 100% 100%, 100% 10%);
}

.truck-chip-ico.is-tabletop {
    background: #fde047;
    clip-path: polygon(0 100%, 25% 15%, 75% 15%, 100% 100%);
}

.truck-chip-ico.is-mud {
    background: #7c4a24;
    border-radius: 55% 45% 50% 40%;
}

.truck-chip-ico.is-water {
    background: #0ea5e9;
    border-radius: 50%;
    box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.6);
}

.truck-chip-ico.is-ice {
    background: #bae6fd;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1.5px #38bdf8, inset 3px 3px 0 rgba(255, 255, 255, 0.85);
}

.truck-track-blurb {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #e2e8f0;
}

.truck-select-go,
.truck-garage-race {
    width: 100%;
    font-style: italic;
    font-size: 1.25rem;
}

/* Race! and, on Family DEV, the Grand Prix side by side (Key 2026-10-09). */
.truck-race-row {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.truck-race-row > .truck-garage-race,
.truck-race-row > .truck-gp-btn {
    flex: 1 1 0;
    min-width: 0;
}

.truck-gp-btn {
    font-style: italic;
    font-size: 1.1rem;
    white-space: nowrap;
}

.truck-gp-btn.hidden {
    display: none;
}

.truck-change-btn {
    display: block;
    margin: 0.6rem auto 0;
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 2px solid rgba(148, 163, 184, 0.6);
    background: rgba(15, 23, 42, 0.55);
    color: #f8fafc;
    font-weight: 800;
    font-size: 0.95rem;
    cursor: pointer;
    touch-action: manipulation;
}

/* Track step: the 3D truck shrinks into a small window beside the ✕. */
.truck-overlay.is-webgl-stage.is-garage.is-step-track .truck-stage {
    inset: auto;
    top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
    right: calc(env(safe-area-inset-right, 0px) + 3.6rem);
    width: 6.4rem;
    height: 4.6rem;
    border-radius: 0.9rem;
    border: 2px solid var(--pick-glow);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    z-index: 6;
}

/* MT-02 paint shop: one swatch per paint job under the truck name; locked ones
   dimmed with a padlock. Each swatch is a 44 px tap target. */
.truck-paint-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.5rem;
    min-width: 0;
}

.truck-paint-swatches {
    display: flex;
    flex: 0 0 auto;
    gap: 0.3rem;
}

.truck-paint {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.truck-paint-dot {
    position: absolute;
    inset: 0.3rem;
    border-radius: 999px;
    border: 3px solid rgba(148, 163, 184, 0.5);
    background: linear-gradient(135deg, var(--paint-body) 0 55%, var(--paint-accent) 55% 72%, var(--paint-glow) 72%);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
    transition: transform 0.14s ease, border-color 0.14s ease;
}

.truck-paint.is-on .truck-paint-dot {
    border-color: #f8fafc;
    box-shadow: 0 0 0 3px var(--pick-glow, #38bdf8), inset 0 -3px 0 rgba(0, 0, 0, 0.25);
    transform: scale(1.08);
}

.truck-paint.is-locked .truck-paint-dot {
    filter: grayscale(0.75) brightness(0.6);
}

.truck-paint-lock {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 0.85rem;
    line-height: 1;
}

.truck-paint:active .truck-paint-dot {
    transform: scale(0.92);
}

.truck-paint-note {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    color: #e2e8f0;
}

/* MT-03 horn and nitro flame (and MT-11 rims and tyres): buttons under the paint
   swatches; each tap flips to the next one. 44 px tall tap targets. */
.truck-extras-row {
    display: flex;
    gap: 0.5rem;
    padding: 0 0.5rem;
    min-width: 0;
}

.truck-extra {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.2rem 0.75rem 0.2rem 0.4rem;
    border-radius: 999px;
    border: 2px solid rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.14s ease;
}

.truck-extra:active {
    transform: scale(0.95);
}

.truck-extra-icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.7);
    font-size: 1.15rem;
    line-height: 1;
}

.truck-flame-dot {
    background: radial-gradient(circle at 50% 70%, #fff 0 18%, var(--flame, #f97316) 45%, rgba(15, 23, 42, 0.7) 72%);
}

/* MT-11 wheel shop: the rims button shows the rim inside a tyre, the tyres
   button the tread colour round a grey rim. */
.truck-rim-dot {
    background: radial-gradient(circle, #1f2937 0 14%, var(--rim, #cbd5e1) 16% 44%, #26211c 47% 100%);
    box-shadow: inset 0 0 0 2px rgba(148, 163, 184, 0.45);
}

.truck-tyre-dot {
    background: radial-gradient(circle, #9ca3af 0 26%, #26211c 29% 52%, var(--tread, #26211c) 55% 100%);
    box-shadow: inset 0 0 0 2px rgba(148, 163, 184, 0.45);
}

/* Five buttons (horn, nitro, rims, tyres and the MT-12 trail) share one row:
   each stacks its icon over its name, so the row stays one 44 px+ line at 360
   wide and in landscape. */
.truck-extras-row {
    gap: 0.4rem;
}

.truck-extras-row .truck-extra {
    flex-direction: column;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.2rem 0.25rem;
    border-radius: 0.9rem;
    text-align: center;
}

.truck-extras-row .truck-extra-icon {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.95rem;
}

.truck-extras-row .truck-extra-text {
    align-items: center;
    max-width: 100%;
}

.truck-extras-row .truck-extra-kicker {
    display: none;
}

.truck-extras-row .truck-extra-name {
    max-width: 100%;
    font-size: 0.74rem;
}

.truck-extra-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
}

.truck-extra-kicker {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fdba74;
}

.truck-extra-name {
    font-size: 0.85rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truck-over-paint {
    margin: 0.4rem 0 0;
    font-weight: 800;
    color: #fde68a;
}

/* MT-04 trophy shelf: the best place under the track name, a trophy in the
   top-left corner of each track tile raced (the theme badge has the top-right),
   and a slow shine across a gold tile. */
.truck-track-trophy {
    margin-top: 0.05rem;
    font-weight: 800;
    color: #fde68a;
}

.truck-track-trophy[data-best="0"] {
    font-weight: 600;
    color: #cbd5e1;
}

.truck-tile-trophy {
    position: absolute;
    top: -0.55rem;
    left: -0.3rem;
    font-size: 1.15rem;
    line-height: 1;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
    pointer-events: none;
}

.truck-track-tile.is-gold::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 245, 200, 0.55) 50%, transparent 65%);
    background-size: 250% 100%;
    animation: truck-trophy-shine 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes truck-trophy-shine {
    0%, 55% { background-position: 120% 0; }
    100% { background-position: -20% 0; }
}

/* Landscape podium: paint, sticker and trophy lines all fit under the title.
   The four stats go on one row and the rewards sit closer; it scrolls if a
   very short screen still can't hold it. */
@media (orientation: landscape) and (max-height: 600px) {
    .truck-overlay.is-circuit.is-gameover #truckScreenOver {
        max-height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1.5rem);
        overflow-y: auto;
        justify-content: flex-start;
        gap: 0.4rem;
        padding: 0.6rem 0.9rem 0.75rem;
    }

    .truck-overlay.is-circuit.is-gameover .muncher-over-list {
        width: min(36rem, 100%);
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .truck-over-paint {
        margin: 0.1rem 0 0;
        font-size: 0.85rem;
        line-height: 1.25;
    }
}

/* MT-08 truck of the day: a card in the turntable's top-left corner (the ✕ has
   the top-right). A tap picks today's truck and track; the sticker goes bright
   once earned. Only on the truck step. 44 px tall tap target. */
.truck-daily {
    pointer-events: auto;
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
    left: calc(env(safe-area-inset-left, 0px) + 0.75rem);
    max-width: calc(100% - 6rem);
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.8rem 0.35rem 0.4rem;
    border-radius: 1rem;
    border: 2px solid rgba(250, 204, 21, 0.55);
    background: rgba(11, 18, 32, 0.78);
    color: #f8fafc;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.14s ease;
}

.truck-daily:active {
    transform: scale(0.95);
}

.truck-overlay.is-step-track .truck-daily {
    display: none;
}

.truck-daily-sticker {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    font-size: 1.4rem;
    line-height: 1;
    filter: grayscale(1);
    opacity: 0.6;
}

.truck-daily.is-earned .truck-daily-sticker {
    background: radial-gradient(circle, #fef08a 0 55%, #f59e0b 100%);
    filter: none;
    opacity: 1;
}

.truck-daily.is-ready {
    border-color: #facc15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.3);
}

.truck-daily-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.truck-daily-kicker {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #facc15;
}

.truck-daily-name {
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truck-daily-note {
    font-size: 0.72rem;
    font-weight: 700;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Landscape phones: the card stays over the 3D half, clear of the tiles. */
@media (orientation: landscape) and (max-height: 600px) {
    .truck-daily {
        max-width: calc(50% - 1.5rem);
    }
}

/* Short phones (375×667): a smaller map and tiles so nothing scrolls. */
@media (max-height: 700px) {
    .truck-select { gap: 0.45rem; }
    .truck-garage-name, .truck-track-name { font-size: 1.25rem; }
    .truck-garage-tag { font-size: 0.78rem; }
    .truck-tile { min-height: 4.8rem; }
    .truck-track-tile { min-height: 4.5rem; }
    .truck-paint-note { font-size: 0.72rem; }
    .truck-track-hero { min-height: 7rem; }
    .truck-track-blurb { font-size: 0.8rem; }
}

/* Landscape phones: side by side (same query as SIDE_LAYOUT_QUERY in truck-cabinet.js).
   Truck step: 3D truck in the left half, tiles on the right. Track step: map on the
   left, info, tiles and Race! on the right. */
@media (orientation: landscape) and (max-height: 600px) {
    .truck-overlay.is-webgl-stage.is-garage.is-step-truck .truck-stage {
        right: auto;
        width: 50%;
    }

    .truck-garage {
        flex-direction: row;
        justify-content: flex-end;
    }

    .truck-select {
        gap: 0.45rem;
    }

    .truck-select-trucks {
        width: 50%;
        height: 100%;
        margin: 0;
        justify-content: center;
        padding-top: calc(env(safe-area-inset-top, 0px) + 0.6rem);
        border-radius: 0;
        background: linear-gradient(90deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, 0.85) 14%, #0b1220 40%);
    }

    .truck-select-trucks .truck-select-steps {
        /* Clear of the ✕ in the top-right corner. */
        margin-right: 3.5rem;
    }

    .truck-select-trucks .truck-tile-grid {
        /* Seven trucks (MT-13) in one row on the right half, down to 667 × 375. */
        grid-template-columns: repeat(auto-fit, minmax(2.3rem, 1fr));
    }

    .truck-select-trucks .truck-tile-name {
        /* Half the screen wide: names sized to the half. */
        font-size: clamp(0.56rem, 1.4vw, 0.78rem);
    }

    .truck-select-tracks {
        display: grid;
        width: 100%;
        max-width: none;
        /* Back and the name share the left column's top row; the right column's
           top is left to the 3D truck window and the ✕. */
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "top banner ."
            "map map chips"
            "map map blurb"
            "map map tiles"
            "map map race";
        column-gap: 1rem;
        row-gap: 0.45rem;
        align-items: start;
    }

    .truck-select-tracks .truck-select-top {
        grid-area: top;
        min-height: 0;
        padding-right: 0;
    }

    .truck-track-banner {
        grid-area: banner;
        padding: 0.25rem 0.6rem;
    }

    .truck-track-banner .truck-garage-arrow,
    .truck-track-banner .truck-garage-kicker {
        display: none;
    }

    .truck-track-name {
        font-size: 1.15rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .truck-track-hero {
        grid-area: map;
        align-self: stretch;
        min-height: 0;
    }

    .truck-track-chips {
        grid-area: chips;
        justify-content: flex-start;
    }

    .truck-track-blurb {
        grid-area: blurb;
        align-self: start;
        max-height: 100%;
        overflow: hidden;
        text-align: left;
        font-size: 0.82rem;
    }

    .truck-track-tiles {
        grid-area: tiles;
        align-self: end;
        /* Every track (six since MT-06) in one row, so Race! stays on screen. */
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    .truck-track-tile {
        min-height: 4.4rem;
    }

    .truck-select-tracks .truck-race-row {
        grid-area: race;
    }

    .truck-overlay.is-webgl-stage.is-garage.is-step-track .truck-stage {
        width: 5.4rem;
        height: 3.4rem;
    }
}

/* Narrow landscape phones (667 × 375): seven truck tiles are too narrow for their
   names; the banner names the picked one, as the track tiles do (MT-13). */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 760px) {
    .truck-select-trucks .truck-tile-name {
        display: none;
    }
}

/* The shortest landscape phones (568×320): drop the extras, shrink the tiles. */
@media (orientation: landscape) and (max-height: 340px) {
    .truck-select-trucks .truck-select-steps,
    .truck-select-trucks .truck-garage-kicker,
    .truck-select-trucks .truck-garage-tag,
    .truck-track-blurb {
        display: none;
    }

    .truck-garage-name {
        font-size: 1.1rem;
    }

    /* With the steps hidden the banner rides up to the ✕: keep ▶ clear of it. */
    .truck-select-trucks .truck-select-banner {
        margin-right: 3.25rem;
    }

    .truck-garage-arrow {
        width: 2.5rem;
        height: 2.5rem;
    }

    .truck-select-trucks .truck-tile-grid {
        /* Seven trucks (MT-13) in one row at 568 × 320. */
        grid-template-columns: repeat(auto-fit, minmax(1.85rem, 1fr));
        gap: 0.25rem;
    }

    .truck-tile,
    .truck-track-tile {
        min-height: 4rem;
    }

    .truck-tile-name {
        font-size: 0.62rem;
    }

    .truck-paint-note,
    .truck-extra-kicker,
    .truck-daily-note {
        display: none;
    }

    .truck-track-tiles {
        gap: 0.5rem;
    }

    /* Six tracks in one row are too narrow for their names here; the banner
       names the picked one (MT-06). */
    .truck-track-tile .truck-tile-name {
        display: none;
    }

    .truck-track-tile {
        min-height: 3.4rem;
    }

    .truck-chip {
        padding: 0.15rem 0.45rem;
        font-size: 0.7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .truck-tile,
    .truck-tile-badge,
    .truck-extra,
    .truck-daily {
        transition: none;
    }

    .truck-tile.is-on,
    .truck-track-tile.is-gold::after {
        animation: none;
    }
}

/* ===== Monster Truck Toy Track (Key override 2026-09-16: toy plastic, not ink) =====
   Portrait edge-to-edge takeover like Answer Slice: no 90° rotate, no Fullscreen API.
   Idle and Game Over keep the gold/wood cards; countdown and play are the toy world. */
.truck-overlay {
    padding: 0;
}

.truck-overlay .truck-shell {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 0.45rem) calc(env(safe-area-inset-right, 0px) + 0.55rem) calc(env(safe-area-inset-bottom, 0px) + 0.45rem) calc(env(safe-area-inset-left, 0px) + 0.55rem);
    border: 0;
    border-radius: 0;
    outline: 0;
}

.truck-overlay.is-countdown .truck-shell,
.truck-overlay.is-playing .truck-shell {
    padding: 0;
    gap: 0;
    background: #bfefff;
}

.truck-overlay.is-countdown .muncher-header,
.truck-overlay.is-playing .muncher-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
    gap: 0.35rem;
    padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) calc(env(safe-area-inset-right, 0px) + 0.55rem) 0 0;
    pointer-events: none;
}

.truck-overlay.is-countdown .muncher-title-row,
.truck-overlay.is-playing .muncher-title-row {
    display: none;
}

.truck-overlay.is-countdown .muncher-header button,
.truck-overlay.is-playing .muncher-header button {
    pointer-events: auto;
}

/* Hint collapses to a round ? chip beside the Exit ✕ while the truck rolls. */
.truck-overlay.is-countdown #truckHintBtn,
.truck-overlay.is-playing #truckHintBtn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 999px;
    font-size: 0;
}

.truck-overlay.is-countdown #truckHintBtn::after,
.truck-overlay.is-playing #truckHintBtn::after {
    content: "?";
    font-size: 1.3rem;
}

.truck-overlay.is-countdown .truck-board-wrap,
.truck-overlay.is-playing .truck-board-wrap {
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #bfefff;
}

.truck-overlay.is-webgl-stage.is-countdown .truck-board-wrap,
.truck-overlay.is-webgl-stage.is-playing .truck-board-wrap {
    background: linear-gradient(180deg, #bfefff 0%, #ffffff 30%, #37c8dc 31%, #ff7a1c 60%);
}

.truck-overlay.is-countdown .truck-play-hud,
.truck-overlay.is-playing .truck-play-hud {
    inset: 0 0 auto;
    display: block;
    height: 0;
}

.truck-overlay.is-countdown .truck-corner-nw,
.truck-overlay.is-countdown .truck-corner-ne,
.truck-overlay.is-playing .truck-corner-nw,
.truck-overlay.is-playing .truck-corner-ne {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 0.5rem);
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    height: 40px;
    padding: 0 0.75rem;
    border: 3px solid #1e1b4b;
    border-radius: 999px;
    background: #ffffff;
    color: #1e1b4b;
    text-shadow: none;
    font-size: 1.1rem;
    box-shadow: 0 3px 0 rgba(30, 27, 75, 0.35);
}

.truck-overlay.is-countdown .truck-corner-nw,
.truck-overlay.is-playing .truck-corner-nw {
    left: calc(env(safe-area-inset-left, 0px) + 0.55rem);
    gap: 0.3rem;
}

/* Right of the pill sits the ? chip and Exit ✕ (40px + gap + 40px). */
.truck-overlay.is-countdown .truck-corner-ne,
.truck-overlay.is-playing .truck-corner-ne {
    right: calc(env(safe-area-inset-right, 0px) + 6.3rem);
    background: #ff7a1c;
    border-color: #7c2d12;
    color: #ffffff;
    font-style: italic;
}

.truck-overlay.is-countdown .truck-corner-ne::before,
.truck-overlay.is-playing .truck-corner-ne::before {
    content: "LAP";
    margin-right: 0.3rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    opacity: 0.9;
}

.truck-rule-banner {
    display: contents;
}

.truck-progress {
    display: none;
}

.truck-overlay.is-countdown .truck-rule-banner,
.truck-overlay.is-playing .truck-rule-banner {
    position: absolute;
    left: 50%;
    top: calc(env(safe-area-inset-top, 0px) + 3.55rem);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: min(20rem, calc(100% - 2rem));
    pointer-events: none;
}

.truck-overlay.is-countdown .truck-corner-rule,
.truck-overlay.is-playing .truck-corner-rule {
    position: relative;
    display: block;
    padding: 0.25rem 1.5rem 0.3rem;
    border: 0;
    border-radius: 0.3rem;
    background: #5b21b6;
    color: #ffffff;
    /* The question ("12 ÷ 3", "108 ÷ 9") must fit one line at 320 px. */
    font-size: clamp(1.5rem, 8vw, 2.3rem);
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0.02em;
    white-space: nowrap;
    max-width: 100%;
    text-transform: uppercase;
    text-shadow: 0 3px 0 #2e1065;
    transform: skewX(-12deg);
    box-shadow: 0.45rem 0.35rem 0 #7c3aed, 0 8px 16px rgba(46, 16, 101, 0.35);
}

.truck-overlay.is-countdown .truck-progress,
.truck-overlay.is-playing .truck-progress {
    display: block;
    width: 78%;
    height: 0.55rem;
    border: 2px solid #0e7490;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    overflow: hidden;
    transform: skewX(-12deg);
}

/* Landscape phones: the question sits in the top-left corner, so the gate signs
   can use the whole height of the short screen (hudClearPx only counts HUD over
   the middle of the stage). */
@media (orientation: landscape) and (max-height: 600px) {
    .truck-overlay.is-countdown .truck-rule-banner,
    .truck-overlay.is-playing .truck-rule-banner {
        left: calc(env(safe-area-inset-left, 0px) + 0.7rem);
        top: calc(env(safe-area-inset-top, 0px) + 3.4rem);
        transform: none;
        width: min(15rem, 27%);
        align-items: flex-start;
    }

    .truck-overlay.is-countdown .truck-corner-rule,
    .truck-overlay.is-playing .truck-corner-rule {
        font-size: clamp(1.3rem, 4vw, 2rem);
        padding: 0.2rem 1rem 0.25rem;
    }
}

.truck-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #22d3ee, #06b6d4);
    transition: width 0.3s ease;
}

.truck-overlay.is-countdown .muncher-countdown,
.truck-overlay.is-playing .muncher-countdown {
    border-radius: 0;
    background: rgba(91, 33, 182, 0.12);
    color: #ffffff;
    font-style: italic;
    -webkit-text-stroke: 4px #5b21b6;
    paint-order: stroke fill;
    text-shadow: 0 8px 0 #7c3aed;
}

.truck-overlay.is-countdown #truckHint,
.truck-overlay.is-playing #truckHint {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.6rem);
    background: rgba(91, 33, 182, 0.85);
}

/* Edge to edge, the 12% chomp zoom would crop the HUD; the smash flash replaces it. */
.truck-overlay.is-playing .truck-board-wrap.is-good {
    animation: none;
}

.truck-overlay.is-playing .truck-board-wrap.is-good::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #fff7ed;
    pointer-events: none;
    animation: truck-toy-flash 0.3s ease-out forwards;
}

@keyframes truck-toy-flash {
    from { opacity: 0.45; }
    to { opacity: 0; }
}

body.orb-open {
    overflow: hidden;
}

.orb-overlay {
    padding: 0.14rem;
}

.orb-overlay,
.orb-overlay * {
    touch-action: none;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.orb-shell {
    width: 100%;
    max-width: none;
    padding: 0.22rem 0.22rem 0;
    gap: 0.18rem;
    border-width: 3px;
}

.orb-overlay .muncher-title-icon {
    width: 1.7rem;
    height: 1.7rem;
}

.orb-overlay .muncher-stat-chip {
    min-height: 1.7rem;
    padding: 0.06rem 0.36rem;
    font-size: 0.82rem;
}

.orb-overlay .muncher-hint-btn {
    min-height: 2.05rem;
    padding: 0.16rem 0.5rem 0.18rem;
    font-size: 0.86rem;
    box-shadow: 0 2px 0 #92400e, 0 4px 8px rgba(146, 64, 14, 0.2);
}

.orb-overlay .muncher-rule-card,
.orb-rule-rail {
    padding: 0.1rem 0.35rem 0.1rem 0.5rem;
    border-width: 2px;
    box-shadow: 0 2px 0 var(--muncher-brown-edge);
    gap: 0.25rem 0.4rem;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.orb-overlay .muncher-rule-label {
    display: none;
}

.orb-overlay .muncher-rule-card strong,
.orb-overlay .orb-rule-rail #orbRuleText {
    text-transform: none;
    font-size: 1.02rem;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.orb-score-rail {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    flex-shrink: 0;
}

.orb-balls {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    margin-right: 0.08rem;
}

.orb-ball-icon {
    width: 0.78rem;
    height: 0.78rem;
    border-radius: 50%;
    border: 2px solid #1e293b;
    background: radial-gradient(circle at 32% 28%, #fffbeb 0%, #fde68a 55%, #f59e0b 100%);
    box-shadow: 0 1px 0 #92400e;
    flex: 0 0 auto;
}

.orb-ball-icon.is-lost {
    background: radial-gradient(circle at 40% 40%, #cbd5e1 0%, #64748b 70%);
    box-shadow: none;
    opacity: 0.42;
}

.orb-score-chip {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 0.28rem;
    padding: 0.1rem 0.5rem 0.12rem;
    border-radius: 999px;
    background: #fff4c4;
    border: 2px solid #f0c84a;
    font-size: 0.7rem;
    font-weight: 800;
    color: #7a4a10;
}

/* Wrong-answer cost floats up off the Score chip. */
.orb-penalty-pop {
    position: absolute;
    right: -0.2rem;
    top: 100%;
    font-size: 1rem;
    font-weight: 800;
    color: #dc2626;
    pointer-events: none;
    animation: orb-penalty-pop 0.9s ease-out forwards;
}
@keyframes orb-penalty-pop {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(0.9rem); }
}

/* Miss card sits in the empty band above the backboard (the camera never shows
   the ball there), so it hides neither the ball's drop lane nor the flippers.
   Taps fall through to flip. */
.orb-board-wrap > .arcade-miss-card {
    top: 0.4rem;
    bottom: auto;
    width: min(94%, 22rem);
    padding: 0.35rem 0.7rem 0.4rem;
    pointer-events: none;
}
.orb-board-wrap > .arcade-miss-card .arcade-miss-title { font-size: 1.05rem; }
.orb-board-wrap > .arcade-miss-card .arcade-miss-text { font-size: 0.9rem; line-height: 1.22; }
@media (prefers-reduced-motion: reduce) {
    .orb-penalty-pop { animation: none; opacity: 0; }
}

.orb-best-chip {
    font-size: 0.78rem;
    font-weight: 800;
    color: #5c4a2a;
    white-space: nowrap;
}

.orb-mult-chip {
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    background: #ffe08a;
    border: 2px solid #e6b422;
    font-size: 0.85rem;
    font-weight: 900;
    color: #9a4a00;
}

.orb-idle-best {
    margin: 0.15rem 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #7a4a10;
}

.orb-board-wrap {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    outline: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: none;
    background: #1e1b4b;
    border: 2px solid var(--muncher-gold-deep);
    border-radius: 0.55rem;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.18);
}

.orb-board-wrap.is-good {
    animation: muncher-chomp 0.35s ease;
}

.orb-board-wrap.is-hurt {
    animation: muncher-shake 0.4s ease;
}

.orb-stage,
.orb-fallback {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: none;
    touch-action: none;
}

.orb-overlay.is-webgl-stage .orb-stage {
    display: block;
    position: absolute;
    inset: 0;
}

.orb-overlay.is-webgl-stage.is-idle .orb-stage {
    display: none;
}

.orb-overlay.is-dom-stage.is-countdown .orb-fallback,
.orb-overlay.is-dom-stage.is-playing .orb-fallback,
.orb-overlay.is-dom-stage.is-gameover .orb-fallback {
    display: block;
    position: absolute;
    inset: 0;
}

.orb-overlay.is-webgl-stage.is-countdown .orb-fallback,
.orb-overlay.is-webgl-stage.is-playing .orb-fallback,
.orb-overlay.is-webgl-stage.is-gameover .orb-fallback {
    display: none !important;
}

.orb-flip-guides {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    pointer-events: none;
}

.orb-overlay.is-countdown .orb-flip-guides,
.orb-overlay.is-playing .orb-flip-guides {
    display: block;
}

.orb-side-btn {
    pointer-events: auto;
    position: absolute;
    bottom: 17%;
    width: 2.65rem;
    height: 2.65rem;
    padding: 0.2rem;
    border-radius: 50%;
    border: 3px solid #1e293b;
    background: linear-gradient(180deg, #d1d5db 0%, #6b7280 42%, #1f2937 100%);
    box-shadow: 0 4px 0 #111827, inset 0 2px 0 rgba(255, 255, 255, 0.35);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.orb-side-btn-left {
    left: 0.16rem;
}

.orb-side-btn-right {
    right: 0.16rem;
}

.orb-side-btn-cap {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #1e293b;
    background: radial-gradient(circle at 32% 28%, #fecaca 0%, #dc2626 55%, #7f1d1d 100%);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}

.orb-side-btn.is-down,
.orb-side-btn:active,
.orb-side-btn.is-pressed {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #111827, inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.orb-side-btn.is-down .orb-side-btn-cap,
.orb-side-btn:active .orb-side-btn-cap,
.orb-side-btn.is-pressed .orb-side-btn-cap {
    background: radial-gradient(circle at 40% 40%, #f87171 0%, #b91c1c 60%, #7f1d1d 100%);
}

.orb-overlay .muncher-rule-card strong.orb-score-num,
.orb-overlay .orb-score-num,
.orb-rule-rail .orb-score-num {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    z-index: 1;
    min-width: 1.6rem;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #c05614;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.65rem;
    line-height: 1;
    display: inline;
    pointer-events: none;
    box-shadow: none;
    flex: 0 0 auto;
    text-align: center;
}

.orb-idle-hero {
    width: 5.2rem;
    height: 5.2rem;
}

.orb-idle-hero .orb-idle-svg,
.orb-idle-hero .arcade-game-mark {
    width: 100%;
    height: 100%;
    display: block;
}

.orb-overlay.is-idle .muncher-hud,
.orb-overlay.is-idle .muncher-rule-card {
    display: none;
}

@media (max-width: 600px) {
    .orb-overlay {
        padding: 0.08rem;
    }
    .orb-shell {
        padding: 0.16rem 0.14rem 0;
        gap: 0.12rem;
        border-width: 3px;
    }
}

@media (max-width: 390px) {
    .orb-shell .muncher-title-row h2 {
        max-width: 5.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .muncher-board-wrap.is-chomping .muncher-avatar-wrap,
    .muncher-board-wrap.is-hurt,
    .painter-board-wrap.is-good,
    .painter-board-wrap.is-hurt,
    .bridge-board-wrap.is-good,
    .bridge-board-wrap.is-hurt,
    .truck-board-wrap.is-good,
    .truck-board-wrap.is-hurt,
    .orb-board-wrap.is-good,
    .orb-board-wrap.is-hurt,
    .truck-fallback-junk.is-crush,
    .truck-fallback-hero.is-bounce {
        animation: none;
    }
    .truck-overlay.is-playing .truck-board-wrap.is-good::after {
        display: none;
    }
    .muncher-countdown {
        text-shadow: none;
    }
}

/* Daily practice meter (Play) + month calendar (Stats) */
.daily-practice-meter {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0;
    padding: 0.55rem 0.7rem 0.15rem;
    border-top: 1px solid var(--border-light);
}

.daily-practice-meter.hidden { display: none; }

.dpm-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.dpm-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.dpm-label {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.daily-practice-meter.is-done .dpm-label {
    color: var(--theme-primary-dark);
}

.dpm-track {
    height: 0.45rem;
    background: var(--bg-card-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.dpm-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color-gold), #fbbf24);
    border-radius: var(--radius-full);
    transition: width 0.25s ease;
}

.daily-practice-meter.is-done .dpm-fill {
    background: linear-gradient(90deg, var(--theme-primary), #34d399);
}

.practice-calendar-card {
    margin-bottom: 1.25rem;
}

.practice-cal-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.practice-cal-nav strong {
    min-width: 9.5rem;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 0.95rem;
}

.practice-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
}

.practice-cal-wd {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 0.15rem 0;
}

.practice-cal-cell {
    position: relative;
    min-height: 2.6rem;
    border-radius: 0.7rem;
    background: var(--bg-card-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.82rem;
}

.practice-cal-cell.is-pad {
    background: transparent;
    min-height: 0;
}

.practice-cal-cell.is-today {
    outline: 2px solid var(--theme-primary);
    outline-offset: 0;
    background: var(--theme-primary-light);
    color: var(--theme-primary-dark);
}

.practice-cal-cell.is-stamped {
    background: var(--color-gold-light);
    color: #92400e;
}

.practice-cal-cell.is-stamped.is-today {
    background: #fef3c7;
}

.practice-cal-star {
    font-size: 0.85rem;
    line-height: 1;
}

.practice-cal-stamps {
    display: flex;
    gap: 0.1rem;
    line-height: 1;
}

.practice-cal-stamps .practice-cal-star {
    font-size: 0.68rem;
}

.quest-dual-streak {
    margin: 0.2rem 0 0;
}

.quest-today-meter + .quest-today-meter {
    margin-top: 0.5rem;
}

.practice-cal-legend {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

@media (max-width: 640px) {
    .daily-practice-meter {
        padding-left: 0.15rem;
        padding-right: 0.15rem;
    }
    .practice-cal-cell {
        min-height: 2.25rem;
        font-size: 0.75rem;
        border-radius: 0.5rem;
    }
    .practice-cal-nav {
        width: 100%;
        justify-content: space-between;
    }
}

.daily-streak-pill {
    color: #0369a1;
    background: #e0f2fe;
    border-color: #7dd3fc;
}

.daily-streak-pill .header-cal-icon {
    color: #0f172a;
}

/* SHEET-03: the calendar tile + days-in-a-row count moved off the top bar onto the Quest Chart card. */
.quest-days-pill {
    flex: 0 0 auto;
    min-height: 44px;
}

.practice-cal-cell.is-rest {
    background: #f8fafc;
    color: var(--text-muted);
}

.practice-cal-cell.is-rest.is-stamped {
    background: var(--color-gold-light);
    color: #92400e;
}

.practice-cal-rest {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.practice-cal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.65rem;
}

.practice-cal-footer .practice-cal-legend {
    margin: 0;
    flex: 1;
}

.practice-cal-grid.is-parent {
    margin-top: 0.85rem;
}

.daily-rest-day-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.daily-rest-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.55rem;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: #fff;
    cursor: pointer;
}

.daily-rest-chip:has(input:checked) {
    border-color: var(--theme-primary);
    background: var(--theme-primary-light);
    color: var(--theme-primary-dark);
}

.daily-rest-chip input {
    accent-color: var(--theme-primary);
}

.settings-help-text {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.fridge-cal-print {
    position: absolute;
    left: -10000px;
    top: 0;
    width: 800px;
    background: #fff;
    color: #0f172a;
}

.fridge-cal-kicker {
    font-family: var(--font-heading);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0 0 0.25rem;
}

.fridge-cal-print h1,
.fridge-cal-print h2 {
    font-family: var(--font-heading);
    margin: 0 0 0.35rem;
    color: #0f172a;
}

/* The kid's name: an h2 (the page's h1 is the intro) at the old h1 size. */
.fridge-cal-print .fridge-cal-name {
    font-size: 2em;
}

.fridge-cal-note {
    margin: 0 0 0.85rem;
    color: #475569;
}

/* Wave 5 Compare / Bonds / Equal Groups */
.compare-visual-mount,
.bonds-visual-mount,
.groups-visual-mount {
    width: 100%;
    display: flex;
    justify-content: center;
}

.compare-two-sets,
.compare-numerals-row,
.compare-symbol-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.compare-set-card {
    background: #ffffff;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.65rem;
    min-width: 6.5rem;
}

/* Both boxes the same size: a box that grows with its count answered
   "which has more?" before a kid counted. */
.compare-two-sets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 9rem));
    align-items: stretch;
}

.compare-two-sets .compare-set-card {
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.compare-two-sets .compare-set-emoji-grid {
    flex: 1;
    align-content: center;
    justify-content: center;
}

.compare-set-label {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 0.25rem;
}

.compare-set-emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    justify-content: center;
    max-width: 7rem;
}

.compare-numeral {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    font-weight: 800;
    min-width: 3rem;
    text-align: center;
}

.compare-symbol-gap {
    font-size: 2rem;
    font-weight: 800;
    color: var(--theme-primary);
}

.bond-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    /* Fill the Learn card like tenFrame — not 3.25rem-circle postage stamps (~41% of 18rem). */
    width: min(100%, 14rem);
    max-width: 100%;
    box-sizing: border-box;
    container-type: inline-size;
}

.bond-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.55rem, 6cqi, 1.1rem);
    flex-wrap: wrap;
    width: 100%;
}

.bond-link-bar {
    width: 2px;
    height: 0.55rem;
    background: var(--border-medium);
    border-radius: 1px;
}

.bond-link-bar.wide {
    width: min(85cqi, 12rem);
    height: 2px;
}

.bond-circle {
    /* Two-part row: ~5.5rem circles fill ~14rem like scaled coins / tenFrame. */
    min-width: clamp(3.5rem, 38cqi, 5.75rem);
    min-height: clamp(3.5rem, 38cqi, 5.75rem);
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 2.5px solid var(--theme-primary);
    background: #ffffff;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 14cqi, 2.5rem);
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Three-part row: shrink so three circles still fit the 14rem diagram. */
.bond-row.is-three .bond-circle {
    min-width: clamp(2.75rem, 28cqi, 4.15rem);
    min-height: clamp(2.75rem, 28cqi, 4.15rem);
    font-size: clamp(1.35rem, 11cqi, 2rem);
}

.bond-circle.bond-whole {
    background: var(--theme-primary-light);
    border-color: var(--theme-primary-dark);
}

.bond-circle.bond-missing {
    color: #64748b;
    border-style: dashed;
    background: var(--bg-card-secondary);
}

.bond-ten-frame {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.45rem;
    padding: 0.55rem;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: #ffffff;
    /* Fill the Learn card like unitGrid — not a 1.35rem-dot shrink-wrap stamp. */
    width: min(100%, 14rem);
    max-width: 100%;
    box-sizing: border-box;
}

.bond-ten-dot {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
    border-radius: 999px;
    border: 2px solid var(--border-medium);
    background: #f8fafc;
}

.bond-ten-dot.filled {
    background: var(--theme-primary);
    border-color: var(--theme-primary-dark);
}

.groups-visual-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.groups-baskets {
    justify-content: center;
}

.groups-basket-card {
    padding: 0.45rem 0.5rem;
}

/* Filled baskets hold a handful of items: keep them big enough to count
   (2 frogs a basket rendered at ~8px in a four-basket row), but a full row
   (--per-row tokens, set by buildGroupsSkillVisual, plus gaps of at most
   0.4rem) always fits inside the card: 26cqi a token put 5 flowers over the
   border, so "groups of 5" read as groups of 4 (#1770). */
.groups-basket-card:not(.groups-basket-empty) .bucket-item-emoji {
    --tok: min(1.9rem, calc((100cqi - (var(--per-row, 5) - 1) * 0.4rem) / var(--per-row, 5)));
    width: var(--tok);
    height: var(--tok);
    font-size: calc(var(--tok) * 0.87);
}

.groups-pile {
    display: grid;
    gap: 0.45rem;
    /* Fill the Learn card like .groups-array-grid — not 1.35rem-cell shrink-wrap stamps. */
    width: min(100%, 14rem);
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
    justify-items: center;
    container-type: inline-size;
}

.groups-pile .bucket-item-emoji {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
    font-size: clamp(1.25rem, 12cqi, 2.5rem);
    line-height: 1;
}

.groups-basket-empty {
    min-width: 4.5rem;
    min-height: 4.5rem;
}

.groups-basket-empty .bucket-items-grid {
    min-height: 2.25rem;
    min-width: 2.25rem;
}

.groups-array-grid {
    display: grid;
    /* Square cells sized by the columns (fill the Learn card like tenFrame / unitGrid, not a 1.25rem-emoji stamp) AND
       by the rows (--rows / --cols set by buildGroupsSkillVisual): sized by the columns alone, a 4 × 2 array drew
       ~6.5rem rows and pushed the keypad's 0 row and Submit under a 390 × 844 screen (#2059). The picture keeps to
       --array-h of the screen's height, never shrinking a dot under 1.2rem. */
    --array-gap: 0.35rem;
    --array-pad: 0.55rem;
    --array-h: clamp(7.5rem, 18svh, 14rem);
    --array-cell: max(1.2rem, min(
        calc((14rem - 2 * var(--array-pad) - 4px - (var(--cols, 3) - 1) * var(--array-gap)) / var(--cols, 3)),
        calc((var(--array-h) - 2 * var(--array-pad) - 4px - (var(--rows, 2) - 1) * var(--array-gap)) / var(--rows, 2))));
    grid-template-columns: repeat(var(--cols, 3), var(--array-cell));
    gap: var(--array-gap);
    padding: var(--array-pad);
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: #ffffff;
    /* The box hugs the dots: at most 14rem wide (the column cap), narrower when the rows set the size. */
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
}

.groups-array-dot {
    width: var(--array-cell);
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(0.95rem, calc(var(--array-cell) * 0.72), 2.5rem);
    line-height: 1;
    text-align: center;
}

.groups-repeated-add {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 800;
}

.groups-visual-caption {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.op-badge-compare { background: #e0f2fe; color: #0369a1; }
.fill-compare { background: #0284c7; }
.op-badge-bonds { background: #ede9fe; color: #6d28d9; }
.fill-bonds { background: #7c3aed; }
.op-badge-groups { background: #fce7f3; color: #9d174d; }
.fill-groups { background: #db2777; }

/* =============================================================================
   FRIENDS BOARD — one chalkboard, sibling + neighbor effort
   ============================================================================= */

.friends-board-card {
    max-width: 28rem;
    width: 96%;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.friends-board-frame {
    background: #3f6b3a;
    border: 4px solid #1e293b;
    border-radius: 18px;
    box-shadow: 0 10px 0 #2a4a28, 0 16px 28px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}

.friends-board-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.85rem 0.9rem 0.55rem;
    border-bottom: 3px solid #1e293b;
    background: #355832;
}

.friends-board-title-group {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}

.friends-board-icon {
    font-size: 1.45rem;
    line-height: 1;
}

.friends-board-header .modal-title {
    color: #f4f1e0;
    margin: 0;
}

.friends-board-header .modal-subtitle {
    color: #d7e3c4;
    margin: 0.15rem 0 0;
}

.friends-board-header .mq-close-x {
    flex-shrink: 0;
}

.friends-board-body {
    padding: 0.75rem 0.75rem 0.4rem;
    max-height: min(68vh, 560px);
    overflow-y: auto;
}

.friends-board-rows {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.friends-board-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.55rem 0.55rem 0.45rem;
    background: #f4f1e0;
    border: 3px solid #1e293b;
    border-radius: 16px;
}

.friends-board-doll {
    flex: 0 0 4.4rem;
    width: 4.4rem;
    height: 5.1rem;
    border: 3px solid #1e293b;
    border-radius: 14px;
    background: #fffaf1;
    overflow: hidden;
}

.friends-board-doll .profile-portrait,
.friends-board-doll .profile-portrait-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.friends-board-doll .profile-portrait-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2rem;
}

.friends-board-row-main {
    flex: 1;
    min-width: 0;
}

/* Same-device kids: an ink picture of their world is the World button. */
.friends-board-world {
    flex: 0 0 4.6rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.2rem 0.2rem 0.25rem;
    background: #fffaf1;
    border: 3px solid #1e293b;
    border-radius: 14px;
    box-shadow: 0 3px 0 #1e293b;
    color: #1e293b;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}
.friends-board-world:active,
.friends-board-world.is-pressed { transform: translateY(2px); box-shadow: 0 1px 0 #1e293b; }
.friends-board-world-thumb {
    display: block;
    height: 3.3rem;
    border: 2px solid #1e293b;
    border-radius: 9px;
    background: #a9d08e;
    overflow: hidden;
}
.friends-board-world-thumb svg { display: block; width: 100%; height: 100%; }
.friends-board-world-label { text-align: center; white-space: nowrap; }

.friends-board-name {
    margin: 0 0 0.35rem;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.15;
}

.friends-board-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.friends-board-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.18rem 0.4rem;
    border: 2px solid #1e293b;
    border-radius: 999px;
    background: #fffaf1;
    font-size: 0.72rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.1;
}

.friends-board-stat-ico {
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
}

.friends-board-stat-ico .coin-svg {
    width: 0.95em;
    height: 0.95em;
}

.friends-board-remove {
    flex: 0 0 auto;
    min-width: 3.4rem;
    min-height: 3.4rem;
    padding: 0.35rem 0.45rem;
    border: 3px solid #1e293b;
    border-radius: 14px;
    background: #f2bccb;
    color: #1e293b;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.friends-board-remove[hidden],
.friends-board-remove.hidden,
.friends-board-confirm.hidden {
    display: none;
}

.friends-board-row-pending-in,
.friends-board-row-pending-out,
.friends-board-row-friend {
    flex-wrap: wrap;
    align-items: flex-start;
}

.friends-board-pending-lbl {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #475569;
}

.friends-board-waiting {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0.2rem 0.65rem;
    border: 2px solid #1e293b;
    border-radius: 999px;
    background: #f6c453;
    color: #1e293b;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 800;
}

.friends-board-thumbs {
    --house-pill-height: 3.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.35rem;
}

.friends-board-thumb-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.friends-board-confirm {
    flex: 1 0 100%;
    margin-top: 0.35rem;
    padding: 0.45rem 0.5rem 0.55rem;
    border: 3px solid #1e293b;
    border-radius: 14px;
    background: #fffaf1;
}

.friends-board-confirm-copy {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
}

.friends-board-add {
    margin-top: 0.85rem;
    padding: 0.7rem 0.65rem 0.75rem;
    background: #2f542c;
    border: 3px solid #1e293b;
    border-radius: 16px;
}

.friends-board-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}

.friends-board-share-lbl,
.friends-board-add-lbl {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 800;
    color: #f4f1e0;
}

.friends-board-code {
    padding: 0.28rem 0.5rem;
    border: 2px solid #1e293b;
    border-radius: 10px;
    background: #f4f1e0;
    color: #1e293b;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.friends-board-add-lbl {
    display: block;
    margin-bottom: 0.35rem;
}

.friends-board-add-row {
    display: flex;
    gap: 0.45rem;
}

.friends-board-code-input {
    flex: 1;
    min-width: 0;
    min-height: 3.1rem;
    padding: 0.55rem 0.7rem;
    border: 3px solid #1e293b;
    border-radius: 14px;
    background: #fffaf1;
    color: #1e293b;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
}

.friends-board-thumb {
    box-sizing: border-box;
    min-height: var(--house-pill-height, 3.25rem);
    min-width: 4.4rem;
    padding: 0.45rem 0.75rem;
    border: 2.5px solid #1e293b;
    border-radius: 14px;
    color: #1e293b;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 0 #1e293b;
}

.friends-board-thumb:active,
.friends-board-thumb.is-pressed {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #1e293b;
}

.friends-board-thumb-knock {
    background: #f6c453;
}

.friends-board-thumb-copy {
    min-width: 3.6rem;
    background: #99f6e4;
}

.friends-board-thumb-close {
    width: 100%;
    background: #f4f1e0;
}

/* House-pill fills live on modifiers only. Do not put cream on the shared
   .friends-board-thumb base — same specificity would paint Accept cream. */
.friends-board-thumb.friends-board-thumb-accept,
.friends-board-thumb.friends-board-thumb-decline,
.friends-board-thumb.friends-board-thumb-confirm,
.friends-board-thumb.friends-board-thumb-keep {
    flex: 1;
    height: var(--house-pill-height, 3.25rem);
    min-height: var(--house-pill-height, 3.25rem);
    min-width: 6.2rem;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 2.5px solid #1e293b;
    color: #1e293b;
}

.friends-board-thumb.friends-board-thumb-accept,
.friends-board-thumb.house-pill-store-room,
.friends-board-thumb.friends-board-thumb-confirm {
    background: #86efac;
}

.friends-board-thumb.friends-board-thumb-decline,
.friends-board-thumb.house-pill-pet {
    background: #f2bccb;
}

.friends-board-thumb.friends-board-thumb-keep,
.friends-board-thumb.house-pill-store-wall {
    background: #fde68a;
}

.friends-board-status {
    margin-top: 0.45rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #f4f1e0;
}

.friends-board-status.error {
    color: #fecaca;
}

.friends-board-footer {
    padding: 0.55rem 0.75rem 0.8rem;
}

.friends-board-empty {
    padding: 0.9rem 0.6rem;
    text-align: center;
    color: #f4f1e0;
    font-weight: 700;
}

/* ==========================================================================
   Shared Learn Hint page chrome (Number Blocks, Strategies, mul/div, visuals)
   Header: red ✕ far left, equation right, optional controls. Bodies below.
   ========================================================================== */

.hint-page-overlay,
.number-blocks-overlay,
.strategy-hints-overlay,
.mul-div-hints-overlay,
.visual-hints-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 8500;
    display: block;
    overflow: hidden;
    background: transparent;
    color: #1e293b;
    touch-action: auto;
    -webkit-user-select: none;
    user-select: none;
}

.hint-page-overlay.hidden,
.hint-page-overlay[hidden],
.number-blocks-overlay.hidden,
.number-blocks-overlay[hidden],
.strategy-hints-overlay.hidden,
.strategy-hints-overlay[hidden],
.mul-div-hints-overlay.hidden,
.mul-div-hints-overlay[hidden],
.visual-hints-overlay.hidden,
.visual-hints-overlay[hidden] {
    display: none;
}

body.hint-page-open,
body.number-blocks-open,
body.strategy-hints-open,
body.mul-div-hints-open,
body.visual-hints-open {
    overflow: hidden;
}

body.hint-page-open .kid-tab-bar,
body.hint-page-open .app-header,
body.number-blocks-open .kid-tab-bar,
body.number-blocks-open .app-header,
body.strategy-hints-open .kid-tab-bar,
body.strategy-hints-open .app-header,
body.mul-div-hints-open .kid-tab-bar,
body.mul-div-hints-open .app-header,
body.visual-hints-open .kid-tab-bar,
body.visual-hints-open .app-header {
    visibility: hidden;
}

.hint-page-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(15, 23, 42, 0.38);
    opacity: 0;
    pointer-events: auto;
    transition: opacity 280ms ease;
}

.hint-page-overlay.is-open .hint-page-scrim {
    opacity: 1;
}

.hint-page-edge-grab {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    z-index: 2;
    pointer-events: auto;
    cursor: grab;
}

.hint-page-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.9rem;
    pointer-events: auto;
    touch-action: pan-x;
    cursor: grab;
}

.hint-page-handle::after {
    content: '';
    width: 0.38rem;
    height: 2.6rem;
    border-radius: 999px;
    background: #94a3b8;
}

.hint-page-shell,
.nb-shell,
.mdh-shell,
.vh-shell {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: auto;
    height: auto;
    min-height: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
    background: #f8f4ec;
    border-radius: 1.15rem 0 0 1.15rem;
    box-shadow: -8px 0 28px rgba(15, 23, 42, 0.16);
    transform: translateX(105%);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hint-page-overlay.is-open .hint-page-shell,
.hint-page-overlay.is-open .nb-shell,
.hint-page-overlay.is-open .mdh-shell,
.hint-page-overlay.is-open .vh-shell {
    transform: translateX(0);
}

.hint-page-overlay.is-dragging .hint-page-shell,
.hint-page-overlay.is-dragging .nb-shell,
.hint-page-overlay.is-dragging .mdh-shell,
.hint-page-overlay.is-dragging .vh-shell {
    transition: none;
}

.hint-page-overlay.is-dismissing .hint-page-shell,
.hint-page-overlay.is-dismissing .nb-shell,
.hint-page-overlay.is-dismissing .mdh-shell,
.hint-page-overlay.is-dismissing .vh-shell {
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hint-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem 0.45rem;
    flex-shrink: 0;
    touch-action: pan-x;
}

.hint-page-edge-grab,
.hint-page-handle,
.hint-page-scrim {
    touch-action: pan-x;
}

.hint-page-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
    min-width: 0;
    flex: 0 1 auto;
}

.hint-page-eq-wrap {
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
}

.hint-page-kicker {
    margin: 0;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-primary-dark, #059669);
}

.hint-page-equation {
    margin: 0.1rem 0 0;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: clamp(1.45rem, 6vw, 2.1rem);
    font-weight: 700;
    line-height: 1.15;
    color: #1e293b;
}

.hint-page-equation.hidden,
.hint-page-equation[hidden] {
    display: none;
}

.hint-page-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* .hint-page-close / .nb-close-btn visuals live on the shared .mq-close-x rule */

/* ==========================================================================
   Number Blocks body (spawn shelf + work board)
   ========================================================================== */

.nb-stage {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 0.55rem 0.35rem;
    gap: 0.35rem;
}

.nb-stage-row {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    gap: 0.45rem;
}

/* Soft coach line: answer-free nudge under the board, never in the header. */
.nb-coach {
    flex: 0 0 auto;
    margin: 0;
    text-align: center;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
    text-align: center;
    color: #334155;
}

.nb-coach[hidden],
.nb-coach.hidden {
    display: none;
}

.nb-shelf {
    width: 5.6rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    padding: 0.4rem 0.3rem;
    background: #e2e8f0;
    border: 3px solid #1e293b;
    border-radius: 0.85rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
    /* CSS contract: short landscape phones clip +100 / Clear / fuse below the
     * fold, so the shelf must keep overflow-y:auto AND allow a vertical pan.
     * pan-x alone (PR #1016) froze scrollTop under the finger. */
    touch-action: pan-x pan-y;
    cursor: grab;
}

.nb-shelf-label {
    margin: 0;
    text-align: center;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.nb-spawn-btn,
.nb-clear-btn,
.nb-fuse-btn {
    min-height: 44px;
    border: 3px solid #1e293b;
    border-radius: 0.7rem;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
    color: #1e293b;
    touch-action: manipulation;
}

.nb-spawn-btn {
    background: var(--theme-primary-light, #d1fae5);
}

/* Hundreds buttons are hidden for questions that never reach 100. */
.nb-shelf [hidden] {
    display: none !important;
}

.nb-spawn-btn.nb-spawn-five {
    background: #6ee7b7;
    background: color-mix(in srgb, var(--theme-primary-light, #d1fae5) 40%, var(--theme-primary, #10b981) 60%);
}

.nb-spawn-btn.nb-spawn-ten {
    background: var(--theme-primary, #10b981);
    color: #0f172a;
}

.nb-spawn-btn.nb-spawn-hundred {
    background: var(--theme-primary-dark, #059669);
    color: #fff;
}

.nb-clear-btn {
    background: #fecaca;
}

.nb-shelf-hint {
    margin: auto 0 0;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: #475569;
}

.nb-board-sum {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.35rem 0.65rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1e293b;
    background: #fde68a;
    border: 2.5px solid #1e293b;
    border-radius: 0.7rem;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}

.nb-board-sum.is-off {
    background: #e2e8f0;
    color: #475569;
}

.nb-submit-btn {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.35rem 0.65rem;
    min-height: 44px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: var(--theme-primary, #10b981);
    border: 2.5px solid #1e293b;
    border-radius: 0.7rem;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
}

/* An empty board has nothing to send: keep Submit visible but clearly off. */
.nb-submit-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.nb-submit-btn[hidden],
.nb-submit-btn.hidden {
    display: none;
}

.nb-board {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    align-self: stretch;
    overflow: hidden;
    background: #fffdf8;
    border: 3px solid #1e293b;
    border-radius: 0.85rem;
    touch-action: none;
}

.nb-board-label {
    position: absolute;
    top: 0.35rem;
    left: 0.5rem;
    margin: 0;
    z-index: 1;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #64748b;
    pointer-events: none;
}

.nb-grid {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 22px;
    bottom: 8px;
    z-index: 0;
    /* First-paint fill only. measureMat cols×rows then set width/height
       so the dotted cells and the interactive pack share one box. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.15' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-size: var(--nb-cell-w, var(--nb-cell, 28px)) var(--nb-cell-h, var(--nb-cell, 28px));
    background-position: 0 0;
    pointer-events: none;
}

.nb-pieces {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 22px;
    bottom: 8px;
    z-index: 3;
    pointer-events: auto;
    touch-action: none;
}

.nb-fly {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 22px;
    bottom: 8px;
    z-index: 4;
    pointer-events: none;
}

.nb-block {
    position: absolute;
    padding: 0;
    margin: 0;
    border: 3px solid #1e293b;
    border-radius: 0.28rem;
    box-sizing: border-box;
    z-index: 3;
    pointer-events: auto;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    cursor: grab;
}

.nb-block.is-dragging {
    cursor: grabbing;
    opacity: 0.92;
}

.nb-unit {
    background: var(--theme-primary-light, #d1fae5);
}

.nb-five {
    background: #6ee7b7;
    background: color-mix(in srgb, var(--theme-primary-light, #d1fae5) 40%, var(--theme-primary, #10b981) 60%);
}

.nb-rod {
    background: var(--theme-primary, #10b981);
}

.nb-flat {
    background: var(--theme-primary-dark, #059669);
}

/* Seeded operand groups keep the retired desk's bank colours so two piles
   read as two numbers. Tone c is the right-hand side of a true/false item. */
.nb-block.nb-tone-a.nb-unit {
    background: #bfdbfe;
}

.nb-block.nb-tone-a.nb-five {
    background: #93c5fd;
}

.nb-block.nb-tone-a.nb-rod {
    background: #60a5fa;
}

.nb-block.nb-tone-a.nb-flat {
    background: #3b82f6;
}

.nb-block.nb-tone-b.nb-unit {
    background: #fed7aa;
}

.nb-block.nb-tone-b.nb-five {
    background: #fdba74;
}

.nb-block.nb-tone-b.nb-rod {
    background: #fb923c;
}

.nb-block.nb-tone-b.nb-flat {
    background: #ea580c;
}

.nb-block.nb-tone-c.nb-unit {
    background: #e9d5ff;
}

.nb-block.nb-tone-c.nb-five {
    background: #d8b4fe;
}

.nb-block.nb-tone-c.nb-rod {
    background: #c084fc;
}

.nb-block.nb-tone-c.nb-flat {
    background: #9333ea;
}

.nb-seg {
    position: absolute;
    left: 2px;
    right: 2px;
    height: 0;
    border-top: 2px solid #1e293b;
    pointer-events: none;
}

.nb-seg-v {
    top: 2px;
    bottom: 2px;
    left: auto;
    right: auto;
    width: 0;
    height: auto;
    border-top: 0;
    border-left: 2px solid #1e293b;
}

.nb-badge {
    position: absolute;
    right: -0.45rem;
    top: -0.45rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.28rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fde68a;
    border: 2.5px solid #1e293b;
    border-radius: 999px;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    color: #1e293b;
    pointer-events: none;
}

.nb-shelf .nb-fuse-btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.28rem 0.22rem;
    background: #fde68a;
    font-size: 0.68rem;
    line-height: 1.15;
    white-space: normal;
}

.nb-fuse-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.nb-fuse-btn.hidden {
    display: none;
}

.nb-fly-one {
    position: absolute;
    background: var(--theme-primary-light, #d1fae5);
    border: 3px solid #1e293b;
    border-radius: 0.28rem;
    animation: nb-fly-fuse 0.42s ease-in forwards;
    pointer-events: none;
}

@keyframes nb-fly-fuse {
    to {
        transform: translate(var(--nb-dx, 0), var(--nb-dy, 0)) scale(0.35);
        opacity: 0;
    }
}

@media (min-width: 768px) {
    .nb-shelf {
        width: 6.6rem;
    }
    .nb-spawn-btn,
    .nb-clear-btn,
    .nb-shelf .nb-fuse-btn {
        font-size: 0.86rem;
    }
    .nb-coach {
        font-size: 1.02rem;
    }
    .nb-board-sum {
        font-size: 1.05rem;
        min-height: 48px;
        padding: 0.4rem 0.8rem;
    }
    .nb-submit-btn {
        font-size: 1.05rem;
        min-height: 48px;
        padding: 0.4rem 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nb-fly-one {
        animation: none;
        opacity: 0;
    }

    .hint-page-scrim,
    .hint-page-shell,
    .nb-shell,
    .mdh-shell,
    .vh-shell,
    .learn-sheet-scrim,
    #learnFocus.learn-sheet {
        transition: none;
    }
}

/* ==========================================================================
   Add/Sub Strategies Hint body (tabs + steps). Header is shared Hint chrome.
   ========================================================================== */

.sh-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.sh-tabs {
    display: flex;
    flex-shrink: 0;
    gap: 0.35rem;
    padding: 0.15rem 0.7rem 0.45rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sh-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0.4rem 0.45rem;
    border: 3px solid #1e293b;
    border-radius: 999px;
    background: #fff;
    color: #1e293b;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.15;
    text-wrap: balance;
    text-align: center;
    white-space: normal;
    touch-action: manipulation;
}

.sh-tab.active {
    background: var(--theme-primary, #10b981);
    color: #0f172a;
}

.sh-stage {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.65rem;
    padding: 0.15rem 0.75rem 1rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.sh-step {
    background: #fff;
    border: 3px solid #1e293b;
    border-radius: 1rem;
    padding: 0.7rem 0.85rem 0.85rem;
}

.sh-step-kicker {
    margin: 0 0 0.25rem;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

.sh-eq {
    margin: 0;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: clamp(1.7rem, 8vw, 2.55rem);
    font-weight: 700;
    line-height: 1.25;
    color: #1e293b;
}

.sh-num {
    display: inline-block;
    padding: 0 0.12em;
}

.sh-op {
    color: #334155;
}

.sh-hi {
    background: #fde68a;
    border-radius: 0.35rem;
}

.sh-ten {
    color: #047857;
}

.sh-answer {
    background: #bbf7d0;
    border: 3px solid #1e293b;
    border-radius: 0.45rem;
    padding: 0 0.18em;
}

.sh-underline {
    border-bottom: 4px solid #1e293b;
}

.sh-coach {
    margin: 0.45rem 0 0;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: #334155;
}

/* Div stage: the tab-specific sub-caption that separates "shared into 5
   groups" from "in groups of 5", plus the single label above a group grid. */
.sh-caption,
.sh-grid-cap {
    margin: 0.3rem 0 0;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    color: #475569;
}

.sh-grid-cap {
    margin: 0.5rem 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Fair share link line: N groups · Q in each · T in all. */
.sh-link {
    margin: 0.35rem 0 0;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1e293b;
}

.sh-empty {
    margin: auto 0;
    padding: 1.25rem 1rem;
    background: #e2e8f0;
    border: 3px solid #94a3b8;
    border-radius: 1rem;
    text-align: center;
    color: #64748b;
}

.sh-empty-title {
    margin: 0;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: #64748b;
}

.sh-empty-hint {
    margin: 0.35rem 0 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.sh-jumps {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.sh-jump-box {
    position: relative;
    width: 72px;
    height: 88px;
    flex-shrink: 0;
}

.sh-jump-ink {
    display: block;
    width: 72px;
    height: 88px;
}

.sh-jump-stack {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
}

.sh-jump-num {
    background: #fde68a;
    border-radius: 0.35rem;
    min-width: 1.15em;
    text-align: center;
}

.sh-jump-sum {
    flex: 1 1 auto;
    min-width: 8rem;
    background: #fff;
    border: 3px solid #1e293b;
    border-radius: 1rem;
    padding: 0.65rem 0.8rem;
}

.sh-hops {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
}

.sh-hop {
    min-width: 2.4rem;
    min-height: 2.4rem;
    padding: 0.25rem 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    align-items: center;
    justify-content: center;
    background: #fde68a;
    border: 3px solid #1e293b;
    border-radius: 0.55rem;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: clamp(1.05rem, 4.4vw, 1.45rem);
    font-weight: 700;
}

.sh-hop.sh-answer {
    background: #bbf7d0;
}

/* Hop counter under each chip: 1…n, so "7 hops" is readable off the picture. */
.sh-hop-n {
    font-size: 0.65em;
    font-weight: 700;
    opacity: 0.75;
    line-height: 1;
}

/* Equal groups must look equal: fixed equal tracks from --sh-cols (set by
   strategy-hints.js), never flex-grow on wrapped cards, so a short last row
   keeps the same card width. */
.sh-groups {
    display: grid;
    grid-template-columns: repeat(var(--sh-cols, 3), minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 0.45rem;
    margin: 0.55rem 0 0;
}

.sh-group {
    min-width: 0;
    background: #fffdf8;
    border: 3px solid #1e293b;
    border-radius: 0.75rem;
    padding: 0.4rem 0.45rem 0.5rem;
}

/* Rows of 5, independent of card width: 7 is always 5 + 2. */
.sh-dots {
    display: grid;
    grid-template-columns: repeat(5, max-content);
    gap: 0.28rem;
}

.sh-dot {
    width: clamp(0.7rem, 3.2vw, 1rem);
    height: clamp(0.7rem, 3.2vw, 1rem);
    border-radius: 999px;
    background: #fde68a;
    border: 2.5px solid #1e293b;
}

/* Labelled array: "3" down the side, "10" and "2" across the top. The label
   row is a sibling of .sh-array (not a wrapper) so the parts stay direct flex
   children and keep their var(--cols) proportions. */
.sh-array-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.2rem 0 0;
}

.sh-array-stack {
    flex: 1 1 auto;
    min-width: 0;
}

.sh-array-tops {
    display: flex;
    gap: 0.45rem;
}

.sh-array-tops .sh-array-label {
    flex: var(--cols, 1) 1 0;
    min-width: 0;
}

.sh-array-label {
    display: block;
    text-align: center;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: clamp(0.85rem, 3.4vw, 1.1rem);
    font-weight: 700;
    line-height: 1.15;
    color: #1e293b;
}

.sh-array {
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
    min-height: clamp(8rem, 32vh, 16rem);
}

/* Grow by column count so every cell is the same size across both parts.
   Cell spacing lives in cell margins (not grid gap) so content width is
   exactly cols × cell and the flex split stays proportional. */
.sh-array-part {
    flex: var(--cols, 1) 1 0;
    display: grid;
    grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr));
    min-width: 0;
    min-height: inherit;
    padding: calc(0.35rem - 1.5px);
    border: 3px solid #1e293b;
    border-radius: 0.75rem;
    background: #fff;
}

.sh-array-part.is-left {
    background: #ecfdf5;
}

.sh-array-part.is-right {
    background: #fffbeb;
}

.sh-array-cell {
    min-height: 0;
    margin: 1.5px;
    background: #fde68a;
    border: 2px solid #1e293b;
    border-radius: 0.18rem;
}

@media (max-width: 430px) {
    .learn-chip-label {
        font-size: 0.7rem;
    }
    .learn-mode-with-help .input-mode-chip,
    .learn-mode-with-help .equation-strategies-btn,
    .learn-mode-with-help #equationHelpBtn.help-icon-tenframe,
    .learn-mode-with-help #equationHelpBtn.help-icon-strategies {
        padding: 0.16rem 0.4rem;
        gap: 0.2rem;
    }
    .learn-mode-with-help #equationHelpBtn.help-chip-icon-only {
        padding: 0;
        gap: 0;
    }
    .sh-tab {
        font-size: 0.68rem;
        padding: 0.32rem 0.28rem;
    }
    .sh-stage {
        padding: 0.1rem 0.55rem 0.9rem;
    }
}

@media (min-width: 768px) {
    .sh-tabs {
        gap: 0.5rem;
        padding: 0.25rem 1.25rem 0.6rem;
    }
    .sh-tab {
        font-size: 0.95rem;
        min-height: 48px;
        padding: 0.5rem 0.7rem;
    }
    .sh-stage {
        gap: 0.85rem;
        padding: 0.35rem 1.4rem 1.4rem;
    }
    .sh-eq {
        font-size: clamp(2rem, 4.6vw, 3rem);
    }
    .sh-step {
        padding: 0.9rem 1.05rem 1rem;
    }
    .sh-array {
        min-height: clamp(12rem, 38vh, 22rem);
    }
    .sh-hop {
        min-width: 3rem;
        min-height: 3rem;
        font-size: 1.45rem;
    }
    .sh-groups {
        grid-template-columns: repeat(var(--sh-cols-wide, var(--sh-cols, 4)), minmax(0, 1fr));
    }
    .buckets-model-wrapper {
        grid-template-columns: repeat(var(--cols-wide, var(--cols, 2)), minmax(0, 1fr));
        width: min(100%, calc(var(--cols-wide, var(--cols, 2)) * var(--bucket-card-max) + (var(--cols-wide, var(--cols, 2)) - 1) * var(--bucket-gap)));
    }
    .sh-dot {
        width: 1.05rem;
        height: 1.05rem;
    }
}

/* ==========================================================================
   Mul/div + remaining visual Hint body — existing models hosted in the
   shared Hint page stage (more room than the inline card).
   ========================================================================== */

.mdh-stage,
.vh-stage {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 0.55rem 0.75rem;
}

.visual-hints-overlay .hint-page-equation {
    font-size: clamp(1.05rem, 4.6vw, 1.65rem);
    max-width: min(100%, 22rem);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.mdh-stage .visual-models-section,
body.mul-div-hints-open .visual-models-section,
.vh-stage .visual-models-section,
body.visual-hints-open .visual-models-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: 0.55rem 0.45rem 0.85rem;
    border: 3px solid #1e293b;
    border-radius: 1rem;
    background: #fff;
    animation: none;
}

.mdh-stage .visual-models-toolbar,
.vh-stage .visual-models-toolbar {
    margin-bottom: 0.65rem;
}

.mdh-stage .vmodel-tabs,
.vh-stage .vmodel-tabs {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.mdh-stage .vmodel-tab,
.vh-stage .vmodel-tab {
    min-height: 44px;
}

.mdh-stage .visual-helper-container,
.vh-stage .visual-helper-container {
    flex: 1 1 auto;
    min-height: 14rem;
    align-items: stretch;
}

.mdh-stage .vmodel-pane,
.vh-stage .vmodel-pane {
    min-height: 14rem;
    align-items: center;
}

/* Phone-first Help piles (G7 / R10: pile + shares + caption on one screen).
   The Learn card keeps its 2.4rem tokens. In the Hint sheet the same tokens stack with
   N empty share boxes and a caption in one column, and the pile is capped at 14rem wide,
   so a big set towers: 1/4 of 20 wraps into 3 anti-leak columns = 7 rows = 303px of pile.
   Tokens therefore shrink with the ROW COUNT, not with the sheet width: app.js publishes
   --pile-rows, and --pile-token-cap spends a ~13rem glyph budget across those rows
   (0.45rem/row allows for the row gap). 1-3 row piles keep the full Learn-card glyph;
   only tall piles trade size for the fold. */
.vh-stage .fraction-share-pile,
.vh-stage .count-objects-grid {
    /* Fallback 3 = the tallest pile that still fits at full size, so stale markup
       (new CSS + cached app.js mid-rollout) keeps today's look. */
    --pile-rows: 3;
    --pile-budget: 13rem;
    --pile-token-cap: calc(var(--pile-budget) / var(--pile-rows) - 0.45rem);
}

.vh-stage .fraction-share-pile .fraction-group-item,
.vh-stage .count-objects-grid .count-object-token {
    /* clamp() collapses to the 1.05rem floor once the cap drops under it, so even an
       11-row 32-token pile stays readable instead of painting sub-1rem glyphs. */
    font-size: clamp(1.05rem, 15cqi, var(--pile-token-cap, 1.7rem));
}

.vh-stage .fraction-share-box {
    /* Empty boxes are the destination, not the content — they need not eat 3.25rem
       of the fold under the pile. Equal tracks still come from --shares (PR #1057). */
    min-height: 2.75rem;
}

/* ===== Recipe Rush (Overcooked-style top-down kitchen, landscape) ===== */
body.recipe-open {
    overflow: hidden;
}

/* Whole-screen takeover: the cabinet fills the phone edge to edge. */
.recipe-overlay {
    padding: 0.3rem;
}

.recipe-overlay .recipe-shell {
    width: 100%;
    max-width: none;
    padding: 0.35rem 0.45rem 0.35rem;
    gap: 0.3rem;
}

.recipe-header {
    min-height: 2.5rem;
}

.recipe-header .muncher-hint-btn {
    margin-left: auto;
}

/* Portrait phones: turn the whole cabinet sideways so play is always landscape. */
@media (orientation: portrait) {
    .recipe-overlay {
        padding: 0;
    }

    .recipe-overlay .recipe-shell {
        position: absolute;
        top: 50%;
        left: 50%;
        width: calc(100vh - 0.6rem);
        height: calc(100vw - 0.6rem);
        max-height: none;
        transform: translate(-50%, -50%) rotate(90deg);
        transform-origin: center center;
    }

    @supports (height: 100dvh) {
        .recipe-overlay .recipe-shell {
            width: calc(100dvh - 0.6rem);
            height: calc(100dvw - 0.6rem);
        }
    }
}

.recipe-board-wrap {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    background: #f5d0a9;
    border: 3px solid var(--muncher-gold-deep);
    border-radius: 1rem;
}

.recipe-board-wrap.is-good {
    animation: muncher-chomp 0.35s ease;
}

.recipe-board-wrap.is-hurt {
    animation: muncher-shake 0.4s ease;
}

/* The playfield keeps the kitchen's 16:9 box so DOM layers line up with the SVG. */
.recipe-field {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    overflow: visible;
}

/* Fit the 16:9 box inside the stage before JS sizes it (container units, modern browsers). */
@supports (width: 1cqh) {
    .recipe-board-wrap {
        container-type: size;
    }

    .recipe-field {
        width: min(100cqw, calc(100cqh * 16 / 9));
        height: auto;
    }
}

.recipe-kitchen {
    position: absolute;
    inset: 0;
}

.recipe-kitchen-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Recipe Rush 3D (default ON; ?recipeRush3d=0 forces ink). The canvas sits under the same DOM HUD;
   the ink kitchen host turns into a transparent hotspot layer for "tap a kid". */
.recipe-kitchen-3d {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: #f5d0a9;
}

.recipe-kitchen-3d.hidden {
    display: none;
}

.recipe-kitchen-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.recipe-field.is-3d .recipe-kitchen {
    z-index: 2;
    background: transparent;
    pointer-events: none;
}

.recipe-seat-hotspots {
    position: absolute;
    inset: 0;
}

/* while 3D kids hop between islands the DOM name tags (pinned to the old spots) fade out */
.recipe-field.is-3d.is-walking .recipe-seat-tag {
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* 3D: the math slip shrinks and hangs under the ticket rail over the back
   counter (scenery only), ending above the island tops (~28%) so the board,
   knife, stove, plates and the kids stay clear. The cabinet centres it on the
   active station with a 20% width. */
.recipe-field.is-3d .recipe-prompt {
    top: 23%;
    width: 14%;
    height: 8%;
}

.recipe-seat-hotspot {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    font: inherit;
}

.recipe-seat-hotspot:focus-visible {
    outline: 3px solid #facc15;
    outline-offset: 2px;
}

.recipe-seat-tag {
    display: inline-block;
    transform: translateY(45%);
    padding: 0.05em 0.55em;
    background: #fffbeb;
    border: 2px solid #1e293b;
    border-radius: 999px;
    color: #1e293b;
    font-family: var(--font-heading, Fredoka, sans-serif);
    font-size: clamp(0.5rem, 1.6cqw, 0.85rem);
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}

.recipe-seat-hotspot.is-active .recipe-seat-tag {
    background: #fde68a;
}

.recipe-seat-hotspot.is-solved .recipe-seat-tag {
    background: #bbf7d0;
}

.recipe-station .recipe-counter-top {
    transition: stroke-width 0.15s ease;
}

.recipe-station.is-active .recipe-counter-top {
    stroke: #f59e0b;
    stroke-width: 5;
}

.recipe-doll {
    cursor: default;
    outline: none;
}

.recipe-overlay.is-playing .recipe-doll {
    cursor: pointer;
}

.recipe-doll.is-solved .recipe-doll-svg {
    opacity: 0.75;
}

.recipe-doll:focus-visible .recipe-doll-svg {
    outline: 3px solid #f59e0b;
}

.recipe-turn-mark,
.recipe-done-mark {
    transform-box: fill-box;
    transform-origin: center;
}

.recipe-turn-mark {
    animation: recipe-bob 0.9s ease-in-out infinite;
}

@keyframes recipe-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ---- Doll motion: the group translates to its station spot (feet at 0,0); hops ride on the body ---- */
.recipe-doll {
    transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.3, 1);
}

.recipe-active-ring {
    transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.3, 1);
}

.recipe-doll-body,
.recipe-doll-shadow,
.recipe-doll-tool {
    transform-box: fill-box;
}

.recipe-doll-body {
    transform-origin: 50% 100%;
}

.recipe-doll-shadow {
    transform-origin: 50% 50%;
}

/* held tools pivot at the hand (drawn at the tool's bottom-left corner) */
.recipe-doll-tool {
    transform-origin: 0% 100%;
}

.recipe-doll.is-walking[data-recipe-seat] .recipe-doll-body {
    animation: recipe-walk 0.235s ease-in-out 3;
}

.recipe-doll.is-walking[data-recipe-seat] .recipe-doll-shadow {
    animation: recipe-shadow-squash 0.235s ease-in-out 3;
}

.recipe-doll.is-walking[data-recipe-seat] .recipe-doll-tool {
    animation: none;
}

.recipe-doll.is-stumble[data-recipe-seat] .recipe-doll-body {
    animation: recipe-stumble 0.52s ease;
}

.recipe-doll.is-cheer[data-recipe-seat] .recipe-doll-body {
    animation: recipe-cheer 0.3s ease-in-out 3;
}

.recipe-doll.is-cheer[data-recipe-seat] .recipe-doll-tool {
    animation: recipe-tool-raise 0.3s ease-in-out 3;
}

@keyframes recipe-walk {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(-8px) rotate(-4deg); }
    70% { transform: translateY(-8px) rotate(4deg); }
}

@keyframes recipe-shadow-squash {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.78); }
}

@keyframes recipe-stumble {
    0% { transform: none; }
    20% { transform: translateX(-6px) rotate(-12deg); }
    45% { transform: translateX(5px) rotate(9deg); }
    70% { transform: translateX(-3px) rotate(-4deg); }
    100% { transform: none; }
}

@keyframes recipe-cheer {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px) scaleY(1.04); }
}

@keyframes recipe-tool-raise {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-40deg); }
}

/* ---- Station idles while a kid waits on the ticket ---- */
.recipe-doll.is-busy[data-recipe-station="chop"] .recipe-doll-body {
    animation: recipe-idle-chop 0.6s ease-in-out infinite;
}

.recipe-doll.is-busy[data-recipe-station="chop"] .recipe-doll-tool {
    animation: recipe-tool-chop 0.6s ease-in-out infinite;
}

.recipe-doll.is-busy[data-recipe-station="cook"] .recipe-doll-body {
    animation: recipe-idle-cook 1.1s ease-in-out infinite;
}

.recipe-doll.is-busy[data-recipe-station="cook"] .recipe-doll-tool {
    animation: recipe-tool-stir 1.1s ease-in-out infinite;
}

.recipe-doll.is-busy[data-recipe-station="serve"] .recipe-doll-body {
    animation: recipe-idle-serve 1.2s ease-in-out infinite;
}

.recipe-doll.is-busy[data-recipe-station="serve"] .recipe-doll-tool {
    animation: recipe-tool-pass 1.2s ease-in-out infinite;
}

.recipe-doll.is-solved .recipe-doll-body {
    animation: recipe-idle-wait 2.4s ease-in-out infinite;
}

@keyframes recipe-idle-chop {
    0%, 100% { transform: translateY(0); }
    40% { transform: translateY(-3px); }
    55% { transform: translateY(1.5px) scaleY(0.97); }
}

@keyframes recipe-tool-chop {
    0%, 100% { transform: rotate(-28deg); }
    55% { transform: rotate(4deg); }
}

@keyframes recipe-idle-cook {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

@keyframes recipe-tool-stir {
    0%, 100% { transform: translate(0, 0) rotate(-14deg); }
    25% { transform: translate(3px, -2px) rotate(0deg); }
    50% { transform: translate(0, -3px) rotate(14deg); }
    75% { transform: translate(-3px, -1px) rotate(0deg); }
}

@keyframes recipe-idle-serve {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(3px) rotate(4deg); }
}

@keyframes recipe-tool-pass {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(8px, -3px); }
}

@keyframes recipe-idle-wait {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.985); }
}

/* ---- Station props idle when the island is the active one ---- */
.recipe-knife,
.recipe-spoon,
.recipe-plate-pass,
.recipe-bell,
.recipe-pan,
.recipe-chop-bit,
.recipe-bubble,
.recipe-steam-puff {
    transform-box: fill-box;
}

.recipe-knife,
.recipe-spoon {
    transform-origin: 0% 100%;
}

.recipe-pan,
.recipe-plate-pass,
.recipe-chop-bit,
.recipe-bubble {
    transform-origin: center;
}

.recipe-bell,
.recipe-steam-puff {
    transform-origin: 50% 100%;
}

.recipe-steam-puff {
    animation: recipe-steam-drift 2.4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -0.8s);
}

.recipe-station.is-active .recipe-steam-puff {
    animation-duration: 1.3s;
}

.recipe-station.is-active .recipe-knife {
    animation: recipe-knife-rock 0.6s ease-in-out infinite;
}

.recipe-station.is-active .recipe-chop-bit {
    animation: recipe-bit-pop 0.6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -0.12s);
}

.recipe-station.is-active .recipe-spoon {
    animation: recipe-stir 1.1s ease-in-out infinite;
}

.recipe-station.is-active .recipe-bubble {
    animation: recipe-bubble-rise 1.2s ease-in-out infinite;
}

.recipe-station.is-active .recipe-bubble:nth-child(2) {
    animation-delay: -0.4s;
}

.recipe-station.is-active .recipe-bubble:nth-child(3) {
    animation-delay: -0.8s;
}

.recipe-station.is-active .recipe-pan {
    animation: recipe-sizzle 0.5s ease-in-out infinite;
}

.recipe-station.is-active .recipe-plate-pass {
    animation: recipe-plate-pass 1.2s ease-in-out infinite;
}

.recipe-station.is-active .recipe-bell {
    animation: recipe-bell-tap 1.2s ease-in-out infinite;
}

@keyframes recipe-steam-drift {
    0% { transform: translateY(0) scale(0.9); opacity: 1; }
    50% { transform: translateY(-6px) scale(1.05); opacity: 0.85; }
    100% { transform: translateY(-12px) scale(1.15); opacity: 0.5; }
}

@keyframes recipe-knife-rock {
    0%, 100% { transform: rotate(-16deg); }
    55% { transform: rotate(2deg); }
}

@keyframes recipe-bit-pop {
    0%, 100% { transform: scale(0.85); }
    50% { transform: scale(1.2); }
}

@keyframes recipe-stir {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(12deg); }
}

@keyframes recipe-bubble-rise {
    0% { transform: scale(0.6); opacity: 1; }
    70% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes recipe-sizzle {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(1.2px, -1px); }
}

@keyframes recipe-plate-pass {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-8px); }
}

@keyframes recipe-bell-tap {
    0%, 60%, 100% { transform: translateY(0); }
    70% { transform: translateY(2px); }
    80% { transform: translateY(-1px); }
}

/* ---- Action FX bursts (flat shapes spawned into .recipe-fx-layer) ---- */
.recipe-fx {
    pointer-events: none;
}

.recipe-fx-bit,
.recipe-fx-swing,
.recipe-fx-puff,
.recipe-fx-bubble,
.recipe-fx-plate-slide,
.recipe-fx-spark,
.recipe-fx-ding-star,
.recipe-fx-ding-text,
.recipe-fx-oops-cloud,
.recipe-fx-dizzy {
    transform-box: fill-box;
    transform-origin: center;
}

.recipe-fx-bit {
    animation: recipe-fx-fly 0.72s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.02s);
}

.recipe-fx-swing {
    transform-origin: 50% 100%;
    animation: recipe-fx-swing 0.38s ease-out forwards;
}

.recipe-fx-puff {
    animation: recipe-fx-rise 0.85s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 0.07s);
}

.recipe-fx-bubble {
    animation: recipe-fx-pop 0.5s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 0.08s);
}

.recipe-fx-plate-slide {
    animation: recipe-fx-slide 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

.recipe-fx-spark {
    animation: recipe-fx-spark 0.6s ease-out forwards;
}

.recipe-fx-ding-star {
    animation: recipe-fx-ding 0.75s ease-out forwards;
}

.recipe-fx-ding-text,
.recipe-fx-oops-cloud {
    animation: recipe-fx-label 0.85s ease-out forwards;
}

.recipe-fx-dizzy {
    animation: recipe-fx-dizzy 0.85s ease-in-out forwards;
}

@keyframes recipe-fx-fly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translate(var(--fx-dx, 0px), var(--fx-dy, -30px)) rotate(var(--fx-rot, 180deg)) scale(0.6); opacity: 0; }
}

@keyframes recipe-fx-swing {
    0% { transform: rotate(-40deg); opacity: 1; }
    100% { transform: rotate(30deg); opacity: 0; }
}

@keyframes recipe-fx-rise {
    0% { transform: translate(0, 0) scale(0.6); opacity: 1; }
    100% { transform: translate(var(--fx-dx, 0px), -48px) scale(1.4); opacity: 0; }
}

@keyframes recipe-fx-pop {
    0% { transform: scale(0.5); opacity: 1; }
    60% { transform: scale(1.4); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

@keyframes recipe-fx-slide {
    0% { transform: translateX(0); opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateX(var(--fx-dx, 110px)); opacity: 0; }
}

@keyframes recipe-fx-spark {
    0% { transform: scale(0.4) rotate(0deg); opacity: 1; }
    100% { transform: scale(1.4) rotate(90deg); opacity: 0; }
}

@keyframes recipe-fx-ding {
    0% { transform: scale(0.3) rotate(-20deg); opacity: 1; }
    45% { transform: scale(1.15) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) translateY(-14px); opacity: 0; }
}

@keyframes recipe-fx-label {
    0% { transform: translateY(8px) scale(0.6); opacity: 0; }
    25% { transform: translateY(0) scale(1.05); opacity: 1; }
    75% { opacity: 1; }
    100% { transform: translateY(-16px); opacity: 0; }
}

@keyframes recipe-fx-dizzy {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-14px); opacity: 0; }
}

/* ---- Math ticket: a small order slip pinned under the rail at the active station ---- */
.recipe-prompt {
    position: absolute;
    top: 23%;
    left: 7%;
    width: 18%;
    height: 9%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    background: #facc15;
    border: 3px solid #1e293b;
    border-radius: 999px;
    box-shadow: 0 3px 0 #92400e;
    color: #1e293b;
    font-family: var(--font-heading, Fredoka, sans-serif);
    text-align: center;
    z-index: 4;
    pointer-events: none;
    transition: left 0.7s cubic-bezier(0.45, 0.05, 0.3, 1);
}

/* the sign's tail points down at the station */
.recipe-prompt::after {
    content: '';
    position: absolute;
    bottom: -0.55em;
    left: 50%;
    width: 0.8em;
    height: 0.8em;
    transform: translateX(-50%) rotate(45deg);
    background: #facc15;
    border-right: 3px solid #1e293b;
    border-bottom: 3px solid #1e293b;
}

.recipe-prompt.is-empty,
.recipe-overlay.is-idle .recipe-prompt,
.recipe-overlay.is-countdown .recipe-prompt,
.recipe-overlay.is-gameover .recipe-prompt {
    visibility: hidden;
}

.recipe-prompt-icon {
    font-size: clamp(0.9rem, 3.2vmin, 1.5rem);
    line-height: 1;
}

.recipe-prompt-who {
    font-size: clamp(0.6rem, 2.2vmin, 1.05rem);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipe-prompt.is-new {
    animation: recipe-prompt-drop 0.38s ease-out;
}

.recipe-prompt.is-shake {
    animation: recipe-prompt-shake 0.4s ease;
}

@keyframes recipe-prompt-drop {
    0% { transform: translateY(-45%); }
    60% { transform: translateY(6%); }
    100% { transform: translateY(0); }
}

@keyframes recipe-prompt-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5%) rotate(-2deg); }
    75% { transform: translateX(5%) rotate(2deg); }
}

/* ---- Order tickets along the top ---- */
.recipe-orders {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 21%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5%;
    padding: 0 1%;
    pointer-events: none;
    z-index: 3;
}

.recipe-order {
    flex: 0 1 19%;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fffbeb;
    border: 3px solid #1e293b;
    border-top: 0;
    border-radius: 0 0 0.6rem 0.6rem;
    overflow: hidden;
    font-family: var(--font-heading, Fredoka, sans-serif);
    color: #1e293b;
    text-align: center;
}

.recipe-order.is-active {
    flex-basis: 23%;
    position: relative;
    border-color: #f59e0b;
    box-shadow: 0 4px 0 #b45309;
}

.recipe-order-bar {
    height: 14%;
    min-height: 6px;
    background: #ef4444;
    border-bottom: 2px solid #1e293b;
    flex-shrink: 0;
}

.recipe-order-fill {
    display: block;
    height: 100%;
    background: #22c55e;
    transition: width 0.5s linear;
}

.recipe-order.is-urgent-yellow .recipe-order-fill {
    background: #facc15;
}

.recipe-order.is-urgent-red .recipe-order-fill {
    background: #f97316;
}

.recipe-order.is-active.is-urgent-red {
    animation: recipe-urgent 0.6s ease-in-out infinite;
}

@keyframes recipe-urgent {
    0%, 100% { box-shadow: 0 4px 0 #b45309; }
    50% { box-shadow: 0 4px 0 #b45309, 0 0 0 3px #ef4444; }
}

.recipe-order-dish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2em;
    padding: 0.15em 0.3em 0;
    font-weight: 800;
    font-size: clamp(0.5rem, 1.5vmin, 0.85rem);
    line-height: 1.15;
}

.recipe-order-emoji {
    font-size: 1.3em;
}

.recipe-order-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipe-order-step {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: clamp(0.45rem, 1.3vmin, 0.72rem);
    color: #7c2d12;
}

.recipe-dish-card.is-active {
    flex: 0 1 46%;
}

.recipe-dish-card .recipe-order-dish {
    font-size: clamp(0.65rem, 2.3vmin, 1.1rem);
}

.recipe-dish-count {
    margin-left: 0.3em;
    padding: 0 0.45em;
    border-radius: 999px;
    background: #fde68a;
    font-size: 0.85em;
    white-space: nowrap;
}

.recipe-order-bonus {
    position: absolute;
    top: 0;
    right: 0.25em;
    font-size: clamp(0.6rem, 2vmin, 1rem);
    line-height: 1;
}

/* Chop → Cook → Serve as pictures: done steps tick, the current one glows */
.recipe-steps {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4%;
    padding: 0.1em 0.3em 0.2em;
}

.recipe-step {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    padding: 0.08em 0.5em;
    border: 2px solid #cbd5e1;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    font-weight: 800;
    font-size: clamp(0.55rem, 1.9vmin, 0.95rem);
    line-height: 1.1;
}

.recipe-step-icon {
    font-size: 1.15em;
}

.recipe-step.is-now {
    border-color: #1e293b;
    background: #facc15;
    color: #1e293b;
    transform: scale(1.08);
}

.recipe-step.is-done {
    border-color: #16a34a;
    background: #dcfce7;
    color: #166534;
}

.recipe-step-tick {
    position: absolute;
    top: -0.45em;
    right: -0.35em;
    width: 1.1em;
    height: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 0.75em;
}

.recipe-steps.is-compact {
    gap: 3%;
    padding: 0.05em 0.2em 0.15em;
}

.recipe-steps.is-compact .recipe-step {
    padding: 0.05em 0.3em;
}

/* ---- Answer crates on the front counter ---- */
.recipe-choices {
    position: absolute;
    left: 24%;
    right: 24%;
    top: 83%;
    height: 14%;
    display: flex;
    gap: 2%;
    z-index: 3;
}

.recipe-choice-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0;
    border-radius: 0.45rem;
    border: 3px solid #1e293b;
    background: #fde68a;
    color: #1e293b;
    box-shadow: 0 3px 0 #92400e;
    font-size: clamp(0.9rem, 3.4vmin, 1.6rem);
    line-height: 1;
}

.recipe-choice-btn:active,
.recipe-choice-btn.is-pressed {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #92400e;
}

/* locked while the kid stumbles; a crate already missed on this ticket stays greyed out */
.recipe-choice-btn:disabled {
    opacity: 0.6;
    transform: none;
    cursor: default;
}

.recipe-choice-btn.is-wrong {
    background: #e2e8f0;
    color: #64748b;
    box-shadow: 0 3px 0 #94a3b8;
}

/* second miss on a ticket: the right crate pulses so the kid taps it */
.recipe-choice-btn.is-reveal {
    background: #bbf7d0;
    outline: 4px solid #16a34a;
    outline-offset: 2px;
    animation: recipe-reveal-pulse 0.9s ease-in-out infinite;
}

@keyframes recipe-reveal-pulse {
    0%, 100% { outline-color: #16a34a; transform: scale(1); }
    50% { outline-color: #86efac; transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .recipe-choice-btn.is-reveal { animation: none; }
}

/* miss card rides in the kitchen band beside the kids: below the order rail (21%), above the crates
   (83%), on the side clear of every doll hotspot and the math ticket (the cabinet sets the vars) */
.recipe-field > .arcade-miss-card {
    top: 22.5%;
    bottom: auto;
    left: var(--recipe-miss-center, 50%);
    width: var(--recipe-miss-width, 32%);
    max-height: none;
    overflow: visible;
    padding: 0.3em 0.55em 0.35em;
    border-width: 2px;
    border-radius: 0.7rem;
    font-size: var(--recipe-miss-font, 13px);
}

.recipe-field > .arcade-miss-card .arcade-miss-title {
    font-size: 1.12em;
    line-height: 1.15;
}

.recipe-field > .arcade-miss-card .arcade-miss-text {
    font-size: 1em;
    line-height: 1.22;
}

/* ---- Corners: coin score bottom-left, timer bottom-right (screen corners, like Overcooked) ---- */
.recipe-corner {
    position: absolute;
    bottom: 0.35rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.25em;
    padding: 0.2em 0.5em;
    border: 3px solid #1e293b;
    border-radius: 999px;
    background: #fffbeb;
    color: #1e293b;
    font-family: var(--font-heading, Fredoka, sans-serif);
    font-weight: 800;
    font-size: clamp(0.8rem, 2.6vmin, 1.35rem);
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 3px 0 #92400e;
}

.recipe-corner-sw {
    left: 0.4rem;
    background: #fde68a;
}

.recipe-corner-se {
    right: 0.4rem;
    background: #e0f2fe;
}

.recipe-coin,
.recipe-clock {
    display: inline-flex;
    width: 1.2em;
    height: 1.2em;
}

.recipe-coin-svg,
.recipe-clock-svg {
    width: 100%;
    height: 100%;
}

.recipe-lives {
    font-size: 0.75em;
    letter-spacing: -0.05em;
    margin-left: 0.2em;
}

.recipe-timer {
    font-variant-numeric: tabular-nums;
}

/* ---- Start / Game Over screens sit on the field ---- */
.recipe-screen {
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
}

.recipe-screen .muncher-screen-copy {
    font-size: clamp(0.72rem, 2.2vmin, 1rem);
    max-width: 30rem;
    line-height: 1.3;
}

.recipe-screen .muncher-screen-title {
    font-size: clamp(1.1rem, 4vmin, 1.7rem);
}

.recipe-screen .muncher-screen-btn {
    min-height: 2.6rem;
    padding: 0.4rem 1.2rem 0.45rem;
    font-size: clamp(0.95rem, 3vmin, 1.28rem);
}

/* ---- Minute Rush HUD ---- */
.recipe-rush-order .recipe-order-step {
    padding: 0 0.2em;
}

.recipe-rush-order.is-waiting {
    background: #f1f5f9;
}

.recipe-rush-order.is-golden {
    background: #fef08a;
    border-color: #ca8a04;
    box-shadow: 0 4px 0 #a16207, 0 0 12px rgba(250, 204, 21, 0.9);
}

.recipe-rush-x2 {
    display: inline-block;
    padding: 0 0.3em;
    border-radius: 999px;
    background: #ca8a04;
    color: #fffbeb;
}

.recipe-overlay.is-rush .recipe-corner-se {
    background: #dcfce7;
    font-size: clamp(0.95rem, 3.2vmin, 1.6rem);
}

.recipe-overlay.is-rush .recipe-lives {
    font-size: 0.62em;
    letter-spacing: 0;
}

.recipe-overlay.is-rush-hour .recipe-corner-se {
    background: #fecaca;
    color: #b91c1c;
    animation: recipe-hurry 0.5s ease-in-out infinite;
}

.recipe-overlay.is-rush-hour .recipe-board-wrap {
    animation: recipe-rush-glow 1s ease-in-out infinite;
}

@keyframes recipe-hurry {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes recipe-rush-glow {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: inset 0 0 28px 6px rgba(239, 68, 68, 0.55); }
}

/* team line: one answer card per kid along the front counter */
.recipe-choices.is-team,
.recipe-choices.is-solo {
    left: 1%;
    right: 1%;
    top: 78%;
    height: 21%;
    gap: 1.5%;
}

/* together / split tickets: one answer card in the middle of the front counter */
.recipe-choices.is-solo {
    left: 15%;
    right: 15%;
}

.recipe-team-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 2%;
    padding: 0.25em 0.35em;
    background: #fffbeb;
    border: 3px solid #1d4ed8;
    border-radius: 0.6rem;
    box-shadow: 0 3px 0 #1e3a8a;
    font-family: var(--font-heading, Fredoka, sans-serif);
    color: #1e293b;
    transition: opacity 0.15s ease;
}

.recipe-team-card[data-seat="a"] {
    border-color: #c2410c;
    box-shadow: 0 3px 0 #7c2d12;
}

.recipe-team-card.is-walking {
    opacity: 0.6;
}

.recipe-team-card.is-on-fire {
    box-shadow: 0 3px 0 #7c2d12, 0 0 10px 2px rgba(249, 115, 22, 0.85);
}

.recipe-team-card[data-seat="shared"] {
    border-color: #15803d;
    box-shadow: 0 3px 0 #14532d;
}

.recipe-team-ticket {
    flex: 0 0 40%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.05;
}

.recipe-team-who {
    font-size: clamp(0.6rem, 2vmin, 0.95rem);
    font-weight: 800;
    color: #7c2d12;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipe-team-card[data-seat="b"] .recipe-team-who {
    color: #1e3a8a;
}

.recipe-team-card[data-seat="shared"] .recipe-team-who {
    color: #14532d;
}

.recipe-team-icon {
    margin-right: 0.25em;
}

.recipe-team-math {
    font-size: clamp(1.1rem, 4.8vmin, 2.2rem);
    font-weight: 800;
    white-space: nowrap;
}

.recipe-team-crates {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 3%;
}

.recipe-team-crates .recipe-choice-btn {
    font-size: clamp(0.95rem, 3.6vmin, 1.7rem);
}

/* pops that float up over the kitchen: +1, Golden, On a roll!, Rush hour!, Time's up! */
.recipe-pop {
    position: absolute;
    z-index: 6;
    transform: translate(-50%, -50%);
    padding: 0.1em 0.5em;
    border: 3px solid #1e293b;
    border-radius: 999px;
    background: #fffbeb;
    color: #1e293b;
    font-family: var(--font-heading, Fredoka, sans-serif);
    font-weight: 800;
    font-size: clamp(0.9rem, 3.4vmin, 1.7rem);
    white-space: nowrap;
    pointer-events: none;
    animation: recipe-pop-float 1.2s ease-out forwards;
}

.recipe-pop.is-plus {
    background: #bbf7d0;
}

.recipe-pop.is-golden {
    background: #facc15;
    box-shadow: 0 0 14px rgba(250, 204, 21, 0.95);
}

.recipe-pop.is-fire {
    background: #fed7aa;
    color: #9a3412;
}

.recipe-pop.is-hurry {
    background: #fecaca;
    color: #b91c1c;
}

.recipe-pop.is-timeup {
    font-size: clamp(1.6rem, 8vmin, 3.4rem);
    background: #fde68a;
    animation: recipe-pop-stamp 1.5s ease-out forwards;
}

@keyframes recipe-pop-float {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(0.6); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    30% { transform: translate(-50%, -55%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -140%) scale(1); }
}

@keyframes recipe-pop-stamp {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2) rotate(-6deg); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
    85% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95) rotate(-3deg); }
}

/* Minute Rush results */
.recipe-over-rush {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.recipe-over-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recipe-over-plate.is-golden {
    border-color: #a16207;
    background: radial-gradient(circle, #facc15 0 45%, #fef9c3 47%);
    box-shadow: 0 0 6px rgba(250, 204, 21, 0.9);
}

.recipe-over-count {
    margin: 0;
    font-family: var(--font-heading, Fredoka, sans-serif);
    font-weight: 700;
    font-size: clamp(0.9rem, 3vmin, 1.3rem);
}

.recipe-over-count strong {
    font-size: 1.8em;
}

.recipe-over-plates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25em;
    margin: 0.2em 0;
}

.recipe-over-plate {
    width: clamp(0.9rem, 3.4vmin, 1.6rem);
    height: clamp(0.9rem, 3.4vmin, 1.6rem);
    border-radius: 50%;
    border: 2px solid #1e293b;
    background: radial-gradient(circle, #fb923c 0 45%, #ffffff 47%);
}

.recipe-over-best {
    margin: 0.1em 0;
    padding: 0.05em 0.8em;
    border: 3px solid #1e293b;
    border-radius: 999px;
    background: #facc15;
    color: #1e293b;
    font-family: var(--font-heading, Fredoka, sans-serif);
    font-weight: 800;
}

.recipe-over-best.is-old {
    background: #fffbeb;
}

.recipe-over-stars {
    display: flex;
    justify-content: center;
    gap: 0.2em;
    font-size: clamp(1.6rem, 7vmin, 2.6rem);
    line-height: 1;
}

.recipe-over-star {
    color: #94a3b8;
}

.recipe-over-star.is-on {
    color: #facc15;
    text-shadow: 0 0 0 #1e293b, 1px 1px 0 #92400e;
}

.recipe-over-goals {
    margin: 0;
    max-width: 34rem;
    font-size: 0.82em;
    line-height: 1.25;
    opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
    .recipe-pop,
    .recipe-pop.is-timeup,
    .recipe-overlay.is-rush-hour .recipe-corner-se,
    .recipe-overlay.is-rush-hour .recipe-board-wrap {
        animation: none;
    }

    .recipe-pop {
        opacity: 1;
    }
}

/* each kid's name tag wears their answer card's colour (orange = left card, blue = right card) */
.recipe-doll-a .recipe-seat-tag {
    border-color: #c2410c;
    background: #ffedd5;
}

.recipe-doll-b .recipe-seat-tag {
    border-color: #1d4ed8;
    background: #dbeafe;
}

/* Classic HUD: just the hearts (the score and the count-up clock meant nothing to a kid) */
.recipe-overlay:not(.is-rush) .recipe-coin,
.recipe-overlay:not(.is-rush) .recipe-score,
.recipe-overlay:not(.is-rush) .recipe-corner-se {
    display: none;
}

.recipe-overlay:not(.is-rush) .recipe-lives {
    margin-left: 0;
    font-size: 1em;
    letter-spacing: 0.05em;
}

/* Minute Rush rail: up to three small order cards, each with its picture track and who has it */
.recipe-rush-order {
    flex: 0 1 22%;
}

.recipe-rush-order .recipe-order-dish {
    flex: 1 1 auto;
    font-size: clamp(0.7rem, 2.4vmin, 1.1rem);
}

.recipe-rush-order .recipe-order-emoji {
    font-size: 1.6em;
}

.recipe-rush-order .recipe-steps.is-compact .recipe-step {
    font-size: clamp(0.6rem, 2.2vmin, 1rem);
}

.recipe-choices.is-team .recipe-choice-btn {
    font-size: clamp(0.85rem, 3vmin, 1.45rem);
}

/* a 4-digit answer (G3+) still fits its crate on a 360×640 phone */
.recipe-choices.is-team .recipe-choice-btn.is-long {
    font-size: clamp(0.64rem, 2.3vmin, 1.16rem);
}

.recipe-rush-who {
    margin-left: 0.3em;
    padding: 0 0.45em;
    border-radius: 999px;
    background: #fed7aa;
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipe-rush-order[data-seat="b"] .recipe-rush-who {
    background: #bfdbfe;
}

/* ---- Start screen: who's cooking, then one tap on a big game card ---- */
.recipe-start {
    gap: clamp(0.4rem, 2.4vmin, 0.9rem);
}

.recipe-who-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.recipe-who-btn {
    display: flex;
    align-items: center;
    gap: 0.4em;
    min-height: 2.75rem;
    padding: 0.3em 0.9em 0.3em 0.6em;
    border: 3px solid rgba(255, 251, 235, 0.35);
    border-radius: 999px;
    background: rgba(30, 18, 8, 0.55);
    color: #fffbeb;
    font-family: var(--font-heading, Fredoka, sans-serif);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.recipe-who-btn.is-selected {
    border-color: #1e293b;
    background: #fffbeb;
    color: #1e293b;
    box-shadow: 0 3px 0 #92400e, 0 0 0 3px #facc15;
}

.recipe-who-icon {
    font-size: clamp(1.1rem, 4vmin, 1.6rem);
    line-height: 1;
}

.recipe-who-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.recipe-who-text strong {
    font-size: clamp(0.85rem, 2.8vmin, 1.1rem);
}

.recipe-who-text small {
    font-size: clamp(0.62rem, 2vmin, 0.8rem);
    font-weight: 700;
    opacity: 0.8;
}

.recipe-game-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(0.6rem, 3vmin, 1.4rem);
}

.recipe-game-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.recipe-game-card {
    width: clamp(9rem, 30vmin, 13rem);
    min-height: clamp(7rem, 30vmin, 10rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    padding: 0.5em 0.6em;
    border: 4px solid #1e293b;
    border-radius: 1.2rem;
    background: linear-gradient(180deg, #fde68a, #f59e0b);
    box-shadow: 0 6px 0 #92400e;
    color: #1e293b;
    font-family: var(--font-heading, Fredoka, sans-serif);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.recipe-game-card.is-rush {
    background: linear-gradient(180deg, #bae6fd, #38bdf8);
    box-shadow: 0 6px 0 #075985;
}

.recipe-game-card:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #92400e;
}

.recipe-game-card.is-rush:active {
    box-shadow: 0 2px 0 #075985;
}

.recipe-game-card:focus-visible,
.recipe-who-btn:focus-visible,
.recipe-sec-btn:focus-visible,
.recipe-menu-btn:focus-visible {
    outline: 3px solid #fffbeb;
    outline-offset: 2px;
}

.recipe-game-icon {
    font-size: clamp(2rem, 9vmin, 3.4rem);
    line-height: 1;
}

.recipe-game-name {
    font-size: clamp(1rem, 3.6vmin, 1.45rem);
    font-weight: 800;
    line-height: 1.1;
}

.recipe-game-sub {
    font-size: clamp(0.65rem, 2.1vmin, 0.88rem);
    font-weight: 700;
}

.recipe-secs {
    display: flex;
    gap: 0.3rem;
}

.recipe-sec-btn {
    min-width: 3.2rem;
    min-height: 2.2rem;
    padding: 0.1em 0.6em;
    border: 2px solid rgba(255, 251, 235, 0.35);
    border-radius: 999px;
    background: rgba(30, 18, 8, 0.55);
    color: #fffbeb;
    font-family: var(--font-heading, Fredoka, sans-serif);
    font-weight: 800;
    font-size: clamp(0.72rem, 2.2vmin, 0.9rem);
    cursor: pointer;
}

.recipe-sec-btn.is-selected {
    border-color: #1e293b;
    background: #e0f2fe;
    color: #1e293b;
}

/* ---- Results: big stars, what earned them, Play again ---- */
.recipe-over {
    gap: 0.35rem;
}

.recipe-over-earned {
    display: flex;
    justify-content: center;
    gap: clamp(0.6rem, 3vmin, 1.4rem);
}

.recipe-over-earn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1em;
    opacity: 0.55;
}

.recipe-over-earn.is-on {
    opacity: 1;
}

.recipe-over-earn .recipe-over-star {
    font-size: clamp(2rem, 9vmin, 3.4rem);
    line-height: 1;
}

.recipe-over-why {
    font-family: var(--font-heading, Fredoka, sans-serif);
    font-weight: 800;
    font-size: clamp(0.7rem, 2.3vmin, 0.95rem);
    white-space: nowrap;
}

.recipe-over-btns {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.recipe-menu-btn {
    min-height: 2.6rem;
    padding: 0.3em 1em;
    border: 2px solid rgba(255, 251, 235, 0.5);
    border-radius: 999px;
    background: transparent;
    color: #fffbeb;
    font-family: var(--font-heading, Fredoka, sans-serif);
    font-weight: 800;
    font-size: clamp(0.8rem, 2.5vmin, 1rem);
    cursor: pointer;
}

.recipe-overlay .muncher-over-stats {
    font-size: clamp(0.72rem, 2.2vmin, 1rem);
}

.recipe-overlay.is-idle .recipe-orders,
.recipe-overlay.is-idle .recipe-choices,
.recipe-overlay.is-idle .recipe-corner,
.recipe-overlay.is-countdown .recipe-choices,
.recipe-overlay.is-gameover .recipe-choices {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .recipe-board-wrap.is-good,
    .recipe-board-wrap.is-hurt,
    .recipe-turn-mark,
    .recipe-steam-puff,
    .recipe-order.is-active.is-urgent-red,
    .recipe-prompt.is-new,
    .recipe-prompt.is-shake,
    .recipe-kitchen-svg *,
    .recipe-kitchen-svg *::before {
        animation: none !important;
    }

    .recipe-order-fill,
    .recipe-doll,
    .recipe-active-ring,
    .recipe-prompt {
        transition: none;
    }

    .recipe-fx {
        display: none;
    }
}

/* ===== Answer Slice (Fruit Ninja math — Key override: FN look, not ink) =====
   Whole-screen takeover like Recipe Rush, but portrait-native: no 90° rotate.
   The canvas board fills the phone edge to edge; HUD floats on top. */
body.answer-slice-open {
    overflow: hidden;
}

.answer-slice-overlay {
    padding: 0;
    background: #2a160a;
}

.answer-slice-overlay .answer-slice-shell {
    position: relative;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: #3b2412;
}

.answer-slice-board-wrap {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.answer-slice-board-wrap.is-hurt {
    animation: muncher-shake 0.4s ease;
}

.answer-slice-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: crosshair;
}

.answer-slice-hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: calc(env(safe-area-inset-top, 0px) + 0.45rem) 0.6rem 0.2rem;
    pointer-events: none;
}

.answer-slice-hud .mq-close-x {
    pointer-events: auto;
}

.answer-slice-score-box {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.answer-slice-title-icon {
    width: 2.2rem;
    height: 2.2rem;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.answer-slice-title-icon .arcade-game-mark {
    width: 2.2rem;
    height: 2.2rem;
}

.answer-slice-score {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.9rem, 9vw, 2.6rem);
    line-height: 1;
    color: #fcd34d;
    -webkit-text-stroke: 2px #3b1d06;
    paint-order: stroke fill;
    text-shadow: 0 3px 0 #3b1d06, 0 6px 10px rgba(0, 0, 0, 0.35);
}

.answer-slice-sr-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.answer-slice-lives {
    margin-left: auto;
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.05rem 0.08rem;
}

.answer-slice-x {
    font-family: var(--font-heading);
    font-weight: 900;
    /* vmin, not vw: sideways the ✕ stays its upright size, so all 10 lives fit in one row (#2421). */
    font-size: clamp(0.95rem, 4.2vmin, 1.35rem);
    line-height: 1;
    color: #1e3a8a;
    -webkit-text-stroke: 1.1px #0b1b47;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    opacity: 0.8;
}

.answer-slice-x.is-lost {
    color: #ef4444;
    -webkit-text-stroke: 1.5px #7f1d1d;
    opacity: 1;
    transform: scale(1.15);
    transition: transform 0.2s ease, color 0.2s ease;
}

.answer-slice-question-rail {
    position: absolute;
    left: 50%;
    top: calc(env(safe-area-inset-top, 0px) + 3.3rem);
    z-index: 4;
    transform: translateX(-50%);
    width: min(26rem, calc(100% - 1.2rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.8rem 0.5rem;
    border-radius: 1rem;
    background: rgba(28, 14, 4, 0.62);
    box-shadow: inset 0 0 0 2px rgba(252, 211, 77, 0.35);
    pointer-events: none;
    text-align: center;
}

.answer-slice-wave {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fde68a;
}

.answer-slice-question {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.5rem, 7vw, 2.1rem);
    line-height: 1.15;
    color: #ffffff;
    text-shadow: 0 2px 0 #1c0f05;
}

.answer-slice-question.is-preview {
    animation: answer-slice-q-pulse 0.9s ease-in-out infinite alternate;
}

.answer-slice-timer-fill.is-preview {
    opacity: 0.55;
}

@keyframes answer-slice-q-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.04); }
}

.answer-slice-question.is-long {
    font-size: clamp(1.05rem, 4.6vw, 1.35rem);
}

/* Phase 3: after a missed wave the solved fact stays up big in the gold answer colour. */
.answer-slice-question.is-reveal {
    font-size: clamp(1.9rem, 9vw, 2.6rem);
    color: #fde047;
}

.answer-slice-question.is-reveal.is-long {
    font-size: clamp(1.25rem, 5.4vw, 1.6rem);
}

/* Miss card shows only in the inter-wave gap, mid-board: HUD owns the top, falling fruit the bottom. */
.answer-slice-board-wrap > .arcade-miss-card {
    bottom: 40%;
}

/* Mid-wave "Not 14" chip replaces the wave label inside the question rail. */
.answer-slice-wave.is-miss-chip {
    padding: 0.05rem 0.55rem;
    border-radius: 999px;
    background: #b91c1c;
    color: #ffffff;
    letter-spacing: 0.04em;
}

/* Miss card never catches a slash while fruit fly; tap-to-dismiss only between waves. */
.answer-slice-board-wrap:not(.is-wave-live) > .arcade-miss-card {
    pointer-events: auto;
}

.answer-slice-timer {
    width: 100%;
    height: 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
}

.answer-slice-timer-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #86efac, #4ade80);
    transform-origin: left center;
    transform: scaleX(0);
}

.answer-slice-timer-fill.is-low {
    background: linear-gradient(90deg, #fca5a5, #ef4444);
}

.answer-slice-overlay.is-idle .answer-slice-question-rail,
.answer-slice-overlay.is-gameover .answer-slice-question-rail {
    display: none;
}

.answer-slice-overlay .answer-slice-screen {
    inset: auto 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    max-height: calc(100% - 7rem);
    overflow-y: auto;
    background: rgba(40, 20, 6, 0.9);
}

.answer-slice-idle-hero .arcade-game-mark {
    width: 5.2rem;
    height: 5.2rem;
}

.answer-slice-overlay .answer-slice-countdown {
    border-radius: 0;
    color: #fcd34d;
    -webkit-text-stroke: 3px #3b1d06;
    paint-order: stroke fill;
    background: rgba(20, 8, 0, 0.25);
}

/* ============================================================================
   {Name}'s World — fullscreen takeover (World tab → 🧱 {Name}'s World)
   House ink on a 3D stage: #1e293b outlines, flat fills, solid offset "shadow".
   Plan: docs/block-quest-world-plan.md
   ============================================================================ */
body.kid-world-open {
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

/* Reduced motion across the World (A11Y-02): the question popup is just there, no pop. calm66.js finds no animation over 200 ms. */
@media (prefers-reduced-motion: reduce) {
    body.kid-world-open .modal-card { animation: none; }
}

.kid-world-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: #cfe8f5;
    color: #1e293b;
    font-family: 'Fredoka', 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 600;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

.kid-world-overlay.hidden { display: none; }

.kid-world-overlay,
.kid-world-overlay * {
    touch-action: none;
    box-sizing: border-box;
}

.kid-world-overlay button { touch-action: manipulation; font-family: inherit; color: #1e293b; cursor: pointer; }
/* A11Y-03: keyboard and switch play — a ring a kid can see on any World button, its sheets and the World's question popup,
   over grass, sky and the dark chrome alike (ink outline + a white halo). Only from a key (focus-visible): a tap shows none. */
.kid-world-overlay button:focus-visible,
.kid-world-open #readingNookModal button:focus-visible {
    outline: 3px solid #1e293b;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px #fff;
}

.kw-stage { position: absolute; inset: 0; }
.kw-stage canvas { display: block; width: 100%; height: 100%; }

.kw-top,
.kw-bottom,
.kw-orbit,
.kw-sign,
.kw-toast { position: absolute; z-index: 2; }

.kw-top {
    top: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 10px;
    padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
    pointer-events: none;
}
.kw-top > * { pointer-events: auto; }

.kw-round-btn {
    flex: none;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 2.5px solid #1e293b;
    background: #fffaf1;
    box-shadow: 0 3px 0 #1e293b;
    font-size: 20px; line-height: 1;
    padding: 0;
}
.kw-round-btn:active,
.kw-big-btn:active,
.kw-pill:active,
.kw-tool:active,
.kw-chip-btn:active,
.kw-round-btn.is-pressed,
.kw-big-btn.is-pressed,
.kw-pill.is-pressed,
.kw-tool.is-pressed,
.kw-chip-btn.is-pressed { transform: translateY(2px); box-shadow: 0 1px 0 #1e293b; }

.kw-plaque {
    flex: 1; min-width: 0; margin: 0;
    text-align: center;
    font: 600 17px 'Fredoka', sans-serif;
    background: #fffaf1;
    border: 2.5px solid #1e293b; border-radius: 16px;
    box-shadow: 0 3px 0 #1e293b;
    padding: 9px 10px 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The job sign: picture first (numeral + ten-frames + piece icons), words second. */
.kw-sign {
    top: calc(68px + env(safe-area-inset-top));
    left: 50%; transform: translateX(-50%);
    width: min(360px, calc(100% - 24px));
    background: #fffaf1;
    border: 2.5px solid #1e293b; border-radius: 18px;
    box-shadow: 0 4px 0 #1e293b;
    padding: 10px 12px 8px;
}
.kw-sign.hidden, .kw-toast.hidden, .kw-tray.hidden, .kw-flat.hidden,
.kw-pill.hidden, .kw-tool.hidden { display: none; }
.kw-sign-pictures { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.kw-pic { display: inline-flex; align-items: center; gap: 4px; }
.kw-pic svg { height: 34px; width: auto; display: block; }
.kw-pic-structure svg { height: 40px; }
.kw-pic-numeral { font: 600 44px/1 'Fredoka', sans-serif; letter-spacing: .01em; }
.kw-pic-remove { color: #b4441f; }
.kw-pic-frames { flex-direction: column; gap: 3px; }
.kw-pic-craft i { font-style: normal; font-size: 13px; }
.kw-pic-craft svg { height: 20px; }
/* Garden (array) signs: the whole array with its R × C, or one row of C. */
.kw-pic-array svg { height: 46px; }
.kw-pic-row svg { height: 28px; }
.kw-pic-array b, .kw-pic-row b { font: 600 20px/1 'Fredoka', sans-serif; margin-left: 3px; white-space: nowrap; }
/* Tank (volume) signs: one layer seen from above with its L × W (and × H when the sign gives the layers). */
.kw-pic-layer svg { height: 40px; }
.kw-pic-layer b { font: 600 20px/1 'Fredoka', sans-serif; margin-left: 4px; white-space: nowrap; }
.kw-frame { display: grid; grid-template-columns: repeat(5, 11px); grid-auto-rows: 11px; gap: 2px; padding: 2px; border: 2px solid #1e293b; border-radius: 5px; background: #fff; }
.kw-frame-cell { border-radius: 50%; background: #e8e1d0; }
.kw-frame-cell.is-on { background: #f4a06b; box-shadow: inset 0 0 0 1.6px #1e293b; }
.kw-sign-text { margin: 6px 0 4px; text-align: center; font-size: 16px; }
.kw-sign-row { display: flex; align-items: center; gap: 8px; }
.kw-strikes { display: inline-flex; gap: 5px; margin-right: auto; }
.kw-strike { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #1e293b; background: #fff; }
.kw-strike.is-left { background: #5fb8ac; }
.kw-chip-btn {
    width: 38px; height: 34px; padding: 0;
    border: 2px solid #1e293b; border-radius: 11px;
    background: #fff; box-shadow: 0 2px 0 #1e293b; font-size: 15px;
}

.kw-toast {
    left: 50%; transform: translateX(-50%);
    bottom: calc(176px + env(safe-area-inset-bottom));
    width: max-content; max-width: calc(100% - 28px);
    background: #1e293b; color: #fffaf1;
    border-radius: 14px; padding: 9px 14px;
    font-size: 15px; text-align: center;
    pointer-events: none;
}
.kw-toast b { color: #f6c453; }

/* DAY-01 "See you tomorrow": Fern's goodbye over the World tab after Exit ✕ — not a modal, any tap and it goes (lib/kid-world-ui-farm.js showBye). */
.kw-bye {
    position: fixed; z-index: 11990;
    left: 50%; transform: translateX(-50%);
    top: calc(14px + env(safe-area-inset-top));
    width: max-content; max-width: min(340px, calc(100% - 32px));
    background: #fffaf1; color: #1e293b;
    border: 2px solid #1e293b; border-radius: 16px; box-shadow: 0 3px 0 #1e293b;
    padding: 10px 14px 12px;
    font-family: 'Fredoka', 'Plus Jakarta Sans', system-ui, sans-serif;
    animation: kw-bye-in 0.25s ease-out;
}
@keyframes kw-bye-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .kw-bye { animation: none; } }
.kw-bye-head { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.kw-bye-fern { font-size: 26px; line-height: 1; }
.kw-bye-say {
    margin-left: auto; min-width: 44px; min-height: 44px;
    border: 2px solid #1e293b; border-radius: 12px; background: #fff; font-size: 20px; cursor: pointer;
}
.kw-bye-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.kw-bye-list li { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.25; }
.kw-bye-pic { font-size: 28px; line-height: 1; flex: none; width: 34px; text-align: center; }

/* PARENT-02: Fern's "time to rest" card, over the World once a grown-up's daily World time is up. Nothing behind it takes a tap. */
.kid-world-overlay .kw-rest {
    position: absolute; inset: 0; z-index: 40;
    display: flex; align-items: center; justify-content: center;
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
    background: rgba(30, 41, 59, .35);
}
.kid-world-overlay .kw-rest-card {
    width: min(340px, 100%); max-height: 100%; overflow: auto;
    background: #fffaf1; color: #1e293b;
    border: 3px solid #1e293b; border-radius: 20px; box-shadow: 0 4px 0 #1e293b;
    padding: 16px 18px 18px; text-align: center;
    font-family: 'Fredoka', 'Plus Jakarta Sans', system-ui, sans-serif;
    animation: kw-rest-in 0.25s ease-out;
}
@keyframes kw-rest-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kid-world-overlay .kw-rest-card { animation: none; } }
.kid-world-overlay .kw-rest-pics { display: flex; justify-content: center; gap: 14px; font-size: 48px; line-height: 1; }
.kid-world-overlay .kw-rest-text { margin: 10px 0 14px; font-size: 20px; line-height: 1.3; }
.kid-world-overlay .kw-rest-text b { display: block; font-size: 22px; }
.kid-world-overlay .kw-rest-row { display: flex; justify-content: center; gap: 12px; }
.kid-world-overlay .kw-rest-row .kw-chip-btn { min-width: 56px; min-height: 52px; font-size: 22px; }
.kid-world-overlay .kw-rest-ok { min-width: 120px !important; background: #9bd48a; font-weight: 700; }

/* The wool's bags, filled (ANIM-04): the why after a sharing question — a small line of bags that wraps, never past the toast. */
.kw-wool-bags { display: inline-block; margin-top: 4px; font-size: 0.8em; line-height: 1.3; }
.kw-wool-bag { display: inline-block; white-space: nowrap; margin: 0 4px; }
.kw-coins, .kw-gain { white-space: nowrap; }

.kw-orbit {
    right: calc(10px + env(safe-area-inset-right));
    /* Portrait: parked above the plot, under the sign — the plot's right corner stays tappable. */
    top: max(calc(214px + env(safe-area-inset-top)), calc(var(--kw-sign-bottom, 0px) + 10px));
    display: flex; flex-direction: column; gap: 10px;
}
.kw-orbit .kw-round-btn:nth-child(1) { background: #c4b5e8; }
.kw-orbit .kw-round-btn:nth-child(2) { background: #99f0e0; }
.kw-orbit .kw-round-btn:nth-child(3) { background: #f6c453; }

.kw-bottom {
    left: 0; right: 0; bottom: 0;
    padding: 0 calc(12px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
    pointer-events: none;
}
.kw-tray { pointer-events: auto; max-width: 460px; margin: 0 auto; }
.kw-tray-wander { display: flex; align-items: stretch; gap: 10px; }
.kw-big-btn {
    flex: 1;
    min-height: 52px;
    border: 2.5px solid #1e293b; border-radius: 16px;
    box-shadow: 0 3px 0 #1e293b;
    font: 600 19px 'Fredoka', sans-serif;
    padding: 10px 14px 8px;
}
.kw-build { background: #f4a06b; }
.kw-lock { background: #7fd6a4; flex: 1.3; min-height: 46px; font-size: 17px; }
.kw-big-btn:disabled, .kw-pill:disabled, .kw-tool:disabled { opacity: .5; cursor: default; }

.kw-tray-job {
    background: #fffaf1;
    border: 2.5px solid #1e293b; border-radius: 20px;
    box-shadow: 0 4px 0 #1e293b;
    padding: 10px;
}
.kw-pills { display: flex; gap: 10px; margin-bottom: 9px; }
.kw-pill {
    flex: 1; min-height: 56px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 2.5px solid #1e293b; border-radius: 16px;
    background: #fff; box-shadow: 0 3px 0 #1e293b;
    font-size: 20px; padding: 6px 10px;
}
.kw-pill svg { height: 30px; width: auto; display: block; }
.kw-pill-bar { flex: 1.7; }
/* G3+ floors: a third pill, the hundred-slab. Three pills share the row, so the bar gives some width back. */
.kw-pill-slab { flex: 1.15; }
.kw-tray-job.has-slab .kw-pills { gap: 7px; }
.kw-tray-job.has-slab .kw-pill { gap: 5px; padding: 6px 6px; font-size: 18px; }
.kw-tray-job.has-slab .kw-pill-bar { flex: 1.45; }
.kw-tray-job.has-slab .kw-pill-bar svg { height: 24px; }
.kw-tools { display: flex; gap: 7px; align-items: stretch; }
.kw-tool {
    flex: 1; min-width: 0;
    border: 2px solid #1e293b; border-radius: 13px;
    background: #fff; box-shadow: 0 2px 0 #1e293b;
    font-size: 13px; line-height: 1.15; padding: 5px 4px;
}
.kw-tool span { display: block; }

/* Picker sheet: what → which way → what colour. Pictures first; one row at a time. */
.kw-picker {
    background: #fffaf1;
    border: 2.5px solid #1e293b; border-radius: 20px;
    box-shadow: 0 4px 0 #1e293b;
    padding: 9px 10px 11px;
}
.kw-picker-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kw-picker-steps { display: inline-flex; gap: 4px; }
.kw-picker-steps i {
    font-style: normal; font-size: 13px; line-height: 22px; width: 24px; height: 24px; text-align: center;
    border: 2px solid #1e293b; border-radius: 50%; background: #fff; opacity: .45;
}
.kw-picker-steps i.is-on { opacity: 1; background: #f6c453; }
.kw-picker-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }
.kw-picker-body { display: flex; gap: 9px; align-items: stretch; justify-content: center; }
.kw-card {
    position: relative;
    flex: 1; min-width: 0; min-height: 84px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 2.5px solid #1e293b; border-radius: 16px;
    background: #fff; box-shadow: 0 3px 0 #1e293b;
    font-size: 14px; padding: 7px 4px 5px;
}
/* Four cards on the What sheet (🔧 Match · 🔧 Reach · ⬆️ On top · Structures): still ONE row — the cards close up and
   the labels step down so the longest word ("Structures") stays whole inside its card (Structures validation, §4.2d). */
.kw-picker.is-tight .kw-picker-body, .kw-picker.is-tighter .kw-picker-body { gap: 5px; }
.kw-picker.is-tight .kw-card, .kw-picker.is-tighter .kw-card { padding-left: 2px; padding-right: 2px; font-size: 13px; }
.kw-picker.is-tighter .kw-card { font-size: 11px; letter-spacing: -.1px; }
/* More than five cards (a G4+ structure step: six kinds): the sheet wraps, so no label is cut. */
.kw-picker.is-many .kw-picker-body { flex-wrap: wrap; gap: 7px; }
.kw-picker.is-many .kw-card { flex: 1 1 22%; min-height: 72px; }
.kw-picker.is-many .kw-card svg { width: 38px; height: 38px; }
.kw-card svg { width: 46px; height: 46px; display: block; }
.kw-card em { position: absolute; right: 5px; top: 3px; font-style: normal; font-size: 14px; }
.kw-card:disabled { opacity: .45; cursor: default; }
.kw-card:active,
.kw-chip-paint:active,
.kw-card.is-pressed,
.kw-chip-paint.is-pressed { transform: translateY(2px); box-shadow: 0 1px 0 #1e293b; }
.kw-card-real { background: #d9f3e6; }
.kw-card-way { min-height: 92px; }
.kw-way-arrow { display: block; width: 66px; height: 42px; }
.kw-way-arrow svg { width: 100%; height: 100%; }
/* Four ways (both ground lines): four cards in the one row, so the arrows shrink to stay inside them at any turn. */
.kw-picker-body.is-four { gap: 7px; }
.kw-picker-body.is-four .kw-way-arrow { width: 52px; height: 33px; }
.kw-picker-body.is-paint { gap: 8px; flex-wrap: wrap; }
.kw-chip-paint {
    width: 46px; height: 46px; padding: 0;
    border: 2.5px solid #1e293b; border-radius: 14px;
    box-shadow: 0 3px 0 #1e293b;
}
/* How big: S / M / L silhouettes. A size not open yet is greyed, padlocked, and shows the lock-stamps still to earn. */
.kw-card-size svg { width: 60px; height: 56px; }
.kw-card-size.is-locked { background: #e2e8f0; }
.kw-card-size.is-locked svg { filter: grayscale(1); }
.kw-card-size:disabled { opacity: .62; }
.kw-size-pips { display: inline-flex; gap: 3px; }
.kw-size-pips i { width: 9px; height: 9px; border: 2px solid #1e293b; border-radius: 3px; background: #fff; }
.kw-size-pips i.is-on { background: #7fd6a4; }
.kw-card-stack { background: #fde9d4; }
/* HOME-01: a farm building's card (coop / barn / sprinkler) — its emoji sits where the other cards' picture does */
.kw-card-farm { background: #e4f3d8; }
.kw-card-farm .kw-card-emoji { font-size: 34px; line-height: 46px; height: 46px; display: block; }
.kw-picker.is-many .kw-card-farm .kw-card-emoji { font-size: 28px; line-height: 38px; height: 38px; }
/* Host take-down confirm: two big picture buttons, keep first. */
.kw-takedown .kw-td-pic { font-size: 30px; line-height: 1.1; }
.kw-card-keep { background: #d9f3e6; }
.kw-card-gone { background: #fecaca; }
/* Furniture move (§21): the middle card of Keep · Move · Take down, then the decorate nudge's own arrow row with the piece's picture beside the words. */
.kw-card-move { background: #e0f2fe; }
/* …and for a playground piece (a tap PLAYS it): a ✋ Move bar over Build, right after the play. */
.kw-tray-wander { flex-wrap: wrap; }
.kw-play-move { flex: 1 0 100%; background: #e0f2fe; }
.kw-play-move.hidden { display: none; }
/* Catalog IV validation: since the 🔄 Turn card (§25) the row is SEVEN cards — on a 390 px phone each is ~41 px, narrower than the
   arrow's own 50 px, so ◀ and ▶ were drawn over their card's edge. The arrow never outgrows the card it sits in. */
.kw-picker-body.kw-move-body.is-edit .kw-slide-arrow { width: min(50px, 100%); }
/* Landscape phone: the sheet is docked narrow, so each arrow card is ~38 px — the arrow stays INSIDE its card (validation wave). */
@media (orientation: landscape) and (max-height: 480px) {
    .kw-move-body.is-edit .kw-card-slide { padding-left: 2px; padding-right: 2px; }
    .kw-picker-body.kw-move-body.is-edit .kw-slide-arrow { width: 30px; height: 20px; }
}
/* Catalog IV validation: the move row is one or two rows tall (seven cards wrap under 380 px), so its toasts were drawn UNDER it —
   with the voice off a kid who tapped an arrow got no answer. They ride just above it (its height comes from `paintMove`). */
.kid-world-overlay:has(.kw-move:not(.hidden)) .kw-toast { bottom: calc(var(--kw-move-h, 176px) + 22px + env(safe-area-inset-bottom)); }
/* Redesign Option B: the What sheet is a genuine two-row tray now (context cards + the build-kind row), so it can grow
   past the 176px the default toast offset assumes — same class of bug as `--kw-sign-bottom` / `--kw-shop-h` /
   `--kw-move-h` above, closed the same way (`--kw-picker-h`, set in `paintPicker`). Scoped to `#kidWorldPicker` by id,
   not the shared `.kw-picker` class, so it never fights the Move / Take-down sheets' own height variables. */
.kid-world-overlay:has(#kidWorldPicker:not(.hidden)) .kw-toast { bottom: calc(var(--kw-picker-h, 176px) + 22px + env(safe-area-inset-bottom)); }
/* Furniture facing (§25): 🔄 turns the piece a quarter; grey when no way round has room. */
.kw-card-turn { background: #e0f2fe; }
.kw-card-turn.is-locked { background: #e2e8f0; }
.kw-card-turn.is-locked svg { filter: grayscale(1); }
.kw-turn-pic { width: 30px; height: 30px; display: block; margin: 0 auto; }
/* Validation (§25): seven cards leave each arrow card ~41 px at 390 px — the decor row's 38 px arrow touched the card's ink edge. It stays INSIDE its card. */
.kw-picker-body.kw-move-body.is-edit .kw-card-slide { padding-left: 2px; padding-right: 2px; }
.kw-picker-body.kw-move-body.is-edit .kw-slide-arrow { width: 32px; height: 21px; }
/* Seven cards do not fit one row on a small phone or the landscape dock: ◀ ▲ ▼ ▶ over 🔄 🧹 ✅ — every card stays a finger wide. */
@media (max-width: 379px), (orientation: landscape) and (max-height: 480px) {
    .kw-picker-body.kw-move-body.is-edit { flex-wrap: wrap; }
    .kw-picker-body.kw-move-body.is-edit .kw-card-slide { flex: 1 1 20%; }
    .kw-picker-body.kw-move-body.is-edit .kw-card-narrow { flex: 1 1 28%; min-height: 60px; }
}
/* Validation (§25): …and on the small phone the two-row sheet is taller than the toast's resting line — "Moved!" rides above it. */
@media (max-width: 379px) and (orientation: portrait) {
    .kid-world-overlay:has(#kidWorldMove:not(.hidden)) .kw-toast { bottom: calc(248px + env(safe-area-inset-bottom)); }
}
.kw-move-pic { flex: 0 0 auto; display: flex; align-items: center; }
.kw-move-pic svg { height: 30px; width: auto; display: block; }
.kw-iso-mark polygon { fill: #f87171; }
.kw-iso-mark.is-gold polygon { fill: #f6c453; }

/* Decor tokens: a rosette + a numeral, under the read-aloud button. Grey when there is nothing to place. */
.kw-tokens {
    position: absolute; z-index: 2;
    top: calc(64px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right));
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 38px; padding: 3px 10px 3px 5px;
    border: 2.5px solid #1e293b; border-radius: 999px;
    background: #fffaf1; box-shadow: 0 3px 0 #1e293b;
    font: 600 18px/1 'Fredoka', sans-serif; color: #1e293b;
}
.kw-tokens.hidden, .kw-decor-btn.hidden, .kw-ceremony.hidden, .kw-tag.hidden, .kw-decor-hung.hidden { display: none; }
.kw-tokens:disabled { cursor: default; opacity: 1; }
.kw-token-svg { width: 28px; height: 28px; display: block; }
.kw-tokens.is-empty .kw-token-svg, .kw-decor-btn.is-empty svg { filter: grayscale(1); opacity: .6; }
.kw-tokens.is-bump { animation: kw-token-bump .7s ease-out; }
@keyframes kw-token-bump { 30% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(.95); } }
.kid-world-overlay.is-job .kw-tokens { display: none; }
.kw-toast .kw-token-svg, .kw-pic-token .kw-token-svg { display: inline-block; vertical-align: -6px; width: 24px; height: 24px; }
.kw-pic-token i, .kw-pic-trade > i { font-style: normal; font-size: 18px; font-weight: 600; }
.kw-pic-token .kw-token-svg { width: 34px; height: 34px; }
.kw-pic-trade { gap: 6px; }
/* Decorate: the tray's second button (a flag + how many you can place) and its picture sheet. */
.kw-decor-btn { flex: 0 0 84px; position: relative; background: #c4b5e8; padding: 4px 8px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.kw-decor-btn svg { width: 26px; height: 40px; display: block; }
.kw-decor-btn-count { font-size: 17px; }
.kw-decor-count { display: inline-flex; align-items: center; gap: 3px; font-size: 16px; }
.kw-decor-count .kw-token-svg { width: 24px; height: 24px; }
.kw-decor-body { gap: 7px; }
/* The pick (wave 10): the tray's third button (⛏️ + the pouch), and its tool sheet — tools you own, tools the shop sells for coins, Put back. */
.kw-pick-btn { flex: 0 0 72px; position: relative; background: #e9dfc9; padding: 4px 8px; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 24px; }
.kw-pick-btn.hidden, .kw-carve.hidden { display: none; }
.kw-pick-btn-count { font-size: 16px; }
.kw-pouch { display: inline-flex; align-items: center; gap: 3px; font-size: 16px; }
.kw-pouch.is-bump { animation: kw-token-bump .5s ease-out; }
.kw-carve-body { gap: 7px; }
.kw-card-tool { min-height: 74px; font-size: 13px; }
.kw-card-tool .kw-tool-pic { font-size: 28px; line-height: 1.1; }
.kw-card-tool .kw-tool-pic svg { width: 32px; height: 32px; }
.kw-card-tool.is-on { background: #fde9a8; box-shadow: 0 3px 0 #1e293b, inset 0 0 0 2px #f6c453; }
.kw-card-tool.is-shop { background: #eef2f7; }
.kw-card-tool.is-shop.is-locked .kw-tool-pic { filter: grayscale(1); opacity: .6; }
.kw-card-tool.is-shop.is-buying { background: #d9f3e6; }
.kw-card-tool.kw-card-put.is-empty .kw-tool-pic { filter: grayscale(1); opacity: .55; }
.kw-tool-cost { font-weight: 600; white-space: nowrap; }
.kid-world-overlay.is-carve .kw-stage { cursor: crosshair; }
.kw-iso-hole polygon { fill-opacity: .5; stroke-dasharray: 4 3; }
.kw-card-decor { min-height: 78px; padding: 5px 2px; }
.kw-card-decor svg { width: auto; height: 60px; max-width: 100%; }
.kw-card-decor.is-locked { background: #e2e8f0; }
.kw-card-decor.is-locked svg { filter: grayscale(1); }
.kw-decor-body.is-edit { align-items: center; }
.kw-decor-now { flex: 0 0 56px; display: flex; justify-content: center; }
.kw-decor-now svg { height: 64px; width: auto; display: block; }
.kw-card-slide { min-height: 64px; background: #e0f2fe; }
.kw-slide-arrow { display: block; width: 50px; height: 32px; }
.kw-slide-arrow svg { width: 100%; height: 100%; }
.kw-slide-arrow.is-left { transform: scaleX(-1); }
.kw-card-narrow { flex: 0 0 54px; min-height: 64px; }
.kw-card-narrow .kw-td-pic { font-size: 24px; }
.kw-decor-hung { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 8px; flex-wrap: wrap; }
.kw-decor-chip {
    width: 44px; height: 44px; padding: 3px;
    border: 2px solid #1e293b; border-radius: 12px; background: #fff; box-shadow: 0 2px 0 #1e293b;
}
.kw-decor-chip svg { width: 100%; height: 100%; display: block; }
.kw-decor-earn { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; }
.kw-decor-earn i { font-style: normal; font-size: 15px; opacity: .7; }
.kw-decor-earn .kw-token-svg { width: 28px; height: 28px; }
.kw-iso-decor { cursor: pointer; }

/* Tap-to-inspect: whose build is this? One short name chip. */
.kw-tag {
    position: absolute; z-index: 2;
    left: 50%; transform: translateX(-50%);
    bottom: calc(86px + env(safe-area-inset-bottom));
    max-width: calc(100% - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: #fffaf1; border: 2.5px solid #1e293b; border-radius: 999px; box-shadow: 0 3px 0 #1e293b;
    padding: 5px 14px 4px; font: 600 16px/1.2 'Fredoka', sans-serif; pointer-events: none;
}
.kw-tag i { font-style: normal; opacity: .6; }

/* Plot-unlock ceremony: a little meadow map, the new plot popping in. Never blocks a tap, nothing to read. */
.kw-ceremony {
    position: absolute; z-index: 3;
    top: calc(74px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
    background: #fffaf1; border: 2.5px solid #1e293b; border-radius: 20px; box-shadow: 0 4px 0 #1e293b;
    padding: 10px; pointer-events: none;
    animation: kw-ceremony-in .45s cubic-bezier(.3, 1.5, .5, 1);
}
.kw-meadow-map { display: grid; grid-template-columns: repeat(3, 34px); grid-auto-rows: 34px; gap: 4px; }
.kw-meadow-map i {
    display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 17px;
    border: 2px dashed #1e293b; border-radius: 8px; background: #b9dba0; opacity: .55;
}
.kw-meadow-map i.is-open { border-style: solid; background: #fbf1d9; opacity: 1; }
.kw-meadow-map i.is-new { border-style: solid; border-width: 2.5px; background: #f6c453; opacity: 1; animation: kw-plot-pop .9s cubic-bezier(.3, 1.6, .5, 1) .25s both; }
@keyframes kw-ceremony-in { from { transform: translateX(-50%) scale(.6); opacity: 0; } }
@keyframes kw-plot-pop { from { transform: scale(0); } }
.kw-iso-newplot { transform-box: fill-box; transform-origin: center; animation: kw-plot-pop .9s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
.kw-iso-plaque { transform-box: fill-box; transform-origin: 50% 100%; animation: kw-plot-pop .6s cubic-bezier(.3, 1.6, .5, 1) .8s both; }
@media (prefers-reduced-motion: reduce) {
    .kw-ceremony, .kw-meadow-map i.is-new, .kw-iso-newplot, .kw-iso-plaque, .kw-tokens.is-bump { animation: none; }
}

/* Onboarding coach line: one sentence where the job sign will later sit. No Next button. */
.kw-coach {
    position: absolute; z-index: 2;
    top: calc(68px + env(safe-area-inset-top));
    left: 50%; transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 24px);
    display: flex; align-items: center; gap: 10px;
    background: #fffaf1;
    border: 2.5px solid #1e293b; border-radius: 16px;
    box-shadow: 0 3px 0 #1e293b;
    padding: 8px 12px 7px;
    font-size: 15px;
}
.kw-coach.hidden, .kw-skip.hidden { display: none; }
.kw-coach-text { margin: 0; }
.kw-coach-text b { color: #b4441f; }
.kw-skip { width: auto; padding: 0 10px; font-size: 13px; flex: none; }
/* Wave 16: the tutorial's picture trail (spot → Build → size → crate → Lock); the lit one is the next tap. */
.kw-trail { display: flex; gap: 3px; margin: 0 0 3px; font-size: 15px; line-height: 1; }
.kw-trail i { font-style: normal; opacity: .38; filter: grayscale(1); padding: 2px 3px; border-radius: 8px; }
.kw-trail i.is-on { opacity: 1; filter: none; background: #f6c453; box-shadow: 0 0 0 1.5px #1e293b; }

.is-pulse { animation: kw-pulse 1.1s ease-in-out infinite; }
@keyframes kw-pulse { 50% { transform: translateY(-3px); box-shadow: 0 6px 0 #1e293b; } }

/* FLAT-01: no WebGL / lost context → a friendly card in the scene's place; nothing else of the World shows but the top bar. */
.kw-flat {
    position: absolute; z-index: 30;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: calc(70px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
    background: #a9d08e;
}
.kid-world-overlay.is-nogl > :not(.kw-flat):not(.kw-top) { display: none !important; }
.kid-world-overlay.is-nogl .kw-top { z-index: 31; }
.kw-nogl-card {
    max-width: 340px; text-align: center;
    background: #fffaf0; color: #1e293b;
    border: 2.5px solid #1e293b; border-radius: 22px; box-shadow: 0 5px 0 #1e293b;
    padding: 20px 18px 18px;
}
.kw-nogl-pic { font-size: 54px; display: block; line-height: 1.1; }
.kw-nogl-text { margin: 8px 0 14px; font-size: 19px; line-height: 1.35; font-weight: 600; }
.kw-nogl-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.kw-nogl-btn {
    min-height: 48px; min-width: 48px; padding: 0 14px;
    font: inherit; font-size: 17px; font-weight: 600; color: #1e293b;
    background: #fff; border: 2.5px solid #1e293b; border-radius: 16px; box-shadow: 0 3px 0 #1e293b;
    cursor: pointer;
}
.kw-nogl-btn.is-go { background: #f6c453; }
.kw-iso-svg { display: block; width: 100%; height: 100%; }
.kw-iso-svg [data-kw-build], .kw-iso-svg [data-kw-hit] { cursor: pointer; }
.kw-iso-svg.is-wobble .kw-iso-job { animation: kw-iso-wobble .5s ease-in-out; }
.kw-iso-svg.is-pop .kw-iso-job { animation: kw-iso-pop .4s ease-out; }
.kw-iso-pointer { animation: kw-iso-bob 1.1s ease-in-out infinite; }
/* The doll card in the ink view: breathes while it stands, rocks when it waves. */
.kw-iso-doll-art { transform-box: fill-box; transform-origin: 50% 100%; animation: kw-iso-breathe 2.6s ease-in-out infinite; }
.kw-iso-doll.is-wave .kw-iso-doll-art { animation: kw-iso-wave 1.5s ease-in-out; }
@keyframes kw-iso-breathe { 50% { transform: scaleY(1.025); } }
@keyframes kw-iso-wave { 15% { transform: rotate(-9deg); } 35% { transform: rotate(8deg); } 55% { transform: rotate(-6deg); } 75% { transform: rotate(4deg); } }
@keyframes kw-iso-wobble { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes kw-iso-pop { 40% { transform: translateY(-7px); } }
@keyframes kw-iso-bob { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .kw-iso-pointer, .kw-iso-doll-art, .kw-iso-doll.is-wave .kw-iso-doll-art { animation: none; } }

/* Same-device visit: the House guest-pill pattern, under the `{Host}'s World` plaque. */
.kw-guest {
    position: absolute; z-index: 2;
    top: calc(64px + env(safe-area-inset-top));
    left: 50%; transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 24px);
    display: flex; align-items: center; gap: 8px;
    background: #fffaf1;
    border: 2.5px solid #1e293b; border-radius: 999px;
    box-shadow: 0 3px 0 #1e293b;
    padding: 4px 5px 4px 6px;
    font-size: 13px;
}
.kw-guest.hidden { display: none; }
.kw-guest-badge { background: #1e293b; color: #f6c453; border-radius: 999px; padding: 4px 9px 3px; font-size: 11px; letter-spacing: .06em; }
.kw-guest-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-guest-leave { width: auto; height: 28px; padding: 0 11px; border-radius: 999px; background: #f6c453; font-size: 13px; flex: none; }
.kid-world-overlay.is-visiting .kw-sign,
.kid-world-overlay.is-visiting .kw-coach { top: calc(108px + env(safe-area-inset-top)); }
.kid-world-overlay.is-visiting .kw-orbit { top: max(calc(254px + env(safe-area-inset-top)), calc(var(--kw-sign-bottom, 0px) + 10px)); }

/* kw lane A */
/* Wave 13: decor nudge ◀ ▲ ▼ ▶ in one row (the item being moved sits in the sheet's head), the last-cube confirm, the brush's colour row. */
.kw-decor-body.is-edit { gap: 5px; }
.kw-decor-body.is-edit .kw-card-slide { flex: 1 1 0; min-width: 0; }
.kw-decor-body.is-edit .kw-slide-arrow { width: 38px; height: 25px; margin: 0 auto; }
.kw-slide-arrow.is-up { transform: rotate(-.25turn); }
.kw-slide-arrow.is-down { transform: rotate(.25turn); }
.kw-card-slide.is-locked { background: #e2e8f0; }
.kw-card-slide.is-locked svg { filter: grayscale(1); }
.kw-decor-body.is-edit .kw-card-narrow { flex: 0 0 50px; }
.kw-decor-count .kw-decor-now { flex: 0 0 auto; margin-left: 6px; }
.kw-decor-count .kw-decor-now svg { height: 30px; }
.kw-carve-body .kw-card-tool { min-width: 0; padding-left: 2px; padding-right: 2px; }
.kw-card-tool.is-buying .kw-tool-cost { white-space: normal; text-align: center; line-height: 1.15; }
.kw-carve-paints { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.kw-carve-paints.hidden { display: none; }
.kw-carve-paints .kw-chip-paint { width: 40px; height: 40px; }
.kw-carve-paints .kw-chip-paint.is-on { box-shadow: 0 3px 0 #1e293b, 0 0 0 3px #fffaf1, 0 0 0 6px #f6c453; }
/* Math redesign M1 (?kidWorldMath=2): the plan sheet (picture steppers + Build it — no S / M / L cards), the crate question, block credits. */
.kw-picker-body.is-plan { flex-wrap: wrap; }
.kw-plan-row { display: flex; gap: 6px; flex: 1 1 100%; align-items: stretch; }
.kw-plan-row .kw-plan-step { flex: 0 0 48px; min-height: 56px; }
.kw-plan-row .kw-plan-step:disabled { opacity: .45; }
.kw-plan-row .kw-plan-go { flex: 1 1 auto; min-height: 56px; flex-direction: row; gap: 8px; font-size: 17px; }
/* Math redesign M4: a tank's plan row holds six steppers (longer · wider · taller) — they share one line, Build it takes the next; furniture look cards. */
.kw-plan-row.kw-plan-box { flex-wrap: wrap; }
.kw-plan-row.kw-plan-box .kw-plan-step { flex: 1 1 13%; min-width: 40px; min-height: 48px; }
.kw-plan-row.kw-plan-box .kw-plan-go { flex: 1 1 100%; min-height: 48px; }
/* A short portrait phone (360 × 640): the taller tank sheet would cover the very ghost it says to drag — keep its rows short. */
@media (orientation: portrait) and (max-height: 700px) {
    .kw-plan-row.kw-plan-box .kw-plan-step, .kw-plan-row.kw-plan-box .kw-plan-go { min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 480px) {
    .kw-plan-row.kw-plan-box .kw-plan-go { flex: 1 1 24%; }
    .kw-plan-row.kw-plan-box .kw-plan-step { flex: 1 1 9%; }
}
/* Math redesign M2: the Lock-measure bonus sheet (two picture cards for K, three numeral cards from G1) and the Match / Reach cards. */
.kw-measure-body { flex-wrap: wrap; }
.kw-measure-text { flex: 1 1 100%; margin: 0 0 2px; font-size: 16px; font-weight: 600; line-height: 1.25; text-align: center; color: #1e293b; }
.kw-measure-coin { font-size: 15px; font-weight: 700; white-space: nowrap; }
.kw-card-measure { flex: 1 1 28%; min-height: 72px; }
.kw-card.kw-card-measure svg { width: 100%; max-width: 132px; height: 92px; }
/* The Lock line ("They match! +3") is still up when the sheet arrives: it rides above the sheet, never under it. */
.kid-world-overlay:has(.kw-measure:not(.hidden)) .kw-toast { bottom: calc(264px + env(safe-area-inset-bottom)); left: calc(12px + env(safe-area-inset-left)); transform: none; max-width: calc(100% - 100px); }
.kw-card-numeral b { font-size: 30px; line-height: 1; }
.kw-card-measure.is-right { background: #d9f3e6; box-shadow: 0 3px 0 #1e293b, 0 0 0 3px #fffaf1, 0 0 0 6px #34d399; opacity: 1; }
.kw-card-measure.is-wrong { background: #fde2e2; opacity: .8; }
.kw-card-measure:disabled { cursor: default; }
@media (max-height: 480px) {
    .kw-measure-text { font-size: 14px; }
    .kw-card-measure { min-height: 52px; }
    .kw-card.kw-card-measure svg { height: 56px; }
    .kid-world-overlay:has(.kw-measure:not(.hidden)) .kw-toast { bottom: auto; top: calc(64px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 28px); }
    .kw-card-numeral b { font-size: 24px; }
}
.kw-iso-plan polygon { stroke-dasharray: 4 4; fill-opacity: .82; }
.kw-iso-plan.is-lit polygon, .kw-iso-plan-end polygon { stroke-dasharray: none; fill-opacity: 1; }
.kw-tray-crate { display: flex; gap: 10px; align-items: stretch; background: #fffaf1; border: 2.5px solid #1e293b; border-radius: 20px; box-shadow: 0 4px 0 #1e293b; padding: 10px; }
.kw-tray-crate.hidden { display: none; }
.kw-tray-crate.is-wobble { animation: kw-crate-wobble .45s ease-in-out; }
@keyframes kw-crate-wobble { 20% { transform: translateX(-7px) rotate(-1deg); } 50% { transform: translateX(6px) rotate(1deg); } 80% { transform: translateX(-3px); } }
.kw-crate-rows { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.kw-crate-row { display: flex; gap: 7px; align-items: stretch; }
.kw-crate-row .kw-pill { flex: 0 0 auto; min-width: 54px; padding: 6px 9px; font-size: 17px; }
.kw-crate-row .kw-crate-plus { flex: 0 0 38%; }
.kw-crate-row .kw-crate-plus svg { height: 24px; max-width: 74px; }
.kw-crate-count {
    flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 2.5px dashed #1e293b; border-radius: 14px; background: #fffaf1;
    font: 600 26px/1 'Fredoka', sans-serif; color: #1e293b; padding: 3px 8px;
}
.kw-crate-count svg { height: 22px; width: auto; max-width: 90px; }
.kw-crate-cubes { display: flex; flex-wrap: wrap; gap: 2px; max-width: 96px; }
.kw-crate-cube { width: 13px; height: 13px; border: 2px solid #1e293b; border-radius: 3px; }
.kw-crate-send { flex: 0 0 auto; min-width: 92px; }
.kw-pic-crate { font-size: 34px; position: relative; }
.kw-pic-crate i { font-style: normal; font: 600 22px/1 'Fredoka', sans-serif; margin-left: 2px; }
.kw-count-up { font-size: 30px; }
.kw-credits {
    position: absolute; z-index: 2;
    top: calc(110px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right));
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 38px; padding: 3px 10px 3px 7px;
    border: 2.5px solid #1e293b; border-radius: 999px;
    background: #fffaf1; box-shadow: 0 3px 0 #1e293b;
    font: 600 18px/1 'Fredoka', sans-serif; color: #1e293b;
}
.kw-credits.hidden { display: none; }
.kw-credits:disabled { cursor: default; opacity: 1; }
.kw-credits.is-empty span { filter: grayscale(1); opacity: .6; }
.kw-credits.is-bump { animation: kw-token-bump .7s ease-out; }
.kw-credit-purse { display: inline-flex; align-items: center; gap: 3px; font-size: 16px; }
.kw-card-credit { gap: 1px; font-size: 16px; }
.kw-card-credit i { font-style: normal; font-size: 13px; line-height: 1; }
.kw-card-credit .kw-credit-to { display: inline-flex; align-items: center; gap: 3px; }
.kw-card-credit .kw-credit-to svg { width: 20px; height: 20px; }
.kw-card-credit.is-locked { background: #e2e8f0; }
@media (prefers-reduced-motion: reduce) { .kw-tray-crate.is-wobble, .kw-credits.is-bump { animation: none; } }
/* The Learn gate (Key lock 2026-09-20): one grade-band Learn question in the crate question's place — prompt over 2–4 choice cards. */
.kw-tray-learn { background: #fffaf1; border: 2.5px solid #1e293b; border-radius: 20px; box-shadow: 0 4px 0 #1e293b; padding: 10px; }
.kw-tray-learn.hidden { display: none; }
.kw-tray-learn.is-wobble { animation: kw-crate-wobble .45s ease-in-out; }
.kw-learn-prompt { margin: 0 0 8px; text-align: center; font-size: 30px; font-weight: 700; line-height: 1.1; color: #1e293b; }
.kw-learn-prompt i { font-style: normal; color: #c2410c; }
.kw-learn-choices { display: flex; gap: 8px; }
.kw-learn-choices .kw-card-learn { flex: 1 1 0; min-width: 0; min-height: 60px; }
@media (max-height: 520px) {
    .kw-tray-learn { padding: 7px; }
    .kw-tray.kw-tray-learn { max-width: 680px; }
    .kw-learn-body { display: flex; align-items: center; gap: 10px; }
    .kw-learn-prompt { margin: 0; flex: 0 0 auto; font-size: 24px; }
    .kw-learn-choices { flex: 1 1 0; }
    .kw-learn-choices .kw-card-learn { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .kw-tray-learn.is-wobble { animation: none; } }
@media (max-height: 520px) {
    .kw-credits { top: calc(64px + env(safe-area-inset-top)); right: calc(84px + env(safe-area-inset-right)); }
    .kw-plan-row .kw-plan-step, .kw-plan-row .kw-plan-go { min-height: 46px; }
    .kw-tray-crate { padding: 7px; }
    .kw-tray.kw-tray-crate { max-width: 680px; }
    .kw-crate-rows { flex-direction: row; }
    .kw-crate-row { flex: 1 1 0; min-width: 0; gap: 5px; }
    .kw-crate-row .kw-pill { min-width: 42px; min-height: 44px; padding: 4px 6px; }
    .kw-crate-row .kw-crate-plus { flex: 1 1 0; min-width: 0; }
    .kw-crate-row .kw-crate-plus svg, .kw-crate-count svg { max-width: 56px; }
    .kw-crate-count { font-size: 22px; gap: 5px; }
    .kw-crate-send { min-width: 84px; }
    /* #2416: the 250px sign wraps a long ask ("… How many layers?") down past the tray's top, and the tray covered its ✕.
       While the sign is up, the crate tray starts right of it (sign 250 + a 10px gap), so the whole sign stays tappable. */
    .kid-world-overlay:has(#kidWorldSign:not(.hidden)) .kw-tray.kw-tray-crate { margin-left: 260px; margin-right: 0; }
    /* …and the miss hint ("Not enough — …") sits right of the sign too (250 + 12 + a 10px gap), clear of the turn buttons. */
    .kid-world-overlay:has(#kidWorldSign:not(.hidden)):has(.kw-tray-crate:not(.hidden)) .kw-toast { left: calc(272px + env(safe-area-inset-left)); transform: none; max-width: calc(100% - 344px); }
}
@media (max-height: 520px) and (max-width: 759px) {
    /* Too narrow for two crate rows side by side next to the sign (667 × 375: the piece pictures squeezed out): they stack, and the
       taller tray keeps clear of the turn buttons on the right (10px + 46px, less the bottom bar's own 12px). */
    .kid-world-overlay:has(#kidWorldSign:not(.hidden)) .kw-tray.kw-tray-crate { margin-right: 54px; }
    .kid-world-overlay:has(#kidWorldSign:not(.hidden)) .kw-crate-rows { flex-direction: column; }
    /* The stacked tray reaches 127px up (y 248 at 667 × 375), over the miss hint's 84px line: the hint rides above it. */
    .kid-world-overlay:has(#kidWorldSign:not(.hidden)):has(.kw-tray-crate:not(.hidden)) .kw-toast { bottom: calc(138px + env(safe-area-inset-bottom)); }
}
@media (max-height: 520px) {
    .kw-picker.kw-decor { max-width: 360px; }
    /* Landscape: the tool sheet fills the left corner, so its toasts (prices, "is yours!") sit beside it, not under it. */
    .kid-world-overlay:has(.kw-carve:not(.hidden)) .kw-toast { left: auto; right: 72px; transform: none; max-width: calc(100% - 440px); }
    .kw-carve-paints { margin-top: 5px; }
    .kw-carve-paints .kw-chip-paint { width: 34px; height: 34px; }
}
@media (max-height: 520px) {
    .kw-sign { left: calc(12px + env(safe-area-inset-left)); transform: none; width: 250px; top: calc(64px + env(safe-area-inset-top)); padding: 6px 10px; }
    .kw-pic-numeral { font-size: 32px; }
    .kw-tray { max-width: 560px; }
    .kw-tray-job { display: flex; gap: 10px; padding: 7px; }
    .kw-pills { margin: 0; flex: 1; }
    .kw-tools { flex: 1.4; }
    .kw-pill { min-height: 44px; }
    .kw-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
    /* PH2: ✋ Move is a second tray row. The play line was drawn on those buttons (844 × 390). Sit it above the row.
       Only while that tray is the one on screen — a shop or a move sheet keeps its own toast line. */
    .kid-world-overlay:has(#kidWorldWanderTray:not(.hidden) #kidWorldPlayMoveBtn:not(.hidden)) .kw-toast { bottom: calc(148px + env(safe-area-inset-bottom)); }
    /* #1664: "Slide is in! Tap it to slide!" sat on that line, right over the new piece and its ring (the doll walks to it: mid-screen).
       A toast about something standing mid-screen rides the top band instead, under the top bar, between the orbit and the counters.
       !important: the tray rules above carry id-heavy :has() selectors, and this one must win over every one of them. */
    .kw-toast.is-up { top: calc(64px + env(safe-area-inset-top)) !important; bottom: auto !important; max-width: min(460px, calc(100% - 300px)) !important; }
    .kw-orbit { top: 50%; transform: translateY(-50%); }
    .kw-coach { top: calc(62px + env(safe-area-inset-top)); padding: 5px 10px; font-size: 14px; }
    /* Landscape: the guest pill rides in the top bar's own row (the plaque makes room), so the sign and coach keep theirs. */
    .kw-guest { top: calc(17px + env(safe-area-inset-top)); left: auto; right: calc(68px + env(safe-area-inset-right)); transform: none; max-width: 300px; }
    .kid-world-overlay.is-visiting .kw-plaque { margin-right: 300px; }
    .kid-world-overlay.is-visiting .kw-sign { top: calc(64px + env(safe-area-inset-top)); }
    .kid-world-overlay.is-visiting .kw-coach { top: calc(62px + env(safe-area-inset-top)); }
    .kid-world-overlay.is-visiting .kw-orbit { top: 50%; }
    /* Landscape is height-limited: the sheet tucks into the left corner so the plot and its ground arrows stay in view. */
    .kw-picker { padding: 6px 9px 8px; max-width: 300px; margin: 0; }
    .kw-picker-title { font-size: 14px; }
    .kw-picker-head { margin-bottom: 5px; }
    .kw-card { min-height: 58px; font-size: 12px; }
    .kw-card svg { width: 34px; height: 34px; }
    .kw-card-farm .kw-card-emoji { font-size: 26px; line-height: 34px; height: 34px; }
    .kw-picker.is-many, .kw-picker.is-tighter { max-width: 400px; }
    .kw-picker.is-tight { max-width: 340px; }
    /* The Structures box's How big?: six steppers + Build it on one row, every stepper a whole 44px target. */
    .kw-picker.is-box { max-width: 450px; }
    .kw-picker.is-tight .kw-card, .kw-picker.is-tighter .kw-card { font-size: 12px; }
    .kw-picker.is-many .kw-card { flex: 1 1 14%; min-height: 56px; }
    .kw-picker.is-many .kw-card svg { width: 32px; height: 32px; }
    .kw-card-size svg { width: 44px; height: 40px; }
    .kw-takedown .kw-td-pic { font-size: 22px; }
    .kw-card-tool { min-height: 54px; }
    .kw-card-tool .kw-tool-pic { font-size: 20px; }
    .kw-card-tool .kw-tool-pic svg { width: 24px; height: 24px; }
    .kw-carve { max-width: 340px; }
    .kw-card-way { min-height: 58px; }
    .kw-way-arrow { width: 52px; height: 33px; }
    .kw-picker-body.is-four .kw-way-arrow { width: 40px; height: 26px; }
    .kw-chip-paint { width: 40px; height: 40px; }
}

/* kw lane B */
/* Farmer Fern's first-visit tour bubble, her nudge hint, and the bag's Today checklist. */
.kid-world-overlay .kw-tour { position: absolute; z-index: 7; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); width: min(440px, calc(100% - 20px));
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 3px solid #1e293b; border-radius: 20px; background: #fffaf1; box-shadow: 0 5px 0 #1e293b; color: #1e293b; font-family: 'Fredoka', sans-serif; }
.kid-world-overlay .kw-tour.hidden { display: none; }
.kid-world-overlay .kw-tour-face { font-size: 40px; line-height: 1; }
.kid-world-overlay .kw-tour-body { flex: 1; }
.kid-world-overlay .kw-tour-text { margin: 2px 0 8px; font-size: 18px; line-height: 1.35; }
.kid-world-overlay .kw-tour-row { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.kid-world-overlay .kw-tour-next { flex: 0 0 auto; background: #7fd6a4; min-height: 44px; }
.kid-world-overlay .kw-nudge-hint { opacity: .75; font-size: .9em; }
.kid-world-overlay .kw-today { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 5px; font-size: 16px; }
.kid-world-overlay .kw-today .is-done { color: #3f7a52; }
/* COLL-02: the Quest Chart star row over the Today list (n of 3 jobs, then ⭐ earned) */
.kid-world-overlay .kw-today-star { margin: 0 0 6px; padding: 6px 10px; border-radius: 12px; background: #fff7d6; color: #6b5310; font-size: 15px; font-weight: 700; }
.kid-world-overlay .kw-today-star.is-earned { background: #ffe58a; color: #5a4200; }
/* Farmer Fern, the guide (the farm): today's jobs with "Take me there", and the arrow at the screen's edge while the place is out of view. */
.kid-world-overlay .kw-jobs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.kid-world-overlay .kw-job { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon text say" "go go go"; gap: 6px 8px; align-items: center;
    padding: 8px 10px; border: 2px solid #1e293b; border-radius: 14px; background: #fff; }
.kid-world-overlay .kw-job-icon { grid-area: icon; font-size: 26px; }
.kid-world-overlay .kw-job-text { grid-area: text; font-size: 17px; line-height: 1.3; }
.kid-world-overlay .kw-job-say { grid-area: say; }
.kid-world-overlay .kw-job-go { grid-area: go; background: #7fd6a4; min-height: 44px; font-size: 17px; }
.kid-world-overlay .kw-edge-arrow { position: absolute; z-index: 5; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; border: 3px solid #1e293b;
    background: #f6c453; display: grid; place-items: center; pointer-events: none; box-shadow: 0 3px 0 #1e293b; }
.kid-world-overlay .kw-edge-arrow span { display: block; font: 700 26px/1 'Fredoka', sans-serif; color: #1e293b; transform: rotate(var(--kw-edge-turn, 0rad)); }
.kid-world-overlay .kw-edge-arrow.hidden { display: none; }
/* THE FARM (roaming the wilds): the 🎒 bag button under the hops, the farm sheets, seed packets, a villager's bubble. */
.kid-world-overlay .kw-bag-btn { position: absolute; z-index: 2; left: calc(10px + env(safe-area-inset-left)); top: max(calc(326px + env(safe-area-inset-top)), calc(var(--kw-sign-bottom, 0px) + 122px));
    background: #e3c48f; font-size: 22px; display: grid; place-items: center; }
.kid-world-overlay .kw-bag-btn.hidden { display: none; }
.kid-world-overlay .kw-bag-count { position: absolute; right: -6px; bottom: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; border: 2px solid #1e293b;
    background: #fffaf1; font: 700 12px/18px 'Fredoka', sans-serif; color: #1e293b; }
.kid-world-overlay .kw-bag-count:empty { display: none; }
@media (orientation: landscape) and (max-height: 520px) { .kid-world-overlay .kw-bag-btn { top: calc(182px + env(safe-area-inset-top)); } }
/* The shop's shelf tabs land right on it (#1509): lying down they are a column over it, and on a short upright phone (360×640) the sheet rises
   past it. The bag steps away while the shop is up (✅ brings it back). */
.kid-world-overlay.is-shop .kw-bag-btn { display: none; }
.kid-world-overlay .kw-farm-sheet { position: absolute; inset: 0; z-index: 8; display: flex; align-items: flex-end; justify-content: center; }
.kid-world-overlay .kw-farm-back { position: absolute; inset: 0; background: rgba(30, 41, 59, .28); }
.kid-world-overlay .kw-farm-card { position: relative; width: min(460px, calc(100% - 20px)); max-height: 78%; overflow-y: auto; margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    padding: 18px 16px 16px; border: 3px solid #1e293b; border-radius: 22px; background: #fffaf1; box-shadow: 0 5px 0 #1e293b; color: #1e293b; font-family: 'Fredoka', sans-serif; }
/* The card scrolls by touch (#1546). `.kid-world-overlay *` hands every node `touch-action: none` (the World owns each touch for the
   camera), and a finger may only pan when the element it lands on AND each one up to the scroller allow it: so the card and everything
   in it pan-y, its buttons keep `manipulation` (which includes it), the library's shelf row slides both ways, and the swipe stops at the
   card instead of reaching the World. A mouse wheel ignores touch-action, which is why only a finger (a CDP touch drag) catches this. */
.kid-world-overlay .kw-farm-card, .kid-world-overlay .kw-farm-card * { touch-action: pan-y; }
.kid-world-overlay .kw-farm-card button { touch-action: manipulation; }
.kid-world-overlay .kw-farm-card .kw-shelf-row, .kid-world-overlay .kw-farm-card .kw-shelf-row * { touch-action: pan-x pan-y; }
.kid-world-overlay .kw-farm-card { overscroll-behavior: contain; }
.kid-world-overlay .kw-farm-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid #1e293b; background: #fff; font-size: 16px; }
.kid-world-overlay .kw-farm-title { margin: 0 44px 6px 0; font: 600 22px 'Fredoka', sans-serif; }
.kid-world-overlay .kw-farm-h4 { margin-top: 14px; font-size: 19px; }
.kid-world-overlay .kw-farm-title small { font-size: 14px; color: #64748b; }
.kid-world-overlay .kw-farm-sub { margin: 0 0 10px; font-size: 15px; color: #475569; }
.kid-world-overlay .kw-bag-list, .kid-world-overlay .kw-bag-fish { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kid-world-overlay .kw-bag-list li { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.kid-world-overlay .kw-bag-empty { color: #64748b; font-size: 15px; }
.kid-world-overlay .kw-bag-fish { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.kid-world-overlay .kw-bag-fish li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 6px 8px; border: 2px solid #1e293b; border-radius: 12px; background: #e8f4fb; }
.kid-world-overlay .kw-bag-fish li.is-missing { background: #eef2f5; color: #94a3b8; border-style: dashed; }
.kid-world-overlay .kw-bag-fish small { grid-column: 2; font-size: 12px; }
.kid-world-overlay .kw-bag-fish small.kw-bag-fish-when { color: #475569; line-height: 1.25; }
.kid-world-overlay .kw-bag-star { font-weight: 700; color: #b45309; white-space: nowrap; }   /* FARM-07: ⭐ crops */
.kid-world-overlay .kw-bag-pic { font-size: 24px; grid-row: span 2; }
.kid-world-overlay .kw-bag-crop li { background: #eef7e4; }
.kid-world-overlay .kw-bag-crop li.is-missing { background: #f6f8f3; color: #64748b; }
.kid-world-overlay .kw-bag-crop li.is-missing .kw-bag-pic { opacity: .45; }
.kid-world-overlay .kw-bag-crop li.is-now { border-color: #4f8d54; }
.kid-world-overlay .kw-bag-crop .kw-bag-pic { grid-row: span 3; }
/* each season keeps its picture and its word together ("🍂 Fall"); a long line wraps only at the " · " (issue #1595) */
.kid-world-overlay .kw-crop-season { white-space: nowrap; }
/* CAL-01 · the World calendar: the bag's 📅 button, today's day of the week, the season's days in a row (today ringed), the four seasons. */
.kid-world-overlay .kw-bag-cal { margin-left: 6px; vertical-align: middle; }
/* the 📅 button holds a word, so it sizes to its label instead of .kw-chip-btn's fixed 38×34 icon box (issue #1667) */
.kid-world-overlay .kw-chip-btn.kw-bag-cal { width: auto; height: auto; min-height: 34px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.kid-world-overlay .kw-cal-today { margin: 0 0 4px; font-size: 19px; }
.kid-world-overlay .kw-cal-days { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.kid-world-overlay .kw-cal-day { display: flex; flex-direction: column; align-items: center; gap: 1px; min-height: 64px; padding: 4px 2px; border: 2px solid #1e293b; border-radius: 12px; background: #fff; }
.kid-world-overlay .kw-cal-day b { font-size: 19px; line-height: 1.1; }
.kid-world-overlay .kw-cal-day small { font-size: 11px; color: #475569; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kid-world-overlay .kw-cal-pic { font-size: 20px; line-height: 1.1; }
.kid-world-overlay .kw-cal-day.is-past { background: #eef2f5; color: #64748b; }
.kid-world-overlay .kw-cal-day.is-today { background: #f6c453; border-width: 3px; box-shadow: 0 3px 0 #1e293b; }
.kid-world-overlay .kw-cal-day.is-next { border-style: dashed; background: #e8f4fb; }
.kid-world-overlay .kw-cal-day.is-fest:not(.is-today) { background: #fde7ef; border-style: double; border-width: 4px; }
.kid-world-overlay .kw-cal-fest { margin: -2px 0 10px; font-weight: 600; }
.kid-world-overlay .kw-cal-day.is-bday:not(.is-today) { background: #fff3d6; border-style: dashed; }
.kid-world-overlay .kw-cal-bday { margin: -2px 0 10px; font-weight: 600; }
.kid-world-overlay .kw-folk-bday { margin: 0 0 6px; font-weight: 700; color: #b5487a; }
/* FEST-01: the festival board's request list and keepsake */
.kid-world-overlay .kw-fest-row.is-done { opacity: .7; }
.kid-world-overlay .kw-fest-row.is-done .kw-job-text { font-weight: 600; color: #2f7d4f; }
.kid-world-overlay .kw-fest-prize { margin: 8px 0 0; font-size: 18px; }
.kid-world-overlay .kw-fest-prize.is-got { font-weight: 700; color: #2f7d4f; }
.kid-world-overlay .kw-cal-seasons { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.kid-world-overlay .kw-cal-season { padding: 5px 2px; border: 2px solid #cbd5e1; border-radius: 10px; text-align: center; font-size: 14px; white-space: nowrap; color: #64748b; }
.kid-world-overlay .kw-cal-season.is-now { border-color: #1e293b; background: #eef7e4; color: #1e293b; font-weight: 600; }
.kid-world-overlay .kw-seed-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.kid-world-overlay .kw-seed { width: 118px; min-height: 124px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    border: 3px solid #1e293b; border-radius: 16px; background: #f6e7c1; box-shadow: 0 4px 0 #1e293b; cursor: pointer; }
.kid-world-overlay .kw-seed-pic { font-size: 34px; }
.kid-world-overlay .kw-seed-word { font: 700 24px 'Fredoka', sans-serif; letter-spacing: .5px; }
/* FAMILY-01 · the gift picker names each fish ("Golden koi"): a long name wraps, centred, inside its tile. */
.kid-world-overlay .kw-gift-pick .kw-seed-word { max-width: 100%; text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
/* VIL-02 · the seed shop: each packet's price (K: coins to count), today's free packet lit, her purse by the title. */
.kid-world-overlay .kw-seed-price { padding: 2px 8px; border: 2px solid #1e293b; border-radius: 999px; background: #fff; font: 600 15px 'Fredoka', sans-serif; white-space: nowrap; }
.kid-world-overlay .kw-seed.is-free { background: #e4f3d4; }
.kid-world-overlay .kw-seed-price.is-free { background: #fde68a; }
.kid-world-overlay .kw-seed-purse { white-space: nowrap; font-weight: 600; }
/* FISH-05 · the shop's tool: the fast rod, one wide row under the packets (a K price's coins wrap inside it); once hers, a quiet line. */
.kid-world-overlay .kw-tool-row { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 376px; margin: 12px auto 0; padding: 8px 14px; box-sizing: border-box;
    border: 3px solid #1e293b; border-radius: 16px; background: #dbeafe; font: 600 17px 'Fredoka', sans-serif; color: #1e293b; }
/* #2156: scoped to the rod row. A bare .kw-tool also hit the job tray's Undo / Craft ten (64px tall: at 844 × 390 the tray
   grew over the crate toast's line), and a bare .kw-tool-pic grew the shop / carve / yard card pictures past their own size. */
.kid-world-overlay .kw-tool-row.kw-tool { min-height: 64px; box-shadow: 0 4px 0 #1e293b; cursor: pointer; text-align: left; }
.kid-world-overlay .kw-tool-have { justify-content: center; border-style: dashed; background: #fff; }
.kid-world-overlay .kw-tool-row .kw-tool-pic { font-size: 32px; }
.kid-world-overlay .kw-tool-text { display: flex; flex-direction: column; flex: 1; line-height: 1.15; }
.kid-world-overlay .kw-tool-says { font-weight: 500; font-size: 15px; }
.kid-world-overlay .kw-tool .kw-seed-price { white-space: normal; max-width: 128px; text-align: center; }
/* FARM-01: a long packet word (strawberry, sunflower) a size smaller, so it stays inside its packet. */
.kid-world-overlay .kw-seed-word.is-long { font-size: 19px; letter-spacing: 0; }
/* FARM-09: a greenhouse's winter shelf (more than four packets, the spring ones marked 🏡) — smaller packets, three across on a
   phone, so every one shows whole in the card at 360 × 640 without scrolling. */
.kid-world-overlay .kw-seed-row.is-many { gap: 6px; }
.kid-world-overlay .kw-seed-row.is-many .kw-seed { width: 96px; min-height: 96px; gap: 4px; padding: 4px 3px; box-sizing: border-box; border-radius: 14px; }
.kid-world-overlay .kw-seed-row.is-many .kw-seed-pic { font-size: 26px; }
.kid-world-overlay .kw-seed-row.is-many .kw-seed-word { font-size: 20px; letter-spacing: 0; }
.kid-world-overlay .kw-seed-row.is-many .kw-seed-word.is-long { font-size: 14px; }
.kid-world-overlay .kw-seed-row.is-many .kw-seed-price { max-width: 100%; box-sizing: border-box; padding: 1px 5px; font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; }
/* FARM-01: lying down, a season's four packets fit on one row (the card wider and taller), so none is cut off at the bottom. */
@media (orientation: landscape) and (max-height: 520px) { .kid-world-overlay .kw-farm-sheet.is-seeds .kw-farm-card { width: min(560px, calc(100% - 20px)); max-height: 94%; } }
/* ANIM-05 · name your hens: the three hens on top (the picked one lit), picture-word name cards below, and the hens' names in the bag. */
.kid-world-overlay .kw-hen-row { display: flex; gap: 8px; justify-content: center; margin: 0 0 10px; }
.kid-world-overlay .kw-hen { flex: 1 1 0; max-width: 118px; min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 3px solid #1e293b; border-radius: 16px; background: #fffaf1; box-shadow: 0 3px 0 #1e293b; color: #1e293b; cursor: pointer; touch-action: manipulation; }
.kid-world-overlay .kw-hen.is-on { background: #f6c453; }
.kid-world-overlay .kw-hen-pic { font-size: 30px; line-height: 1; }
.kid-world-overlay .kw-hen-name { font: 700 17px 'Fredoka', sans-serif; }
.kid-world-overlay .kw-name-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.kid-world-overlay .kw-name-card { min-height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px;
    border: 3px solid #1e293b; border-radius: 14px; background: #f6e7c1; box-shadow: 0 3px 0 #1e293b; color: #1e293b; cursor: pointer; touch-action: manipulation; }
.kid-world-overlay .kw-name-card.is-on { background: #7fd6a4; }
.kid-world-overlay .kw-name-card.is-taken { opacity: .45; box-shadow: none; border-style: dashed; cursor: default; }
.kid-world-overlay .kw-name-pic { font-size: 28px; line-height: 1; }
.kid-world-overlay .kw-name-word { font: 700 19px 'Fredoka', sans-serif; letter-spacing: .3px; }
.kid-world-overlay .kw-name-done { width: 100%; background: #7fd6a4; }
/* HOME-03: the farm sign sheet — the sign as it reads now, over two rows of word cards */
.kid-world-overlay .kw-sign-board { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 10px; padding: 10px 14px; max-width: 320px;
    border: 3px solid #1e293b; border-radius: 14px; background: #c98f52; box-shadow: 0 3px 0 #1e293b; }
.kid-world-overlay .kw-sign-text { padding: 4px 12px; border-radius: 10px; background: #fffaf1; font: 700 26px 'Fredoka', sans-serif; letter-spacing: .5px; color: #1e293b; }
.kid-world-overlay .kw-sign-part.is-blank { color: #94a3b8; }
.kid-world-overlay .kw-sign-row .kw-name-card { min-height: 70px; }
.kid-world-overlay .kw-bag-hens { list-style: none; margin: 0 0 8px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.kid-world-overlay .kw-bag-hens li { display: flex; align-items: center; gap: 4px; padding: 4px 10px 4px 6px; border: 2px solid #1e293b; border-radius: 999px; background: #fff3c4; font-size: 16px; }
.kid-world-overlay .kw-bag-hens li.is-unnamed { background: #eef2f5; border-style: dashed; color: #64748b; }
.kid-world-overlay .kw-bag-hens .kw-bag-pic { font-size: 20px; }
.kid-world-overlay .kw-bag-name { width: 100%; background: #f6c453; }
/* COLL-01 · the sticker album: the bag's 🌟 button (under the 🗺️ Map), and the album's pages of round stickers — got ones in
   their own colour, the ones still to get grey and dashed; a tapped one is ringed and its line shown under the title. The line
   sticks to the card's top as the album scrolls (#1692: a Friends sticker's line was scrolled away, and with the voice off the tap
   looked dead), flush with its top edge (-18px: the card's top padding), and the card keeps a sticker it scrolls to clear of it. */
.kid-world-overlay .kw-bag-album { display: block; width: 100%; margin: 0 0 10px; background: #fff3c4; text-align: left; }
.kid-world-overlay .kw-bag-album small { font-size: 15px; color: #475569; margin-left: 4px; }
.kid-world-overlay .kw-album-said { min-height: 28px; margin: 0 0 4px; padding: 6px 10px; border-radius: 12px; background: #f6efe0; font-size: 17px; line-height: 1.3; }
.kid-world-overlay .kw-album-said { position: sticky; top: -18px; z-index: 2; box-shadow: 0 2px 0 rgba(30, 41, 59, .18); }
.kid-world-overlay .kw-farm-sheet.is-album .kw-farm-card { scroll-padding-top: 72px; }
.kid-world-overlay .kw-album-grid { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kid-world-overlay .kw-sticker { position: relative; width: 100%; min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 6px 2px 4px; border: 2.5px solid #1e293b; border-radius: 18px; background: var(--kw-sticker, #fff3c4); box-shadow: 0 3px 0 #1e293b; cursor: pointer; font: inherit; color: #1e293b; }
.kid-world-overlay .kw-sticker-pic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid #1e293b; font-size: 26px; line-height: 1; }
.kid-world-overlay .kw-sticker small { max-width: 100%; font-size: 12px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.kid-world-overlay .kw-sticker-hearts { position: absolute; top: 2px; right: 4px; font-size: 11px; font-weight: 700; }
.kid-world-overlay .kw-sticker.is-missing { background: #eef2f5; border-style: dashed; box-shadow: none; color: #64748b; }
.kid-world-overlay .kw-sticker.is-missing .kw-sticker-pic { filter: grayscale(1); opacity: .45; border-style: dashed; }
.kid-world-overlay .kw-sticker.is-picked { outline: 3px solid #f4a06b; outline-offset: 2px; }
.kid-world-overlay .kw-folk { display: flex; gap: 12px; align-items: flex-start; }
.kid-world-overlay .kw-folk-face { font-size: 46px; line-height: 1; }
.kid-world-overlay .kw-bubble { position: relative; margin: 4px 0 8px; padding: 10px 12px; border: 2.5px solid #1e293b; border-radius: 16px; background: #fff; font-size: 20px; line-height: 1.35; }
.kid-world-overlay .kw-bubble-pic { font-size: 28px; }
.kid-world-overlay .kw-bubble-say { margin-left: 6px; vertical-align: middle; }
.kid-world-overlay .kw-farm-actions { display: flex; gap: 10px; }
.kid-world-overlay .kw-folk-give { background: #7fd6a4; }
/* READ-06: the build-a-sentence thank-you — the sentence's spaces over the shuffled word tiles (big at 360 wide) */
.kid-world-overlay .kw-thanks-face { position: relative; }
.kid-world-overlay .kw-thanks-face i { position: absolute; right: -10px; bottom: -6px; font-size: 24px; font-style: normal; }
.kid-world-overlay .kw-thanks-face.is-happy { animation: kw-thanks-hop .6s ease-out 2; }
.kid-world-overlay .kw-thanks-line { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 56px; margin: 6px 0 12px; padding: 8px;
    border: 2.5px dashed #1e293b; border-radius: 14px; background: #fffaf1; }
.kid-world-overlay .kw-thanks-line.is-right { border-style: solid; background: #d9f5e4; }
.kid-world-overlay .kw-thanks-space { min-width: 44px; height: 48px; border-bottom: 3px solid #94a3b8; }
.kid-world-overlay .kw-thanks-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
.kid-world-overlay .kw-thanks-word { min-width: 48px; min-height: 52px; padding: 4px 6px; border: 3px solid #1e293b; border-radius: 14px; background: #f6e7c1; box-shadow: 0 3px 0 #1e293b;
    color: #1e293b; font: 700 21px 'Fredoka', sans-serif; letter-spacing: .3px; cursor: pointer; touch-action: manipulation; }
.kid-world-overlay .kw-thanks-line .kw-thanks-word { min-width: 44px; padding: 4px 5px; font-size: 19px; }
.kid-world-overlay .kw-thanks-word.is-placed { background: #8ec5ee; }
/* #2319: on a narrow phone four columns leave a long word ("smiles", "happy") wider than its tile: three columns. */
@media (max-width: 380px) { .kid-world-overlay .kw-thanks-tiles { grid-template-columns: repeat(3, 1fr); } }
.kid-world-overlay .kw-thanks-line.is-right .kw-thanks-word { background: #7fd6a4; cursor: default; }
.kid-world-overlay .kw-thanks-tile.is-used { visibility: hidden; }
.kid-world-overlay .kw-thanks-tiles.is-wrong .kw-thanks-tile { animation: kw-thanks-back .45s ease-out; }
.kid-world-overlay .kw-thanks-done { width: 100%; background: #7fd6a4; }
@keyframes kw-thanks-back { from { transform: translateY(-46px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes kw-thanks-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-8px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
    .kid-world-overlay .kw-thanks-face.is-happy, .kid-world-overlay .kw-thanks-tiles.is-wrong .kw-thanks-tile { animation: none; }
}
.kid-world-overlay .kw-folk-later { background: #fffaf1; }
.kid-world-overlay .kw-folk-then { display: block; margin-top: 4px; font-size: 28px; }
.kid-world-overlay .kw-folk-steps { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #475569; }
.kid-world-overlay .kw-folk-hello { margin: 2px 0 4px; font-size: 17px; line-height: 1.3; color: #334155; }  /* FOLK-01: what a villager says first (Turtle: its fish tip) */
.kid-world-overlay .kw-tray-give { background: #f6c453; }
.kid-world-overlay .kw-hearts { font-size: 14px; letter-spacing: 1px; }
.kid-world-overlay .kw-sign-word { font: 700 30px 'Fredoka', sans-serif; letter-spacing: 1px; }
/* READ-05 · sight-word signs: a signpost's toast adds this week's line under its word (the week's sight words bold), and the
   find-the-sign game at the crossroads: three sign-word cards, each with its own 🔊 under it; a tried card greys out */
.kid-world-overlay .kw-sign-line { display: block; margin-top: 2px; font-size: 20px; }
.kid-world-overlay .kw-sign-week { color: #fcd34d; }
.kid-world-overlay .kw-find-hear { background: #f6c453; font-size: 20px; }
.kid-world-overlay .kw-find-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kid-world-overlay .kw-find-card .kw-name-card { width: 100%; background: #c98f52; }
.kid-world-overlay .kw-find-word { padding: 4px 8px; border-radius: 8px; background: #fffaf1; font-size: 24px; }
.kid-world-overlay .kw-find-say { min-width: 48px; min-height: 44px; font-size: 20px; }
.kid-world-overlay .kw-find-card.is-tried .kw-name-card { opacity: .45; box-shadow: none; border-style: dashed; cursor: default; }
.kid-world-overlay .kw-find-said { position: sticky; top: -18px; z-index: 2; margin: 0 0 8px; padding: 6px 10px; border-radius: 12px; background: #f6efe0; font-size: 17px; font-weight: 700; line-height: 1.3; box-shadow: 0 2px 0 rgba(30, 41, 59, .18); }
.kid-world-overlay .kw-weather-pic { font-size: 64px; }
.kid-world-overlay .kw-weather-text[data-kw-sky] { font-size: 22px; }
/* VIL-04: the price board — one row a thing, its price as a number (K: coins to count) */
.kid-world-overlay .kw-price-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
/* VIL-09: the shape walk's bar — the shape, Fern's words, a picture counter, 🔊 and ✕ — at the top, under the title */
.kid-world-overlay .kw-shape-bar { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 108px); left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 24px); padding: 6px 8px 6px 12px; border-radius: 18px; background: #fffaf1; border: 3px solid #1e293b; box-shadow: 0 3px 0 rgba(30, 41, 59, .25); font-size: 17px; line-height: 1.2; pointer-events: auto; }
.kid-world-overlay .kw-shape-ask { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.kid-world-overlay .kw-shape-ask b { white-space: normal; }
.kid-world-overlay .kw-shape-count { display: flex; gap: 3px; }
.kid-world-overlay .kw-shape-pic { width: 26px; height: 26px; flex: none; fill: none; stroke: #1e293b; stroke-width: 2.4; stroke-linejoin: round; }
.kid-world-overlay .kw-shape-count .kw-shape-pic { width: 22px; height: 22px; stroke-dasharray: 3 2.5; opacity: .55; }
.kid-world-overlay .kw-shape-count .kw-shape-pic.is-on { fill: #f6c453; stroke-dasharray: none; opacity: 1; }
.kid-world-overlay .kw-shape-bar .kw-chip-btn { flex: none; min-width: 40px; min-height: 40px; }
.kid-world-overlay .kw-hunt-bar[data-kw-hunt="arrows"] .kw-hunt-note { font-size: 20px; letter-spacing: 1px; }
.kid-world-overlay .kw-hunt-bar .kw-hunt-dig { width: auto; background: #f6c453; font-weight: 700; padding: 0 12px; white-space: nowrap; }
.kid-world-overlay .kw-look-bar .kw-look-ask { width: auto; background: #8ec5ee; font-weight: 700; padding: 0 12px; white-space: nowrap; }
/* a landscape phone: the top right, clear of the middle of the scene (the clock tower stands up behind her there) */
@media (orientation: landscape) and (max-height: 500px) { .kid-world-overlay .kw-shape-bar { top: calc(env(safe-area-inset-top, 0px) + 62px); left: auto; right: 64px; transform: none; max-width: 46%; } }
.kid-world-overlay .kw-price-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: #2f5a46; color: #fffaf1; font-size: 18px; min-height: 40px; }
.kid-world-overlay .kw-price-pic { font-size: 24px; }
.kid-world-overlay .kw-price-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kid-world-overlay .kw-price-n { white-space: nowrap; }
.kid-world-overlay .kw-price-coins { letter-spacing: -2px; overflow-wrap: anywhere; text-align: right; }
.kid-world-overlay .kw-price-have { opacity: 0.85; white-space: nowrap; }
.kid-world-overlay .kw-fish-new { color: #b45309; }
/* READ-01 · the library's leveled shelves: book spines on a wooden shelf in the soft ink look; other levels shown, gently faded. */
.kid-world-overlay .kw-shelf { margin: 10px 0 0; padding: 8px 8px 10px; border: 2.5px solid #1e293b; border-radius: 16px; background: #f6e7c1; }
.kid-world-overlay .kw-shelf.is-easy, .kid-world-overlay .kw-shelf.is-later { background: #f3efe6; border-style: dashed; }
.kid-world-overlay .kw-shelf-title { margin: 0 0 6px; font: 600 18px 'Fredoka', sans-serif; display: flex; align-items: center; gap: 6px; }
.kid-world-overlay .kw-shelf-mark { margin-left: auto; padding: 1px 9px; border: 2px solid #1e293b; border-radius: 999px; background: #fffaf1; font: 600 12px 'Fredoka', sans-serif; color: #475569; }
.kid-world-overlay .kw-shelf.is-mine .kw-shelf-mark { background: #7fd6a4; color: #1e293b; }
.kid-world-overlay .kw-shelf-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; border-bottom: 6px solid #b98a52; border-radius: 0 0 4px 4px; scrollbar-width: thin; }
.kid-world-overlay .kw-book { position: relative; flex: 0 0 104px; min-height: 124px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px;
    padding: 8px 6px; border: 2.5px solid #1e293b; border-radius: 12px 12px 6px 6px; background: #fffaf1; box-shadow: 0 3px 0 #1e293b; color: #1e293b; cursor: pointer; touch-action: manipulation; }
.kid-world-overlay .kw-book.is-today { background: #fff3c4; }
.kid-world-overlay .kw-book.is-easy { opacity: .78; }
.kid-world-overlay .kw-book.is-later { opacity: .5; box-shadow: none; cursor: default; }
.kid-world-overlay .kw-book-cover { display: grid; place-items: center; width: 56px; height: 56px; font-size: 32px; }
.kid-world-overlay .kw-book-cover svg { display: block; width: 56px; height: 56px; }
.kid-world-overlay .kw-book-title { font: 600 13px/1.2 'Fredoka', sans-serif; text-align: center; overflow-wrap: anywhere; }
.kid-world-overlay .kw-book-tag { position: absolute; top: -9px; right: -6px; padding: 1px 7px; border: 2px solid #1e293b; border-radius: 999px; background: #fffaf1; font: 600 11px 'Fredoka', sans-serif; }
.kid-world-overlay .kw-book.is-today .kw-book-tag { background: #f6c453; }
/* VIL-01 · the map from the bag: the meadow drawn flat (inline SVG), a round pin per place laid over it in % of the square (so the pins
   sit on the SVG's own grid points at any width), "you are here" by the nearest one. Lying down the square shrinks to fit the card. */
.kid-world-overlay .kw-bag-map { width: 100%; margin: 0 0 10px; background: #9bd3ee; }
.kid-world-overlay .kw-bag-bank { width: 100%; margin: 0 0 10px; background: #f9c6d3; }
/* VIL-05: the piggy bank's sheet — its savings as base-ten pieces */
.kid-world-overlay .kw-bank-pic { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 8px; min-height: 48px; padding: 10px; border-radius: 14px; background: #fdf2f5; border: 2px solid #1e293b; }
.kid-world-overlay .kw-bank-empty { font-size: 2.4rem; opacity: 0.5; }
.kid-world-overlay .kw-bank-sums { font-weight: 700; }
.kid-world-overlay .kw-bank-puts .kw-big-btn, .kid-world-overlay .kw-bank-takes .kw-big-btn { background: #fde68a; }
.kid-world-overlay .kw-bank-puts { flex-wrap: wrap; }
.kid-world-overlay .kw-bank-put { flex: 1 1 auto; min-width: 4.6em; line-height: 1.2; padding-left: 8px; padding-right: 8px; font-size: 1rem; }      /* place words ("＋ 2 tens") wrap to a new row when long */
.kid-world-overlay .kw-map { position: relative; width: min(100%, 340px, calc(78vh - 110px)); aspect-ratio: 1; margin: 4px auto 0; container-type: inline-size; }
.kid-world-overlay .kw-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kid-world-overlay .kw-map-pin { position: absolute; width: 14%; aspect-ratio: 1; margin: -7% 0 0 -7%; padding: 0; border: 2.5px solid #1e293b; border-radius: 50%;
    background: #fffaf1; box-shadow: 0 2px 0 #1e293b; display: grid; place-items: center; cursor: pointer; touch-action: manipulation; color: #1e293b; }
.kid-world-overlay .kw-map-pin.is-here { background: #f6c453; }
.kid-world-overlay .kw-map-pic { font-size: 7cqw; line-height: 1; }
.kid-world-overlay .kw-map-name { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1px; padding: 0 4px; border-radius: 6px;
    background: rgba(255, 250, 241, .9); font: 600 clamp(9px, 3.6cqw, 13px)/1.2 'Fredoka', sans-serif; white-space: nowrap; pointer-events: none; }
.kid-world-overlay .kw-map-you { position: absolute; top: -45%; left: -30%; font-size: 5.5cqw; line-height: 1; pointer-events: none; }
/* VIL-08: the hidden spots — a row of ❓ under the G5 map; while she finds one, the whole grid is one tap surface over the pins. */
.kid-world-overlay .kw-map-find { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 6px;
    background: transparent; cursor: crosshair; touch-action: manipulation; }
.kid-world-overlay .kw-map.is-finding .kw-map-pin { opacity: .4; }
.kid-world-overlay .kw-map svg.kw-map-top { z-index: 1; pointer-events: none; }
.kid-world-overlay .kw-map-hidden { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 8px auto 0; }
.kid-world-overlay .kw-map-hidden-t { font: 700 .95rem/1.2 'Fredoka', sans-serif; color: #1e293b; }
.kid-world-overlay .kw-map-q { min-width: 52px; min-height: 44px; font-size: 1.25rem; }
.kid-world-overlay .kw-map-q.is-on { background: #f6c453; }
.kid-world-overlay .kw-map-stop { min-height: 44px; }
.kid-world-overlay .kw-map-wrong { margin: 2px 0 0; color: #b91c1c; font-weight: 700; }
/* Lying down there is no room for the map under the words: the words on the left, the map as tall as the card on the right. */
@media (orientation: landscape) and (max-height: 520px) {
    .kid-world-overlay .kw-farm-sheet.is-map .kw-farm-card { width: min(680px, calc(100% - 20px)); max-height: 94%; display: grid; grid-template-columns: 1fr auto; column-gap: 14px; align-content: start; }
    .kid-world-overlay .kw-farm-sheet.is-map .kw-farm-title, .kid-world-overlay .kw-farm-sheet.is-map .kw-map-help,
    .kid-world-overlay .kw-farm-sheet.is-map .kw-map-wrong, .kid-world-overlay .kw-farm-sheet.is-map .kw-map-hidden { grid-column: 1; }
    .kid-world-overlay .kw-farm-sheet.is-map .kw-map { grid-column: 2; grid-row: 1 / span 5; width: min(340px, calc(94vh - 44px)); margin: 0; }
}
.kid-world-overlay .kw-story-pic { display: grid; place-items: center; margin: 0 auto 6px; width: 120px; height: 120px; border: 2.5px solid #1e293b; border-radius: 18px; background: #e8f4fb; }
.kid-world-overlay .kw-story-pic svg { display: block; width: 104px; height: 104px; }
.kid-world-overlay .kw-story-text { margin: 4px 0 10px; padding: 12px 14px; border: 2.5px solid #1e293b; border-radius: 16px; background: #fff; font-size: 20px; line-height: 1.45; }
.kid-world-overlay .kw-farm-sheet.is-story .kw-story-text { font-size: 19px; }
.kid-world-overlay .kw-story-go { background: #7fd6a4; }
.kid-world-overlay .kw-story-back { background: #fffaf1; }
/* READ-02 · the mailbox: a letter on cream paper in the soft ink look (K: a postcard with its big picture); the letter box's rows. */
.kid-world-overlay .kw-letter { margin: 4px 0 10px; padding: 12px 14px; border: 2.5px solid #1e293b; border-radius: 16px; background: #fffaf1; box-shadow: 0 3px 0 #1e293b; }
.kid-world-overlay .kw-letter.is-postcard { background: #fff3c4; }
.kid-world-overlay .kw-postcard-pic { display: grid; place-items: center; margin: 0 auto 6px; width: 104px; height: 104px; border: 2.5px solid #1e293b; border-radius: 18px; background: #e8f4fb; font-size: 64px; }
.kid-world-overlay .kw-letter-kind { margin: 0 0 4px; font: 600 13px 'Fredoka', sans-serif; color: #475569; }
.kid-world-overlay .kw-letter-greet { margin: 0 0 4px; font-size: 19px; }
.kid-world-overlay .kw-letter-body { margin: 0 0 6px; font-size: 20px; line-height: 1.45; }
.kid-world-overlay .kw-letter.is-postcard .kw-letter-body { font-size: 24px; text-align: center; }
.kid-world-overlay .kw-letter-sign { margin: 0; text-align: right; font-size: 18px; line-height: 1.35; }
.kid-world-overlay .kw-letter-go { background: #7fd6a4; }
.kid-world-overlay .kw-letter-box { background: #fffaf1; }
.kid-world-overlay .kw-tale-go { background: #7fd6a4; }   /* FOLK-02: a villager's tale reuses the letter's card */
.kid-world-overlay .kw-bag-tales { background: #fff3c4; }
/* READ-08: a caught fish's 📖 Fact button in the fish book, and its page (the letter's card) */
.kid-world-overlay .kw-fish-fact-btn { grid-column: 1 / -1; margin-top: 6px; min-height: 40px; padding: 4px 10px; border: 2px solid #1e293b; border-radius: 10px; background: #fff3c4; box-shadow: 0 2px 0 #1e293b; font: 600 15px 'Fredoka', sans-serif; color: #1e293b; cursor: pointer; }
.kid-world-overlay .kw-fish-fact-btn:active { transform: translateY(2px); box-shadow: 0 0 0 #1e293b; }
.kid-world-overlay .kw-fact-go { background: #7fd6a4; }
.kid-world-overlay .kw-fact-sticker { font-weight: 700; color: #b45309; }
.kid-world-overlay .kw-letter-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kid-world-overlay .kw-letter-row { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 8px 12px; border: 2.5px solid #1e293b; border-radius: 14px;
    background: #fffaf1; box-shadow: 0 3px 0 #1e293b; color: #1e293b; font: 600 17px 'Fredoka', sans-serif; text-align: left; cursor: pointer; touch-action: manipulation; }
.kid-world-overlay .kw-letter-row.is-today { background: #fff3c4; }
.kid-world-overlay .kw-letter-row .kw-book-tag { position: static; margin-left: auto; }
/* READ-04 · Fox's recipe card: a cream index card in the soft ink look — the dish, what to bring (the cup line marked), the steps. */
.kid-world-overlay .kw-recipe { margin: 4px 0 8px; padding: 10px 14px; border: 2.5px solid #1e293b; border-radius: 16px; background: #fffaf1; box-shadow: 0 3px 0 #1e293b; }
.kid-world-overlay .kw-recipe-title { margin: 0 0 6px; font: 700 20px 'Fredoka', sans-serif; }
.kid-world-overlay .kw-recipe-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 18px; line-height: 1.35; }
.kid-world-overlay .kw-recipe-list li.is-cup { font-weight: 700; }
.kid-world-overlay .kw-recipe-pic { display: inline-block; min-width: 1.6em; }
.kid-world-overlay .kw-recipe.is-picture .kw-recipe-list { font-size: 22px; }
.kid-world-overlay .kw-recipe-steps { margin: 8px 0 0; padding-left: 22px; font-size: 17px; line-height: 1.4; }
.kid-world-overlay .kw-recipe-go { background: #7fd6a4; }
.kid-world-overlay .kw-recipe-fox { background: #fffaf1; }
/* VIL-03: what the card takes from her basket, and 🍽️ Share's friends */
.kid-world-overlay .kw-cook { margin: 0 0 8px; padding: 8px 12px; border: 2px dashed #1e293b; border-radius: 14px; background: #fff; }
.kid-world-overlay .kw-cook-title { margin: 0 0 4px; font: 700 16px 'Fredoka', sans-serif; }
.kid-world-overlay .kw-cook-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 17px; }
.kid-world-overlay .kw-cook-list li.is-have { color: #2f7a46; font-weight: 700; }
.kid-world-overlay .kw-recipe-share { background: #ffd6a5; }
.kid-world-overlay .kw-share-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.kid-world-overlay .kw-share-to { background: #fffaf1; }
.kid-world-overlay .kw-notes { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.kid-world-overlay .kw-note { position: relative; padding: 10px 14px 10px; border: 2.5px solid #1e293b; border-radius: 14px; background: #fffaf1; box-shadow: 0 3px 0 #1e293b; }
.kid-world-overlay .kw-note::before { content: ''; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border: 2px solid #1e293b; border-radius: 50%; background: #f4715e; }
.kid-world-overlay .kw-note.is-taken { background: #fff3c4; }
.kid-world-overlay .kw-note.is-done { background: #e3f4e6; opacity: .85; }
.kid-world-overlay .kw-note-title { margin: 0 0 2px; font: 700 15px 'Fredoka', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #475569; }
.kid-world-overlay .kw-note-stamp { margin-left: 6px; font-size: 13px; text-transform: none; letter-spacing: 0; color: #1e293b; }
.kid-world-overlay .kw-note-pic { margin: 0; font-size: 34px; line-height: 1.1; text-align: center; }
.kid-world-overlay .kw-note-text { margin: 0 0 4px; font-size: 20px; line-height: 1.4; }
.kid-world-overlay .kw-note-from { margin: 0; text-align: right; font-size: 18px; }
.kid-world-overlay .kw-note-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.kid-world-overlay .kw-note-take { margin-left: auto; background: #7fd6a4; }
.kid-world-overlay .kw-note-go { background: #7fd6a4; }
/* The farm's questions (roaming the wilds): the picture a question counts on — rows of seeds, crops or coins, or a villager's word picture. */
.world-q-visual { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 4px 0 10px; font-size: 1.55rem; line-height: 1.2; }
.world-q-picture { font-size: 2.6rem; white-space: pre-line; }   /* a line break in the picture is a new row (the café's batches) */
/* ANIM-02: the coop clock in the question popup — Learn's clock, sized to leave the choices in view (smaller lying down) */
.world-q-clock { width: 168px; height: 168px; border-radius: 50%; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); }
@media (orientation: landscape) and (max-height: 500px) { .world-q-clock { width: 112px; height: 112px; } }
/* MAP-05: the lookout's path from above */
.world-q-turn { width: 180px; height: 180px; }
.world-q-turn svg { width: 100%; height: 100%; display: block; }
@media (orientation: landscape) and (max-height: 500px) { .world-q-turn { width: 120px; height: 120px; } }
/* lying down there is no room for a row per batch: the batches share a line again, so the choices stay in view */
@media (orientation: landscape) and (max-height: 500px) { .world-q-picture { white-space: normal; } }
.world-q-picture.is-long { font-size: 1.45rem; line-height: 1.35; }
/* A row of ten (a carton of eggs, a crate) fits a 360-wide phone: the emoji shrink with the screen, never past the card. */
.world-q-row { letter-spacing: 2px; white-space: nowrap; font-size: clamp(1rem, 5.2vw, 1.55rem); }
.world-q-line { font-size: 1.2rem; max-width: 100%; overflow-wrap: anywhere; padding: 2px 10px; border-radius: 10px; background: #f6efe0; }
/* VIL-04: the price board's question — a day's name, then its coins */
.world-q-day { text-align: left; }
/* VIL-05: the piggy bank's question — the bank's base-ten pieces and hers, a row each (thousands, slabs, bars, cubes) */
.world-q-visual.is-tens { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px 14px; }
/* lying down, the pieces sit beside the prompt and the choices (as the Winter Lights' array does, #2025), so all four stay in view */
@media (orientation: landscape) and (max-height: 500px) {
    #readingNookModal .modal-card:has(.world-q-visual.is-tens) { max-width: min(680px, 94vw); }
    #readingNookModal .modal-body:has(.world-q-visual.is-tens) { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
        column-gap: 1rem; align-items: start; padding-top: 0.75rem; padding-bottom: 0.75rem; }
    #readingNookModal .modal-body:has(.world-q-visual.is-tens) > * { grid-column: 2; margin-top: 0; }
    #readingNookModal .modal-body:has(.world-q-visual.is-tens) > #readingNookVisual { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; align-self: center; }
    #readingNookModal .modal-body:has(.world-q-visual.is-tens) > .reading-nook-speak-btn { justify-self: start; margin-bottom: 0.5rem; }
    #readingNookModal .modal-body:has(.world-q-visual.is-tens) .reading-nook-prompt { margin-bottom: 0.6rem; }
    #readingNookModal .modal-body:has(.world-q-visual.is-tens) .reading-nook-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .world-q-visual.is-tens { flex-direction: column; align-items: center; margin-top: 0; }
}
.world-q-tens { display: flex; align-items: flex-end; gap: 8px; text-align: left; }
.world-q-tens-mark { flex: none; font-size: 1.1rem; min-width: 1.4em; }
.world-q-tens-pieces { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
.kw-ten-place { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; max-width: 100%; }
.kw-ten-place svg { display: block; flex: none; }
.kw-ten-o { width: 11px; height: 11px; }
.kw-ten-t { width: 9px; height: 38px; }
.kw-ten-h { width: 34px; height: 34px; }
.kw-ten-th { width: 34px; height: 42px; }
.world-q-day-name { display: inline-block; min-width: 7.2em; font-size: 1rem; }
.world-q-purse { background: #e8f4fb; }
/* WHY (WHY-01): after a miss the picture counts the right answer — what is not counted yet dims, each counted thing (or row, or
   thing sold) lights up with the running count beside it. Reduced motion: the lit picture at once, no pop. */
/* a counted row: the count sits beside it, or under it when a row of ten leaves no room (never past the card) */
.world-q-visual.is-why .world-q-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 0.28em; max-width: 100%; }
.world-q-visual.is-why .world-q-cell { display: inline-block; opacity: 0.4; transition: opacity 0.2s ease; }
.world-q-visual.is-why .world-q-cell.is-lit { opacity: 1; animation: world-q-pop 0.32s ease-out; }
/* FARM-02: the inside of a ring of fence posts — keeps its place, shows nothing */
.world-q-gap { visibility: hidden; }
/* #1735: a ring is a fixed grid of posts, sized so all its columns (and the count tag kept free on the right) fit the card's
   width, and its rows to what the screen's height leaves (lying down, the question starts on screen). It never wraps, before or after a miss; the count sits on
   the row's right end, so a row keeps its place when its tag comes. */
.world-q-visual.is-ring { container-type: inline-size; gap: 0; line-height: 1; }
.world-q-visual.is-ring .world-q-row, .world-q-visual.is-ring.is-why .world-q-row {
    display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; column-gap: 0.15em; max-width: none;
    position: relative; padding-right: 2.2rem; letter-spacing: 0;
    font-size: max(0.7rem, min(1.55rem, calc((100vw - 7.5rem) / (var(--cols) * 1.35)), calc((100vh - 16rem) / var(--rows))));
    font-size: max(0.7rem, min(1.55rem, calc((100cqi - 2.2rem) / (var(--cols) * 1.35)), calc((100dvh - 16rem) / var(--rows)))); }
.world-q-visual.is-ring .world-q-cell, .world-q-visual.is-ring .world-q-gap { display: inline-block; flex: none; width: 1.2em; text-align: center; }
/* FEST-03: the prize table's rows (up to 12 weights or inches, and a 🏆 / 🌱 mark) are sized so the longest fits the card's width */
/* — and to what the screen's height leaves (lying down, the choices stay in view); the rows start at one left edge, so two
   rows of weights compare like bars */
.world-q-visual.is-fit { container-type: inline-size; display: grid; justify-content: center; justify-items: start; }
.world-q-visual.is-fit .world-q-row { letter-spacing: 0; line-height: 1.15;
    font-size: max(0.7rem, min(1.55rem, calc((100vw - 5rem) / (var(--cols) * 1.5)), calc((100vh - 17rem) / var(--rows))));
    font-size: max(0.7rem, min(1.55rem, calc(100cqi / (var(--cols) * 1.5)), calc((100dvh - 17rem) / var(--rows)))); }
/* #2018: a tall grid (the apple tree: up to 9 branches) sits over a prompt and four choices in two rows, so its rows get what
   is left of the screen's height once those are in view (at 360 × 640 all four choices show; lying down, the prompt). A miss's
   count sits in a slot kept free at the row's right end (as the fence's ring does), so the rows never grow or wrap. */
.world-q-visual.is-fit.is-tall { row-gap: 2px; }
/* one fixed width per apple and one gap, before and after a miss (as the ring), so a row is the same width in both and in any emoji font */
.world-q-visual.is-fit.is-tall .world-q-row, .world-q-visual.is-fit.is-tall.is-why .world-q-row {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; column-gap: 0.15em; max-width: none;
    position: relative; padding-right: 2.6rem;
    font-size: max(0.7rem, min(1.55rem, calc((100vw - 7.6rem) / (var(--cols) * 1.35)), calc((100vh - 32rem - (var(--rows) - 1) * 2px) / (var(--rows) * 1.15))));
    font-size: max(0.7rem, min(1.55rem, calc((100cqi - 2.6rem) / (var(--cols) * 1.35)), calc((100dvh - 32rem - (var(--rows) - 1) * 2px) / (var(--rows) * 1.15)))); }
.world-q-visual.is-fit.is-tall .world-q-cell { display: inline-block; flex: none; width: 1.2em; text-align: center; }
.world-q-visual.is-fit.is-tall .world-q-tag { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; padding: 0 5px; font-size: 0.8rem; line-height: 1.15; }
/* FARM-04: the sprinkler's patch — a small drop over each plant (a picture only: no number, nothing a screen reader counts twice) */
.world-q-visual.is-drops .world-q-row { line-height: 1.9; }
.world-q-visual.is-drops .world-q-cell { position: relative; display: inline-block; }
.world-q-visual.is-drops .world-q-cell::before { content: '💧'; content: '💧' / ''; position: absolute; left: 50%; top: -0.5em; transform: translateX(-50%); font-size: 0.55em; line-height: 1; pointer-events: none; }
/* FARM-05: the compost bin — one row of equal parts in a wooden frame; full parts 🟫, empty ones ⬜. On a miss only the empty
   parts are counted (lit), and the running count sits under the bin, so ten parts still fit a 360-wide card. */
.world-q-visual.is-bin .world-q-row, .world-q-visual.is-bin.is-why .world-q-row { position: relative; display: flex; flex-wrap: nowrap; column-gap: 0; width: min(100%, 20rem); margin: 0 auto; letter-spacing: 0;
    border: 3px solid #8a5a2b; border-radius: 8px; background: #fbf3e4; }
.world-q-visual.is-bin .world-q-cell { flex: 1 1 0; min-width: 0; text-align: center; padding: 0.3em 0; border-left: 2px dashed #b07a45; font-size: min(1em, 6vw); }
.world-q-visual.is-bin .world-q-cell:first-of-type { border-left: 0; }
@media (max-height: 500px) { .world-q-visual.is-bin .world-q-cell { padding: 0.08em 0; font-size: min(0.85em, 6vw); } }
.world-q-visual.is-bin.is-why { padding-bottom: 1.9rem; }
.world-q-visual.is-bin .world-q-tag { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin: 6px 0 0; }
.world-q-visual.is-ring .world-q-tag { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; padding: 0 5px; font-size: 0.8rem; line-height: 1.15; }
.world-q-visual.is-why .world-q-line { opacity: 0.55; transition: opacity 0.2s ease; }
.world-q-visual.is-why .world-q-line.is-lit { opacity: 1; box-shadow: 0 0 0 2px #f2b84b inset; }
.world-q-tag { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: #fff3c4; color: #1e293b;
    font-size: 0.95rem; font-weight: 800; letter-spacing: 0; vertical-align: middle; white-space: nowrap; }
.reading-nook-choices .choice-bubble-btn.is-out { opacity: 0.35; text-decoration: line-through; }
/* #2025: a tall array (the Winter Lights at G4–G5: 7–10 rows of up to 12 💡) over its prompt and three choices. Standing up,
   the three choices sit in one row and the rows get what the screen's height leaves, so all three are in view at 360 × 640;
   lying down, the lights sit beside the prompt and the choices. A miss's count sits in a slot kept free at the row's right
   end (as the fence's ring does), so the rows never grow or wrap. */
.world-q-visual.is-big { container-type: inline-size; display: grid; justify-content: center; justify-items: start; row-gap: 2px; }
.world-q-visual.is-big .world-q-row, .world-q-visual.is-big.is-why .world-q-row {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; column-gap: 0.15em; max-width: none;
    position: relative; padding-right: 2.6rem; letter-spacing: 0; line-height: 1.15;
    font-size: max(0.7rem, min(1.55rem, calc((100vw - 7.6rem) / (var(--cols) * 1.35)), calc((90vh - 25rem - (var(--rows) - 1) * 2px) / (var(--rows) * 1.15))));
    font-size: max(0.7rem, min(1.55rem, calc((100cqi - 2.6rem) / (var(--cols) * 1.35)), calc((90dvh - 25rem - (var(--rows) - 1) * 2px) / (var(--rows) * 1.15)))); }
.world-q-visual.is-big .world-q-cell { display: inline-block; flex: none; width: 1.2em; text-align: center; }
.world-q-visual.is-big .world-q-tag { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; padding: 0 5px; font-size: 0.8rem; line-height: 1.15; }
#readingNookModal .modal-body:has(.world-q-visual.is-big) .reading-nook-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* HOME-02: her room square by square (a piece's picture or ⬜ floor in each) — a tight floor that never wraps, sized to the card */
.world-q-visual.is-room { display: grid; justify-content: center; row-gap: 1px; line-height: 1.1; }
.world-q-visual.is-room .world-q-row { display: flex; flex-wrap: nowrap; column-gap: 1px; letter-spacing: 0; font-size: min(1.55rem, 8vw); }
.world-q-visual.is-room .world-q-cell { display: inline-block; flex: none; width: 1.2em; text-align: center; }
@media (orientation: landscape) and (max-height: 500px) { .world-q-visual.is-room .world-q-row { font-size: min(1.2rem, 8vh); } }
/* HOME-02: the 🏠 My room sheet — the same floor, each piece's squares in its own tint, the empty floor plain */
.kid-world-overlay .kw-room-floor { display: grid; grid-template-columns: repeat(var(--cols, 6), 1fr); gap: 2px; width: min(100%, 18rem); margin: 6px auto 4px; padding: 6px;
    border: 3px solid #1e293b; border-radius: 12px; background: #f6ead7; }
.kid-world-overlay .kw-room-sq { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: #fffaf1; font-size: min(1.4rem, 6vw); line-height: 1; }
.kid-world-overlay .kw-room-sq.is-piece { background: #fde3c1; }
.kid-world-overlay .kw-room-why { margin: 2px 0 4px; padding: 4px 10px; border-radius: 10px; background: #fff3c4; color: #1e293b; font-weight: 800; text-align: center; }
.kid-world-overlay .kw-room-pieces { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 8px; }
@media (orientation: landscape) and (max-height: 500px) { .kid-world-overlay .kw-room-floor { width: min(100%, 13rem); } }
@media (orientation: landscape) and (max-height: 500px) {
    #readingNookModal .modal-card:has(.world-q-visual.is-big) { max-width: min(680px, 94vw); }
    #readingNookModal .modal-body:has(.world-q-visual.is-big) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
        column-gap: 1rem; align-items: start; padding-top: 0.75rem; padding-bottom: 0.75rem; }
    #readingNookModal .modal-body:has(.world-q-visual.is-big) > * { grid-column: 2; margin-top: 0; }
    #readingNookModal .modal-body:has(.world-q-visual.is-big) > #readingNookVisual { grid-column: 1; grid-row: 1 / -1; margin-bottom: 0; }
    #readingNookModal .modal-body:has(.world-q-visual.is-big) > .reading-nook-speak-btn { justify-self: start; margin-bottom: 0.5rem; }
    #readingNookModal .modal-body:has(.world-q-visual.is-big) .reading-nook-prompt { margin-bottom: 0.6rem; }
    .world-q-visual.is-big { margin-top: 0; }
    .world-q-visual.is-big .world-q-row, .world-q-visual.is-big.is-why .world-q-row {
        font-size: max(0.7rem, min(1.55rem, calc((100vw / 2 - 7rem) / (var(--cols) * 1.35)), calc((90vh - 8.5rem - (var(--rows) - 1) * 2px) / (var(--rows) * 1.15))));
        font-size: max(0.7rem, min(1.55rem, calc((100cqi - 2.6rem) / (var(--cols) * 1.35)), calc((90dvh - 8.5rem - (var(--rows) - 1) * 2px) / (var(--rows) * 1.15)))); }
}
.reading-nook-feedback.is-why { color: #1e293b; }
@keyframes world-q-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .world-q-visual.is-why .world-q-cell, .world-q-visual.is-why .world-q-line { transition: none; }
    .world-q-visual.is-why .world-q-cell.is-lit { animation: none; }
}
/* Gone fishing (roaming the wilds): the big Reel button over the stage — calm while the line floats, lit and bouncing when a fish bites. */
.kid-world-overlay .kw-reel-btn { position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); transform: translateX(-50%); z-index: 6;
    min-width: 168px; min-height: 64px; padding: 10px 26px; border: 3px solid #1e293b; border-radius: 999px; background: #fffaf1; color: #1e293b;
    font: 700 1.35rem/1 'Fredoka', sans-serif; box-shadow: 0 4px 0 #1e293b; opacity: .72; touch-action: manipulation; cursor: pointer; }
.kid-world-overlay .kw-reel-btn.hidden { display: none; }
.kid-world-overlay .kw-reel-btn.is-hot { background: #f6c453; opacity: 1; animation: kw-reel-bounce .45s ease-in-out infinite alternate; }
@keyframes kw-reel-bounce { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .kid-world-overlay .kw-reel-btn.is-hot { animation: none; } }
/* Wave 12: materials — a second row of ink swatches under the colour chips (one tap, same as a colour). */
.kw-mat-row { flex: 1 0 100%; display: flex; gap: 8px; justify-content: center; padding-top: 7px; border-top: 2px dashed rgba(30, 41, 59, .22); }
.kw-chip-mat { display: grid; place-items: center; overflow: hidden; background: #fffaf1; }
.kw-chip-mat .kw-mat-svg { display: block; width: 100%; height: 100%; }
/* Wave 14: yard scenery — the yard box reuses the pick's tool cards; its pieces are ink pictures, not emoji. */
/* Redesign Option B (§4 of the picker redesign plan): the build-kind row. Structures, Border and the Furniture shop are
   the three things a kid can actually build, so they share the picker's own `.kw-card` footprint (84px, icon over
   label) here instead of a smaller pill row — one visual family, always full-width, always icon-forward.
   `.kw-yard-row` stays only as an identifying class (existing probes / smokes query it); it draws nothing of its own. */
.kw-picker-yard { display: flex; justify-content: center; gap: 9px; padding-top: 8px; }
.kw-yard-row.is-locked { box-shadow: none; }
.kw-yard-body .kw-tool-pic svg { display: block; width: 40px; height: 40px; }
.kw-yard-body .kw-card-tool { min-width: 0; padding-left: 2px; padding-right: 2px; }
.kw-card-sweep.is-empty { opacity: .55; }
/* Validation wave 15: a piece the purse cannot pay for LOOKS out of reach (the class was set, nothing drew it) — still tappable, so the coach can say why. */
.kw-card-yardpiece.is-locked .kw-tool-pic, .kw-card-yardpiece.is-locked .kw-tool-cost { filter: grayscale(1); opacity: .5; }
/* R3: the yard asks like the shop — the piece being asked about turns the shop's green (it stays selected, so green beats is-on). */
.kw-yard-body .kw-card-yardpiece.is-buying, .kw-yard-body .kw-card-yardpiece.is-buying.is-on { background: #d9f3e6; }
.kw-iso-yard-slot polygon { stroke-dasharray: 5 5; }
.kw-iso-yard-slot { cursor: pointer; }
/* THE FURNITURE SHOP MENU (Key 2026-09-24, redesigned for phone and iPad).
   · Tabs: every shelf is a PICTURE over a short name, on ONE row that slides (a finger pans it — kid-world-ui-shop.js `wireShopTabs`);
     🧹 "Put away" stays pinned at the row's end, outside the slide. The old four rows of word chips buried the cards on a phone.
   · Cards: TWO rows that slide sideways together — every shelf the same shape, so the same flick works everywhere, and a phone shows
     six whole cards and a peek of the next column (the peek is what says "there is more"). A card is picture + name + price.
   · Upright phone: the sheet spans the screen. iPad: a wide sheet with bigger cards. Phone lying down: the tabs are a column beside the cards.
   `is-house` (a shelf carrying House pieces) and `is-scroll-x` (a shelf that runs past one screen) keep their names for paintShop; both
   wear the one sliding shape. */
.kw-shop-shelves { display: flex; align-items: stretch; gap: 6px; padding: 0 0 8px; }
.kw-shop-tabs { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x; overscroll-behavior: contain; padding: 0 2px 3px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
.kw-shop-tabs::-webkit-scrollbar { display: none; }
.kid-world-overlay .kw-shop-tabs, .kid-world-overlay .kw-shop-tabs .kw-shop-shelf { touch-action: pan-x; }
.kw-shop-shelf { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 62px; max-width: 84px; min-height: 58px; padding: 4px 6px 3px;
    border: 2.5px solid #1e293b; border-radius: 14px; background: #fffaf1; box-shadow: 0 2px 0 #1e293b; font: 600 12px/1.05 'Fredoka', sans-serif; color: #1e293b; text-align: center; cursor: pointer; }
.kw-shop-shelf-ic { font-size: 22px; line-height: 1; }
.kw-shop-shelf-tx { display: block; overflow-wrap: normal; }
.kw-shop-shelf.is-on { background: #fde9a8; box-shadow: 0 2px 0 #1e293b, inset 0 0 0 2px #f6c453; }
.kw-shop-sweep { background: #eef2f6; border-style: dashed; }
.kw-shop-sweep.is-on { border-style: solid; }
.kw-shop-sweep.is-empty { opacity: .55; }
/* The cards: two rows that slide. The column width is a share of the sheet, so an upright phone shows three whole columns + a peek.
   No left padding: the cards snap `start`, so a 1px left pad made card one's snap point scrollLeft 1, and a shelf paintShop zeroed snapped
   back to 1, not its start (scrollv29, issue #1938). Flush, card one snaps at 0 and every landing puts a card on the strip's edge. */
.kw-shop-body { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: calc((100% - 16px) / 3.3); gap: 8px; justify-content: start; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x; scroll-snap-type: x proximity; scrollbar-width: none; padding: 1px 1px 6px 0; }
.kw-shop-body::-webkit-scrollbar { display: none; }
.kw-shop-body.is-scroll-x, .kw-shop-body.is-house { overflow-x: auto; touch-action: pan-x; scroll-snap-type: x proximity; }
/* The cards own the pan too: `.kid-world-overlay *` sets `touch-action: none` and its buttons `manipulation`, so the strip and its cards claim
   the pan by the selector (Key 2026-09-21). The browser's pan is only half the answer: the strip is panned by hand as well (`wireShopCards`). */
.kw-shop-body .kw-card-prop { min-width: 0; max-width: none; min-height: 92px; scroll-snap-align: start; touch-action: pan-x; }
.kid-world-overlay .kw-shop-body.is-scroll-x, .kid-world-overlay .kw-shop-body.is-house { touch-action: pan-x; }
.kid-world-overlay .kw-shop-body.is-scroll-x .kw-card-prop, .kid-world-overlay .kw-shop-body.is-house .kw-card-prop { touch-action: pan-x; }
.kw-shop-body .kw-card-tool { padding: 6px 3px 5px; }
.kw-shop-body .kw-tool-pic svg { display: block; width: 100%; max-width: 68px; height: 44px; }
.kw-shop-body .house-thumb-svg { overflow: visible; }
.kw-prop-name { font-size: 12px; line-height: 1.1; text-align: center; }
.kw-shop-body .kw-card-prop.is-locked .kw-tool-pic { filter: grayscale(1); opacity: .6; }
.kw-shop-body .kw-card-prop.is-buying { background: #d9f3e6; }
.kw-shop-body .kw-card-prop.is-free .kw-tool-cost { color: #1d7a52; font-weight: 600; }
.kw-shop-body .kw-card-prop.is-placed { background: #eef2f6; box-shadow: none; }
.kw-shop-body .kw-card-prop.is-placed .kw-tool-pic { opacity: .55; }
.kw-shop-body .kw-card-prop.is-placed .kw-tool-cost { font-size: 11px; white-space: nowrap; }
/* An upright phone: compact tabs, so five and a peek sit in view. */
@media (max-width: 480px) {
    .kw-shop-tabs { gap: 5px; }
    .kw-shop-shelf { min-width: 54px; max-width: 72px; padding: 4px 4px 3px; font-size: 11.5px; }
}
/* A short upright phone: a smaller card, so the plot stays in sight over the two rows. */
@media (max-width: 480px) and (max-height: 700px) {
    .kw-shop-body .kw-card-prop { min-height: 76px; }
    .kw-shop-body .kw-tool-pic svg { height: 32px; }
    .kw-shop-shelf { min-height: 50px; }
    .kw-shop-shelf-ic { font-size: 19px; }
}
/* iPad (and any big screen): a wide sheet, bigger tabs and cards — four whole columns and a peek of the fifth, two rows. */
@media (min-width: 700px) and (min-height: 521px) {
    .kw-tray.kw-picker.kw-shop { max-width: min(780px, calc(100% - 32px)); padding: 9px 14px 13px; }
    .kw-shop-tabs { gap: 8px; }
    .kw-shop-shelf { min-width: 76px; max-width: 96px; min-height: 66px; font-size: 13.5px; border-radius: 16px; }
    .kw-shop-shelf-ic { font-size: 27px; }
    .kw-shop-body { grid-auto-columns: 124px; gap: 10px; }
    .kw-shop-body .kw-card-prop { min-height: 118px; }
    .kw-shop-body .kw-tool-pic svg { max-width: 96px; height: 64px; }
    .kw-prop-name { font-size: 14px; }
    .kw-shop-body .kw-tool-cost { font-size: 14px; }
}
/* The shop sheet slides (Key lock 2026-09-20): with a piece in hand the whole panel drops under the screen's edge — only the grab bar + head stay,
   so the free spots are in sight. `--kw-shop-drop` (paintShopSlide) is everything under the head; a drag on the grab bar / head moves it live. */
.kw-picker.kw-shop { padding-top: 0; transition: transform .24s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.kw-shop.is-down { transform: translateY(var(--kw-shop-drop, 0px)); }
.kw-shop.is-dragging { transition: none; }
.kw-shop-grab { display: block; width: 100%; height: 22px; margin: 0; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.kw-shop-grab i { display: block; width: 46px; height: 6px; margin: 8px auto 0; border-radius: 999px; background: #1e293b; opacity: .45; }
.kw-shop-grab:focus-visible i { opacity: 1; outline: 3px solid #f6c453; outline-offset: 2px; }
.kw-shop-head { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.kw-shop.is-dragging .kw-shop-grab, .kw-shop.is-dragging .kw-shop-head { cursor: grabbing; }
.kw-shop-hand { display: none; flex: 0 0 auto; width: 40px; height: 30px; font-size: 22px; line-height: 30px; text-align: center; }
.kw-shop-hand svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kw-shop.is-down .kw-shop-hand:not(:empty), .kw-shop.is-dragging .kw-shop-hand:not(:empty) { display: block; }
/* Slid down, the shelves are off the screen AND out of the tab order / reading order. */
.kw-shop.is-down:not(.is-dragging) .kw-shop-shelves, .kw-shop.is-down:not(.is-dragging) .kw-shop-body { visibility: hidden; transition: visibility 0s .24s; }
@media (prefers-reduced-motion: reduce) { .kw-picker.kw-shop { transition: none; } .kw-shop.is-down:not(.is-dragging) .kw-shop-shelves, .kw-shop.is-down:not(.is-dragging) .kw-shop-body { transition: none; } }
.kw-iso-prop { cursor: pointer; }
/* Shop validation: the shop sheet is taller than the toast line, so its toasts (prices, "is yours!", "does not fit") were drawn UNDER it —
   with the voice off a kid got no answer at all. They ride just above the sheet (its height comes from paintShop). */
.kid-world-overlay:has(.kw-shop:not(.hidden)) .kw-toast { bottom: calc(var(--kw-shop-h, 220px) + 22px + env(safe-area-inset-bottom)); }
@media (max-height: 520px) {
    /* Landscape phone (Key 2026-09-24, menu redesign): the sheet sits in the left corner; the tabs are a COLUMN beside two sliding rows
       of cards (the old two rows of word chips over one row of cards left a plot-high sheet with four cards in it). Toasts sit beside it. */
    .kw-picker.kw-shop { max-width: 440px; display: grid; grid-template-columns: 94px minmax(0, 1fr); grid-template-areas: "grab grab" "head head" "tabs body"; column-gap: 8px; }
    .kid-world-overlay:has(.kw-shop:not(.hidden)) .kw-toast { bottom: calc(84px + env(safe-area-inset-bottom)); left: calc(464px + env(safe-area-inset-left)); transform: none; max-width: calc(100% - 550px); }
    .kw-shop-grab { grid-area: grab; height: 16px; }
    .kw-shop-grab i { margin-top: 5px; }
    .kw-shop-head { grid-area: head; margin-bottom: 6px; }
    .kw-shop-shelves { grid-area: tabs; flex-direction: column; padding: 0; gap: 5px; min-height: 0; }
    .kw-shop-tabs { flex-direction: column; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; max-height: 176px; padding: 0 3px 2px 0;
        -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent); }
    .kid-world-overlay .kw-shop-tabs, .kid-world-overlay .kw-shop-tabs .kw-shop-shelf { touch-action: pan-y; }
    /* 94px and a 4px gap/padding: "Playground" is one word that can't wrap, and at 86px with 6px padding it read "Playgroun" (#2351). */
    .kw-shop-shelf { flex-direction: row; justify-content: flex-start; gap: 4px; min-width: 0; max-width: none; width: 100%; min-height: 38px; padding: 3px 4px; font-size: 11px; text-align: left; }
    .kw-shop-shelf-ic { font-size: 17px; flex: 0 0 auto; }
    .kw-shop-body { grid-area: body; grid-auto-columns: calc((100% - 16px) / 3.3); }
    .kw-shop-body .kw-card-prop { min-height: 82px; }
    .kw-shop-body .kw-tool-pic svg { height: 30px; max-width: 52px; }
    .kw-prop-name { font-size: 11px; }
    .kw-picker-body.is-paint { gap: 6px; }
    .kw-mat-row { gap: 6px; padding-top: 5px; }
    .kw-picker-yard { padding-top: 5px; }
    /* Border / Furniture shop keep the same `.kw-card` landscape sizing as Structures (58px, set above) — no
       separate pill size here any more, so all three build-kind cards shrink together at a short viewport. */
}

@media (prefers-reduced-motion: reduce) {
    .is-pulse { animation: none; }
}

/* Tapping the reading prompt ("Which letter do you hear?") replays it, like Hear it. */
.reading-prompt-tappable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
}
.reading-prompt-tappable::after {
    content: ' 🔊';
    font-size: 0.85em;
}
.reading-prompt-tappable:active,
.reading-prompt-tappable.is-pressed {
    transform: scale(0.97);
}
.reading-prompt-tappable:focus-visible {
    outline: 3px solid var(--primary-color, #3b82f6);
    outline-offset: 2px;
}

/* Decimal rounding number line (5.NBT.A.4). */
.dec-round-svg {
    width: min(100%, 20rem);
    height: auto;
    display: block;
    margin: 0 auto;
}

.dec-round-label {
    font-weight: 800;
    font-size: 15px;
    fill: var(--text-primary, #0f172a);
}

.dec-round-value {
    font-weight: 800;
    font-size: 15px;
    fill: var(--theme-primary-dark, #047857);
}

/* Parent Report: the weakest kind inside a skill (Phase 6). */
.parent-report-need-kind {
    display: block;
    margin-top: 0.2rem;
    font-weight: 700;
    color: var(--theme-primary-dark, #047857);
}

/* Wrong-answer banner with an explanation / coach line (Phase 7). */
/* Anchored at the bottom (over the keypad, which is done for this question) so
   the explanation never covers the problem it explains (Phase 7 review). */
.feedback-banner.has-coach {
    position: fixed;
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap;
    white-space: normal;
    width: min(92vw, 26rem);
    max-width: min(92vw, 26rem);
    border-radius: 1rem;
    text-align: left;
    row-gap: 0.25rem;
}

.feedback-coach {
    flex-basis: 100%;
    font-family: var(--font-body, inherit);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.3;
    opacity: 0.97;
}

.feedback-coach.hidden {
    display: none;
}

/* Hint steps (Phase 7.3): revealed one at a time with "More help". */
.hint-ladder {
    margin: 0.5rem auto 0;
    padding-left: 1.4rem;
    max-width: 22rem;
    text-align: left;
    font-weight: 700;
    line-height: 1.35;
}

.hint-ladder-step + .hint-ladder-step {
    margin-top: 0.3rem;
}

.hint-ladder-step.hidden {
    display: none;
}

.hint-ladder-more {
    display: block;
    margin: 0.5rem auto 0;
}

/* ============================================================================
   My Place — picker + fullscreen places (docs/my-place-fullscreen-plan.md)
   The World tab is a picker; Avatar Studio and the House open as fullscreen
   takeovers in {Name}'s World's ink: #1e293b outlines, flat fills, offset shadow.
   ============================================================================ */
.place-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 2px 0 12px;
    font-family: 'Fredoka', 'Plus Jakarta Sans', system-ui, sans-serif;
}
.place-picker-title {
    margin: 0;
    font: 600 1.35rem 'Fredoka', sans-serif;
    color: #1e293b;
}
.place-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.place-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 150px;
    min-width: 0;
    padding: 14px 10px 12px;
    border: 2.5px solid #1e293b;
    border-radius: 22px;
    box-shadow: 0 4px 0 #1e293b;
    color: #1e293b;
    font: 600 1.05rem 'Fredoka', sans-serif;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.place-card:active,
.place-friends-row:active,
.pt-round-btn:active,
.place-card.is-pressed,
.place-friends-row.is-pressed,
.pt-round-btn.is-pressed { transform: translateY(2px); box-shadow: 0 1px 0 #1e293b; }
.place-card.is-loading { opacity: .6; pointer-events: none; }
.place-card-studio { background: #c4b5e8; }
.place-card-house { background: #f6c453; }
.place-card-world { background: #99f0e0; grid-column: 1 / -1; min-height: 120px; }
.place-card-village { background: #bae6fd; grid-column: 1 / -1; min-height: 96px; }
.place-card-pic {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #fffaf1;
    border: 2.5px solid #1e293b;
    font-size: 42px;
    line-height: 1;
}
.place-card-world .place-card-pic,
.place-card-village .place-card-pic { width: 64px; height: 64px; font-size: 34px; }
.place-card-name { overflow-wrap: anywhere; }
.place-card-village .subnav-badge { position: absolute; top: 10px; right: 12px; }

.place-friends-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 8px 16px 8px 10px;
    border: 2.5px solid #1e293b;
    border-radius: 18px;
    box-shadow: 0 3px 0 #1e293b;
    background: #fffaf1;
    color: #1e293b;
    font: 600 1.05rem 'Fredoka', sans-serif;
    cursor: pointer;
    touch-action: manipulation;
}
.place-friends-pic {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #3f6b3a;
    border: 2px solid #1e293b;
    font-size: 20px;
}
.place-friends-go { margin-left: auto; font-size: 1.6rem; line-height: 1; }

/* ---------- fullscreen shell ---------- */
body.place-open {
    overflow: hidden;
    overscroll-behavior: none;
}
body.place-open .app-header,
body.place-open .kid-tab-bar { visibility: hidden; }
body.place-open #worldTab { animation: none; }

.place-top {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 960;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
    pointer-events: none;
    font-family: 'Fredoka', 'Plus Jakarta Sans', system-ui, sans-serif;
}
.place-top > * { pointer-events: auto; }
.pt-round-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 2.5px solid #1e293b;
    background: #fffaf1;
    box-shadow: 0 3px 0 #1e293b;
    color: #1e293b;
    font: 600 20px/1 'Fredoka', sans-serif;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.pt-plaque {
    flex: 1; min-width: 0; margin: 0;
    text-align: center;
    font: 600 17px 'Fredoka', sans-serif;
    color: #1e293b;
    background: #fffaf1;
    border: 2.5px solid #1e293b; border-radius: 16px;
    box-shadow: 0 3px 0 #1e293b;
    padding: 9px 10px 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-coins {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 46px;
    padding: 0 12px 0 8px;
    border: 2.5px solid #1e293b;
    border-radius: 999px;
    background: #fef3c7;
    box-shadow: 0 3px 0 #1e293b;
    color: #1e293b;
    font: 600 17px 'Fredoka', sans-serif;
}
.pt-coins .coin-svg { width: 26px; height: 26px; display: block; }

.place-hops {
    position: fixed;
    z-index: 960;
    left: calc(12px + env(safe-area-inset-left));
    top: calc(72px + env(safe-area-inset-top));
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.place-hops .pt-hop { width: 44px; height: 44px; font-size: 21px; }
.place-hops .pt-hop[data-place="avatar"] { background: #c4b5e8; }
.place-hops .pt-hop[data-place="house"] { background: #f6c453; }
.place-hops .pt-hop[data-place="kidworld"] { background: #99f0e0; }

/* The World's hops sit where the Studio's and House's do: the left column, mirroring the orbit buttons. */
.kw-hops {
    position: absolute;
    z-index: 2;
    left: calc(10px + env(safe-area-inset-left));
    top: max(calc(214px + env(safe-area-inset-top)), calc(var(--kw-sign-bottom, 0px) + 10px));
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kw-hops.hidden { display: none; }
.kw-hops .kw-hop[data-place="avatar"] { background: #c4b5e8; }
.kw-hops .kw-hop[data-place="house"] { background: #f6c453; }
@media (orientation: landscape) and (max-height: 520px) {
    .kw-hops { top: calc(70px + env(safe-area-inset-top)); }
}

#worldTab[data-place] .world-subview.active {
    position: fixed;
    inset: 0;
    z-index: 950;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

/* ---------- 🏠 House ---------- */
#worldTab[data-place="house"] #subviewHouse { background: #f6ead3; }
#worldTab[data-place="house"] .house-room-card {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: hidden;
}
#worldTab[data-place="house"] .house-canvas-container {
    position: absolute;
    inset: 0;
    width: auto;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    background: var(--house-floor-fallback, #c68f56);
}
#worldTab[data-place="house"] .house-zoom-surface {
    flex: none;
    position: relative;
    isolation: isolate;
}
/* The wall carries on above the room and the floor below it (and both off to the sides), in the room's own theme. */
#worldTab[data-place="house"] .house-zoom-surface::before,
#worldTab[data-place="house"] .house-zoom-surface::after {
    content: '';
    position: absolute;
    left: -400vw;
    right: -400vw;
    z-index: -1;
    pointer-events: none;
}
#worldTab[data-place="house"] .house-zoom-surface::before {
    top: -400vh;
    bottom: calc(100% * 150 / 480);
    background: var(--house-wall, #93a883);
}
#worldTab[data-place="house"] .house-zoom-surface::after {
    top: calc(100% * 330 / 480);
    bottom: -400vh;
    background: var(--house-floor, #c68f56);
}
#worldTab[data-place="house"] .house-canvas-container[data-lighting="sunset"] .house-zoom-surface::before,
#worldTab[data-place="house"] .house-canvas-container[data-lighting="sunset"] .house-zoom-surface::after { filter: brightness(.86) sepia(.25); }
#worldTab[data-place="house"] .house-canvas-container[data-lighting="night"] .house-zoom-surface::before,
#worldTab[data-place="house"] .house-canvas-container[data-lighting="night"] .house-zoom-surface::after { filter: brightness(.55) saturate(.8); }
#worldTab[data-place="house"] .house-room-svg { display: block; width: 100%; height: 100%; }

#worldTab[data-place="house"] .house-action-toolbar {
    position: absolute;
    z-index: 3;
    left: 0; right: 0;
    bottom: calc(14px + env(safe-area-inset-bottom));
    max-width: 480px;
    margin: 0 auto;
    padding: 0 calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
    flex-wrap: nowrap;
    gap: 8px;
    --house-pill-height: 60px;
}
#worldTab[data-place="house"] .house-action-toolbar .house-pill {
    flex-direction: column;
    gap: 2px;
    border-radius: 18px;
    box-shadow: 0 3px 0 #1e293b;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 13px;
}
#worldTab[data-place="house"] .house-action-toolbar .house-pill-icon { font-size: 22px; }
#worldTab[data-place="house"] .house-action-toolbar .house-pill:active,
#worldTab[data-place="house"] .house-action-toolbar .house-pill.is-pressed { box-shadow: 0 1px 0 #1e293b; }

#worldTab[data-place="house"] .house-zoom-controls {
    position: absolute;
    z-index: 3;
    right: calc(12px + env(safe-area-inset-right));
    top: calc(72px + env(safe-area-inset-top));
    margin: 0;
}
#worldTab[data-place="house"] .house-zoom-controls .stage-zoom-toolbar {
    flex-direction: column;
    gap: 10px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
#worldTab[data-place="house"] .house-zoom-controls .stage-zoom-btn {
    width: 44px; height: 44px;
    border: 2.5px solid #1e293b;
    border-radius: 50%;
    background: #fffaf1;
    box-shadow: 0 3px 0 #1e293b;
    color: #1e293b;
    font: 600 21px/1 'Fredoka', sans-serif;
}
#worldTab[data-place="house"] .house-zoom-controls .stage-zoom-label,
#worldTab[data-place="house"] .house-zoom-controls .stage-zoom-hint { display: none; }

#worldTab[data-place="house"] .house-visiting-banner,
#worldTab[data-place="house"] .house-preview-banner,
#worldTab[data-place="house"] .house-hide-seek-hint {
    position: absolute;
    z-index: 4;
    top: calc(70px + env(safe-area-inset-top));
    left: calc(68px + env(safe-area-inset-left));
    right: calc(68px + env(safe-area-inset-right));
    margin: 0;
    border: 2.5px solid #1e293b;
    border-radius: 16px;
    box-shadow: 0 3px 0 #1e293b;
}

/* ---------- 👗 Avatar Studio ---------- */
#worldTab[data-place="avatar"] #subviewAvatar {
    --studio-drawer-h: min(46vh, 430px);
    background: #1e1b4b;
}
#worldTab[data-place="avatar"] #subviewAvatar.is-drawer-peek { --studio-drawer-h: 196px; }
#worldTab[data-place="avatar"] .studio-layout-grid { display: block; height: 100%; }
#worldTab[data-place="avatar"] .studio-stage-pin {
    position: absolute;
    top: 0; left: 0; right: 0;
    width: auto;
    height: auto;
    align-self: stretch;
    justify-self: stretch;
    bottom: calc(var(--studio-drawer-h) - 22px);
    padding: 0;
    background: none;
    transition: bottom .25s ease;
}
#worldTab[data-place="avatar"] .avatar-interactive-stage {
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
#worldTab[data-place="avatar"] .stage-vignette { border-radius: 0; }
#worldTab[data-place="avatar"] .stage-zoom-surface { padding-top: calc(56px + env(safe-area-inset-top)); }
#worldTab[data-place="avatar"] .stage-zoom-controls {
    left: auto;
    right: calc(12px + env(safe-area-inset-right));
    bottom: 34px;
}

#worldTab[data-place="avatar"] .studio-shop-scroll {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: var(--studio-drawer-h);
    z-index: 40;
    gap: 10px;
    padding: 0 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fffaf1;
    border-top: 2.5px solid #1e293b;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -3px 0 rgba(30, 41, 59, .25);
    transition: height .25s ease;
}
#worldTab[data-place="avatar"] .studio-shop-scroll > * { scroll-margin-top: 0; flex-shrink: 0; }
/* The category tabs ride under the grip, so the kid can switch Hats → Pets from anywhere in the list. */
#worldTab[data-place="avatar"] .wardrobe-category-tabs {
    position: sticky;
    top: 30px;
    z-index: 2;
    background: #fffaf1;
    margin: 0 -12px;
    padding: 0 12px 6px;
}
@media (prefers-reduced-motion: reduce) {
    #worldTab[data-place="avatar"] .studio-shop-scroll,
    #worldTab[data-place="avatar"] .studio-stage-pin { transition: none; }
}
.studio-drawer-grip { display: none; }
#worldTab[data-place="avatar"] .studio-drawer-grip {
    position: sticky;
    top: 0;
    z-index: 3;
    order: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: calc(100% + 24px);
    height: 30px;
    margin: 0 -12px;
    padding: 0;
    border: 0;
    background: #fffaf1;
    cursor: pointer;
    touch-action: manipulation;
}
#worldTab[data-place="avatar"] .studio-drawer-grip::before {
    content: '';
    width: 48px; height: 6px;
    border-radius: 999px;
    background: #1e293b;
    opacity: .35;
}
/* Clothes first; the try-on list follows them (Save / Revert float on the stage). */
#worldTab[data-place="avatar"] .studio-wardrobe-card { order: 1; margin: 0; border: 0; box-shadow: none; padding: 0; background: none; overflow: visible; }
#worldTab[data-place="avatar"] .studio-stage-chrome {
    order: 2;
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 -12px;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 2px dashed rgba(30, 41, 59, .25);
    border-radius: 0;
    box-shadow: none;
    background: #fffaf1;
}
/* Coins live in the top bar; the try-on list + Confirm show the cart, so the wallet row goes. */
#worldTab[data-place="avatar"] .stage-preview-bar { display: none; }
#worldTab[data-place="avatar"] .studio-cart-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
}
#worldTab[data-place="avatar"] .studio-cart-primary { flex: 1 1 0; min-width: 0; display: flex; gap: 8px; }
#worldTab[data-place="avatar"] .studio-cart-primary .btn { flex: 1 1 0; min-width: 0; width: auto; margin: 0; }
#worldTab[data-place="avatar"] #btnRevertPreview { flex: 0 0 auto; width: auto; margin: 0; padding: 0 14px; }
#worldTab[data-place="avatar"] .studio-cart-actions .btn {
    min-height: 46px;
    height: auto;
    white-space: nowrap;
    border: 2.5px solid #1e293b;
    border-radius: 16px;
    box-shadow: 0 3px 0 #1e293b;
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
}

@media (min-width: 900px) and (orientation: landscape), (orientation: landscape) and (max-height: 520px) {
    /* Wide screens and landscape phones: the wardrobe docks as a right-hand panel instead of a drawer. */
    #worldTab[data-place="avatar"] .studio-stage-pin { bottom: 0; right: calc(min(430px, 40vw) + 10px); }
    #worldTab[data-place="avatar"] .studio-shop-scroll {
        top: calc(70px + env(safe-area-inset-top));
        left: auto;
        right: calc(10px + env(safe-area-inset-right));
        bottom: calc(10px + env(safe-area-inset-bottom));
        width: min(430px, 40vw);
        height: auto;
        padding-top: 8px;
        border: 2.5px solid #1e293b;
        border-radius: 22px;
        box-shadow: 0 3px 0 #1e293b;
    }
    #worldTab[data-place="avatar"] .studio-drawer-grip { display: none; }
    #worldTab[data-place="avatar"] .wardrobe-category-tabs { top: 0; }
    #worldTab[data-place="avatar"] .studio-stage-chrome { padding-bottom: 10px; }
    #worldTab[data-place="avatar"] .stage-zoom-controls { bottom: 14px; }
}

/* Landscape phones: the House dock goes icon-only so it covers less of the room. */
@media (orientation: landscape) and (max-height: 520px) {
    #worldTab[data-place="house"] .house-action-toolbar { max-width: 340px; --house-pill-height: 48px; bottom: calc(8px + env(safe-area-inset-bottom)); }
    #worldTab[data-place="house"] .house-action-toolbar .house-pill-label { display: none; }
}

/* ---------- 🏠 House Store: a sheet over the real room (the room IS the try-on) ---------- */
#subviewHouse { --house-sheet-h: min(54vh, 470px); }
#worldTab[data-place="house"] #subviewHouse.is-store-open .house-canvas-container { bottom: calc(var(--house-sheet-h) - 24px); }
#worldTab[data-place="house"] #subviewHouse.is-store-open .house-action-toolbar { display: none; }

.house-store-sheet {
    position: absolute;
    z-index: 5;
    left: 0; right: 0; bottom: 0;
    height: var(--house-sheet-h);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
    background: #fffaf1;
    border-top: 2.5px solid #1e293b;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -3px 0 rgba(30, 41, 59, .25);
    color: #1e293b;
    font-family: 'Fredoka', 'Plus Jakarta Sans', system-ui, sans-serif;
}
@media (prefers-reduced-motion: no-preference) {
    .house-store-sheet:not(.hidden) { animation: houseSheetUp .22s ease-out; }
    @keyframes houseSheetUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
}
.house-store-sheet .house-store-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
}
.house-store-title { flex: 1; min-width: 0; margin: 0; font: 600 20px 'Fredoka', sans-serif; }
.house-store-sheet .store-cart-badge-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 12px;
    border: 2.5px solid #1e293b;
    border-radius: 999px;
    background: #fef3c7;
    box-shadow: 0 3px 0 #1e293b;
    font: 600 17px 'Fredoka', sans-serif;
    color: #1e293b;
}
.house-store-sheet .store-cart-badge-btn:active,
.house-store-sheet .store-cart-badge-btn.is-pressed { transform: translateY(2px); box-shadow: 0 1px 0 #1e293b; }
.house-store-sheet .store-cart-counter { position: static; min-width: 22px; height: 22px; line-height: 22px; font-size: 13px; }
.house-store-close { width: 44px; height: 44px; font-size: 18px; }

.house-store-shop,
.house-cart-step {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.house-store-shop.hidden, .house-cart-step.hidden { display: none; }
.house-store-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 2px calc(14px + env(safe-area-inset-bottom));
    touch-action: pan-y;
}
.house-store-sheet .house-store-categories-bar { --house-pill-height: 46px; padding-bottom: 2px; }

/* Three small cards a row; Yours first, then Shop. */
#subviewHouse .house-store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.house-store-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 4px 2px 0;
    font: 600 16px 'Fredoka', sans-serif;
}
.house-store-section small { font-size: 13px; opacity: .55; }
#subviewHouse .house-store-card {
    padding: 6px 6px 5px;
    gap: 2px;
    border: 2px solid #1e293b;
    border-radius: 14px;
    box-shadow: 0 2px 0 #1e293b;
    touch-action: manipulation;
}
#subviewHouse .house-store-card.selected-card { box-shadow: 0 0 0 3px #f6c453, 0 2px 0 #1e293b; }
#subviewHouse .house-store-card.previewing-card { background: #fef3c7; }
#subviewHouse .store-card-top { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; }
#subviewHouse .store-card-name {
    font-size: 12px;
    line-height: 1.15;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The badge (In room / Trying / Owned) sits on the picture's corner, so a card is name · picture · price. */
#subviewHouse .store-card-badge { position: absolute; z-index: 1; top: 22px; left: 5px; font-size: 10px; padding: 1px 6px; }
#subviewHouse .store-card-buy { min-height: 0; }
#subviewHouse .store-card-visual { height: 64px; }
#subviewHouse .store-card-price { font-size: 12px; }

/* Now / New: the room she has vs the room she is trying. */
.house-compare {
    position: absolute;
    z-index: 4;
    top: calc(70px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    padding: 3px;
    border: 2.5px solid #1e293b;
    border-radius: 999px;
    background: #fffaf1;
    box-shadow: 0 3px 0 #1e293b;
    font-family: 'Fredoka', sans-serif;
}
.house-compare-btn {
    min-width: 64px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #1e293b;
    font: 600 16px 'Fredoka', sans-serif;
    cursor: pointer;
    touch-action: manipulation;
}
.house-compare-btn.is-on { background: #1e293b; color: #fffaf1; }

.house-cart-step-head { display: flex; align-items: center; gap: 6px; }
.house-cart-title { margin: 0; font: 600 18px 'Fredoka', sans-serif; }
.house-cart-step .store-back-btn {
    width: 40px; height: 40px;
    border: 2.5px solid #1e293b;
    border-radius: 50%;
    background: #fffaf1;
    box-shadow: 0 2px 0 #1e293b;
    color: #1e293b;
    font-size: 1.6rem;
}
.house-cart-step .house-cart-checkout-actions { background: #fffaf1; }

/* Landscape phones and wide screens: the Store is a right-hand panel; the room keeps the left. */
@media (min-width: 900px) and (orientation: landscape), (orientation: landscape) and (max-height: 520px) {
    .house-store-sheet {
        top: calc(70px + env(safe-area-inset-top));
        left: auto;
        right: calc(10px + env(safe-area-inset-right));
        bottom: calc(10px + env(safe-area-inset-bottom));
        width: min(420px, 44vw);
        height: auto;
        padding: 10px 12px 0;
        border: 2.5px solid #1e293b;
        border-radius: 22px;
        box-shadow: 0 3px 0 #1e293b;
    }
    #worldTab[data-place="house"] #subviewHouse.is-store-open .house-canvas-container { bottom: 0; right: calc(min(420px, 44vw) + 10px); }
    #subviewHouse.is-store-open .house-zoom-controls { right: calc(min(420px, 44vw) + 22px); }
    #subviewHouse .house-store-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .house-compare { left: calc((100% - min(420px, 44vw)) / 2); }
}

/* ---------- 👗 Studio: the clothes get the drawer (2026-09-25) ----------
   One scroll (no box-in-a-box), Save / Revert and the backgrounds moved onto the stage, a one-line dye row that
   hides where dye does nothing, four small cards a row, and three drawer heights sized to the visible screen (dvh). */
#worldTab[data-place="avatar"] #subviewAvatar {
    --studio-drawer-h: min(52vh, 480px);
    --studio-drawer-h: min(52dvh, 480px);
    --studio-panel-w: 0px;
}
#worldTab[data-place="avatar"] #subviewAvatar.is-drawer-peek { --studio-drawer-h: 150px; }
#worldTab[data-place="avatar"] #subviewAvatar.is-drawer-tall {
    --studio-drawer-h: calc(100vh - 136px);
    --studio-drawer-h: calc(100dvh - 136px);
}
#worldTab[data-place="avatar"] #subviewAvatar.is-drawer-dragging .studio-shop-scroll,
#worldTab[data-place="avatar"] #subviewAvatar.is-drawer-dragging .studio-stage-pin,
#worldTab[data-place="avatar"] #subviewAvatar.is-drawer-dragging .studio-cart-actions { transition: none; }
#worldTab[data-place="avatar"] .studio-drawer-grip { touch-action: none; }
/* A grip a thumb can find: taller strip, bigger darker bar, a ⌃ hint (the whole drawer drags too — app.js). */
#worldTab[data-place="avatar"] .studio-drawer-grip {
    height: 44px;
    flex-direction: column;
    gap: 3px;
}
#worldTab[data-place="avatar"] .studio-drawer-grip::before { width: 64px; height: 7px; opacity: .5; }
#worldTab[data-place="avatar"] .studio-drawer-grip::after {
    content: '⌃';
    font: 700 13px/1 'Fredoka', sans-serif;
    color: #1e293b;
    opacity: .45;
    order: -1;
}
#worldTab[data-place="avatar"] #subviewAvatar.is-drawer-tall .studio-drawer-grip::after { content: '⌄'; }
#worldTab[data-place="avatar"] .wardrobe-category-tabs { top: 44px; }
@media (min-width: 900px) and (orientation: landscape), (orientation: landscape) and (max-height: 520px) {
    #worldTab[data-place="avatar"] .wardrobe-category-tabs { top: 0; }
}

/* 1. One scroll: the grid flows in the drawer; the tabs stay stuck under the grip. */
#worldTab[data-place="avatar"] .wardrobe-items-grid {
    max-height: none;
    overflow: visible;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 8px;
    padding: 2px 0 14px;
}

/* 2. The chrome card leaves the drawer's bottom: only the try-on list stays in the drawer (after the clothes). */
#worldTab[data-place="avatar"] .studio-stage-chrome {
    position: static;
    order: 2;
    margin: 0;
    padding: 0 0 calc(12px + env(safe-area-inset-bottom));
    border: 0;
    background: none;
}
#worldTab[data-place="avatar"] .studio-checkout { padding: 0; }
/* Save / Revert (and Confirm while trying) float at the foot of the stage, just above the drawer. */
#worldTab[data-place="avatar"] .studio-cart-actions {
    position: fixed;
    z-index: 45;
    left: calc(12px + env(safe-area-inset-left));
    right: calc(12px + var(--studio-panel-w) + env(safe-area-inset-right));
    bottom: calc(var(--studio-drawer-h) + 10px);
    max-width: 440px;
    margin: 0 auto;
    transition: bottom .25s ease;
}
#worldTab[data-place="avatar"] .stage-zoom-surface { padding-bottom: 66px; }
/* Zoom: the right-hand column under the coins, like the House. */
#worldTab[data-place="avatar"] .stage-zoom-controls {
    left: auto;
    right: calc(12px + env(safe-area-inset-right));
    top: calc(72px + env(safe-area-inset-top));
    bottom: auto;
}
#worldTab[data-place="avatar"] #avatarStage .stage-zoom-toolbar {
    flex-direction: column;
    gap: 10px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}
#worldTab[data-place="avatar"] #avatarStage .stage-zoom-btn {
    width: 44px; height: 44px;
    border: 2.5px solid #1e293b;
    border-radius: 50%;
    background: #fffaf1;
    box-shadow: 0 3px 0 #1e293b;
    color: #1e293b;
    font: 600 21px/1 'Fredoka', sans-serif;
}
/* Tall drawer = shopping: the stage buttons step aside so Save can sit under the top bar. */
#worldTab[data-place="avatar"] #subviewAvatar.is-drawer-tall .stage-zoom-controls { display: none; }
body.place-open:has(#subviewAvatar.is-drawer-tall) .place-hops { display: none; }

/* 3. Dye: one line of swatches that scrolls sideways (hidden on Props / Pets / Skin by the Studio). */
#worldTab[data-place="avatar"] .wardrobe-color-picker {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 6px 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
#worldTab[data-place="avatar"] .wardrobe-color-picker::-webkit-scrollbar { display: none; }
#worldTab[data-place="avatar"] .color-picker-label { font-size: 12px; }
#worldTab[data-place="avatar"] .palette-swatches-row { flex-wrap: nowrap; gap: 8px; padding: 4px; }
#worldTab[data-place="avatar"] .palette-swatch-btn { width: 30px; height: 30px; }

/* 4. Small cards: picture · name · price. */
#worldTab[data-place="avatar"] .wardrobe-item-card { padding: 6px 4px 5px; gap: 3px; }
#worldTab[data-place="avatar"] .wardrobe-item-icon { height: 2.9rem; }
#worldTab[data-place="avatar"] .wardrobe-item-name {
    font-size: 11px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#worldTab[data-place="avatar"] .wardrobe-item-badge { font-size: 11px; padding: 1px 6px; }
#worldTab[data-place="avatar"] .badge-try-word { display: none; }

/* Landscape phones and wide screens: the panel keeps the right; Save sits at the foot of the stage. */
@media (min-width: 900px) and (orientation: landscape), (orientation: landscape) and (max-height: 520px) {
    #worldTab[data-place="avatar"] #subviewAvatar { --studio-panel-w: calc(min(430px, 40vw) + 10px); }
    #worldTab[data-place="avatar"] .studio-cart-actions { bottom: calc(12px + env(safe-area-inset-bottom)); }
    #worldTab[data-place="avatar"] .stage-zoom-controls { bottom: auto; }
}

/* The doll sizes itself to the stage it actually has (drawer height, landscape, Safari's toolbar), not the screen. */
#worldTab[data-place="avatar"] .studio-stage-pin { container: studio-stage / size; }
#worldTab[data-place="avatar"] .stage-zoom-surface > * { zoom: 1; }
@container studio-stage (max-height: 360px) { #worldTab[data-place="avatar"] .stage-zoom-surface > * { zoom: .8; } }
@container studio-stage (max-height: 280px) { #worldTab[data-place="avatar"] .stage-zoom-surface > * { zoom: .62; } }
@container studio-stage (min-height: 470px) { #worldTab[data-place="avatar"] .stage-zoom-surface > * { zoom: 1.2; } }
@container studio-stage (min-height: 560px) { #worldTab[data-place="avatar"] .stage-zoom-surface > * { zoom: 1.4; } }

/* Backgrounds tab: each card is a little window onto the scene (all free). */
.wardrobe-backdrop-thumb {
    display: block;
    overflow: hidden;
    border: 2px solid #1e293b;
    border-radius: 10px;
}
.wardrobe-backdrop-thumb .stage-scenery-svg { display: block; width: 100%; height: 100%; }
.wardrobe-backdrop-thumb .stage-scenery-svg * { animation: none !important; }

/* "Always show hints" for small +/−: compact counting dots under the question
   (renderAddSubInlineHint). Two amounts in two colors; never the sum. */
.addsub-dots-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0;
}

.addsub-dots-frames {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.addsub-dots-frame {
    display: grid;
    grid-template-columns: repeat(5, 1.35rem);
    grid-auto-rows: 1.35rem;
    border: 2.5px solid #1e293b;
    border-radius: 0.5rem;
    background: #fff;
    overflow: hidden;
}

.addsub-dots-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1.5px solid #cbd5e1;
    border-bottom: 1.5px solid #cbd5e1;
}

.addsub-dots-cell:nth-child(5n) { border-right: 0; }
.addsub-dots-cell:nth-child(n + 6) { border-bottom: 0; }
.addsub-dots-cell.is-blank { background: #f1f5f9; }

.addsub-dot {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    border: 2px solid #1e293b;
    box-sizing: border-box;
}

.addsub-dot-a { background: #60a5fa; }
.addsub-dot-b { background: #fb923c; }

.addsub-dots-caption {
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.95rem;
    color: #1e293b;
    text-align: center;
}

/* Inline hints sit under the question; cap them so the answer pad stays on a
   phone screen (fitInlineHintPanel shrinks tall drawings to fit). Fullscreen
   Help pages that adopt the section keep their own sizing. */
body:not(.mul-div-hints-open):not(.visual-hints-open) #visualModelsSection .visual-helper-container {
    max-height: 17rem; /* fitInlineHintPanel narrows this to the room left */
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: flex-start;
}

body:not(.mul-div-hints-open):not(.visual-hints-open) #visualModelsSection {
    margin: 0.4rem 0 0.5rem;
    padding: 0.45rem 0.6rem;
}

body:not(.mul-div-hints-open):not(.visual-hints-open) #visualModelsSection .visual-models-toolbar {
    margin-bottom: 0.4rem;
}

/* Question pictures leave room for the hint and the answer pad on a phone.
   Unit-cube layers sit side by side (bottom layer first) with cells capped at
   2rem instead of stacking 108px cells; shapes and triangles get a smaller cap. */
#promptInlineVisual .unit-prism-layers {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    gap: 0.5rem;
}

#promptInlineVisual .unit-prism-layers .unit-prism-layer-wrap {
    width: min(100%, calc(var(--prism-cols, 4) * 2rem));
}

#promptInlineVisual .unit-prism-layers .area-unit-grid.unit-prism-layer {
    width: 100%;
}

#promptInlineVisual .shape-identify-wrap {
    width: min(100%, 10rem);
}

#promptInlineVisual .pyth-tri-wrap {
    max-width: 15rem;
    margin: 0 auto;
}

/* Big equal-group piles: more columns, smaller tokens (buildGroupsSkillVisual). */
.groups-pile.is-big {
    width: min(100%, 20rem);
    gap: 0.25rem;
}

.groups-pile.is-big .bucket-item-emoji {
    font-size: clamp(1rem, 8cqi, 1.6rem);
}

/* Area / perimeter rectangles in the question: a little smaller so a tapped
   hint and the answer pad still fit on a phone. */
#promptInlineVisual .labeled-rect-wrap {
    max-width: 13rem;
    margin: 0 auto;
}

/* Filled pills in the question card wrap two a row on a phone (#1770): keep
   the rows close so "5 groups of 5" stays near one screen. */
#promptInlineVisual .groups-baskets {
    gap: 0.4rem 0.5rem;
}

/* Share questions in the question card: empty baskets are only placeholders,
   so keep them short and four to a row. */
#promptInlineVisual .groups-baskets:has(.groups-basket-empty) {
    grid-template-columns: repeat(var(--cols-wide, 4), minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 0.35rem;
    width: min(100%, 20rem);
}

#promptInlineVisual .groups-basket-empty {
    min-width: 0;
    min-height: 2.4rem;
    padding: 0.2rem;
}

#promptInlineVisual .groups-basket-empty .bucket-items-grid {
    min-height: 0;
    min-width: 0;
}

/* Factors: 7 × ? = 63 as tiles (buildFactorsSkillVisual). */
.factor-prompt-row:has(.factor-prompt-op) {
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
}

.factor-prompt-op {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-secondary, #475569);
}

.factor-prompt-row:has(.factor-prompt-op) .factor-prompt-num {
    font-size: 2rem;
    min-width: 2.8rem;
    padding: 0.3rem 0.5rem;
}

.factor-prompt-num.is-unknown {
    background: #f1f5f9;
    border-style: dashed;
    color: var(--theme-primary-dark, #047857);
}

/* Compare mass: a pan balance tipped toward the heavier side. */
.measure-balance-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.measure-balance-svg {
    width: min(100%, 17rem);
    height: auto;
    display: block;
}

.measure-balance-label {
    font-family: var(--font-heading), system-ui, sans-serif;
    font-size: 16px;
    font-weight: 800;
    fill: #1e293b;
}

/* Choices never push past the card: columns may shrink, and word / expression
   choices use a smaller proportional font on one line (renderChoiceBubbles). */
.choice-bubbles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-bubble-btn {
    min-width: 0;
}

.choice-bubbles-grid.has-long-choices .choice-bubble-btn {
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 6.2vw, 1.65rem);
    white-space: nowrap;
}

.choice-bubbles-grid.has-xlong-choices .choice-bubble-btn {
    font-size: clamp(0.95rem, 4.8vw, 1.3rem);
}

/* Decimals + / −: columns lined up at the decimal point. */
.decimal-columns {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: var(--font-math);
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary, #0f172a);
    margin: 0 auto;
}

.decimal-columns-row {
    display: flex;
}

.decimal-columns-cell {
    width: 1.3em;
    text-align: center;
}

.decimal-columns-cell.is-point {
    width: 0.55em;
    color: var(--theme-primary-dark, #047857);
}

.decimal-columns-cell.is-op {
    color: var(--text-secondary, #475569);
}

.decimal-columns-rule {
    width: 100%;
    border-top: 3px solid #1e293b;
    margin-top: 0.2rem;
}

/* Decimals compare: a small place-value chart. */
.decimal-place-chart {
    border-collapse: collapse;
    margin: 0 auto;
    font-family: var(--font-heading);
}

.decimal-place-chart th {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-secondary, #475569);
    padding: 0.2rem 0.45rem;
    border-bottom: 2px solid #cbd5e1;
}

.decimal-place-chart td {
    font-family: var(--font-math);
    font-size: 1.6rem;
    font-weight: 800;
    text-align: center;
    padding: 0.15rem 0.45rem;
    border-bottom: 1px solid #e2e8f0;
}

/* Fraction × whole: the fraction bar drawn once per group. */
.fracops-copies {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: min(100%, 15rem);
    margin: 0 auto;
}

.fracops-copies .fracops-copy {
    width: 100%;
}

/* Fraction ÷ whole: the shaded part cut into slivers. */
.fracops-split-wrap {
    width: min(100%, 18rem);
    margin: 0 auto;
}

.fracops-split-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Ratio tapes in equal groups: a visible gap before each new group. */
/* "?" on a coloured hidden group: white so it reads on red / blue. */
.ratio-tape-cell.is-hidden.is-span {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 900;
    text-shadow: 0 1px 1px rgba(15, 23, 42, 0.55);
}

.ratio-tape-cell.is-group-start {
    margin-left: 0.3rem;
}

/* Parent Report: "ready for the next reading level" nudge (reading P9). */
.parent-report-level-up {
    background: #fef9c3;
    border: 2px solid #facc15;
    border-radius: var(--radius-md);
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.6rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Reading answers that are phrases (passages, sentences): full-width rows in
 * the reading font. The 2.1rem math font stacked them one word per line.
 * Kept after the has-long-choices rules (same specificity) so phrase answers
 * wrap instead of being forced onto one line. */
.choice-bubbles-grid.reading-text-choices {
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.choice-bubbles-grid.reading-text-choices .choice-bubble-btn {
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    justify-content: flex-start;
    min-height: 52px;
    padding: 0.6rem 0.9rem;
    white-space: normal;
}

/* ==================== LEARN "▶ WATCH HOW" CONCEPT LESSONS ====================
   lib/lesson-overlay.js (hint page) + lib/lesson-player.js. Buttons sit in the
   Strategies break-to-ten body and under the multi-digit carry card. */
.lesson-watch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.35rem 1rem;
    border: 2.5px solid #1e293b;
    border-radius: 12px;
    background: var(--theme-primary, #10b981);
    color: #ffffff;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    box-shadow: 0 3px 0 #1e293b;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
.lesson-watch-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #1e293b; }
.lesson-watch-btn:focus-visible { outline: 3px solid #1e293b; outline-offset: 3px; }
.lesson-watch-play { font-size: 0.85em; }
.sh-watch { display: flex; justify-content: center; margin-top: 0.9rem; }
.stacked-watch-row { display: flex; justify-content: center; margin-top: 0.75rem; }
/* PARENT-03: a missed World question's "🎬 See why" (the pond popup, on top of the World) sits in the popup's header, left
   of its ✕, so it adds no height (a tall array's retry must still fit with nothing to scroll: lightsfit); and the lesson
   it opens sits above the World (12000) and its popup (#readingNookModal, 12500). */
#readingNookModal .modal-header { gap: 0.5rem; }
/* The card scrolls when it is taller than a landscape screen: its header (and so its See why) stays pinned in view. */
#readingNookModal .modal-header { position: sticky; top: 0; z-index: 2; background: #ffffff; }
#readingNookModal .modal-title-group { min-width: 0; }
#readingNookModal .modal-title-group .modal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reading-nook-lesson-btn { margin-left: auto; flex-shrink: 0; padding: 0.3rem 0.75rem; white-space: nowrap; }
body.kid-world-open .lesson-overlay { z-index: 13000; }

.lesson-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lesson-player-host { width: 100%; max-width: 460px; margin: 0 auto; padding: 0.5rem 0.25rem 1rem; }
.lesson-status { margin: 2rem 0; text-align: center; font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif); font-weight: 600; color: #334155; }

.lesson-overlay .ml-player { display: flex; flex-direction: column; gap: 10px; }
.lesson-overlay .ml-stage { background: #fef9ec; border: 3px solid #1e293b; border-radius: 18px; overflow: hidden; line-height: 0; }
.lesson-overlay .ml-stage svg { display: block; width: 100%; height: auto; }
.lesson-overlay .ml-caption { margin: 0; min-height: 2.6em; font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif); font-weight: 600; font-size: 1.15rem; text-align: center; color: #1e293b; }
.lesson-overlay .ml-choices { display: flex; gap: 12px; justify-content: center; }
.lesson-overlay .ml-choices[hidden] { display: none; }
.lesson-overlay .ml-choice {
    min-width: 76px; min-height: 60px; font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif); font-weight: 600; font-size: 1.6rem;
    color: #1e293b; background: #ffffff; border: 3px solid #1e293b; border-radius: 16px; box-shadow: 0 4px 0 #1e293b;
    cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.lesson-overlay .ml-choice:active { transform: translateY(3px); box-shadow: 0 1px 0 #1e293b; }
.lesson-overlay .ml-choice.is-right { background: #d1fae5; border-color: #059669; }
.lesson-overlay .ml-choice.is-wrong { background: #fee2e2; animation: ml-shake 0.3s; }
@keyframes ml-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.lesson-overlay .ml-dots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.lesson-overlay .ml-dot { width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 2px solid #1e293b; background: #ffffff; cursor: pointer; }
.lesson-overlay .ml-dot.is-done { background: #d1fae5; }
.lesson-overlay .ml-dot.is-on { background: var(--theme-primary, #10b981); }
.lesson-overlay .ml-controls { display: flex; gap: 12px; justify-content: center; }
.lesson-overlay .ml-btn {
    width: 52px; height: 52px; font-size: 1.4rem; border-radius: 50%; border: 3px solid #1e293b; background: #ffffff; color: #1e293b;
    box-shadow: 0 3px 0 #1e293b; cursor: pointer; touch-action: manipulation;
}
.lesson-overlay .ml-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #1e293b; }
.lesson-overlay .ml-btn-main { width: 64px; height: 64px; background: var(--theme-primary, #10b981); color: #ffffff; font-size: 1.6rem; }
@media (prefers-reduced-motion: reduce) { .lesson-overlay .ml-choice.is-wrong { animation: none; } }
/* Landscape (phone lying down): lib/lesson-player.js draws the 16:9 'wide' picture (same query), sized to the
   body's height and set beside the caption, choices and controls, so all of it fits on a 390 px tall screen. */
@media (orientation: landscape) {
    .lesson-overlay .lesson-body { container-type: size; }
    .lesson-overlay .lesson-player-host { max-width: 1100px; padding: 8px 12px; box-sizing: border-box; }
    .lesson-overlay .ml-player {
        display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 8px; align-items: center;
        grid-template-rows: 1fr auto auto auto auto 1fr;
        grid-template-areas: "stage ." "stage caption" "stage choices" "stage dots" "stage controls" "stage .";
    }
    .lesson-overlay .ml-stage { grid-area: stage; width: min(760px, calc((100cqh - 22px) * 16 / 9), calc(100cqw - 340px)); }
    .lesson-overlay .ml-caption { grid-area: caption; font-size: 1.05rem; }
    .lesson-overlay .ml-choices { grid-area: choices; flex-wrap: wrap; gap: 10px; }
    .lesson-overlay .ml-choice { min-width: 68px; min-height: 52px; font-size: 1.4rem; }
    .lesson-overlay .ml-dots { grid-area: dots; }
    .lesson-overlay .ml-controls { grid-area: controls; }
    .lesson-overlay .ml-btn { width: 46px; height: 46px; }
    .lesson-overlay .ml-btn-main { width: 56px; height: 56px; }
}

/* ==================== LEARN "🎬 WATCH MATH LESSONS" ====================
   Entry button on the Learn hub + lib/lesson-library.js (hint page listing
   every concept lesson; a card opens lib/lesson-overlay.js on top). */
.learn-lessons-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 56px;
    margin: 0.75rem 0 0.25rem;
    padding: 0.55rem 0.9rem;
    border: 2.5px solid #1e293b;
    border-radius: 16px;
    background: #fef9ec;
    color: #1e293b;
    box-shadow: 0 3px 0 #1e293b;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
.learn-lessons-btn[hidden] { display: none; }
.learn-lessons-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #1e293b; }
.learn-lessons-btn:focus-visible { outline: 3px solid #1e293b; outline-offset: 3px; }
.learn-lessons-icon { font-size: 1.6rem; line-height: 1; }
.learn-lessons-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.learn-lessons-title { font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.learn-lessons-sub { font-size: 0.85rem; color: #475569; line-height: 1.3; }
.learn-lessons-go, .ll-play {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; border-radius: 50%;
    border: 2.5px solid #1e293b; background: var(--theme-primary, #10b981); color: #ffffff;
    font-size: 0.9rem; padding-left: 2px;
}

.lesson-library-body { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 1rem 1.5rem; box-sizing: border-box; }
.lesson-library-body > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.lesson-library-body .ll-intro { margin-top: 0.25rem; margin-bottom: 1rem; color: #334155; font-size: 0.95rem; }
.ll-group { margin-top: 0; margin-bottom: 1.25rem; }
.ll-group-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-weight: 600; font-size: 1.05rem; color: #1e293b;
}
.ll-grid { display: grid; grid-template-columns: 1fr; gap: 0.65rem; }
@media (min-width: 720px) { .ll-grid { grid-template-columns: 1fr 1fr; } }
.ll-card {
    box-sizing: border-box;
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; min-height: 84px; padding: 0.55rem 0.7rem;
    border: 2.5px solid #1e293b; border-radius: 16px;
    background: #ffffff; color: #1e293b; box-shadow: 0 3px 0 #1e293b;
    text-align: left; cursor: pointer; touch-action: manipulation;
    -webkit-user-select: none; user-select: none;
}
.ll-card:active { transform: translateY(2px); box-shadow: 0 1px 0 #1e293b; }
.ll-card:focus-visible { outline: 3px solid #1e293b; outline-offset: 3px; }
.ll-art { flex: none; width: 104px; height: auto; border: 2px solid #1e293b; border-radius: 10px; }
.ll-text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.ll-title { font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif); font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.ll-blurb { font-size: 0.85rem; color: #475569; line-height: 1.3; }
.ll-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.ll-example, .ll-grade { font-size: 0.75rem; font-weight: 600; border-radius: 999px; padding: 0.05rem 0.5rem; }
.ll-example { background: #ede9fe; color: #5b21b6; }
.ll-grade { background: #d1fae5; color: #065f46; }

/* ===== First-launch setup (LEARN-01): Who's playing → How old → look ===== */
.first-setup {
    position: fixed;
    inset: 0;
    z-index: 21000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(160deg, #d1fae5 0%, #e0f2fe 55%, #ede9fe 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.first-setup.hidden { display: none; }
body.first-setup-open { overflow: hidden; }
.first-setup-card {
    width: 100%;
    max-width: 460px;
    margin: auto;
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
    padding: 20px 18px 18px;
    text-align: center;
}
.first-setup-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
.first-setup-dot { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.first-setup-dot.is-on { background: #10b981; }
.first-setup-pane { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.first-setup-pane.hidden { display: none; }
.first-setup-hero { font-size: 3.4rem; line-height: 1; }
.first-setup-title { font-family: var(--font-heading); font-size: 1.7rem; margin: 0; color: #0f172a; overflow-wrap: anywhere; }
.first-setup-input { width: 100%; max-width: 320px; min-height: 56px; font-size: 1.4rem; text-align: center; border-radius: 16px; }
.first-setup-next { min-height: 56px; min-width: 180px; font-size: 1.25rem; border-radius: 16px; }
.first-setup-next:disabled { opacity: 0.45; }
.first-setup-back { min-height: 44px; border-radius: 14px; }
.first-setup-ages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; }
.first-setup-age,
.first-setup-look {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 76px;
    border: 3px solid #e2e8f0;
    border-radius: 18px;
    background: #f8fafc;
    cursor: pointer;
    touch-action: manipulation;
    padding: 4px;
}
.first-setup-age:active,
.first-setup-look:active { border-color: #10b981; background: #ecfdf5; }
.first-setup-age-pic { font-size: 1.9rem; line-height: 1.1; }
.first-setup-age-num { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: #0f172a; }
.first-setup-looks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.first-setup-look { min-height: 104px; overflow: hidden; }
.first-setup-look .profile-portrait-svg { overflow: hidden; }
.first-setup-look .profile-portrait,
.first-setup-look .profile-portrait-emoji { display: block; width: 88px; height: 88px; font-size: 3rem; line-height: 88px; }
@media (max-width: 380px) {
    .first-setup-ages { grid-template-columns: repeat(4, 1fr); }
}
@media (max-height: 520px) {
    .first-setup-card { max-width: 720px; padding: 12px 16px; }
    .first-setup-pane { gap: 8px; }
    .first-setup-hero { font-size: 2.2rem; }
    .first-setup-title { font-size: 1.35rem; }
    .first-setup-age { min-height: 64px; }
    .first-setup-age-pic { font-size: 1.5rem; }
    .first-setup-looks { grid-template-columns: repeat(6, 1fr); }
    .first-setup-look { min-height: 92px; }
    .first-setup-look .profile-portrait,
    .first-setup-look .profile-portrait-emoji { width: 76px; height: 76px; line-height: 76px; }
}

/* ==================== LEARN-02: "▶ PLAY TODAY'S MATH" + MATH VOICE ====================
   A big start button above the topic / skill grid (picks a skill for the kid's grade),
   and the question sheet's 🔊 / 🔈 voice button (lib/math-voice.js). */
.learn-today-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 60px;
    margin: 0 0 0.75rem;
    padding: 0.6rem 1rem;
    border: 3px solid #1e293b;
    border-radius: 18px;
    background: var(--theme-primary, #10b981);
    color: #ffffff;
    box-shadow: 0 4px 0 #1e293b;
    font-family: var(--font-heading, 'Fredoka', system-ui, sans-serif);
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.2;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
.learn-today-btn[hidden] { display: none; }
.learn-today-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #1e293b; }
.learn-today-btn:focus-visible { outline: 3px solid #1e293b; outline-offset: 3px; }
.learn-today-go {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    border: 2.5px solid #1e293b; background: #ffffff; color: #1e293b;
    font-size: 1rem; padding-left: 3px;
}
/* Icon-only: 🔊 on, 🔈 off (the aria-label says which). */
.learn-toolbar-chip.math-voice-toggle .learn-chip-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.learn-toolbar-chip.math-voice-toggle[aria-pressed="false"] { opacity: 0.75; }
@media (max-height: 500px) {
    .learn-today-btn { min-height: 48px; font-size: 1.1rem; margin-bottom: 0.5rem; }
    .learn-today-go { width: 32px; height: 32px; }
}

/* LEARN-03 · a second try before the answer: after a first miss the answer box wiggles and a hint shows right under
   the equation, in WHY-01's friendly yellow (not red); a picked choice greys out like the World's (.is-out). */
.learn-try-hint { margin: 6px auto 0; max-width: min(100%, 34rem); padding: 6px 12px; border-radius: 14px; background: #fff3c4;
    color: #1e293b; font-size: 0.95rem; font-weight: 700; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.learn-try-hint.hidden { display: none; }
.learn-try-hint .learn-try-title { font-weight: 900; }
.choice-bubbles-grid .choice-bubble-btn.is-out { opacity: 0.35; text-decoration: line-through; pointer-events: none; }
.equation-display.is-try-wiggle .answer-placeholder,
.equation-display.is-try-wiggle .stacked-math-card,
.equation-display.is-try-wiggle .bond-missing { animation: learn-try-wiggle 0.45s ease-in-out; }
@keyframes learn-try-wiggle {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px) rotate(-2deg); }
    40% { transform: translateX(6px) rotate(2deg); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .equation-display.is-try-wiggle .answer-placeholder,
    .equation-display.is-try-wiggle .stacked-math-card,
    .equation-display.is-try-wiggle .bond-missing { animation: none; outline: 3px solid #f2b84b; outline-offset: 2px; }
}

/* ==================== QUEST PINBALL ==================== */
body.quest-open {
    overflow: hidden;
}

.quest-overlay {
    padding: 0.14rem;
}

.quest-overlay,
.quest-overlay * {
    touch-action: none;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.quest-shell {
    width: 100%;
    max-width: none;
    padding: 0.22rem 0.22rem 0.22rem;
    gap: 0.18rem;
    border-width: 3px;
}

.quest-overlay .muncher-title-icon {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-grid;
    place-items: center;
    font-size: 1.2rem;
}

/* Marquee: the kid's face in a gold porthole and "NAME'S QUEST" in gold. */
.quest-overlay .quest-avatar-face {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.quest-overlay .quest-avatar.has-avatar {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, #fde68a, #f59e0b);
    border: 2px solid #7c2d12;
    box-shadow: 0 0 0 2px #fbbf24, 0 0 10px rgba(251, 191, 36, 0.6);
}

.quest-overlay .quest-avatar svg {
    width: 120%;
    height: 120%;
    margin-top: 12%;
}

.quest-overlay .quest-marquee-title {
    color: #fde68a;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #7c2d12, 0 0 12px rgba(251, 191, 36, 0.55);
}

/* Chasing marquee bulbs around the cabinet. */
.quest-shell {
    position: relative;
}

.quest-shell::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle, #fde68a 0 2px, transparent 2.6px) 0 0 / 14px 14px repeat-x,
        radial-gradient(circle, #fde68a 0 2px, transparent 2.6px) 7px 100% / 14px 14px repeat-x;
    opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
    .quest-overlay.is-idle .quest-shell::before,
    .quest-overlay.is-gameover .quest-shell::before {
        animation: quest-bulbs 0.9s steps(2, start) infinite;
    }
}

@keyframes quest-bulbs {
    to { opacity: 0.25; }
}

.quest-overlay .muncher-stat-chip {
    min-height: 1.7rem;
    padding: 0.06rem 0.5rem;
    font-size: 0.82rem;
}

/* Dot-matrix style strip: score on the left, the latest message on the right. */
.quest-dmd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.2rem 0.7rem;
    border-radius: 0.45rem;
    border: 2px solid #3a1d08;
    background-color: #120804;
    background-image: radial-gradient(circle, rgba(255, 138, 31, 0.08) 1px, transparent 1.4px);
    background-size: 4px 4px;
    color: #ff8a1f;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-shadow: 0 0 6px rgba(255, 138, 31, 0.55);
    font-variant-numeric: tabular-nums;
}

.quest-dmd-score {
    font-size: 1.35rem;
    text-shadow: 0 0 6px rgba(255, 138, 31, 0.75);
}

.quest-dmd-msg {
    text-shadow: 0 0 6px rgba(255, 138, 31, 0.75);
}

/* The question (or land pick) gets its own big line under the score. */
.quest-dmd {
    flex-wrap: wrap;
    row-gap: 0;
}

.quest-dmd-ask {
    flex: 1 0 100%;
    text-align: center;
    font-size: 1.45rem;
    line-height: 1.25;
    color: #ffb347;
    text-shadow: 0 0 8px rgba(255, 138, 31, 0.9);
    letter-spacing: 0.03em;
    overflow-wrap: anywhere;
}

@media (orientation: portrait) {
    .quest-dmd-ask {
        font-size: 1.1rem;
    }
}

/* Landscape phones are short: score, question and message share one line so the table gets the height. */
@media (orientation: landscape) and (max-height: 520px) {
    .quest-dmd {
        flex-wrap: nowrap;
        padding: 0.1rem 0.7rem;
    }

    .quest-dmd-score {
        flex: 0 0 auto;
    }

    .quest-dmd-ask {
        flex: 1 1 auto;
        order: 1;
        min-width: 0;
        font-size: 1.3rem;
    }

    .quest-dmd-msg {
        flex: 0 1 auto;
        order: 2;
        min-width: 0;
        max-width: 32%;
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.quest-dmd-ask.is-word {
    color: #fde68a;
}

.quest-music-btn {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    border: 2px solid #f59e0b;
    background: #3a2614;
    color: #fde68a;
    font-size: 1.25rem;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    position: relative;
    touch-action: manipulation;
}

.quest-music-btn.is-off,
.quest-music-btn.is-muted {
    opacity: 0.55;
    border-color: #7a5a3a;
}

.quest-music-btn.is-off::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    top: 50%;
    height: 3px;
    border-radius: 2px;
    background: #f87171;
    transform: rotate(-40deg);
}

.quest-flash {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}

.quest-flash.is-good {
    background: radial-gradient(circle at 50% 45%, rgba(134, 239, 172, 0.55), rgba(34, 197, 94, 0) 70%);
    animation: quest-flash 0.45s ease-out;
}

.quest-flash.is-gold {
    background: radial-gradient(circle at 50% 45%, rgba(253, 224, 71, 0.65), rgba(251, 146, 60, 0) 72%);
    animation: quest-flash 0.7s ease-out;
}

@keyframes quest-flash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .quest-flash.is-good,
    .quest-flash.is-gold {
        animation-duration: 0.01s;
    }
}

/* Quest map: the kid's avatar walks from camp through the 4 lands to the crown.
   Landscape: a column in the empty space left of the table. Portrait: a strip above it. */
.quest-map {
    --step: 0;
    position: absolute;
    z-index: 2;
    pointer-events: none;
    font-family: var(--font-heading, inherit);
    color: #fde68a;
}

.quest-map-track {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.quest-map-track::before {
    content: "";
    position: absolute;
    border: 0 dashed rgba(251, 191, 36, 0.55);
}

.quest-map-stop {
    position: relative;
    z-index: 1;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #2a1c10;
    border: 2px solid #5a3a1c;
    font-size: 1rem;
}

.quest-map-stop[data-land="0"] { --land: #22c55e; }
.quest-map-stop[data-land="1"] { --land: #f59e0b; }
.quest-map-stop[data-land="2"] { --land: #38bdf8; }
.quest-map-stop[data-land="3"] { --land: #ef4444; }

.quest-map-stop[data-land] {
    border-color: var(--land);
    background: radial-gradient(circle, color-mix(in srgb, var(--land) 35%, #2a1c10), #2a1c10 70%);
}

.quest-map-stop.is-done {
    background: var(--land);
    box-shadow: 0 0 10px var(--land);
}

.quest-map-stop.is-done::before {
    content: '✓';
    color: #fff;
    font-weight: 900;
    font-size: 1.1em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.quest-map-stop.is-current,
.quest-map-stop.is-choosing {
    box-shadow: 0 0 0 3px #fde68a, 0 0 14px var(--land);
}

.quest-map-stop b {
    position: absolute;
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fde68a;
    text-shadow: 0 1px 0 #000;
}

.quest-map-stop i {
    position: absolute;
    white-space: nowrap;
    font-style: normal;
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    color: #fde68a;
}

.quest-map-crown {
    border-color: #fbbf24;
    filter: grayscale(0.9) brightness(0.7);
}

.quest-map.is-crown .quest-map-crown {
    filter: none;
    box-shadow: 0 0 16px #fbbf24;
}

.quest-map-kid {
    position: absolute;
    z-index: 2;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, #fde68a, #f59e0b);
    border: 2px solid #7c2d12;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: left 0.9s ease-in-out, bottom 0.9s ease-in-out;
}

.quest-map-kid svg {
    width: 120%;
    height: 120%;
    margin: 6% 0 0 -10%;
}

@media (orientation: landscape) {
    .quest-map {
        left: 0.8rem;
        top: 0.8rem;
        bottom: 0.8rem;
        width: 9.5rem;
    }

    .quest-map-track {
        flex-direction: column-reverse;
        padding: 0.2rem 0;
    }

    .quest-map-track::before {
        top: 1rem;
        bottom: 1rem;
        left: 1rem;
        border-left-width: 3px;
    }

    .quest-map-track {
        align-items: flex-start;
    }

    .quest-map-stop b {
        left: 2.5rem;
        top: 0.05rem;
    }

    .quest-map-stop i {
        left: 2.5rem;
        top: 1.05rem;
    }

    .quest-map-kid {
        left: -0.15rem;
        bottom: calc(var(--step) * (100% - 2rem) / 5 - 0.15rem);
        transition: bottom 0.9s ease-in-out;
    }
}

@media (orientation: portrait) {
    .quest-map {
        left: 0.6rem;
        right: 0.6rem;
        top: 0.5rem;
        height: 3.4rem;
    }

    .quest-map-track {
        align-items: flex-start;
    }

    .quest-map-track::before {
        left: 1rem;
        right: 1rem;
        top: 1rem;
        border-top-width: 3px;
    }

    .quest-map-stop b {
        top: 2.1rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.58rem;
    }

    .quest-map-stop i {
        top: 2.85rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .quest-map-kid {
        top: -0.15rem;
        left: calc(var(--step) * (100% - 2rem) / 5 - 0.15rem);
    }
}

/* The kid's crown after Crown Quest. */
.quest-overlay .quest-avatar {
    position: relative;
    overflow: visible;
}

.quest-overlay .quest-avatar.is-crowned::after {
    content: "👑";
    position: absolute;
    top: -0.85rem;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    font-size: 1.1rem;
}

.quest-dmd-msg {
    font-size: 0.95rem;
    text-transform: uppercase;
    text-align: right;
}

.quest-stage-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
    background: #140c06;
    border: 2px solid var(--muncher-gold-deep, #b45309);
    border-radius: 0.55rem;
}

.quest-stage,
.quest-fallback {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: none;
}

.quest-overlay.is-webgl-stage .quest-stage,
.quest-overlay.is-2d-stage .quest-fallback {
    display: block;
}

.quest-overlay .muncher-screen {
    position: absolute;
    inset: 0;
    background: rgba(20, 12, 6, 0.78);
}

/*
 * The plunger is part of the cabinet: a wood-and-gold housing in the corner of
 * the playfield frame with a chrome plate, a red knob that slides down as it is
 * pulled, and a column of lights for the power. It glows while a ball waits.
 */
.quest-launch-btn {
    --pull: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 3.7rem;
    height: 7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.45rem 0.35rem 0.3rem;
    border: 0;
    border-top: 3px solid var(--muncher-gold-deep, #b45309);
    border-left: 3px solid var(--muncher-gold-deep, #b45309);
    border-radius: 1.1rem 0 0 0;
    background:
        radial-gradient(circle, #fde68a 0 1.6px, transparent 2.2px) 0.35rem 0.35rem / 100% 100% no-repeat,
        radial-gradient(circle, #fde68a 0 1.6px, transparent 2.2px) calc(100% - 0.35rem) 0.35rem / 100% 100% no-repeat,
        linear-gradient(160deg, #4a2f17, #2a1a0c 60%, #1c1108);
    box-shadow: inset 0 2px 0 rgba(253, 230, 138, 0.25), -4px -4px 12px rgba(0, 0, 0, 0.45);
    color: #fde68a;
    cursor: pointer;
    touch-action: none;
}

.quest-launch-btn.hidden {
    display: none;
}

.quest-launch-plate {
    position: relative;
    flex: 1 1 auto;
    width: 2.6rem;
    border-radius: 0.6rem;
    background: linear-gradient(90deg, #6b7280, #e5e7eb 30%, #9ca3af 55%, #f3f4f6 75%, #6b7280);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* The slot the rod runs in. */
.quest-launch-plate::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 0.42rem;
    transform: translateX(-50%);
    border-radius: 0.3rem;
    background: #111827;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Power lights down the left of the plate, lit from the bottom as you pull. */
.quest-launch-meter {
    position: absolute;
    left: 0.18rem;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 0.32rem;
    border-radius: 0.2rem;
    background: radial-gradient(circle, #3a1d08 0 0.11rem, transparent 0.13rem) center top / 0.32rem 0.5rem repeat-y;
    overflow: hidden;
}

.quest-launch-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    background: radial-gradient(circle, #ff8a1f 0 0.11rem, transparent 0.13rem) center bottom / 0.32rem 0.5rem repeat-y;
    filter: drop-shadow(0 0 2px #ff8a1f);
}

/* The knob and its chrome rod slide down the slot with the pull. */
.quest-launch-knob {
    position: absolute;
    left: 50%;
    top: 0.1rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    transform: translate(-50%, calc(var(--pull) * 2.1rem));
    background: radial-gradient(circle at 35% 30%, #fff 0 8%, #fca5a5 14%, #dc2626 48%, #7f1d1d 100%);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.55), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
    filter: saturate(0.35) brightness(0.75);
    transition: filter 0.25s;
}

.quest-launch-knob::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 85%;
    width: 0.3rem;
    height: 1.4rem;
    transform: translateX(-50%);
    border-radius: 0 0 0.15rem 0.15rem;
    background: linear-gradient(90deg, #9ca3af, #f9fafb, #9ca3af);
    z-index: -1;
}

.quest-launch-label {
    font-family: var(--font-heading, inherit);
    font-weight: 800;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fbbf24;
    text-shadow: 0 1px 0 #000;
    opacity: 0.6;
}

.quest-launch-btn.is-ready .quest-launch-knob {
    filter: none;
}

.quest-launch-btn.is-ready .quest-launch-label {
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    .quest-launch-btn.is-ready:not(.is-pulling) .quest-launch-knob {
        animation: quest-knob-glow 1.1s ease-in-out infinite;
    }
}

@keyframes quest-knob-glow {
    50% { box-shadow: 0 3px 4px rgba(0, 0, 0, 0.55), 0 0 14px 4px rgba(252, 165, 165, 0.85); }
}

.quest-tune {
    position: absolute;
    left: 0.4rem;
    top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.5rem;
    background: rgba(20, 12, 6, 0.86);
    color: #fde68a;
    font-size: 0.72rem;
    max-width: 60%;
}

.quest-tune-row {
    display: grid;
    grid-template-columns: 6.2rem minmax(0, 1fr) 2.6rem;
    align-items: center;
    gap: 0.35rem;
    touch-action: auto;
}

.quest-tune-row input {
    touch-action: auto;
    width: 100%;
}


/* ---------- Quest Pinball: table picker and per-table cabinets ---------- */
.quest-tables {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Four tables on a phone: two even rows instead of 3 + 1. */
@media (max-width: 520px) and (orientation: portrait) {
    .quest-tables {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 9rem));
    }
}

.quest-table-card {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    min-width: 6.4rem;
    padding: 0.45rem 0.6rem 0.4rem;
    border: 2px solid #7a5a3a;
    border-radius: 0.8rem;
    background: linear-gradient(160deg, #4a2f17, #2a1a0c);
    color: #fde68a;
    font-family: var(--font-heading, inherit);
    cursor: pointer;
    touch-action: manipulation;
}

.quest-table-card.is-picked {
    border-color: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.45), 0 0 14px rgba(251, 191, 36, 0.5);
}

.quest-table-icon {
    font-size: 1.7rem;
    line-height: 1.1;
}

.quest-table-name {
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.quest-table-best {
    min-height: 0.9em;
    font-size: 0.66rem;
    color: #fcd34d;
    opacity: 0.85;
}

@media (orientation: landscape) and (max-height: 520px) {
    .quest-overlay .muncher-screen {
        gap: 0.4rem;
        padding: 0.5rem 0.9rem;
    }

    /* Four tables stay on one row even on a 568px-wide phone. */
    .quest-tables {
        flex-wrap: nowrap;
        gap: 0.35rem;
    }

    .quest-table-card {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        column-gap: 0.3rem;
        justify-items: start;
        align-items: center;
        min-width: 0;
        padding: 0.3rem 0.45rem;
    }

    .quest-table-icon {
        grid-row: span 2;
        font-size: 1.4rem;
    }
}

/* Zoo Escape: jungle-green trim and lime bulbs on the same wood cabinet. */
.quest-overlay[data-quest-table="zoo"] .quest-marquee-title {
    color: #d9f99d;
    text-shadow: 0 2px 0 #365314, 0 0 12px rgba(163, 230, 53, 0.55);
}

.quest-overlay[data-quest-table="zoo"] .quest-shell::before {
    background:
        radial-gradient(circle, #d9f99d 0 2px, transparent 2.6px) 0 0 / 14px 14px repeat-x,
        radial-gradient(circle, #d9f99d 0 2px, transparent 2.6px) 7px 100% / 14px 14px repeat-x;
}

.quest-overlay[data-quest-table="zoo"] .quest-stage-wrap,
.quest-overlay[data-quest-table="zoo"] .quest-launch-btn {
    border-color: #65a30d;
}

.quest-overlay[data-quest-table="zoo"] .quest-avatar.is-crowned::after {
    content: "🎉";
}

/* Rocket Run: rocket-orange title, sky-blue bulbs and trim. */
.quest-overlay[data-quest-table="rocket"] .quest-marquee-title {
    color: #fed7aa;
    text-shadow: 0 2px 0 #7c2d12, 0 0 12px rgba(249, 115, 22, 0.6);
}

.quest-overlay[data-quest-table="rocket"] .quest-shell::before {
    background:
        radial-gradient(circle, #7dd3fc 0 2px, transparent 2.6px) 0 0 / 14px 14px repeat-x,
        radial-gradient(circle, #7dd3fc 0 2px, transparent 2.6px) 7px 100% / 14px 14px repeat-x;
}

.quest-overlay[data-quest-table="rocket"] .quest-stage-wrap,
.quest-overlay[data-quest-table="rocket"] .quest-launch-btn {
    border-color: #38bdf8;
}

.quest-overlay[data-quest-table="rocket"] .quest-avatar.is-crowned::after {
    content: "🚩";
}

/* ---- Recipe Rush kitchens: the kitchen picker, the customer line's order bubbles, the music button ---- */
.recipe-overlay.is-idle .recipe-start {
    /* lighter so the picked kitchen shows through behind the buttons */
    background: rgba(20, 12, 6, 0.42);
}

.recipe-kitchen-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.25rem, 1.4vmin, 0.55rem);
    max-width: 100%;
}

.recipe-kitchen-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05em;
    min-width: clamp(3.1rem, 13vmin, 4.6rem);
    min-height: clamp(2.9rem, 13vmin, 4.2rem);
    padding: 0.2em 0.35em;
    border: 3px solid rgba(255, 251, 235, 0.4);
    border-radius: 1rem;
    background: rgba(30, 18, 8, 0.6);
    color: #fffbeb;
    font-family: var(--font-heading, Fredoka, sans-serif);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
}

.recipe-kitchen-btn.is-selected {
    border-color: #1e293b;
    background: #fffbeb;
    color: #1e293b;
    box-shadow: 0 3px 0 #92400e, 0 0 0 3px #facc15;
    transform: translateY(-2px) scale(1.06);
}

.recipe-kitchen-btn:focus-visible,
.recipe-music-btn:focus-visible {
    outline: 3px solid #fffbeb;
    outline-offset: 2px;
}

.recipe-kitchen-icon {
    font-size: clamp(1.3rem, 6vmin, 2.1rem);
    line-height: 1;
}

.recipe-kitchen-name {
    font-size: clamp(0.58rem, 2vmin, 0.8rem);
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.recipe-overlay .recipe-start .recipe-game-card {
    min-height: clamp(5.4rem, 24vmin, 8.6rem);
}

.recipe-overlay .recipe-start .recipe-game-icon {
    font-size: clamp(1.5rem, 7vmin, 2.8rem);
}

.recipe-line {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
}

.recipe-cust {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.1em;
    /* the bubble sits to the left of the customer's head, over the shelf, its tail pointing at them */
    transform: translate(-100%, -50%);
    padding: 0.1em 0.35em;
    border: 3px solid #1e293b;
    border-radius: 999px;
    background: #fffbeb;
    font-size: clamp(0.85rem, 3.6vmin, 1.5rem);
    line-height: 1;
    white-space: nowrap;
    transition: left 0.5s ease, top 0.5s ease;
}

.recipe-cust::after {
    content: '';
    position: absolute;
    right: -0.36em;
    top: 50%;
    width: 0.5em;
    height: 0.5em;
    border-right: 3px solid #1e293b;
    border-top: 3px solid #1e293b;
    background: inherit;
    transform: translateY(-50%) rotate(45deg);
}

.recipe-cust.is-front {
    box-shadow: 0 0 0 3px #facc15;
}

.recipe-cust.is-waiting {
    background: #fef3c7;
}

.recipe-cust.is-grumpy {
    background: #fecaca;
    animation: recipe-cust-huff 0.9s ease-in-out infinite;
}

.recipe-cust.is-vip {
    background: #fde047;
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.95);
}

.recipe-cust.is-seat-a {
    border-color: #c2410c;
}

.recipe-cust.is-seat-b {
    border-color: #1d4ed8;
}

.recipe-cust-crown {
    position: absolute;
    left: 50%;
    top: -0.85em;
    transform: translateX(-50%);
    font-size: 0.8em;
}

.recipe-cust-mood {
    font-size: 0.78em;
}

.recipe-pop.is-tip {
    background: #fde047;
    font-size: clamp(1rem, 4vmin, 1.8rem);
}

@keyframes recipe-cust-huff {
    0%, 100% { transform: translate(-100%, -50%) rotate(0deg); }
    50% { transform: translate(-100%, -50%) rotate(-4deg); }
}

.recipe-music-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-right: 0.35rem;
    border: 3px solid #1e293b;
    border-radius: 999px;
    background: #fde68a;
    font-size: 1.2rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.recipe-music-btn.is-muted {
    opacity: 0.55;
}

.recipe-music-btn.is-off {
    background: #cbd5e1;
    opacity: 0.75;
}

.recipe-music-btn.is-off span {
    filter: grayscale(1);
}

@media (prefers-reduced-motion: reduce) {
    .recipe-cust,
    .recipe-cust.is-grumpy {
        animation: none;
        transition: none;
    }
}

/* Ninja Dojo: lacquer-red trim, blossom-pink bulbs and a red title. */
.quest-overlay[data-quest-table="ninja"] .quest-marquee-title {
    color: #fecaca;
    text-shadow: 0 2px 0 #7f1d1d, 0 0 12px rgba(244, 114, 182, 0.55);
}

.quest-overlay[data-quest-table="ninja"] .quest-shell::before {
    background:
        radial-gradient(circle, #f9a8d4 0 2px, transparent 2.6px) 0 0 / 14px 14px repeat-x,
        radial-gradient(circle, #f9a8d4 0 2px, transparent 2.6px) 7px 100% / 14px 14px repeat-x;
}

.quest-overlay[data-quest-table="ninja"] .quest-stage-wrap,
.quest-overlay[data-quest-table="ninja"] .quest-launch-btn {
    border-color: #dc2626;
}

.quest-overlay[data-quest-table="ninja"] .quest-avatar.is-crowned::after {
    content: "🥋";
}

/* =============================================================================
   Muncher Worlds: world map, world backdrops, results stars
   ============================================================================= */
.muncher-overlay { --mw-sky-a: #1c1208; --mw-sky-b: #3d2410; --mw-glow: rgba(251, 191, 36, 0.35); }
.muncher-overlay[data-muncher-world="garden"] { --mw-sky-a: #14532d; --mw-sky-b: #4d7c0f; --mw-glow: rgba(190, 242, 100, 0.45); }
.muncher-overlay[data-muncher-world="cave"]   { --mw-sky-a: #1e1b4b; --mw-sky-b: #3730a3; --mw-glow: rgba(103, 232, 249, 0.42); }
.muncher-overlay[data-muncher-world="candy"]  { --mw-sky-a: #831843; --mw-sky-b: #be185d; --mw-glow: rgba(253, 224, 71, 0.4); }
.muncher-overlay[data-muncher-world="ocean"]  { --mw-sky-a: #083344; --mw-sky-b: #0e7490; --mw-glow: rgba(253, 186, 116, 0.42); }
.muncher-overlay[data-muncher-world="space"]  { --mw-sky-a: #020617; --mw-sky-b: #312e81; --mw-glow: rgba(253, 224, 71, 0.38); }

.muncher-overlay[data-muncher-world] .muncher-board-wrap {
    border-radius: 0.95rem;
    background:
        radial-gradient(90% 70% at 50% 110%, var(--mw-glow), transparent 70%),
        linear-gradient(180deg, var(--mw-sky-a) 0%, var(--mw-sky-b) 100%);
}

.muncher-screen.muncher-map-screen {
    gap: 0.5rem;
    padding: 0.65rem 0.7rem;
    justify-content: space-evenly;
    background:
        radial-gradient(90% 70% at 50% 110%, var(--mw-glow), transparent 70%),
        linear-gradient(180deg, var(--mw-sky-a) 0%, var(--mw-sky-b) 100%);
    overflow: hidden;
}

.muncher-world-strip {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    width: 100%;
    flex-wrap: nowrap;
}

.muncher-world-tab {
    flex: 1 1 0;
    min-width: 0;
    max-width: 8.5rem;
    min-height: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
    padding: 0.3rem 0.25rem;
    border-radius: 0.8rem;
    border: 3px solid rgba(255, 251, 235, 0.35);
    background: rgba(0, 0, 0, 0.28);
    color: var(--muncher-cream);
    font-family: var(--font-heading);
    cursor: pointer;
    touch-action: manipulation;
}
.muncher-world-tab.is-on {
    border-color: var(--muncher-gold);
    background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
    color: var(--muncher-brown-edge);
    box-shadow: 0 3px 0 var(--muncher-brown-edge);
}
.muncher-world-tab.is-locked { opacity: 0.55; cursor: default; }
.muncher-world-icon { font-size: 1.35rem; line-height: 1; }
.muncher-world-name {
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.muncher-world-stars { font-size: 0.66rem; font-weight: 700; opacity: 0.85; }

.muncher-map-title.muncher-screen-title { font-size: 1.35rem; }

.muncher-world-path {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 34rem;
    padding-top: 1.6rem;
}

.muncher-path-step {
    flex: 1 1 0;
    min-width: 0.6rem;
    height: 0.4rem;
    margin: 0 -0.1rem 1.1rem;
    border-radius: 1rem;
    background: repeating-linear-gradient(90deg, rgba(255, 251, 235, 0.35) 0 0.45rem, transparent 0.45rem 0.8rem);
}
.muncher-path-step.is-open { background: repeating-linear-gradient(90deg, var(--muncher-gold) 0 0.45rem, transparent 0.45rem 0.8rem); }

.muncher-path-node {
    position: relative;
    flex: 0 0 auto;
    width: 3.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
}
.muncher-path-num {
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 4px solid var(--muncher-brown-edge);
    background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
    color: var(--muncher-brown-edge);
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    box-shadow: 0 4px 0 var(--muncher-brown-edge);
}
.muncher-path-node.is-boss .muncher-path-num {
    width: 3.7rem;
    height: 3.7rem;
    font-size: 1.6rem;
    background: linear-gradient(180deg, #fde68a 0%, #f59e0b 100%);
}
.muncher-path-node.is-done .muncher-path-num { background: linear-gradient(180deg, #fef9c3 0%, #facc15 100%); }
.muncher-path-node.is-locked { cursor: default; }
.muncher-path-node.is-locked .muncher-path-num {
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(255, 251, 235, 0.35);
    box-shadow: none;
    font-size: 1.05rem;
}
.muncher-path-node.is-next .muncher-path-num {
    border-color: #fff;
    animation: muncher-node-pulse 1.4s ease-in-out infinite;
}
@keyframes muncher-node-pulse {
    0%, 100% { box-shadow: 0 4px 0 var(--muncher-brown-edge), 0 0 0 0 rgba(255, 255, 255, 0.6); }
    50% { box-shadow: 0 4px 0 var(--muncher-brown-edge), 0 0 0 0.45rem rgba(255, 255, 255, 0); }
}
.muncher-path-hero {
    position: absolute;
    top: -2.1rem;
    left: 50%;
    width: 2.6rem;
    height: 2.6rem;
    transform: translateX(-50%);
    pointer-events: none;
    animation: muncher-hero-bob 1.2s ease-in-out infinite;
}
.muncher-path-hero .muncher-avatar-wrap,
.muncher-path-hero svg { width: 100%; height: 100%; }
@keyframes muncher-hero-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-4px); }
}
.muncher-path-stars { display: flex; gap: 0.05rem; font-size: 0.85rem; line-height: 1; min-height: 0.9rem; }
.muncher-path-stars .is-on,
.muncher-result-star.is-on .muncher-result-star-icon { color: #facc15; text-shadow: 0 1px 0 #92400e; }
.muncher-path-stars .is-off { color: rgba(255, 251, 235, 0.3); }

.muncher-map-tip.muncher-screen-copy { font-size: 0.85rem; max-width: 28rem; }

.muncher-world-chip {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
    padding: 0.05rem 0.5rem;
    border-radius: 1rem;
    background: var(--muncher-brown-edge);
    color: var(--muncher-cream);
}
.muncher-world-chip.hidden { display: none; }

.muncher-over-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}
.muncher-over-actions .hidden { display: none; }
.muncher-over-actions .muncher-screen-btn.is-quiet {
    min-width: 0;
    min-height: 2.8rem;
    font-size: 1rem;
    padding: 0.5rem 1rem;
    filter: saturate(0.6);
}
.muncher-map-btn { min-height: 2.8rem; padding: 0.5rem 1rem; font-size: 1rem; }

.muncher-result-stars { display: flex; gap: 0.7rem; justify-content: center; }
.muncher-result-star {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    width: 5.2rem;
    opacity: 0;
    animation: muncher-star-pop 0.45s cubic-bezier(.2, 1.6, .4, 1) forwards;
    animation-delay: calc(var(--i) * 0.22s + 0.1s);
}
.muncher-result-star-icon { font-size: 2.7rem; line-height: 1; color: rgba(255, 251, 235, 0.25); }
.muncher-result-star:nth-child(2) .muncher-result-star-icon { font-size: 3.2rem; }
.muncher-result-star-why {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    color: #fde68a;
}
.muncher-result-star:not(.is-on) .muncher-result-star-why { opacity: 0.55; }
@keyframes muncher-star-pop {
    0% { opacity: 0; transform: scale(0.3); }
    100% { opacity: 1; transform: scale(1); }
}
.muncher-result-sad { font-size: 2.6rem; line-height: 1; }
.muncher-result-unlock {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    color: #bbf7d0;
}

@media (prefers-reduced-motion: reduce) {
    .muncher-path-node.is-next .muncher-path-num,
    .muncher-path-hero { animation: none; }
    .muncher-result-star { animation: none; opacity: 1; }
}

/* Phones in landscape (how kids play): squeeze the map into the short glass. */
@media (max-height: 460px) {
    .muncher-screen.muncher-map-screen { gap: 0.25rem; padding: 0.4rem 0.6rem; }
    .muncher-world-tab { min-height: 2.5rem; padding: 0.15rem 0.2rem; flex-direction: row; gap: 0.3rem; }
    .muncher-world-icon { font-size: 1.1rem; }
    .muncher-world-stars { display: none; }
    .muncher-map-title.muncher-screen-title { font-size: 1.1rem; }
    .muncher-world-path { padding-top: 1.4rem; }
    .muncher-path-num { width: 2.7rem; height: 2.7rem; font-size: 1.15rem; }
    .muncher-path-node.is-boss .muncher-path-num { width: 3.1rem; height: 3.1rem; }
    .muncher-map-tip.muncher-screen-copy { display: none; }
    .muncher-map-screen .muncher-screen-btn { min-height: 2.8rem; padding: 0.45rem 1.3rem; font-size: 1.1rem; }
    .muncher-result-star-icon { font-size: 2.1rem; }
    .muncher-result-star:nth-child(2) .muncher-result-star-icon { font-size: 2.5rem; }
    #muncherScreenOver { gap: 0.35rem; padding: 0.5rem; }
    #muncherScreenOver .muncher-screen-title { font-size: 1.3rem; }
}
.muncher-overlay[data-muncher-world] .muncher-crawler-grid {
    background:
        radial-gradient(90% 70% at 50% 110%, var(--mw-glow), transparent 70%),
        linear-gradient(180deg, var(--mw-sky-a) 0%, var(--mw-sky-b) 100%);
}
.muncher-overlay[data-muncher-world] .muncher-stage { background: var(--mw-sky-a); }

/* Muncher Worlds: power-ups, frozen troggles, word pops */
.muncher-powerup {
    font-size: clamp(1.3rem, 4.5vmin, 2rem);
    line-height: 1;
    animation: muncher-power-bob 1s ease-in-out infinite;
}
@keyframes muncher-power-bob {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.08); }
}
.muncher-cell.is-frozen .muncher-troggle-wrap { filter: saturate(0.35) brightness(1.2) drop-shadow(0 0 5px #67e8f9); }
.muncher-pop {
    position: absolute;
    left: 50%;
    top: 0.4rem;
    z-index: 7;
    transform: translateX(-50%);
    padding: 0.35rem 0.9rem;
    border-radius: 1.2rem;
    border: 3px solid var(--muncher-brown-edge);
    background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
    color: var(--muncher-brown-edge);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 3px 0 var(--muncher-brown-edge);
    animation: muncher-pop-up 1.3s ease-out forwards;
}
.muncher-pop.is-freeze { background: linear-gradient(180deg, #ecfeff 0%, #a5f3fc 100%); color: #155e75; border-color: #155e75; box-shadow: 0 3px 0 #155e75; }
.muncher-pop.is-heart { background: linear-gradient(180deg, #fff1f2 0%, #fecdd3 100%); color: #9f1239; border-color: #9f1239; box-shadow: 0 3px 0 #9f1239; }
.muncher-pop.is-mix { background: linear-gradient(180deg, #fdf2f8 0%, #fbcfe8 100%); color: #9d174d; border-color: #9d174d; box-shadow: 0 3px 0 #9d174d; }
@keyframes muncher-pop-up {
    0% { opacity: 0; transform: translate(-50%, 10px) scale(0.7); }
    15% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
    25% { transform: translate(-50%, 0) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -14px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .muncher-powerup, .muncher-pop { animation: none; }
}
.muncher-pop.is-tip {
    white-space: normal;
    width: max-content;
    max-width: min(22rem, 90%);
    text-align: center;
    font-size: 1rem;
    animation-duration: 3.2s;
}
.muncher-path-node.is-boss.is-locked .muncher-path-num { opacity: 0.6; filter: grayscale(0.6); }
.muncher-result-star-why { white-space: nowrap; }
.muncher-result-star { width: auto; min-width: 4.6rem; }
.muncher-result-star-icon { height: 3.3rem; display: flex; align-items: flex-end; }
@media (max-height: 460px) { .muncher-result-star-icon { height: 2.6rem; } }
@media (max-width: 480px) {
    .muncher-world-name { display: none; }
    .muncher-world-tab { min-height: 3.4rem; }
    .muncher-world-icon { font-size: 1.6rem; }
}

/* Muncher Worlds: each world replaces the wooden cabinet with its own scene
   (meadow, crystal cave, candy sky, reef, starfield) and re-tints the frame. */
.muncher-overlay[data-muncher-world] {
    --muncher-brown: var(--mw-frame-dark);
    --muncher-brown-edge: var(--mw-edge);
    --muncher-ink: var(--mw-ink);
    --muncher-gold-deep: var(--mw-frame);
    --muncher-wood: var(--mw-shell-b);
    background: var(--mw-scene);
}
.muncher-overlay[data-muncher-world] .muncher-shell {
    background: linear-gradient(180deg, var(--mw-shell-a) 0%, var(--mw-shell-b) 100%);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.muncher-overlay[data-muncher-world="garden"] {
    --mw-frame: #facc15; --mw-frame-dark: #3f6212; --mw-edge: #4d7c0f; --mw-ink: #365314;
    --mw-shell-a: rgba(77, 124, 15, 0.82); --mw-shell-b: rgba(20, 83, 45, 0.9);
    --mw-scene:
        radial-gradient(14% 22% at 88% 10%, #fef9c3 0%, #fde047 45%, rgba(253, 224, 71, 0) 70%),
        radial-gradient(60% 18% at 15% 100%, #4ade80 0%, rgba(74, 222, 128, 0) 70%),
        radial-gradient(70% 22% at 80% 104%, #22c55e 0%, rgba(34, 197, 94, 0) 70%),
        radial-gradient(3px 3px at 20% 82%, #fff 60%, transparent 70%) 0 0 / 46px 38px,
        radial-gradient(3px 3px at 60% 60%, #f472b6 60%, transparent 70%) 0 0 / 58px 44px,
        linear-gradient(180deg, #38bdf8 0%, #7dd3fc 45%, #86efac 72%, #16a34a 100%);
}
.muncher-overlay[data-muncher-world="cave"] {
    --mw-frame: #67e8f9; --mw-frame-dark: #1e1b4b; --mw-edge: #4338ca; --mw-ink: #312e81;
    --mw-shell-a: rgba(55, 48, 163, 0.82); --mw-shell-b: rgba(30, 27, 75, 0.92);
    --mw-scene:
        radial-gradient(30% 40% at 10% 90%, rgba(103, 232, 249, 0.45), transparent 70%),
        radial-gradient(30% 40% at 92% 20%, rgba(196, 181, 253, 0.45), transparent 70%),
        radial-gradient(2px 2px at 30% 40%, #a5f3fc 60%, transparent 70%) 0 0 / 34px 30px,
        radial-gradient(2px 2px at 70% 70%, #ddd6fe 60%, transparent 70%) 0 0 / 52px 46px,
        conic-gradient(from 200deg at 50% -20%, #1e1b4b, #312e81, #1e1b4b, #4c1d95, #1e1b4b);
}
.muncher-overlay[data-muncher-world="candy"] {
    --mw-frame: #fde047; --mw-frame-dark: #9d174d; --mw-edge: #be185d; --mw-ink: #831843;
    --mw-shell-a: rgba(236, 72, 153, 0.78); --mw-shell-b: rgba(157, 23, 77, 0.9);
    --mw-scene:
        radial-gradient(4px 4px at 25% 30%, #fde047 60%, transparent 70%) 0 0 / 40px 36px,
        radial-gradient(4px 4px at 70% 65%, #67e8f9 60%, transparent 70%) 0 0 / 52px 44px,
        radial-gradient(4px 4px at 45% 80%, #fff 60%, transparent 70%) 0 0 / 30px 50px,
        radial-gradient(50% 30% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 70%),
        linear-gradient(180deg, #f9a8d4 0%, #f0abfc 50%, #c4b5fd 100%);
}
.muncher-overlay[data-muncher-world="ocean"] {
    --mw-frame: #fdba74; --mw-frame-dark: #164e63; --mw-edge: #0e7490; --mw-ink: #164e63;
    --mw-shell-a: rgba(14, 116, 144, 0.8); --mw-shell-b: rgba(8, 51, 68, 0.92);
    --mw-scene:
        repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.10) 0 40px, transparent 40px 110px),
        radial-gradient(circle 5px at 30% 40%, rgba(255, 255, 255, 0.55) 55%, transparent 62%) 0 0 / 60px 70px,
        radial-gradient(circle 3px at 70% 70%, rgba(255, 255, 255, 0.5) 55%, transparent 62%) 0 0 / 44px 52px,
        radial-gradient(70% 16% at 50% 104%, #fde68a 0%, rgba(253, 230, 138, 0) 70%),
        linear-gradient(180deg, #67e8f9 0%, #0891b2 45%, #155e75 100%);
}
.muncher-overlay[data-muncher-world="space"] {
    --mw-frame: #c4b5fd; --mw-frame-dark: #1e1b4b; --mw-edge: #4c1d95; --mw-ink: #1e1b4b;
    --mw-shell-a: rgba(49, 46, 129, 0.78); --mw-shell-b: rgba(2, 6, 23, 0.92);
    --mw-scene:
        radial-gradient(1.5px 1.5px at 20% 30%, #fff 60%, transparent 70%) 0 0 / 37px 41px,
        radial-gradient(2px 2px at 65% 75%, #fde68a 60%, transparent 70%) 0 0 / 71px 59px,
        radial-gradient(1px 1px at 50% 50%, #e0e7ff 60%, transparent 70%) 0 0 / 23px 19px,
        radial-gradient(22% 30% at 90% 85%, #a78bfa 0%, #6d28d9 45%, rgba(109, 40, 217, 0) 72%),
        radial-gradient(40% 40% at 10% 10%, rgba(236, 72, 153, 0.35), transparent 70%),
        linear-gradient(180deg, #020617 0%, #1e1b4b 100%);
}

/* Muncher Worlds effects (lib/muncher-fx.js): munch bursts, rings, ambient layers, clear rain. */
.muncher-fx {
    position: absolute;
    z-index: 6;
    pointer-events: none;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
}
.muncher-fx.is-emoji,
.muncher-fx.is-dot {
    animation: muncher-fx-burst 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.muncher-fx.is-emoji { font-size: 1.75rem; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }
.muncher-fx.is-dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--fx-color, #fde047);
    box-shadow: 0 0 6px var(--fx-color, #fde047);
}
.muncher-fx.is-dot.is-candy { width: 0.36rem; height: 1.05rem; border-radius: 0.2rem; box-shadow: none; }
.muncher-fx.is-dot.is-ocean {
    width: 1.05rem;
    height: 1.05rem;
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid var(--fx-color, #fff);
    box-shadow: inset -2px -2px 0 rgba(255, 255, 255, 0.6);
}
.muncher-fx.is-dot.is-space,
.muncher-fx.is-dot.is-cave {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
@keyframes muncher-fx-burst {
    0% { transform: translate(-50%, -50%) scale(0.4) rotate(0deg); opacity: 1; }
    70% { opacity: 1; }
    100% {
        transform: translate(calc(-50% + var(--fx-dx, 0px)), calc(-50% + var(--fx-dy, 0px))) scale(1.05) rotate(var(--fx-rot, 0deg));
        opacity: 0;
    }
}
.muncher-fx.is-ring {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    border: 4px solid var(--fx-color, #fde047);
    animation: muncher-fx-ring 0.65s ease-out forwards;
}
@keyframes muncher-fx-ring {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(6); opacity: 0; }
}
.muncher-fx.is-rain {
    z-index: 8;
    font-size: 1.7rem;
    line-height: 1;
    opacity: 0;
    animation: muncher-fx-rain 2.2s ease-in var(--fx-delay, 0s) forwards;
}
@keyframes muncher-fx-rain {
    0% { top: -8%; opacity: 1; transform: translate(-50%, 0) rotate(0deg); }
    100% { top: 108%; opacity: 1; transform: translate(-50%, 0) rotate(var(--fx-rot, 40deg)); }
}

.muncher-ambient {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}
.muncher-ambient span {
    position: absolute;
    display: block;
    line-height: 1;
    font-size: 0.85rem;
    animation-delay: calc(-1 * var(--fx-delay, 0s));
    animation-duration: var(--fx-dur, 6s);
    animation-iteration-count: infinite;
}
.muncher-ambient.is-pollen span:empty {
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: var(--fx-color);
    opacity: 0.75;
}
.muncher-ambient.is-pollen span { animation-name: muncher-amb-drift; animation-timing-function: ease-in-out; opacity: 0.8; }
@keyframes muncher-amb-drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(14px, -10px) rotate(40deg); }
    50% { transform: translate(28px, 4px) rotate(85deg); }
    75% { transform: translate(10px, 12px) rotate(140deg); }
}
.muncher-ambient.is-twinkle span:empty {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--fx-color);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.muncher-ambient.is-twinkle span { animation-name: muncher-amb-twinkle; animation-timing-function: ease-in-out; }
@keyframes muncher-amb-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50% { opacity: 0.95; transform: scale(1.15) rotate(45deg); }
}
.muncher-ambient.is-sprinkle span {
    top: -6% !important;
    width: 0.22rem;
    height: 0.65rem;
    border-radius: 0.15rem;
    background: var(--fx-color);
    opacity: 0.85;
    animation-name: muncher-amb-fall;
    animation-timing-function: linear;
}
@keyframes muncher-amb-fall {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(100vh) rotate(540deg); }
}
.muncher-ambient.is-bubble span {
    top: auto !important;
    bottom: -6%;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.18);
    animation-name: muncher-amb-rise;
    animation-timing-function: ease-in;
}
.muncher-ambient.is-bubble span:nth-child(3n) { width: 0.45rem; height: 0.45rem; }
@keyframes muncher-amb-rise {
    0% { transform: translate(0, 0); opacity: 0.9; }
    50% { transform: translate(8px, -45vh); }
    100% { transform: translate(-6px, -90vh); opacity: 0.2; }
}
.muncher-ambient.is-meteor span {
    width: 4.5rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
    opacity: 0;
    animation-name: muncher-amb-meteor;
    animation-timing-function: ease-in;
}
@keyframes muncher-amb-meteor {
    0%, 80% { opacity: 0; transform: translate(0, 0) rotate(25deg); }
    84% { opacity: 1; }
    100% { opacity: 0; transform: translate(9rem, 4.2rem) rotate(25deg); }
}

/* Frozen troggles: frost creeps round the glass. */
.muncher-board-wrap.is-frozen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 28px 6px rgba(165, 243, 252, 0.85), inset 0 0 0 3px rgba(255, 255, 255, 0.7);
    animation: muncher-frost 1.2s ease-in-out infinite alternate;
}
@keyframes muncher-frost {
    from { opacity: 0.65; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .muncher-ambient, .muncher-fx { display: none; }
    .muncher-board-wrap.is-frozen::after { animation: none; }
}

/* Muncher Worlds: None / 1 / All troggles, beside the Play button on the map. */
.muncher-map-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
}
.muncher-map-actions .muncher-screen-btn { margin: 0; }
.muncher-troggle-pick {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    border: 2px solid rgba(255, 255, 255, 0.35);
}
.muncher-troggle-label {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--muncher-cream);
    padding: 0 0.35rem 0 0.45rem;
}
.muncher-troggle-opt {
    min-width: 2.6rem;
    min-height: 2.2rem;
    padding: 0.15rem 0.6rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muncher-cream);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
    cursor: pointer;
}
.muncher-troggle-opt[aria-pressed="true"] {
    background: linear-gradient(180deg, #fffbeb 0%, #fde68a 100%);
    color: var(--muncher-ink);
    box-shadow: 0 2px 0 var(--muncher-brown-edge);
}
.muncher-troggle-opt:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }

/* The hero stands on its tile: show that tile's number as a pill so it stays readable. */
.muncher-cell.has-player .muncher-cell-value {
    left: 50%;
    right: auto;
    bottom: -0.45em;
    transform: translateX(-50%);
    padding: 0.05em 0.45em;
    border-radius: 999px;
    background: #fffbeb;
    border: 2px solid var(--muncher-brown-edge);
    font-size: 0.95em;
    white-space: nowrap;
    line-height: 1.2;
}

/* ==================== MONSTER TRUCK GRAND PRIX (lib/truck-gp.js) ==================== */
/* A takeover over the truck cabinet: the 3D chase view, HUD over it, thumb steering on the
   left, the power-up and hop buttons on the right. Landscape 844 × 390 first. */
.gp-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: #0b1220;
    color: #f8fafc;
    font-family: var(--font-heading);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    overflow: hidden;
}

.gp-overlay * {
    touch-action: none;
}

.gp-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.gp-view {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% * var(--gp-slot) / var(--gp-of));
    width: calc(100% / var(--gp-of));
    pointer-events: none;
}

.gp-overlay.is-split .gp-view + .gp-view {
    border-left: 3px solid #0b1220;
}

.gp-view.hidden,
.gp-card.hidden,
.gp-banner.hidden {
    display: none;
}

.gp-overlay.is-intro .gp-view > :not(.gp-place):not(.gp-lap):not(.gp-map):not(.gp-roster) {
    visibility: hidden;
}

.gp-place {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 0.4rem);
    left: calc(env(safe-area-inset-left, 0px) + 0.7rem);
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 2px 0 #0f172a, 0 0 8px rgba(15, 23, 42, 0.6);
}

.gp-place-num {
    font-size: 2.6rem;
    color: #fde047;
}

.gp-place-of {
    font-size: 1.1rem;
    margin-left: 0.15rem;
}

.gp-lap {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 3.3rem);
    left: calc(env(safe-area-inset-left, 0px) + 0.75rem);
    font-size: 1rem;
    font-weight: 600;
    text-shadow: 0 2px 0 #0f172a;
}

.gp-map {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 5rem);
    left: calc(env(safe-area-inset-left, 0px) + 0.5rem);
    width: 6.4rem;
    height: 4.4rem;
    opacity: 0.92;
}

/* Who else is a kid (Key 2026-10-10): the roster under the minimap, one pill a PERSON in that kid's own colour, in
   place order. It stays in the left gutter under the map so it never covers the road, and a race holds four kids at
   most, so it is four rows at most. */
.gp-roster {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 9.7rem);
    left: calc(env(safe-area-inset-left, 0px) + 0.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.15rem;
    max-width: 8.5rem;
    font-size: 0.72rem;
}

.gp-roster li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.25rem;
    align-items: center;
    padding: 0.1rem 0.4rem 0.1rem 0.15rem;
    border: 2px solid #1e293b;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #f8fafc;
    line-height: 1.15;
}

.gp-roster li.is-you {
    background: var(--c);
    color: #1e293b;
    font-weight: 800;
}

.gp-ro-dot {
    width: 1.05rem;
    height: 1.05rem;
    display: grid;
    place-items: center;
    border: 2px solid #1e293b;
    border-radius: 999px;
    background: var(--c);
    color: #1e293b;
    font-size: 0.62rem;
    font-weight: 800;
}

.gp-ro-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gp-ro-place {
    font-style: normal;
    font-weight: 700;
}

.gp-banner {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 0.45rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    box-shadow: 0 4px 0 rgba(15, 23, 42, 0.45);
    white-space: nowrap;
    max-width: 60%;
}

.gp-question {
    font-size: 1.55rem;
    font-weight: 700;
    font-style: italic;
}

.gp-banner.is-right {
    background: #bbf7d0;
}

.gp-banner.is-wrong {
    background: #fecaca;
}

.gp-streak {
    display: inline-flex;
    gap: 0.2rem;
}

.gp-streak i {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #cbd5e1;
}

.gp-streak[data-n="1"] i:nth-child(-n+1),
.gp-streak[data-n="2"] i:nth-child(-n+2) {
    background: #f97316;
}

.gp-msg {
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    font-size: 1.8rem;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    text-shadow: 0 3px 0 #0f172a, 0 0 14px rgba(15, 23, 42, 0.7);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.2s ease;
    white-space: nowrap;
}

.gp-msg.is-on {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.gp-msg.is-good {
    color: #fde047;
}

.gp-msg.is-warn {
    color: #fca5a5;
}

.gp-steer {
    position: absolute;
    left: 22%;
    top: 74%;
    width: 0;
    height: 0;
}

.gp-steer-ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 8.2rem;
    height: 3.6rem;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.55);
    background: rgba(15, 23, 42, 0.25);
}

.gp-steer-knob {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.8rem;
    height: 2.8rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 0 rgba(15, 23, 42, 0.4);
}

.gp-steer-hint {
    position: absolute;
    left: 0;
    top: 2.4rem;
    transform: translateX(-50%);
    font-size: 0.9rem;
    white-space: nowrap;
    text-shadow: 0 2px 0 #0f172a;
}

.gp-steer:not(.is-active) .gp-steer-ring,
.gp-steer:not(.is-active) .gp-steer-knob {
    opacity: 0.45;
}

.gp-steer.is-hinted:not(.is-active) {
    display: none;
}

.gp-steer.is-hinted .gp-steer-hint {
    display: none;
}

.gp-item,
.gp-hop {
    position: absolute;
    pointer-events: auto;
    border: 0;
    color: #0f172a;
    font-family: inherit;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
}

.gp-item {
    right: calc(env(safe-area-inset-right, 0px) + 0.9rem);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.9rem);
    width: 6.2rem;
    height: 6.2rem;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fef3c7, #f59e0b 70%);
    box-shadow: 0 5px 0 #92400e, 0 0 0 4px rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.4rem;
}

.gp-item[data-state="empty"] {
    background: rgba(241, 245, 249, 0.75);
    box-shadow: 0 4px 0 rgba(15, 23, 42, 0.45);
}

.gp-item[data-state="spin"] .gp-item-icon {
    animation: gp-spin 0.12s steps(2) infinite;
}

.gp-item[data-state="ready"] {
    animation: gp-pulse 0.9s ease-in-out infinite;
}

.gp-item-icon {
    font-size: 2.2rem;
    line-height: 1;
}

.gp-item-name {
    font-size: 0.68rem;
    line-height: 1.05;
    text-align: center;
}

.gp-item-count {
    position: absolute;
    top: 0.2rem;
    right: 0.35rem;
    font-size: 1rem;
}

.gp-hop {
    right: calc(env(safe-area-inset-right, 0px) + 7.8rem);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 4px 0 rgba(15, 23, 42, 0.45);
    font-size: 1.05rem;
    font-style: italic;
}

.gp-item:active,
.gp-hop:active {
    transform: translateY(3px);
}

.gp-count {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6rem;
    font-weight: 700;
    font-style: italic;
    color: #fde047;
    text-shadow: 0 5px 0 #0f172a, 0 0 22px rgba(15, 23, 42, 0.7);
    pointer-events: none;
    opacity: 0;
}

.gp-count.is-on {
    opacity: 1;
}

.gp-count.is-go {
    color: #4ade80;
}

.gp-close {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 0.4rem);
    right: calc(env(safe-area-inset-right, 0px) + 0.5rem);
    z-index: 3;
}

.gp-card {
    position: absolute;
    /* Below the ✕ in the top-right corner. */
    top: calc(env(safe-area-inset-top, 0px) + 3.2rem);
    right: calc(env(safe-area-inset-right, 0px) + 1rem);
    width: min(25rem, calc(100% - 2rem));
    max-height: calc(100% - env(safe-area-inset-top, 0px) - 3.8rem);
    overflow: auto;
    padding: 1rem 1.2rem;
    border-radius: 1.2rem;
    background: rgba(11, 18, 32, 0.92);
    border: 2px solid rgba(251, 191, 36, 0.55);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    z-index: 2;
    pointer-events: auto;
}

.gp-kicker {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fbbf24;
}

.gp-title {
    margin: 0.15rem 0 0.5rem;
    font-size: 1.4rem;
    font-style: italic;
}

.gp-how {
    margin: 0 0 0.6rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.35rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 0.88rem;
    line-height: 1.3;
}

.gp-who {
    margin-bottom: 0.55rem;
}

.gp-who.hidden,
.gp-who-tip.hidden {
    display: none;
}

.gp-who-label,
.gp-who-tip {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    color: #cbd5e1;
}

.gp-who-tip {
    margin: 0.3rem 0 0;
    color: #fde68a;
}

.gp-who-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.gp-who-chip {
    min-height: 2.4rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    border: 2px solid rgba(148, 163, 184, 0.6);
    background: rgba(15, 23, 42, 0.6);
    color: #f8fafc;
    font-family: inherit;
    font-size: 0.9rem;
}

.gp-who-chip[aria-pressed="true"] {
    border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.25);
}

.gp-assist-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}

.gp-assist {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 0.9rem;
    border-radius: 999px;
    border: 2px solid rgba(148, 163, 184, 0.6);
    background: rgba(15, 23, 42, 0.6);
    color: #f8fafc;
    font-family: inherit;
    font-size: 0.9rem;
}

.gp-assist[aria-pressed="true"] strong {
    color: #4ade80;
}

.gp-assist-tip {
    margin: -0.35rem 0 0.7rem;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 0.8rem;
    line-height: 1.3;
    color: #cbd5e1;
}

.gp-assist-tip.hidden {
    display: none;
}

/* Easy / Normal / Hard computer trucks (a harder race, the truckHard flag): the who-chips' look. */
.gp-level {
    margin-bottom: 0.55rem;
}

.gp-level.hidden {
    display: none;
}

.gp-level-label {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    color: #cbd5e1;
}

.gp-level-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.gp-level-chip:disabled {
    opacity: 0.55;
}

.gp-level-chip[aria-pressed="true"]:disabled {
    opacity: 1;
}

.gp-level-who {
    font-size: 0.8rem;
    color: #fde68a;
}

/* Splat! A wrong arch in a harder race throws mud at the screen's edges while the truck is stuck. */
.gp-mud i {
    position: absolute;
    width: 7.5rem;
    height: 6rem;
    border-radius: 48% 52% 44% 56% / 55% 45% 58% 42%;
    background: radial-gradient(circle at 38% 35%, #8a5a2b 0 18%, #6b4219 40%, #4a2c0f 72%, rgba(74, 44, 15, 0) 74%);
    box-shadow: 1.6rem 1.2rem 0 -1.6rem #5b3714, -1.4rem 1.8rem 0 -1.9rem #5b3714;
    opacity: 0;
    transform: scale(0.3) rotate(var(--r, 0deg));
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.gp-mud i:nth-child(1) { left: -1.6rem; top: 44%; --r: -12deg; }
.gp-mud i:nth-child(2) { right: 18%; top: -1.8rem; width: 6rem; height: 5rem; --r: 30deg; }
.gp-mud i:nth-child(3) { left: 30%; bottom: -2rem; width: 5.5rem; height: 4.6rem; --r: 70deg; }
.gp-mud i:nth-child(4) { right: -1.8rem; top: 46%; width: 6.5rem; height: 5.4rem; --r: 150deg; }
.gp-mud i:nth-child(5) { left: 12%; top: -1.4rem; width: 4.4rem; height: 3.8rem; --r: 200deg; }

.gp-view.is-muddy .gp-mud i {
    opacity: 0.92;
    transform: scale(1) rotate(var(--r, 0deg));
    transition: opacity 0.08s ease, transform 0.12s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.gp-lobby-level {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: #cbd5e1;
}

@media (prefers-reduced-motion: reduce) {
    .gp-mud i,
    .gp-view.is-muddy .gp-mud i {
        transition: opacity 0.2s ease;
    }
}

/* The card scrolls by touch (the race screen blocks panning elsewhere) and
   Start engines! stays pinned at its bottom, so it is never cut off. */
.gp-overlay .gp-card,
.gp-overlay .gp-card * {
    touch-action: pan-y;
}

.gp-intro .gp-go {
    position: sticky;
    bottom: 0;
    box-shadow: 0 -0.6rem 0.8rem rgba(11, 18, 32, 0.92);
}

.gp-go,
.gp-again {
    width: 100%;
    font-style: italic;
    font-size: 1.2rem;
}

.gp-reward {
    margin: 0 0 0.5rem;
    color: #fde047;
    font-weight: 600;
}

.gp-standings {
    margin: 0 0 0.6rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.2rem;
    font-size: 0.95rem;
}

.gp-standings li {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.5rem;
    background: rgba(30, 41, 59, 0.7);
}

.gp-standings li.is-kid {
    background: rgba(249, 115, 22, 0.35);
    font-weight: 700;
}

/* With the markers on, every row leads with a chip: a person's initial in her colour, or 🤖. */
.gp-standings.has-marks li {
    grid-template-columns: 1.5rem 2.6rem minmax(0, 1fr) auto;
}

.gp-standings li.is-human {
    border-left: 5px solid var(--c);
}

/* The bright highlight stays unique to the kid this device pays; the other people read as plain dark rows. */
.gp-standings li.is-human:not(.is-you) {
    background: rgba(30, 41, 59, 0.85);
}

.gp-st-dot {
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    border: 2px solid #1e293b;
    border-radius: 999px;
    background: var(--c);
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
}

.gp-st-dot.is-cpu {
    background: #475569;
    color: #cbd5e1;
    font-size: 0.8rem;
}

.gp-st-you {
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #f8fafc;
    color: #1e293b;
    font-size: 0.72rem;
    font-weight: 800;
}

.gp-st-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gp-results-btns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.gp-results-btns .truck-change-btn {
    margin: 0;
}

.gp-results .gp-title {
    margin-top: 0;
}

@keyframes gp-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes gp-spin {
    0% { transform: translateY(-2px); }
    100% { transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .gp-item[data-state="ready"],
    .gp-item[data-state="spin"] .gp-item-icon {
        animation: none;
    }
}

/* Shorter screens (iPad split screen, the help card with two helpers). */
@media (max-height: 860px) {
    .gp-card { padding: 0.75rem 1rem; }
    .gp-how { font-size: 0.82rem; gap: 0.25rem; margin-bottom: 0.45rem; }
    .gp-title { margin-bottom: 0.35rem; }
    .gp-who { margin-bottom: 0.4rem; }
    .gp-assist-row { margin-bottom: 0.55rem; }
    .gp-assist { min-height: 2.3rem; }
}

/* Short landscape phones: smaller HUD so the road shows. */
@media (orientation: landscape) and (max-height: 420px) {
    .gp-place-num { font-size: 2.1rem; }
    .gp-lap { top: calc(env(safe-area-inset-top, 0px) + 2.7rem); font-size: 0.9rem; }
    .gp-map { top: calc(env(safe-area-inset-top, 0px) + 4.2rem); width: 5.6rem; height: 3.85rem; }
    .gp-roster { top: calc(env(safe-area-inset-top, 0px) + 8.3rem); max-width: 7.6rem; font-size: 0.66rem; }
    .gp-ro-dot { width: 0.95rem; height: 0.95rem; font-size: 0.56rem; }
    .gp-st-dot { width: 1.3rem; height: 1.3rem; font-size: 0.75rem; }
    .gp-standings.has-marks li { grid-template-columns: 1.3rem 2.4rem minmax(0, 1fr) auto; }
    .gp-question { font-size: 1.3rem; }
    .gp-item { width: 5.4rem; height: 5.4rem; }
    .gp-item-icon { font-size: 1.9rem; }
    .gp-hop { right: calc(env(safe-area-inset-right, 0px) + 6.9rem); width: 3.8rem; height: 3.8rem; }
    .gp-card { padding: 0.6rem 0.9rem; }
    .gp-standings { gap: 0.15rem; font-size: 0.85rem; margin-bottom: 0.45rem; }
    .gp-standings li { padding: 0.08rem 0.5rem; }
    .gp-reward { margin-bottom: 0.35rem; font-size: 0.9rem; }
    .gp-how { font-size: 0.8rem; gap: 0.25rem; }
    .gp-title { font-size: 1.2rem; margin-bottom: 0.35rem; }
}

/* Split screen: each kid's buttons in their own half, a little smaller. */
.gp-overlay.is-split .gp-item { width: 4.8rem; height: 4.8rem; }
.gp-overlay.is-split .gp-item-name { display: none; }
.gp-overlay.is-split .gp-hop { right: calc(env(safe-area-inset-right, 0px) + 6.2rem); width: 3.4rem; height: 3.4rem; }
.gp-overlay.is-split .gp-question { font-size: 1.15rem; }
.gp-overlay.is-split .gp-banner { max-width: 70%; padding: 0.25rem 0.8rem; }
.gp-overlay.is-split .gp-msg { font-size: 1.3rem; }

/* Split screen held upright (a phone): the two kids' views stack top and bottom, each the full width, so each
   sees all three gate numbers and their place beside the question (#2375). */
.gp-overlay.is-stacked .gp-view {
    left: 0;
    width: 100%;
    top: calc(100% * var(--gp-slot) / var(--gp-of));
    bottom: auto;
    height: calc(100% / var(--gp-of));
}
.gp-overlay.is-stacked .gp-view + .gp-view { border-left: 0; border-top: 3px solid #0b1220; }
/* The notch is above the top view and the home bar below the bottom one, not at the seam. */
.gp-overlay.is-stacked .gp-view[data-view="1"] .gp-place,
.gp-overlay.is-stacked .gp-view[data-view="1"] .gp-banner { top: 0.4rem; }
.gp-overlay.is-stacked .gp-view[data-view="1"] .gp-lap { top: 2.9rem; }
.gp-overlay.is-stacked .gp-view[data-view="1"] .gp-map { top: 4.4rem; }
.gp-overlay.is-stacked .gp-view[data-view="0"] .gp-item { bottom: 0.9rem; }
.gp-overlay.is-stacked .gp-view[data-view="0"] .gp-hop { bottom: 1rem; }
.gp-overlay.is-stacked .gp-place-num { font-size: 2.1rem; }
.gp-overlay.is-stacked .gp-lap { top: calc(env(safe-area-inset-top, 0px) + 2.9rem); font-size: 0.9rem; }
.gp-overlay.is-stacked .gp-map { top: calc(env(safe-area-inset-top, 0px) + 4.4rem); width: 5.2rem; height: 3.6rem; }
.gp-overlay.is-stacked .gp-roster { top: calc(env(safe-area-inset-top, 0px) + 8.25rem); max-width: 7.6rem; font-size: 0.66rem; }
.gp-overlay.is-stacked .gp-view[data-view="1"] .gp-roster { top: 8.25rem; }
.gp-overlay.is-stacked .gp-banner { max-width: calc(100% - 11rem); }

/* --- Grand Prix: Race family (siblings on their own devices over Wi-Fi) --- */

.gp-net-note {
    margin: 0 0 0.7rem;
    font-size: 0.9rem;
    color: #cbd5e1;
}

.gp-net-note.hidden,
.gp-go.hidden,
.gp-again.hidden {
    display: none;
}

.gp-lobby {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) calc(env(safe-area-inset-right, 0px) + 1rem) calc(env(safe-area-inset-bottom, 0px) + 1rem) calc(env(safe-area-inset-left, 0px) + 1rem);
    background: rgba(2, 6, 23, 0.6);
    color: #f8fafc;
    font-family: var(--font-heading);
}

.gp-lobby .gp-lobby-card {
    position: relative;
    top: auto;
    right: auto;
    width: min(26rem, 100%);
    max-height: 100%;
}

.gp-lobby-tip {
    margin: 0 0 0.7rem;
    font-size: 0.95rem;
    color: #cbd5e1;
}

.gp-lobby-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0.7rem;
    padding: 0.4rem 0.8rem 0.5rem;
    border-radius: 0.9rem;
    background: rgba(15, 23, 42, 0.7);
    border: 2px dashed #fbbf24;
}

.gp-lobby-code span {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.gp-lobby-code b {
    font-size: 2.6rem;
    line-height: 1.1;
    letter-spacing: 0.12em;
    color: #fbbf24;
}

.gp-lobby-news {
    margin: 0 0 0.7rem;
    padding: 0.5rem 0.8rem;
    border-radius: 0.7rem;
    background: rgba(34, 197, 94, 0.18);
    border: 2px solid rgba(34, 197, 94, 0.7);
    font-size: 1.05rem;
    color: #f8fafc;
}

.gp-lobby-news.hidden {
    display: none;
}

.gp-lobby-kids {
    margin: 0 0 0.8rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.35rem;
}

.gp-lobby-kids li {
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
    padding: 0.4rem 0.7rem;
    border-radius: 0.7rem;
    background: rgba(15, 23, 42, 0.7);
    border: 2px solid rgba(148, 163, 184, 0.35);
}

.gp-lobby-kids li span {
    color: #94a3b8;
    font-size: 0.85rem;
}

.gp-lobby-kids li b {
    margin-left: auto;
    font-size: 0.85rem;
    color: #94a3b8;
}

.gp-lobby-kids li.is-ready {
    border-color: rgba(34, 197, 94, 0.7);
}

.gp-lobby-kids li.is-ready b {
    color: #4ade80;
}

.gp-lobby-btns {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.gp-lobby-btns .arcade-btn {
    flex: 1 1 auto;
}

.gp-lobby-btns .arcade-btn:disabled {
    opacity: 0.5;
}

.gp-lobby-btns .truck-change-btn {
    margin: 0;
}

.gp-invite {
    position: fixed;
    z-index: 1400;
    left: 50%;
    top: calc(env(safe-area-inset-top, 0px) + 0.6rem);
    transform: translateX(-50%);
    display: flex;
    gap: 0.6rem;
    align-items: center;
    max-width: calc(100% - 2rem);
    padding: 0.45rem 0.5rem 0.45rem 1rem;
    border-radius: 999px;
    background: rgba(11, 18, 32, 0.94);
    border: 2px solid #fbbf24;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: #f8fafc;
    font-family: var(--font-heading);
    animation: gp-invite-in 0.35s ease-out;
}

.gp-invite-text {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gp-invite .gp-invite-join {
    min-height: 2.6rem;
    padding: 0 1.2rem;
    font-size: 1.05rem;
}

.gp-invite-no {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, 0.6);
    background: transparent;
    color: #f8fafc;
    font-size: 1rem;
}

@keyframes gp-invite-in {
    from { transform: translate(-50%, -140%); }
    to { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .gp-invite {
        animation: none;
    }
}

/* ==================== Monster Truck garage carousel (Family DEV, truckCarousel; lib/truck-cabinet.js) ====================
   The garage above, with swipes: the 3D stage takes sideways drags, the track step's map box holds the track's 3D
   arena (the stage canvas moves into it), the track tiles show 3D pictures, and 2 / 3 / 4 laps sit under the chips. */
.truck-overlay.is-carousel.is-webgl-stage.is-garage .truck-stage {
    /* Sideways drags stay pointer events (no browser pan takes them). */
    touch-action: none;
}

.truck-overlay.is-carousel.is-track-3d.is-webgl-stage.is-garage.is-step-track .truck-track-hero > .truck-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: auto;
}

.truck-overlay.is-track-3d .truck-track-map {
    display: none;
}

/* No little truck window by the ✕ any more: the name and Back get the row. */
.truck-overlay.is-track-3d .truck-select-top {
    padding-right: 3.6rem;
}

/* One row of tiles, always; it scrolls only when it is wider than the screen (cabinet centreTile), since a scrolling
   box would clip the picked tile's glow. */
.truck-overlay.is-carousel .truck-tile-grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(2.5rem, 1fr);
}

.truck-overlay.is-carousel .truck-tile-grid.is-scroll {
    /* One tile width (cabinet fitStrip) that leaves half a tile at the edge; fade-l / fade-r fade the sides that
       have more tiles past them, into whatever is behind the strip. */
    --fade-l: 0.4rem;
    --fade-r: 0.4rem;
    grid-auto-columns: var(--strip-tile, 3.5rem);
    /* Room inside the scroller for the picked tile's P1 badge and glow (a scroller clips both ways), taken back out
       of the layout by the margins. */
    padding: 0.75rem 0.8rem 0.7rem;
    margin: -0.4rem -0.3rem -0.35rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Sideways: the fades. Up and down (and the sides with no fade): a short soft edge, so the clipped glow fades
       out rather than ending in a box. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%),
        linear-gradient(180deg, transparent 0, #000 0.2rem, #000 calc(100% - 0.4rem), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%),
        linear-gradient(180deg, transparent 0, #000 0.2rem, #000 calc(100% - 0.4rem), transparent 100%);
    mask-composite: intersect;
}

.truck-overlay.is-carousel .truck-tile-grid.is-scroll.fade-l {
    --fade-l: 2rem;
}

.truck-overlay.is-carousel .truck-tile-grid.is-scroll.fade-r {
    --fade-r: 2rem;
}

.truck-overlay.is-carousel .truck-tile-grid.is-scroll::-webkit-scrollbar {
    display: none;
}

.truck-tile-shot {
    display: block;
    object-fit: cover;
    border-radius: 0.45rem;
}

.truck-laps-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

.truck-laps-label {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.95rem;
    font-weight: 800;
    white-space: nowrap;
}

.truck-laps-kicker {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fdba74;
}

.truck-lap {
    min-width: 3.4rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    border: 2px solid rgba(148, 163, 184, 0.45);
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.14s ease;
}

.truck-lap:active {
    transform: scale(0.95);
}

.truck-lap.is-on {
    border-color: #fb923c;
    background: #fb923c;
    color: #1e293b;
}

.truck-lap-num {
    font-size: 1.15rem;
    font-weight: 900;
}

.truck-lap-note {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

/* The Grand Prix card's lap row: the computer trucks' row, one more line. */
.gp-laps {
    margin-bottom: 0.55rem;
}

.gp-lap-chip small {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.8;
}

@media (orientation: landscape) and (max-height: 600px) {
    .truck-overlay.is-carousel .truck-laps-row {
        grid-area: laps;
        justify-content: flex-start;
    }

    .truck-overlay.is-carousel .truck-select-tracks {
        grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
        grid-template-areas:
            "top banner ."
            "map map chips"
            "map map laps"
            "map map blurb"
            "map map tiles"
            "map map race";
    }

    .truck-overlay.is-track-3d .truck-select-tracks .truck-select-top {
        padding-right: 0;
    }
}