/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* ─────────────────────────────────────────────────────────────
       App theme (seeded from learningcurve_app #005377, Material 3)
       Revamp: playful accents, teal-tinted shadows, Duolingo-style
       press buttons, friendlier radii. Keeps mobile palette intact.
       ───────────────────────────────────────────────────────────── */

    /* Brand — primary teal scale (matches mobile) */
    --primary-color: #005377;
    --primary-600: #004a6b;
    --primary-700: #003d58;   /* pressed/darker — used for button undershadow */
    --primary-800: #002e45;
    --primary-container: #cce5f0;
    --primary-container-strong: #8dc4da;

    --secondary-color: #4a90a4;
    --secondary-container: #e0f2f7;
    --tertiary-color: #006d5b;
    --tertiary-700: #005246;

    /* Playful accents (echo the mobile celebration palette) */
    --accent-sunny: #facc15;
    --accent-sunny-soft: #fde68a;
    --accent-sunny-dark: #a16207;
    --accent-sunny-bg: #fef9c3;
    --accent-peach: #ff9500;
    --accent-peach-bg: #fff4e0;
    --accent-coral: #ff6b6b;
    --accent-coral-bg: #ffecec;
    --accent-mint: #22c55e;
    --accent-mint-bg: #d1fae5;
    --accent-mint-dark: #065f46;
    --accent-sky: #3b82f6;
    --accent-sky-bg: #dbeafe;
    --accent-sky-dark: #1d4ed8;
    --accent-grape: #a855f7;
    --accent-grape-bg: #f3e8ff;

    /* Status colors */
    --success-color: #22c55e;
    --warning-color: #f59e0b;
    --error-color: #ef4444;

    /* Surfaces */
    --bg-color: #f4f8fb;          /* slightly cooler, softer */
    --bg-tint: #eaf3f7;           /* empty-state tinted wells */
    --card-bg: #ffffff;
    --card-bg-soft: #fbfcfe;
    --text-color: #0f2a3a;        /* deeper, more readable than #1a1a1a */
    --text-light: #5a6c78;
    --text-muted: #8094a0;
    --border-color: #e4edf2;
    --border-strong: #c9d7df;

    /* Elevation — soft, teal-tinted shadows (friendlier than neutral grey) */
    --shadow-sm: 0 1px 2px rgba(15, 42, 58, 0.05);
    --shadow: 0 2px 6px rgba(15, 42, 58, 0.07), 0 1px 2px rgba(15, 42, 58, 0.04);
    --shadow-lg: 0 10px 24px rgba(15, 42, 58, 0.12), 0 4px 8px rgba(15, 42, 58, 0.05);
    --shadow-glow: 0 6px 18px rgba(0, 83, 119, 0.18);

    /* Radii — friendlier */
    --radius-sm: 10px;
    --radius-button: 14px;
    --radius-card: 18px;
    --radius-card-lg: 22px;
    --radius-pill: 999px;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    margin: 0;
    padding: 0;
}

/* Playful headline font */
.playful-font {
    font-family: 'Gloria Hallelujah', cursive;
}

/* Stories: keep the page UI in the app font; Garamond only for the reader text. */
.story-reader-panel,
.story-reader-text {
    font-family: 'EB Garamond', Garamond, 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
}

h1, h2, h3, .card-title, .logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

/* Sidebar — full styles managed in base.html; keep minimal fallback here */
.sidebar {
    width: 64px;
    background-color: var(--card-bg);
    border-right: 2px solid var(--border-color);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    z-index: 1000;
    overflow: hidden;
    transition: width 0.25s ease;
}

.sidebar-header {
    padding: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    text-decoration: none;
}

.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-color);
    cursor: pointer;
    padding: 0.5rem;
}

.sidebar-nav {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}

.sidebar-user {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.sidebar-user-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.sidebar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-avatar-default {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.user-info {
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.95rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.sidebar-link:hover {
    background-color: var(--bg-color);
    color: var(--primary-color);
    border-left-color: var(--primary-color);
}

.sidebar-link.active {
    background-color: #e0e7ff;
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    font-weight: 600;
}

.sidebar-link i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
}

.sidebar-link-logout {
    color: var(--error-color);
}

.sidebar-link-logout:hover {
    background-color: #fee2e2;
    border-left-color: var(--error-color);
}

.sidebar-link-locked {
    opacity: 0.7;
    position: relative;
    cursor: pointer;
}

.sidebar-link-locked:hover {
    opacity: 1;
    background-color: #fef3c7;
    border-left-color: var(--warning-color);
}

.sidebar-lock-icon {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--text-light);
    opacity: 0.6;
}

.sidebar-link-locked:hover .sidebar-lock-icon {
    opacity: 1;
    color: var(--warning-color);
}

.sidebar-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 0.5rem 1.5rem;
}

/* Sidebar Overlay (Mobile) */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Main Wrapper — desktop uses 64px rail; overridden to 0 on mobile in base.html */
.main-wrapper {
    flex: 1;
    margin-left: 64px;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1001;
    background-color: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1.25rem;
    color: var(--text-color);
    cursor: pointer;
    box-shadow: var(--shadow);
}

.mobile-menu-toggle:hover {
    background-color: var(--bg-color);
}

.notif-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 4px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
    color: #fff;
    background: #ef4444;
    border-radius: 999px;
}

.notif-badge-inline {
    top: -6px;
    right: -8px;
}

.notification-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notification-item {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.12s ease, box-shadow 0.2s ease;
}

.notification-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.notification-item-unread {
    background: rgba(59, 130, 246, 0.06);
}

.notification-item-form {
    margin: 0;
}

