/* ========================================================
   PLAYFUL LEARNING LAYER (v5.0)
   Claymorphic, bright & bouncy skin over styles.css.
   Loaded after styles.css: overrides tokens + key components only,
   no markup changes required.
   ======================================================== */

/* --- Tokens: Dark (Midnight Ink) --- */
:root,
html[data-theme="dark"] {
    --bg-main: #0E1424;
    --bg-surface: #151C30;
    --bg-card: #1A2239;
    --bg-card-hover: #212A45;
    --bg-elevated: #283252;

    --text-primary: #F3F6FF;
    --text-secondary: #C4CCE6;
    --text-muted: #8E99BC;
    --text-inverse: #0E1424;

    --border-subtle: rgba(160, 180, 235, 0.13);
    --border-medium: rgba(160, 180, 235, 0.24);
    --border-active: rgba(255, 197, 49, 0.5);

    --accent-gold: #FFC531;
    --accent-gold-light: #FFD866;
    --accent-gold-bg: rgba(255, 197, 49, 0.14);
    --accent-gold-border: rgba(255, 197, 49, 0.35);

    --accent-indigo: #9A8CFF;
    --accent-indigo-light: #B4AAFF;
    --accent-indigo-bg: rgba(139, 123, 255, 0.16);
    --accent-indigo-border: rgba(139, 123, 255, 0.38);

    --state-valid: #34D57A;
    --state-valid-bg: rgba(52, 213, 122, 0.14);
    --state-valid-border: rgba(52, 213, 122, 0.4);
    --state-flaw: #FF6B8B;
    --state-flaw-bg: rgba(255, 107, 139, 0.14);
    --state-flaw-border: rgba(255, 107, 139, 0.4);
    --state-inquiry: #38C6FF;
    --state-inquiry-bg: rgba(56, 198, 255, 0.14);
    --state-inquiry-border: rgba(56, 198, 255, 0.38);

    --nav-bg: rgba(21, 28, 48, 0.97);
    --nav-border: rgba(160, 180, 235, 0.13);
    --shadow-sm: 0 2px 6px rgba(2, 6, 18, 0.35);
    --shadow-md: 0 6px 16px rgba(2, 6, 18, 0.45);
    --shadow-lg: 0 14px 30px rgba(2, 6, 18, 0.55);
    --shadow-gold: 0 6px 18px rgba(255, 197, 49, 0.2);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    /* playful palette */
    --fun-primary: #7C6CFF;
    --fun-primary-deep: #5443E0;
    --fun-pink: #FF5C8A;
    --fun-pink-deep: #D93A68;
    --fun-yellow: #FFC531;
    --fun-yellow-deep: #DC9A00;
    --fun-green: #2BC96E;
    --fun-green-deep: #1B9A50;
    --fun-sky: #38C6FF;
    --fun-orange: #FF8A3D;
    --clay-edge: rgba(0, 0, 0, 0.4);
    --overlay-scrim: rgba(4, 8, 20, 0.72);
    --font-display: 'Baloo Bhaijaan 2', 'Cairo', system-ui, sans-serif;
    color-scheme: dark;
}

/* --- Tokens: Light (Sunny Classroom) --- */
html[data-theme="light"] {
    --bg-main: #F4F1FF;
    --bg-surface: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F8F6FF;
    --bg-elevated: #ECE8FF;

    --text-primary: #1E1A4D;
    --text-secondary: #4D4880;
    --text-muted: #7D78AE;
    --text-inverse: #FFFFFF;

    --border-subtle: #E3DEFA;
    --border-medium: #CFC8F5;
    --border-active: rgba(91, 76, 240, 0.45);

    --accent-gold: #E08A00;
    --accent-gold-light: #F5A300;
    --accent-gold-bg: rgba(255, 197, 49, 0.18);
    --accent-gold-border: rgba(224, 138, 0, 0.35);

    --accent-indigo: #5B4CF0;
    --accent-indigo-light: #6E61FF;
    --accent-indigo-bg: rgba(91, 76, 240, 0.09);
    --accent-indigo-border: rgba(91, 76, 240, 0.3);

    --state-valid: #16A34A;
    --state-valid-bg: rgba(43, 201, 110, 0.12);
    --state-valid-border: rgba(22, 163, 74, 0.35);
    --state-flaw: #E5345F;
    --state-flaw-bg: rgba(255, 92, 138, 0.1);
    --state-flaw-border: rgba(229, 52, 95, 0.32);
    --state-inquiry: #0890D0;
    --state-inquiry-bg: rgba(56, 198, 255, 0.12);
    --state-inquiry-border: rgba(8, 144, 208, 0.3);

    --nav-bg: rgba(255, 255, 255, 0.97);
    --nav-border: #E3DEFA;
    --shadow-sm: 0 2px 6px rgba(70, 55, 180, 0.08);
    --shadow-md: 0 6px 16px rgba(70, 55, 180, 0.1);
    --shadow-lg: 0 14px 30px rgba(70, 55, 180, 0.14);
    --shadow-gold: 0 6px 18px rgba(255, 197, 49, 0.25);

    --fun-primary: #5B4CF0;
    --fun-primary-deep: #4031C4;
    --clay-edge: rgba(70, 55, 180, 0.16);
    --overlay-scrim: rgba(30, 26, 77, 0.45);
    color-scheme: light;
}

/* --- Base --- */
body {
    background: var(--bg-main);
    font-family: 'Cairo', system-ui, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}
h1, h2, h3, .app-title, .player-card-title, .course-lesson-title,
.feedback-title, .unit-label-title, .intensive-banner-title {
    font-family: var(--font-display);
    letter-spacing: 0;
}

