.page-games {
    --games-border: rgba(220, 233, 235, 0.94);
    --games-surface: rgba(255, 255, 255, 0.94);
    --games-surface-soft: rgba(247, 251, 251, 0.92);
    --games-shadow: 0 18px 42px -30px rgba(37, 87, 104, 0.3);
    --games-shadow-strong: 0 28px 54px -36px rgba(37, 87, 104, 0.36);
}

.page-games .site-main {
    padding-bottom: 2.75rem;
}

.page-games [hidden] {
    display: none !important;
}

.games-hero,
.games-subhero {
    padding: 0.95rem 0 0.35rem;
}

.games-home-hero,
.games-subhero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.games-home-hero {
    padding: 1.28rem 1.35rem;
    border: 1px solid var(--games-border);
    border-radius: calc(var(--radius-lg) + 0.1rem);
    background:
        radial-gradient(circle at top right, rgba(46, 167, 210, 0.1), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 250, 0.93));
    box-shadow: var(--games-shadow-strong);
}

.games-home-hero__copy {
    display: grid;
    gap: 0.35rem;
    max-width: 32rem;
}

.games-home-hero__text,
.games-home-stage__text,
.games-home-source__text {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.games-subhero__copy {
    display: grid;
    gap: 0.22rem;
}

.games-eyebrow,
.games-section__eyebrow,
.games-mode-card__eyebrow,
.flashcard__eyebrow,
.quiz-summary__eyebrow,
.games-mode-tab__eyebrow {
    margin: 0;
    color: var(--primary-strong);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.games-hero__title,
.games-subhero__title {
    margin: 0;
    line-height: 1.02;
}

.games-hero__title {
    font-size: clamp(2rem, 3vw, 2.8rem);
}

.games-subhero__title {
    font-size: clamp(1.55rem, 2.2vw, 2.05rem);
}

.games-subhero__meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
    font-weight: 700;
}

.games-subhero__actions,
.flashcards-controls,
.games-finish-card__actions,
.games-playbar__group,
.games-stat-pills,
.quiz-progress,
.flashcards-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.games-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    padding: 0 1rem;
    border: 0;
    border-radius: 0.95rem;
    background: var(--hero-gradient);
    color: var(--primary-contrast);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 16px 28px -22px rgba(43, 109, 152, 0.52);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    touch-action: manipulation;
}

.games-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
    box-shadow: 0 20px 34px -24px rgba(43, 109, 152, 0.56);
}

.games-button--ghost {
    background: rgba(255, 255, 255, 0.96);
    color: var(--foreground);
    box-shadow: inset 0 0 0 1px rgba(47, 167, 155, 0.16);
}

.games-button--compact {
    min-height: 2.55rem;
}

