/* ===== Practice tools (js/practice.js; the listening quiz in js/quiz.js) =====
   練習中心 grid, mistake notebook, stats, 間隔複習 page, flashcard decks + swipe
   card, listening stage, and the shared result screen. Colours come from the
   theme tokens (theme.css); buttons reuse the chunky recipe in quiz.css. */

/* ----- shared pieces ----- */
.practice-card { text-align: left; }
.pc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.mode-card .pc-head h3 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    letter-spacing: 1px;
    text-align: left;
}
.pc-head-right {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 700;
}
.back-btn.pc-back {
    width: 38px;
    height: 38px;
    padding: 0;
    flex: none;
    font-size: 1rem;
    display: grid;
    place-items: center;
}
.pc-wide { display: block; width: 100%; margin: 12px 0 4px; }
.pc-wide:disabled { opacity: 0.55; cursor: default; transform: none; }
.pc-note { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin: 14px 0; }
.pc-tip { color: var(--text-muted); font-size: 0.8rem; margin-top: 10px; line-height: 1.6; }
.pc-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-accent);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pc-chip {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    border: 2px solid var(--line);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}
.pc-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
    .pc-chip:not(.on):hover { border-color: var(--primary); }
}
.pc-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 700; }
.pc-field + .pc-field { margin-top: 12px; }
.pc-field .pc-chips { margin: 6px 0 0; }
.pc-panel {
    background: var(--surface-2);
    border: 2px solid var(--line);
    border-radius: 16px;
    padding: 14px;
}
.pc-bubble {
    position: relative;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 14px;
    padding: 9px 12px;
    font-size: 0.88rem;
    line-height: 1.55;
}
.pc-ring {
    --p: 0;
    width: 96px;
    height: 96px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--success) calc(var(--p) * 1%), var(--track) 0);
}
.pc-ring > div, .pc-ring > span {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--bg-card);
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1.1;
}
.pc-ring b { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 900; }
.pc-ring small { font-size: 0.75rem; color: var(--text-muted); }
.pc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.pc-tile {
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 14px;
    padding: 10px 4px;
    text-align: center;
}
.pc-tile b { display: block; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 900; }
.pc-tile span { font-size: 0.74rem; color: var(--text-muted); }
.pc-tile.good { border-color: var(--success); } .pc-tile.good b { color: var(--success-text); }
.pc-tile.bad { border-color: var(--danger); } .pc-tile.bad b { color: var(--danger-text); }
.pc-tile.gold { border-color: var(--gold); } .pc-tile.gold b { color: var(--gold); }
.pc-tile.time { border-color: var(--primary); } .pc-tile.time b { color: var(--text-accent); }
.pc-section {
    margin-top: 16px;
    padding: 14px;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 16px;
}
.pc-section h4 { font-size: 0.92rem; margin: 0 0 8px; }
.pc-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pc-section-head span { font-size: 0.78rem; color: var(--text-muted); }
.pc-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    background: var(--track);
    overflow: hidden;
}
.pc-bar i { display: block; height: 100%; }
.pc-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pc-two .back-btn { padding: 10px 8px; font-size: 0.85rem; }
.pc-two .back-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.pc-list {
    margin-top: 14px;
    border: 2px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}
.pc-list > div { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 0.86rem; }
.pc-list > div + div { border-top: 1px dashed var(--line); }
.pc-empty { text-align: center; padding: 12px 0 6px; }
.pc-empty-mascot { display: block; width: 60px; margin: 0 auto 10px; }
.pc-details { margin-top: 14px; }
.pc-details summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-secondary);
    padding: 6px 0;
}
.pc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pc-progress { flex: 1; height: 14px; }
.pc-progress i { background: var(--success); border-radius: 999px; transition: width 0.3s ease; }
.pc-count { font-size: 0.82rem; color: var(--text-muted); font-weight: 700; min-width: 48px; text-align: right; }

/* computers: 間隔複習, 測驗統計 and the flashcard decks are 1180px wide (css/base.css)
   and two columns, so they show without scrolling (owner's layout rule, 2026-10-23) */
