/* ==========================================================================
   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 {
    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);
}

/* 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;
}

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;
    -webkit-touch-callout: none;
}

/* 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);
}

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

.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;
}

.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;
}

.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.35rem 0.85rem 0.35rem 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
}

.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: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s;
}

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

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

.nav-bar {
    background: #f8fafc;
    border-top: 1px solid var(--border-light);
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
}

.nav-tab {
    background: none;
    border: none;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

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

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

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

.main-content {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    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;
    }
}

.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 */
.arcade-hero {
    padding: 1.15rem 1.25rem 1.05rem;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(245, 158, 11, 0.28), transparent 55%),
        linear-gradient(160deg, #1c1008 0%, #3d2410 55%, #78350f 130%);
    color: #fffbeb;
    border: 3px solid #f59e0b;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 0 #92400e;
    margin-bottom: 1rem;
}

.arcade-kicker {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fbbf24;
}

.arcade-title {
    margin: 0.2rem 0 0.25rem;
    font-family: var(--font-heading);
    font-size: 1.65rem;
    color: #fffbeb;
}

.arcade-lede {
    margin: 0;
    font-weight: 600;
    color: #fde68a;
}

.arcade-game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 0.85rem;
}

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

.arcade-game-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.9rem 0.85rem 1rem;
    border-radius: 1rem;
    border: 3px solid #78350f;
    background: #1c1008;
    color: #fffbeb;
    text-align: left;
    cursor: pointer;
    min-height: 13.5rem;
    appearance: none;
    font: inherit;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.arcade-game-card:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(245, 158, 11, 0.32);
}

.arcade-game-card.is-muncher,
.arcade-game-card.is-live {
    border-color: #f59e0b;
    background:
        linear-gradient(180deg, rgba(251, 191, 36, 0.18), transparent 48%),
        #2a1c10;
    box-shadow: 0 4px 0 #92400e;
}

.arcade-game-card.is-soon {
    opacity: 0.72;
    cursor: default;
    border-style: dashed;
    border-color: #78350f;
    background: #24150c;
}

.arcade-game-card.is-soon:hover {
    transform: none;
    box-shadow: none;
}

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

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

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

.arcade-game-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.12rem;
    color: #fffbeb;
}

.arcade-game-tag {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: #fde68a;
    line-height: 1.35;
    flex: 1;
}

.arcade-game-cta {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fbbf24;
}

.arcade-game-card.is-soon .arcade-game-cta {
    color: #94a3b8;
}

.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: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: 0.55rem;
    align-items: start;
    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: nowrap;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.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.4rem 0.65rem 0.45rem;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: all 0.18s ease;
    flex: 0 0 auto;
    white-space: nowrap;
}

.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: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Room for hover/active ring + shadow (overflow-x clips vertical paint in Chrome) */
    padding: 0.35rem 0 0.3rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border-medium) transparent;
}

.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;
}

/* Fixed-width skill chips — scoped so single-skill categories match Calculate */
.topic-skill-chip-list .op-chip {
    flex: 0 0 8.35rem;
    width: 8.35rem;
    min-width: 8.35rem;
    max-width: 8.35rem;
    scroll-snap-align: start;
}

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

.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:hover,
.topic-skill-chip-list .op-chip.active {
    transform: none;
}

.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);
}

/* ==========================================================================
   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.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

/* History Question Navigation */
.arena-counter-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.arena-nav-btn {
    background: var(--bg-card-secondary);
    border: 1.5px solid var(--border-medium);
    border-radius: var(--radius-full);
    padding: 0.22rem 0.55rem;
    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;
}

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

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

.arena-counter {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

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

.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); }
}

.arena-progress-track {
    flex: 1;
    min-width: 80px;
    max-width: 160px;
    height: 9px;
    background: var(--bg-card-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.arena-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-primary-dark));
    transition: width 0.3s ease;
}

.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;
    filter: drop-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);
}

/* ==========================================================================
   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;
}

/* 1. Ten-Frames Visualizer Model */
.ten-frames-wrapper {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.ten-frame-box {
    background: #ffffff;
    border: 3px solid #64748b;
    border-radius: var(--radius-sm);
    display: grid;
    grid-template-columns: repeat(5, 36px);
    grid-template-rows: repeat(2, 36px);
    gap: 3px;
    padding: 4px;
    box-shadow: var(--shadow-sm);
}

.ten-frame-cell {
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frame-token {
    width: 26px;
    height: 26px;
    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;
}

.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);
}

