/* ไทย ๒ — TH2 Trainer
   Ink & workbook: navy frame (school-uniform ink), paper cards, teacher's
   red for errors only, temple gold for correct marks. */

:root {
    --navy: #111B33;
    --navy-raised: #1B2846;
    --navy-line: #2A3A61;
    --paper: #F7F4EC;
    --paper-dim: #EFEBDF;
    --paper-line: #DDD6C4;
    --ink: #1C2333;
    --muted-navy: #939DB5;
    --muted-paper: #7A7466;
    --gold: #C9A227;
    --gold-ink: #7E651B;
    --red: #D6453D;
    --red-ink: #B02E27;

    /* loopless (modern signage style) vs looped (textbook style) */
    --thai-loopless: "Sukhumvit Set", "Noto Sans Thai", "Thonburi", -apple-system, "Segoe UI", sans-serif;
    --thai-looped: "Thonburi", "Sarabun", "Noto Serif Thai", "Noto Sans Thai", serif;
    --thai: var(--thai-loopless);
    --ipa: "Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

body.font-looped { --thai: var(--thai-looped); }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }

body {
    font-family: var(--ui);
    background: var(--navy);
    color: var(--paper);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ---------- top bar ---------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
    border-bottom: 1px solid var(--navy-line);
}

.topbar-back {
    font-size: 28px;
    line-height: 1;
    padding: 2px 10px 6px;
    border-radius: 8px;
    color: var(--muted-navy);
}
.topbar-back:active { background: var(--navy-raised); }

.wordmark {
    font-family: var(--thai);
    font-weight: 700;
    font-size: 22px;
    color: var(--paper);
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.wordmark-sub {
    font-family: var(--ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted-navy);
}

.tone-ladder {
    margin-left: auto;
    display: flex;
    gap: 6px;
    font-family: var(--thai);
    font-size: 12px;
    color: var(--muted-navy);
}
.tone-ladder span:nth-child(3) { color: var(--gold); }

/* previews the font you'd switch TO */
.font-toggle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--navy-line);
    color: var(--paper);
    font-size: 17px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--thai-looped);
    flex: none;
}
body.font-looped .font-toggle { font-family: var(--thai-loopless); }
.font-toggle:active { background: var(--navy-raised); }

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

#app { flex: 1; display: flex; flex-direction: column; }

.screen {
    flex: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 18px 16px calc(env(safe-area-inset-bottom) + 28px);
}

.screen-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
.loading-mark {
    display: flex;
    gap: 10px;
    font-family: var(--thai);
    font-size: 22px;
    color: var(--muted-navy);
}
.loading-mark span { animation: rise 1.2s ease-in-out infinite; }
.loading-mark span:nth-child(2) { animation-delay: 0.1s; }
.loading-mark span:nth-child(3) { animation-delay: 0.2s; color: var(--gold); }
.loading-mark span:nth-child(4) { animation-delay: 0.3s; }
.loading-mark span:nth-child(5) { animation-delay: 0.4s; }
@keyframes rise { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.loading-text { color: var(--muted-navy); font-family: var(--thai); }

/* ---------- home ---------- */

.group-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted-navy);
    margin: 22px 4px 10px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.group-label .th { font-family: var(--thai); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--paper); }

.lesson-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.lesson-card {
    background: var(--paper);
    color: var(--ink);
    border-radius: 14px;
    padding: 14px 14px 12px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 92px;
    position: relative;
    overflow: hidden;
}
.lesson-card:active { transform: scale(0.98); }
.lesson-num {
    font-family: var(--thai);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}
.lesson-title {
    font-size: 12.5px;
    color: var(--muted-paper);
    line-height: 1.35;
}
.lesson-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--paper-line);
}
.lesson-progress > i {
    display: block;
    height: 100%;
    background: var(--gold);
}
.lesson-card.locked { opacity: 0.45; }

/* ---------- lesson screen ---------- */

.paper-card {
    background: var(--paper);
    color: var(--ink);
    border-radius: 16px;
    padding: 20px 18px;
}