.games-button--success {
    background: linear-gradient(135deg, #2b8b60, #39b879);
}

.games-button--warning {
    background: linear-gradient(135deg, #d28625, #f0ad3c);
}

.games-button:focus-visible,
.games-mode-card:focus-visible,
.games-mode-tab:focus-visible,
.games-filter-chip:focus-visible,
.games-source-card:focus-visible,
.games-inline-link:focus-visible,
.matching-card:focus-visible,
.quiz-option:focus-visible,
.flashcard__surface:focus-visible,
.icon-button:focus-visible,
.games-list-picker__select:focus-visible,
.label-page__play-link:focus-visible {
    outline: 3px solid rgba(46, 167, 210, 0.22);
    outline-offset: 3px;
}

.games-panel,
.games-source-shell,
.games-empty {
    border: 1px solid var(--games-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 251, 0.95)),
        var(--games-surface);
    box-shadow: var(--games-shadow);
}

.games-panel,
.games-empty {
    padding: 1.15rem;
}

.games-panel--focus {
    box-shadow: var(--games-shadow-strong);
}

.games-empty {
    display: grid;
    gap: 0.75rem;
    justify-items: start;
}

.games-empty__title,
.games-section__title,
.games-source-shell__title,
.quiz-summary__title,
.games-finish-card__title {
    margin: 0.08rem 0 0;
}

.games-empty__text,
.games-mode-card__description,
.games-source-empty,
.matching-status__message,
.quiz-feedback,
.quiz-summary__text,
.games-finish-card__text {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.games-home-layout,
.games-play-layout {
    display: grid;
    gap: 1rem;
}

.games-home-layout {
    grid-template-columns: minmax(0, 1.14fr) minmax(300px, 0.86fr);
    align-items: start;
    gap: 1.1rem;
    padding-top: 0.5rem;
}

.games-play-layout {
    grid-template-columns: minmax(0, 1fr) minmax(248px, 286px);
    align-items: start;
    padding-top: 0.2rem;
}

.games-home-layout__source,
.games-play-layout__aside {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 0.72rem;
    align-self: start;
}

.games-home-layout__modes,
.games-play-layout__main {
    min-width: 0;
}

.games-home-stage,
.games-home-source {
    position: relative;
    display: grid;
    gap: 0.85rem;
    overflow: hidden;
}

.games-home-stage {
    padding: 1.26rem 1.26rem 1.2rem;
    border: 1px solid var(--games-border);
    border-radius: calc(var(--radius-lg) + 0.08rem);
    background:
        radial-gradient(circle at top left, rgba(47, 167, 155, 0.08), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 250, 0.95));
    box-shadow: var(--games-shadow-strong);
}

.games-home-stage__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.games-home-stage__copy,
.games-home-source__head {
    display: grid;
    gap: 0.28rem;
}

.games-home-stage__copy {
    max-width: 38rem;
}

.games-home-stage__active {
    display: grid;
    gap: 0.16rem;
    min-width: 14.2rem;
    padding: 0.9rem 1rem;
    border-radius: 1.05rem;
    background: linear-gradient(135deg, rgba(47, 167, 155, 0.12), rgba(46, 167, 210, 0.08));
    box-shadow: inset 0 0 0 1px rgba(47, 167, 155, 0.12);
}

.games-home-stage__active-label,
.games-source-shell__active-label,
.games-list-picker__label {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.games-source-shell {
    display: grid;
    gap: 0.85rem;
    padding: 0.2rem;
}

.games-source-shell--home,
.games-source-shell--aside {
    gap: 0.85rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.games-source-shell__active {
    display: grid;
    gap: 0.12rem;
    padding: 0.82rem 0.9rem;
    border-radius: 1rem;
    background: rgba(47, 167, 155, 0.1);
}

.games-source-shell__head,
.games-source-section__head,
.games-playbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.games-source-badge,
.games-source-section__meta,
.games-stat-pill,
.games-meta-pill,
.games-source-pill,
.flashcards-meta__item,
.quiz-progress__item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.2rem;
    padding: 0.52rem 0.82rem;
    border-radius: 999px;
    background: rgba(239, 246, 247, 0.92);
    color: var(--foreground);
    box-shadow: inset 0 0 0 1px rgba(47, 167, 155, 0.12);
    font-size: 0.92rem;
    font-weight: 700;
}

.games-source-badge,
.games-source-pill {
    background: rgba(47, 167, 155, 0.12);
    color: var(--primary-strong);
}

.games-source-card,
.games-mode-card {
    position: relative;
    display: grid;
    gap: 0.52rem;
    padding: 1.08rem 1.1rem;
    border: 1px solid var(--games-border);
    border-radius: calc(var(--radius-md) + 0.08rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 252, 0.95));
    box-shadow: var(--games-shadow);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.games-mode-card {
    min-height: 13.3rem;
    align-content: start;
    overflow: hidden;
}

.games-source-shell--aside .games-source-card {
    padding: 0.82rem 0.9rem;
    box-shadow: 0 14px 28px -28px rgba(27, 66, 81, 0.24);
}

.games-source-card:hover,
.games-mode-card:hover,
.games-filter-chip:hover,
.games-mode-tab:hover {
    transform: translateY(-1px);
    box-shadow: var(--games-shadow-strong);
}

.games-source-card.is-active {
    border-color: rgba(47, 167, 155, 0.38);
    background: linear-gradient(180deg, rgba(238, 250, 248, 0.98), rgba(255, 255, 255, 0.96));
}

.games-source-card__eyebrow {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.games-source-card__title,
.games-mode-card__title,
.games-source-section__title,
.matching-column__title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
}

.games-source-card__meta {
    color: var(--muted);
    font-size: 0.92rem;
}

.games-source-card__top,
.games-source-drawer__main {
    display: flex;
    align-items: flex-start;
    gap: 0.78rem;
}

.games-source-card__copy,
.games-source-drawer__copy {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.games-source-card__icon,
.games-source-drawer__badge {
    width: 2.95rem;
    height: 2.95rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, rgba(47, 167, 155, 0.14), rgba(46, 167, 210, 0.14));
    color: var(--primary-strong);
    box-shadow: inset 0 0 0 1px rgba(47, 167, 155, 0.12);
}

.games-source-card__icon .material-icons,
.games-source-drawer__badge .material-icons {
    font-size: 1.4rem;
}

.games-source-section {
    display: grid;
    gap: 0.65rem;
}

.games-source-collection {
    display: grid;
    gap: 0.55rem;
}

.games-source-collection--topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 18rem;
    overflow: auto;
    padding-inline-end: 0.15rem;
}

.games-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    min-height: 2.7rem;
    padding: 0.72rem 0.88rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.98);
    color: var(--foreground);
    box-shadow: inset 0 0 0 1px rgba(47, 167, 155, 0.12);
    font-weight: 700;
    transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.games-filter-chip small {
    color: var(--muted);
}