.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 */
.buckets-model-wrapper {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

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

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

.bucket-items-grid {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    max-width: 90px;
    justify-content: center;
}

.bucket-item-token {
    width: 20px;
    height: 20px;
    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);
}

.token-blue-text {
    color: #2563eb;
    font-weight: 800;
}

.token-orange-text {
    color: #ea580c;
    font-weight: 800;
}

.bucket-item-emoji {
    font-size: 1.25rem;
    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: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    position: relative;
}

.equation-left-spacer {
    /* Balance column to ensure the center slot is mathematically dead-center */
    width: 100%;
}

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

.equation-right-slot {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 1.25rem;
}

.equation-help-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: #fffbeb;
    border: 2.5px solid #f59e0b;
    border-radius: var(--radius-md);
    padding: 0.6rem 0.95rem;
    color: #b45309;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.22);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
    flex-shrink: 0;
}

.equation-help-btn:hover {
    background: #fef3c7;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 6px 14px rgba(245, 158, 11, 0.32);
    border-color: #d97706;
}

.equation-help-btn:active {
    transform: translateY(1px) scale(0.97);
}

.equation-help-btn.active {
    background: #f59e0b;
    color: #ffffff;
    border-color: #d97706;
    box-shadow: 0 3px 12px rgba(217, 119, 6, 0.4);
}

.equation-help-btn.active .help-btn-icon {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
    animation: gentleWiggle 0.6s ease;
}

.help-btn-icon {
    font-size: 1.45rem;
    line-height: 1;
}

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

@media (max-width: 640px) {
    .equation-right-slot {
        padding-left: 0.65rem;
    }
    .equation-help-btn {
        padding: 0.45rem 0.75rem;
    }
    .help-btn-icon {
        font-size: 1.25rem;
    }
    .help-btn-label {
        font-size: 0.72rem;
    }
}