.notification-item-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.9rem 1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.notification-item-btn:hover {
    background: rgba(0, 0, 0, 0.03);
}

.notification-item-title {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.notification-item-body {
    display: block;
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.notification-item-meta {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Get App Button (Top Right) */
.get-app-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
    background-color: var(--card-bg);
    border: 2px solid var(--primary-color);
    border-radius: 6px;
    text-decoration: none;
    box-shadow: var(--shadow);
}

.get-app-btn-icon {
    font-size: 1rem;
    line-height: 1;
}

.get-app-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Main Content */
.main-content {
    flex: 1;
    padding: 2rem 0;
}

/* Back link — used at the top of level-2 pages */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--primary-color);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 0.875rem;
}
.back-link:hover { opacity: 0.75; }
.back-link i { font-size: 0.72rem; }

/* Messages */
.messages {
    margin-bottom: 1.5rem;
}

.message {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.message-success {
    background-color: #d1fae5;
    color: #065f46;
    border-left: 4px solid var(--success-color);
}

.message-error {
    background-color: #fee2e2;
    color: #991b1b;
    border-left: 4px solid var(--error-color);
}

.message-warning {
    background-color: #fef3c7;
    color: #92400e;
    border-left: 4px solid var(--warning-color);
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border-radius: var(--radius-card-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.card-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.875rem;
    color: var(--primary-color);
}

/* Buttons — Duolingo-style "chunky" press with a subtle undershadow lip.
   The transform/box-shadow combo gives a satisfying push-down on :active. */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-button);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    position: relative;
    transition: transform 0.08s ease, box-shadow 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
    will-change: transform;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 3px 0 0 var(--primary-700);
}

.btn-primary:hover {
    background-color: #0a6189;
    box-shadow: 0 4px 0 0 var(--primary-700), var(--shadow-glow);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 0 var(--primary-700);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
    box-shadow: 0 3px 0 0 #32718a;
}

.btn-secondary:hover {
    background-color: #5aa0b4;
    transform: translateY(-1px);
    box-shadow: 0 4px 0 0 #32718a;
}

.btn-secondary:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 0 #32718a;
}

.btn-success {
    background-color: var(--success-color);
    color: white;
    box-shadow: 0 3px 0 0 #15803d;
}

.btn-success:hover {
    background-color: #16a34a;
    transform: translateY(-1px);
    box-shadow: 0 4px 0 0 #15803d;
}

.btn-success:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 0 #15803d;
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-color);
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Topic Cards */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.topic-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-card);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    border: 1px solid var(--border-color);
}

.topic-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-container-strong);
}

.topic-card h2 {
    color: var(--primary-color);
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}

.topic-card p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.45;
}

/* ========== Play Hub (app-style home) ========== */
.play-hub-page {
    min-height: 100vh;
    padding-bottom: 2rem;
}

.play-hub-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--tertiary-color) 100%);
    color: white;
    padding: 1.25rem 1.5rem 1.5rem;
    /* Keep header within the card padding on all screen sizes to avoid horizontal overflow */
    margin: 0 0 1.5rem 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    position: relative;
}

.play-hub-header .play-hub-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: rgba(255, 255, 255, 0.98);
}

.player-card {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    padding: 1rem 1.1rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.08);
}

.player-card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.player-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.player-card-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.player-card-info {
    flex: 1;
    min-width: 0;
}

.player-card-greeting {
    font-weight: 700;
    font-size: 1rem;
    color: white;
    margin: 0 0 0.125rem 0;
}

.player-card-meta {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.player-card-rank {
    background: rgba(255, 255, 255, 0.25);
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.player-card-xp {
    height: 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.player-card-xp-bar {
    height: 100%;
    border-radius: var(--radius-pill);
    background: #fcd34d;
    transition: width 0.3s ease;
}

.player-card-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.95);
}

.player-card-streak {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.player-card-streak i {
    color: #fdba74;
}

/* Welcome to akiliQuest features (below Play Hub header) */
.welcome-features {
    background: linear-gradient(135deg, var(--primary-container) 0%, var(--secondary-container) 100%);
    border-left: 4px solid var(--primary-color);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-card);
    margin-bottom: 1.5rem;
}

.welcome-features-lead {
    font-size: 1.05rem;
    color: var(--text-color);
    margin: 0 0 1rem 0;
    font-weight: 600;
}

.welcome-features-list {
    color: var(--text-color);
    margin: 0;
    padding-left: 1.5rem;
    line-height: 1.8;
}

.welcome-features-list li {
    margin-bottom: 0.25rem;
}

.welcome-features-cta {
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 600;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-color);
    margin: 0 0 0.75rem 0;
}

