.gamifications-page {
    position: relative;
    min-height: 100%;
    padding: 2rem clamp(1rem, 3vw, 3rem) 4rem;
    overflow: hidden;
    isolation: isolate;
}

.gamifications-glow {
    position: absolute;
    z-index: -1;
    width: 32rem;
    height: 32rem;
    border-radius: 999px;
    filter: blur(90px);
    opacity: 0.16;
    pointer-events: none;
}

.gamifications-glow-one {
    top: -12rem;
    right: -8rem;
    background: #6366f1;
}

.gamifications-glow-two {
    bottom: -14rem;
    left: -10rem;
    background: #06b6d4;
}

.gamifications-hero {
    max-width: 820px;
    margin-bottom: 2.5rem;
}

.gamifications-hero-compact {
    margin-top: 1.5rem;
}

.gamifications-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0.4rem 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(99, 102, 241, 0.24);
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.09);
    color: #818cf8;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gamifications-hero h1 {
    margin: 0;
    font-size: clamp(2.3rem, 6vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.gamifications-hero p {
    max-width: 730px;
    margin: 1.25rem 0 0;
    color: var(--text-secondary, #64748b);
    font-size: clamp(1rem, 2vw, 1.16rem);
    line-height: 1.75;
}

.gamifications-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 2rem 0 1.25rem;
}

    .gamifications-section-heading span {
        color: #818cf8;
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .gamifications-section-heading h2 {
        margin: 0.35rem 0 0;
        font-size: clamp(1.45rem, 3vw, 2.1rem);
        letter-spacing: -0.035em;
    }

.gamification-category-grid,
.gamification-games-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.15rem;
}

.gamification-category-card,
.gamification-game-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 1.4rem;
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.22));
    border-radius: 26px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025) ), var(--card-background, rgba(15, 23, 42, 0.72));
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12);
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.gamification-category-card {
    grid-column: span 4;
}

    .gamification-category-card:first-child {
        grid-column: span 6;
    }

.gamification-game-card {
    grid-column: span 3;
}

    .gamification-category-card:hover,
    .gamification-game-card:hover {
        transform: translateY(-5px);
        border-color: rgba(99, 102, 241, 0.5);
        box-shadow: 0 28px 75px rgba(15, 23, 42, 0.18);
    }

.special-education-card {
    background: radial-gradient( circle at top right, rgba(99, 102, 241, 0.24), transparent 48% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025) ), var(--card-background, rgba(15, 23, 42, 0.72));
}

.category-card-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    margin-bottom: 2rem;
    border: 1px solid rgba(129, 140, 248, 0.35);
    border-radius: 18px;
    background: rgba(99, 102, 241, 0.14);
    color: #a5b4fc;
    font-size: 1.6rem;
}

.category-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.category-card-label {
    width: fit-content;
    margin-bottom: 0.65rem;
    color: #818cf8;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.category-card-content h3,
.game-card-information h3 {
    margin: 0;
    font-size: 1.45rem;
    letter-spacing: -0.035em;
}

.category-card-content p,
.game-card-information p {
    margin: 0.8rem 0 1.3rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.65;
}

.category-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    font-weight: 750;
}

.category-card-arrow {
    font-size: 1.4rem;
    transition: transform 180ms ease;
}

.gamification-category-card:hover .category-card-arrow,
.gamification-game-card:hover .category-card-arrow {
    transform: translateX(5px);
}

.category-card-disabled {
    opacity: 0.68;
    cursor: default;
}

    .category-card-disabled:hover {
        transform: none;
        border-color: var(--border-color, rgba(148, 163, 184, 0.22));
    }

.gamifications-back-link {
    display: inline-flex;
    color: #818cf8;
    font-weight: 750;
    text-decoration: none;
}

    .gamifications-back-link:hover {
        text-decoration: underline;
    }

.gamifications-accessibility-note {
    display: flex;
    gap: 1rem;
    max-width: 920px;
    padding: 1.25rem;
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 22px;
    background: rgba(34, 197, 94, 0.07);
}

.accessibility-note-icon {
    display: grid;
    flex: 0 0 46px;
    height: 46px;
    place-items: center;
    border-radius: 15px;
    background: rgba(34, 197, 94, 0.14);
    color: #22c55e;
    font-size: 1.4rem;
}

.gamifications-accessibility-note strong {
    font-size: 1rem;
}

.gamifications-accessibility-note p {
    margin: 0.35rem 0 0;
    color: var(--text-secondary, #64748b);
    line-height: 1.6;
}

.game-card-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 160px;
    margin: -0.4rem -0.4rem 1.3rem;
    border-radius: 20px;
    background: radial-gradient( circle at center, rgba(99, 102, 241, 0.25), transparent 65% ), rgba(99, 102, 241, 0.07);
}

.game-preview-shape {
    display: grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 2rem;
}

.game-preview-shape-one {
    color: #38bdf8;
}

.game-preview-shape-two {
    color: #f59e0b;
}

.game-preview-shape-three {
    color: #f472b6;
}

.secondary-preview span,
.classification-preview span,
.pattern-preview span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.09);
    font-size: 1.5rem;
    font-weight: 850;
}

/* ===========================
    VISTA PREVIA
   =========================== */

.pattern-preview {
    gap: 0.65rem;
}

.pattern-preview-blue {
    color: #38bdf8;
}

.pattern-preview-orange {
    color: #f59e0b;
}

.pattern-preview-missing {
    border: 2px dashed rgba(129, 140, 248, 0.42);
    color: #818cf8;
    background: rgba(99, 102, 241, 0.12) !important;
}

.game-card-badges,
.game-card-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

    .game-card-badges span,
    .game-card-skills span {
        padding: 0.32rem 0.58rem;
        border: 1px solid rgba(129, 140, 248, 0.2);
        border-radius: 999px;
        background: rgba(99, 102, 241, 0.08);
        color: #818cf8;
        font-size: 0.7rem;
        font-weight: 750;
    }

.game-card-information h3 {
    margin-top: 0.9rem;
}

.game-card-skills {
    margin-bottom: 1.3rem;
}

/* =========================================================
   TARJETAS DE JUEGOS · CONTENIDO UNIFORME
   ========================================================= */

.game-card-information {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

    .game-card-information .category-card-footer {
        margin-top: auto;
    }

@media (max-width: 1050px) {
    .gamification-category-card,
    .gamification-category-card:first-child,
    .gamification-game-card {
        grid-column: span 6;
    }
}

@media (max-width: 680px) {
    .gamifications-page {
        padding-inline: 1rem;
    }

    .gamification-category-card,
    .gamification-category-card:first-child,
    .gamification-game-card {
        grid-column: 1 / -1;
    }

    .gamifications-hero h1 {
        font-size: 2.65rem;
    }
}


/* =========================================================
   ENCUENTRA LA IMAGEN · CONTROLES NATIVOS
   ========================================================= */

.find-image-page .configuration-field select,
.find-image-page .sound-selector-row select {
    background-color: #172036 !important;
    color: #f8fafc !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color-scheme: dark;
}

    .find-image-page .configuration-field select option,
    .find-image-page .sound-selector-row select option {
        background-color: #172036;
        color: #f8fafc;
    }

        .find-image-page .configuration-field select option:checked,
        .find-image-page .sound-selector-row select option:checked {
            background-color: #4f46e5;
            color: #ffffff;
        }

    .find-image-page .configuration-field select:focus,
    .find-image-page .sound-selector-row select:focus {
        border-color: #818cf8;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    }

/* =========================================================
   ENCUENTRA LA IMAGEN · MODO CLARO SUAVE
   Paleta blanco ostión
   ========================================================= */

html.theme-light .find-image-page {
    --game-oyster: #f3f0e8;
    --game-oyster-soft: #faf8f2;
    --game-oyster-panel: #ebe7de;
    --game-oyster-deep: #ded8cc;
    --game-text: #273244;
    --game-muted: #667085;
    --game-line: rgba(91, 99, 116, 0.2);
    --game-purple: #6658d9;
    --game-purple-soft: rgba(102, 88, 217, 0.1);
    color: var(--game-text);
    background: radial-gradient( circle at 92% 5%, rgba(129, 111, 218, 0.12), transparent 28% ), radial-gradient( circle at 10% 92%, rgba(92, 160, 154, 0.1), transparent 30% ), linear-gradient( 180deg, var(--game-oyster-soft), var(--game-oyster) );
}

    html.theme-light .find-image-page .game-stage {
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.64), rgba(243, 240, 232, 0.86) ), var(--game-oyster) !important;
        border-color: var(--game-line) !important;
        box-shadow: 0 24px 60px rgba(72, 66, 54, 0.11) !important;
        color: var(--game-text);
    }

    html.theme-light .find-image-page .game-configuration {
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.7), rgba(235, 231, 222, 0.76) ) !important;
        border-color: rgba(102, 88, 217, 0.22) !important;
        color: var(--game-text);
    }

    html.theme-light .find-image-page .configuration-heading strong,
    html.theme-light .find-image-page .configuration-check strong {
        color: var(--game-text);
    }

    html.theme-light .find-image-page .configuration-heading small,
    html.theme-light .find-image-page .configuration-field > span,
    html.theme-light .find-image-page .configuration-check small {
        color: var(--game-muted);
    }

    html.theme-light .find-image-page .configuration-check {
        background: rgba(255, 255, 255, 0.5);
        border-color: var(--game-line);
    }

    html.theme-light .find-image-page .configuration-field select,
    html.theme-light .find-image-page .sound-selector-row select {
        background-color: #f7f4ed !important;
        color: #273244 !important;
        border-color: rgba(90, 98, 114, 0.28) !important;
        color-scheme: light;
    }

        html.theme-light .find-image-page .configuration-field select option,
        html.theme-light .find-image-page .sound-selector-row select option {
            background-color: #f7f4ed;
            color: #273244;
        }

            html.theme-light .find-image-page .configuration-field select option:checked,
            html.theme-light .find-image-page .sound-selector-row select option:checked {
                background-color: #dad4ef;
                color: #2e285f;
            }

        html.theme-light .find-image-page .configuration-field select:focus,
        html.theme-light .find-image-page .sound-selector-row select:focus {
            border-color: #7769d8 !important;
            box-shadow: 0 0 0 3px rgba(102, 88, 217, 0.14) !important;
        }

    html.theme-light .find-image-page .game-progress-section,
    html.theme-light .find-image-page .round-number {
        background: rgba(222, 216, 204, 0.52);
        border-color: var(--game-line);
    }

        html.theme-light .find-image-page .game-progress-information,
        html.theme-light .find-image-page .round-number span,
        html.theme-light .find-image-page .current-turn-indicator span {
            color: var(--game-muted);
        }

    html.theme-light .find-image-page .game-progress-track {
        background: #d8d3c9;
    }

    html.theme-light .find-image-page .game-progress-value {
        background: linear-gradient( 90deg, #7568d8, #629a88 );
    }

    html.theme-light .find-image-page .round-number strong,
    html.theme-light .find-image-page .game-progress-information strong {
        color: #6255c8;
    }

    html.theme-light .find-image-page .question-card {
        background: radial-gradient( circle at top right, rgba(119, 105, 216, 0.12), transparent 52% ), #ece8df !important;
        border-color: rgba(102, 88, 217, 0.2) !important;
        color: var(--game-text);
    }

        html.theme-light .find-image-page .question-card h2 {
            color: #222c3c;
        }

        html.theme-light .find-image-page .question-card p {
            color: var(--game-muted);
        }

    html.theme-light .find-image-page .question-label {
        color: #6658d9;
    }

    html.theme-light .find-image-page .answer-option {
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.78), rgba(235, 231, 222, 0.8) ) !important;
        border-color: rgba(91, 99, 116, 0.22) !important;
        color: var(--game-text);
        box-shadow: 0 10px 24px rgba(70, 65, 55, 0.07);
    }

        html.theme-light .find-image-page .answer-option:not(:disabled):hover {
            background: #e7e2f2 !important;
            border-color: rgba(102, 88, 217, 0.56) !important;
            box-shadow: 0 14px 30px rgba(80, 69, 145, 0.12);
        }

        html.theme-light .find-image-page .answer-option.correct {
            background: #deeee3 !important;
            border-color: rgba(64, 139, 91, 0.6) !important;
        }

        html.theme-light .find-image-page .answer-option.incorrect {
            background: #f4e8d6 !important;
            border-color: rgba(190, 124, 48, 0.55) !important;
        }

        html.theme-light .find-image-page .answer-option.muted {
            opacity: 0.55;
        }

    html.theme-light .find-image-page .no-player-warning {
        background: #f4ead7;
        border-color: rgba(190, 124, 48, 0.38);
    }

        html.theme-light .find-image-page .no-player-warning strong {
            color: #59401f;
        }

        html.theme-light .find-image-page .no-player-warning p {
            color: #796344;
        }

    html.theme-light .find-image-page .current-turn-indicator.waiting strong {
        color: #a76711;
    }

    html.theme-light .find-image-page .scoreboard-panel {
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.72), rgba(235, 231, 222, 0.9) ) !important;
        border-color: var(--game-line) !important;
        box-shadow: 0 22px 52px rgba(72, 66, 54, 0.11) !important;
        color: var(--game-text) !important;
    }

    html.theme-light .find-image-page .scoreboard-header h2,
    html.theme-light .find-image-page .ranking-heading h3,
    html.theme-light .find-image-page .empty-scoreboard strong,
    html.theme-light .find-image-page .ranking-player-name strong {
        color: var(--game-text);
    }

    html.theme-light .find-image-page .player-entry label,
    html.theme-light .find-image-page .player-selector-label,
    html.theme-light .find-image-page .manual-score-controls > span,
    html.theme-light .find-image-page .ranking-player-name small,
    html.theme-light .find-image-page .empty-scoreboard p {
        color: var(--game-muted);
    }

    html.theme-light .find-image-page .player-entry input {
        background: #f7f4ed !important;
        border-color: rgba(91, 99, 116, 0.26) !important;
        color: var(--game-text) !important;
    }

        html.theme-light .find-image-page .player-entry input::placeholder {
            color: #8a8e96;
        }

    html.theme-light .find-image-page .empty-scoreboard {
        background: rgba(255, 255, 255, 0.34);
        border-color: rgba(91, 99, 116, 0.24);
    }

    html.theme-light .find-image-page .ranking-row {
        background: rgba(255, 255, 255, 0.38);
        border-color: rgba(91, 99, 116, 0.19);
    }

        html.theme-light .find-image-page .ranking-row.active {
            background: rgba(102, 88, 217, 0.1);
            border-color: rgba(102, 88, 217, 0.42);
        }

    html.theme-light .find-image-page .active-player-card {
        background: radial-gradient( circle at top right, rgba(102, 88, 217, 0.13), transparent 52% ), #e8e3f0 !important;
        border-color: rgba(102, 88, 217, 0.3) !important;
    }

    html.theme-light .find-image-page .active-player-main h3 {
        color: var(--game-text);
    }

    html.theme-light .find-image-page .active-player-stats div {
        background: rgba(255, 255, 255, 0.48);
    }

    html.theme-light .find-image-page .manual-score-controls button {
        background: rgba(255, 255, 255, 0.55);
        border-color: rgba(91, 99, 116, 0.2);
        color: var(--game-text);
    }

    html.theme-light .find-image-page .gamification-sound-settings {
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.66), rgba(232, 227, 240, 0.78) ) !important;
        border-color: rgba(102, 88, 217, 0.2) !important;
        color: var(--game-text);
    }

    html.theme-light .find-image-page .sound-settings-header strong {
        color: var(--game-text);
    }

    html.theme-light .find-image-page
    .sound-settings-header > div:nth-child(2) span,
    html.theme-light .find-image-page .sound-selector-field > span,
    html.theme-light .find-image-page .sound-volume-field > span {
        color: var(--game-muted);
    }

    html.theme-light .find-image-page .sound-selector-row button {
        background: #e6e1f2;
        border-color: rgba(102, 88, 217, 0.26);
        color: #6658d9;
    }

    html.theme-light .find-image-page .active-player-main span,
    html.theme-light .find-image-page .active-player-stats span,
    html.theme-light .find-image-page .ranking-position,
    html.theme-light .find-image-page .manual-score-controls > span {
        color: var(--game-muted);
    }

    html.theme-light .find-image-page .active-player-stats strong,
    html.theme-light .find-image-page .ranking-score,
    html.theme-light .find-image-page .ranking-player-button,
    html.theme-light .find-image-page .manual-score-controls button {
        color: var(--game-text);
    }

    html.theme-light .find-image-page .active-player-stats div {
        border: 1px solid rgba(91, 99, 116, 0.12);
    }