/* --- Header (was unstyled) --- */
.app-header {
    padding: calc(var(--safe-top, 28px) + 10px) 16px 10px;
    background: var(--bg-main);
}
.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.brand-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.logo-mark {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 24px;
    background: linear-gradient(145deg, var(--fun-primary), var(--fun-pink));
    box-shadow: 0 4px 0 var(--fun-primary-deep), 0 8px 18px rgba(91, 76, 240, 0.3);
    animation: logoWiggle 6s ease-in-out infinite;
}
@keyframes logoWiggle {
    0%, 88%, 100% { transform: rotate(0); }
    91% { transform: rotate(-10deg) scale(1.06); }
    94% { transform: rotate(8deg) scale(1.06); }
    97% { transform: rotate(-4deg); }
}
.app-title {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0;
}
.app-tagline {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-group { flex: 1; }
.brand-group > div { min-width: 0; }
.app-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.header-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}
@media (max-width: 400px) {
    .logo-mark { width: 38px; height: 38px; font-size: 20px; border-radius: 12px; }
    .app-title { font-size: 18px; }
    .header-actions .icon-btn { width: 36px; height: 40px; border-radius: 12px; }
}
.icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 2px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-secondary);
    box-shadow: 0 3px 0 var(--border-medium);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.icon-btn:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 var(--border-medium);
}

/* --- Header stat chips: colorful clay pills --- */
.header-stats-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.stat-chip-pill {
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 800;
    border-width: 2px;
    color: var(--text-primary);
    box-shadow: 0 3px 0 var(--clay-edge);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stat-chip-pill:active { transform: scale(0.94); }
.stat-chip-pill.streak { background: rgba(255, 138, 61, 0.14); border-color: rgba(255, 138, 61, 0.45); }
.stat-chip-pill.daily-goal { background: rgba(255, 92, 138, 0.12); border-color: rgba(255, 92, 138, 0.42); }
.stat-chip-pill.mastery-xp { background: rgba(255, 197, 49, 0.16); border-color: rgba(255, 197, 49, 0.55); }
.stat-chip-pill.bump { animation: chipBump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes chipBump {
    0% { transform: scale(1); }
    35% { transform: scale(1.22) rotate(-3deg); }
    100% { transform: scale(1); }
}

/* --- Cards: soft clay --- */
.course-continuation-card,
.player-card,
.detective-card,
.intensive-card,
.progress-card,
.fallacy-card,
.unit-container-card,
.tree-branch-card,
.daily-challenge-card,
.mistake-card,
.coach-skill-card,
.arsenal-card,
.stat-box {
    border-radius: var(--radius-lg) !important;
    border: 2px solid var(--border-subtle) !important;
    box-shadow: 0 4px 0 var(--clay-edge), var(--shadow-md) !important;
}
.course-continuation-card {
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 197, 49, 0.22), transparent 42%),
        radial-gradient(circle at 100% 100%, rgba(255, 92, 138, 0.18), transparent 45%),
        linear-gradient(150deg, var(--accent-indigo-bg), var(--bg-card)) !important;
    border-color: var(--accent-indigo-border) !important;
}
.fallacy-card {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}
.fallacy-card:active { transform: scale(0.98); }

/* --- Primary 3D buttons --- */
.course-cta-btn,
.btn-primary,
.intensive-banner-btn,
.foundations-banner-btn {
    background: linear-gradient(180deg, var(--fun-primary) 0%, var(--fun-primary-deep) 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 16px !important;
    font-weight: 800;
    box-shadow: 0 5px 0 #33259E, 0 10px 20px rgba(91, 76, 240, 0.28) !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.15s ease;
}
.course-cta-btn:active,
.btn-primary:active,
.intensive-banner-btn:active,
.foundations-banner-btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #33259E, 0 3px 8px rgba(91, 76, 240, 0.25) !important;
}
.btn-secondary {
    border: 2px solid var(--border-medium) !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 0 var(--border-medium);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn-secondary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--border-medium); }

/* --- Learning path nodes: candy bubbles --- */
.lesson-node-bubble {
    width: 70px;
    height: 70px;
    font-size: 24px;
}
.lesson-node-bubble.completed {
    background: linear-gradient(180deg, #3EDB82, var(--fun-green)) !important;
    border: none !important;
    box-shadow: 0 6px 0 var(--fun-green-deep), 0 10px 20px rgba(43, 201, 110, 0.3) !important;
}
.lesson-node-bubble.active {
    background: linear-gradient(180deg, #9C90FF, var(--fun-primary)) !important;
    border: 4px solid var(--fun-yellow) !important;
    box-shadow: 0 6px 0 var(--fun-primary-deep), 0 0 0 8px rgba(255, 197, 49, 0.25) !important;
    animation: nodeBounce 2s ease-in-out infinite !important;
}
@keyframes nodeBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.lesson-node-bubble.locked {
    background: var(--bg-elevated) !important;
    border: 3px dashed var(--border-medium) !important;
    box-shadow: 0 5px 0 var(--clay-edge) !important;
    opacity: 0.85;
}

/* --- Answer options (all quiz types) --- */
.player-option-btn,
.quiz-option,
.intensive-option-btn {
    background: var(--bg-card);
    border: 2px solid var(--border-medium) !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 0 var(--border-medium);
    font-size: 13.5px;
    line-height: 1.7;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.player-option-btn:active,
.quiz-option:not([disabled]):active,
.intensive-option-btn:not([disabled]):active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--border-medium);
}
.player-option-btn.selected {
    border-color: var(--fun-primary) !important;
    background: var(--accent-indigo-bg);
    box-shadow: 0 4px 0 var(--fun-primary) !important;
    transform: translateY(-1px);
}
.option-letter-badge,
.intensive-opt-letter {
    border-radius: 10px !important;
    font-weight: 900;
    background: var(--bg-elevated) !important;
    color: var(--accent-indigo) !important;
    border: 2px solid var(--border-medium) !important;
}
.player-option-btn.selected .option-letter-badge {
    background: var(--fun-primary) !important;
    border-color: var(--fun-primary) !important;
    color: #FFFFFF !important;
}

/* Reveal states (correct / wrong) */
.player-option-btn.opt-correct,
.quiz-option.correct,
.intensive-option-btn.opt-correct {
    border-color: var(--fun-green) !important;
    background: var(--state-valid-bg) !important;
    box-shadow: 0 4px 0 var(--fun-green-deep) !important;
    animation: optPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.player-option-btn.opt-wrong,
.quiz-option.incorrect,
.intensive-option-btn.opt-wrong {
    border-color: var(--fun-pink) !important;
    background: var(--state-flaw-bg) !important;
    box-shadow: 0 4px 0 var(--fun-pink-deep) !important;
    animation: optShake 0.45s ease;
}
.player-option-btn.opt-correct .option-letter-badge { background: var(--fun-green) !important; border-color: var(--fun-green) !important; color: #fff !important; }
.player-option-btn.opt-wrong .option-letter-badge { background: var(--fun-pink) !important; border-color: var(--fun-pink) !important; color: #fff !important; }
.player-option-btn.opt-dim { opacity: 0.55; }
.player-options-list.answered .player-option-btn { pointer-events: none; }
@keyframes optPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.04); }
    100% { transform: scale(1); }
}
@keyframes optShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}

