/* ==========================================
   LESSON.CSS - 'To Daffodils' Lesson Components
   Reuses design tokens from root main.css
   ========================================== */

/* --- Section headers (consistency with app flow) --- */
.section-header {
    margin-bottom: 2rem;
}

.section-header .step-tag {
    display: inline-block;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    margin-bottom: 0.75rem;
}

.section-header h2 {
    color: var(--color-primary);
    margin-bottom: 0.35rem;
}

.section-header p {
    color: var(--text-muted);
    max-width: 800px;
}

/* --- Progress bar under nav --- */
.lesson-progress-track {
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
}

.lesson-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), #f472b6);
    transition: width 0.4s ease;
    border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/* NCF chips */
.ncf-map {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.75rem;
}

.ncf-chip {
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
}

.ncf-chip::before {
    content: "🎯 ";
}

/* --- Welcome / hero --- */
.daffodil-hero {
    position: relative;
    overflow: hidden;
}

.daffodil-sway {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 56px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    pointer-events: none;
}

.bloom {
    font-size: 2rem;
    animation: sway 3.2s ease-in-out infinite;
    transform-origin: bottom center;
}

.bloom.b2 { animation-delay: 0.4s; }
.bloom.b3 { animation-delay: 0.9s; }
.bloom.b4 { animation-delay: 1.4s; }
.bloom.b5 { animation-delay: 1.9s; }

@keyframes sway {
    0%, 100% { transform: rotate(-8deg) translateY(0); }
    50% { transform: rotate(8deg) translateY(4px); }
}

.hero-card .bilingual-quote {
    background: rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--color-accent);
    padding: 8px 14px;
    border-radius: 8px;
    margin: 0 0 0.5rem 0;
    font-style: italic;
    font-size: 0.98rem;
    max-width: 760px;
}

.bilingual-box {
    background: var(--bg-hover);
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 4px solid var(--color-secondary);
    margin: 8px 0;
    font-size: 0.95rem;
}

.bilingual-box:last-child {
    margin-bottom: 0;
}

.action-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin: 1.5rem 0 0.5rem;
    flex-wrap: wrap;
}

.score-pill {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
}

/* --- Warm up --- */
.warm-q-card {
    background: var(--bg-surface);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    transition: border-color 0.2s ease;
}

.warm-q-card .warm-q {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.warm-q-card .hint-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-style: italic;
}

.warm-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}

.warm-opt {
    background: var(--bg-hover);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: left;
}

.warm-opt:hover:not(:disabled) {
    border-color: var(--color-secondary);
}

.warm-opt:disabled {
    cursor: default;
}

.warm-opt.correct {
    background: #dcfce7;
    border-color: #22c55e;
    color: #14532d;
}

.warm-opt.wrong {
    background: #fee2e2;
    border-color: #ef4444;
    color: #7f1d1d;
}

.mood-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.mood-btn {
    font-size: 1.9rem;
    background: var(--bg-hover);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.18s ease;
}