/* =========================================================
   CATÁLOGO DE GAMIFICACIONES · MODO CLARO SUAVE
   Mis Gamificaciones + Educación Especial
   ========================================================= */

html.theme-light .gamifications-page {
    --gam-oyster: #f3f0e8;
    --gam-oyster-soft: #faf8f2;
    --gam-oyster-card: #ebe7de;
    --gam-oyster-deep: #ddd7cb;
    --gam-text: #273244;
    --gam-muted: #667085;
    --gam-border: rgba(91, 99, 116, 0.2);
    --gam-purple: #675bd1;
    --gam-purple-soft: rgba(103, 91, 209, 0.11);
    --gam-green: #3d8f70;
    color: var(--gam-text);
    background: radial-gradient( circle at 88% 8%, rgba(115, 102, 205, 0.11), transparent 28% ), radial-gradient( circle at 7% 88%, rgba(73, 150, 142, 0.09), transparent 30% ), linear-gradient( 180deg, var(--gam-oyster-soft), var(--gam-oyster) );
}

    html.theme-light .gamifications-page .gamifications-glow {
        opacity: 0.08;
    }

    html.theme-light .gamifications-page .gamifications-glow-one {
        background: #7769d8;
    }

    html.theme-light .gamifications-page .gamifications-glow-two {
        background: #64a7a0;
    }

    /* =========================================================
   ENCABEZADOS
   ========================================================= */

    html.theme-light .gamifications-page .gamifications-hero h1,
    html.theme-light .gamifications-page .gamifications-section-heading h2 {
        color: #202a3a;
    }

    html.theme-light .gamifications-page .gamifications-hero p,
    html.theme-light .gamifications-page .category-card-content p,
    html.theme-light .gamifications-page .game-card-information p,
    html.theme-light .gamifications-page .gamifications-accessibility-note p {
        color: var(--gam-muted);
    }

    html.theme-light .gamifications-page .gamifications-eyebrow {
        border-color: rgba(103, 91, 209, 0.24);
        background: rgba(103, 91, 209, 0.09);
        color: #6256c4;
    }

    html.theme-light .gamifications-page
    .gamifications-section-heading span,
    html.theme-light .gamifications-page .category-card-label,
    html.theme-light .gamifications-page .game-title-eyebrow {
        color: #675bd1;
    }

    html.theme-light .gamifications-page .gamifications-back-link {
        color: #5d51bd;
    }

    /* =========================================================
   TARJETAS DE CATEGORÍAS
   ========================================================= */

    html.theme-light .gamifications-page .gamification-category-card {
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.74), rgba(235, 231, 222, 0.92) ) !important;
        border-color: var(--gam-border);
        color: var(--gam-text);
        box-shadow: 0 18px 42px rgba(72, 66, 54, 0.1);
    }

        html.theme-light .gamifications-page
        .gamification-category-card:hover {
            border-color: rgba(103, 91, 209, 0.45);
            box-shadow: 0 22px 50px rgba(73, 64, 124, 0.14);
        }

    html.theme-light .gamifications-page .special-education-card {
        background: radial-gradient( circle at top right, rgba(103, 91, 209, 0.15), transparent 48% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.8), rgba(230, 225, 216, 0.92) ) !important;
        border-color: rgba(103, 91, 209, 0.27);
    }

    html.theme-light .gamifications-page .category-card-content h3,
    html.theme-light .gamifications-page .game-card-information h3 {
        color: #263043;
    }

    html.theme-light .gamifications-page .category-card-footer {
        border-top-color: rgba(91, 99, 116, 0.16);
        color: #303a4d;
    }

    html.theme-light .gamifications-page .category-card-arrow {
        color: #675bd1;
    }

    /* =========================================================
   ICONOS
   ========================================================= */

    html.theme-light .gamifications-page .category-card-icon {
        border-color: rgba(103, 91, 209, 0.26);
        background: linear-gradient( 145deg, rgba(113, 99, 211, 0.14), rgba(113, 99, 211, 0.07) );
        color: #6d61cf;
    }

    html.theme-light .gamifications-page .game-preview-shape,
    html.theme-light .gamifications-page
    .secondary-preview span,
    html.theme-light .gamifications-page
    .classification-preview span,
    html.theme-light .gamifications-page
    .pattern-preview span {
        background: rgba(255, 255, 255, 0.56);
        border: 1px solid rgba(91, 99, 116, 0.12);
        box-shadow: 0 7px 16px rgba(72, 66, 54,  0.07);
    }

    html.theme-light .gamifications-page
    .pattern-preview .pattern-preview-missing {
        border: 2px dashed rgba(103, 91, 209, 0.38);
        background: rgba(103, 91, 209, 0.1) !important;
        color: #6256c4;
    }

    /* =========================================================
   TARJETAS DE JUEGOS
   ========================================================= */

    html.theme-light .gamifications-page .gamification-game-card {
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.76), rgba(235, 231, 222, 0.9) ) !important;
        border-color: var(--gam-border);
        color: var(--gam-text);
        box-shadow: 0 18px 42px rgba(72, 66, 54, 0.1);
    }

        html.theme-light .gamifications-page
        .gamification-game-card:hover {
            border-color: rgba(103, 91, 209, 0.45);
            box-shadow: 0 22px 50px rgba(73, 64, 124, 0.14);
        }

    html.theme-light .gamifications-page .game-card-preview {
        background: radial-gradient( circle at center, rgba(103, 91, 209, 0.14), transparent 67% ), linear-gradient( 145deg, #e8e3ef, #ded9e4 );
    }

    html.theme-light .gamifications-page
    .game-card-badges span,
    html.theme-light .gamifications-page
    .game-card-skills span {
        border-color: rgba(103, 91, 209, 0.23);
        background: rgba(103, 91, 209, 0.08);
        color: #6256c4;
    }

    /* =========================================================
   TARJETAS 
   ========================================================= */

    html.theme-light .gamifications-page .category-card-disabled {
        opacity: 1;
        background: linear-gradient( 145deg, rgba(239, 236, 228, 0.92), rgba(224, 220, 211, 0.92) ) !important;
        border-color: rgba(91, 99, 116, 0.15);
        box-shadow: 0 13px 30px rgba(72, 66, 54, 0.065);
    }

        html.theme-light .gamifications-page
        .category-card-disabled h3 {
            color: #646b78;
        }

        html.theme-light .gamifications-page
        .category-card-disabled p {
            color: #858b95;
        }

        html.theme-light .gamifications-page
        .category-card-disabled .category-card-label,
        html.theme-light .gamifications-page
        .category-card-disabled .game-card-badges span {
            color: #8278bf;
        }

        html.theme-light .gamifications-page
        .category-card-disabled .category-card-icon {
            background: rgba(103, 91, 209, 0.07);
            color: #8b82c0;
        }

        html.theme-light .gamifications-page
        .category-card-disabled .game-card-preview {
            background: radial-gradient( circle at center, rgba(103, 91, 209, 0.08), transparent 68% ), #dfdbe3;
            filter: saturate(0.72);
        }

    /* =========================================================
   MEMORAMA DEL CATÁLOGO · MODO CLARO
   ========================================================= */

    html.theme-light .gamifications-page
    .memory-preview-card {
        border-color: rgba(91, 99, 116, 0.16);
        box-shadow: 0 7px 16px rgba(72, 66, 54, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    }

        html.theme-light .gamifications-page
        .memory-preview-card.is-revealed {
            background: radial-gradient( circle at top, rgba(103, 91, 209, 0.1), transparent 68% ), rgba(255, 255, 255, 0.62);
        }

        html.theme-light .gamifications-page
        .memory-preview-card.is-hidden {
            border-color: rgba(103, 91, 209, 0.25);
            background: radial-gradient( circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 42% ), linear-gradient( 145deg, #d8d2eb, #c9c2e0 );
            color: #5f53bd;
        }

    /* =========================================================
   AVISO DE ACCESIBILIDAD
   ========================================================= */

    html.theme-light .gamifications-page
    .gamifications-accessibility-note {
        border-color: rgba(61, 143, 112, 0.25);
        background: linear-gradient( 135deg, rgba(222, 240, 232, 0.82), rgba(231, 239, 233, 0.76) );
        color: var(--gam-text);
    }

    html.theme-light .gamifications-page
    .accessibility-note-icon {
        background: rgba(61, 143, 112, 0.13);
        color: #338264;
    }

    html.theme-light .gamifications-page
    .gamifications-accessibility-note strong {
        color: #253b34;
    }

/* =========================================================
   SECUENCIA VISUAL · MODO CLARO SUAVE
   ========================================================= */

html.theme-light .visual-sequence-page {
    --sequence-oyster: #f3f0e8;
    --sequence-soft: #faf8f2;
    --sequence-panel: #ebe7de;
    --sequence-text: #273244;
    --sequence-muted: #667085;
    --sequence-line: rgba(91, 99, 116, 0.2);
    color: var(--sequence-text);
    background: radial-gradient( circle at 92% 6%, rgba(115, 102, 205, 0.1), transparent 28% ), radial-gradient( circle at 8% 90%, rgba(73, 150, 142, 0.08), transparent 30% ), linear-gradient( 180deg, var(--sequence-soft), var(--sequence-oyster) );
}

    html.theme-light .visual-sequence-page .sequence-stage,
    html.theme-light .visual-sequence-page .scoreboard-panel {
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.72), rgba(235, 231, 222, 0.9) ) !important;
        border-color: var(--sequence-line) !important;
        color: var(--sequence-text) !important;
        box-shadow: 0 22px 55px rgba(72, 66, 54, 0.1) !important;
    }

    html.theme-light .visual-sequence-page .sequence-configuration,
    html.theme-light .visual-sequence-page .sequence-answer-area,
    html.theme-light .visual-sequence-page .sequence-options-area,
    html.theme-light .visual-sequence-page .sequence-progress-section {
        background: rgba(235, 231, 222, 0.62);
        border-color: var(--sequence-line);
    }

    html.theme-light .visual-sequence-page
    .sequence-configuration-field select {
        background-color: #f7f4ed !important;
        border-color: rgba(90, 98, 114, 0.28) !important;
        color: var(--sequence-text) !important;
        color-scheme: light;
    }

        html.theme-light .visual-sequence-page
        .sequence-configuration-field select option {
            background-color: #f7f4ed;
            color: var(--sequence-text);
        }

    html.theme-light .visual-sequence-page
    .sequence-configuration-check {
        background: rgba(255, 255, 255, 0.5);
        border-color: var(--sequence-line);
    }

    html.theme-light .visual-sequence-page .sequence-question-card {
        background: radial-gradient( circle at top right, rgba(119, 105, 216, 0.11), transparent 52% ), #ece8df !important;
        border-color: rgba(102, 88, 217, 0.2);
    }

        html.theme-light .visual-sequence-page .sequence-question-card h2,
        html.theme-light .visual-sequence-page
        .sequence-answer-area header strong,
        html.theme-light .visual-sequence-page
        .sequence-options-area header strong {
            color: var(--sequence-text);
        }

        html.theme-light .visual-sequence-page .sequence-question-card p,
        html.theme-light .visual-sequence-page
        .sequence-configuration-heading small,
        html.theme-light .visual-sequence-page
        .sequence-configuration-field > span,
        html.theme-light .visual-sequence-page
        .sequence-configuration-check small,
        html.theme-light .visual-sequence-page
        .sequence-options-area header small {
            color: var(--sequence-muted);
        }

    html.theme-light .visual-sequence-page .sequence-empty-slot {
        background: rgba(255, 255, 255, 0.4);
        border-color: rgba(91, 99, 116, 0.22);
    }

    html.theme-light .visual-sequence-page .sequence-selected-step,
    html.theme-light .visual-sequence-page .sequence-option-card {
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.76), rgba(235, 231, 222, 0.82) );
        border-color: rgba(91, 99, 116, 0.22);
        color: var(--sequence-text);
    }

        html.theme-light .visual-sequence-page
        .sequence-option-card:not(:disabled):hover {
            background: #e7e2f2;
            border-color: rgba(102, 88, 217, 0.52);
        }

        html.theme-light .visual-sequence-page
        .sequence-option-card.guided {
            background: #e0eee5;
            border-color: rgba(61, 143, 112, 0.48);
        }

        html.theme-light .visual-sequence-page
        .sequence-selected-step.position-correct {
            background: #deeee3;
        }

        html.theme-light .visual-sequence-page
        .sequence-selected-step.position-incorrect {
            background: #f4e8d6;
        }

    html.theme-light .visual-sequence-page
    .sequence-secondary-button,
    html.theme-light .visual-sequence-page
    .sequence-retry-button {
        background: rgba(255, 255, 255, 0.58);
        border-color: var(--sequence-line);
        color: var(--sequence-text);
    }

    html.theme-light .visual-sequence-page
    .sequence-finished-card {
        background: radial-gradient( circle at top, rgba(208, 166, 94, 0.12), transparent 48% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.68), rgba(239, 235, 227, 0.86) ) !important;
    }

    html.theme-light .visual-sequence-page
    .sequence-finished-content h2,
    html.theme-light .visual-sequence-page
    .sequence-finished-stats strong {
        color: var(--sequence-text);
    }

    html.theme-light .find-image-page
    .sound-selector-row select,
    html.theme-light .visual-sequence-page
    .sound-selector-row select {
        appearance: none;
        -webkit-appearance: none;
        background-color: #f7f4ed !important;
        color: #273244 !important;
        border-color: rgba(90, 98, 114, 0.28) !important;
        color-scheme: light;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }

        html.theme-light .find-image-page
        .sound-selector-row select option,
        html.theme-light .visual-sequence-page
        .sound-selector-row select option {
            background-color: #f7f4ed;
            color: #273244;
        }