@media (max-width: 440px) {
    .equation-row-wrapper {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .equation-left-spacer {
        display: none;
    }

    .equation-center-slot {
        justify-content: center;
    }

    .equation-right-slot {
        padding-left: 0;
        justify-content: center;
    }

    .equation-help-btn {
        padding: 0.35rem 0.55rem;
    }

    .help-btn-icon {
        font-size: 1.1rem;
    }

    .help-btn-label {
        font-size: 0.65rem;
    }

    .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; }

.base10-hundred-flat {
    width: 48px;
    height: 48px;
    background: repeating-linear-gradient(0deg, #fde047, #fde047 4px, #eab308 4px, #eab308 5px),
                repeating-linear-gradient(90deg, #fde047, #fde047 4px, #eab308 4px, #eab308 5px);
    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-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 */
.area-model-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    max-width: 500px;
}

.area-model-container {
    display: flex;
    align-items: center;
    border: 2.5px solid #8b5cf6;
    border-radius: var(--radius-md);
    background: #ffffff;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.area-sub-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1rem;
    border-right: 2px dashed #c4b5fd;
    position: relative;
    min-height: 80px;
}
.area-sub-block:last-child {
    border-right: none;
}

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

.area-sub-dim {
    font-size: 0.76rem;
    font-weight: 800;
    opacity: 0.85;
}
.area-sub-val {
    font-size: 1.15rem;
    font-weight: 900;
    margin: 2px 0;
}
.area-sub-expr {
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.75;
}

.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;
}

.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;
}

/* 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-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;
}
.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;
}
.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.35rem;
    justify-content: center;
    max-width: 11rem;
}
.money-coin {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 900;
    border: 2px solid rgba(0,0,0,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}
.money-coin.coin-penny { background: #fdba74; color: #9a3412; }
.money-coin.coin-nickel { background: #cbd5e1; color: #334155; }
.money-coin.coin-dime { background: #e2e8f0; color: #475569; }
.money-coin.coin-quarter { background: #fde68a; color: #854d0e; }
.money-coin-more {
    font-size: 0.8rem;
    font-weight: 800;
    color: #a16207;
    align-self: center;
}
.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-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    max-width: 16rem;
}
.count-object-token {
    font-size: 1.45rem;
    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-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;
}
.count-skip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
}
.count-skip-chip {
    min-width: 2.4rem;
    padding: 0.4rem 0.55rem;
    border-radius: 0.65rem;
    background: #dcfce7;
    color: #166534;
    font-weight: 900;
    text-align: center;
}
.count-skip-chip.is-blank {
    background: #fef3c7;
    color: #92400e;
}
.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; }
.fraction-group-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    max-width: 16rem;
}
.fraction-group-item {
    font-size: 1.35rem;
    opacity: 0.35;
    filter: grayscale(0.4);
}
.fraction-group-item.is-shaded {
    opacity: 1;
    filter: none;
}

.pattern-emoji-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
}
.pattern-emoji-token {
    font-size: 1.6rem;
    line-height: 1;
    min-width: 2rem;
    text-align: center;
}
.pattern-emoji-token.is-blank {
    font-weight: 800;
    color: var(--theme-primary-dark);
    background: var(--theme-primary-light);
    border-radius: 0.45rem;
    padding: 0.15rem 0.35rem;
}

.shape-identify-wrap {
    display: flex;
    justify-content: center;
    padding: 0.35rem 0;
}
.shape-glyph {
    width: 5.5rem;
    height: 5.5rem;
    background: var(--theme-primary);
}
.shape-circle { border-radius: 50%; }
.shape-square { border-radius: 0.35rem; }
.shape-rectangle {
    width: 7rem;
    height: 4.2rem;
    border-radius: 0.35rem;
}
.shape-triangle {
    width: 0;
    height: 0;
    background: transparent;
    border-left: 2.75rem solid transparent;
    border-right: 2.75rem solid transparent;
    border-bottom: 5rem solid var(--theme-primary);
}
.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;
    padding: 0.2rem 0 0.45rem;
}

.solid-svg {
    width: 6.4rem;
    height: 6.4rem;
    display: block;
}

.solid-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.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;
    min-width: 6.5rem;
}

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

.angle-draw-svg,
.line-figure-svg,
.protractor-svg {
    width: min(100%, 8.5rem);
    height: auto;
    display: block;
}

.line-figure-svg .line-figure-label,
.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;
}

.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;
}

.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;
}

.decimal-tenths-bar {
    display: flex;
    width: min(100%, 18rem);
    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);
    width: min(100%, 12.5rem);
    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);
}

.volume-visual-mount,
.coords-visual-mount,
.express-visual-mount,
.convert-visual-mount,
.integers-visual-mount,
.ratios-visual-mount,
.percent-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.28rem;
    align-items: center;
}

.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 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.22rem;
    justify-content: flex-start;
}

.ratio-tape-cell {
    width: 1.55rem;
    height: 1.55rem;
    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;
}

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

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

.ratio-unit-groups {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}

.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;
}

.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.35rem;
    justify-content: center;
    max-width: 14rem;
    padding: 0.75rem 1rem;
    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: 1.1rem;
    height: 1.1rem;
    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;
}

.prob-spinner-svg {
    width: min(100%, 10rem);
    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;
}

.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: min(100%, 18rem);
}

.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 {
    height: 100%;
    background: var(--theme-primary);
    border-radius: 0.45rem;
}
.measure-bar-val {
    font-weight: 800;
    font-size: 0.9rem;
    text-align: right;
}
.measure-units-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}
.measure-units-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.2rem;
    justify-content: center;
    max-width: 100%;
    overflow-x: auto;
}
.measure-unit-token {
    font-size: 1.35rem;
    line-height: 1;
}
.measure-units-rail {
    width: min(100%, 14rem);
    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.12rem;
    min-height: 4.5rem;
    padding: 0.35rem 0.55rem;
    border: 2px solid #cbd5e1;
    border-radius: 0.65rem;
    background: #f8fafc;
}

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

.measure-capacity-jar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem;
    width: 4.6rem;
    min-height: 4.2rem;
    padding: 0.4rem 0.3rem;
    border: 3px solid #94a3b8;
    border-top: none;
    border-radius: 0 0 0.85rem 0.85rem;
    background: #e0f2fe;
}

.measure-capacity-cup {
    font-size: 0.95rem;
    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;
}

.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;
    }

    .ten-frame-box {
        grid-template-columns: repeat(5, 28px);
        grid-template-rows: repeat(2, 28px);
    }

    .frame-token {
        width: 20px;
        height: 20px;
    }

    .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 {
        grid-template-columns: 2.6rem 1fr;
        gap: 0.4rem;
    }

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

    .topic-cat-chip-list {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
        gap: 0.35rem;
    }

    .topic-cat-chip-list::-webkit-scrollbar {
        display: none;
    }

    .topic-cat-chip {
        flex: 0 0 auto;
        font-size: 0.82rem;
        padding: 0.35rem 0.55rem;
    }

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

    .topic-skill-chip-list::-webkit-scrollbar {
        display: none;
    }

    .operation-chips {
        /* skill row keeps topic-picker-row grid */
    }

    .topic-skill-chip-list .op-chip {
        flex: 0 0 7.5rem;
        width: 7.5rem;
        min-width: 7.5rem;
        max-width: 7.5rem;
        padding: 0.4rem 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;
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    white-space: nowrap;
    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;
}

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

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