/* --- Lesson player --- */
.player-top-header {
    background: var(--bg-main);
    border-bottom: none;
}
.player-close-btn {
    background: var(--bg-card);
    border: 2px solid var(--border-medium);
    box-shadow: 0 3px 0 var(--border-medium);
}
.player-segments-wrapper { height: 14px; gap: 6px; }
.player-segment {
    background: var(--bg-elevated);
    border-radius: 99px;
}
.player-segment.filled {
    background: linear-gradient(180deg, #3EDB82, var(--fun-green));
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}
.player-segment.current {
    background: linear-gradient(180deg, #FFD866, var(--fun-yellow));
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}
.player-station-badge {
    border-radius: 99px !important;
}

/* --- Feedback sheet: friendly, bouncy, theme-aware --- */
.player-feedback-sheet {
    border-top: none !important;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -12px 40px rgba(20, 10, 60, 0.3) !important;
}
.player-feedback-sheet.active {
    animation: sheetBounceUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
@keyframes sheetBounceUp {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}
.player-feedback-sheet.correct {
    background: linear-gradient(180deg, #D9FBE6 0%, #ECFDF3 100%) !important;
}
.player-feedback-sheet.incorrect {
    background: linear-gradient(180deg, #FFE1E8 0%, #FFF1F4 100%) !important;
}
html[data-theme="dark"] .player-feedback-sheet.correct {
    background: linear-gradient(180deg, #123B2A 0%, #0E2A20 100%) !important;
}
html[data-theme="dark"] .player-feedback-sheet.incorrect {
    background: linear-gradient(180deg, #43182A 0%, #2E1220 100%) !important;
}
.feedback-correct .feedback-title { color: var(--state-valid); }
.feedback-incorrect .feedback-title { color: var(--state-flaw); }
.feedback-status-row > span:first-child {
    display: inline-block;
    animation: emojiPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}
@keyframes emojiPop {
    0% { transform: scale(0) rotate(-30deg); }
    100% { transform: scale(1.25) rotate(0); }
}
.feedback-text {
    color: var(--text-primary) !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border: 2px solid rgba(0, 0, 0, 0.05) !important;
    text-shadow: none !important;
    border-radius: 16px !important;
}
html[data-theme="dark"] .feedback-text {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.feedback-action-btn {
    border-radius: 16px;
    padding: 14px;
    font-size: 15px;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.feedback-action-btn.correct-btn {
    background: linear-gradient(180deg, #3EDB82, var(--fun-green));
    box-shadow: 0 5px 0 var(--fun-green-deep);
}
.feedback-action-btn.incorrect-btn {
    background: linear-gradient(180deg, #FF7DA0, var(--fun-pink));
    box-shadow: 0 5px 0 var(--fun-pink-deep);
}
.feedback-action-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }

/* --- Bottom navigation --- */
.bottom-nav {
    border-top: 2px solid var(--nav-border);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -6px 24px rgba(40, 25, 120, 0.1);
    padding-top: 6px;
}
.nav-item {
    padding: 6px 2px;
    font-size: 9.5px;
    border-radius: 14px;
    transition: color 0.15s ease, background-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-item.active {
    color: var(--fun-primary);
    background: var(--accent-indigo-bg);
    transform: translateY(-2px);
}
html[data-theme="dark"] .nav-item.active { color: var(--accent-indigo-light); }
.nav-item.active svg { animation: navIconHop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes navIconHop {
    0% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-5px) scale(1.15); }
    100% { transform: translateY(0) scale(1); }
}

/* --- Chips / filters / pills --- */
.chip, .level-btn, .diff-btn, .cat-mode-btn, .int-mode-btn, .f-tab-btn {
    border-radius: 99px !important;
    border-width: 2px !important;
    font-weight: 800 !important;
}
.search-input {
    border-radius: 16px !important;
    border: 2px solid var(--border-medium) !important;
}
.search-input:focus { border-color: var(--fun-primary) !important; box-shadow: 0 0 0 4px var(--accent-indigo-bg) !important; }

/* --- Section entrance motion --- */
.view-section.active > * {
    animation: riseIn 0.42s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
.view-section.active > *:nth-child(2) { animation-delay: 0.05s; }
.view-section.active > *:nth-child(3) { animation-delay: 0.1s; }
.view-section.active > *:nth-child(4) { animation-delay: 0.15s; }
.view-section.active > *:nth-child(n+5) { animation-delay: 0.2s; }
@keyframes riseIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* --- Liveliness widgets (playful.js) --- */
.fun-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5000;
    overflow: hidden;
}
.fun-confetti i {
    position: absolute;
    top: -14px;
    width: 9px;
    height: 14px;
    border-radius: 3px;
    will-change: transform, opacity;
    animation: confettiFall var(--d, 1.4s) cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}
@keyframes confettiFall {
    0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
    100% { transform: translate3d(var(--x, 0px), 105vh, 0) rotate(var(--r, 540deg)); opacity: 0.9; }
}
.fun-toast {
    position: fixed;
    left: 50%;
    top: calc(var(--safe-top, 28px) + 14px);
    transform: translate(-50%, -140%);
    z-index: 5100;
    padding: 10px 18px;
    border-radius: 99px;
    font-weight: 900;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(180deg, #FFB020, var(--fun-orange));
    box-shadow: 0 4px 0 #C25E14, 0 10px 24px rgba(255, 138, 61, 0.35);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    pointer-events: none;
}
.fun-toast.show { transform: translate(-50%, 0); }
.fun-toast.cool { background: linear-gradient(180deg, #9C90FF, var(--fun-primary)); box-shadow: 0 4px 0 #33259E, 0 10px 24px rgba(91, 76, 240, 0.35); }
.fun-xp-float {
    position: fixed;
    z-index: 5050;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--fun-yellow);
    text-shadow: 0 2px 0 #B87700, 0 4px 12px rgba(255, 197, 49, 0.5);
    pointer-events: none;
    animation: xpFloat 1.1s ease-out forwards;
}
@keyframes xpFloat {
    0% { opacity: 0; transform: translateY(10px) scale(0.6); }
    20% { opacity: 1; transform: translateY(0) scale(1.15); }
    100% { opacity: 0; transform: translateY(-70px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .fun-confetti { display: none; }
}

/* --- Daily brain-teaser card (markup existed without styles) --- */
.daily-hero-card {
    position: relative;
    margin: 4px 0 18px;
    padding: 18px;
    border-radius: var(--radius-lg);
    border: 2px solid rgba(255, 197, 49, 0.5);
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 197, 49, 0.28), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(56, 198, 255, 0.16), transparent 50%),
        var(--bg-card);
    box-shadow: 0 4px 0 rgba(220, 154, 0, 0.35), var(--shadow-md);
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.daily-hero-card:active { transform: scale(0.985); }
.daily-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.daily-hero-badge {
    border-radius: 99px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 800;
}
.daily-hero-date { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.daily-hero-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 2px;
}
.daily-hero-latin {
    font-family: 'Outfit', sans-serif;
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 0 0 12px;
}
.daily-argument-quote {
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-radius: 14px;
    padding: 12px 14px;
    border-right: 4px solid var(--fun-yellow);
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.daily-hero-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.daily-pro-hint { font-size: 11px; font-weight: 600; color: var(--text-muted); line-height: 1.5; }
.daily-hero-footer .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px !important;
    font-size: 12px !important;
    box-shadow: 0 4px 0 #33259E !important;
}

/* ---------- Surfaces that still carried night-only literals ---------- */
.daily-challenge-card,
.scrubber-card {
    background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-surface) 100%);
}
.course-review-banner {
    background: linear-gradient(135deg, var(--accent-gold-bg) 0%, var(--bg-card) 100%);
    border: 2px solid var(--accent-gold-border);
    box-shadow: 0 4px 0 var(--accent-gold-border);
}
.mindmap-core-orb,
.tree-root-hub {
    background: radial-gradient(circle at center, var(--bg-elevated) 0%, var(--bg-surface) 100%);
}
html[data-theme="light"] .f-code-box {
    background: #F1EEFF;
}

/* ---------- Header v2: full title at every phone width ---------- */
.logo-mark {
    width: 42px;
    height: 42px;
    padding: 0;
    background: none;
    box-shadow: 0 4px 0 var(--fun-primary-deep), 0 8px 16px rgba(91, 76, 240, 0.28);
    overflow: hidden;
}
.logo-mark img { width: 100%; height: 100%; display: block; }
.app-title {
    font-size: 19px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}
.app-tagline {
    font-size: 11px;
    white-space: normal;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.header-actions { gap: 6px; }
.header-actions .icon-btn {
    width: 38px;
    height: 40px;
    border-radius: 12px;
}
@media (max-width: 360px) {
    .logo-mark { width: 36px; height: 36px; border-radius: 11px; }
    .app-title { font-size: 17px; }
    .header-actions { gap: 4px; }
    .header-actions .icon-btn { width: 34px; height: 38px; }
}

/* Brand logo inside mind-map orbs and tree root */
.brand-logo-img { width: 100%; height: 100%; display: block; border-radius: 28%; }
.brand-logo-hero {
    width: 52px;
    height: 52px;
    margin: 0 auto 8px;
    filter: drop-shadow(0 6px 12px rgba(91, 76, 240, 0.35));
}
.mindmap-core-icon .brand-logo-img { width: 44px; height: 44px; margin: 0 auto; }

/* ---------- Learner greeting (home) ---------- */
.fun-greeting {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 4px 14px;
}
.fun-greeting-avatar,
.fun-profile-avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 800;
    color: #fff;
    background: linear-gradient(145deg, var(--fun-orange), var(--fun-pink));
    box-shadow: 0 3px 0 var(--fun-pink-deep);
}
.fun-greeting-avatar { width: 46px; height: 46px; font-size: 22px; }
.fun-greeting-text { min-width: 0; }
.fun-greeting-hello {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.25;
}
.fun-greeting-sub {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ---------- Learner card (stats) ---------- */
.fun-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 197, 49, 0.22), transparent 50%),
        linear-gradient(150deg, var(--accent-indigo-bg), var(--bg-card));
    border: 2px solid var(--accent-indigo-border);
    box-shadow: 0 4px 0 var(--accent-indigo-border);
}
.fun-profile-avatar { width: 58px; height: 58px; font-size: 28px; }
.fun-profile-info { flex: 1; min-width: 0; }
.fun-profile-name {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fun-profile-since { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 6px; }
.fun-profile-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fun-profile-chips span {
    font-size: 11.5px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 99px;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1.5px solid var(--border-medium);
}
.fun-profile-edit {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 2px solid var(--border-medium);
    background: var(--bg-surface);
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--border-medium);
}

/* ---------- Settings: name + sound ---------- */
.fun-settings-profile {
    padding: 12px 20px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fun-field-label { font-size: 12px; font-weight: 800; color: var(--text-secondary); }
.fun-name-row { display: flex; gap: 8px; }
.fun-input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    border: 2px solid var(--border-medium);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: 'Cairo', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fun-input:focus { border-color: var(--fun-primary); box-shadow: 0 0 0 4px var(--accent-indigo-bg); }
.fun-btn-small {
    flex-shrink: 0;
    min-width: 72px;
    height: 46px;
    border: none;
    border-radius: 14px;
    background: var(--fun-primary);
    color: #fff;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 4px 0 var(--fun-primary-deep);
    cursor: pointer;
}
.fun-btn-small:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--fun-primary-deep); }
.fun-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    border: 2px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: 'Cairo', system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
.fun-switch {
    width: 46px;
    height: 26px;
    border-radius: 99px;
    background: var(--border-medium);
    position: relative;
    transition: background 0.2s ease;
}
.fun-switch i {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: right 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fun-switch-row[aria-checked="true"] .fun-switch { background: var(--fun-green); }
.fun-switch-row[aria-checked="true"] .fun-switch i { right: 23px; }

/* ---------- Welcome sheet ---------- */
.fun-welcome {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--overlay-scrim);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.fun-welcome.show { opacity: 1; }
.fun-welcome-card {
    width: 100%;
    max-width: 380px;
    padding: 26px 22px 18px;
    border-radius: 28px;
    text-align: center;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 92, 138, 0.18), transparent 45%),
        radial-gradient(circle at 0% 100%, rgba(255, 197, 49, 0.2), transparent 45%),
        var(--bg-card);
    border: 2px solid var(--border-medium);
    box-shadow: 0 6px 0 var(--border-medium), var(--shadow-lg);
    transform: translateY(24px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fun-welcome.show .fun-welcome-card { transform: none; }
.fun-welcome-logo {
    width: 84px;
    height: 84px;
    margin: 0 auto 12px;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(91, 76, 240, 0.35));
    animation: logoWiggle 4s ease-in-out infinite;
}
.fun-welcome-card h2 { font-size: 22px; color: var(--text-primary); margin: 0 0 6px; }
.fun-welcome-card p {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 16px;
}
.fun-welcome-card .fun-input { width: 100%; text-align: center; margin-bottom: 14px; }
.fun-btn-big {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 16px;
    background: var(--fun-green);
    color: #fff;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 5px 0 var(--fun-green-deep);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.2s ease;
}
.fun-btn-big:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--fun-green-deep); }
.fun-btn-big:disabled { opacity: 0.45; cursor: default; }
.fun-btn-link {
    margin-top: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-family: 'Cairo', system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
    .fun-welcome-logo { animation: none; }
    .fun-welcome-card { transition: none; }
}

/* ---------- Light theme: readable text over pastel literals ----------
   app.js/index.html carry night-mode pastel text colors inline; remap them
   to deeper shades of the same hue so light cards keep >= 4.5:1. */
html[data-theme="light"] {
    --accent-gold: #A85F00;
    --accent-gold-light: #C27400;
    --text-muted: #615C92;
}
html[data-theme="light"] [style*="color:#f59e0b" i],
html[data-theme="light"] [style*="color: #f59e0b" i],
html[data-theme="light"] [style*="color:#fbbf24" i],
html[data-theme="light"] [style*="color: #fbbf24" i],
html[data-theme="light"] [style*="color:#e08a00" i],
html[data-theme="light"] [style*="color: #e08a00" i],
html[data-theme="light"] [style*="color:#d4af37" i],
html[data-theme="light"] [style*="color: #d4af37" i],
html[data-theme="light"] [style*="color:#fcd34d" i],
html[data-theme="light"] [style*="color: #fcd34d" i],
html[data-theme="light"] .stat-chip-pill.streak,
html[data-theme="light"] .confusion-badge,
html[data-theme="light"] .demarcation-col.sibling .demarcation-col-title,
html[data-theme="light"] .demarcation-jump-btn {
    color: #A85F00 !important;
}
html[data-theme="light"] [style*="color:#10b981" i],
html[data-theme="light"] [style*="color: #10b981" i],
html[data-theme="light"] [style*="color:#34d399" i],
html[data-theme="light"] [style*="color: #34d399" i],
html[data-theme="light"] [style*="color:#6ee7b7" i],
html[data-theme="light"] [style*="color: #6ee7b7" i],
html[data-theme="light"] [style*="color:#059669" i],
html[data-theme="light"] [style*="color: #059669" i],
html[data-theme="light"] .stat-chip-pill.daily-goal,
html[data-theme="light"] .feedback-correct .feedback-title,
html[data-theme="light"] .demarcation-golden-rule strong,
html[data-theme="light"] .intensive-idx-cell.solved-correct,
html[data-theme="light"] .case-strip-pill.correct {
    color: #047857 !important;
}
html[data-theme="light"] [style*="color:#fb7185" i],
html[data-theme="light"] [style*="color: #fb7185" i],
html[data-theme="light"] [style*="color:#f43f5e" i],
html[data-theme="light"] [style*="color: #f43f5e" i],
html[data-theme="light"] [style*="color:#fda4af" i],
html[data-theme="light"] [style*="color: #fda4af" i],
html[data-theme="light"] [style*="color:#ef4444" i],
html[data-theme="light"] [style*="color: #ef4444" i],
html[data-theme="light"] [style*="color:#e11d48" i],
html[data-theme="light"] [style*="color: #e11d48" i],
html[data-theme="light"] .feedback-incorrect .feedback-title,
html[data-theme="light"] .intensive-idx-cell.solved-wrong,
html[data-theme="light"] .case-strip-pill.wrong,
html[data-theme="light"] .intensive-banner-badge,
html[data-theme="light"] .intensive-util-btn.danger {
    color: #C81E4A !important;
}
html[data-theme="light"] [style*="color:#0284c7" i],
html[data-theme="light"] [style*="color: #0284c7" i],
html[data-theme="light"] [style*="color:#38bdf8" i],
html[data-theme="light"] [style*="color: #38bdf8" i],
html[data-theme="light"] [style*="color:#0ea5e9" i],
html[data-theme="light"] [style*="color: #0ea5e9" i] {
    color: #0369A1 !important;
}
html[data-theme="light"] [style*="color:#818cf8" i],
html[data-theme="light"] [style*="color: #818cf8" i],
html[data-theme="light"] [style*="color:#a5b4fc" i],
html[data-theme="light"] [style*="color: #a5b4fc" i],
html[data-theme="light"] [style*="color:#8b5cf6" i],
html[data-theme="light"] [style*="color: #8b5cf6" i],
html[data-theme="light"] [style*="color:#6366f1" i],
html[data-theme="light"] [style*="color: #6366f1" i],
html[data-theme="light"] .intensive-util-btn {
    color: #4F3FD8 !important;
}
html[data-theme="light"] [style*="color:#ec4899" i],
html[data-theme="light"] [style*="color: #ec4899" i],
html[data-theme="light"] [style*="color:#f472b6" i],
html[data-theme="light"] [style*="color: #f472b6" i] {
    color: #B0237A !important;
}
html[data-theme="light"] [style*="color:#a855f7" i],
html[data-theme="light"] [style*="color: #a855f7" i],
html[data-theme="light"] [style*="color:#c4b5fd" i],
html[data-theme="light"] [style*="color: #c4b5fd" i] {
    color: #7E3AD6 !important;
}
html[data-theme="light"] .foundations-banner-btn,
html[data-theme="light"] .foundations-banner-btn span { color: #fff !important; }

/* ---------- Components that had markup but no CSS ---------- */

/* Skills matrix (stats) */
.competency-radar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.competency-pillar-card {
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    box-shadow: 0 3px 0 var(--border-medium);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.competency-pillar-card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--border-medium); }
.pillar-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pillar-icon { font-size: 20px; }
.pillar-pct {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--accent-indigo);
}
.pillar-name { font-size: 13px; font-weight: 800; color: var(--text-primary); line-height: 1.4; }
.pillar-sub { font-size: 11px; color: var(--text-muted); margin: 2px 0 8px; line-height: 1.4; }
.pillar-bar-track { height: 8px; border-radius: 99px; background: var(--bg-elevated); overflow: hidden; }
.pillar-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--fun-green), var(--fun-sky));
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Encyclopedia grid cards */
.card-header-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.card-category-tag,
.card-difficulty-tag {
    font-size: 10.5px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--accent-indigo-bg);
    color: var(--accent-indigo);
    border: 1px solid var(--accent-indigo-border);
}
.card-difficulty-tag { background: var(--accent-gold-bg); color: var(--accent-gold); border-color: var(--accent-gold-border); }
.card-star-btn {
    margin-inline-start: auto;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 2px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
}
.card-star-btn.starred { color: var(--fun-yellow); border-color: var(--accent-gold-border); background: var(--accent-gold-bg); }
.card-title-ar { font-size: 17px; font-weight: 800; color: var(--text-primary); margin: 0 0 2px; }
.card-title-en { font-size: 11.5px; color: var(--text-muted); margin: 0 0 8px; direction: ltr; text-align: right; }
.card-description { font-size: 13px; line-height: 1.75; color: var(--text-secondary); margin: 0; }
.card-footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1.5px dashed var(--border-subtle);
    font-size: 11.5px;
    color: var(--text-muted);
}
.card-read-indicator { font-weight: 800; color: var(--state-valid); }

/* Fallacy detail sheet */
.examples-list { display: flex; flex-direction: column; gap: 10px; }
.example-context {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 9px;
    margin-bottom: 6px;
    border-radius: 99px;
    background: var(--accent-gold-bg);
    color: var(--accent-gold);
}
.example-text { font-size: 13.5px; line-height: 1.8; color: var(--text-primary); margin: 0; }
.counter-box {
    margin-top: 14px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--state-valid-bg);
    border: 2px solid var(--state-valid-border);
}
.counter-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--state-valid);
    margin-bottom: 6px;
}
.counter-content { font-size: 13.5px; line-height: 1.8; color: var(--text-primary); margin: 0; }
.flaw-point { border-right: 4px solid var(--state-flaw); background: var(--state-flaw-bg); }
.action-point { border-right: 4px solid var(--state-inquiry); background: var(--state-inquiry-bg); }
.model-point { border-right: 4px solid var(--state-valid); background: var(--state-valid-bg); }
.flaw-point, .action-point, .model-point { border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.speaker-name { font-size: 12px; font-weight: 800; color: var(--text-secondary); }
.bubble-text { font-size: 13.5px; line-height: 1.75; margin: 0; color: inherit; }
.socratic { color: var(--state-inquiry); }
.tactic { color: var(--accent-gold); }
.mindmap-core-hub {
    text-align: center;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 50% 0%, var(--accent-indigo-bg), transparent 70%),
        var(--bg-card);
    border: 2px solid var(--accent-indigo-border);
    box-shadow: 0 4px 0 var(--accent-indigo-border);
    margin-bottom: 14px;
}

