@font-face {
    /* Thai runs in UI text render ~18% larger to match Latin's optical
       weight; unicode-range scopes it, so Latin never touches this face. */
    font-family: "UI Thai";
    src: local("Noto Sans Thai"), local("Thonburi");
    size-adjust: 118%;
    unicode-range: U+0E00-0E7F;
}

@font-face {
    font-family: "Nunito";
    src: url("../fonts/nunito-latin-var.acfce21e9f6e.woff2") format("woff2");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
    /* latin subset only: Thai glyphs fall through to the system stack */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    box-sizing: border-box;
}

/* The hidden attribute must always win, even over display:flex/grid rules. */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: "UI Thai", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
    background: #f7f5f2;
    color: #26221c;
    line-height: 1.5;
}

h1 {
    font-weight: 600;
}

/* --- Login --- */

.auth-card {
    max-width: 22rem;
    margin: 15vh auto 0;
    padding: 2rem;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 12px;
}

.auth-card h1 {
    margin: 0;
    font-size: 1.6rem;
}

.auth-card .tagline {
    margin-top: 0.25rem;
    color: #6f675c;
    font-size: 0.9rem;
}

.auth-card form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 1.25rem;
}

.auth-card label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.auth-card input {
    padding: 0.55rem 0.7rem;
    border: 1px solid #d8d2c8;
    border-radius: 8px;
    font-size: 1rem;
}

.auth-card button {
    margin-top: 1rem;
    padding: 0.6rem;
    border: none;
    border-radius: 8px;
    background: #1f6feb;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

.auth-card button:hover {
    background: #1a5fd0;
}

.form-errors,
.errorlist {
    color: #b3261e;
    font-size: 0.85rem;
    margin: 0;
    padding-left: 0;
    list-style: none;
}

/* --- Home --- */

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid #e5e0d8;
}

.topbar .brand {
    font-weight: 700;
    color: #26221c;
    text-decoration: none;
}

.topbar .account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #6f675c;
}

.topbar form {
    margin: 0;
}

.link-button {
    border: none;
    background: none;
    padding: 0;
    color: #1f6feb;
    font-size: 0.9rem;
    cursor: pointer;
}

.link-button:hover {
    text-decoration: underline;
}

.canvas {
    max-width: 40rem;
    margin: 4rem auto;
    padding: 0 1.25rem;
    text-align: center;
}

/* --- Home: quiet status line --- */

.home {
    margin-top: 2.5rem;
}

.greeting {
    /* 1.55rem x the UI-Thai 118% size-adjust lands near the old 1.8rem;
       no default h1 top margin — the topbar provides the separation. */
    font-size: 1.55rem;
    margin-top: 0;
    margin-bottom: 0.6rem;
}

.status-line {
    margin: 0;
    color: #6f675c;
    font-size: 0.9rem;
}

.progress {
    height: 0.55rem;
    background: #ece7df;
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    /* Always at least a sliver, so "1 of 28" never shows an empty bar. */
    min-width: 0.55rem;
    background: #2da44e;
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* --- Home: action buttons --- */

.actions {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 2rem;
}

.cta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    text-decoration: none;
    text-align: center;
}

.cta-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.cta-sub {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* Primary "go" actions wear the action blue: the round-5 ink primaries
   failed the first real-user test (the button read as furniture and was
   never found). Blue = do the thing, green stays exclusively review-due. */
.cta-primary {
    background: #1f6feb;
    color: #fff;
}

.cta-primary:hover {
    background: #1a5fd0;
}

.cta-secondary {
    background: #fff;
    color: #26221c;
    border: 1px solid #d8d2c8;
}

.cta-secondary:hover {
    background: #faf8f4;
    border-color: #c5bdb1;
}

/* Cards were white-on-off-white with hairline borders: give surfaces a
   soft real shadow so the grouping reads. */
.cta,
.letter-card,
.auth-card,
.passkey-row,
.practice-choice {
    box-shadow: 0 1px 2px rgba(38, 34, 28, 0.05), 0 5px 14px rgba(38, 34, 28, 0.07);
}

.cta-disabled {
    color: #a49b8d;
    cursor: default;
}

.cta-due {
    background: #2da44e;
    color: #fff;
}

.cta-due:hover {
    background: #26893f;
}

.cta .progress {
    width: 100%;
    margin: 0.35rem 0 0.15rem;
}

.cta-due .progress {
    background: rgba(255, 255, 255, 0.35);
}

.cta-due .progress-fill {
    background: #fff;
}

/* --- Learn: level teach screen --- */

.learn {
    margin-top: 1rem;
}

.level-kicker {
    margin: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6f675c;
}

.learn h1 {
    margin: 0.25rem 0 0;
}

.level-title {
    margin: 0.25rem 0 1.5rem;
    color: #6f675c;
}

.letter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.letter-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 2rem 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 14px;
}