.feedback-dismiss-hint {
    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;
}

/* Input Mode Switcher (In Arena Header Row) */
.input-mode-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--bg-card-secondary);
    padding: 2px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-light);
}

.input-mode-chip {
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    padding: 0.25rem 0.65rem;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.input-mode-chip:hover {
    color: var(--text-primary);
}

.input-mode-chip.active {
    background: #ffffff;
    border-color: var(--border-medium);
    color: var(--theme-primary-dark);
    box-shadow: var(--shadow-sm);
}

/* 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 {
    transform: translateY(3px);
    border-bottom-width: 2px;
}

.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; }
}

/* 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;
    cursor: pointer;
    transition: all 0.1s ease;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keypad-btn:active {
    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;
}

.btn-huge-submit:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--theme-primary-dark);
}

/* 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;
}

.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 {
    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 {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #b45309;
}

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

.btn-full {
    width: 100%;
}

/* ==========================================================================
   Progress & Stats (Tab 2)
   ========================================================================== */

.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-cluster {
    margin-top: 1.25rem;
    padding: 1rem 1rem 1.15rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-card-secondary);
}

.settings-cluster-kicker {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-primary-dark);
    margin: 0 0 0.25rem;
}

.settings-cluster-note {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0.65rem;
    line-height: 1.35;
}

.settings-cluster .form-section {
    margin-top: 1.15rem;
    padding-top: 1rem;
}

.settings-cluster .form-section.settings-cluster-first {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.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 {
    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;
}

/* Profiles List */
.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;
}

.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;
}

.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: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Laptop+: stage grows with the page instead of a fixed phone-width strip.
   22rem (~352px) is the floor that fits Head + Body side-by-side. */
@media (min-width: 861px) {
    .studio-layout-grid {
        grid-template-columns: minmax(22rem, 1fr) minmax(0, 1.15fr);
    }
}

/* 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-backdrop-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: none;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding: 0 0.75rem;
    box-sizing: border-box;
}

.stage-backdrop-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.stage-backdrop-selector {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.backdrop-btn {
    background: var(--bg-card-secondary);
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.35rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.backdrop-btn:hover {
    transform: scale(1.1);
}

.backdrop-btn.active {
    border-color: var(--theme-primary);
    background: var(--theme-primary-light);
    transform: scale(1.1);
}

/* Stage Viewport */
.avatar-interactive-stage {
    width: 100%;
    max-width: none;
    height: 260px;
    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 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
    width: 100%;
    max-width: none;
    padding: 0 0.75rem;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
}

.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;
}

.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;
}

.stage-zoom-btn:hover {
    background: var(--theme-primary-light);
    transform: scale(1.06);
}

.stage-zoom-btn:active {
    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);
}