.mood-btn:hover { border-color: var(--color-secondary); }
.mood-btn[aria-pressed="true"] { border-color: var(--color-accent); background: #fffbeb; transform: translateY(-3px); }

.small-mood .mood-btn { font-size: 1.4rem; }

.mood-feedback {
    margin-top: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* --- Timeline --- */
.timeline {
    list-style: none;
    border-left: 3px solid var(--color-secondary);
    margin-left: 8px;
    padding-left: 0;
}

.timeline li {
    position: relative;
    padding: 0 0 1.1rem 1.6rem;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 4px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 3px solid var(--bg-surface);
    box-shadow: 0 0 0 2px var(--color-secondary);
}

.timeline .tl-year {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-secondary);
    font-size: 1.05rem;
}

.timeline .tl-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* --- Poet fact flip cards --- */
.fact-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.fact-card {
    perspective: 1000px;
    min-height: 190px;
    cursor: pointer;
}

.fact-inner {
    position: relative;
    width: 100%;
    height: 190px;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.fact-card.flipped .fact-inner { transform: rotateY(180deg); }

.fact-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    border: 1px solid var(--border-color);
}

.fact-front { background: linear-gradient(135deg, #fff7ed, #fffbeb); }
.fact-back { background: linear-gradient(135deg, #eef2ff, #f5f3ff); transform: rotateY(180deg); border: 2px solid var(--color-secondary); }

.fact-face .fact-emoji { font-size: 2.4rem; }
.fact-face h4 { margin: 0; color: var(--color-primary); }
.fact-face p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.fact-face .flip-hint { font-size: 0.75rem; color: var(--color-accent-hover); font-weight: 700; }

/* --- Vocabulary flashcards --- */
.flashcard-deck {
    max-width: 620px;
    margin: 0 auto 2rem;
}

.flashcard {
    perspective: 1400px;
    width: 100%;
    min-height: 380px;
}

.flash-inner {
    position: relative;
    width: 100%;
    height: 380px;
    transform-style: preserve-3d;
    transition: transform 0.55s ease;
}

.flashcard.flipped .flash-inner { transform: rotateY(180deg); }

.flash-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-color);
}

.flash-front {
    background: linear-gradient(135deg, #1e1b4b, #4c1d95);
    color: #ffffff;
}

.flash-front h3 { color: var(--color-accent); font-size: 2.2rem; margin: 0; }
.flash-front .flash-emoji { font-size: 3rem; }

.flash-pron { color: #c4b5fd; font-weight: 600; }

.flash-back {
    background: linear-gradient(135deg, #fdf4ff, #f5f3ff);
    transform: rotateY(180deg);
    border: 2px solid var(--color-secondary);
    justify-content: flex-start;
    gap: 0.25rem;
}

.flash-back h4 { color: var(--color-secondary); margin-bottom: 0.25rem; }
.flash-back p { margin: 0.2rem 0; color: var(--text-primary); font-size: 0.98rem; }
.flash-example {
    font-style: italic;
    color: var(--text-muted) !important;
    background: #ffffff;
    padding: 6px 10px;
    border-radius: 6px;
    border-left: 3px solid var(--color-accent);
    margin-top: 0.25rem !important;
}

.flash-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.flash-counter {
    font-weight: 700;
    color: var(--color-secondary);
    min-width: 90px;
    text-align: center;
}

.mt-2 { margin-top: 0.5rem; }

.word-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.75rem;
}

.word-chip {
    background: var(--bg-hover);
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.word-chip.visited { border-color: #22c55e; background: #f0fdf4; }
.word-chip.visited .word-chip-head::after { content: " ✓"; color: #16a34a; }

.word-chip-head {
    font-weight: 700;
    color: var(--color-secondary);
    display: flex;
    justify-content: space-between;
}

.word-chip-head span { font-size: 1.1rem; }

.word-chip-code {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.word-chip-mean {
    font-size: 0.85rem;
    color: var(--text-primary);
}

/* --- Read along --- */
.read-along-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
}

.poem-text-container.stanza-view .poem-line {
    font-size: 1.35rem;
    cursor: pointer;
}

.ra-progress {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

.concept-map {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Understand the poem --- */
.understand-stanza {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.understand-stanza-title {
    color: var(--color-secondary);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.4rem;
}

.understand-line {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 10px 6px;
    border-bottom: 1px dashed var(--border-color);
}

.understand-line:last-child { border-bottom: none; }

.understand-line .u-em .line-text {
    font-size: 1.05rem;
    color: var(--color-primary);
}

.u-meaning {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.u-hi {
    font-size: 0.9rem;
    color: var(--color-secondary);
    font-style: italic;
}

.u-ur {
    font-size: 0.95rem;
    color: #0f766e;
    direction: rtl;
    text-align: right;
    font-family: var(--font-body);
}

.teacher-note {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-left: 4px solid var(--color-accent);
    padding: 0.9rem 1.1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-size: 0.95rem;
}

.teacher-note h4 { color: #92400e; margin-bottom: 0.25rem; }

.think-card .ta-qa {
    background: var(--bg-hover);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
}

.think-card .ta-q {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.think-card .ta-a {
    color: var(--text-muted);
    font-size: 0.92rem;
    display: inline-block;
    margin-top: 6px;
}

/* --- Literary terms --- */
.literary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.literary-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-sm);
}

.literary-card h4 {
    color: var(--color-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.4rem;
}

.literary-card p { color: var(--text-primary); font-size: 0.95rem; }
.literary-card .lit-example {
    font-style: italic;
    color: var(--color-primary);
    font-weight: 600;
    margin-top: 0.4rem;
    font-size: 0.9rem;
}

/* --- Concept map --- */
.concept-map-card { text-align: center; }

.concept-bubbles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0.5rem;
}

.concept-bubble {
    background: linear-gradient(135deg, #1e1b4b, #4c1d95);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 14px 20px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-md);
    max-width: 210px;
}

.concept-bubble:hover { transform: translateY(-4px) scale(1.04); box-shadow: var(--shadow-lg); }
.concept-bubble.bubble-central { background: linear-gradient(135deg, var(--color-accent), #f472b6); color: #000; font-size: 1.1rem; padding: 18px 28px; }

.concept-detail {
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    min-height: 60px;
    text-align: left;
}

.concept-detail h4 { color: var(--color-secondary); margin-bottom: 0.25rem; }

/* --- Life cards --- */
.life-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.life-card h3 { color: var(--color-primary); }
.life-card .life-icon { font-size: 2.2rem; margin-bottom: 0.5rem; }
.life-card p { font-size: 0.95rem; }

/* --- Play panels (Activities) --- */
.play-panel { display: block; }
.play-panel.hidden { display: none !important; }

.activity-banner-d { background: linear-gradient(135deg, #fef3f2, #fff1f2); border: 1px solid #fecaca; }
.activity-banner-d h3 { color: #991b1b; }
.activity-banner-d p { color: #b91c1c; }

.activity-banner-e { background: linear-gradient(135deg, #ecfeff, #f0fdfa); border: 1px solid #99f6e4; }
.activity-banner-e h3 { color: #155e75; }
.activity-banner-e p { color: #0f766e; }

.activity-banner-f { background: linear-gradient(135deg, #fdf4ff, #faf5ff); border: 1px solid #f0abfc; }
.activity-banner-f h3 { color: #701a75; }
.activity-banner-f p { color: #86198f; }

.activity-banner-g { background: linear-gradient(135deg, #fefce8, #fffbeb); border: 1px solid #fde047; }
.activity-banner-g h3 { color: #854d0e; }
.activity-banner-g p { color: #a16207; }

.activity-banner-h { background: linear-gradient(135deg, #f0f9ff, #eff6ff); border: 1px solid #93c5fd; }
.activity-banner-h h3 { color: #1e40af; }
.activity-banner-h p { color: #1d4ed8; }

/* Drag & drop */
.drag-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1.25rem;
    min-height: 90px;
}

.drag-item {
    background: var(--bg-surface);
    border: 2px solid var(--color-secondary);
    color: var(--color-primary);
    font-weight: 600;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: grab;
    user-select: none;
    transition: all 0.15s ease;
}

.drag-item.selected { outline: 3px solid var(--color-accent); }
.drag-item.placed { opacity: 0.4; pointer-events: none; }
.drag-item.placed-wrong { border-color: #ef4444; }

.drop-buckets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.drop-bucket {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    min-height: 150px;
    padding: 1rem;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.drop-bucket.drop-hover { border-color: var(--color-secondary); background: #f5f3ff; }

.drop-bucket h3 { font-size: 1.1rem; color: var(--color-secondary); }

.drop-bucket .bucket-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

.drop-bucket .bucket-items .placed-chip {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #14532d;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* --- Match meaning --- */
.match-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.match-col { display: flex; flex-direction: column; gap: 8px; }

.match-col h4 {
    text-align: center;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 4px;
}

.match-item {
    background: var(--bg-surface);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    text-align: center;
    transition: all 0.15s ease;
}

.match-item:hover:not(.matched) { border-color: var(--color-secondary); }

.match-item.chosen { border-color: var(--color-accent); background: #fffbeb; }
.match-item.matched { background: #dcfce7; border-color: #22c55e; color: #14532d; cursor: default; }
.match-item.wrong-flash { background: #fee2e2; border-color: #ef4444; color: #7f1d1d; }

/* --- Arrange lines --- */
.arrange-pool {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 1.25rem;
}

.arrange-item {
    background: var(--bg-surface);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    transition: all 0.15s ease;
}

.arrange-item:hover { border-color: var(--color-secondary); }
.arrange-item.used { opacity: 0.35; pointer-events: none; }

.arrange-build {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    min-height: 120px;
}

.arrange-build .placed-line {
    position: relative;
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #14532d;
    border-radius: 8px;
    padding: 8px 12px;
    font-weight: 600;
}

.arrange-build .placed-line.shake {
    animation: shake 0.35s ease;
    background: #fee2e2;
    border-color: #ef4444;
    color: #7f1d1d;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* --- Fill & challenge --- */
.chall-q {
    background: var(--bg-surface);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.chall-q .chall-word {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-secondary);
}

.chall-options { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.chall-opt {
    background: var(--bg-hover);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.chall-opt.correct { background: #dcfce7; border-color: #22c55e; color: #14532d; }
.chall-opt.wrong { background: #fee2e2; border-color: #ef4444; color: #7f1d1d; }
.chall-opt:disabled { cursor: default; }

/* --- Memory game --- */
.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 520px;
    margin: 0 auto 1rem;
}

.memory-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    perspective: 600px;
}

.memory-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
}

.memory-card.flipped .memory-inner { transform: rotateY(180deg); }

.memory-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 10px;
    font-weight: 700;
    padding: 0.25rem;
    word-break: break-word;
}

.memory-back { background: linear-gradient(135deg, #1e1b4b, #4c1d95); color: var(--color-accent); font-size: 1.4rem; }
.memory-front { background: #f5f3ff; border: 2px solid var(--color-secondary); color: var(--color-primary); font-size: 0.85rem; transform: rotateY(180deg); }

.memory-card.matched .memory-inner { opacity: 0.5; pointer-events: none; }

.memory-score {
    text-align: center;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 0.75rem;
}

/* Score rows */
.score-row { text-align: center; margin-top: 0.5rem; font-weight: 700; color: var(--color-secondary); }

/* Exit ticket stars */
.star-row { display: flex; gap: 6px; margin-top: 0.5rem; }

.star-btn {
    font-size: 1.8rem;
    background: var(--bg-hover);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 4px 8px;
    cursor: pointer;
    filter: grayscale(1);
    transition: all 0.15s ease;
}

.star-btn[aria-pressed="true"] {
    background: #fefce8;
    border-color: var(--color-accent);
    filter: none;
}

/* --- Creative --- */
.creative-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.creative-card h3 { color: var(--color-primary); }

.word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0.75rem 0;
}

.word-chips {
    background: var(--bg-hover);
    border: 2px solid var(--border-color);
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.15s ease;
}

.word-chips:hover { border-color: var(--color-secondary); transform: translateY(-2px); }

.spoken-line {
    background: #faf5ff;
    border-left: 4px solid var(--color-secondary);
    padding: 8px 12px;
    border-radius: 6px;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.canvas-wrap {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: #ffffff;
    overflow: hidden;
    margin: 0.75rem 0;
}

#flower-canvas {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
    cursor: crosshair;
}

.palette-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0.75rem; }

.swatch {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.swatch:hover { transform: scale(1.12); }
.swatch.active-color { border-color: var(--color-accent); transform: scale(1.15); }

.canvas-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }

.recorder-box {
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.recorder-status { width: 100%; color: var(--text-muted); font-size: 0.9rem; margin: 0; }
.recording-audio { width: 100%; margin-top: 8px; }

/* --- Assessment --- */
.assess-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.assess-q { margin-bottom: 1.1rem; }

.assess-q .aq {
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 2px;
    font-size: 1rem;
}

.assess-q .aq-hi {
    color: var(--color-secondary);
    font-style: italic;
    font-size: 0.88rem;
    margin-bottom: 8px;
}

.assess-options { display: flex; flex-direction: column; gap: 6px; }

.ar-question {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.ar-question .ar-assert { font-weight: 700; color: var(--color-primary); }

.self-check-row { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }

.self-check-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-secondary);
    flex-shrink: 0;
    margin-top: 2px;
}

.self-check-row label { font-size: 0.95rem; color: var(--text-primary); line-height: 1.45; }

/* --- Achievement --- */
.achievement-hero {
    background: linear-gradient(135deg, #1e1b4b, #4c1d95);
    color: #ffffff;
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
}

.achievement-hero h3 { color: var(--color-accent); font-size: 1.6rem; }
.lead-achievement { color: #c4b5fd; }

.score-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.score-cell {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
}

.score-cell h4 {
    color: var(--color-secondary);
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.score-bar-track {
    height: 10px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.score-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), #f472b6);
    border-radius: var(--radius-full);
    transition: width 0.6s ease;
}

.score-cell .cell-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.badge {
    background: var(--bg-hover);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.badge.unlocked { background: linear-gradient(135deg, #fff7ed, #fffbeb); border-color: var(--color-accent); }

.badge.locked { opacity: 0.55; filter: grayscale(0.8); }

.badge .badge-emoji { font-size: 2.2rem; display: block; margin-bottom: 6px; }
.badge h4 { margin: 0; font-size: 0.95rem; color: var(--color-primary); }
.badge .badge-name { font-size: 0.78rem; color: var(--text-muted); }

.badge-detail {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-hover);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.certificate-card { text-align: center; }

.certificate-body {
    border: 3px solid var(--color-accent);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #fffbeb, #fdf4ff);
    padding: 2rem 1.5rem;
    max-width: 640px;
    margin: 0 auto 1rem;
}

.cert-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--color-secondary);
    margin-bottom: 0.25rem;
}

.cert-sub { color: var(--text-muted); }
.cert-line { margin-top: 1rem; }
.cert-name {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--color-primary);
    border-bottom: 2px dotted var(--color-accent);
    display: inline-block;
    min-width: 240px;
    padding: 0 10px 4px;
}

.cert-text { color: var(--text-muted); max-width: 460px; margin: 1rem auto 0; }

#cert-name input.cert-name-input {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-primary);
    background: rgba(255,255,255,0.7);
    border: none;
    border-bottom: 2px dotted var(--color-accent);
    text-align: center;
    width: 260px;
    padding: 4px 8px;
    border-radius: 4px;
}

.certificate-actions { margin-top: 0.5rem; }

.reason-note .quote-herrick {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-secondary);
    border-left: 4px solid var(--color-accent);
    padding-left: 1rem;
    margin: 0 0 0.75rem 0;
}

.value-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 1.25rem;
}

/* --- Responsive adjustments --- */
@media (max-width: 900px) {
    .understand-line { grid-template-columns: 1fr; }
    .assess-grid, .creative-grid { grid-template-columns: 1fr; }
    .drop-buckets { grid-template-columns: 1fr; }
    .match-grid { grid-template-columns: 1fr; }
}

@media (max-width: 639px) {
    .flash-inner, .flashcard { min-height: 340px; height: 340px; }
    .memory-grid { grid-template-columns: repeat(3, 1fr); }
    .action-footer { justify-content: center; }
    .bloom { font-size: 1.5rem; }
}