.games-filter-chip.is-active {
    background: rgba(47, 167, 155, 0.12);
    color: var(--primary-strong);
}

.games-list-picker {
    display: grid;
    gap: 0.6rem;
}

.games-list-picker__select {
    width: 100%;
    min-height: 3rem;
    padding: 0 0.95rem;
    border: 1px solid var(--games-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.98);
    color: var(--foreground);
    font: inherit;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.games-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.games-mode-grid {
    display: grid;
    gap: 0.9rem;
    margin-top: 0.9rem;
}

.games-mode-grid--home {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.games-mode-card--teal {
    background: linear-gradient(180deg, rgba(238, 250, 248, 0.98), rgba(255, 255, 255, 0.98));
}

.games-mode-card--gold {
    background: linear-gradient(180deg, rgba(255, 247, 232, 0.98), rgba(255, 255, 255, 0.98));
}

.games-mode-card--sky {
    background: linear-gradient(180deg, rgba(239, 248, 253, 0.98), rgba(255, 255, 255, 0.98));
}

.games-mode-card__icon {
    width: 3.7rem;
    height: 3.7rem;
    border-radius: 1.15rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(240, 248, 249, 0.94));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-strong);
    box-shadow:
        inset 0 0 0 1px rgba(47, 167, 155, 0.08),
        0 14px 28px -24px rgba(43, 109, 152, 0.4);
}

.games-mode-card__icon .material-icons {
    font-size: 1.8rem;
}

.games-mode-card__description {
    font-size: 0.95rem;
}

.games-mode-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 2.28rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary-strong);
    font-size: 0.93rem;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(47, 167, 155, 0.12);
    margin-top: auto;
}

.games-mode-tabs {
    display: grid;
    gap: 0.45rem;
}

.games-mode-tab {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.1rem;
    padding: 0.72rem 0.82rem;
    border: 1px solid var(--games-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.96);
    color: var(--foreground);
    box-shadow: var(--games-shadow);
    transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.games-mode-tab.is-active {
    background: linear-gradient(135deg, rgba(238, 250, 248, 0.98), rgba(247, 251, 255, 0.96));
    color: var(--foreground);
    border-color: rgba(47, 167, 155, 0.28);
}

.games-mode-tab__icon {
    flex: 0 0 auto;
    color: var(--primary-strong);
}

.games-mode-tab__copy {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.games-mode-tab__label {
    font-weight: 800;
}

.games-source-drawer {
    border: 1px solid var(--games-border);
    border-radius: 1.1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 251, 251, 0.95)),
        var(--games-surface);
    box-shadow: 0 14px 30px -28px rgba(37, 87, 104, 0.24);
    overflow: hidden;
}

.games-source-drawer__summary {
    display: block;
    padding: 0.9rem 1rem;
    cursor: pointer;
    list-style: none;
    position: relative;
    transition: background-color 0.18s ease;
}