/* Icon-chip: tinted pill so section headers feel playful/friendly */
.section-title i {
    font-size: 0.9rem;
    color: var(--primary-color);
    background: var(--primary-container);
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Horizontal scroll sections (mobile-first, app-like) */
.quest-cards-scroll,
.contest-cards-scroll {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.9rem;
    margin-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.quest-cards-scroll::-webkit-scrollbar,
.contest-cards-scroll::-webkit-scrollbar {
    height: 6px;
}

/* Today's Missions: responsive grid that fills available space */
.missions-carousel-wrap {
    margin-bottom: 1.5rem;
}

/* Hide the carousel arrows — grid layout doesn't scroll */
.missions-carousel-wrap > .carousel-arrow {
    display: none !important;
}

.quest-cards-scroll.missions-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    overflow: visible;
    margin-bottom: 0;
    padding: 0;
    scroll-snap-type: none;
}

/* Mobile web view — 2 columns at 50% each */
@media (max-width: 767px) {
    .quest-cards-scroll.missions-carousel {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
}

.quest-cards-scroll.missions-carousel .quest-card {
    scroll-snap-align: none;
    width: auto;
    flex: unset;
}

.missions-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.35rem 0 0.15rem;
    min-height: 1.25rem;
}

.missions-carousel-dot {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: none;
    padding: 0;
    margin: 0;
    background: var(--border-color);
    cursor: pointer;
    opacity: 0.55;
    transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
    /* Visual dot is smaller via box-shadow; full 24px is for tap target */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.missions-carousel-dot::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: inherit;
    display: block;
}

.missions-carousel-dot:hover {
    opacity: 0.9;
}

.missions-carousel-dot[aria-current='true'] {
    background: var(--primary-color);
    opacity: 1;
}
.missions-carousel-dot[aria-current='true']::after {
    width: 10px;
    height: 10px;
}

.quest-card,
.contest-card {
    flex: 0 0 auto;
    border-radius: var(--radius-card);
    padding: 1rem 1rem 0.95rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid var(--border-color);
    cursor: pointer;
    display: block;
    text-align: left;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.quest-card {
    width: 220px;
    min-height: 170px;
    background: var(--card-bg);
    box-shadow: var(--shadow);
}

/* A soft accent bar across the top — rotates through the playful palette
   so the carousel doesn't feel monochrome. Purely visual, no new widget. */
.quest-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    background: var(--primary-color);
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
}

/* Accent bar colour matches each mission's icon theme. */
.quest-cards-scroll.missions-carousel .quest-card.mission--cbc::before { background: var(--accent-sunny); }
.quest-cards-scroll.missions-carousel .quest-card.mission--trivia::before { background: var(--accent-peach); }
.quest-cards-scroll.missions-carousel .quest-card.mission--groups::before { background: var(--accent-grape); }
.quest-cards-scroll.missions-carousel .quest-card.mission--stories::before { background: var(--accent-mint); }
.quest-cards-scroll.missions-carousel .quest-card.mission--cognitive::before { background: #6366f1; }
.quest-cards-scroll.missions-carousel .quest-card.mission--level_up::before { background: var(--accent-coral); }

/* ── Today's Missions: decorative SVG scenes in each card ───── */
.quest-cards-scroll.missions-carousel .quest-card::after {
    content: '';
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 112px;
    height: 112px;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.quest-cards-scroll.missions-carousel .quest-card:hover::after {
    opacity: 0.8;
    transform: translate(-3px, -3px) rotate(-2deg);
}

/* Groups: friends circle with chat bubble + hearts (grape) */
.quest-cards-scroll.missions-carousel .quest-card.mission--groups::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><circle cx='22' cy='20' r='2.5' fill='%23c084fc'/><circle cx='96' cy='18' r='2' fill='%23a855f7'/><circle cx='108' cy='48' r='2.5' fill='%23c084fc'/><path d='M14 38 Q14 30 22 30 L46 30 Q54 30 54 38 L54 52 Q54 60 46 60 L30 60 L24 68 L26 60 L22 60 Q14 60 14 52 Z' fill='%23c084fc'/><path d='M26 42 Q26 38 30 38 Q32 38 32 40 Q32 38 34 38 Q38 38 38 42 Q38 48 32 52 Q26 48 26 42 Z' fill='white'/><path d='M40 42 Q40 38 44 38 Q46 38 46 40 Q46 38 48 38 Q52 38 52 42 Q52 48 46 52 Q40 48 40 42 Z' fill='white' opacity='0.7'/><circle cx='28' cy='86' r='8' fill='%23a855f7'/><path d='M14 114 Q14 98 28 96 Q42 98 42 114 L42 124 L14 124 Z' fill='%23a855f7'/><circle cx='70' cy='80' r='10' fill='%23c084fc'/><path d='M52 116 Q52 94 70 92 Q88 94 88 116 L88 126 L52 126 Z' fill='%23c084fc'/><circle cx='106' cy='86' r='7' fill='%23a855f7'/><path d='M94 114 Q94 100 106 98 Q118 100 118 114 L118 124 L94 124 Z' fill='%23a855f7'/><path d='M64 74 L66 78 L70 78 L67 81 L68 85 L64 83 L60 85 L61 81 L58 78 L62 78 Z' fill='%23fde047' opacity='0.9'/></svg>");
}

/* Trivia: lightbulb + quiz card + sparkles (peach) */
.quest-cards-scroll.missions-carousel .quest-card.mission--trivia::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><line x1='14' y1='20' x2='14' y2='30' stroke='%23ff9500' stroke-width='2.2' stroke-linecap='round'/><line x1='9' y1='25' x2='19' y2='25' stroke='%23ff9500' stroke-width='2.2' stroke-linecap='round'/><circle cx='98' cy='24' r='2.5' fill='%23f59e0b'/><circle cx='22' cy='86' r='2' fill='%23ff9500'/><line x1='98' y1='54' x2='98' y2='60' stroke='%23facc15' stroke-width='2' stroke-linecap='round'/><line x1='94' y1='57' x2='102' y2='57' stroke='%23facc15' stroke-width='2' stroke-linecap='round'/><ellipse cx='60' cy='42' rx='18' ry='20' fill='%23ff9500'/><ellipse cx='55' cy='37' rx='6' ry='8' fill='white' opacity='0.4'/><rect x='52' y='58' width='16' height='6' fill='%23c2410c'/><rect x='54' y='64' width='12' height='4' fill='%23c2410c' opacity='0.75'/><line x1='60' y1='12' x2='60' y2='19' stroke='%23facc15' stroke-width='2.5' stroke-linecap='round'/><line x1='33' y1='42' x2='40' y2='42' stroke='%23facc15' stroke-width='2.5' stroke-linecap='round'/><line x1='87' y1='42' x2='80' y2='42' stroke='%23facc15' stroke-width='2.5' stroke-linecap='round'/><line x1='40' y1='22' x2='45' y2='27' stroke='%23facc15' stroke-width='2.5' stroke-linecap='round'/><line x1='80' y1='22' x2='75' y2='27' stroke='%23facc15' stroke-width='2.5' stroke-linecap='round'/><rect x='26' y='78' width='68' height='40' rx='6' fill='%23ff9500'/><rect x='26' y='78' width='68' height='40' rx='6' fill='white' opacity='0.12'/><circle cx='37' cy='90' r='3.5' fill='white'/><rect x='45' y='87' width='42' height='3.5' rx='1.5' fill='white'/><circle cx='37' cy='104' r='3.5' fill='white' opacity='0.55'/><rect x='45' y='101' width='36' height='3.5' rx='1.5' fill='white' opacity='0.55'/></svg>");
}

/* Stories: open book with castle + moon + stars (mint) */
.quest-cards-scroll.missions-carousel .quest-card.mission--stories::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><circle cx='22' cy='16' r='1.8' fill='%2322c55e'/><circle cx='44' cy='22' r='1.5' fill='%2322c55e'/><circle cx='108' cy='20' r='1.8' fill='%2322c55e'/><circle cx='92' cy='32' r='8' fill='%2322c55e'/><path d='M89 26 A7 7 0 1 0 89 38 A5 5 0 1 1 89 26 Z' fill='white' opacity='0.6'/><rect x='46' y='52' width='7' height='20' fill='%23065f46'/><polygon points='46,52 49.5,46 53,52' fill='%23065f46'/><rect x='57' y='42' width='10' height='30' fill='%23065f46'/><polygon points='57,42 62,32 67,42' fill='%23065f46'/><rect x='71' y='48' width='7' height='24' fill='%23065f46'/><polygon points='71,48 74.5,40 78,48' fill='%23065f46'/><rect x='60' y='52' width='4' height='6' fill='%23facc15' opacity='0.8'/><path d='M8 72 Q8 66 14 66 L58 74 L58 118 L14 118 Q8 118 8 112 Z' fill='%2322c55e'/><path d='M62 74 L106 66 Q112 66 112 72 L112 112 Q112 118 106 118 L62 118 Z' fill='%2322c55e'/><rect x='58' y='72' width='4' height='46' fill='%23065f46'/><path d='M16 82 L52 84' stroke='white' stroke-width='1.6' opacity='0.6' stroke-linecap='round'/><path d='M16 90 L50 92' stroke='white' stroke-width='1.6' opacity='0.6' stroke-linecap='round'/><path d='M16 98 L46 100' stroke='white' stroke-width='1.6' opacity='0.6' stroke-linecap='round'/><path d='M68 84 L104 82' stroke='white' stroke-width='1.6' opacity='0.6' stroke-linecap='round'/><path d='M70 92 L104 90' stroke='white' stroke-width='1.6' opacity='0.6' stroke-linecap='round'/><path d='M72 100 L102 98' stroke='white' stroke-width='1.6' opacity='0.6' stroke-linecap='round'/></svg>");
}