/* =========================================================
   CLASIFICA LOS OBJETOS · MODO CLARO BLANCO OSTIÓN
   ========================================================= */

html.theme-light .object-classification-page {
    color: #273244;
}

    html.theme-light .object-classification-page
    .classification-page-header p,
    html.theme-light .object-classification-page
    .classification-calm-control small,
    html.theme-light .object-classification-page
    .classification-configuration-heading small,
    html.theme-light .object-classification-page
    .classification-configuration-field > span,
    html.theme-light .object-classification-page
    .classification-configuration-check small,
    html.theme-light .object-classification-page
    .classification-progress-information,
    html.theme-light .object-classification-page
    .classification-current-turn span,
    html.theme-light .object-classification-page
    .classification-question-card p,
    html.theme-light .object-classification-page
    .classification-selected-banner small,
    html.theme-light .object-classification-page
    .classification-selected-banner > span,
    html.theme-light .object-classification-page
    .classification-objects-area header small,
    html.theme-light .object-classification-page
    .classification-buckets-area header small,
    html.theme-light .object-classification-page
    .classification-bucket-heading small,
    html.theme-light .object-classification-page
    .classification-empty-bucket,
    html.theme-light .object-classification-page
    .classification-feedback p,
    html.theme-light .object-classification-page
    .classification-stage-footer,
    html.theme-light .object-classification-page
    .classification-finished-content > p,
    html.theme-light .object-classification-page
    .classification-finished-stats span,
    html.theme-light .object-classification-page
    .classification-finished-leader span {
        color: #697386;
    }

    html.theme-light .object-classification-page
    .classification-stage {
        border-color: rgba(90, 98, 114, 0.18);
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.78), rgba(239, 235, 227, 0.88) );
        box-shadow: 0 26px 65px rgba(70, 65, 57, 0.11);
    }

    html.theme-light .object-classification-page
    .classification-configuration,
    html.theme-light .object-classification-page
    .classification-question-card {
        border-color: rgba(120, 107, 198, 0.22);
        background: linear-gradient( 145deg, rgba(235, 231, 242, 0.74), rgba(241, 237, 230, 0.86) );
    }

    html.theme-light .object-classification-page
    .classification-calm-control,
    html.theme-light .object-classification-page
    .classification-progress-section,
    html.theme-light .object-classification-page
    .classification-objects-area,
    html.theme-light .object-classification-page
    .classification-buckets-area {
        border-color: rgba(90, 98, 114, 0.18);
        background: rgba(239, 235, 227, 0.72);
    }

    html.theme-light .object-classification-page
    .classification-configuration-field select {
        appearance: none;
        -webkit-appearance: none;
        background-color: #f7f4ed;
        color: #273244;
        color-scheme: light;
        border-color: rgba(90, 98, 114, 0.28);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }

        html.theme-light .object-classification-page
        .classification-configuration-field select option {
            background: #f7f4ed;
            color: #273244;
        }

    html.theme-light .object-classification-page
    .classification-configuration-check,
    html.theme-light .object-classification-page
    .classification-object-card,
    html.theme-light .object-classification-page
    .classification-bucket,
    html.theme-light .object-classification-page
    .classification-placed-item,
    html.theme-light .object-classification-page
    .classification-secondary-button {
        border-color: rgba(90, 98, 114, 0.2);
        background: rgba(255, 255, 255, 0.45);
    }

        html.theme-light .object-classification-page
        .classification-object-card.selected {
            border-color: rgba(99, 102, 241, 0.62);
            background: rgba(118, 108, 205, 0.14);
        }

        html.theme-light .object-classification-page
        .classification-bucket.guided {
            border-color: rgba(42, 157, 95, 0.58);
            background: rgba(42, 157, 95, 0.1);
        }

        html.theme-light .object-classification-page
        .classification-bucket.has-errors,
        html.theme-light .object-classification-page
        .classification-placed-item.incorrect {
            border-color: rgba(209, 137, 45, 0.55);
            background: rgba(209, 137, 45, 0.1);
        }

        html.theme-light .object-classification-page
        .classification-bucket.completed,
        html.theme-light .object-classification-page
        .classification-placed-item.correct {
            border-color: rgba(42, 157, 95, 0.48);
            background: rgba(42, 157, 95, 0.09);
        }

    html.theme-light .object-classification-page
    .classification-selected-banner {
        border-color: rgba(118, 108, 205, 0.3);
        background: linear-gradient( 135deg, rgba(226, 221, 240, 0.84), rgba(242, 238, 231, 0.88) );
    }

    html.theme-light .object-classification-page
    .classification-empty-bucket {
        border-color: rgba(90, 98, 114, 0.2);
        background: rgba(255, 255, 255, 0.24);
    }

    html.theme-light .object-classification-page
    .classification-finished-card {
        background: radial-gradient( circle at top, rgba(208, 166, 94, 0.12), transparent 48% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.68), rgba(239, 235, 227, 0.86) );
    }


    /* =========================================================
   CLASIFICA LOS OBJETOS · TABLERO EN MODO CLARO
   ========================================================= */

    html.theme-light .object-classification-page
    .scoreboard-panel {
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.72), rgba(235, 231, 222, 0.9) ) !important;
        border-color: rgba(91, 99, 116, 0.2) !important;
        box-shadow: 0 22px 52px rgba(72, 66, 54, 0.11) !important;
        color: #273244 !important;
    }

    html.theme-light .object-classification-page
    .scoreboard-header h2,
    html.theme-light .object-classification-page
    .ranking-heading h3,
    html.theme-light .object-classification-page
    .empty-scoreboard strong,
    html.theme-light .object-classification-page
    .ranking-player-name strong,
    html.theme-light .object-classification-page
    .active-player-main h3 {
        color: #273244;
    }

    html.theme-light .object-classification-page
    .scoreboard-eyebrow,
    html.theme-light .object-classification-page
    .ranking-heading span:first-child,
    html.theme-light .object-classification-page
    .ranking-count,
    html.theme-light .object-classification-page
    .entry-message {
        color: #6658d9;
    }

    html.theme-light .object-classification-page
    .player-entry label,
    html.theme-light .object-classification-page
    .player-selector-label,
    html.theme-light .object-classification-page
    .manual-score-controls > span,
    html.theme-light .object-classification-page
    .ranking-player-name small,
    html.theme-light .object-classification-page
    .empty-scoreboard p,
    html.theme-light .object-classification-page
    .active-player-main span,
    html.theme-light .object-classification-page
    .active-player-stats span,
    html.theme-light .object-classification-page
    .ranking-position {
        color: #667085;
    }

    html.theme-light .object-classification-page
    .player-entry input {
        background: #f7f4ed !important;
        border-color: rgba(91, 99, 116, 0.26) !important;
        color: #273244 !important;
    }

        html.theme-light .object-classification-page
        .player-entry input::placeholder {
            color: #8a8e96;
        }

        html.theme-light .object-classification-page
        .player-entry input:focus {
            border-color: rgba(102, 88, 217, 0.58);
            box-shadow: 0 0 0 4px rgba(102, 88, 217, 0.11);
        }

    html.theme-light .object-classification-page
    .empty-scoreboard {
        background: rgba(255, 255, 255, 0.34);
        border-color: rgba(91, 99, 116, 0.24);
    }

    html.theme-light .object-classification-page
    .empty-scoreboard-icon {
        background: rgba(102, 88, 217, 0.11);
        color: #6658d9;
    }

    html.theme-light .object-classification-page
    .player-chip {
        background: rgba(255, 255, 255, 0.44);
        border-color: rgba(91, 99, 116, 0.2);
        color: #273244;
    }

        html.theme-light .object-classification-page
        .player-chip.active {
            background: rgba(102, 88, 217, 0.11);
            border-color: rgba(102, 88, 217, 0.42);
            color: #6255c8;
        }

    html.theme-light .object-classification-page
    .active-player-card {
        background: radial-gradient( circle at top right, rgba(102, 88, 217, 0.13), transparent 52% ), #e8e3f0 !important;
        border-color: rgba(102, 88, 217, 0.3) !important;
    }

    html.theme-light .object-classification-page
    .active-player-stats div {
        background: rgba(255, 255, 255, 0.48);
        border: 1px solid rgba(91, 99, 116, 0.12);
    }

    html.theme-light .object-classification-page
    .active-player-stats strong,
    html.theme-light .object-classification-page
    .ranking-score,
    html.theme-light .object-classification-page
    .ranking-player-button {
        color: #273244;
    }

    html.theme-light .object-classification-page
    .manual-score-controls button {
        background: rgba(255, 255, 255, 0.55);
        border-color: rgba(91, 99, 116, 0.2);
        color: #273244;
    }

        html.theme-light .object-classification-page
        .manual-score-controls button:hover {
            background: rgba(102, 88, 217, 0.11);
            border-color: rgba(102, 88, 217, 0.4);
        }

    html.theme-light .object-classification-page
    .ranking-row {
        background: rgba(255, 255, 255, 0.38);
        border-color: rgba(91, 99, 116, 0.19);
    }

        html.theme-light .object-classification-page
        .ranking-row.active {
            background: rgba(102, 88, 217, 0.1);
            border-color: rgba(102, 88, 217, 0.42);
        }

    html.theme-light .object-classification-page
    .secondary-scoreboard-button {
        background: rgba(255, 255, 255, 0.54);
        border-color: rgba(91, 99, 116, 0.2);
        color: #273244;
    }

    html.theme-light .object-classification-page
    .remove-player-button {
        border-left-color: rgba(91, 99, 116, 0.15);
        color: #667085;
    }


    /* =========================================================
   CLASIFICA LOS OBJETOS · SONIDO EN MODO CLARO
   ========================================================= */

    html.theme-light .object-classification-page
    .gamification-sound-settings {
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.66), rgba(232, 227, 240, 0.78) ) !important;
        border-color: rgba(102, 88, 217, 0.2) !important;
        color: #273244;
    }

    html.theme-light .object-classification-page
    .sound-settings-header strong {
        color: #273244;
    }

    html.theme-light .object-classification-page
    .sound-settings-header > div:nth-child(2) span,
    html.theme-light .object-classification-page
    .sound-selector-field > span,
    html.theme-light .object-classification-page
    .sound-volume-field > span {
        color: #667085;
    }

    html.theme-light .object-classification-page
    .sound-settings-icon {
        background: rgba(102, 88, 217, 0.11);
        border-color: rgba(102, 88, 217, 0.24);
        color: #6658d9;
    }

    html.theme-light .object-classification-page
    .sound-selector-row select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: #f7f4ed !important;
        color: #273244 !important;
        color-scheme: light;
        border-color: rgba(90, 98, 114, 0.28) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.65rem center;
        background-size: 13px;
    }

        html.theme-light .object-classification-page
        .sound-selector-row select option {
            background-color: #f7f4ed;
            color: #273244;
        }

            html.theme-light .object-classification-page
            .sound-selector-row select option:checked {
                background-color: #dad4ef;
                color: #2e285f;
            }

        html.theme-light .object-classification-page
        .sound-selector-row select:focus {
            border-color: #7769d8 !important;
            box-shadow: 0 0 0 3px rgba(102, 88, 217, 0.14) !important;
        }

    html.theme-light .object-classification-page
    .sound-selector-row button {
        background: #e6e1f2;
        border-color: rgba(102, 88, 217, 0.26);
        color: #6658d9;
    }

        html.theme-light .object-classification-page
        .sound-selector-row button:hover:not(:disabled) {
            background: #dcd5ef;
            border-color: rgba(102, 88, 217, 0.48);
        }

    html.theme-light .object-classification-page
    .sound-volume-field strong {
        color: #6658d9;
    }

    html.theme-light .object-classification-page
    .sound-volume-field input {
        accent-color: #6658d9;
    }

    /* =========================================================
   CLASIFICA LOS OBJETOS · IDENTIFICADOR EN MODO CLARO
   ========================================================= */

    html.theme-light .object-classification-page
    .classification-back-link {
        color: #6366f1;
    }

    html.theme-light .object-classification-page
    .classification-title-eyebrow {
        color: #6366f1;
    }

    html.theme-light .object-classification-page
    .classification-title-icon {
        border-color: rgba(99, 102, 241, 0.3);
        background: rgba(99, 102, 241, 0.12);
        box-shadow: 0 10px 24px rgba(99, 102, 241, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }

    html.theme-light .object-classification-page
    .classification-title-row h1 {
        color: #1e293b;
    }

    html.theme-light .object-classification-page
    .classification-page-header p {
        color: #64748b;
    }


/* =========================================================
   COMPLETA EL PATRÓN · MODO CLARO BLANCO OSTIÓN
   ========================================================= */

html.theme-light .pattern-game-page {
    --pattern-oyster: #f3f0e8;
    --pattern-soft: #faf8f2;
    --pattern-panel: #ebe7de;
    --pattern-text: #273244;
    --pattern-muted: #667085;
    --pattern-line: rgba(91, 99, 116, 0.2);
    --pattern-purple: #6658d9;
    color: var(--pattern-text);
    background: radial-gradient( circle at 92% 6%, rgba(115, 102, 205, 0.1), transparent 28% ), radial-gradient( circle at 8% 90%, rgba(73, 150, 142, 0.08), transparent 30% ), linear-gradient( 180deg, var(--pattern-soft), var(--pattern-oyster) );
}

    /* =========================================================
   ENCABEZADO
   ========================================================= */

    html.theme-light .pattern-game-page
    .pattern-back-link,
    html.theme-light .pattern-game-page
    .pattern-title-eyebrow {
        color: var(--pattern-purple);
    }

    html.theme-light .pattern-game-page
    .pattern-title-row h1 {
        color: #1e293b;
    }

    html.theme-light .pattern-game-page
    .pattern-title-icon {
        border-color: rgba(102, 88, 217, 0.26);
        background: rgba(102, 88, 217, 0.1);
        box-shadow: 0 10px 24px rgba(99, 102, 241, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.55);
    }

    html.theme-light .pattern-game-page
    .pattern-page-header p,
    html.theme-light .pattern-game-page
    .pattern-calm-control small,
    html.theme-light .pattern-game-page
    .pattern-configuration-heading small,
    html.theme-light .pattern-game-page
    .pattern-configuration-field > span,
    html.theme-light .pattern-game-page
    .pattern-configuration-check small,
    html.theme-light .pattern-game-page
    .pattern-progress-information,
    html.theme-light .pattern-game-page
    .pattern-current-turn span,
    html.theme-light .pattern-game-page
    .pattern-question-card p,
    html.theme-light .pattern-game-page
    .pattern-sequence-area header small,
    html.theme-light .pattern-game-page
    .pattern-options-area header small,
    html.theme-light .pattern-game-page
    .pattern-feedback p,
    html.theme-light .pattern-game-page
    .pattern-stage-footer,
    html.theme-light .pattern-game-page
    .pattern-finished-content > p,
    html.theme-light .pattern-game-page
    .pattern-finished-stats span,
    html.theme-light .pattern-game-page
    .pattern-finished-leader span {
        color: var(--pattern-muted);
    }

    /* =========================================================
   PANEL PRINCIPAL
   ========================================================= */

    html.theme-light .pattern-game-page
    .pattern-stage {
        border-color: var(--pattern-line);
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.78), rgba(239, 235, 227, 0.88) ) !important;
        color: var(--pattern-text);
        box-shadow: 0 26px 65px rgba(70, 65, 57, 0.11);
    }

    html.theme-light .pattern-game-page
    .pattern-configuration,
    html.theme-light .pattern-game-page
    .pattern-question-card {
        border-color: rgba(120, 107, 198, 0.22);
        background: linear-gradient( 145deg, rgba(235, 231, 242, 0.74), rgba(241, 237, 230, 0.86) ) !important;
    }

        html.theme-light .pattern-game-page
        .pattern-question-card h2,
        html.theme-light .pattern-game-page
        .pattern-configuration-heading strong,
        html.theme-light .pattern-game-page
        .pattern-configuration-check strong,
        html.theme-light .pattern-game-page
        .pattern-sequence-area header strong,
        html.theme-light .pattern-game-page
        .pattern-options-area header strong {
            color: var(--pattern-text);
        }

    html.theme-light .pattern-game-page
    .pattern-calm-control,
    html.theme-light .pattern-game-page
    .pattern-progress-section,
    html.theme-light .pattern-game-page
    .pattern-sequence-area,
    html.theme-light .pattern-game-page
    .pattern-options-area {
        border-color: var(--pattern-line);
        background: rgba(239, 235, 227, 0.72);
    }

    /* =========================================================
   SELECTORES Y CONFIGURACIÓN
   ========================================================= */

    html.theme-light .pattern-game-page
    .pattern-configuration-field select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-color: #f7f4ed !important;
        color: var(--pattern-text) !important;
        color-scheme: light;
        border-color: rgba(90, 98, 114, 0.28) !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.65rem center;
        background-size: 13px;
    }

        html.theme-light .pattern-game-page
        .pattern-configuration-field select option {
            background-color: #f7f4ed;
            color: var(--pattern-text);
        }

            html.theme-light .pattern-game-page
            .pattern-configuration-field select option:checked {
                background-color: #dad4ef;
                color: #2e285f;
            }

        html.theme-light .pattern-game-page
        .pattern-configuration-field select:focus {
            border-color: #7769d8 !important;
            box-shadow: 0 0 0 3px rgba(102, 88, 217, 0.14) !important;
        }

    html.theme-light .pattern-game-page
    .pattern-configuration-check {
        border-color: var(--pattern-line);
        background: rgba(255, 255, 255, 0.5);
    }

    /* =========================================================
   PROGRESO Y RONDA
   ========================================================= */

    html.theme-light .pattern-game-page
    .pattern-progress-track {
        background: #d8d3c9;
    }

    html.theme-light .pattern-game-page
    .pattern-progress-value {
        background: linear-gradient( 90deg, #7568d8, #629a88 );
    }

    html.theme-light .pattern-game-page
    .pattern-progress-information strong,
    html.theme-light .pattern-game-page
    .pattern-round-number strong {
        color: #6255c8;
    }

    html.theme-light .pattern-game-page
    .pattern-round-number {
        background: rgba(222, 216, 204, 0.52);
    }

    html.theme-light .pattern-game-page
    .pattern-current-turn.waiting strong {
        color: #a76711;
    }

    /* =========================================================
   ADVERTENCIA SIN PARTICIPANTE
   ========================================================= */

    html.theme-light .pattern-game-page
    .pattern-no-player {
        border-color: rgba(190, 124, 48, 0.38);
        background: #f4ead7;
    }

        html.theme-light .pattern-game-page
        .pattern-no-player strong {
            color: #59401f;
        }

        html.theme-light .pattern-game-page
        .pattern-no-player p {
            color: #796344;
        }

    /* =========================================================
   SERIE DEL PATRÓN
   ========================================================= */

    html.theme-light .pattern-game-page
    .pattern-sequence-element {
        border-color: rgba(91, 99, 116, 0.2);
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.76), rgba(235, 231, 222, 0.82) );
        color: var(--pattern-text);
    }

    html.theme-light .pattern-game-page
    .pattern-missing-slot {
        border-color: rgba(102, 88, 217, 0.48);
        background: radial-gradient( circle at center, rgba(102, 88, 217, 0.13), transparent 72% ), rgba(232, 227, 240, 0.78);
        color: #6255c8;
    }

    html.theme-light .pattern-game-page
    .pattern-missing-symbol {
        background: rgba(102, 88, 217, 0.13);
        color: #6255c8;
    }

    html.theme-light .pattern-game-page
    .pattern-missing-slot.completed {
        border-color: rgba(42, 157, 95, 0.52);
        background: #deeee3;
        color: var(--pattern-text);
    }

    /* =========================================================
   OPCIONES
   ========================================================= */

    html.theme-light .pattern-game-page
    .pattern-option-card {
        border-color: rgba(91, 99, 116, 0.22);
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.76), rgba(235, 231, 222, 0.82) );
        color: var(--pattern-text);
        box-shadow: 0 10px 24px rgba(70, 65, 55, 0.07);
    }

        html.theme-light .pattern-game-page
        .pattern-option-card:not(:disabled):hover {
            border-color: rgba(102, 88, 217, 0.52);
            background: #e7e2f2;
        }

        html.theme-light .pattern-game-page
        .pattern-option-card.correct {
            border-color: rgba(64, 139, 91, 0.6);
            background: #deeee3;
        }

        html.theme-light .pattern-game-page
        .pattern-option-card.incorrect {
            border-color: rgba(190, 124, 48, 0.55);
            background: #f4e8d6;
        }

        html.theme-light .pattern-game-page
        .pattern-option-card.guided {
            border-color: rgba(61, 143, 112, 0.48);
            background: #e0eee5;
        }

        html.theme-light .pattern-game-page
        .pattern-option-card.muted {
            opacity: 0.52;
        }

    html.theme-light .pattern-game-page
    .pattern-option-guide {
        background: rgba(61, 143, 112, 0.13);
        color: #338264;
    }

    /* =========================================================
   RETROALIMENTACIÓN
   ========================================================= */

    html.theme-light .pattern-game-page
    .pattern-feedback.correct {
        border-color: rgba(61, 143, 112, 0.28);
        background: rgba(222, 240, 232, 0.82);
    }

    html.theme-light .pattern-game-page
    .pattern-feedback.incorrect {
        border-color: rgba(190, 124, 48, 0.3);
        background: #f4ead7;
    }

    html.theme-light .pattern-game-page
    .pattern-feedback-icon {
        background: rgba(255, 255, 255, 0.56);
    }

    html.theme-light .pattern-game-page
    .pattern-feedback strong {
        color: var(--pattern-text);
    }

    /* =========================================================
   FINAL DE PARTIDA
   ========================================================= */

    html.theme-light .pattern-game-page
    .pattern-finished-card {
        border-color: rgba(190, 145, 72, 0.28);
        background: radial-gradient( circle at top, rgba(208, 166, 94, 0.12), transparent 48% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.68), rgba(239, 235, 227, 0.86) ) !important;
    }

    html.theme-light .pattern-game-page
    .pattern-finished-content h2 {
        color: var(--pattern-text);
    }

    html.theme-light .pattern-game-page
    .pattern-finished-stats div {
        border-color: rgba(91, 99, 116, 0.17);
        background: rgba(255, 255, 255, 0.42);
    }

    html.theme-light .pattern-game-page
    .pattern-finished-stats strong {
        color: #6255c8;
    }

    /* =========================================================
   COMPLETA EL PATRÓN · TABLERO EN MODO CLARO
   ========================================================= */

    html.theme-light .pattern-game-page
    .scoreboard-panel {
        border-color: var(--pattern-line) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.72), rgba(235, 231, 222, 0.9) ) !important;
        color: var(--pattern-text) !important;
        box-shadow: 0 22px 52px rgba(72, 66, 54, 0.11) !important;
    }

    html.theme-light .pattern-game-page
    .scoreboard-header h2,
    html.theme-light .pattern-game-page
    .ranking-heading h3,
    html.theme-light .pattern-game-page
    .empty-scoreboard strong,
    html.theme-light .pattern-game-page
    .ranking-player-name strong,
    html.theme-light .pattern-game-page
    .active-player-main h3 {
        color: var(--pattern-text);
    }

    html.theme-light .pattern-game-page
    .player-entry label,
    html.theme-light .pattern-game-page
    .player-selector-label,
    html.theme-light .pattern-game-page
    .manual-score-controls > span,
    html.theme-light .pattern-game-page
    .ranking-player-name small,
    html.theme-light .pattern-game-page
    .empty-scoreboard p,
    html.theme-light .pattern-game-page
    .active-player-main span,
    html.theme-light .pattern-game-page
    .active-player-stats span,
    html.theme-light .pattern-game-page
    .ranking-position {
        color: var(--pattern-muted);
    }

    html.theme-light .pattern-game-page
    .player-entry input {
        border-color: rgba(91, 99, 116, 0.26) !important;
        background: #f7f4ed !important;
        color: var(--pattern-text) !important;
    }

        html.theme-light .pattern-game-page
        .player-entry input::placeholder {
            color: #8a8e96;
        }

    html.theme-light .pattern-game-page
    .empty-scoreboard {
        border-color: rgba(91, 99, 116, 0.24);
        background: rgba(255, 255, 255, 0.34);
    }

    html.theme-light .pattern-game-page
    .empty-scoreboard-icon {
        background: rgba(102, 88, 217, 0.11);
        color: var(--pattern-purple);
    }

    html.theme-light .pattern-game-page
    .player-chip {
        border-color: var(--pattern-line);
        background: rgba(255, 255, 255, 0.44);
        color: var(--pattern-text);
    }

        html.theme-light .pattern-game-page
        .player-chip.active {
            border-color: rgba(102, 88, 217, 0.42);
            background: rgba(102, 88, 217, 0.11);
            color: #6255c8;
        }

    html.theme-light .pattern-game-page
    .active-player-card {
        border-color: rgba(102, 88, 217, 0.3) !important;
        background: radial-gradient( circle at top right, rgba(102, 88, 217, 0.13), transparent 52% ), #e8e3f0 !important;
    }

    html.theme-light .pattern-game-page
    .active-player-stats div {
        border: 1px solid rgba(91, 99, 116, 0.12);
        background: rgba(255, 255, 255, 0.48);
    }

    html.theme-light .pattern-game-page
    .active-player-stats strong,
    html.theme-light .pattern-game-page
    .ranking-score,
    html.theme-light .pattern-game-page
    .ranking-player-button,
    html.theme-light .pattern-game-page
    .manual-score-controls button {
        color: var(--pattern-text);
    }

    html.theme-light .pattern-game-page
    .manual-score-controls button {
        border-color: var(--pattern-line);
        background: rgba(255, 255, 255, 0.55);
    }

    html.theme-light .pattern-game-page
    .ranking-row {
        border-color: rgba(91, 99, 116, 0.19);
        background: rgba(255, 255, 255, 0.38);
    }

        html.theme-light .pattern-game-page
        .ranking-row.active {
            border-color: rgba(102, 88, 217, 0.42);
            background: rgba(102, 88, 217, 0.1);
        }

    html.theme-light .pattern-game-page
    .secondary-scoreboard-button {
        border-color: var(--pattern-line);
        background: rgba(255, 255, 255, 0.54);
        color: var(--pattern-text);
    }

    /* =========================================================
   COMPLETA EL PATRÓN · SONIDO EN MODO CLARO
   ========================================================= */

    html.theme-light .pattern-game-page
    .gamification-sound-settings {
        border-color: rgba(102, 88, 217, 0.2) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.66), rgba(232, 227, 240, 0.78) ) !important;
        color: var(--pattern-text);
    }

    html.theme-light .pattern-game-page
    .sound-settings-header strong {
        color: var(--pattern-text);
    }

    html.theme-light .pattern-game-page
    .sound-settings-header > div:nth-child(2) span,
    html.theme-light .pattern-game-page
    .sound-selector-field > span,
    html.theme-light .pattern-game-page
    .sound-volume-field > span {
        color: var(--pattern-muted);
    }

    html.theme-light .pattern-game-page
    .sound-settings-icon {
        border-color: rgba(102, 88, 217, 0.24);
        background: rgba(102, 88, 217, 0.11);
        color: var(--pattern-purple);
    }

    html.theme-light .pattern-game-page
    .sound-selector-row select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border-color: rgba(90, 98, 114, 0.28) !important;
        background-color: #f7f4ed !important;
        color: var(--pattern-text) !important;
        color-scheme: light;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.65rem center;
        background-size: 13px;
    }

        html.theme-light .pattern-game-page
        .sound-selector-row select option {
            background-color: #f7f4ed;
            color: var(--pattern-text);
        }

            html.theme-light .pattern-game-page
            .sound-selector-row select option:checked {
                background-color: #dad4ef;
                color: #2e285f;
            }

        html.theme-light .pattern-game-page
        .sound-selector-row select:focus {
            border-color: #7769d8 !important;
            box-shadow: 0 0 0 3px rgba(102, 88, 217, 0.14) !important;
        }

    html.theme-light .pattern-game-page
    .sound-selector-row button {
        border-color: rgba(102, 88, 217, 0.26);
        background: #e6e1f2;
        color: var(--pattern-purple);
    }

        html.theme-light .pattern-game-page
        .sound-selector-row button:hover:not(:disabled) {
            border-color: rgba(102, 88, 217, 0.48);
            background: #dcd5ef;
        }

    html.theme-light .pattern-game-page
    .sound-volume-field strong {
        color: var(--pattern-purple);
    }

    html.theme-light .pattern-game-page
    .sound-volume-field input {
        accent-color: var(--pattern-purple);
    }