.games-source-drawer__summary::-webkit-details-marker {
    display: none;
}

.games-source-drawer__summary:hover {
    background: rgba(47, 167, 155, 0.05);
}

.games-source-drawer__eyebrow,
.games-source-drawer__meta {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.games-source-drawer__title {
    font-size: 1rem;
    font-weight: 900;
}

.games-source-drawer__copy {
    padding-inline-end: 1.9rem;
}

.games-source-drawer__icon {
    position: absolute;
    top: 50%;
    left: 0.95rem;
    transform: translateY(-50%);
    transition: transform 0.18s ease;
    color: var(--primary-strong);
}

.games-source-drawer[open] .games-source-drawer__icon {
    transform: translateY(-50%) rotate(180deg);
}

.games-source-drawer__body {
    padding: 0 0.95rem 0.95rem;
    border-top: 1px solid rgba(47, 167, 155, 0.1);
}

.games-source-drawer:not([open]) .games-source-drawer__body {
    display: none;
}

.games-home-source .games-source-collection--topics {
    max-height: 13.5rem;
}

.games-play-shell {
    min-width: 0;
}

.games-playbar {
    margin-bottom: 0.72rem;
}

.games-inline-link {
    color: var(--primary);
    font-size: 0.94rem;
    font-weight: 800;
}

.games-inline-link:hover {
    color: var(--foreground);
}

.games-finish-card {
    --games-finish-accent: rgba(47, 167, 155, 0.16);
    position: relative;
    z-index: 2;
    display: grid;
    gap: 1rem;
    align-content: center;
    justify-items: start;
    min-height: 100%;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(47, 167, 155, 0.18);
    border-radius: calc(var(--radius-lg) + 0.2rem);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.84), transparent 34%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.99), rgba(240, 249, 248, 0.98));
    box-shadow:
        0 28px 58px -36px rgba(37, 87, 104, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.42);
    overflow: hidden;
}

.games-finish-card::before {
    content: "";
    position: absolute;
    inset: auto -8% -20% auto;
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    background: var(--games-finish-accent);
    filter: blur(12px);
    opacity: 0.95;
    pointer-events: none;
}

.games-finish-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 36%);
    pointer-events: none;
}

.games-finish-card__badge,
.games-finish-card__copy,
.games-finish-card__stats,
.games-finish-card__actions {
    position: relative;
    z-index: 1;
}

.games-finish-card__badge {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 0 0 1px rgba(47, 167, 155, 0.1),
        0 16px 28px -24px rgba(37, 87, 104, 0.44);
}

.games-finish-card__copy {
    display: grid;
    gap: 0.35rem;
    max-width: 33rem;
}

.games-finish-card__eyebrow {
    margin: 0;
    color: var(--primary-strong);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.games-finish-card__title {
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    line-height: 1.05;
}

.games-finish-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    width: 100%;
    max-width: 34rem;
}

.games-finish-card__stat {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(47, 167, 155, 0.1);
}

.games-finish-card__stat-label {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.games-finish-card__stat-value {
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.3;
}

.games-finish-card__actions {
    width: 100%;
}

.games-finish-card--matching {
    --games-finish-accent: rgba(57, 184, 121, 0.18);
}

.games-finish-card--quiz {
    --games-finish-accent: rgba(232, 181, 87, 0.18);
}

.games-finish-card--flashcards {
    --games-finish-accent: rgba(66, 163, 227, 0.16);
}

.matching-stage,
.quiz-stage,
.flashcards-stage-shell {
    position: relative;
}

.matching-stage {
    min-height: 34rem;
}

.quiz-stage {
    min-height: 23rem;
}

.flashcards-stage-shell {
    min-height: 20.5rem;
}

.matching-stage > .games-finish-card,
.quiz-stage > .games-finish-card,
.flashcards-stage-shell > .games-finish-card {
    position: absolute;
    inset: 0;
}

.matching-stage.is-complete .matching-board,
.quiz-stage.is-complete .quiz-question-shell,
.flashcards-stage-shell.is-complete .flashcards-stage {
    opacity: 0.12;
    filter: blur(4px) saturate(0.88);
    pointer-events: none;
}

.flashcards-stage-shell.is-complete .flashcard__toolbar {
    opacity: 0.15;
}

@keyframes gamesFinishReveal {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.games-finish-card:not([hidden]) {
    animation: gamesFinishReveal 0.28s ease;
}

.matching-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.72rem;
    padding: 0.72rem 0.85rem;
    border-radius: 1rem;
    background: rgba(245, 250, 250, 0.96);
    box-shadow: inset 0 0 0 1px rgba(47, 167, 155, 0.1);
}

.matching-status__copy {
    display: grid;
    gap: 0.15rem;
}

.matching-status__progress {
    font-size: 1rem;
    font-weight: 900;
}

.matching-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    transition: opacity 0.22s ease, filter 0.22s ease;
}