.class-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.class-mid {
    background: #dbeafe;
    color: #1d4ed8;
}

.class-high {
    background: #fef3c7;
    color: #b45309;
}

.class-low {
    background: #fae8ff;
    color: #a21caf;
}

/* Thai glyphs need roomy line boxes: descenders (ฎ ฏ), below-line vowels
   (ุ ู), and stacked tone marks all reach outside a 1.0 line-height and
   would overlap neighboring elements (seen live with ฎ in level 20). */
.letter-glyph {
    font-size: 6rem;
    line-height: 1.3;
    color: #26221c;
    text-decoration: none;
    /* plain stack (no size-adjusted UI Thai): guide positions and glyph
       boxes were measured against these metrics */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
}

a.letter-glyph:hover {
    color: #1f6feb;
}

.letter-glyph-large {
    /* 12rem/1.3 tuned visually against ฐ ฎ ป ก: contains the worst-case
       ink (ฐ's below-stack) without the dead leading 1.4 added, and keeps
       the card short enough that the step nav stays above the fold. */
    font-size: 12rem;
    line-height: 1.3;
    padding: 0 0.08em;
    /* Guide positions measured from the font's real metrics (canvas
       TextMetrics at line-height 1.3): baseline 79%, body top 35%. */
    background-image:
        linear-gradient(to bottom, transparent calc(79% - 1px), #e2dccf 79%, transparent calc(79% + 1px)),
        linear-gradient(to bottom, transparent calc(35% - 1px), #ece7dd 35%, transparent calc(35% + 1px));
}

.letter-illustration {
    width: 12rem;
    height: 12rem;
    object-fit: contain;
    border-radius: 10px;
}

.letter-step {
    max-width: 24rem;
    margin: 0.5rem auto 0;
    padding: 1rem 1.25rem;
    gap: 0.3rem;
}

/* Compact overview cards: whole card is a link, no images or audio */

.letter-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

.letter-card-compact {
    padding: 1.4rem 0.75rem 1rem;
    gap: 0.15rem;
    text-decoration: none;
    color: inherit;
}

.letter-card-compact:hover {
    border-color: #1f6feb;
}

.letter-glyph-small {
    font-size: 3.2rem;
}

.letter-card-compact .letter-name {
    font-size: 1rem;
}

.letter-card-compact .letter-rtgs {
    font-size: 0.8rem;
}

.letter-step .letter-illustration {
    width: 5rem;
    height: 5rem;
}

.cta-study {
    display: inline-flex;
    margin-top: 1rem;
    background: #1f6feb;
    color: #fff;
    padding: 0.75rem 1.5rem;
}

.cta-study:hover {
    background: #1a5fd0;
}

.step-nav {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
}

.step-link {
    color: #1f6feb;
    text-decoration: none;
    font-weight: 600;
}

.step-link:hover {
    text-decoration: underline;
}

.step-link-disabled {
    color: #c5bdb1;
    font-weight: 600;
}

.step-overview {
    color: #6f675c;
}

.step-done {
    color: #2da44e;
}

/* The forward action drives the whole study flow: a filled pill in the
   action blue (distinct from the ink "Listen" utility button above it). */
.step-nav .step-primary {
    background: #1f6feb;
    color: #fff;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    font-weight: 700;
}

.step-nav .step-primary:hover {
    background: #1a5fd0;
    text-decoration: none;
}



.letter-name {
    font-size: 1.3rem;
    font-weight: 600;
}

.letter-rtgs {
    font-size: 0.9rem;
    color: #6f675c;
}

.audio-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.audio-button {
    padding: 0.45rem 0.9rem;
    border: 1px solid #d8d2c8;
    border-radius: 999px;
    background: #f7f5f2;
    font-size: 0.85rem;
    cursor: pointer;
}

.audio-button:hover {
    background: #ece7df;
}

.audio-primary {
    background: #26221c;
    border-color: #26221c;
    color: #fff;
    font-weight: 700;
    padding: 0.55rem 1.6rem;
}

.audio-primary:hover {
    background: #3a352c;
}

/* Attention pulse for the replay button when autoplay was blocked and
   nothing has been heard yet. */
@keyframes pulse-attention {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(31, 111, 235, 0.4);
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 0 0 9px rgba(31, 111, 235, 0);
    }
}

.pulse {
    animation: pulse-attention 1.2s ease-in-out infinite;
    border-color: #1f6feb;
}

/* Outline buttons turn blue when pulsing; the filled primary must keep its
   white label (blue-on-blue made "Listen" unreadable). */
.audio-button.pulse {
    color: #1f6feb;
}

.audio-primary.pulse {
    color: #fff;
}

.level-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.cta-start {
    background: #1f6feb;
    color: #fff;
    padding: 0.75rem 2rem;
    font-size: 1.05rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
}

.cta-start:hover {
    background: #1a5fd0;
}

/* --- Quiz --- */

.quiz-panel {
    max-width: 26rem;
    margin: 1.5rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.quiz-intro-text {
    color: #6f675c;
    margin: 0;
}

.quiz-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Inside the quiz prompt the class badge flows in the column above the
   glyph — the absolute corner placement belongs to the letter cards. */
.quiz-prompt .class-badge {
    position: static;
}

/* --- Account page --- */

.topbar .account-icon {
    display: inline-flex;
    align-items: center;
    color: #6f675c;
}

.topbar .account-icon:hover {
    color: #1f6feb;
}

.account-page {
    max-width: 34rem;
}

.account-identity {
    color: #6f675c;
    margin-bottom: 1.5rem;
}

.passkey-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0.75rem 0 1.5rem;
}

.passkey-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e5dfd5;
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

.passkey-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.passkey-dates {
    color: #6f675c;
    font-size: 0.85rem;
}

.passkey-remove {
    color: #b3261e;
}

.passkey-remove:disabled {
    color: #c5bdb1;
    cursor: not-allowed;
}

.account-add {
    border: none;
}

.quiz-question {
    margin: 0;
    font-size: 1.1rem;
}

.quiz-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(7rem, 1fr));
    gap: 0.75rem;
    width: 100%;
}