/* Academy empty / completion state */
.empty-state {
    text-align: center;
    padding: 28px 18px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    color: var(--text-primary);
}

/* Settings sheet */
.settings-tab-btn {
    flex: 1;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 14px;
    border: 2px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-family: 'Cairo', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
}
.settings-tab-btn.active {
    background: var(--accent-indigo-bg);
    color: var(--accent-indigo);
    border-color: var(--accent-indigo-border);
    box-shadow: 0 3px 0 var(--accent-indigo-border);
}
.settings-card,
.study-step-card {
    padding: 14px;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
}
.study-step-card { border-right: 4px solid var(--accent-indigo); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.switch-toggle { position: relative; flex-shrink: 0; width: 50px; height: 28px; display: inline-block; }
.switch-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.slider-toggle {
    position: absolute;
    inset: 0;
    border-radius: 99px;
    background: var(--border-medium);
    cursor: pointer;
    transition: background 0.2s ease;
}
.slider-toggle::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: right 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.switch-toggle input:checked + .slider-toggle { background: var(--fun-green); }
.switch-toggle input:checked + .slider-toggle::before { right: 26px; }
.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.time-btn {
    min-height: 44px;
    padding: 8px;
    border-radius: 12px;
    border: 2px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-family: 'Cairo', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}
.time-btn.active {
    border-color: var(--fun-primary);
    background: var(--accent-indigo-bg);
    color: var(--accent-indigo);
    box-shadow: 0 3px 0 var(--accent-indigo-border);
}

/* Dark: cooler glows so cards stay crisp on Midnight Ink */
html[data-theme="dark"] .course-continuation-card {
    background:
        radial-gradient(circle at 10% 0%, rgba(124, 108, 255, 0.32), transparent 48%),
        radial-gradient(circle at 100% 100%, rgba(56, 198, 255, 0.14), transparent 45%),
        var(--bg-card) !important;
}
html[data-theme="dark"] .daily-hero-card {
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 197, 49, 0.14), transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(56, 198, 255, 0.12), transparent 50%),
        var(--bg-card);
}