/* CBC: graduation cap + diploma scroll + confetti (sunny) */
.quest-cards-scroll.missions-carousel .quest-card.mission--cbc::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><circle cx='18' cy='18' r='2.5' fill='%23facc15'/><circle cx='106' cy='20' r='2' fill='%23facc15'/><circle cx='108' cy='54' r='1.8' fill='%23facc15'/><circle cx='16' cy='52' r='2' fill='%23facc15'/><rect x='10' y='36' width='4' height='4' fill='%23facc15' transform='rotate(35 12 38)'/><rect x='104' y='38' width='4' height='4' fill='%23facc15' transform='rotate(-25 106 40)'/><rect x='24' y='24' width='3' height='3' fill='%23f59e0b'/><polygon points='60,14 112,38 60,62 8,38' fill='%23facc15'/><polygon points='60,14 112,38 60,50' fill='white' opacity='0.22'/><path d='M24 44 L24 66 Q24 82 60 82 Q96 82 96 66 L96 44 L60 60 Z' fill='%23a16207'/><path d='M24 44 L60 60 L60 70 L24 54 Z' fill='black' opacity='0.15'/><line x1='102' y1='38' x2='102' y2='68' stroke='%23facc15' stroke-width='3.5' stroke-linecap='round'/><circle cx='102' cy='72' r='4.5' fill='%23facc15'/><circle cx='102' cy='72' r='2.5' fill='%23a16207'/><rect x='32' y='90' width='56' height='24' rx='4' fill='%23fef9c3'/><rect x='32' y='90' width='56' height='24' rx='4' fill='%23a16207' opacity='0.08'/><circle cx='32' cy='102' r='5' fill='%23facc15'/><circle cx='88' cy='102' r='5' fill='%23facc15'/><circle cx='32' cy='102' r='2.5' fill='%23a16207'/><circle cx='88' cy='102' r='2.5' fill='%23a16207'/><path d='M42 98 L78 98' stroke='%23a16207' stroke-width='1.6' opacity='0.75' stroke-linecap='round'/><path d='M42 104 L74 104' stroke='%23a16207' stroke-width='1.6' opacity='0.75' stroke-linecap='round'/><path d='M42 110 L68 110' stroke='%23a16207' stroke-width='1.6' opacity='0.55' stroke-linecap='round'/></svg>");
}

