/* Flashcards page: loaded after style.css and ../css/workbook.css, which give
   the page header, sidebar, heading, play buttons and the .game-area card.
   Article colours match the lessons: de is green, het is blue. */

:root {
    --de: #2d6a4f;
    --de-bg: #e8f5ee;
    --het: #1d4e89;
    --het-bg: #e3edf8;
    --fc-mastered: #354c3e;
    --fc-known: #86a37a;
    --fc-learning: #e2b04a;
    --fc-new: #e3e3d9;
    --fc-flame: #e2592b;
    --fc-amber: #b7791f;
    --flame-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.6 3.2 2.4 4.9 4 6.6 1.7 1.8 3 3.7 3 6.4A7 7 0 0 1 5 15c0-2.6 1.2-4.4 2.6-5.8.3 1.6 1.1 2.7 2.4 3.2C9.4 8.6 10.3 5 12 2Z'/%3E%3C/svg%3E");
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.fc-game { position: relative; overflow: hidden; }

/* style.css styles every span in a card title as its subtitle; the Dutch
   line is the title itself. */
.practice-card-title .fc-title-nl {
    display: block;
    margin: 0;
    font: 700 24px/1.3 'Playfair Display', Georgia, serif;
    letter-spacing: -0.015em;
    color: var(--text);
}
.fc-view[hidden] { display: none; }

.fc-label {
    display: block;
    margin: 0 0 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.fc-primary,
.fc-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: 10px;
    border: 1px solid var(--workbook-ink);
    background: var(--workbook-ink);
    color: #fff;
    font: 700 15px/1.2 'DM Sans', system-ui, sans-serif;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.fc-primary:hover:not(:disabled) { background: #2a3d31; }
.fc-primary:active:not(:disabled) { transform: translateY(1px); }
.fc-primary:disabled { opacity: 0.45; cursor: default; }

.fc-secondary {
    background: transparent;
    color: var(--workbook-ink);
    border-color: #c6cdbb;
}

.fc-secondary:hover { background: var(--workbook-sage); }

.fc-text-btn {
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--workbook-ink);
    font: 600 13.5px 'DM Sans', system-ui, sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.fc-text-btn:hover { color: var(--accent); }
.fc-wide { min-width: 220px; }

/* === What the flashcards contain ========================================= */

.fc-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-width: 760px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.fc-facts li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--workbook-sage-border);
    border-radius: 12px;
    background: var(--workbook-sage);
}

.fc-facts strong {
    font: 700 26px/1.1 'Playfair Display', Georgia, serif;
    color: var(--workbook-ink);
}

.fc-facts span { font-size: 12.5px; line-height: 1.35; color: var(--text-muted); }

/* === Streak and today's goal ============================================= */

.fc-flame {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: var(--flame-icon) center / contain no-repeat;
    -webkit-mask: var(--flame-icon) center / contain no-repeat;
}

.fc-streak {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--workbook-soft);
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
}

.fc-streak strong { font-size: 16px; color: var(--text); }
.fc-streak[data-state="lit"] { border-color: #f3c3ab; background: #fff1e9; color: var(--fc-flame); }
.fc-streak[data-state="lit"] strong { color: var(--fc-flame); }
.fc-streak[data-state="risk"] { border-color: #ecd29a; background: #fdf6e6; color: var(--fc-amber); }
.fc-streak[data-state="risk"] .fc-flame { animation: fc-flicker 1.6s ease-in-out infinite; }

@keyframes fc-flicker {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.9); }
}

.fc-today {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 22px 24px;
    margin-bottom: 26px;
    border-radius: 14px;
    background: var(--workbook-sage);
}

.fc-goal {
    position: relative;
    flex: none;
    width: 118px;
    height: 118px;
}