/* User-supplied neon icon: navy base, cyan glow */
.logo-mark { border-radius: 12px; box-shadow: 0 3px 0 #08182E, 0 6px 16px rgba(56, 198, 255, 0.35); }
.fun-welcome-logo, .brand-logo-hero { filter: drop-shadow(0 8px 16px rgba(56, 198, 255, 0.35)); }
.fun-welcome-logo { border-radius: 22%; }

/* ---------- About the app ---------- */
.fun-row-arrow { font-size: 22px; font-weight: 800; color: var(--text-muted); line-height: 1; }
.fun-about {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--overlay-scrim);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.fun-about.show { opacity: 1; }
.fun-about-sheet {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 22px 18px calc(22px + var(--safe-bottom, 0px));
    border-radius: 28px 28px 0 0;
    background: var(--bg-main);
    border-top: 2px solid var(--border-medium);
    transform: translateY(40px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fun-about.show .fun-about-sheet { transform: none; }
.fun-about-close {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 2px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}
.fun-about-hero { text-align: center; padding: 6px 0 16px; }
.fun-about-hero img {
    width: 92px;
    height: 92px;
    border-radius: 24px;
    filter: drop-shadow(0 8px 18px rgba(56, 198, 255, 0.35));
}
.fun-about-hero h2 { font-size: 24px; color: var(--text-primary); margin: 10px 0 2px; }
.fun-about-hero p { font-size: 13px; color: var(--text-secondary); margin: 0 0 8px; }
.fun-about-version {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    padding: 3px 12px;
    border-radius: 99px;
    background: var(--accent-indigo-bg);
    color: var(--accent-indigo);
    border: 1px solid var(--accent-indigo-border);
}
.fun-about-section {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
}
.fun-about-section h3 { font-size: 16px; color: var(--text-primary); margin: 0 0 8px; }
.fun-about-section p { font-size: 13.5px; line-height: 1.85; color: var(--text-secondary); margin: 0; }
.fun-about-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.fun-about-stats div {
    padding: 12px 8px;
    text-align: center;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    border: 2px solid var(--border-subtle);
    box-shadow: 0 3px 0 var(--border-medium);
}
.fun-about-stats b {
    display: block;
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.2;
    color: var(--accent-indigo);
}
.fun-about-stats div:nth-child(2) b { color: var(--state-valid); }
.fun-about-stats div:nth-child(3) b { color: var(--accent-gold); }
.fun-about-stats div:nth-child(4) b { color: var(--state-flaw); }
.fun-about-stats span { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.fun-about-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fun-about-steps div {
    text-align: center;
    padding: 10px 6px;
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}
.fun-about-steps i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin: 0 auto 6px;
    border-radius: 50%;
    font-style: normal;
    font-weight: 800;
    color: #fff;
    background: var(--fun-primary);
    box-shadow: 0 3px 0 var(--fun-primary-deep);
}
.fun-about-steps b { display: block; font-family: var(--font-display); font-size: 16px; color: var(--text-primary); }
.fun-about-steps span { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); }
.fun-about-features { display: flex; flex-direction: column; gap: 10px; }
.fun-about-feature { display: flex; gap: 12px; align-items: flex-start; }
.fun-about-feature > span {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 19px;
    background: var(--accent-indigo-bg);
}
.fun-about-feature b { display: block; font-size: 14px; color: var(--text-primary); margin-bottom: 2px; }
.fun-about-feature p { font-size: 12.5px; line-height: 1.7; }
.fun-about-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fun-about-tags span {
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 99px;
    background: var(--accent-gold-bg);
    color: var(--accent-gold);
    border: 1px solid var(--accent-gold-border);
}
.fun-about-cta { margin-top: 4px; }
.fun-about-entry {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    text-align: right;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-subtle);
    background: var(--bg-card);
    box-shadow: 0 3px 0 var(--border-medium);
    font-family: 'Cairo', system-ui, sans-serif;
    cursor: pointer;
}
.fun-about-entry img { width: 44px; height: 44px; border-radius: 12px; }
.fun-about-entry div { flex: 1; min-width: 0; }
.fun-about-entry b { display: block; font-size: 14px; color: var(--text-primary); }
.fun-about-entry div span { font-size: 11.5px; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) {
    .fun-about-sheet { transition: none; }
}

/* ---------- Progress backup ---------- */
.fun-backup-icon { font-size: 52px; line-height: 1.2; }
.fun-backup-actions { display: flex; gap: 8px; margin-top: 12px; }
.fun-backup-actions .fun-btn-small { flex: 1; }
.fun-btn-ghost { background: var(--bg-surface); color: var(--accent-indigo); border: 2px solid var(--accent-indigo-border); box-shadow: 0 3px 0 var(--accent-indigo-border); }
.fun-backup-text { width: 100%; height: auto; min-height: 96px; margin-top: 10px; padding: 10px 12px; font-size: 12px; font-family: monospace; direction: ltr; text-align: left; resize: vertical; }
.fun-backup-msg { min-height: 20px; margin: 8px 0 10px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.fun-backup-msg.good { color: var(--state-valid); }
.fun-backup-msg.bad { color: var(--state-flaw); }

/* ---------- Spot the fallacy (spot-game.js) ---------- */
.spot-entry {
    width: 100%;
    display: block;
    margin: 0 0 18px;
    padding: 16px;
    text-align: right;
    border-radius: var(--radius-lg);
    border: 2px solid rgba(43, 201, 110, 0.45);
    background:
        radial-gradient(circle at 0% 0%, rgba(43, 201, 110, 0.22), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(56, 198, 255, 0.16), transparent 50%),
        var(--bg-card);
    box-shadow: 0 4px 0 rgba(27, 154, 80, 0.35), var(--shadow-md);
    font-family: 'Cairo', system-ui, sans-serif;
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spot-entry:active { transform: scale(0.985); }
.spot-entry-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    margin-bottom: 10px;
    border-radius: 99px;
    background: var(--state-valid-bg);
    color: var(--state-valid);
    border: 1px solid var(--state-valid-border);
}
.spot-entry-row { display: flex; gap: 12px; align-items: center; }
.spot-entry-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    font-size: 28px;
    border-radius: 16px;
    background: linear-gradient(145deg, var(--fun-green), var(--fun-sky));
    box-shadow: 0 4px 0 var(--fun-green-deep);
}
.spot-entry-text b { display: block; font-family: var(--font-display); font-size: 19px; }
.spot-entry-text span { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.spot-entry-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1.5px dashed var(--border-subtle);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}
.spot-entry-go { color: var(--state-valid); font-weight: 800; }

.spot-game {
    position: fixed;
    inset: 0;
    z-index: 5500;
    display: flex;
    flex-direction: column;
    background: var(--bg-main);
    padding-top: var(--safe-top, 28px);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.spot-game.show { opacity: 1; transform: none; }
.spot-top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.spot-close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 2px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}
.spot-progress { flex: 1; height: 14px; border-radius: 99px; background: var(--bg-elevated); overflow: hidden; }
.spot-progress i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--fun-green), var(--fun-sky));
    transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.spot-score { flex-shrink: 0; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--accent-gold); }