.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 */
.avatar-interactive-stage.bg-galaxy {
    background: radial-gradient(circle at center, #1e1b4b 0%, #0f172a 100%);
    border: 3px solid #6366f1;
}

.avatar-interactive-stage.bg-kingdom {
    background: linear-gradient(180deg, #bae6fd 0%, #fbcfe8 60%, #bbf7d0 100%);
    border: 3px solid #f472b6;
}

.avatar-interactive-stage.bg-sunset {
    background: linear-gradient(180deg, #fdba74 0%, #f472b6 60%, #38bdf8 100%);
    border: 3px solid #fb923c;
}

.avatar-interactive-stage.bg-neon {
    background: radial-gradient(circle at center, #18181b 0%, #09090b 100%);
    border: 3px solid #06b6d4;
}

.avatar-interactive-stage.bg-sanrio {
    background: radial-gradient(circle at center, #fdf2f8 0%, #fed7aa 45%, #e0f2fe 100%);
    border: 3px solid #f472b6;
}

.avatar-interactive-stage.bg-godzilla {
    background: radial-gradient(circle at center, #450a0a 0%, #18181b 55%, #09090b 100%);
    border: 3px solid #06b6d4;
    box-shadow: inset 0 0 24px rgba(6, 182, 212, 0.45), var(--shadow-md);
}

.avatar-interactive-stage.bg-sports {
    background: linear-gradient(180deg, #38bdf8 0%, #f0fdf4 50%, #22c55e 100%);
    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% { transform: translate(0, 0) rotate(0deg); opacity: 0.8; }
    50% { transform: translate(6px, 12px) rotate(45deg); opacity: 1; }
    100% { transform: translate(12px, 24px) rotate(90deg); opacity: 0.4; }
}

@keyframes lavaGlow {
    0%, 100% { filter: drop-shadow(0 0 4px #f97316); opacity: 0.85; }
    50% { filter: drop-shadow(0 0 10px #ef4444); opacity: 1; }
}

@keyframes spotlightSweep {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.65; }
}

.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; }
.anim-lava { animation: lavaGlow 2.5s infinite ease-in-out; }
.anim-spotlight { animation: spotlightSweep 3s 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 {
    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); }
}

.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;
}

.studio-bar-widths {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
}

.studio-width-stepper {
    display: grid;
    grid-template-columns: auto minmax(2.25rem, 2.75rem) minmax(0, 1fr) minmax(2.25rem, 2.75rem);
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
    max-width: 100%;
    background: #ffffff;
    border: 2px solid #fbbf24;
    border-radius: 12px;
    padding: 0.15rem 0.2rem;
    box-sizing: border-box;
}

.studio-width-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: #78350f;
    white-space: nowrap;
}

.studio-width-stepper button {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0;
    border: 2px solid #f59e0b;
    border-radius: 10px;
    background: #fffbeb;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: #92400e;
    cursor: pointer;
}

.studio-width-value {
    min-width: 0;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: #78350f;
}

.studio-bar-tryon {
    flex-direction: column;
    align-items: stretch;
}

.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-bar-tryon #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;
}

.studio-cart-actions .btn {
    width: 100%;
}

.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;
}

.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); }
}

.stage-action-bar {
    display: flex;
    gap: 0.4rem;
    width: 100%;
    max-width: none;
    padding: 0 0.75rem;
    box-sizing: border-box;
    justify-content: center;
    flex-wrap: wrap;
}

.stage-action-bar .btn {
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
    flex: 1 1 auto;
    min-width: 75px;
}

/* 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;
}

.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;
}

.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;
}

.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 {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 0.15rem;
}

.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);
}

.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 {
    transform: scale(0.96);
}

.world-cart-btn.has-items {
    animation: cartPulse 2s infinite ease-in-out;
}

.studio-cart-badge {
    cursor: default;
}

.studio-cart-badge:hover,
.studio-cart-badge:active {
    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;
}

.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;
}

.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;
}

.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)
   ========================================================================== */

.house-preview-banner {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid #f59e0b;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    animation: fadeInDown 0.25s ease-out;
}

.preview-banner-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.preview-badge-pill {
    background: #f59e0b;
    color: #451a03;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full);
}

.preview-item-name {
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
}

.preview-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.house-room-card {
    position: relative;
}

.house-store-modal-card {
    max-width: 820px;
    width: 95vw;
}

.house-store-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-light);
}

.house-store-header-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.store-coin-pill {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: #fef3c7;
    border: 1.5px solid #f59e0b;
    color: #b45309;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
}