/* Text answers (reading/class questions) stack as a vertical list for a
   faster scan; glyph answers keep the 2x2 grid. */
.quiz-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.quiz-option-title {
    display: block;
}

.quiz-option-sub {
    display: block;
    font-size: 0.85rem;
    font-weight: 400;
    color: #6f675c;
    margin-top: 0.1rem;
}

.quiz-option {
    font-size: 3.2rem;
    line-height: 1.2;
    padding: 1.1rem 0;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 14px;
    cursor: pointer;
}

.quiz-option:hover {
    border-color: #1f6feb;
}

.option-correct {
    background: #d1f0db;
    border-color: #2da44e;
}

.option-wrong {
    background: #fadcd9;
    border-color: #b3261e;
}

.quiz-progress {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: #6f675c;
}

.review-glyph {
    font-size: 7rem;
    line-height: 1.3;
}

.review-progressbar {
    width: 100%;
    max-width: 20rem;
}

.quiz-option-text {
    font-size: 1rem;
    line-height: 1.4;
    padding: 0.7rem 1rem;
    font-weight: 600;
}

.quiz-result-emoji {
    font-size: 3rem;
    margin: 0;
}

.quiz-result-score {
    color: #6f675c;
    margin: 0;
}

/* --- Practice chooser --- */

.practice-choices {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.practice-choice {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 14px;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.practice-choice:hover {
    border-color: #1f6feb;
}

.quiz-save-status {
    margin: 0;
    font-size: 0.85rem;
    color: #6f675c;
}

.back-link {
    font-size: 0.9rem;
    color: #1f6feb;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

/* --- Small screens --- */

@media (max-width: 480px) {
    .status-row {
        flex-wrap: wrap;
    }

    .stat-course {
        flex-basis: 100%;
        order: 3;
    }
}

/* --- Mobile: primary actions anchor to the bottom (thumb reach) --- */

@media (max-width: 640px) {
    /* The page body becomes the height authority: main gets exactly the
       leftover under the topbar. Height flows through the html/body
       percentage chain, NOT viewport units: dvh mis-reports in installed
       PWAs (WebAPK sizes it as if the URL bar existed), which clipped the
       anchored actions by exactly the chrome height. Percentages always
       track the real layout viewport. */
    html {
        height: 100%;
    }

    body {
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }

    .home {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        width: 100%;
        margin-top: 0.75rem;
        margin-bottom: 0;
        padding-bottom: 0.75rem;
    }

    /* Tighter action buttons on phones: the grid needs the fold budget */
    .home .cta {
        padding: 0.85rem 1.25rem;
    }

    .home .actions {
        gap: 0.6rem;
    }

    .home .actions {
        margin-top: auto;
    }

    .canvas.learn {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        width: 100%;
        margin-bottom: 0;
        padding-bottom: 0.75rem;
    }

    .learn > section {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .learn .quiz-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* The prompt owns the leftover space, centering the glyph between
       the header block and the bottom-anchored answers. */
    .learn .quiz-prompt {
        flex: 1;
        justify-content: center;
    }

    .learn .quiz-options {
        margin-top: auto;
    }

    /* The reveal lives in the prompt's space on phones; a smaller
       mnemonic image keeps question + reveal + answers on one screen. */
    .quiz-reveal .reveal-illustration {
        width: 5.5rem;
        height: 5.5rem;
    }

    .learn .step-nav {
        margin-top: auto;
        padding-bottom: 0.5rem;
    }
}

/* Short viewports (iPhone-SE-class phones, squat windows): shave the
   reveal until prompt + reveal + options fit without scrolling. */
@media (max-height: 700px) {
    .quiz-reveal {
        margin-top: 0.35rem;
    }

    .quiz-reveal .reveal-illustration {
        width: 4rem;
        height: 4rem;
    }
}

.account-footer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    align-items: center;
    margin-top: 1.5rem;
}

.account-footer form {
    margin: 0;
}

/* --- Mastery grid: the whole alphabet, tinted by class and state --- */

.mastery-grid {
    display: grid;
    /* 44 letters = a perfect 11 x 4 rectangle on desktop */
    grid-template-columns: repeat(11, 1fr);
    gap: 0.35rem;
    margin: 1rem 0 0.35rem;
}

@media (max-width: 640px) {
    /* 7 across = 7 rows for 44 letters (6-across would need 8) */
    .mastery-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

.mastery-letter {
    position: relative;
    font-size: 1.35rem;
    line-height: 1.4;
    padding: 0.2rem 0 0.3rem;
    border-radius: 9px;
    text-align: center;
    border: 1.5px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.08s ease;
}

.mastery-letter:active {
    transform: scale(0.92);
}

/* One variable per channel: hue = class (the .class-* tints), mastery is
   structural — outline = unseen, tint = learning, tint + dot = solid. */
.mastery-solid::after {
    content: "";
    position: absolute;
    bottom: 0.18rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: #26221c;
}

/* Tinted tiles keep near-black letterforms: the learner is still
   learning to READ these shapes — class lives in the background. */
.mastery-learning,
.mastery-solid {
    color: #2b2620;
}

/* unseen = neutral outline ghosts, whatever the class (declared last: wins) */
.mastery-unseen {
    background: transparent;
    border-color: #d5cec2;
    color: #8a8173;
}

/* --- Quiz feel --- */

.quiz-option {
    transition: transform 0.06s ease, background 0.15s ease;
}

.quiz-option:active {
    transform: scale(0.97);
}

@keyframes option-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.option-wrong {
    animation: option-shake 0.4s ease;
}

/* Speaking indicator: three equalizer bars that dance while audio plays */
.speaking-indicator {
    display: inline-flex;
    align-items: flex-end;
    gap: 0.32rem;
    height: 2rem;
    margin: 0.75rem 0;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}

.speaking-indicator i {
    width: 0.42rem;
    height: 0.55rem;
    border-radius: 3px;
    background: #26221c;
}

.speaking-indicator.speaking-live {
    opacity: 1;
}

.speaking-indicator.speaking-live i {
    animation: equalize 0.8s ease-in-out infinite;
}

.speaking-indicator.speaking-live i:nth-child(2) {
    animation-delay: 0.15s;
}

.speaking-indicator.speaking-live i:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes equalize {
    0%, 100% { height: 0.55rem; }
    50% { height: 2rem; }
}

/* --- Mastery legend + letter sheet --- */

.mastery-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0 0.9rem;
    flex-wrap: wrap;
}

.legend-chip {
    padding: 0.12rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.legend-unseen {
    background: transparent;
    border: 1.5px solid #d5cec2;
    color: #8a8173;
}

.legend-solid {
    background: transparent;
    color: #6f675c;
    font-weight: 600;
}

.letter-sheet {
    border: none;
    border-radius: 16px;
    padding: 1.5rem 2rem;
    text-align: center;
    max-width: 18rem;
    box-shadow: 0 10px 40px rgba(38, 34, 28, 0.25);
}

.letter-sheet::backdrop {
    background: rgba(38, 34, 28, 0.45);
}

.letter-sheet .class-badge {
    position: static;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.letter-sheet .letter-glyph {
    display: block;
    font-size: 5rem;
    line-height: 1.3;
}

.letter-sheet .letter-name {
    display: block;
    font-weight: 700;
}

.letter-sheet .letter-rtgs {
    display: block;
    color: #6f675c;
    font-size: 0.9rem;
}

.sheet-state {
    color: #6f675c;
    font-size: 0.85rem;
    margin: 0.5rem 0 0.75rem;
}

.letter-sheet .audio-button {
    margin-bottom: 0.75rem;
}

.letter-sheet .link-button {
    display: block;
    margin: 0 auto;
}

/* --- Class-question answers wear their class colors --- */

.quiz-option.class-fill-mid {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #93c5fd;
}

.quiz-option.class-fill-high {
    background: #fef3c7;
    color: #b45309;
    border-color: #fcd34d;
}

.quiz-option.class-fill-low {
    background: #fae8ff;
    color: #a21caf;
    border-color: #f0abfc;
}

/* Outcome flashes must beat the class fills (two-class specificity) */
.quiz-option.option-correct {
    background: #d1f0db;
    border-color: #2da44e;
    color: #26221c;
}

.quiz-option.option-wrong {
    background: #fadcd9;
    border-color: #b3261e;
    color: #26221c;
}

/* On class questions the background channel belongs to the class, so the
   outcome must not repaint it (green-vs-tint pastel soup); correct/wrong
   speak through a heavy inset ring instead. */
.quiz-option.class-fill-mid.option-correct,
.quiz-option.class-fill-mid.option-wrong {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #93c5fd;
}

.quiz-option.class-fill-high.option-correct,
.quiz-option.class-fill-high.option-wrong {
    background: #fef3c7;
    color: #b45309;
    border-color: #fcd34d;
}

.quiz-option.class-fill-low.option-correct,
.quiz-option.class-fill-low.option-wrong {
    background: #fae8ff;
    color: #a21caf;
    border-color: #f0abfc;
}

.quiz-option.class-fill-mid.option-correct,
.quiz-option.class-fill-high.option-correct,
.quiz-option.class-fill-low.option-correct {
    box-shadow: inset 0 0 0 3px #2da44e;
}

.quiz-option.class-fill-mid.option-wrong,
.quiz-option.class-fill-high.option-wrong,
.quiz-option.class-fill-low.option-wrong {
    box-shadow: inset 0 0 0 3px #b3261e;
}

/* Reveal: the class-question glyph takes on its class color */

/* --- Quiz reveal: the teaching moment fills the void --- */

.reveal-glyph {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.5rem 1.5rem;
    border-radius: 14px;
    margin: 0.25rem 0;
}

.reveal-glyph-letter {
    font-size: 2.6rem;
    line-height: 1.3;
}

.reveal-glyph-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


.quiz-progressbar {
    width: 100%;
    margin-bottom: 0.5rem;
}

.quiz-reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.75rem;
    animation: reveal-in 0.25s ease;
}

@keyframes reveal-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.reveal-verdict {
    margin: 0;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.reveal-correct .reveal-verdict {
    color: #2da44e;
}

.reveal-wrong .reveal-verdict {
    color: #b3261e;
}

.quiz-reveal .class-badge {
    position: static;
    display: inline-block;
    margin: 0.15rem 0;
}

.reveal-name {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.reveal-rtgs {
    margin: 0;
    color: #6f675c;
    font-size: 0.9rem;
}

.reveal-illustration {
    width: 7rem;
    height: 7rem;
    object-fit: contain;
    border-radius: 10px;
    margin-top: 0.35rem;
}

/* --- Intro: how Thai letters work (the post-signup orientation) --- */

/* Prose reads left-aligned in a narrow measure; the centered canvas
   keeps the heading, example card, and buttons on axis. */
.intro-text {
    max-width: 26rem;
    margin: 0.9rem auto 0;
    text-align: left;
}

.intro .letter-step {
    margin-top: 1.25rem;
}

/* The name's two parts, pulled apart under the example card */
.intro-parts {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.5rem;
}

.intro-part {
    flex: 1;
    max-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.75rem;
    background: #f7f5f2;
    border: 1px solid #e5e0d8;
    border-radius: 10px;
}

.intro-part-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6f675c;
}

.intro-part-value {
    font-weight: 600;
    font-size: 0.95rem;
}

/* --- Consonant classes: board + guided track --- */

.legend-link {
    background: transparent;
    color: #1f6feb;
    text-decoration: none;
}

.legend-link:hover {
    text-decoration: underline;
}

.board-cta {
    margin-top: 1rem;
}

.board-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    align-items: start;
    margin: 1.5rem 0 1.25rem;
}

.board-column {
    display: grid;
    gap: 0.35rem;
}

.board-column .legend-chip {
    justify-self: center;
    margin-bottom: 0.25rem;
}

.board-retired {
    opacity: 0.55;
}

/* Track: concept table */
.bucket-table {
    max-width: 22rem;
    margin: 1.25rem auto;
    display: grid;
    gap: 0.5rem;
    text-align: left;
}

.bucket-row {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Track: meet-the-set grids */
.meet-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-width: 17rem;
    margin: 1.25rem auto 0;
}

.meet-grid .mastery-letter {
    font-size: 1.9rem;
    padding: 0.4rem 0 0.5rem;
}

/* Track: tap-all rounds */
.stage-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.25rem 0 1rem;
}

.stage-chip {
    font: inherit;
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #d8d2c8;
    background: #f7f5f2;
    color: #57534a;
    cursor: pointer;
}

.stage-chip.chip-done {
    background: #cde8e0;
    border-color: #b5d9cf;
    color: #1f4d40;
}

.stage-chip.chip-viewing {
    border-color: #1f6feb;
    box-shadow: 0 0 0 1px #1f6feb inset;
}

.step-strip {
    margin-top: -0.25rem;
}

a.stage-chip {
    text-decoration: none;
}

.step-chip {
    font-size: 0.95rem;
}

.stage-chip.chip-locked {
    opacity: 0.45;
    cursor: default;
}

.tap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    max-width: 22.5rem;
    margin: 1rem auto 0;
}

.tap-tile {
    font-family: inherit;
    font-size: 2.1rem;
    line-height: 1.5;
    padding: 0.65rem 0 0.75rem;
    background: #fff;
    border: 1.5px solid #e5e0d8;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.08s ease;
}

.tap-tile:hover {
    border-color: #1f6feb;
}

.tap-tile:active {
    transform: scale(0.94);
}

/* Found tiles wear their class tint (background from the .class-* rules) */
.tap-tile.tap-found,
.tap-tile.tap-found:hover {
    border-color: transparent;
    cursor: default;
}

.tap-tile.tap-wrong {
    animation: option-shake 0.4s ease;
    border-color: #b3261e;
}

/* Track: sort buckets sit side by side */
.sort-buckets {
    flex-direction: row;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.sort-buckets .quiz-option {
    flex: 1;
}

/* --- Vowels: swipeable mastery pair, vowel tiles, study card --- */

.mastery-swipe {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 1rem 0 0;
}

.mastery-swipe::-webkit-scrollbar {
    display: none;
}

.mastery-panel {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
}

.mastery-panel .mastery-grid {
    margin-top: 0;
}

.mastery-dots {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin: 0.1rem 0 0.5rem;
}

.mastery-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: #d5cec2;
    cursor: pointer;
}

.mastery-dot.dot-active {
    background: #26221c;
}

/* Vowel tiles: both forms stacked, neutral tint (no class hues) */
.vowel-grid {
    grid-template-columns: repeat(5, 1fr);
    max-width: 24rem;
    margin-left: auto;
    margin-right: auto;
}

.vowel-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.35;
    font-size: 1.05rem;
    padding: 0.3rem 0 0.4rem;
}

/* A real, visible tint: the first attempt (#e7e2d8) was near-identical
   to the page background and read as "not updating" (user report).
   Teal is the one hue family the app hasn't claimed (blue/amber/fuchsia
   = classes, green = review-due). */
.vowel-tile.mastery-learning,
.vowel-tile.mastery-solid {
    background: #cde8e0;
}

.vowel-tile-form {
    display: block;
}

/* Vowel study card */
.vowel-forms {
    font-size: 4rem;
    line-height: 1.4;
}

.syllable-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.syllable-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    padding: 0.4rem 0.8rem;
    background: #f7f5f2;
    border: 1px solid #d8d2c8;
    border-radius: 10px;
    font-family: inherit;
    cursor: pointer;
}