.fc-goal svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fc-goal circle { fill: none; stroke-width: 10; }
.fc-goal-track { stroke: #d9e1cf; }

.fc-goal-fill {
    stroke: var(--workbook-ink);
    stroke-linecap: round;
    stroke-dasharray: 327;
    stroke-dashoffset: 327;
    transition: stroke-dashoffset 0.6s ease;
}

.fc-goal-done .fc-goal-fill { stroke: var(--fc-flame); }

.fc-goal-num {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
}

.fc-goal-num strong { font: 700 30px/1 'Playfair Display', Georgia, serif; color: var(--text); }
.fc-goal-num span { margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.fc-goal-done .fc-goal-num strong { color: var(--fc-flame); }

.fc-today-copy { flex: 1; min-width: 0; }

.fc-due {
    margin: 0 0 4px;
    font: 700 21px/1.3 'Playfair Display', Georgia, serif;
    color: var(--text);
}

.fc-nudge { min-height: 1.6em; margin: 0 0 14px; font-size: 14px; color: var(--workbook-ink); }
.fc-start-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }

/* === Practice modes ====================================================== */

.fc-modes { margin: 0 0 26px; padding: 0; border: 0; min-width: 0; }
.fc-modes legend { padding: 0; }

.fc-mode-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.fc-mode {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 100px;
    padding: 12px 12px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.fc-mode input { position: absolute; opacity: 0; pointer-events: none; }
.fc-mode:hover { border-color: #c6cdbb; }
.fc-mode:has(input:checked) { border-color: var(--workbook-ink); background: var(--workbook-sage); box-shadow: inset 0 0 0 1px var(--workbook-ink); }
.fc-mode:has(input:focus-visible) { outline: 3px solid var(--workbook-ink); outline-offset: 3px; }

.fc-mode-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: 6px;
    border-radius: 8px;
    background: var(--workbook-soft);
    color: var(--workbook-ink);
    font-size: 15px;
    line-height: 1;
}

.fc-mode-icon-art { font: 700 12px 'DM Sans', sans-serif; color: var(--de); background: var(--de-bg); }
.fc-mode:has(input:checked) .fc-mode-icon { background: #fff; }
.fc-mode-name { font-size: 14px; font-weight: 700; color: var(--text); }
.fc-mode-desc { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }

/* === Word progress ======================================================= */

.fc-overview-line { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; }

.fc-stack {
    display: flex;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--fc-new);
}

.fc-stack-seg { height: 100%; transition: width 0.5s ease; }
.fc-stack-seg[data-stage="mastered"] { background: var(--fc-mastered); }
.fc-stack-seg[data-stage="known"] { background: var(--fc-known); }
.fc-stack-seg[data-stage="learning"] { background: var(--fc-learning); }
.fc-stack-seg[data-stage="new"] { background: transparent; }

.fc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--text-muted);
}

.fc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.fc-legend strong { color: var(--text); }
.fc-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--fc-new); }
[data-stage="mastered"] > .fc-dot { background: var(--fc-mastered); }
[data-stage="known"] > .fc-dot { background: var(--fc-known); }
[data-stage="learning"] > .fc-dot { background: var(--fc-learning); }

/* === Session ============================================================= */

.fc-session-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.fc-icon-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
}

.fc-icon-btn:hover { color: var(--accent); border-color: #e7c3b4; }

.fc-sound-toggle::before {
    content: '';
    width: 18px;
    height: 18px;
    background: currentColor;
    mask: var(--speaker-icon) center / contain no-repeat;
    -webkit-mask: var(--speaker-icon) center / contain no-repeat;
}

.fc-sound-toggle { color: var(--workbook-ink); position: relative; }
.fc-sound-off { color: var(--text-muted); }

.fc-sound-off::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 2px;
    background: currentColor;
    transform: rotate(-45deg);
}

.fc-bar {
    flex: 1;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--fc-new);
}

.fc-bar-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--workbook-ink);
    transition: width 0.35s ease;
}

.fc-bar-retry .fc-bar-fill { background: var(--fc-learning); }
.fc-count { flex: none; min-width: 52px; text-align: right; font-size: 13px; font-weight: 600; color: var(--text-muted); }

.fc-combo {
    min-height: 22px;
    margin: 0 0 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--fc-flame);
}

.fc-stage { min-height: 320px; }

.fc-tag {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--workbook-soft);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.fc-card {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

/* The flip card: both faces share one grid cell, so the card is as tall as
   the taller face and never jumps when it turns. */
.fc-flip { perspective: 1400px; }

.fc-card-inner {
    display: grid;
    transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.3, 1);
    transform-style: preserve-3d;
}

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