.store-cart-badge-btn {
    position: relative;
    background: #ffffff;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.65rem;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-cart-badge-btn:hover {
    background: var(--bg-card-secondary);
    border-color: var(--theme-primary);
    transform: translateY(-1px);
}

.store-cart-counter {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.68rem;
    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;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0.75rem 0.2rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.house-store-categories-bar::-webkit-scrollbar {
    display: none;
}

.store-cat-pill {
    background: var(--bg-card-secondary);
    border: 1.5px solid var(--border-medium);
    border-radius: var(--radius-full);
    padding: 0.4rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.store-cat-pill:hover {
    background: var(--theme-primary-light);
    border-color: var(--theme-primary);
    color: var(--theme-primary);
}

.store-cat-pill.active {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);
}

.store-cat-pill.store-cat-inventory.active {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

.house-store-modal-body {
    max-height: 58vh;
    overflow-y: auto;
    padding: 1rem 0.2rem;
}

.house-store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
}

.house-store-card {
    background: var(--bg-card);
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.house-store-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--theme-primary);
}

.house-store-card.owned-card {
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-secondary) 100%);
    border-color: #cbd5e1;
}

.house-store-card.equipped-card {
    border-color: #10b981;
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
    box-shadow: 0 0 0 1px #10b981;
}

.house-store-card.previewing-card {
    border-color: #f59e0b;
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 100%);
    box-shadow: 0 0 0 1px #f59e0b;
}

.store-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.store-slot-tag {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-card-secondary);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs);
}

.store-owned-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #059669;
    background: #d1fae5;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs);
}

.store-equipped-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #ffffff;
    background: #10b981;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs);
}

.store-card-visual {
    width: 100%;
    height: 90px;
    background: var(--bg-card-secondary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
    font-size: 2.5rem;
    border: 1px dashed var(--border-light);
    user-select: none;
}

.store-card-title {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.2rem;
    line-height: 1.25;
}

.store-card-desc {
    font-size: 0.74rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.35;
    min-height: 2.2rem;
}

.store-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
}

.store-card-price {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.88rem;
    color: #b45309;
}

.store-card-actions {
    display: flex;
    gap: 0.3rem;
}

.house-store-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-light);
    margin-top: 0.5rem;
}

.house-cart-modal-card {
    max-width: 480px;
}

.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-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;
}

.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;
    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;
}

.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);
}

.btn-emerald:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

/* =============================================================================
   MATH VILLAGE TOWN & CO-OP ISLAND STYLES
   ============================================================================= */

/* Sub-Navigation Tabs */
.world-subnav-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    background: #e2e8f0;
    padding: 0.3rem;
    border-radius: var(--radius-full);
    width: fit-content;
    max-width: 100%;
}

.world-subnav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.world-subnav-btn:hover {
    color: var(--text-primary);
}

.world-subnav-btn.active {
    background: #ffffff;
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: scale(1.02);
}

.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;
}

.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);
}

.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;
}

.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;
}

.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);
}

.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;
}

.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;
}

.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)
   ========================================================================== */

.house-header-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    border: 2px solid #bbf7d0;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.08);
}