/* Cognitive: brain with folds + thinking sparks (indigo) */
.quest-cards-scroll.missions-carousel .quest-card.mission--cognitive::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><circle cx='20' cy='24' r='2.5' fill='%23818cf8'/><circle cx='100' cy='18' r='2' fill='%236366f1'/><circle cx='110' cy='50' r='2.2' fill='%23818cf8'/><circle cx='16' cy='84' r='2' fill='%236366f1'/><path d='M58 40 Q40 36 36 54 Q24 58 28 74 Q24 88 40 92 Q44 104 60 100 L60 40 Z' fill='%236366f1'/><path d='M62 40 Q80 36 84 54 Q96 58 92 74 Q96 88 80 92 Q76 104 60 100 L60 40 Z' fill='%23818cf8'/><line x1='60' y1='42' x2='60' y2='98' stroke='white' stroke-width='2' opacity='0.5'/><path d='M44 54 Q52 56 50 64' stroke='white' stroke-width='1.6' fill='none' opacity='0.55'/><path d='M40 78 Q48 76 50 84' stroke='white' stroke-width='1.6' fill='none' opacity='0.55'/><path d='M76 54 Q68 56 70 64' stroke='white' stroke-width='1.6' fill='none' opacity='0.55'/><path d='M80 78 Q72 76 70 84' stroke='white' stroke-width='1.6' fill='none' opacity='0.55'/><path d='M101 70 L103 75 L108 75 L104 78 L105 83 L101 80 L97 83 L98 78 L94 75 L99 75 Z' fill='%23fde047' opacity='0.9'/></svg>");
}

/* Level Up: rocket launching with up arrow + stars (coral) */
.quest-cards-scroll.missions-carousel .quest-card.mission--level_up::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><circle cx='22' cy='28' r='2.2' fill='%23fb7185'/><circle cx='98' cy='20' r='2.4' fill='%23f43f5e'/><circle cx='108' cy='54' r='1.8' fill='%23fb7185'/><path d='M60 36 Q76 54 76 82 L44 82 Q44 54 60 36 Z' fill='%23fb7185'/><path d='M60 36 Q68 45 72 60 L60 60 Z' fill='white' opacity='0.18'/><circle cx='60' cy='62' r='7' fill='white' opacity='0.9'/><circle cx='60' cy='62' r='3.5' fill='%23f43f5e'/><path d='M44 74 L33 92 L44 86 Z' fill='%23f43f5e'/><path d='M76 74 L87 92 L76 86 Z' fill='%23f43f5e'/><path d='M50 84 Q60 110 70 84 Q60 96 50 84 Z' fill='%23facc15'/><path d='M55 84 Q60 100 65 84 Z' fill='%23ff9500'/><path d='M94 100 L102 90 L110 100' stroke='%23f43f5e' stroke-width='3' fill='none' stroke-linecap='round' stroke-linejoin='round'/><line x1='102' y1='90' x2='102' y2='108' stroke='%23f43f5e' stroke-width='3' stroke-linecap='round'/></svg>");
}

.quest-card:hover,
.contest-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-container-strong);
}

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

.quest-card-reward {
    flex-shrink: 0;
    display: inline-block;
    background: var(--primary-container);
    color: var(--primary-color);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
}

.quest-card-title {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

.quest-card-subtitle {
    font-size: 0.8rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.35;
}

.contest-card {
    width: 260px;
    min-height: 150px;
    background: var(--secondary-container);
    background: color-mix(in srgb, var(--secondary-container) 70%, var(--card-bg));
    border-color: color-mix(in srgb, var(--secondary-container) 90%, var(--border-color));
}

/* Rotate tints across the contest carousel so it reads as a cheerful set */
.contest-cards-scroll .contest-card:nth-of-type(3n+2) {
    background: color-mix(in srgb, var(--accent-sunny-bg) 80%, var(--card-bg));
    border-color: color-mix(in srgb, var(--accent-sunny-bg) 90%, var(--border-color));
}
.contest-cards-scroll .contest-card:nth-of-type(3n+3) {
    background: color-mix(in srgb, var(--accent-mint-bg) 70%, var(--card-bg));
    border-color: color-mix(in srgb, var(--accent-mint-bg) 90%, var(--border-color));
}

/* Time floats right; title text wraps beside it (same visual row at the top). */
.contest-card-title-row {
    display: flow-root;
    margin-bottom: 0.25rem;
}

.contest-card-title-row .contest-card-time {
    float: right;
    margin-left: 0.5rem;
    margin-bottom: 0.1rem;
    max-width: 45%;
    text-align: right;
    line-height: 1.3;
}

.contest-card-title-row .contest-card-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-color);
}

.contest-card-badge {
    display: inline-block;
    background: var(--tertiary-color);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 0.35rem;
}

.contest-card-time {
    font-size: 0.7rem;
    color: var(--text-light);
}

.contest-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--text-color);
}

.contest-card-desc {
    font-size: 0.8rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.35;
}

.contest-card-join {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.contest-card-join:hover {
    text-decoration: underline;
}

/* Quiz categories grid (app order: Progressive Learning, Grade 1, Reasoning, Trivia, Stories) */
.home-categories-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, 1fr);
}

.home-category-card {
    background: var(--card-bg);
    border-radius: var(--radius-card);
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    border: 1px solid var(--border-color);
}

.home-category-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-container-strong);
}

.home-category-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-container), var(--secondary-container));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--primary-color);
    margin-bottom: 0.85rem;
    box-shadow: inset 0 -3px 0 rgba(15, 42, 58, 0.05);
}