.matching-column {
    display: grid;
    gap: 0.65rem;
    align-content: start;
}

.matching-card {
    display: grid;
    gap: 0.24rem;
    width: 100%;
    min-height: 5.7rem;
    padding: 0.92rem 0.78rem;
    border: 0;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(47, 167, 155, 0.1);
    color: var(--foreground);
    text-align: right;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    touch-action: manipulation;
}

.matching-card__arabic,
.flashcard__arabic,
.quiz-question__arabic {
    font-family: "Abraham", "Noto Sans Arabic", serif;
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    line-height: 1.14;
}

.matching-card__transliteration,
.flashcard__transliteration,
.quiz-question__transliteration {
    color: var(--ocean);
    font-size: 1rem;
}

.matching-card__hebrew,
.flashcard__hebrew {
    font-size: 1.22rem;
    font-weight: 900;
}

.matching-card.is-selected {
    background: rgba(46, 167, 210, 0.1);
    box-shadow: inset 0 0 0 2px rgba(46, 167, 210, 0.28);
}

.matching-card.is-matched {
    background: rgba(57, 184, 121, 0.12);
    box-shadow: inset 0 0 0 2px rgba(57, 184, 121, 0.24);
    cursor: default;
}

.matching-card.is-wrong {
    background: rgba(233, 134, 105, 0.12);
    box-shadow: inset 0 0 0 2px rgba(233, 134, 105, 0.26);
}

.flashcards-shell,
.quiz-shell {
    display: grid;
    gap: 0.8rem;
}

.flashcards-stage,
.flashcard {
    min-height: 20rem;
}

.flashcards-stage {
    transition: opacity 0.22s ease, filter 0.22s ease;
}

.flashcard__surface {
    position: relative;
    width: 100%;
    min-height: 18rem;
    border: 0;
    border-radius: 1.3rem;
    padding: 0;
    background: transparent;
    cursor: pointer;
    perspective: 1200px;
    touch-action: manipulation;
}

.flashcard__face {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.6rem;
    padding: 1.25rem;
    border-radius: 1.3rem;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.26), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 247, 0.96));
    box-shadow:
        inset 0 0 0 1px rgba(47, 167, 155, 0.1),
        0 22px 38px -30px rgba(37, 87, 104, 0.28);
    backface-visibility: hidden;
    transition: transform 0.42s ease;
}

.flashcard__face--back {
    transform: rotateY(180deg);
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.22), transparent 40%),
        linear-gradient(180deg, rgba(247, 251, 255, 0.99), rgba(235, 244, 250, 0.96));
}

.flashcard.is-flipped .flashcard__face--front {
    transform: rotateY(180deg);
}

.flashcard.is-flipped .flashcard__face--back {
    transform: rotateY(360deg);
}

.flashcard__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.flashcards-summary {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.flashcards-summary__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0;
    font-weight: 800;
}

.flashcards-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.flashcards-controls--secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.icon-button {
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 0.95rem;
    background: rgba(239, 246, 247, 0.92);
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.icon-button:hover {
    transform: translateY(-1px);
    background: rgba(47, 167, 155, 0.12);
    color: var(--primary-strong);
}

.quiz-question-shell {
    min-height: 23rem;
    transition: opacity 0.22s ease, filter 0.22s ease;
}

.quiz-question,
.quiz-summary {
    display: grid;
    gap: 0.9rem;
    padding: 1.15rem;
    border-radius: var(--radius-md);
    background: rgba(250, 252, 252, 0.98);
    box-shadow: inset 0 0 0 1px rgba(47, 167, 155, 0.1);
}

.quiz-question__number {
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 800;
}

.quiz-question__prompt,
.quiz-options {
    display: grid;
    gap: 0.7rem;
}

.quiz-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 3.5rem;
    padding: 0.92rem 1rem;
    border: 0;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(47, 167, 155, 0.1);
    color: var(--foreground);
    text-align: right;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    touch-action: manipulation;
}