.house-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.house-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.house-icon-main {
    font-size: 1.8rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.house-name {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.house-meta-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.house-theme-badge {
    background: #e0e7ff;
    color: #4338ca;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
}

.house-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.house-action-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.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: #0f172a;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
    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.32; }
.house-room-svg.lighting-sunset .house-floor-shadow { opacity: 0.48; }
.house-room-svg.lighting-night .house-floor-shadow { opacity: 0.68; }

.house-room-svg.lighting-night .house-lamp-glow {
    opacity: 1;
}
.house-room-svg.lighting-day .house-lamp-glow {
    opacity: 0.45;
}
.house-room-svg.lighting-sunset .house-lamp-glow {
    opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
    .house-drape-left {
        transform-origin: 490px 52px;
        animation: houseDrapeSway 5.5s ease-in-out infinite;
    }
    .house-drape-right {
        transform-origin: 660px 52px;
        animation: houseDrapeSway 6.2s ease-in-out infinite reverse;
    }
    .house-lamp-bulb {
        animation: houseLampPulse 2.8s ease-in-out infinite;
    }
    .lighting-night .house-lamp-glow {
        animation: houseLampFlicker 3.6s ease-in-out infinite;
    }
    .house-dust-mote {
        animation: houseDustDrift 7s ease-in-out infinite;
    }
    .house-dust-mote.d2 { animation-delay: 0.6s; animation-duration: 8s; }
    .house-dust-mote.d3 { animation-delay: 1.2s; }
    .house-dust-mote.d4 { animation-delay: 1.8s; animation-duration: 6.5s; }
    .house-dust-mote.d5 { animation-delay: 0.3s; }
    .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-bubble.b1 { animation: houseBubbleRise 2.4s ease-in infinite; }
    .house-bubble.b2 { animation: houseBubbleRise 2.8s ease-in infinite 0.6s; }
    .house-bubble.b3 { animation: houseBubbleRise 3.1s ease-in infinite 1.1s; }
    .house-fish { animation: houseFishSwim 3.4s ease-in-out infinite; }
    .house-sill-plant { transform-box: fill-box; transform-origin: center bottom; animation: housePlantSway 4s ease-in-out infinite; }
}

@keyframes houseDrapeSway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(1.6deg); }
}
@keyframes houseLampPulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}
@keyframes houseLampFlicker {
    0%, 100% { opacity: 0.92; }
    40% { opacity: 1; }
    48% { opacity: 0.7; }
    52% { opacity: 1; }
}
@keyframes houseDustDrift {
    0%, 100% { transform: translate(0, 0); opacity: 0.55; }
    50% { transform: translate(6px, -10px); opacity: 1; }
}
@keyframes houseFairyTwinkle {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
@keyframes houseBubbleRise {
    0% { transform: translateY(0); opacity: 0.8; }
    100% { transform: translateY(-16px); opacity: 0; }
}
@keyframes houseFishSwim {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-6px); }
}
@keyframes housePlantSway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(5deg); }
}

.house-canvas-container.is-arranging {
    outline: 3px dashed #f59e0b;
    outline-offset: 4px;
    border-radius: var(--radius-md);
}

.house-canvas-container.is-arranging .house-movable {
    cursor: grab;
}

.house-canvas-container.is-arranging .house-movable.is-dragging {
    cursor: grabbing;
    filter: brightness(1.12) drop-shadow(0 0 12px rgba(251, 191, 36, 0.7));
}

.house-arrange-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;
}

#btnToggleHouseArrange.active {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
}