@media (min-width: 1024px) {
    .pc-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; align-items: start; }
    .pc-col > :first-child { margin-top: 0; }
    .pc-col + .pc-col { padding-left: 28px; border-left: 1px dashed var(--line); align-self: stretch; }
    /* 測驗統計: the calendar beside this week vs last week */
    .st-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; align-items: stretch; }
    .st-pair > .pc-section { margin-top: 0; }
    .st-pair .st-week { height: 104px; }
    .st-pair .pc-section-head { flex-wrap: wrap; row-gap: 0; }
    .st-pair .st-heat { gap: 2px; }
    #stats-content .pc-details { margin-top: 8px; }
    #stats-content .achievement-grid { gap: 8px; }
    #stats-content .achievement-badge { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; text-align: left; padding: 6px 10px; }
    #stats-content .achievement-icon { grid-row: span 2; font-size: 1.35rem; }
    #stats-content .achievement-title { margin-top: 0; }
    .fc-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto 1fr;
        grid-template-areas: "opts decks" "lists decks"; gap: 0 28px; align-items: start; }
    .fc-cols-opts { grid-area: opts; }
    .fc-cols-decks { padding-left: 28px; border-left: 1px dashed var(--line); align-self: stretch; align-content: start; grid-area: decks; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .fc-cols-decks .fc-deck { margin: 0; }
    .fc-cols-lists { grid-area: lists; }
}

/* ----- 練習中心 ----- */
.quiz-tools { display: block; margin-top: 22px; }
.hub-title { font-size: 1rem !important; margin: 0 0 10px !important; text-align: left !important; }
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    padding: 12px;
    min-height: 92px;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 4px 0 var(--edge);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.hub-tile:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
@media (hover: hover) and (pointer: fine) {
    .hub-tile:hover { background: var(--bg-option-hover); }
}
.hub-tile.hot { border-color: var(--primary); box-shadow: 0 4px 0 var(--primary-edge); }
.hub-tile.wide, .hub-suggest { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; min-height: 0; }
.hub-icon { font-size: 1.4rem; line-height: 1.2; }
.hub-text b { display: block; font-size: 0.95rem; }
.hub-text small { display: block; font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; }
.hub-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 999px;
    padding: 1px 8px;
}
.hub-mascot { width: 52px; flex: none; }