.syllable-chip:hover {
    border-color: #1f6feb;
}

.syllable-text {
    font-size: 1.5rem;
    line-height: 1.3;
}

.syllable-sound {
    font-size: 0.75rem;
    color: #6f675c;
}

/* --- Level index: the lesson browser --- */

.status-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #c5bdb1;
    text-underline-offset: 3px;
}

.status-link:hover {
    color: #1f6feb;
}

.level-index {
    list-style: none;
    margin: 1.25rem 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.level-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.9rem;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
}

.level-row:hover {
    border-color: #1f6feb;
}

.level-row-number {
    flex: 0 0 1.9rem;
    text-align: center;
    font-weight: 700;
    color: #6f675c;
}

.level-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.level-row-title {
    font-weight: 600;
}

.level-row-glyphs {
    font-size: 0.95rem;
    color: #6f675c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.level-row-status {
    flex: 0 0 1.2rem;
    text-align: center;
    font-weight: 700;
    color: #2da44e;
}

.level-row-current {
    border-color: #1f6feb;
    box-shadow: inset 0 0 0 1px #1f6feb;
}

.level-row-current .level-row-status {
    color: #1f6feb;
}

.level-row-ahead {
    opacity: 0.6;
}

.section-arc-num {
    flex: 0 0 3rem;
    font-weight: 700;
    color: #6f675c;
}