/* =========================================================
   CATÁLOGO DE JUEGOS · TRES TARJETAS POR FILA
   ========================================================= */

.gamification-games-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
}

    .gamification-games-grid .gamification-game-card {
        grid-column: span 2;
    }

        /*
   Cuando la última fila contiene solamente dos tarjetas,
   desplaza la primera una columna para centrar ambas.
*/
        .gamification-games-grid
        .gamification-game-card:nth-last-child(2):nth-child(3n + 1) {
            grid-column: 2 / span 2;
        }



/* =========================================================
   MEMORAMA · VISTA PREVIA EN EL CATÁLOGO
   ========================================================= */

.memory-catalog-preview {
    display: grid;
    grid-template-columns: repeat(2, 58px);
    grid-template-rows: repeat(2, 64px);
    gap: 0.55rem;
}

.memory-preview-card {
    display: grid;
    width: 58px;
    height: 64px;
    place-items: center;
    border: 1px solid rgba(129, 140, 248, 0.28);
    border-radius: 15px;
    box-shadow: 0 9px 20px rgba(15, 23, 42, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-size: 1.55rem;
    font-weight: 900;
    transition: transform 180ms ease, border-color 180ms ease;
}

    .memory-preview-card.is-revealed {
        background: radial-gradient( circle at top, rgba(56, 189, 248, 0.15), transparent 65% ), rgba(255, 255, 255, 0.08);
    }

    .memory-preview-card.is-hidden {
        background: radial-gradient( circle at 30% 20%, rgba(56, 189, 248, 0.17), transparent 42% ), linear-gradient( 145deg, rgba(49, 46, 129, 0.92), rgba(30, 41, 59, 0.96) );
        color: #c4b5fd;
    }

    .memory-preview-card:nth-child(1) {
        transform: rotate(-3deg);
    }

    .memory-preview-card:nth-child(2) {
        transform: rotate(2deg);
    }

    .memory-preview-card:nth-child(3) {
        transform: rotate(2deg);
    }

    .memory-preview-card:nth-child(4) {
        transform: rotate(-2deg);
    }

.gamification-game-card:hover
.memory-preview-card:nth-child(1) {
    transform: translateY(-3px) rotate(-3deg);
}

.gamification-game-card:hover
.memory-preview-card:nth-child(2) {
    transform: translateY(-3px) rotate(2deg);
}

.gamification-game-card:hover
.memory-preview-card:nth-child(3) {
    transform: translateY(-3px) rotate(2deg);
}

.gamification-game-card:hover
.memory-preview-card:nth-child(4) {
    transform: translateY(-3px) rotate(-2deg);
}

/* =========================================================
   CATÁLOGO DE JUEGOS · RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
    .gamification-games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .gamification-games-grid .gamification-game-card,
        .gamification-games-grid
        .gamification-game-card:nth-last-child(2):nth-child(3n + 1) {
            grid-column: auto;
        }

            /*
       Con una cantidad impar, centra la última tarjeta
       en pantallas de dos columnas.
    */
            .gamification-games-grid
            .gamification-game-card:last-child:nth-child(odd) {
                grid-column: 1 / -1;
                width: calc((100% - 1.15rem) / 2);
                justify-self: center;
            }
}