/* ----- 錯題本 ----- */
.mb-top { display: grid; gap: 4px 20px; }
.mb-summary { display: flex; gap: 14px; align-items: center; margin-bottom: 4px; }
.mb-summary .pc-bubble { flex: 1; }
.mb-act .pc-wide { margin-bottom: 2px; }
.mb-act-sub, .mb-week { margin: 2px 0 0; font-size: 0.8rem; text-align: center; color: var(--text-muted); }
.mb-week { color: var(--success-text); font-weight: 700; }
/* step 1: languages (flag, name, open mistakes); step 2: that language's levels */
.mb-filter { margin: 16px 0 6px; padding: 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.mb-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.mb-lang {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 2px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}
.mb-lang .mb-lang-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-lang b { font-size: 0.8rem; min-width: 1.6em; padding: 0 6px; border-radius: 99px; background: var(--track); text-align: center; }
.mb-lang.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.mb-lang.on b { background: var(--primary); color: #fff; }
@media (hover: hover) and (pointer: fine) {
    .mb-lang:not(.on):hover { border-color: var(--primary); }
}
.mb-groups { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.mb-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 4px; }
.mb-count { font-weight: 800; font-size: 0.92rem; }
.mb-sort { display: inline-flex; gap: 4px; }
.mb-sort .mode-btn { width: auto; min-width: 0; margin: 0; padding: 6px 12px; font-size: 0.82rem; white-space: nowrap; }
.mb-set { display: inline-block; margin-top: 2px; font-size: 0.72rem; color: var(--text-muted); }
.mb-cols { display: grid; gap: 10px; }
.mb-cols .mb-notebook { margin: 0; }
/* phones and tablets: one column, 清空 at the very bottom (computers: .mb-side, below) */
.mb-layout { display: flex; flex-direction: column; }
.mb-side { display: contents; }
.mb-layout .mb-foot { order: 2; }
.mb-pager { margin-top: 14px; }
.mb-see-fixed { width: auto; margin: 10px auto 0; padding: 8px 18px; }
/* computers: summary and the repair button side by side, the words in two columns */
@media (min-width: 1024px) {
    .mb-cols:not(.one) { grid-template-columns: 1fr 1fr; align-items: start; }
    /* the summary, repair button and filter in a side column, the words beside it; a word's
       meaning and its word set share one line — so 14 words fit one 1080p screen */
    .mb-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0 24px; align-items: start; }
    .mb-side { display: block; padding-right: 24px; border-right: 1px dashed var(--line); align-self: stretch; }
    .mb-side .mb-filter { margin-top: 14px; }
    .mb-side .mb-langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mb-main > .mb-toolbar { margin-top: 0; }
    .mb-main .mb-line { display: inline; }
    .mb-main .mb-set { margin: 0 0 0 8px; }
    .mb-main .mb-row { min-height: 54px; padding: 4px 4px 4px 0; }
}
.mb-notebook {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    border: 2px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--surface);
    /* the red margin line of a notebook page */
    background-image: linear-gradient(to right, transparent 38px, rgba(var(--primary-rgb), 0.35) 38px, rgba(var(--primary-rgb), 0.35) 40px, transparent 40px);
}
.mb-row {
    display: grid;
    grid-template-columns: 38px 1fr auto 30px 30px;
    align-items: center;
    gap: 0 8px;
    min-height: 58px;
    padding: 6px 4px 6px 0;
}
.mb-row + .mb-row { border-top: 1px solid var(--border-light); }
.mb-n { font-size: 0.75rem; color: var(--text-muted); text-align: center; }
.mb-word { padding-left: 10px; min-width: 0; }
.mb-word b { font-family: var(--font-serif); font-size: 1.12rem; word-break: break-word; }
.mb-word span { font-size: 0.78rem; color: var(--text-muted); margin-left: 6px; }
.mb-line { font-size: 0.84rem; color: var(--text-secondary); word-break: break-word; }
.mb-row.fixed .mb-word b, .mb-row.fixed .mb-line {
    text-decoration: line-through;
    text-decoration-color: var(--primary);
    text-decoration-thickness: 2px;
    opacity: 0.55;
}
.mb-state { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.mb-dots { display: flex; gap: 3px; align-items: center; }
.mb-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.mb-dots em { font-style: normal; font-size: 0.75rem; color: var(--text-accent); font-weight: 700; margin-left: 2px; }
.mb-slots { display: flex; gap: 4px; }
.mb-slots i { width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--line); background: var(--paper); }
.mb-slots i.on { background: var(--success); border-color: var(--success-edge); }
.mb-stamp {
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--success-text);
    border: 2px solid var(--success);
    border-radius: 6px;
    padding: 0 5px;
    transform: rotate(-8deg);
    white-space: nowrap;
}
.mb-del {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
}
.mb-del:hover { color: var(--danger); background: var(--danger-bg); }
.pc-more { margin-top: 10px; }
.mb-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--success-text);
    font-weight: 700;
}
.mb-clear {
    background: none;
    border: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
}
.mb-clear:hover { color: var(--danger); }