/* Section headings inside the lesson browser */
.level-index-section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1rem 0.15rem 0.1rem;
}

.level-index-section:first-child {
    margin-top: 0;
}

.level-index-section h2 {
    margin: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6f675c;
}

.level-index-section .section-about {
    font-size: 0.85rem;
    color: #1f6feb;
    text-decoration: none;
}

.level-index-section .section-about:hover {
    text-decoration: underline;
}

/* --- Tones: spike page (and future shape chips) --- */

.tone-targets {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.25rem 0 1rem;
    flex-wrap: wrap;
}

.tone-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.7rem 0.4rem;
    background: #fff;
    border: 1.5px solid #e5e0d8;
    border-radius: 12px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6f675c;
    cursor: pointer;
}

.tone-target:hover {
    border-color: #1f6feb;
}

.tone-target-active {
    border-color: #1f6feb;
    box-shadow: inset 0 0 0 1px #1f6feb;
    color: #1f6feb;
}

.tone-shape-canvas {
    width: 3rem;
    height: 2rem;
}

.spike-stage {
    max-width: 24rem;
    margin: 0 auto;
}

.spike-canvas {
    width: 100%;
    height: 11rem;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 14px;
}

.spike-verdict {
    margin: 0.6rem 0 0;
    font-weight: 600;
}