.fc-face {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 280px;
    padding: 28px 26px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 14px 34px -24px rgba(41, 42, 37, 0.35);
    text-align: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.fc-front { cursor: pointer; }
.fc-front:hover { border-color: #c6cdbb; }
.fc-back { transform: rotateY(180deg); background: var(--workbook-soft); }

.fc-word {
    margin: 6px 0 0;
    font: 700 clamp(34px, 5vw, 46px)/1.15 'Playfair Display', Georgia, serif;
    letter-spacing: -0.015em;
    color: var(--text);
    overflow-wrap: anywhere;
}

.fc-art {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.62em;
    vertical-align: 0.12em;
}

.fc-art-de { color: var(--de); }
.fc-art-het { color: var(--het); }
.fc-art-gap { color: var(--text-muted); font-family: 'DM Sans', sans-serif; font-size: 0.62em; letter-spacing: 0.08em; }
.fc-hint { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.fc-word-play { width: 44px; height: 44px; min-width: 44px; margin: 0; }
.fc-word-play::before { width: 21px; height: 21px; }

.fc-answer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fc-answer-word { margin: 0; font: 700 24px/1.3 'Playfair Display', Georgia, serif; color: var(--text); }
.fc-answer-word .play-btn { vertical-align: middle; }
.fc-answer-en { margin: 0; font: 700 clamp(24px, 3.4vw, 30px)/1.25 'Playfair Display', Georgia, serif; color: var(--workbook-ink); }
.fc-plural { margin: 0; font-size: 13px; color: var(--text-muted); }

.fc-example {
    max-width: 440px;
    margin-top: 8px;
    padding: 12px 16px;
    border-left: 3px solid #b9c4ac;
    border-radius: 0 10px 10px 0;
    background: var(--card);
    text-align: left;
    font-size: 15px;
}

.fc-back .fc-example { background: #fff; }
.fc-example p { margin: 0; }
.fc-example .play-btn { width: 30px; height: 30px; min-width: 30px; }
.fc-example .play-btn::before { width: 15px; height: 15px; }
.fc-example-en { margin-top: 3px !important; font-size: 13.5px; color: var(--text-muted); }

.fc-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px auto 0;
    max-width: 560px;
}

.fc-actions:empty { display: none; }

.fc-grade {
    position: relative;
    flex: 1 1 0;
    min-height: 56px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid;
    font: 700 16px 'DM Sans', system-ui, sans-serif;
    cursor: pointer;
    transition: transform 0.1s, background 0.15s;
}

.fc-grade:active { transform: translateY(1px); }
.fc-grade:disabled { opacity: 0.6; cursor: default; }
.fc-grade-again { border-color: #e7c3b4; background: var(--bad-bg); color: var(--bad); }
.fc-grade-again:hover:not(:disabled) { background: #f8e2d9; }
.fc-grade-good { border-color: var(--workbook-ink); background: var(--workbook-ink); color: #fff; }
.fc-grade-good:hover:not(:disabled) { background: #2a3d31; }

.fc-grade-key,
.fc-choice-key {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-right: 9px;
    border-radius: 5px;
    border: 1px solid currentColor;
    font-size: 11px;
    font-weight: 700;
    opacity: 0.55;
    vertical-align: 1px;
}

/* Cards that do not flip: type, listen, de or het. */
.fc-plain {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 26px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 14px 34px -24px rgba(41, 42, 37, 0.35);
    text-align: center;
    animation: fadeIn 0.25s ease;
}

.fc-prompt { margin: 8px 0 0; font: 700 clamp(28px, 4vw, 38px)/1.2 'Playfair Display', Georgia, serif; color: var(--text); }
.fc-sub { margin: 0; font-size: 14px; color: var(--text-muted); }

.fc-type { display: flex; gap: 8px; width: 100%; max-width: 440px; margin-top: 10px; }

.fc-type input {
    flex: 1;
    min-width: 0;
    min-height: 50px;
    padding: 0 16px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--workbook-soft);
    color: var(--text);
    font: 500 18px 'DM Sans', system-ui, sans-serif;
}

.fc-type input:focus { outline: none; border-color: var(--workbook-ink); background: #fff; }
.fc-input-right { border-color: var(--good) !important; background: #eef7f1 !important; }
.fc-input-wrong { border-color: var(--bad) !important; background: var(--bad-bg) !important; }

.fc-big-play {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 8px 0 2px;
    border: 0;
    border-radius: 50%;
    background: var(--workbook-sage);
    color: var(--workbook-ink);
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
}

.fc-big-play::before {
    content: '';
    width: 38px;
    height: 38px;
    background: currentColor;
    mask: var(--speaker-icon) center / contain no-repeat;
    -webkit-mask: var(--speaker-icon) center / contain no-repeat;
}

.fc-big-play:hover,
.fc-big-play.fc-playing { background: var(--accent-light); color: var(--accent); }
.fc-big-play.fc-playing { animation: pop 0.6s ease infinite; }

.fc-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

.fc-choice,
.fc-article {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 54px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--workbook-soft);
    color: var(--text);
    font: 600 15px/1.35 'DM Sans', system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.fc-choice:hover:not(:disabled),
.fc-article:hover:not(:disabled) { border-color: var(--workbook-ink); background: #fff; }
.fc-choice:disabled,
.fc-article:disabled { cursor: default; }
.fc-choice-right { border-color: var(--good) !important; background: #eef7f1 !important; color: var(--good) !important; }
.fc-choice-wrong { border-color: var(--bad) !important; background: var(--bad-bg) !important; color: var(--bad) !important; }

.fc-articles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 380px;
    margin-top: 10px;
}

.fc-article { justify-content: center; min-height: 64px; font-size: 22px; font-weight: 700; }
.fc-article-de { color: var(--de); background: var(--de-bg); border-color: #c6e2d2; }
.fc-article-het { color: var(--het); background: var(--het-bg); border-color: #c4d6ec; }

.fc-feedback { max-width: 560px; margin: 0 auto; text-align: center; }
.fc-feedback:empty { display: none; }
.fc-feedback-line { margin: 16px 0 0; font-size: 14.5px; }
.fc-feedback-line strong { margin-right: 4px; font-size: 16px; }
.fc-right { color: var(--good); }
.fc-wrong { color: var(--bad); }
.fc-feedback-note { margin: 6px 0 0; font-size: 14px; color: var(--text); }
.fc-feedback .fc-answer { margin-top: 14px; padding: 16px; border-radius: 14px; background: var(--workbook-soft); }

.fc-keys { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--text-muted); }

kbd {
    display: inline-block;
    min-width: 22px;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: #fff;
    font: 600 11px/1.6 'DM Sans', system-ui, sans-serif;
    color: var(--text);
    text-align: center;
}

.fc-interlude-big { margin: 6px 0 0; font: 700 34px/1.2 'Playfair Display', Georgia, serif; color: var(--fc-amber); }

.fc-interlude-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.fc-interlude-list li { padding: 5px 12px; border-radius: 999px; background: var(--workbook-soft); border: 1px solid var(--border); font-weight: 600; }
.fc-interlude-list .fc-art { font-size: 0.85em; }

/* === Summary ============================================================= */

.fc-summary { position: relative; outline: none; animation: fadeIn 0.3s ease; }
.fc-summary-head { margin-bottom: 20px; }

.fc-summary-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.fc-summary-stats div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 14px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--workbook-soft);
}

.fc-summary-stats strong { font: 700 28px/1.1 'Playfair Display', Georgia, serif; color: var(--text); }
.fc-summary-stats span { font-size: 12px; color: var(--text-muted); }

.fc-milestone {
    margin: 0 0 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fdf6e6;
    border: 1px solid #ecd29a;
    font-size: 14px;
    color: var(--text);
}

.fc-summary-streak {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #fff1e9;
    border: 1px solid #f3c3ab;
    color: var(--text);
}

.fc-summary-streak p { margin: 0; font-size: 14px; }
.fc-summary-streak-num { font-size: 15px !important; }
.fc-summary-streak-num strong { font: 700 26px/1 'Playfair Display', Georgia, serif; color: var(--fc-flame); }
.fc-flame-big { flex: none; width: 42px; height: 42px; color: var(--fc-flame); }
.fc-summary-streak-new .fc-flame-big { animation: pop 0.6s ease 2; }
.fc-summary-goal { margin: 0 0 16px; font-size: 14px; color: var(--workbook-ink); }

.fc-watch { margin-bottom: 18px; }
.fc-watch ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }

.fc-watch li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--workbook-soft);
    font-weight: 600;
}

.fc-watch .play-btn { margin: 0; }
.fc-watch-en { margin-left: auto; font-weight: 400; font-size: 13.5px; color: var(--text-muted); text-align: right; }
.fc-summary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.fc-account-note { margin: 14px 0 0; font-size: 13px; color: var(--text-muted); }
.fc-account-note a { color: var(--workbook-ink); font-weight: 600; }

.fc-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.fc-confetti span {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    animation: fc-fall 2.2s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

@keyframes fc-fall {
    0% { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: translate(var(--drift), 520px) rotate(var(--spin)); opacity: 0; }
}

/* === Decks =============================================================== */

.fc-decks { margin-bottom: 28px; }
.fc-section-head { margin-bottom: 18px; }
.fc-section-head h2,
.fc-help h2 { margin: 0 0 6px; font: 700 26px/1.3 'Playfair Display', Georgia, serif; letter-spacing: -0.015em; }
.fc-section-head p { margin: 0; max-width: 640px; font-size: 14px; color: var(--text-muted); }
/* One course at a time: A0–A1 or A1–A2. */
.fc-levels {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
}

.fc-level {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--workbook-ink);
    font: 700 14px 'DM Sans', system-ui, sans-serif;
    cursor: pointer;
}

.fc-level span { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.fc-level:hover { background: var(--workbook-sage); }
.fc-level[aria-pressed="true"] { background: var(--workbook-ink); color: #fff; }
.fc-level[aria-pressed="true"] span { color: rgb(255 255 255 / 75%); }

.fc-unit { margin-bottom: 20px; }
.fc-unit-title { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); }

.fc-deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}

.fc-deck {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    transition: border-color 0.15s;
}

.fc-deck:hover { border-color: #c6cdbb; }
.fc-deck-current { border-color: var(--workbook-ink); box-shadow: inset 0 0 0 1px var(--workbook-ink); }
.fc-deck-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 24px; }

.fc-deck-num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--workbook-sage);
    color: var(--workbook-ink);
    font-size: 12px;
    font-weight: 700;
}

.fc-deck-due,
.fc-deck-done,
.fc-deck-pass {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.fc-deck-due { background: #fff1e9; color: var(--fc-flame); }
.fc-deck-done { background: var(--workbook-ink); color: #fff; }
.fc-deck-pass { background: var(--workbook-sage); color: var(--workbook-ink); }
.fc-deck-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); }
.fc-deck-meta { margin: 0; font-size: 12px; color: var(--text-muted); }

.fc-deck-bar {
    display: flex;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--fc-new);
}

.fc-deck-bar span[data-stage="mastered"] { background: var(--fc-mastered); }
.fc-deck-bar span[data-stage="known"] { background: var(--fc-known); }
.fc-deck-bar span[data-stage="learning"] { background: var(--fc-learning); }
.fc-deck-actions { display: flex; gap: 6px; margin-top: 4px; }

.fc-deck-study,
.fc-deck-words {
    flex: 1;
    min-height: 40px;
    border-radius: 8px;
    font: 700 13px 'DM Sans', system-ui, sans-serif;
    cursor: pointer;
}

.fc-deck-study { border: 1px solid var(--workbook-ink); background: var(--workbook-ink); color: #fff; }
.fc-deck-study:hover { background: #2a3d31; }
.fc-deck-words { border: 1px solid var(--border); background: transparent; color: var(--workbook-ink); }
.fc-deck-words:hover { background: var(--workbook-sage); }

/* === Word list dialog ==================================================== */

.fc-words {
    box-sizing: border-box;
    width: min(620px, calc(100% - 32px));
    max-height: calc(100dvh - 40px);
    margin: auto;
    padding: 30px 28px 24px;
    border: 1px solid var(--workbook-sage-border);
    border-top: 4px solid var(--workbook-ink);
    border-radius: 18px;
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 24px 80px rgb(41 42 37 / 20%);
    font: 400 15px/1.6 'DM Sans', system-ui, sans-serif;
}

.fc-words::backdrop { background: rgb(25 38 30 / 45%); }
.fc-words h2 { margin: 0 0 4px; font: 700 26px/1.25 'Playfair Display', Georgia, serif; }
.fc-words-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--text-muted); }

.fc-words-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 26px;
    cursor: pointer;
}

.fc-words-close:hover { background: var(--workbook-sage); color: var(--text); }
.fc-word-list { display: grid; gap: 4px; margin: 0 0 18px; padding: 0; list-style: none; }

.fc-word-list li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border-radius: 10px;
    background: var(--card);
    border: 1px solid var(--border);
}

.fc-word-list .play-btn { margin: 0; }
.fc-word-list .play-btn[hidden] { display: block; visibility: hidden; }
.fc-list-nl { font-weight: 700; overflow-wrap: anywhere; }
.fc-list-nl .fc-art { font-size: 0.85em; vertical-align: 0; }
.fc-list-en { font-size: 13.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.fc-list-box { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--fc-new); color: var(--text-muted); }
[data-stage="learning"] > .fc-list-box { background: #fbefd5; color: var(--fc-amber); }
[data-stage="known"] > .fc-list-box { background: #e4ecdf; color: var(--workbook-ink); }
[data-stage="mastered"] > .fc-list-box { background: var(--workbook-ink); color: #fff; }
.fc-words-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* === How it works ======================================================== */

.fc-help {
    margin-bottom: 24px;
    padding: 28px 30px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
}

.fc-help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 14px; }
.fc-help h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.fc-help h3:not(:first-child) { margin-top: 20px; }
.fc-help p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7; }
.fc-box-list { display: grid; gap: 6px; margin: 4px 0 12px; padding: 0; list-style: none; }

.fc-box-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.fc-box-n {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--workbook-sage);
    color: var(--workbook-ink);
    font-size: 12px;
    font-weight: 700;
}

.fc-box-list li:last-child .fc-box-n { background: var(--workbook-ink); color: #fff; }
.fc-help-note { padding: 12px 14px; border-radius: 10px; background: var(--workbook-sage); color: var(--workbook-ink); font-size: 14px !important; }
.fc-tips { display: grid; gap: 8px; margin: 0; padding: 0 0 0 18px; font-size: 14.5px; line-height: 1.65; }
.fc-help-keys { line-height: 2.1 !important; }
.fc-help-privacy { margin: 18px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--border); font-size: 13px !important; color: var(--text-muted); }

/* === Motion off ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .fc-card-inner,
    .fc-goal-fill,
    .fc-stack-seg,
    .fc-bar-fill { transition: none; }
    .fc-flipped .fc-card-inner { transform: none; }
    .fc-flip .fc-back { transform: none; visibility: hidden; }
    .fc-flipped .fc-back { visibility: visible; }
    .fc-flipped .fc-front { visibility: hidden; }
    .fc-streak[data-state="risk"] .fc-flame,
    .fc-big-play.fc-playing,
    .fc-summary-streak-new .fc-flame-big { animation: none; }
}

/* === Tablet and phone ==================================================== */

@media (max-width: 900px) {
    /* Five modes as three over two, with no empty slot. */
    .fc-mode-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .fc-mode { grid-column: span 2; }
    .fc-mode:nth-child(n+4) { grid-column: span 3; }
}

@media (max-width: 700px) {
    .fc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .fc-facts li { padding: 10px 12px; }
    .fc-facts strong { font-size: 22px; }
    .fc-today { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; text-align: left; }
    .fc-goal { width: 96px; height: 96px; align-self: center; }
    .fc-goal-num strong { font-size: 25px; }
    .fc-due { font-size: 19px; text-align: center; }
    .fc-nudge { text-align: center; }
    .fc-start-row { justify-content: center; }
    .fc-start-row .fc-primary { width: 100%; }
    .fc-mode { min-height: 0; padding: 10px; align-items: center; text-align: center; }
    .fc-mode-icon { margin-bottom: 2px; }
    .fc-mode-desc { display: none; }
    .fc-mode-name { font-size: 13px; }
    .fc-session-top { gap: 10px; }
    .fc-stage { min-height: 300px; }
    .fc-face { min-height: 250px; padding: 22px 16px; border-radius: 16px; }
    .fc-plain { padding: 22px 16px; border-radius: 16px; }
    .fc-choices { grid-template-columns: 1fr; }
    .fc-type { flex-direction: column; }
    .fc-type .fc-primary { width: 100%; }
    .fc-actions .fc-primary { width: 100%; }
    .fc-grade { min-height: 54px; font-size: 15px; }
    .fc-wide { min-width: 0; }
    .fc-keys,
    .fc-grade-key,
    .fc-choice-key { display: none; }
    .practice-card-title .fc-title-nl { font-size: 22px; }
    .fc-summary-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fc-summary-actions .fc-primary,
    .fc-summary-actions .fc-secondary { flex: 1 1 100%; }
    .fc-deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fc-levels { display: flex; }
    .fc-level { flex: 1; flex-direction: column; align-items: center; gap: 0; padding: 7px 8px; }
    .fc-help { padding: 22px 18px; }
    .fc-help-grid { grid-template-columns: 1fr; gap: 6px; }
    .fc-words { padding: 26px 16px 18px; }
    .fc-word-list li { grid-template-columns: 34px minmax(0, 1fr) auto; }
    .fc-list-en { grid-column: 2 / 4; grid-row: 2; margin-top: -4px; }
}

@media (max-width: 380px) {
    .fc-deck-grid { grid-template-columns: 1fr; }
    .fc-streak { padding: 6px 11px 6px 9px; }
}

/* No hover-only cues on touch screens. */
@media (hover: none) {
    .fc-keys { display: none; }
    .fc-grade-key,
    .fc-choice-key { display: none; }
}