/* ----- 測驗統計 ----- */
.st-new { background: var(--petal); }
.st-learning { background: var(--gold); }
.st-familiar { background: var(--primary); }
.st-mastered { background: var(--success); }
.st-hero { text-align: center; margin: 4px 0 8px; }
.st-hero small { display: block; font-size: 0.78rem; color: var(--text-muted); }
.st-hero b { display: block; font-family: var(--font-serif); font-size: 2.6rem; font-weight: 900; color: var(--success-text); line-height: 1.1; }
.st-hero span { font-size: 0.82rem; color: var(--text-secondary); }
.st-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.74rem; color: var(--text-muted); margin: 8px 0 4px; }
.st-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.st-set { margin-top: 10px; }
.st-set-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.84rem; margin-bottom: 4px; }
.st-set-head b { font-family: var(--font-serif); }
.st-set-head span { color: var(--text-muted); font-size: 0.78rem; text-align: right; }
.st-heat {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-auto-flow: column;
    grid-template-columns: repeat(var(--weeks), 1fr);
    gap: 3px;
    margin: 8px 0 6px;
}
.st-heat i { aspect-ratio: 1; border-radius: 3px; background: var(--heat-0); }
.st-heat i.future { visibility: hidden; }
.h0 { background: var(--heat-0) !important; }
.h1 { background: var(--heat-1) !important; }
.h2 { background: var(--heat-2) !important; }
.h3 { background: var(--heat-3) !important; }
.h4 { background: var(--heat-4) !important; }
.st-heat-legend { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: 0.75rem; color: var(--text-muted); }
.st-heat-legend i { width: 10px; height: 10px; border-radius: 2px; }
.st-up { color: var(--success-text); font-weight: 800; font-size: 0.85rem !important; }
.st-down { color: var(--danger-text); font-weight: 800; font-size: 0.85rem !important; }
.st-week { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 8px; }
.st-week > div { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.st-week-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; gap: 2px; }
.st-week-bars i { flex: 1; min-height: 2px; border-radius: 5px 5px 2px 2px; background: var(--primary); }
.st-week-bars i.prev { background: var(--track); }
.st-week small { font-size: 0.75rem; color: var(--text-muted); }
.st-week-legend { display: flex; gap: 14px; justify-content: flex-end; font-size: 0.74rem; color: var(--text-muted); margin-top: 6px; }
.st-week-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--primary); margin-right: 4px; vertical-align: -1px; }
.st-week-legend i.prev { background: var(--track); }
.pc-section .stats-chart-title { margin-top: 0; }
/* 測驗統計 on phones: the tiles (in the right column on computers) come first */
@media (max-width: 1023px) {
    #stats-content .pc-cols { display: flex; flex-direction: column; }
    #stats-content .pc-col, #stats-content .st-pair { display: contents; }
    #stats-content .pc-tiles { order: -1; }
}