.spike-log {
    list-style: none;
    padding: 0;
    margin: 1rem auto 0;
    max-width: 20rem;
    font-size: 0.85rem;
    color: #6f675c;
    text-align: center;
}

/* --- Tones: study cards, speak drill, board, home tiles --- */

.tone-step .letter-name {
    font-size: 1.6rem;
}

.tone-members {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 19rem;
    margin-top: 0.75rem;
}

.tone-member {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.75rem;
    background: #f7f5f2;
    border: 1px solid #d8d2c8;
    border-radius: 10px;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.tone-member:hover {
    border-color: #1f6feb;
}

.tone-member-text {
    font-size: 1.5rem;
    line-height: 1.3;
    min-width: 3rem;
}

.tone-voice-panel {
    margin-top: 0.75rem;
    border-top: 1px solid #eee9df;
    padding-top: 0.5rem;
}

.tone-voice-canvas {
    display: block;
    width: 100%;
    /* Short phones (667px) get a flatter chart so the step nav stays
       on screen; taller ones get the full picture. */
    height: clamp(6.5rem, 18vh, 12rem);
}

.tone-voice-hint {
    margin: 0.25rem 0 0;
    text-align: center;
    font-size: 0.8rem;
    color: #8a8478;
}

.tone-member-info {
    font-size: 0.8rem;
    color: #6f675c;
}

/* Speak drill inside the quiz options area */
.speak-canvas {
    height: 9rem;
}


.speak-status {
    font-size: 0.9rem;
}

.speak-dots {
    margin: 0;
    letter-spacing: 0.4em;
    color: #6f675c;
}

.speak-record {
    align-self: center;
}

/* Tone options carry their contour glyph beside the name */
.quiz-option-tone {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.9rem;
    padding-left: 1.1rem;
}

.quiz-option-tone .tone-shape-canvas {
    flex: 0 0 3rem;
}

.quiz-option-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
}