/* Rotate icon tile colors so the grid feels cheerful, not monochrome */
.home-categories-grid .home-category-card:nth-of-type(5n+2) .home-category-icon {
    background: linear-gradient(135deg, var(--accent-peach-bg), #ffe4bf);
    color: var(--accent-peach);
}
.home-categories-grid .home-category-card:nth-of-type(5n+3) .home-category-icon {
    background: linear-gradient(135deg, var(--accent-mint-bg), #a7f3d0);
    color: var(--accent-mint-dark);
}
.home-categories-grid .home-category-card:nth-of-type(5n+4) .home-category-icon {
    background: linear-gradient(135deg, var(--accent-grape-bg), #e9d5ff);
    color: #7e22ce;
}
.home-categories-grid .home-category-card:nth-of-type(5n+5) .home-category-icon {
    background: linear-gradient(135deg, var(--accent-sunny-bg), var(--accent-sunny-soft));
    color: var(--accent-sunny-dark);
}

.home-category-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.home-category-card p {
    font-size: 0.7rem;
    color: var(--text-light);
    margin: 0;
    line-height: 1.35;
    flex: 1;
}

.home-category-play {
    display: inline-block;
    margin-top: auto;
    padding: 0.35rem 0.65rem;
    background: var(--primary-container);
    color: var(--primary-color);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
    width: fit-content;
}

/* Level List */
.level-list {
    list-style: none;
    margin-top: 1.5rem;
}

.level-item {
    background-color: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.level-item.locked {
    opacity: 0.6;
    background-color: #f3f4f6;
}

.level-info h3 {
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.level-info p {
    color: var(--text-light);
    font-size: 0.9rem;
}

.level-status {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-badge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.progress-badge.completed {
    background-color: #d1fae5;
    color: #065f46;
}

.progress-badge.in-progress {
    background-color: #dbeafe;
    color: #1e40af;
}

/* Chat Interface */
.chat-container {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow);
    max-width: 800px;
    margin: 0 auto;
}

.chat-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.chat-header h1 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.chat-header p {
    color: var(--text-light);
}

/* ── Play-session progress bar + streak chip (shared) ───────────────── */
.play-progress-track {
    position: relative;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin-top: 0.75rem;
}
.play-progress-fill {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, #fde68a, var(--accent-sunny));
    border-radius: var(--radius-pill);
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.6);
    transition: width 0.5s ease;
}
.play-progress-ticks {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    display: flex;
    pointer-events: none;
}
.play-progress-ticks::before {
    content: "";
    width: 100%;
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 0.25) 0,
        rgba(255, 255, 255, 0.25) 1px,
        transparent 1px,
        transparent calc(10% - 1px)
    );
}

/* Streak chip — pulses on correct, escalates at milestones */
.play-streak-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    backdrop-filter: blur(4px);
    transition: background 0.2s, transform 0.2s;
}
.play-streak-chip i.flame { color: #fdba74; font-size: 0.9rem; }
.play-streak-chip.tier-3 {
    background: rgba(250, 204, 21, 0.32);
    border-color: rgba(253, 230, 138, 0.55);
}
.play-streak-chip.tier-5 {
    background: rgba(255, 149, 0, 0.38);
    border-color: rgba(253, 186, 116, 0.6);
}
.play-streak-chip.tier-10 {
    background: rgba(255, 107, 107, 0.45);
    border-color: rgba(252, 165, 165, 0.7);
    box-shadow: 0 0 14px rgba(255, 149, 0, 0.5);
}
.play-streak-chip.pulse { animation: streakPulse 0.55s ease-out; }
@keyframes streakPulse {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

/* +N XP floaty — absolutely positioned, animated upward, fades out */
.xp-floaty {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.4rem 0.85rem;
    background: linear-gradient(135deg, var(--accent-sunny), #f59e0b);
    color: #7c4a03;
    font-weight: 800;
    font-size: 0.9rem;
    border-radius: var(--radius-pill);
    box-shadow: 0 6px 18px rgba(250, 204, 21, 0.5);
    pointer-events: none;
    opacity: 0;
    animation: xpFloat 1.6s ease-out forwards;
    z-index: 10;
}
.xp-floaty i { margin-right: 0.3rem; }
@keyframes xpFloat {
    0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.85); }
    18%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
    82%  { opacity: 1; transform: translate(-50%, -45px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -80px) scale(0.92); }
}

/* ── Fancy timer for timed sessions ─────────────────────────────────── */
.play-timer {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    padding: 0.55rem 1.05rem;
    background: var(--primary-container);
    border: 1.5px solid var(--primary-container-strong);
    border-radius: var(--radius-pill);
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    gap: 0.5rem;
    box-shadow: 0 3px 0 0 var(--primary-container-strong);
    transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.play-timer i { font-size: 0.95rem; opacity: 0.88; }
.play-timer.warning {
    background: var(--accent-sunny-bg);
    border-color: color-mix(in srgb, var(--accent-sunny) 55%, var(--border-color));
    color: var(--accent-sunny-dark);
    box-shadow: 0 3px 0 0 color-mix(in srgb, var(--accent-sunny) 45%, var(--border-strong));
}
.play-timer.danger {
    background: var(--accent-coral-bg);
    border-color: var(--accent-coral);
    color: #991b1b;
    box-shadow: 0 3px 0 0 var(--accent-coral);
    animation: timerPulse 0.9s ease-in-out infinite;
}
/* Variant for use inside gradient hero sections (white-on-dark). */
.play-timer.on-hero {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(6px);
}
.play-timer.on-hero.warning {
    background: rgba(250, 204, 21, 0.32);
    border-color: rgba(253, 230, 138, 0.7);
    color: #fff9e6;
}
.play-timer.on-hero.danger {
    background: rgba(255, 107, 107, 0.42);
    border-color: rgba(252, 165, 165, 0.8);
    color: #fff;
}
@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

/* Open Tests: full-screen generating state + session complete feedback */
.open-tests-generating-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
}

.open-tests-generating-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.open-tests-generating-card {
    background: var(--card-bg);
    padding: 1.75rem 2rem;
    border-radius: var(--radius-card, 12px);
    box-shadow: var(--shadow-lg);
    text-align: center;
    max-width: 22rem;
    margin: 1rem;
}

.open-tests-generating-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: open-tests-spin 0.8s linear infinite;
}

@keyframes open-tests-spin {
    to {
        transform: rotate(360deg);
    }
}

.open-tests-generating-text {
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--text-color);
}