/* ----- 間隔複習 page ----- */
.srs-talk { display: flex; gap: 10px; align-items: center; }
.srs-mascot { width: 64px; flex: none; }
.srs-talk .pc-bubble { flex: 1; }
/* the 間隔複習 page's way to the mistake book (the 複習 tab lands on this page) */
.srs-mistakes-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 14px 0 4px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}
.srs-mistakes-row b { margin-left: auto; font-weight: 600; font-size: 0.82rem; color: var(--text-secondary); }
.srs-mistakes-row:hover { border-color: var(--primary); }
.srs-due {
    width: 170px;
    height: 170px;
    /* the bottom margin clears the 7px "thickness" shadow and leaves a gap above 開始複習 */
    margin: 18px auto 26px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    box-shadow: 0 7px 0 var(--primary-edge);
    background: var(--surface);
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1.1;
}
.srs-due b { font-family: var(--font-serif); font-size: 3.4rem; font-weight: 900; line-height: 1; color: var(--primary); }
.srs-due small { font-size: 0.8rem; color: var(--text-muted); }
.srs-due.none { border-color: var(--line); box-shadow: 0 7px 0 var(--edge); }
.srs-due.none b { color: var(--text-muted); }
.srs-forecast { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.srs-forecast > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.srs-forecast i { width: 100%; min-height: 2px; background: var(--gold); border-radius: 5px 5px 2px 2px; }
.srs-forecast .today i { background: var(--primary); }
.srs-forecast small { font-size: 0.75rem; color: var(--text-muted); }
.srs-fc-n { font-size: 0.75rem; color: var(--text-secondary); font-weight: 700; min-height: 1em; }
.srs-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.srs-stages > div { border-radius: 12px; padding: 8px 2px; text-align: center; color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22); }
.srs-stages b { display: block; font-family: var(--font-serif); font-size: 1.2rem; }
.srs-stages small { font-size: 0.75rem; }
.srs-stages .st-learning, .srs-stages .st-new { color: #2b2724; }

/* ----- 單字閃卡: decks ----- */
.fc-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 14px; }
.fc-opts .pc-label:not(:first-child) { margin-left: 8px; }
.fc-deck {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 9px;
    padding: 11px 12px;
    font: inherit;
    color: var(--text);
    text-align: left;
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 3px 0 var(--edge);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.fc-deck:active { transform: translateY(3px); box-shadow: none; }
.fc-deck.last { border-color: var(--primary); box-shadow: 0 3px 0 var(--primary-edge); }
.fc-deck-badge {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 0.9rem;
    background: var(--primary-soft);
    color: var(--text-accent);
}
.fc-deck-text { flex: 1; min-width: 0; }
.fc-deck-text b { display: block; font-size: 0.94rem; }
.fc-deck-text em { font-style: normal; font-size: 0.74rem; color: var(--text-accent); margin-left: 4px; }
.fc-deck-text small { display: block; font-size: 0.76rem; color: var(--text-muted); margin-top: 3px; }
.fc-deck-bar { height: 7px; margin-top: 5px; }
.fc-deck-go { color: var(--primary); font-weight: 900; }
.fc-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.fc-list li { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; margin: 4px 0; border-radius: 10px; }
.fc-list li.yes { background: var(--success-bg); }
.fc-list li.no { background: var(--danger-bg); }

/* ----- 單字閃卡: the swipe card ----- */
.fc-counts { display: flex; justify-content: space-between; margin: 4px 0 10px; }
.fc-cnt { font-weight: 800; font-size: 0.84rem; padding: 3px 10px; border-radius: 999px; border: 2px solid; }
.fc-cnt.no { color: var(--danger-text); border-color: var(--danger); background: var(--danger-bg); }
.fc-cnt.yes { color: var(--success-text); border-color: var(--success); background: var(--success-bg); }
.fc-scene { position: relative; height: 300px; margin: 6px 0 18px; perspective: 1000px; }
.fc-stack { position: absolute; inset: 10px 10px -7px; border: 2px solid var(--line); border-radius: 22px; background: var(--surface-2); }
.fc-card {
    --yes: 0;
    --no: 0;
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.26s ease;
    cursor: pointer;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}
.fc-card.flipped { transform: rotateY(180deg); }
.fc-card.dragging { transition: none; cursor: grabbing; }
.fc-card.flying { transition: transform 0.26s ease-in, opacity 0.26s ease-in; }
.fc-card:focus-visible .fc-face { border-color: var(--primary); }
.fc-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border: 2px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 5px 0 var(--edge);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px;
    text-align: center;
}
.fc-back { transform: rotateY(180deg); }
.fc-big { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 700; line-height: 1.2; word-break: break-word; }
.fc-big.fc-mean { font-size: 1.7rem; }
.fc-sub { color: var(--text-muted); font-size: 1rem; }
.fc-tap { position: absolute; bottom: 12px; left: 0; right: 0; font-size: 0.74rem; color: var(--text-muted); }
.fc-speak {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: var(--paper);
    cursor: pointer;
    font-size: 1rem;
}
.fc-was { position: absolute; top: 16px; left: 16px; font-size: 0.75rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; }
.fc-was.yes { color: var(--success-text); background: var(--success-bg); }
.fc-was.no { color: var(--danger-text); background: var(--danger-bg); }
.fc-tag {
    position: absolute;
    top: 22px;
    z-index: 2;
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 1.1rem;
    padding: 0 10px;
    border: 3px solid;
    border-radius: 8px;
    background: var(--surface);
    pointer-events: none;
    backface-visibility: hidden;
}
.fc-tag.yes { right: 18px; color: var(--success-text); border-color: var(--success); transform: rotate(12deg); opacity: var(--yes); }
.fc-tag.no { left: 18px; color: var(--danger-text); border-color: var(--danger); transform: rotate(-12deg); opacity: var(--no); }
.fc-card.flipped .fc-tag { transform: rotateY(180deg); }
.fc-rate .back-btn { padding: 13px 8px; font-size: 1rem; }
.fc-rate .fc-no { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-text); }
.fc-rate .fc-yes { background: var(--success-bg); border-color: var(--success); color: var(--success-text); }
.fc-keys { text-align: center; }
@media (hover: none) { .fc-keys { display: none; } }