.quiz-option-stack .quiz-option-sub {
    text-align: left;
}

/* Tone board */
.tone-board {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.25rem 0 1rem;
    text-align: left;
}

.tone-board-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 14px;
}

.tone-board-shape {
    flex: 0 0 4rem;
    height: 2.6rem;
}

.tone-board-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.tone-board-name {
    font-weight: 700;
}

.tone-board-thai {
    font-weight: 400;
    color: #6f675c;
    margin-left: 0.35rem;
}

.tone-board-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tone-example {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem 0.6rem;
    background: #f7f5f2;
    border: 1px solid #d8d2c8;
    border-radius: 8px;
    font: inherit;
    font-size: 1.05rem;
    cursor: pointer;
}

.tone-example:hover {
    border-color: #1f6feb;
}

.tone-example-gloss {
    font-size: 0.7rem;
    color: #6f675c;
}

/* Home: tone family tiles (third swipe page) */
.tone-family-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    max-width: 20rem;
    margin: 0 auto;
}

.tone-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    padding: 0.55rem 0 0.5rem;
    border-radius: 9px;
    border: 1.5px solid transparent;
    background: #cde8e0;
    font: inherit;
    cursor: pointer;
    transition: transform 0.08s ease;
}

.tone-tile:active {
    transform: scale(0.94);
}