@media (max-width: 680px) {
    .gamification-games-grid {
        grid-template-columns: 1fr;
    }

        .gamification-games-grid .gamification-game-card,
        .gamification-games-grid
        .gamification-game-card:nth-last-child(2):nth-child(3n + 1),
        .gamification-games-grid
        .gamification-game-card:last-child:nth-child(odd) {
            grid-column: auto;
            width: 100%;
        }

    .memory-catalog-preview {
        grid-template-columns: repeat(2, 54px);
        grid-template-rows: repeat(2, 59px);
        gap: 0.48rem;
    }

    .memory-preview-card {
        width: 54px;
        height: 59px;
        border-radius: 14px;
        font-size: 1.42rem;
    }
}

/* =========================================================
   MEMORAMA ADAPTADO · MODO CLARO BLANCO OSTIÓN
   Mesa de madera + cartas hueso y naranja suave
   ========================================================= */

html.theme-light .memory-game-page {
    --memory-oyster: #f3f0e8;
    --memory-oyster-soft: #faf8f2;
    --memory-panel: #ebe7de;
    --memory-panel-deep: #ddd6c9;
    --memory-text: #273244;
    --memory-muted: #697386;
    --memory-line: rgba(91, 99, 116, 0.2);
    --memory-purple: #6658d9;
    --memory-purple-soft: rgba(102, 88, 217, 0.11);
    --memory-wood-light: #c78d46;
    --memory-wood: #ad713b;
    --memory-wood-deep: #89552f;
    --memory-card-hidden: #d99652;
    --memory-card-hidden-deep: #bd7137;
    --memory-bone: #f4efe4;
    --memory-bone-deep: #e5dac7;
    color: var(--memory-text);
    background: radial-gradient( circle at 92% 7%, rgba(112, 99, 205, 0.1), transparent 28% ), radial-gradient( circle at 7% 90%, rgba(74, 149, 142, 0.08), transparent 30% ), linear-gradient( 180deg, var(--memory-oyster-soft), var(--memory-oyster) );
}

    /* =========================================================
   FONDO Y ENCABEZADO
   ========================================================= */

    html.theme-light .memory-game-page
    .memory-shape-one {
        background: rgba(102, 88, 217, 0.08);
    }

    html.theme-light .memory-game-page
    .memory-shape-two {
        background: rgba(73, 150, 142, 0.07);
    }

    html.theme-light .memory-game-page
    .memory-back-link,
    html.theme-light .memory-game-page
    .memory-title-eyebrow,
    html.theme-light .memory-game-page
    .memory-section-eyebrow {
        color: var(--memory-purple);
    }

    html.theme-light .memory-game-page
    .memory-title-row h1 {
        color: #202938;
    }

    html.theme-light .memory-game-page
    .memory-page-header > div > p {
        color: var(--memory-muted);
    }

    html.theme-light .memory-game-page
    .memory-title-icon {
        border-color: rgba(102, 88, 217, 0.27);
        background: linear-gradient( 145deg, rgba(102, 88, 217, 0.12), rgba(102, 88, 217, 0.06) );
        color: #6256c4;
        box-shadow: 0 10px 24px rgba(90, 75, 160, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

        html.theme-light .memory-game-page
        .memory-title-icon span {
            border: 1px solid rgba(102, 88, 217, 0.13);
            background: rgba(255, 255, 255, 0.55);
        }

    /* =========================================================
   ESTÍMULOS REDUCIDOS
   ========================================================= */

    html.theme-light .memory-game-page
    .memory-calm-control {
        border-color: var(--memory-line);
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.64), rgba(235, 231, 222, 0.78) );
    }

        html.theme-light .memory-game-page
        .memory-calm-control strong {
            color: var(--memory-text);
        }

        html.theme-light .memory-game-page
        .memory-calm-control small {
            color: var(--memory-muted);
        }

    html.theme-light .memory-game-page
    .memory-calm-switch {
        background: #cec7bb;
    }

    html.theme-light .memory-game-page
    .memory-calm-control input:checked +
    .memory-calm-switch {
        background: var(--memory-purple);
    }

    /* =========================================================
   PANEL PRINCIPAL
   ========================================================= */

    html.theme-light .memory-game-page
    .memory-stage {
        border-color: var(--memory-line);
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.76), rgba(239, 235, 227, 0.9) ) !important;
        color: var(--memory-text);
        box-shadow: 0 26px 65px rgba(70, 65, 57, 0.11);
    }

    /* =========================================================
   CONFIGURACIÓN
   ========================================================= */

    html.theme-light .memory-game-page
    .memory-configuration-card {
        border-color: rgba(102, 88, 217, 0.21);
        background: linear-gradient( 145deg, rgba(235, 231, 242, 0.75), rgba(241, 237, 230, 0.88) );
    }

    html.theme-light .memory-game-page
    .memory-configuration-heading h2,
    html.theme-light .memory-game-page
    .memory-option-control strong {
        color: var(--memory-text);
    }

    html.theme-light .memory-game-page
    .memory-configuration-heading small,
    html.theme-light .memory-game-page
    .memory-field > span,
    html.theme-light .memory-game-page
    .memory-option-control small {
        color: var(--memory-muted);
    }

    html.theme-light .memory-game-page
    .memory-field select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border-color: rgba(90, 98, 114, 0.28);
        background-color: #f7f4ed;
        color: var(--memory-text);
        color-scheme: light;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.65rem center;
        background-size: 13px;
    }

        html.theme-light .memory-game-page
        .memory-field select option {
            background: #f7f4ed;
            color: var(--memory-text);
        }

            html.theme-light .memory-game-page
            .memory-field select option:checked {
                background: #dad4ef;
                color: #2e285f;
            }

        html.theme-light .memory-game-page
        .memory-field select:focus {
            border-color: #7769d8;
            box-shadow: 0 0 0 3px rgba(102, 88, 217, 0.14);
        }

    html.theme-light .memory-game-page
    .memory-option-control {
        border-color: var(--memory-line);
        background: rgba(255, 255, 255, 0.48);
    }

    html.theme-light .memory-game-page
    .memory-option-check {
        border-color: rgba(90, 98, 114, 0.3);
        background: #f8f5ee;
    }

    /* =========================================================
   PROGRESO
   ========================================================= */

    html.theme-light .memory-game-page
    .memory-progress-card {
        border-color: var(--memory-line);
        background: rgba(235, 231, 222, 0.7);
    }

    html.theme-light .memory-game-page
    .memory-progress-heading span,
    html.theme-light .memory-game-page
    .memory-progress-stats span {
        color: var(--memory-muted);
    }

    html.theme-light .memory-game-page
    .memory-progress-heading strong {
        color: var(--memory-text);
    }

    html.theme-light .memory-game-page
    .memory-progress-stats strong {
        color: #6255c8;
    }

    html.theme-light .memory-game-page
    .memory-progress-track {
        background: #d4cec2;
    }

        html.theme-light .memory-game-page
        .memory-progress-track span {
            background: linear-gradient( 90deg, #7568d8, #629a88 );
        }

    /* =========================================================
   TABLERO TIPO MESA DE MADERA
   ========================================================= */

    html.theme-light .memory-game-page
    .memory-board-section {
        border-color: rgba(100, 61, 29, 0.34);
        background: linear-gradient( rgba(255, 255, 255, 0.08), rgba(74, 38, 17, 0.08) ), repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.055) 0, rgba(255, 255, 255, 0.055) 1px, transparent 1px, transparent 78px ), repeating-linear-gradient( 4deg, transparent 0, transparent 34px, rgba(92, 51, 24, 0.075) 35px, transparent 37px ), linear-gradient( 135deg, var(--memory-wood-light), var(--memory-wood) 52%, var(--memory-wood-deep) );
        color: #352416;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -14px 32px rgba(80, 42, 18, 0.11), 0 18px 44px rgba(83, 49, 24, 0.16);
    }

    html.theme-light .memory-game-page
    .memory-board-heading h2 {
        color: #342316;
    }

    html.theme-light .memory-game-page
    .memory-board-heading
    .memory-section-eyebrow {
        color: #533318;
    }

    html.theme-light .memory-game-page
    .memory-preview-badge {
        border-color: rgba(78, 44, 20, 0.25);
        background: rgba(249, 238, 218, 0.76);
        color: #59371b;
        box-shadow: 0 5px 14px rgba(85, 48, 22, 0.1);
    }

    /* =========================================================
   CARTA OCULTA · NARANJA SUAVE
   ========================================================= */

    html.theme-light .memory-game-page
    .memory-card-back {
        border-color: rgba(111, 61, 23, 0.38);
        background: radial-gradient( circle at 28% 18%, rgba(255, 244, 220, 0.28), transparent 39% ), linear-gradient( 145deg, var(--memory-card-hidden), var(--memory-card-hidden-deep) );
        box-shadow: inset 0 0 0 4px rgba(255, 246, 228, 0.08), inset 0 -10px 18px rgba(104, 49, 16, 0.09), 0 10px 20px rgba(72, 39, 18, 0.17);
    }

        html.theme-light .memory-game-page
        .memory-card-back::before {
            border-color: rgba(255, 238, 208, 0.28);
        }

        html.theme-light .memory-game-page
        .memory-card-back > span {
            border-color: rgba(255, 240, 216, 0.34);
            background: rgba(117, 61, 24, 0.17);
            color: #fff1db;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
        }

    /* =========================================================
   CARTA REVELADA · BLANCO HUESO
   ========================================================= */

    html.theme-light .memory-game-page
    .memory-card-front {
        border-color: rgba(108, 84, 56, 0.27);
        background: radial-gradient( circle at top, rgba(255, 255, 255, 0.76), transparent 58% ), linear-gradient( 145deg, var(--memory-bone), var(--memory-bone-deep) );
        color: var(--memory-text);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), inset 0 -8px 18px rgba(103, 79, 49, 0.06), 0 10px 22px rgba(73, 48, 25, 0.14);
    }

    html.theme-light .memory-game-page
    .memory-card-label {
        color: #3d352b;
    }

    html.theme-light .memory-game-page
    .memory-card.is-preview
    .memory-card-front {
        border-color: rgba(121, 81, 36, 0.43);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 3px rgba(244, 226, 192, 0.35), 0 10px 22px rgba(73, 48, 25, 0.14);
    }

    /* =========================================================
   PAREJA ENCONTRADA
   ========================================================= */

    html.theme-light .memory-game-page
    .memory-card.is-matched
    .memory-card-front {
        border-color: rgba(65, 137, 88, 0.5);
        background: radial-gradient( circle at center, rgba(71, 151, 99, 0.12), transparent 72% ), linear-gradient( 145deg, #edf3e9, #dce8d8 );
        box-shadow: inset 0 0 24px rgba(49, 135, 82, 0.08), 0 0 0 2px rgba(49, 135, 82, 0.07), 0 9px 19px rgba(62, 83, 57, 0.11);
    }

    /* =========================================================
   RETROALIMENTACIÓN
   ========================================================= */

    html.theme-light .memory-game-page
    .memory-feedback.is-correct {
        border-color: rgba(61, 143, 112, 0.28);
        background: rgba(222, 240, 232, 0.83);
    }

    html.theme-light .memory-game-page
    .memory-feedback.is-incorrect {
        border-color: rgba(190, 124, 48, 0.3);
        background: #f4ead7;
    }

    html.theme-light .memory-game-page
    .memory-feedback-icon {
        background: rgba(255, 255, 255, 0.56);
        color: #354052;
    }

    html.theme-light .memory-game-page
    .memory-feedback strong {
        color: var(--memory-text);
    }

    html.theme-light .memory-game-page
    .memory-feedback div > span {
        color: var(--memory-muted);
    }

    /* =========================================================
   PANTALLAS DE FINAL
   ========================================================= */

    html.theme-light .memory-game-page
    .memory-round-completed,
    html.theme-light .memory-game-page
    .memory-finished-card {
        border-color: rgba(181, 132, 61, 0.29);
        background: radial-gradient( circle at top, rgba(208, 166, 94, 0.13), transparent 48% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.71), rgba(239, 235, 227, 0.89) );
    }

        html.theme-light .memory-game-page
        .memory-round-completed h2,
        html.theme-light .memory-game-page
        .memory-finished-card h2 {
            color: var(--memory-text);
        }

        html.theme-light .memory-game-page
        .memory-round-completed p,
        html.theme-light .memory-game-page
        .memory-finished-card p {
            color: var(--memory-muted);
        }

    html.theme-light .memory-game-page
    .memory-finished-summary > div {
        border-color: rgba(91, 99, 116, 0.17);
        background: rgba(255, 255, 255, 0.46);
    }

    html.theme-light .memory-game-page
    .memory-finished-summary strong {
        color: #6255c8;
    }

    html.theme-light .memory-game-page
    .memory-finished-summary span {
        color: var(--memory-muted);
    }

    /* =========================================================
   RETO DESBLOQUEADO
   ========================================================= */

    html.theme-light .memory-game-page
    .memory-challenge-unlock {
        border-color: rgba(188, 135, 49, 0.36);
        background: radial-gradient( circle at 50% 8%, rgba(218, 164, 71, 0.2), transparent 46% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.73), rgba(237, 230, 217, 0.91) );
        color: var(--memory-text);
        box-shadow: 0 26px 65px rgba(97, 69, 34, 0.14);
    }

        html.theme-light .memory-game-page
        .memory-challenge-unlock h2 {
            color: var(--memory-text);
        }

        html.theme-light .memory-game-page
        .memory-challenge-unlock p {
            color: var(--memory-muted);
        }

    html.theme-light .memory-game-page
    .memory-challenge-score {
        border-color: rgba(188, 135, 49, 0.24);
        background: rgba(216, 166, 79, 0.1);
    }

        html.theme-light .memory-game-page
        .memory-challenge-score strong {
            color: #9a641b;
        }

    /* =========================================================
   SCOREBOARD · MODO CLARO
   ========================================================= */

    html.theme-light .memory-game-page
    .scoreboard-panel {
        border-color: var(--memory-line) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.74), rgba(235, 231, 222, 0.91) ) !important;
        color: var(--memory-text) !important;
        box-shadow: 0 22px 52px rgba(72, 66, 54, 0.11) !important;
    }

    html.theme-light .memory-game-page
    .scoreboard-header h2,
    html.theme-light .memory-game-page
    .ranking-heading h3,
    html.theme-light .memory-game-page
    .empty-scoreboard strong,
    html.theme-light .memory-game-page
    .ranking-player-name strong,
    html.theme-light .memory-game-page
    .active-player-main h3 {
        color: var(--memory-text);
    }

    html.theme-light .memory-game-page
    .player-entry label,
    html.theme-light .memory-game-page
    .player-selector-label,
    html.theme-light .memory-game-page
    .manual-score-controls > span,
    html.theme-light .memory-game-page
    .ranking-player-name small,
    html.theme-light .memory-game-page
    .empty-scoreboard p,
    html.theme-light .memory-game-page
    .active-player-main span,
    html.theme-light .memory-game-page
    .active-player-stats span,
    html.theme-light .memory-game-page
    .ranking-position {
        color: var(--memory-muted);
    }

    html.theme-light .memory-game-page
    .player-entry input {
        border-color: rgba(91, 99, 116, 0.26) !important;
        background: #f7f4ed !important;
        color: var(--memory-text) !important;
    }

        html.theme-light .memory-game-page
        .player-entry input::placeholder {
            color: #8a8e96;
        }

    html.theme-light .memory-game-page
    .player-chip {
        border-color: var(--memory-line);
        background: rgba(255, 255, 255, 0.46);
        color: var(--memory-text);
    }

        html.theme-light .memory-game-page
        .player-chip.active {
            border-color: rgba(102, 88, 217, 0.42);
            background: rgba(102, 88, 217, 0.11);
            color: #6255c8;
        }

    html.theme-light .memory-game-page
    .active-player-card {
        border-color: rgba(102, 88, 217, 0.3) !important;
        background: radial-gradient( circle at top right, rgba(102, 88, 217, 0.13), transparent 52% ), #e8e3f0 !important;
    }

    html.theme-light .memory-game-page
    .active-player-stats div {
        border: 1px solid rgba(91, 99, 116, 0.12);
        background: rgba(255, 255, 255, 0.49);
    }

    html.theme-light .memory-game-page
    .active-player-stats strong,
    html.theme-light .memory-game-page
    .ranking-score,
    html.theme-light .memory-game-page
    .ranking-player-button,
    html.theme-light .memory-game-page
    .manual-score-controls button {
        color: var(--memory-text);
    }

    html.theme-light .memory-game-page
    .manual-score-controls button {
        border-color: var(--memory-line);
        background: rgba(255, 255, 255, 0.56);
    }

    html.theme-light .memory-game-page
    .ranking-row {
        border-color: rgba(91, 99, 116, 0.19);
        background: rgba(255, 255, 255, 0.4);
    }

        html.theme-light .memory-game-page
        .ranking-row.active {
            border-color: rgba(102, 88, 217, 0.42);
            background: rgba(102, 88, 217, 0.1);
        }

    html.theme-light .memory-game-page
    .empty-scoreboard {
        border-color: rgba(91, 99, 116, 0.24);
        background: rgba(255, 255, 255, 0.35);
    }

    html.theme-light .memory-game-page
    .secondary-scoreboard-button {
        border-color: var(--memory-line);
        background: rgba(255, 255, 255, 0.55);
        color: var(--memory-text);
    }

    /* =========================================================
   CONFIGURACIÓN DE SONIDO · MODO CLARO
   ========================================================= */

    html.theme-light .memory-game-page
    .gamification-sound-settings {
        border-color: rgba(102, 88, 217, 0.2) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.67), rgba(232, 227, 240, 0.79) ) !important;
        color: var(--memory-text);
    }

    html.theme-light .memory-game-page
    .sound-settings-header strong {
        color: var(--memory-text);
    }

    html.theme-light .memory-game-page
    .sound-settings-header > div:nth-child(2) span,
    html.theme-light .memory-game-page
    .sound-selector-field > span,
    html.theme-light .memory-game-page
    .sound-volume-field > span {
        color: var(--memory-muted);
    }

    html.theme-light .memory-game-page
    .sound-settings-icon {
        border-color: rgba(102, 88, 217, 0.24);
        background: rgba(102, 88, 217, 0.11);
        color: var(--memory-purple);
    }

    html.theme-light .memory-game-page
    .sound-selector-row select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        border-color: rgba(90, 98, 114, 0.28) !important;
        background-color: #f7f4ed !important;
        color: var(--memory-text) !important;
        color-scheme: light;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.65rem center;
        background-size: 13px;
    }

        html.theme-light .memory-game-page
        .sound-selector-row select option {
            background: #f7f4ed;
            color: var(--memory-text);
        }

            html.theme-light .memory-game-page
            .sound-selector-row select option:checked {
                background: #dad4ef;
                color: #2e285f;
            }

    html.theme-light .memory-game-page
    .sound-selector-row button {
        border-color: rgba(102, 88, 217, 0.26);
        background: #e6e1f2;
        color: var(--memory-purple);
    }

    html.theme-light .memory-game-page
    .sound-volume-field strong {
        color: var(--memory-purple);
    }

    html.theme-light .memory-game-page
    .sound-volume-field input {
        accent-color: var(--memory-purple);
    }