.spot-body { flex: 1; overflow-y: auto; padding: 6px 16px calc(24px + var(--safe-bottom, 0px)); }
.spot-kicker { font-size: 12px; font-weight: 800; color: var(--accent-indigo); margin-bottom: 4px; }
.spot-title { font-size: 20px; color: var(--text-primary); margin: 0 0 4px; line-height: 1.4; }
.spot-context { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 10px; line-height: 1.6; }
.spot-prompt {
    font-size: 13.5px;
    font-weight: 800;
    padding: 10px 12px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--accent-gold-bg);
    color: var(--accent-gold);
}
.spot-turns { display: flex; flex-direction: column; gap: 10px; }
.spot-turn {
    max-width: 92%;
    padding: 10px 14px;
    text-align: right;
    border-radius: 18px;
    border: 2px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 3px 0 var(--border-medium);
    font-family: 'Cairo', system-ui, sans-serif;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.15s ease, opacity 0.2s ease;
}
.spot-turn.side-a { align-self: flex-start; border-top-right-radius: 6px; }
.spot-turn.side-b { align-self: flex-end; border-top-left-radius: 6px; background: var(--accent-indigo-bg); }
.spot-turn:active:not(:disabled) { transform: translateY(2px); }
.spot-speaker { display: block; font-size: 11.5px; font-weight: 800; color: var(--accent-indigo); margin-bottom: 2px; }
.spot-text { display: block; font-size: 14px; line-height: 1.8; }
.spot-turn.ok, .spot-name.ok {
    border-color: var(--fun-green);
    background: var(--state-valid-bg);
    box-shadow: 0 3px 0 var(--fun-green-deep);
    animation: optPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spot-turn.bad, .spot-name.bad {
    border-color: var(--fun-pink);
    background: var(--state-flaw-bg);
    box-shadow: 0 3px 0 var(--fun-pink-deep);
    animation: optShake 0.4s ease;
}
.spot-turn.dim, .spot-name.dim { opacity: 0.5; }
.spot-turn:disabled, .spot-name:disabled { cursor: default; color: var(--text-primary); }
.spot-feedback {
    margin-top: 14px;
    padding: 14px;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-subtle);
    background: var(--bg-card);
    animation: riseIn 0.35s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
.spot-feedback[hidden] { display: none; }
.spot-feedback.good { border-color: var(--state-valid-border); background: var(--state-valid-bg); }
.spot-feedback.bad { border-color: var(--state-flaw-border); background: var(--state-flaw-bg); }
.spot-feedback > b { display: block; font-size: 15px; margin-bottom: 6px; color: var(--text-primary); }
.spot-feedback p { font-size: 13.5px; line-height: 1.8; color: var(--text-secondary); margin: 0 0 8px; }
.spot-feedback strong { color: var(--text-primary); }
.spot-feedback q, .spot-quote {
    display: block;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-right: 4px solid var(--fun-pink);
    border-radius: 10px;
    background: var(--bg-surface);
    font-size: 14px;
    line-height: 1.8;
    font-weight: 700;
    color: var(--text-primary);
    quotes: '«' '»';
}
.spot-quote { margin: 8px 0 14px; }
.spot-names { display: flex; flex-direction: column; gap: 10px; }
.spot-name {
    min-height: 56px;
    padding: 10px 14px;
    text-align: right;
    border-radius: 16px;
    border: 2px solid var(--border-subtle);
    background: var(--bg-card);
    box-shadow: 0 3px 0 var(--border-medium);
    font-family: 'Cairo', system-ui, sans-serif;
    color: var(--text-primary);
    cursor: pointer;
}
.spot-name b { display: block; font-size: 15px; }
.spot-name span { font-size: 11.5px; color: var(--text-muted); direction: ltr; display: block; text-align: right; }
.spot-result { text-align: center; padding-top: 24px; }
.spot-stars { font-size: 48px; letter-spacing: 6px; color: var(--bg-elevated); }
.spot-stars .on { color: var(--fun-yellow); text-shadow: 0 4px 0 var(--fun-yellow-deep); }
.spot-result h2 { font-size: 21px; color: var(--text-primary); margin: 8px 0 12px; line-height: 1.5; }
.spot-result-score b { display: block; font-family: var(--font-display); font-size: 56px; line-height: 1.1; color: var(--accent-indigo); }
.spot-result-score span { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
.spot-result-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0; }
.spot-result-chips span {
    font-size: 13px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 99px;
    background: var(--bg-card);
    border: 2px solid var(--border-medium);
    color: var(--text-primary);
}
.spot-result-note { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin: 0 0 16px; }
@media (prefers-reduced-motion: reduce) {
    .spot-game, .spot-progress i { transition: none; }
}