.open-tests-generating-sub {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-light);
    line-height: 1.4;
}

.open-tests-complete-banner {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary-color) 12%, var(--card-bg)),
        var(--card-bg)
    );
    border: 1px solid color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
    padding: 1.35rem 1.5rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.35rem;
    box-shadow: var(--shadow);
    text-align: center;
    animation: open-tests-complete-in 0.5s ease-out;
}

@keyframes open-tests-complete-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.open-tests-complete-icon {
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    animation: open-tests-celebrate 0.65s ease-out 1;
}

@keyframes open-tests-celebrate {
    from {
        opacity: 0;
        transform: scale(0.88);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.open-tests-complete-kicker {
    margin: 0 0 0.35rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
}

.open-tests-complete-trophy {
    color: var(--warning-color, #f59e0b);
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.open-tests-complete-title {
    margin: 0 0 0.75rem;
    color: var(--primary-color);
    font-size: 1.25rem;
}

.open-tests-complete-line {
    margin: 0.3rem 0;
    color: var(--text-color);
}

.open-tests-complete-hint {
    margin: 1rem 0 1rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

.open-tests-another-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
}

#open-tests-topic-pick {
    scroll-margin-top: 6rem;
}

.chat-messages {
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
    padding: 1rem;
    background-color: var(--bg-color);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.chat-message {
    margin-bottom: 1rem;
    display: flex;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-message.system {
    justify-content: flex-start;
}

.chat-message.user {
    justify-content: flex-end;
}

.message-bubble {
    max-width: 70%;
    padding: 1rem 1.25rem;
    border-radius: 20px;
    word-wrap: break-word;
    line-height: 1.5;
}

.message-bubble.system {
    background-color: #e0e7ff;
    color: #3730a3;
    border-bottom-left-radius: 6px;
}

.message-bubble.system.correct {
    background-color: #d1fae5;
    color: #065f46;
    border-left: 3px solid var(--success-color);
}

.message-bubble.system.incorrect {
    background-color: #fef3c7;
    color: #92400e;
}

.message-bubble.user {
    background-color: var(--primary-color);
    color: white;
    border-bottom-right-radius: 6px;
}

/* Inline XP reward styling */
.xp-reward {
    display: inline-block;
    background-color: var(--success-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.875rem;
    margin-left: 0.5rem;
}

.chat-form {
    display: flex;
    gap: 1rem;
}

.chat-form.mcq-form {
    flex-direction: column;
}

.chat-input {
    flex: 1;
    padding: 1rem;
    border: 2px solid var(--border-color);
    border-radius: 24px;
    font-size: 1rem;
}

.chat-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.chat-submit {
    padding: 1rem 2rem;
    border-radius: 24px;
}

/* Multiple-choice options (shared UI) */
.mcq-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mcq-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mcq-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.95rem;
    background: var(--card-bg);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-button);
    cursor: pointer;
    /* Duolingo-style bottom shadow that collapses on :active */
    box-shadow: 0 3px 0 0 var(--border-strong);
    transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.15s, background 0.15s;
}

.mcq-option:hover {
    border-color: var(--primary-container-strong);
    background: color-mix(in srgb, var(--primary-container) 18%, var(--card-bg));
}

.mcq-option:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 0 var(--border-strong);
}

.mcq-option-letter {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--primary-color);
    background: var(--primary-container);
    transition: background 0.15s, color 0.15s, transform 0.15s;
    flex-shrink: 0;
}

/* Rotating accent palette for the letter tile — A/B/C/D each get their own
   color so options feel tactile and distinguishable. */
.mcq-options > .mcq-option:nth-of-type(1) .mcq-option-letter {
    background: var(--accent-sky-bg);
    color: var(--accent-sky-dark);
}
.mcq-options > .mcq-option:nth-of-type(2) .mcq-option-letter {
    background: var(--accent-coral-bg);
    color: var(--accent-coral);
}
.mcq-options > .mcq-option:nth-of-type(3) .mcq-option-letter {
    background: var(--accent-mint-bg);
    color: var(--accent-mint-dark);
}
.mcq-options > .mcq-option:nth-of-type(4) .mcq-option-letter {
    background: var(--accent-grape-bg);
    color: #6d28d9;
}

.mcq-option-text {
    color: var(--text-color);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.4;
}

.mcq-radio:focus-visible + .mcq-option {
    outline: 3px solid var(--primary-container-strong);
    outline-offset: 2px;
}

.mcq-radio:checked + .mcq-option {
    background: color-mix(in srgb, var(--primary-container) 55%, var(--card-bg));
    border-color: var(--primary-color);
    box-shadow: 0 3px 0 0 var(--primary-color), var(--shadow-glow);
}

.mcq-radio:checked + .mcq-option .mcq-option-letter {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    transform: scale(1.06);
}

/* Reveal states — applied by JS when the server responds with correct/wrong */
.mcq-option.is-correct {
    background: var(--accent-mint-bg) !important;
    border-color: var(--accent-mint) !important;
    box-shadow: 0 3px 0 0 var(--accent-mint-dark) !important;
    animation: mcqPulse 0.45s ease-out;
}
.mcq-option.is-correct .mcq-option-letter {
    background: linear-gradient(135deg, var(--accent-mint), var(--accent-mint-dark)) !important;
    color: white !important;
}
.mcq-option.is-wrong {
    background: var(--accent-coral-bg) !important;
    border-color: var(--accent-coral) !important;
    box-shadow: 0 3px 0 0 var(--accent-coral) !important;
    animation: mcqShake 0.45s ease-out;
}
.mcq-option.is-wrong .mcq-option-letter {
    background: var(--accent-coral) !important;
    color: white !important;
}

@keyframes mcqPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
@keyframes mcqShake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-6px); }
    50%     { transform: translateX(5px); }
    75%     { transform: translateX(-3px); }
}