.tone-tile-sound {
    font-weight: 700;
}

.tone-tile-label {
    font-size: 0.7rem;
    color: #6f675c;
}

.tone-tile.mastery-unseen {
    background: transparent;
    border-color: #d5cec2;
    color: #8a8173;
}

/* Class track: the per-round meet strip (escalating introductions) */
.meet-strip {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem auto 0.75rem;
    max-width: 17rem;
}

.meet-strip .mastery-letter {
    font-size: 1.9rem;
    padding: 0.4rem 0.9rem 0.5rem;
    flex: 0 1 auto;
}

/* Class track: solved-stage cheer + panel transitions */
.stage-cheer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 3.5rem 0 2rem;
}

.stage-cheer-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: #2da44e;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 800;
}

.stage-cheer-message {
    margin: 0.4rem 0 0;
    font-size: 1.15rem;
    font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
    .stage-enter {
        animation: stage-slide-in 0.35s ease;
    }

    .stage-cheer.stage-enter .stage-cheer-mark {
        animation: cheer-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
}

@keyframes stage-slide-in {
    from {
        opacity: 0;
        transform: translateX(26px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes cheer-pop {
    0% { transform: scale(0.3); }
    70% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* Round-level mini cheer (between rounds inside a stage) */
.round-cheer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 2.2rem 0 1.6rem;
}

.round-cheer-mark {
    width: 2.7rem;
    height: 2.7rem;
    font-size: 1.4rem;
}

.round-cheer-message {
    font-size: 0.95rem;
}

/* Tone board: where in the syllable to listen */
.tone-listen {
    margin: 1.75rem 0 1rem;
    text-align: left;
}

.tone-listen h2 {
    font-size: 1.1rem;
    margin: 0 0 0.6rem;
}

.tone-stack-canvas {
    display: block;
    width: 100%;
    height: 9rem;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 14px;
}

.tone-listen-note {
    margin: 0.7rem 0 0;
    font-size: 0.92rem;
    color: #6f675c;
}

.tone-ladder {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.6rem 0 0;
    padding: 0;
    font-weight: 700;
}

.tone-ladder li::after {
    content: attr(data-note);
    margin-left: 0.5rem;
    font-weight: 400;
    font-size: 0.78rem;
    color: #6f675c;
}

.tone-tells {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1.1rem 0 0;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 14px;
}

.tone-tells p {
    margin: 0;
    font-size: 0.92rem;
}

/* Tone reveal: why that tone, and where to have listened */
.reveal-rule {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: #6f675c;
}

.reveal-tell {
    margin: 0.4rem 0 0;
    padding: 0.45rem 0.6rem;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 10px;
    font-size: 0.84rem;
    line-height: 1.4;
    text-align: left;
}

/* End-of-round: hear the ones that got away */
.quiz-misses {
    margin: 1rem 0 0;
    text-align: left;
}

.quiz-misses-title {
    margin: 0 0 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6f675c;
}

.quiz-misses-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
}

.quiz-miss {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #e5e0d8;
    border-radius: 10px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.quiz-miss::before {
    content: "▶";
    font-size: 0.7rem;
    color: #1f6feb;
}

.quiz-miss:hover {
    border-color: #1f6feb;
}

.quiz-miss-word {
    font-size: 1.15rem;
    font-weight: 600;
}

.quiz-miss-note {
    font-size: 0.78rem;
    color: #6f675c;
}

/* Tone board: the learner's own pitch */
.tone-voice {
    margin: 1.75rem 0 0;
    text-align: left;
}

.tone-voice h2 {
    font-size: 1.1rem;
    margin: 0 0 0.6rem;
}

.tone-voice .audio-button {
    margin-top: 0.7rem;
}

.tone-voice-panel {
    margin-top: 0.8rem;
}

.speak-privacy {
    margin: 0.35rem 0 0.6rem;
    font-size: 0.78rem;
    color: #6f675c;
}

/* An iPhone-SE-class screen has no room to spare once the prompt and the
   progress bar have taken their share: the curve stays readable smaller,
   and the panel has to fit without scrolling. */
@media (max-height: 720px) {
    .speak-canvas {
        height: 5.5rem;
    }

    .speak-status {
        font-size: 0.84rem;
    }

    .speak-privacy {
        margin: 0.2rem 0 0.35rem;
        font-size: 0.72rem;
    }

    .speak-record {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }
}