.lesson-head .eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-ink);
}
.lesson-head h1 {
    font-family: var(--thai);
    font-size: 30px;
    line-height: 1.25;
    margin: 4px 0 2px;
}
.lesson-head .lesson-en {
    color: var(--muted-paper);
    font-size: 14px;
}

.mode-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

.mode-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--navy);
    color: var(--paper);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: left;
}
.mode-btn:active { background: var(--navy-raised); }
.mode-btn .mode-icon { font-size: 22px; }
.mode-btn .mode-th { font-family: var(--thai); font-size: 18px; font-weight: 600; display: block; }
.mode-btn .mode-en { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-navy); }
.mode-btn .mode-count { margin-left: auto; font-size: 13px; color: var(--muted-navy); }
.mode-btn[disabled] { opacity: 0.4; }

.lesson-rows { margin-top: 16px; border-top: 1px solid var(--paper-line); }
.lesson-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 2px;
    border-bottom: 1px solid var(--paper-line);
    color: var(--ink);
    font-size: 15px;
    text-align: left;
}
.lesson-row .row-note { margin-left: auto; font-size: 12.5px; color: var(--muted-paper); }

.stats-line { margin-top: 14px; font-size: 13px; color: var(--muted-paper); }

/* browse */
.browse-section { margin-top: 14px; }
.browse-label {
    font-family: var(--thai);
    font-weight: 600;
    font-size: 16px;
    margin: 18px 0 6px;
    color: var(--ink);
}
.browse-label .en { font-family: var(--ui); font-size: 11px; color: var(--muted-paper); margin-left: 6px; }
.browse-note { font-size: 13.5px; color: var(--muted-paper); white-space: pre-wrap; margin: 6px 0; line-height: 1.5; }
.browse-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dotted var(--paper-line);
    font-size: 15px;
}
.browse-item .b-thai { font-family: var(--thai); font-size: 19px; }
.browse-item .b-ipa { font-family: var(--ipa); color: var(--gold-ink); }
.browse-item .b-en { color: var(--muted-paper); font-size: 13.5px; }
.browse-item .b-play { margin-left: auto; font-size: 15px; color: var(--navy); padding: 0 4px; }
.browse-item .b-speaker { font-family: var(--thai); color: var(--gold-ink); font-size: 13px; }

/* ---------- session ---------- */

.session-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.session-counter { font-size: 13px; color: var(--muted-navy); white-space: nowrap; }
.session-bar { flex: 1; display: flex; gap: 3px; }
.session-bar i {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--navy-raised);
}
.session-bar i.done { background: var(--gold); }
.session-bar i.wrong { background: var(--red); }
.session-quit { color: var(--muted-navy); font-size: 13px; padding: 4px 8px; }

.prompt-card {
    background: var(--paper);
    color: var(--ink);
    border-radius: 16px;
    padding: 22px 18px 24px;
    text-align: center;
}
.prompt-eyebrow {
    font-family: var(--thai);
    font-size: 13px;
    color: var(--muted-paper);
    margin-bottom: 10px;
}
.prompt-eyebrow .en { font-family: var(--ui); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 6px; }
.prompt-thai {
    font-family: var(--thai);
    font-weight: 600;
    font-size: 52px;
    line-height: 1.5;
    word-break: keep-all;
}
.prompt-thai.long { font-size: 30px; }
.prompt-en { font-size: 24px; line-height: 1.4; padding: 10px 0; }

.play-btn {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--paper);
    font-size: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--gold);
    margin: 6px 0 2px;
}
.play-btn:active { transform: scale(0.95); }
.play-btn.small { width: 44px; height: 44px; font-size: 16px; border-width: 2px; }
.play-hint { font-size: 12px; color: var(--muted-paper); margin-top: 8px; }