/* =========================================================
   ENCUENTRA EL INTRUSO · MODO CLARO
   ========================================================= */

html.theme-light .odd-one-out-page {
    color: #273244;
    background: radial-gradient( circle at 10% 8%, rgba(20, 184, 166, 0.09), transparent 31% ), radial-gradient( circle at 90% 18%, rgba(99, 102, 241, 0.08), transparent 32% ), #f4f1e9;
}

    html.theme-light .odd-one-out-page
    .odd-title-row h1 {
        color: #202938;
    }

    html.theme-light .odd-one-out-page
    .odd-page-header > div:first-child > p,
    html.theme-light .odd-one-out-page
    .odd-configuration-heading small,
    html.theme-light .odd-one-out-page
    .odd-question-heading p,
    html.theme-light .odd-one-out-page
    .odd-feedback p,
    html.theme-light .odd-one-out-page
    .odd-introduction-card p,
    html.theme-light .odd-one-out-page
    .odd-finished-content > p {
        color: #687386;
    }

    html.theme-light .odd-one-out-page
    .odd-back-link,
    html.theme-light .odd-one-out-page
    .odd-title-eyebrow,
    html.theme-light .odd-one-out-page
    .odd-question-label,
    html.theme-light .odd-one-out-page
    .odd-stage-footer strong {
        color: #087f73;
    }

    html.theme-light .odd-one-out-page
    .odd-stage {
        border-color: rgba(91, 99, 116, 0.19);
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.75), rgba(235, 231, 222, 0.9) );
        box-shadow: 0 25px 62px rgba(72, 66, 54, 0.11);
    }

    html.theme-light .odd-one-out-page
    .odd-configuration {
        border-color: rgba(13, 148, 136, 0.22);
        background: radial-gradient( circle at top right, rgba(20, 184, 166, 0.09), transparent 43% ), rgba(229, 238, 232, 0.75);
    }

    html.theme-light .odd-one-out-page
    .odd-configuration-heading h2,
    html.theme-light .odd-one-out-page
    .odd-question-heading h2,
    html.theme-light .odd-one-out-page
    .odd-feedback strong,
    html.theme-light .odd-one-out-page
    .odd-introduction-card h2,
    html.theme-light .odd-one-out-page
    .odd-finished-content h2 {
        color: #273244;
    }

    html.theme-light .odd-one-out-page
    .odd-field > span,
    html.theme-light .odd-one-out-page
    .odd-option-control small,
    html.theme-light .odd-one-out-page
    .odd-progress-information span,
    html.theme-light .odd-one-out-page
    .odd-progress-stats span,
    html.theme-light .odd-one-out-page
    .odd-stage-footer {
        color: #687386;
    }

    html.theme-light .odd-one-out-page
    .odd-field select {
        border-color: rgba(91, 99, 116, 0.27);
        background-color: #f7f4ed;
        color: #273244;
        color-scheme: light;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }

        html.theme-light .odd-one-out-page
        .odd-field select option {
            background: #f7f4ed;
            color: #273244;
        }

    html.theme-light .odd-one-out-page
    .odd-option-control,
    html.theme-light .odd-one-out-page
    .odd-calm-control {
        border-color: rgba(91, 99, 116, 0.18);
        background: rgba(255, 255, 255, 0.5);
    }

        html.theme-light .odd-one-out-page
        .odd-option-control strong,
        html.theme-light .odd-one-out-page
        .odd-calm-control strong {
            color: #273244;
        }

    html.theme-light .odd-one-out-page
    .odd-option-check {
        border-color: rgba(91, 99, 116, 0.32);
        background: #f8f5ee;
    }

    html.theme-light .odd-one-out-page
    .odd-progress-section {
        border-color: rgba(91, 99, 116, 0.16);
        background: rgba(225, 222, 214, 0.7);
    }

    html.theme-light .odd-one-out-page
    .odd-progress-track {
        background: #d1cbc0;
    }

    html.theme-light .odd-one-out-page
    .odd-no-player-warning {
        border-color: rgba(190, 124, 48, 0.27);
        background: #f5ead5;
    }

        html.theme-light .odd-one-out-page
        .odd-no-player-warning p {
            color: #687386;
        }

    html.theme-light .odd-one-out-page
    .odd-question-card {
        border-color: rgba(13, 148, 136, 0.2);
        background: radial-gradient( circle at 95% 4%, rgba(20, 184, 166, 0.09), transparent 38% ), rgba(240, 237, 229, 0.9);
    }

    html.theme-light .odd-one-out-page
    .odd-difficulty-badge {
        border-color: rgba(13, 148, 136, 0.24);
        background: rgba(20, 184, 166, 0.1);
        color: #087f73;
    }

    html.theme-light .odd-one-out-page
    .odd-hint-card {
        border-color: rgba(190, 124, 48, 0.28);
        background: #f5ead5;
    }

        html.theme-light .odd-one-out-page
        .odd-hint-card strong {
            color: #9a641b;
        }

        html.theme-light .odd-one-out-page
        .odd-hint-card p {
            color: #5f6470;
        }

    html.theme-light .odd-one-out-page
    .odd-option-card {
        border-color: rgba(91, 99, 116, 0.2);
        background: radial-gradient( circle at top, rgba(255, 255, 255, 0.85), transparent 64% ), linear-gradient( 145deg, #f5f1e7, #e7dfd0 );
        color: #273244;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.87), 0 11px 23px rgba(73, 56, 36, 0.12);
    }

        html.theme-light .odd-one-out-page
        .odd-option-card:not(:disabled):hover {
            border-color: rgba(13, 148, 136, 0.52);
            background: radial-gradient( circle at top, rgba(255, 255, 255, 0.88), transparent 64% ), linear-gradient( 145deg, #eef4ec, #dae9df );
        }

    html.theme-light .odd-one-out-page
    .odd-option-label {
        color: #343b45;
    }

    html.theme-light .odd-one-out-page
    .odd-option-card.selected {
        border-color: rgba(99, 102, 241, 0.62);
        background: #e9e5f4;
    }

    html.theme-light .odd-one-out-page
    .odd-option-card.incorrect {
        border-color: rgba(190, 124, 48, 0.58);
        background: #f5e8d2;
    }

    html.theme-light .odd-one-out-page
    .odd-option-card.correct {
        border-color: rgba(52, 133, 79, 0.55);
        background: #dfecdf;
    }

    html.theme-light .odd-one-out-page
    .odd-option-card.shared-group {
        border-color: rgba(13, 148, 136, 0.5);
        background: #e0eee8;
    }

    html.theme-light .odd-one-out-page
    .odd-feedback.retry {
        background: #f5ead5;
    }

    html.theme-light .odd-one-out-page
    .odd-feedback.correct {
        background: #e0eee3;
    }

    html.theme-light .odd-one-out-page
    .odd-feedback.explanation {
        background: #e8e5f2;
    }

    html.theme-light .odd-one-out-page
    .odd-feedback-icon {
        background: rgba(255, 255, 255, 0.58);
        color: #273244;
    }

    html.theme-light .odd-one-out-page
    .odd-introduction-card {
        border-color: rgba(13, 148, 136, 0.28);
        background: radial-gradient( circle at center, rgba(20, 184, 166, 0.08), transparent 62% );
    }

    html.theme-light .odd-one-out-page
    .odd-introduction-visual span {
        border-color: rgba(91, 99, 116, 0.18);
        background: rgba(255, 255, 255, 0.5);
    }

    html.theme-light .odd-one-out-page
    .odd-finished-card {
        border-color: rgba(13, 148, 136, 0.24);
        background: radial-gradient( circle at top, rgba(20, 184, 166, 0.12), transparent 48% ), rgba(239, 236, 227, 0.94);
    }

    html.theme-light .odd-one-out-page
    .odd-finished-stats div {
        border-color: rgba(91, 99, 116, 0.16);
        background: rgba(255, 255, 255, 0.52);
    }

    html.theme-light .odd-one-out-page
    .odd-finished-stats strong {
        color: #087f73;
    }

/* =========================================================
   CATÁLOGO · ENCUENTRA EL INTRUSO
   ========================================================= */

.odd-catalog-preview {
    display: grid;
    grid-template-columns: repeat(2, 58px);
    grid-template-rows: repeat(2, 58px);
    gap: 0.55rem;
    place-content: center;
}

.odd-preview-item {
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid rgba(45, 212, 191, 0.24);
    border-radius: 17px;
    background: linear-gradient( 145deg, rgba(20, 184, 166, 0.12), rgba(99, 102, 241, 0.055) );
    font-size: 1.75rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 9px 18px rgba(15, 23, 42, 0.11);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

    .odd-preview-item:nth-child(1) {
        transform: rotate(-2deg);
    }

    .odd-preview-item:nth-child(2) {
        transform: rotate(1.5deg);
    }

    .odd-preview-item:nth-child(3) {
        transform: rotate(1deg);
    }

    .odd-preview-item.is-intruder {
        border-color: rgba(245, 158, 11, 0.48);
        background: radial-gradient( circle at top, rgba(245, 158, 11, 0.19), transparent 68% ), rgba(245, 158, 11, 0.085);
        transform: rotate(4deg);
    }

        .odd-preview-item.is-intruder small {
            position: absolute;
            top: -6px;
            right: -6px;
            display: grid;
            width: 22px;
            height: 22px;
            place-items: center;
            border: 2px solid var(--card-background, #0f172a);
            border-radius: 999px;
            background: #f59e0b;
            color: #fff;
            font-size: 0.68rem;
            font-weight: 950;
        }

.gamification-game-card:hover
.odd-preview-item {
    transform: translateY(-2px);
}

    .gamification-game-card:hover
    .odd-preview-item.is-intruder {
        transform: translateY(-3px) rotate(4deg) scale(1.035);
    }

html.theme-light
.odd-preview-item {
    border-color: rgba(13, 148, 136, 0.24);
    background: radial-gradient( circle at top, rgba(255, 255, 255, 0.78), transparent 65% ), linear-gradient( 145deg, #edf4ee, #dce9e1 );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 8px 18px rgba(72, 66, 54, 0.1);
}

    html.theme-light
    .odd-preview-item.is-intruder {
        border-color: rgba(190, 124, 48, 0.48);
        background: radial-gradient( circle at top, rgba(255, 255, 255, 0.72), transparent 66% ), linear-gradient( 145deg, #f4e7cf, #ead5b5 );
    }

        html.theme-light
        .odd-preview-item.is-intruder small {
            border-color: #f3efe6;
        }

/* =========================================================
   CATÁLOGO · ENCUENTRA EL INTRUSO · CELULAR
   ========================================================= */

@media (max-width: 680px) {
    .odd-catalog-preview {
        grid-template-columns: repeat(2, 52px);
        grid-template-rows: repeat(2, 52px);
        gap: 0.45rem;
    }

    .odd-preview-item {
        border-radius: 15px;
        font-size: 1.55rem;
    }
}

/* =========================================================
   ENCUENTRA EL INTRUSO · SCOREBOARD EN MODO CLARO
   ========================================================= */

html.theme-light .odd-one-out-page
.scoreboard-panel {
    border-color: rgba(91, 99, 116, 0.2) !important;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.74), rgba(235, 231, 222, 0.91) ) !important;
    color: #273244 !important;
    box-shadow: 0 22px 52px rgba(72, 66, 54, 0.11) !important;
}

html.theme-light .odd-one-out-page
.scoreboard-header h2,
html.theme-light .odd-one-out-page
.ranking-heading h3,
html.theme-light .odd-one-out-page
.empty-scoreboard strong,
html.theme-light .odd-one-out-page
.ranking-player-name strong,
html.theme-light .odd-one-out-page
.active-player-main h3 {
    color: #273244;
}

html.theme-light .odd-one-out-page
.player-entry label,
html.theme-light .odd-one-out-page
.player-selector-label,
html.theme-light .odd-one-out-page
.manual-score-controls > span,
html.theme-light .odd-one-out-page
.ranking-player-name small,
html.theme-light .odd-one-out-page
.empty-scoreboard p,
html.theme-light .odd-one-out-page
.active-player-main span,
html.theme-light .odd-one-out-page
.active-player-stats span,
html.theme-light .odd-one-out-page
.ranking-position {
    color: #687386;
}

html.theme-light .odd-one-out-page
.player-entry input {
    border-color: rgba(91, 99, 116, 0.26) !important;
    background: #f7f4ed !important;
    color: #273244 !important;
}

    html.theme-light .odd-one-out-page
    .player-entry input::placeholder {
        color: #8a8e96;
    }

html.theme-light .odd-one-out-page
.player-chip {
    border-color: rgba(91, 99, 116, 0.2);
    background: rgba(255, 255, 255, 0.46);
    color: #273244;
}

    html.theme-light .odd-one-out-page
    .player-chip.active {
        border-color: rgba(13, 148, 136, 0.42);
        background: rgba(20, 184, 166, 0.11);
        color: #087f73;
    }

html.theme-light .odd-one-out-page
.active-player-card {
    border-color: rgba(13, 148, 136, 0.3) !important;
    background: radial-gradient( circle at top right, rgba(20, 184, 166, 0.13), transparent 52% ), #e2ece7 !important;
}

html.theme-light .odd-one-out-page
.active-player-stats div {
    border: 1px solid rgba(91, 99, 116, 0.12);
    background: rgba(255, 255, 255, 0.49);
}

html.theme-light .odd-one-out-page
.active-player-stats strong,
html.theme-light .odd-one-out-page
.ranking-score,
html.theme-light .odd-one-out-page
.ranking-player-button,
html.theme-light .odd-one-out-page
.manual-score-controls button {
    color: #273244;
}

html.theme-light .odd-one-out-page
.manual-score-controls button,
html.theme-light .odd-one-out-page
.secondary-scoreboard-button {
    border-color: rgba(91, 99, 116, 0.2);
    background: rgba(255, 255, 255, 0.55);
    color: #273244;
}

html.theme-light .odd-one-out-page
.ranking-row {
    border-color: rgba(91, 99, 116, 0.19);
    background: rgba(255, 255, 255, 0.4);
}

    html.theme-light .odd-one-out-page
    .ranking-row.active {
        border-color: rgba(13, 148, 136, 0.42);
        background: rgba(20, 184, 166, 0.1);
    }

html.theme-light .odd-one-out-page
.empty-scoreboard {
    border-color: rgba(91, 99, 116, 0.24);
    background: rgba(255, 255, 255, 0.35);
}

/* =========================================================
   ENCUENTRA EL INTRUSO · SONIDO EN MODO CLARO
   ========================================================= */

html.theme-light .odd-one-out-page
.gamification-sound-settings {
    border-color: rgba(13, 148, 136, 0.2) !important;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.67), rgba(222, 235, 229, 0.79) ) !important;
    color: #273244;
}

html.theme-light .odd-one-out-page
.sound-settings-header strong {
    color: #273244;
}

html.theme-light .odd-one-out-page
.sound-settings-header > div:nth-child(2) span,
html.theme-light .odd-one-out-page
.sound-selector-field > span,
html.theme-light .odd-one-out-page
.sound-volume-field > span {
    color: #687386;
}

html.theme-light .odd-one-out-page
.sound-settings-icon {
    border-color: rgba(13, 148, 136, 0.24);
    background: rgba(20, 184, 166, 0.11);
    color: #087f73;
}

html.theme-light .odd-one-out-page
.sound-selector-row select {
    appearance: none;
    -webkit-appearance: none;
    border-color: rgba(90, 98, 114, 0.28) !important;
    background-color: #f7f4ed !important;
    color: #273244 !important;
    color-scheme: light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 13px;
}

    html.theme-light .odd-one-out-page
    .sound-selector-row select option {
        background: #f7f4ed;
        color: #273244;
    }

html.theme-light .odd-one-out-page
.sound-selector-row button {
    border-color: rgba(13, 148, 136, 0.26);
    background: #dcece7;
    color: #087f73;
}

html.theme-light .odd-one-out-page
.sound-volume-field strong {
    color: #087f73;
}

html.theme-light .odd-one-out-page
.sound-volume-field input {
    accent-color: #0f9f91;
}

/* =========================================================
   ENCUENTRA EL INTRUSO · PALETA MORADA UNIFICADA
   MODO CLARO
   ========================================================= */

html.theme-light .odd-one-out-page {
    --odd-light-purple: #6658d9;
    --odd-light-purple-soft: rgba(102, 88, 217, 0.11);
    --odd-light-text: #273244;
    --odd-light-muted: #687386;
    --odd-light-line: rgba(91, 99, 116, 0.2);
    color: var(--odd-light-text);
    background: radial-gradient( circle at 92% 6%, rgba(115, 102, 205, 0.1), transparent 28% ), radial-gradient( circle at 8% 90%, rgba(73, 150, 142, 0.08), transparent 30% ), linear-gradient( 180deg, #faf8f2, #f3f0e8 );
}

    /* Encabezado */

    html.theme-light .odd-one-out-page
    .odd-back-link,
    html.theme-light .odd-one-out-page
    .odd-title-eyebrow,
    html.theme-light .odd-one-out-page
    .odd-question-label,
    html.theme-light .odd-one-out-page
    .odd-configuration-heading span {
        color: var(--odd-light-purple);
    }

    html.theme-light .odd-one-out-page
    .odd-title-icon {
        border-color: rgba(102, 88, 217, 0.27);
        background: linear-gradient( 145deg, rgba(102, 88, 217, 0.12), rgba(102, 88, 217, 0.06) );
        color: #6256c4;
        box-shadow: 0 10px 24px rgba(90, 75, 160, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.62);
    }

    /* Configuración */

    html.theme-light .odd-one-out-page
    .odd-configuration {
        border-color: rgba(102, 88, 217, 0.21);
        background: linear-gradient( 145deg, rgba(235, 231, 242, 0.75), rgba(241, 237, 230, 0.88) );
    }

    html.theme-light .odd-one-out-page
    .odd-field select:focus {
        border-color: #7769d8;
        box-shadow: 0 0 0 3px rgba(102, 88, 217, 0.14);
    }

    html.theme-light .odd-one-out-page
    .odd-option-control input:checked +
    .odd-option-check {
        border-color: #7769d8;
        background: var(--odd-light-purple);
    }

    /* Progreso */

    html.theme-light .odd-one-out-page
    .odd-progress-stats strong,
    html.theme-light .odd-one-out-page
    .odd-progress-information strong {
        color: #6255c8;
    }

    html.theme-light .odd-one-out-page
    .odd-progress-track > span {
        background: linear-gradient( 90deg, #7568d8, #8b5cf6, #629a88 );
    }

    /* Pregunta */

    html.theme-light .odd-one-out-page
    .odd-question-card {
        border-color: rgba(102, 88, 217, 0.2);
        background: radial-gradient( circle at 95% 4%, rgba(119, 105, 216, 0.11), transparent 42% ), #ece8df;
    }

    html.theme-light .odd-one-out-page
    .odd-difficulty-badge {
        border-color: rgba(102, 88, 217, 0.24);
        background: rgba(102, 88, 217, 0.1);
        color: #6255c8;
    }

    /* Opciones */

    html.theme-light .odd-one-out-page
    .odd-option-card:not(:disabled):hover {
        border-color: rgba(102, 88, 217, 0.52);
        background: radial-gradient( circle at top, rgba(255, 255, 255, 0.88), transparent 64% ), linear-gradient( 145deg, #ece8f4, #dfd9eb );
    }

    html.theme-light .odd-one-out-page
    .odd-option-card.selected {
        border-color: rgba(102, 88, 217, 0.62);
        background: #e7e2f2;
    }

    html.theme-light .odd-one-out-page
    .odd-option-card.shared-group {
        border-color: rgba(61, 143, 112, 0.5);
        background: #e0eee5;
    }

    /* Introducción */

    html.theme-light .odd-one-out-page
    .odd-introduction-card {
        border-color: rgba(102, 88, 217, 0.28);
        background: radial-gradient( circle at center, rgba(102, 88, 217, 0.09), transparent 62% );
    }

    /* Resultado final */

    html.theme-light .odd-one-out-page
    .odd-finished-card {
        border-color: rgba(190, 145, 72, 0.28);
        background: radial-gradient( circle at top, rgba(208, 166, 94, 0.12), transparent 48% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.68), rgba(239, 235, 227, 0.86) );
    }

    html.theme-light .odd-one-out-page
    .odd-finished-icon {
        background: rgba(208, 166, 94, 0.13);
    }

    html.theme-light .odd-one-out-page
    .odd-finished-content > span {
        color: #a76711;
    }

    html.theme-light .odd-one-out-page
    .odd-finished-stats strong {
        color: #6255c8;
    }

    /* =========================================================
   SCOREBOARD · MORADO
   ========================================================= */

    html.theme-light .odd-one-out-page
    .player-chip.active {
        border-color: rgba(102, 88, 217, 0.42);
        background: rgba(102, 88, 217, 0.11);
        color: #6255c8;
    }

    html.theme-light .odd-one-out-page
    .active-player-card {
        border-color: rgba(102, 88, 217, 0.3) !important;
        background: radial-gradient( circle at top right, rgba(102, 88, 217, 0.13), transparent 52% ), #e8e3f0 !important;
    }

    html.theme-light .odd-one-out-page
    .ranking-row.active {
        border-color: rgba(102, 88, 217, 0.42);
        background: rgba(102, 88, 217, 0.1);
    }

    /* =========================================================
   SONIDO · MORADO
   ========================================================= */

    html.theme-light .odd-one-out-page
    .gamification-sound-settings {
        border-color: rgba(102, 88, 217, 0.2) !important;
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.66), rgba(232, 227, 240, 0.78) ) !important;
    }

    html.theme-light .odd-one-out-page
    .sound-settings-icon {
        border-color: rgba(102, 88, 217, 0.24);
        background: rgba(102, 88, 217, 0.11);
        color: var(--odd-light-purple);
    }

    html.theme-light .odd-one-out-page
    .sound-selector-row select:focus {
        border-color: #7769d8 !important;
        box-shadow: 0 0 0 3px rgba(102, 88, 217, 0.14) !important;
    }

    html.theme-light .odd-one-out-page
    .sound-selector-row button {
        border-color: rgba(102, 88, 217, 0.26);
        background: #e6e1f2;
        color: var(--odd-light-purple);
    }

    html.theme-light .odd-one-out-page
    .sound-volume-field strong {
        color: var(--odd-light-purple);
    }

    html.theme-light .odd-one-out-page
    .sound-volume-field input {
        accent-color: var(--odd-light-purple);
    }

/* =========================================================
   TARJETA DE CATEGORÍA · PREESCOLAR
   ========================================================= */

.preschool-category-card {
    border-color: rgba(34, 197, 94, 0.24);
    background: radial-gradient( circle at top right, rgba(34, 197, 94, 0.13), transparent 44% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018) ), var(--card-background, rgba(15, 23, 42, 0.82));
}

    .preschool-category-card .category-card-icon {
        border-color: rgba(34, 197, 94, 0.3);
        background: linear-gradient( 145deg, rgba(34, 197, 94, 0.16), rgba(16, 185, 129, 0.08) );
        color: #86efac;
    }

    .preschool-category-card .category-card-label {
        color: #86efac;
    }

    .preschool-category-card .category-card-arrow {
        color: #86efac;
    }

    .preschool-category-card:hover {
        border-color: rgba(34, 197, 94, 0.52);
        box-shadow: 0 24px 52px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(34, 197, 94, 0.08);
    }

/* Modo claro */

html.theme-light .preschool-category-card {
    border-color: rgba(39, 132, 78, 0.23);
    background: radial-gradient( circle at top right, rgba(34, 197, 94, 0.11), transparent 44% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.82), rgba(232, 239, 226, 0.94) );
}

    html.theme-light
    .preschool-category-card .category-card-icon {
        border-color: rgba(39, 132, 78, 0.26);
        background: rgba(34, 197, 94, 0.1);
        color: #27844e;
    }

    html.theme-light
    .preschool-category-card .category-card-label,
    html.theme-light
    .preschool-category-card .category-card-arrow {
        color: #27844e;
    }