/* Room Furniture Hotspot Animation - Smooth glow without scale bobble */
.furniture-hotspot {
    cursor: pointer;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.furniture-hotspot:hover {
    filter: brightness(1.15) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

/* 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 Pulsing Glow */
.jukebox-playing-glow {
    animation: jukeboxPulse 1.2s ease-in-out infinite alternate;
}

@keyframes jukeboxPulse {
    0% { filter: drop-shadow(0 0 4px #ec4899); }
    100% { filter: drop-shadow(0 0 16px #38bdf8); }
}

/* ==========================================================================
   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;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--text-secondary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: background 0.15s, transform 0.15s;
    cursor: pointer;
}

.styled-alert-header .modal-close-btn:hover {
    background: #ffffff;
    transform: scale(1.1);
    color: var(--text-primary);
}

.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));
}
.styled-alert-card.context-board .styled-alert-header .modal-close-btn {
    background: rgba(51, 65, 85, 0.9);
    color: #f8fafc;
}

/* 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);
}

.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;
}

.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);
}

.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);
}

.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;
}

.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;
}

.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;
}

.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-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 {
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
}

.arcade-overlay,
.arcade-overlay *,
.muncher-overlay,
.muncher-overlay *,
.painter-overlay,
.painter-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;
}

.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;
}

.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 {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #92400e, 0 4px 10px rgba(146, 64, 14, 0.2);
}

.muncher-exit-btn {
    min-width: 0;
    min-height: 2.45rem;
    padding: 0.28rem 0.8rem 0.32rem;
    font-size: 1rem;
    box-shadow: 0 3px 0 #92400e, 0 6px 12px rgba(146, 64, 14, 0.25);
}

.muncher-exit-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--muncher-brown);
    color: #fef3c7;
    font-size: 0.85rem;
    line-height: 1;
    font-weight: 800;
}

.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 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    color: #fde68a;
    font-size: 0.88rem;
    line-height: 1.35;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.muncher-board-wrap {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    touch-action: none;
    user-select: none;
}

.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: 2px solid #d6a15a;
    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: var(--muncher-gold-deep);
    background: #fef3c7;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.45);
    cursor: pointer;
}

.muncher-cell.is-adjacent-target:active:not(:disabled) {
    transform: scale(0.97);
}

.muncher-cell.has-player.can-munch {
    box-shadow: 0 0 0 3px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.45);
}

.muncher-cell.is-floor {
    background: rgba(255, 255, 255, 0.55);
    border-color: #cbd5e1;
}

.muncher-cell.is-number {
    background: #fff;
    border-color: #64748b;
    font-family: var(--font-heading);
    font-size: clamp(1rem, 3.8vw, 1.45rem);
    font-weight: 800;
    color: #0f172a;
}

.muncher-cell.is-number.is-wrong-flash {
    background: #fee2e2;
    border-color: #ef4444;
}

.muncher-cell.is-cleared {
    background: rgba(220, 252, 231, 0.65);
    border-color: #86efac;
}

.muncher-cell.is-missed {
    background: #fef9c3;
    border-style: dashed;
    border-color: #ca8a04;
}

.muncher-cell.has-player {
    z-index: 2;
    box-shadow: 0 0 0 2px var(--muncher-gold);
    overflow: visible;
}

.muncher-cell.has-troggle::after {
    content: '👾';
    position: absolute;
    top: 0.15rem;
    right: 0.2rem;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.95;
    pointer-events: none;
}

.muncher-avatar-wrap {
    width: 78%;
    height: 78%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transform-origin: center bottom;
    overflow: visible;
    pointer-events: none;
}

.muncher-avatar-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.muncher-avatar-emoji {
    font-size: clamp(1.6rem, 6vw, 2.2rem);
    line-height: 1;
}

.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.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: 2px solid #cbd5e1;
    border-radius: 0.75rem;
    background: #f8fafc;
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 4vw, 1.55rem);
    font-weight: 800;
    color: #0f172a;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.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.5rem;
    height: 6.4rem;
    display: flex;
    align-items: flex-end;
    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,
.muncher-overlay.is-idle .muncher-hint,
.muncher-overlay.is-gameover .muncher-hint {
    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-exit-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;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.45rem 0.4rem;
    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);
}

.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;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.28rem;
    width: min(100%, 22rem);
    max-height: calc(100% - 3.8rem);
    aspect-ratio: 1;
    min-height: 0;
}

.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) {
    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-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 .muncher-hint,
.painter-overlay.is-gameover .muncher-hint,
.painter-overlay.is-playing .painter-count-chip {
    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-pile,
.split-unit,
.split-gap,
#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-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

.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 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: 100%;
    padding: 0.45rem 0.35rem;
    gap: 0;
}

.split-train.is-cracked {
    gap: 0.35rem;
}

.split-pile {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.split-unit.is-cube {
    width: clamp(1.55rem, 7vw, 2.15rem);
    height: clamp(1.55rem, 7vw, 2.15rem);
    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: clamp(1.35rem, 6vw, 1.85rem);
    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;
}

.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:active {
    transform: 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,
.bridge-overlay.is-idle .muncher-hint,
.bridge-overlay.is-gameover .muncher-hint {
    display: none;
}

@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 {
        animation: 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-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;
}

.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;
}

.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;
}

.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;
}

.bond-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.bond-link-bar {
    width: 2px;
    height: 0.55rem;
    background: var(--border-medium);
    border-radius: 1px;
}

.bond-link-bar.wide {
    width: 120px;
    height: 2px;
}

.bond-circle {
    min-width: 3.25rem;
    min-height: 3.25rem;
    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.4rem, 5vw, 2rem);
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.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.35rem;
    padding: 0.5rem;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: #ffffff;
    max-width: 220px;
}

.bond-ten-dot {
    width: 1.35rem;
    height: 1.35rem;
    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;
}

.groups-array-grid {
    display: grid;
    gap: 0.35rem;
    padding: 0.5rem;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-md);
    background: #ffffff;
}

.groups-array-dot {
    font-size: 1.25rem;
    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; }