.options { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.option-btn {
    background: var(--paper);
    color: var(--ink);
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 21px;
    text-align: center;
    border: 2px solid transparent;
    position: relative;
}
.option-btn.ipa { font-family: var(--ipa); }
.option-btn.thai { font-family: var(--thai); font-size: 22px; }
.option-btn.en { font-size: 17px; }
.option-btn:active { background: var(--paper-dim); }
.option-btn.correct {
    border-color: var(--gold);
    background: linear-gradient(0deg, rgba(201,162,39,0.14), rgba(201,162,39,0.14)), var(--paper);
}
.option-btn.correct::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 7px;
    height: 2px;
    background: var(--gold);
    transform-origin: left;
    animation: sweep 0.3s ease-out;
}
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.option-btn.wrong { border-color: var(--red); color: var(--red-ink); }
.option-btn[disabled] { pointer-events: none; }

.gotcha-chip {
    display: inline-block;
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--red-ink);
    background: rgba(214, 69, 61, 0.1);
    border: 1px solid rgba(214, 69, 61, 0.35);
    border-radius: 20px;
    padding: 4px 12px;
}
.gotcha-chip.gold { color: var(--gold-ink); background: rgba(201,162,39,0.12); border-color: rgba(201,162,39,0.4); }

/* dictation */
.dictate-input {
    width: 100%;
    font-family: var(--thai);
    font-size: 26px;
    text-align: center;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 2px dotted var(--muted-paper);
    padding: 10px 6px 8px;
    margin-top: 16px;
    border-radius: 0;
}
.dictate-input:focus { border-bottom-color: var(--gold); outline: none; }
.dictate-input::placeholder { color: var(--paper-line); font-size: 18px; }

.keyboard-hint {
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted-paper);
    line-height: 1.5;
}

.diff-block { margin-top: 16px; text-align: center; }
.diff-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted-paper);
    margin: 10px 0 3px;
}
.diff-row {
    font-family: var(--thai);
    font-size: 30px;
    line-height: 1.6;
    word-break: break-all;
}
.diff-row .ok { color: var(--ink); }
.diff-row .bad { color: var(--red-ink); background: rgba(214,69,61,0.12); border-radius: 4px; }
.diff-row .miss { color: var(--gold-ink); background: rgba(201,162,39,0.14); border-radius: 4px; }
.diff-row .gap {
    color: var(--red-ink);
    background: rgba(214,69,61,0.12);
    border-radius: 4px;
    padding: 0 2px;
    font-size: 20px;
}

.verdict {
    font-family: var(--thai);
    font-size: 21px;
    font-weight: 700;
    margin-top: 14px;
}
.verdict .en { font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-paper); margin-left: 8px; }
.verdict.good { color: var(--gold-ink); }
.verdict.bad { color: var(--red-ink); }

.session-actions { display: flex; gap: 10px; margin-top: 16px; }
.action-btn {
    flex: 1;
    border-radius: 12px;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    background: var(--navy-raised);
    color: var(--paper);
    font-family: var(--thai);
}
.action-btn .en { display: block; font-family: var(--ui); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-navy); margin-top: 2px; }
.action-btn.primary { background: var(--gold); color: var(--navy); }
.action-btn.primary .en { color: rgba(17, 27, 51, 0.65); }
.action-btn.ghost { background: transparent; border: 1px solid var(--navy-line); }
.action-btn:active { filter: brightness(1.1); }

/* answer reveal under dictation */
.reveal-meta {
    margin-top: 12px;
    font-size: 14px;
    color: var(--muted-paper);
}
.reveal-meta .ipa { font-family: var(--ipa); color: var(--gold-ink); }

/* ---------- results ---------- */

.results-card { text-align: center; }
.score-thai {
    font-family: var(--thai);
    font-size: 64px;
    font-weight: 700;
    line-height: 1.4;
}
.score-sub { color: var(--muted-paper); font-size: 14px; margin-top: 2px; }
.missed-list { margin-top: 18px; text-align: left; }
.missed-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dotted var(--paper-line);
}
.missed-item .m-thai { font-family: var(--thai); font-size: 21px; }
.missed-item .m-detail { color: var(--muted-paper); font-size: 13.5px; }
.missed-item .b-play { margin-left: auto; }

/* ---------- toast ---------- */

.toast {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom) + 20px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--paper);
    color: var(--ink);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.35);
    z-index: 10;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (min-width: 480px) {
    .lesson-grid { grid-template-columns: 1fr 1fr 1fr; }
}