.quiz-option:hover {
    transform: translateY(-1px);
}

.quiz-option.is-correct {
    background: rgba(57, 184, 121, 0.12);
    box-shadow: inset 0 0 0 2px rgba(57, 184, 121, 0.24);
}

.quiz-option.is-wrong {
    background: rgba(233, 134, 105, 0.12);
    box-shadow: inset 0 0 0 2px rgba(233, 134, 105, 0.24);
}

.quiz-feedback {
    min-height: 1.55rem;
    font-weight: 800;
}

.quiz-feedback.is-correct {
    color: #236a49;
}

.quiz-feedback.is-wrong {
    color: #9f4126;
}

.quiz-summary {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.games-noscript {
    margin-top: 0.5rem;
    color: var(--muted);
    font-size: 0.94rem;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 1120px) {
    .games-home-layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    }

    .games-play-layout {
        grid-template-columns: minmax(0, 1fr) 260px;
    }

    .games-mode-grid--home {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .games-home-layout,
    .games-play-layout {
        grid-template-columns: 1fr;
    }

    .games-home-layout__source,
    .games-play-layout__aside {
        position: static;
    }

    .games-mode-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .games-source-shell__head,
    .games-playbar,
    .games-subhero__inner,
    .games-home-hero,
    .games-home-stage__head {
        align-items: stretch;
        flex-direction: column;
    }

    .games-source-collection--topics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-height: 14rem;
    }
}

@media (max-width: 760px) {
    .games-hero,
    .games-subhero {
        padding-top: 0.8rem;
    }

    .games-home-hero {
        padding: 1rem;
    }

    .games-panel,
    .games-empty,
    .games-source-shell {
        padding: 1rem;
    }

    .games-home-stage,
    .games-home-source {
        padding: 1rem;
    }

    .games-home-stage__head,
    .games-home-hero {
        gap: 0.8rem;
    }

    .games-mode-tabs {
        grid-template-columns: 1fr;
    }

    .games-mode-tab__eyebrow {
        display: none;
    }

    .games-source-collection--topics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .matching-status {
        align-items: stretch;
        flex-direction: column;
    }

    .matching-board {
        gap: 0.55rem;
    }

    .matching-card {
        min-height: 5.1rem;
        padding: 0.75rem 0.62rem;
    }

    .matching-stage {
        min-height: 30rem;
    }

    .matching-card__arabic,
    .flashcard__arabic,
    .quiz-question__arabic {
        font-size: 1.3rem;
    }

    .matching-card__hebrew,
    .flashcard__hebrew {
        font-size: 1.08rem;
    }

    .flashcards-stage,
    .flashcard {
        min-height: 17rem;
    }

    .flashcard__surface {
        min-height: 16.2rem;
    }

    .quiz-stage {
        min-height: 21rem;
    }

    .games-source-drawer__body {
        padding: 0 0.85rem 0.9rem;
    }

    .games-home-stage__active {
        min-width: 0;
    }

    .games-source-drawer__summary {
        padding: 0.82rem 0.9rem;
    }
}

@media (max-width: 560px) {
    .games-source-collection--topics {
        grid-template-columns: 1fr 1fr;
    }

    .matching-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .matching-card {
        min-height: 4.7rem;
    }

    .games-finish-card {
        padding: 1.1rem;
    }

    .games-finish-card__stats {
        grid-template-columns: 1fr;
    }

    .games-finish-card__actions .games-button {
        width: 100%;
    }

    .flashcards-controls,
    .flashcards-controls--secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .flashcards-controls .games-button:first-child {
        grid-column: 1 / -1;
    }

    .games-subhero__actions .games-button,
    .games-finish-card__actions .games-button {
        width: 100%;
    }
}