/* =========================================================
   PRIMARIA · AZUL CON ACENTOS DORADOS
   ========================================================= */

.primary-category-card {
    border-color: rgba(147, 197, 253, 0.24);
    background: radial-gradient( circle at top right, rgba(214, 170, 85, 0.12), transparent 44% ), linear-gradient( 145deg, rgba(37, 99, 235, 0.11), rgba(15, 36, 67, 0.9) );
}

    .primary-category-card:hover {
        border-color: rgba(214, 170, 85, 0.55);
        box-shadow: 0 0 0 4px rgba(214, 170, 85, 0.045), 0 24px 48px rgba(0, 0, 0, 0.2);
    }

    .primary-category-card .category-card-icon {
        border-color: rgba(214, 170, 85, 0.31);
        background: linear-gradient( 145deg, rgba(37, 99, 235, 0.22), rgba(214, 170, 85, 0.1) );
        color: #f1d79b;
    }

        .primary-category-card .category-card-icon span {
            font-size: 1rem;
            font-weight: 950;
            letter-spacing: -0.04em;
        }

    .primary-category-card .category-card-label {
        border-color: rgba(214, 170, 85, 0.31);
        background: rgba(214, 170, 85, 0.1);
        color: #f1d79b;
    }

    .primary-category-card .category-card-arrow {
        color: #f1d79b;
    }

html.theme-light .gamifications-page
.primary-category-card {
    border-color: rgba(65, 105, 155, 0.22) !important;
    background: radial-gradient( circle at top right, rgba(214, 170, 85, 0.13), transparent 44% ), linear-gradient( 145deg, #eef4fa, #e0eaf3 ) !important;
}

    html.theme-light .primary-category-card:hover {
        border-color: rgba(154, 109, 35, 0.43);
    }

    html.theme-light .primary-category-card .category-card-icon {
        border-color: rgba(154, 109, 35, 0.25);
        background: linear-gradient( 145deg, rgba(37, 99, 235, 0.11), rgba(214, 170, 85, 0.15) );
        color: #8b621f;
    }

    html.theme-light .primary-category-card .category-card-label,
    html.theme-light .primary-category-card .category-card-arrow {
        color: #8b621f;
    }