/* Alfirdaws identity layer — loaded last on every master and game page.
   System: "الكوفي المربّع" (see DESIGN.md). Values come from tokens.css only.
   Stages are flat deep teal (tone steps, no glows); primary actions are orange blocks
   with teal-950 text; cards are paper with a hairline and one ambient shadow. */

html { accent-color: var(--c-teal-700); scrollbar-color: var(--c-teal-700) var(--c-paper); }
body { color: var(--c-ink); }
::selection { color: var(--c-teal-950); background: var(--c-orange-100); }

/* ---------- Heroes: the teal stage ---------- */
.tj-hero,
.lesson-hero,
.unit-hero {
    background-color: var(--c-teal-900);
}

.tj-games-lead,
.section-subtitle,
.setup-header-muted,
.game-info-intro { color: var(--c-ink-soft); }

/* ---------- Cards on paper ---------- */
.tj-game-card,
.setup-card,
.lesson-card,
.game-info-card,
.noon-paper {
    border-color: var(--c-line);
    border-radius: var(--r-tile);
    box-shadow: var(--shadow-card);
}

/* ---------- Setup screens: stage + paper card ---------- */
.setup-screen {
    background: var(--c-teal-900);
}
.setup-header {
    background: var(--c-teal-950);
    border-radius: var(--r-tile) var(--r-tile) 0 0;
}
.setup-header h1 { font-family: var(--font-kufi); }
.setup-icon {
    color: var(--c-teal-950);
    background: var(--c-orange);
    border-radius: var(--r-block);
    box-shadow: 0 5px 0 var(--c-orange-edge);
}
.setup-body .form-group :is(input, select) { border-radius: var(--r-block); min-height: 48px; }
.setup-body .form-group :is(input, select):focus { border-color: var(--c-teal-700); box-shadow: 0 0 0 3px rgba(14, 107, 92, .16); }

.level-card { border-radius: var(--r-tile); }
.level-card:hover { border-color: var(--c-teal-700); box-shadow: var(--shadow-card); }
.level-card.active { color: var(--c-teal-950); border-color: var(--c-teal-700); background: var(--c-teal-100); box-shadow: inset 0 0 0 1px var(--c-teal-700); }

.feature-card.purple-card,
.feature-card.blue-card,
.feature-card.orange-card { border-color: var(--c-line); }
.feature-card .feature-icon { border-radius: var(--r-block); }
.feature-card.purple-card .feature-icon { color: var(--c-teal-700); background: var(--c-teal-100); }
.feature-card.blue-card .feature-icon { color: var(--c-sky); background: var(--c-sky-100); }
.feature-card.orange-card .feature-icon { color: var(--c-orange-ink); background: var(--c-orange-50); }

.section-badge { color: var(--c-teal-900); background: var(--c-teal-100); border-radius: var(--r-cell); }
.game-info-section .game-info-intro strong,
.game-info-section .game-info-closing a { color: var(--c-teal-700); }
.game-info-section .game-info-cta { background: var(--c-teal-900); border-radius: var(--r-tile); }

/* ---------- Game cards in the tajweed hub ---------- */
.tj-game-card::before { background: var(--c-orange); height: 4px; }
.tj-game-icon,
.tj-game-badge {
    background: var(--c-teal-700);
    border-radius: var(--r-block);
    box-shadow: none;
}
.tj-game-dots i { border-radius: 2px; }
.tj-game-dots i.is-on { background: var(--c-orange); }

/* The one thing to press: orange block with a pressed edge */
.btn-start-game,
.noon-next {
    background: var(--c-orange);
    color: var(--c-teal-950) !important;
    border-radius: var(--r-tile);
    box-shadow: 0 5px 0 var(--c-orange-edge);
    font-weight: 800;
}
.btn-start-game:hover,
.noon-next:hover { background: var(--c-orange-soft); }
.btn-start-game:active,
.noon-next:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--c-orange-edge); }

.tj-game-step,
.level-badge,
.recommended-badge {
    color: var(--c-teal-900);
    background: var(--c-teal-100);
    border-radius: var(--r-cell);
}

.tj-game-card h3,
.setup-header h1,
.section-title { color: var(--c-ink); }
.setup-header h1 { color: var(--c-cream); }
.section-title { font-family: var(--font-kufi); font-weight: 600; }

/* ---------- Game stage ---------- */
.game-body {
    background: var(--c-teal-900);
    color: var(--c-cream);
}

.results-btn.secondary { background: var(--c-teal-800); color: var(--c-cream); }

.game-content :is(button, a, input, select, textarea):focus-visible,
.setup-card :is(button, a, input, select, textarea):focus-visible,
.noon-lesson :is(button, a, input, select, textarea):focus-visible {
    outline: 3px solid var(--c-orange-soft);
    outline-offset: 2px;
}

.is-correct,
.correct,
.feedback-success { color: var(--c-correct); }
.is-wrong,
.wrong,
.feedback-error { color: var(--c-wrong); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* النص الثانوي فوق رأس الإعداد الأخضر */
.setup-header p { color: var(--c-on-teal-soft); }