/* ----- 聽力測驗 ----- */
.listening-stage { text-align: center; }
.ls-prompt { font-family: var(--font-serif); font-weight: 900; font-size: 1.1rem; margin: 0 0 6px; }
.ls-play {
    position: relative;
    width: 124px;
    height: 124px;
    margin: 12px auto 10px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    box-shadow: 0 7px 0 var(--primary-edge);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.ls-play:active { transform: translateY(6px); box-shadow: 0 1px 0 var(--primary-edge); }
.ls-play::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 3px solid var(--primary);
    opacity: 0;
    animation: lsPulse 1.8s ease-out infinite;
    pointer-events: none;
}
@keyframes lsPulse { from { transform: scale(0.85); opacity: 0.45; } to { transform: scale(1.15); opacity: 0; } }
.ls-play svg { width: 52px; height: 52px; fill: var(--on-primary); }
.ls-tools { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.back-btn.ls-tool { padding: 6px 14px; font-size: 0.85rem; }
#quiz-card.listening-on .options-divider, #quiz-card.listening-on .question-deco { display: none; }
.listening-option { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; padding: 16px 6px; }
.listening-typing { grid-column: 1 / -1; }
.ls-boxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0 12px; }
.ls-boxes i {
    width: 34px;
    height: 42px;
    border-radius: 10px;
    border: 2px solid var(--line);
    border-bottom-width: 4px;
    background: var(--surface);
    display: grid;
    place-items: center;
    font-style: normal;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
}
.ls-boxes i.gap { width: 10px; border: none; background: none; }
.ls-boxes i.hinted { border-color: var(--primary); color: var(--text-accent); }
.listening-typing .listening-input-group { margin: 6px 0 10px; }
.listening-typing .listening-input { width: 100%; }
.listening-input.is-right { border-color: var(--success); }
.listening-input.is-wrong { border-color: var(--danger); }
.ls-keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 10px; }
.back-btn.ls-key { padding: 7px 0; font-size: 1rem; box-shadow: 0 3px 0 var(--edge); }
.ls-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ls-actions button { padding: 11px 8px; }
.ls-actions button:disabled { opacity: 0.5; cursor: default; transform: none; }

/* ----- result screen ----- */
.rs-hero { position: relative; text-align: center; padding-top: 6px; }
.rs-mascot { display: block; width: 68px; margin: 0 auto; }
.rs-title { font-family: var(--font-serif); font-size: 1.5rem !important; margin: 8px 0 0 !important; letter-spacing: 1px; }
.rs-confetti { position: absolute; inset: -10px 0 0; pointer-events: none; overflow: visible; }
.rs-confetti i {
    position: absolute;
    width: 7px;
    height: 12px;
    border-radius: 2px;
    opacity: 0.9;
    transform: rotate(var(--r));
    animation: rsDrop 0.9s ease-out both;
}
@keyframes rsDrop { from { transform: translateY(-24px) rotate(0deg); opacity: 0; } to { transform: translateY(0) rotate(var(--r)); opacity: 0.9; } }
.rs-score { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin: 0 0 8px; }
.rs-goal {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 12px;
    margin: 10px 0;
    border-radius: 14px;
    border: 2px solid var(--gold);
    background: rgba(184, 134, 43, 0.10);
}
.rs-goal b { display: block; font-size: 0.95rem; }
.rs-goal small { font-size: 0.78rem; color: var(--text-muted); }
.pc-ring.rs-ring { width: 64px; height: 64px; background: conic-gradient(var(--gold) calc(var(--p) * 1%), var(--track) 0); }
.pc-ring.rs-ring > span { width: 48px; height: 48px; font-size: 0.75rem; font-weight: 800; }
.rs-goal.done { border-color: var(--success); background: var(--success-bg); }
.rs-goal.done .rs-ring { background: var(--success); }
.rs-hook {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 10px 0;
    padding: 10px 12px;
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    color: var(--text);
    background: none;
    border: 2px dashed var(--primary);
    border-radius: 14px;
}
button.rs-hook { cursor: pointer; }
button.rs-hook:hover { background: var(--primary-soft); }
.rs-actions .next-btn, .rs-actions .back-btn, .rs-actions .share-btn { flex: 1 1 40%; }
#result-card .lesson-result { margin: 8px 0; }
/* computers: 小花火 beside the title and the buttons in one row when they fit, so a result
   (with a lesson's pass / fail line) fits one 1080p screen (big check 2026-10-24) */
@media (min-width: 1024px) {
    .rs-hero { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 0; }
    .rs-mascot { width: 54px; margin: 0; }
    .rs-title { margin: 0 !important; }
    .rs-actions .next-btn, .rs-actions .back-btn, .rs-actions .share-btn { flex: 1 1 auto; }
    /* today's goal and the reason to come back side by side */
    #result-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
    #result-summary > * { grid-column: 1 / -1; }
    #result-summary > .rs-goal:not(:last-child) { grid-column: 1; }
    #result-summary > .rs-goal + .rs-hook { grid-column: 2; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ls-play::after, .rs-confetti i { animation: none; }
    .fc-card, .fc-card.flying { transition: none; }
}