style.css

/* All text sizes are in rem so the app follows the system/browser font size;
   font: -apple-system-body makes 1rem track iOS Dynamic Type. */

:root {
    font: -apple-system-body;
    font-family: system-ui, sans-serif;

    --bg: #14100e;
    --card: #241c17;
    --card-edge: #3a2d24;
    --text: #f2e9df;
    --muted: #a3937f;
    --accent: #cc4b37;
    --accent-press: #a53a29;
    --ok: #3f9d55;
    --bad: #c94747;
    --devanagari: 'Noto Sans Devanagari', 'Kohinoor Devanagari',
        'Devanagari Sangam MN', 'ITF Devanagari', sans-serif;
}

* { box-sizing: border-box; }

/* The attribute must win over ID display rules like #screen-home { display: flex }. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    background: var(--bg);
    color: var(--text);
    -webkit-tap-highlight-color: transparent;
}

#app {
    max-width: 34rem;
    margin: 0 auto;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    padding-top: calc(0.8rem + env(safe-area-inset-top));
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

#loading { color: var(--muted); text-align: center; margin-top: 40vh; }

#screen-home, #screen-quiz {
    flex: 1;
    /* Without this a flex item refuses to shrink below its content and the
       inner group-list scroll never engages. */
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Home */

.home-header { text-align: center; }
.brand { font-size: 2.4rem; margin: 0; }
.tagline { color: var(--muted); margin: 0.2rem 0 0; }

.home-stats {
    color: var(--muted);
    text-align: center;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* The only scrollable area in the app: the page itself never moves. */
.group-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.group-row {
    background: var(--card);
    border-radius: 0.8rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
}
.group-row.selected { box-shadow: inset 0 0 0 0.15rem var(--accent); }
.group-row.locked { opacity: 0.45; cursor: default; }
.row-top { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.group-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.group-glyphs {
    font-family: var(--devanagari);
    color: var(--muted);
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
}
.bar {
    height: 0.35rem;
    background: var(--card-edge);
    border-radius: 0.2rem;
    margin-top: 0.5rem;
    overflow: hidden;
}
.bar > div { height: 100%; background: var(--accent); border-radius: inherit; }

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--muted);
}
.stepper { display: inline-flex; align-items: center; }
.btn-toggle {
    font: inherit;
    background: none;
    border: 1px solid var(--card-edge);
    border-radius: 0.6rem;
    color: var(--text);
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    touch-action: manipulation;
}
.setting-value {
    min-width: 1.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.home-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.2rem 0.6rem;
    color: var(--muted);
    font-size: 0.85rem;
}

/* Sits on its own line below the footer links. */
.home-update {
    display: block;
    margin: -0.5rem auto 0;
    font-size: 0.85rem;
}

/* Flags of the other courses, above the title. */
.course-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-size: 1.8rem;
    line-height: 1;
}
.course-links a { text-decoration: none; }

[dir="rtl"].glyph, [dir="rtl"].group-glyphs { unicode-bidi: isolate; }

/* Buttons */

.btn {
    font: inherit;
    color: inherit;
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    cursor: pointer;
    touch-action: manipulation;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
    background: var(--accent);
    border-color: transparent;
    font-weight: 600;
    font-size: 1.15rem;
}
.btn-primary:active { background: var(--accent-press); }
.btn-link {
    font: inherit;
    background: none;
    border: none;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}
.btn-icon {
    font-size: 1.6rem;
    line-height: 1;
    background: none;
    border: none;
    color: var(--muted);
    padding: 0.2rem 0.6rem;
    cursor: pointer;
}
/* The stage is a stretch-aligned column; keep the play control compact. */
.btn-play {
    align-self: center;
    font-size: 2rem;
    color: var(--text);
}

/* Quiz */

.quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--muted);
}

/* Two fixed zones so nothing jumps between meet cards, questions and summary:
   the stage centers in the free space, the actions stay anchored at the bottom. */
#quiz-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#quiz-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.8rem;
}

#quiz-actions {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.tag {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
    margin: 0;
}

.glyph {
    font-family: var(--devanagari);
    font-size: min(9rem, 35vw, 26dvh);
    line-height: 1.15;
    text-align: center;
    margin: 0;
}

/* Whole words: smaller than single glyphs, must survive long words on a phone. */
.glyph-word {
    font-size: min(4.5rem, 16vw, 14dvh);
    overflow-wrap: anywhere;
}

/* Whole sentences: smaller still, wrapping at their spaces; the loose
   line-height leaves headroom for stacked matras. */
.glyph-phrase {
    font-size: min(2.8rem, 10vw, 9dvh);
    line-height: 1.5;
}

.roman-big { font-size: 2rem; text-align: center; margin: 0; }
.meaning-big { font-size: 2rem; text-align: center; margin: 0; }
.note { color: var(--muted); text-align: center; margin: 0; }

/* Always 2x2 for the four answers; long labels wrap inside their button. */
.options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.options .btn { font-size: 1.3rem; min-height: 3rem; padding: 0.7rem 0.5rem; }
.options .btn:disabled { cursor: default; }
.options .btn.correct { background: var(--ok); border-color: transparent; }
.options .btn.wrong { background: var(--bad); border-color: transparent; }

.big { font-size: 2.2rem; text-align: center; margin: 0; }
.unlock-note { color: var(--accent); text-align: center; margin: 0; }