.mcq-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.btn[disabled],
.btn:disabled {
    background-color: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 1;
    border-color: transparent;
}

@media (min-width: 768px) {
    .mcq-options {
        grid-template-columns: 1fr 1fr;
    }
}

/* Play Hub desktop: slightly larger header padding */
@media (min-width: 768px) {
    .play-hub-header {
        padding: 1.5rem 2rem 2rem;
    }
    .player-card {
        max-width: 480px;
    }
    .quest-cards-scroll:not(.missions-carousel),
    .contest-cards-scroll {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 1rem;
    }
    .quest-cards-scroll:not(.missions-carousel) .quest-card {
        flex: 0 0 calc(50% - 0.5rem);
        max-width: 260px;
    }
    .quest-cards-scroll.missions-carousel {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        overflow: visible;
        padding: 0;
    }
    .quest-cards-scroll.missions-carousel .quest-card {
        width: auto;
        max-width: none;
        flex: unset;
    }
    .contest-card {
        flex: 0 0 calc(50% - 0.5rem);
        max-width: 300px;
    }
    .home-categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    .home-category-card {
        min-height: 220px;
    }
}

@media (min-width: 1024px) {
    .home-categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Leaderboard */
.leaderboard-table {
    width: 100%;
    background-color: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.leaderboard-table thead {
    background-color: var(--primary-color);
    color: white;
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 1rem;
    text-align: left;
}

.leaderboard-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s;
}

.leaderboard-table tbody tr:hover {
    background-color: var(--bg-color);
}

.leaderboard-table tbody tr:last-child {
    border-bottom: none;
}

.rank-badge {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    font-weight: bold;
    color: white;
}

.leaderboard-username-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.leaderboard-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.leaderboard-avatar-default {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.rank-badge.gold {
    background-color: #fbbf24;
}

.rank-badge.silver {
    background-color: #9ca3af;
}

.rank-badge.bronze {
    background-color: #d97706;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease-in;
}

.modal-content {
    background-color: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    padding: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-close {
    color: var(--text-light);
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close:hover {
    color: var(--text-color);
}

.modal-body {
    padding: 1.5rem;
}

.modal-body p {
    margin: 0;
    color: var(--text-color);
    line-height: 1.6;
}

.modal-footer {
    padding: 1.5rem;
    border-top: 2px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.rank-badge.default {
    background-color: var(--primary-color);
}

.bot-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: #fef3c7;
    color: #92400e;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

/* Difficulty Badges */
.difficulty-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.difficulty-badge.easy {
    background-color: #d1fae5;
    color: #065f46;
}

.difficulty-badge.medium {
    background-color: #fef3c7;
    color: #92400e;
}

.difficulty-badge.hard {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Locked Topics */
.locked-topic {
    position: relative;
    cursor: pointer;
}

.topic-card.locked-topic:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--warning-color);
}

/* Responsive — sidebar handled via base.html styles */
@media (max-width: 768px) {
    /* Sidebar is hidden on mobile (bottom tab bar used instead) */
    .sidebar { display: none !important; }

    .main-wrapper {
        margin-left: 0;
        padding-bottom: 64px; /* bottom nav height */
    }

    /* Full-width content on mobile — match native app feel */
    .main-content {
        padding: 0;
    }

    .main-content > .container {
        padding: 0;
        max-width: 100%;
    }

    /* Keep flash messages readable on mobile */
    .main-content .messages {
        padding: 0 0.75rem;
    }

    /* Tighten card padding on mobile */
    .card {
        padding: 1rem;
        border-radius: 0;
        margin-bottom: 0;
    }

    .topics-grid {
        grid-template-columns: 1fr;
    }

    .message-bubble {
        max-width: 85%;
    }

    .chat-form {
        flex-direction: column;
    }

    .chat-submit {
        width: 100%;
    }

    /* Stack player card header content on small screens */
    .player-card-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .player-card-rank {
        align-self: flex-start;
    }
}

/* Story reader (story_read.html): themes + focus column */
.story-reader-panel.story-reader-sepia {
    background-color: #f4ecd8 !important;
    border-color: #d4c4a8 !important;
}

.story-reader-panel.story-reader-sepia .story-reader-text {
    color: #3d3326 !important;
}

.story-reader-panel.story-reader-dark {
    background-color: #1e1e1e !important;
    border-color: #333 !important;
}

.story-reader-panel.story-reader-dark .story-reader-text {
    color: #e8e8e8 !important;
}

body.story-reader-focus-mode .main-content .container {
    max-width: 42rem;
}

.story-reader-toolbar #srFocus[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--primary-color);
}