/* ═══════════════════════════════════════════════════════════════════════════
   Periodic Table Quiz — chemistry-classroom chalkboard
   Materials: chalk on a slate-green board (the app), paper index cards
   (tooltips, results). Type: Kalam = chalk handwriting, used sparingly;
   Atkinson Hyperlegible = all UI; system mono = atomic data.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --board:        #1F3A31;
    --board-deep:   #172B24;
    --board-edge:   #14251F;
    --chalk:        #F2EFE6;
    --chalk-dim:    rgba(242, 239, 230, 0.62);
    --chalk-faint:  rgba(242, 239, 230, 0.32);
    --chalk-yellow: #EFC868;
    --wood:         #6E4F33;
    --wood-light:   #8A6845;
    --wood-dark:    #55391F;
    --paper:        #F7F2E3;
    --ink:          #3A352C;
    --ink-soft:     #6B6353;
    --mint:         #96D3A2;   /* correct */
    --coral:        #E58677;   /* incorrect */

    --font-chalk: 'Kalam', 'Comic Sans MS', cursive;
    --font-ui:    'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
    --font-data:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* hand-drawn wobble */
    --radius-hand: 7px 9px 7px 10px / 9px 7px 10px 7px;
}

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-ui);
    color: var(--chalk);
    min-height: 100vh;
    padding: 10px;
    /* the classroom wall / wooden frame around the board */
    background:
        repeating-linear-gradient(93deg,
            rgba(0,0,0,0)      0px,  rgba(0,0,0,0.07)  3px,
            rgba(0,0,0,0)      6px,  rgba(255,255,255,0.03) 9px,
            rgba(0,0,0,0)      12px),
        linear-gradient(170deg, var(--wood-light), var(--wood) 45%, var(--wood-dark));
    background-attachment: fixed;
}

/* chalk-dust grain over everything, very quiet */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

.container { display: flex; flex-direction: column; min-height: calc(100vh - 20px); }

.hidden { display: none !important; }

button { font-family: var(--font-ui); }

:focus-visible {
    outline: 2px dashed var(--chalk-yellow);
    outline-offset: 2px;
}

/* ── The board surface ────────────────────────────────────────────────────── */
header, .quiz-main {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.045), rgba(0,0,0,0) 55%),
        radial-gradient(140% 120% at 50% 110%, rgba(0,0,0,0.35), rgba(0,0,0,0) 60%),
        var(--board);
    border-radius: 12px;
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.35),
        inset 0 2px 14px rgba(0,0,0,0.35),
        0 3px 12px rgba(0,0,0,0.35);
}

/* ── Start screen: the board before class ─────────────────────────────────── */
header {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    padding: 48px 24px 96px;
    text-align: center;
    overflow: hidden;
}

.board-lockup { max-width: 640px; }

.header-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--chalk-faint);
    margin-bottom: 14px;
}

header h1 {
    font-family: var(--font-chalk);
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    line-height: 1.1;
    letter-spacing: 0.01em;
    transform: rotate(-1deg);
    text-shadow: 0 0 18px rgba(242,239,230,0.18);
    /* chalk-yellow squiggle underline */
    padding-bottom: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='6' viewBox='0 0 60 6'><path d='M2 4 Q9 1 16 3.5 T30 3 T44 3.5 T58 3' fill='none' stroke='%23EFC868' stroke-width='2' stroke-linecap='round' opacity='0.9'/></svg>") repeat-x bottom;
}

.header-subtitle {
    margin-top: 14px;
    font-size: 1rem;
    color: var(--chalk-dim);
    line-height: 1.5;
}

/* chalk doodles in the corners of the board */
.doodle {
    position: absolute;
    font-family: var(--font-chalk);
    color: var(--chalk-faint);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
.doodle.d1 { top: 9%;  left: 6%;  transform: rotate(-6deg); font-size: 1.05rem; }
.doodle.d2 { top: 14%; right: 7%; transform: rotate(4deg);  font-size: 1.1rem; color: rgba(239,200,104,0.4); }
.doodle.d3 { bottom: 20%; left: 8%; transform: rotate(-3deg); font-size: 0.95rem; color: rgba(229,134,119,0.4); }

/* ── Start controls ───────────────────────────────────────────────────────── */
.start-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-items: flex-end;
}

.select-group { display: flex; flex-direction: column; gap: 6px; text-align: left; }

.select-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--chalk-dim);
}

.quiz-select {
    font-family: var(--font-ui);
    background: rgba(0,0,0,0.22);
    color: var(--chalk);
    border: 1.5px solid var(--chalk-faint);
    border-radius: var(--radius-hand);
    padding: 9px 12px;
    font-size: 0.88rem;
    cursor: pointer;
    min-width: 190px;
    transition: border-color 0.15s;
}
.quiz-select:hover { border-color: var(--chalk-dim); }
.quiz-select option, .quiz-select optgroup { background: var(--board-deep); color: var(--chalk); }

.btn {
    padding: 10px 26px;
    border: none;
    border-radius: var(--radius-hand);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.start-btn {
    background: var(--chalk-yellow);
    color: #2B241A;
    box-shadow: 0 2px 10px rgba(239,200,104,0.25);
}

.progress-btn {
    background: transparent;
    color: var(--chalk-dim);
    border: 1.5px solid var(--chalk-faint);
}
.progress-btn:hover { color: var(--chalk); border-color: var(--chalk-dim); }

.mode-explainer {
    margin-top: 16px;
    font-size: 0.85rem;
    color: var(--chalk-dim);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
    min-height: 1.3em;
}

/* ── Chalk tray ───────────────────────────────────────────────────────────── */
.chalk-tray {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, 70%);
    height: 14px;
    background: linear-gradient(180deg, var(--wood-light), var(--wood-dark));
    border-radius: 3px 3px 5px 5px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 14px;
    padding: 0 26px;
}
.chalk-piece {
    width: 34px;
    height: 7px;
    border-radius: 3px / 4px;
    margin-bottom: 12px;
    transform: rotate(-1deg);
    box-shadow: 0 2px 3px rgba(0,0,0,0.35);
}
.chalk-piece.white  { background: var(--chalk); }
.chalk-piece.yellow { background: var(--chalk-yellow); width: 26px; transform: rotate(2deg); }
.chalk-piece.coral  { background: var(--coral); width: 20px; }
.eraser {
    width: 52px;
    height: 16px;
    margin-left: auto;
    margin-bottom: 10px;
    border-radius: 3px;
    background: linear-gradient(180deg, #4A4A50 55%, #2E2E33 55%);
    box-shadow: 0 2px 3px rgba(0,0,0,0.35);
    transform: rotate(1deg);
}

/* ── Quiz layout ──────────────────────────────────────────────────────────── */
.quiz-main {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 20px);
    height: calc(100dvh - 20px);
    overflow: hidden;
}

.compact-header {
    background: var(--board-deep);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.timer-bar-compact { height: 5px; background: rgba(0,0,0,0.35); overflow: hidden; border-radius: 12px 12px 0 0; }
.timer-fill {
    height: 100%;
    width: 100%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, rgba(242,239,230,0.95), rgba(242,239,230,0.7));
    box-shadow: 0 0 8px rgba(242,239,230,0.35);
    transition: width 0.1s linear;
}

.quiz-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    gap: 12px;
}

.question-compact { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: 1; }

#questionLabel { font-size: 0.8rem; color: var(--chalk-dim); }

/* the teacher's handwriting: signature element */
.target-text {
    font-family: var(--font-chalk);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1.2;
    color: var(--chalk);
    letter-spacing: 0.02em;
    transform: rotate(-0.5deg);
    text-shadow: 0 0 12px rgba(242,239,230,0.2);
    padding-bottom: 6px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='6' viewBox='0 0 60 6'><path d='M2 4 Q9 1 16 3.5 T30 3 T44 3.5 T58 3' fill='none' stroke='%23EFC868' stroke-width='2' stroke-linecap='round' opacity='0.85'/></svg>") repeat-x bottom;
}

.stats-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--chalk-dim);
    flex-shrink: 0;
}
.stat-item strong { color: var(--chalk-yellow); font-family: var(--font-data); font-size: 0.85rem; }
.stat-divider { color: var(--chalk-faint); }

/* ── Answer input: writing on the board ───────────────────────────────────── */
.answer-input-area-compact { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.answer-input-compact {
    font-family: var(--font-chalk);
    background: transparent;
    border: none;
    border-bottom: 2px dashed var(--chalk-faint);
    color: var(--chalk);
    padding: 3px 6px;
    font-size: 1.1rem;
    width: 190px;
    transition: border-color 0.15s;
}
.answer-input-compact::placeholder { color: var(--chalk-faint); font-size: 0.95rem; }
.answer-input-compact:focus { outline: none; border-bottom: 2px solid var(--chalk-yellow); }

.btn-compact {
    padding: 6px 14px;
    border: 1.5px solid var(--chalk-faint);
    background: rgba(0,0,0,0.2);
    color: var(--chalk);
    border-radius: var(--radius-hand);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.btn-compact:hover { border-color: var(--chalk-dim); background: rgba(0,0,0,0.35); }

.submit-btn { border-color: var(--chalk-yellow); color: var(--chalk-yellow); }
.submit-btn:hover { background: rgba(239,200,104,0.12); border-color: var(--chalk-yellow); }

.answer-feedback-compact { font-size: 0.85rem; }
.answer-feedback-compact.correct   { color: var(--mint); }
.answer-feedback-compact.incorrect { color: var(--coral); }

/* ── Duel choice buttons ──────────────────────────────────────────────────── */
.choice-area { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.choice-btn {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 7px 16px;
    background: rgba(0,0,0,0.22);
    color: var(--chalk);
    border: 1.5px solid var(--chalk-dim);
    border-radius: var(--radius-hand);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.choice-btn:hover {
    border-color: var(--chalk-yellow);
    background: rgba(239,200,104,0.1);
    transform: translateY(-1px);
}
.choice-vs { font-family: var(--font-chalk); color: var(--chalk-faint); font-size: 0.95rem; }

/* ── Streak stat (lightning only) ─────────────────────────────────────────── */
.streak-stat { display: none; }
.lightning .streak-stat { display: inline; }

/* ── Table wrapper ────────────────────────────────────────────────────────── */
.table-wrapper-fullscreen {
    flex: 1;
    overflow: auto;
    padding: 16px;
    position: relative;
}

.table-wrapper {
    transform-origin: top left;
    min-width: fit-content;
}

/* ── Periodic table grid ──────────────────────────────────────────────────── */
.periodic-table {
    display: grid;
    grid-template-columns: repeat(18, 52px);
    grid-template-rows: repeat(7, 58px) 14px repeat(2, 58px);
    gap: 2px;
}

/* ── Element cells: chalk-drawn tiles ─────────────────────────────────────── */
.element-cell {
    border-radius: var(--radius-hand);
    border: 1.5px solid color-mix(in srgb, var(--cat, #8FB3D9) 90%, transparent);
    background: color-mix(in srgb, var(--cat, #8FB3D9) 26%, transparent);
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2px;
    user-select: none;
    transition: filter 0.12s, transform 0.1s, background 0.12s;
    overflow: hidden;
    touch-action: manipulation;
}
.element-cell:hover {
    background: color-mix(in srgb, var(--cat, #8FB3D9) 44%, transparent);
    transform: scale(1.07);
    z-index: 5;
}

.el-number {
    position: absolute;
    top: 2px;
    left: 4px;
    font-family: var(--font-data);
    font-size: 0.55rem;
    line-height: 1;
    color: var(--chalk-dim);
}
.el-symbol {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--chalk);
    line-height: 1.1;
}
.el-name {
    font-size: 0.44rem;
    color: var(--chalk-dim);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 2px;
}
.el-mass {
    font-family: var(--font-data);
    font-size: 0.42rem;
    color: var(--chalk-faint);
    line-height: 1;
}

/* ── Category colors: dusty chalk pastels ─────────────────────────────────── */
.alkali-metal          { --cat: #E58677; }
.alkaline-earth-metal  { --cat: #E7AF67; }
.transition-metal      { --cat: #8FB3D9; }
.post-transition-metal { --cat: #AEC4CD; }
.metalloid             { --cat: #BD9CDD; }
.nonmetal              { --cat: #96D3A2; }
.halogen               { --cat: #D9DF82; }
.noble-gas             { --cat: #7FC9DB; }
.lanthanide            { --cat: #E5A0B7; }
.actinide              { --cat: #CB9367; }

.placeholder {
    background: transparent;
    border: 1.5px dashed var(--chalk-faint);
    cursor: default;
    pointer-events: none;
}
.placeholder .el-symbol { font-size: 0.65rem; color: var(--chalk-faint); font-weight: 400; }
.placeholder:hover { background: transparent; transform: none; }

/* ── Quiz display modes ───────────────────────────────────────────────────── */
/* LEAK RULES — the quizzed field is hidden on ALL cells, never just the
   target: visible neighbors would give the answer away by position
   (e.g. interpolating a mass from adjacent masses). Keep table-wide. */

/* find-by-name: show number only */
.periodic-table.mode-find-by-name .element-cell .el-symbol,
.periodic-table.mode-find-by-name .element-cell .el-name,
.periodic-table.mode-find-by-name .element-cell .el-mass { display: none; }

/* find-by-symbol: show number + name */
.periodic-table.mode-find-by-symbol .element-cell .el-symbol,
.periodic-table.mode-find-by-symbol .element-cell .el-mass { display: none; }

/* find-by-number: show symbol + name */
.periodic-table.mode-find-by-number .element-cell .el-number,
.periodic-table.mode-find-by-number .element-cell .el-mass { display: none; }

/* identify modes: chalk-faded non-targets, target glows */
.periodic-table.mode-identify-name .element-cell:not(.target),
.periodic-table.mode-identify-symbol .element-cell:not(.target),
.periodic-table.mode-mass-quiz .element-cell:not(.target) {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}
.periodic-table.mode-identify-name .element-cell:not(.target):hover,
.periodic-table.mode-identify-symbol .element-cell:not(.target):hover,
.periodic-table.mode-mass-quiz .element-cell:not(.target):hover {
    background: color-mix(in srgb, var(--cat, #8FB3D9) 26%, transparent);
    transform: none;
}

/* identify-name: cells show symbol + number (you type the name) */
.periodic-table.mode-identify-name .element-cell .el-name,
.periodic-table.mode-identify-name .element-cell .el-mass { display: none; }

/* identify-symbol: cells show name + number (you type the symbol) */
.periodic-table.mode-identify-symbol .element-cell:not(.placeholder) .el-symbol,
.periodic-table.mode-identify-symbol .element-cell .el-mass { display: none; }

/* mass-quiz: cells show name + symbol + number (you type the mass) */
.periodic-table.mode-mass-quiz .element-cell .el-mass { display: none; }

/* place-element & neighbor: a blank board. Everything is hidden and family
   colors are neutralized — colored regions would give the location away. */
.periodic-table.mode-place-element .element-cell:not(.placeholder),
.periodic-table.mode-neighbor .element-cell:not(.placeholder) { --cat: #7C8F88; }
.periodic-table.mode-place-element .element-cell:not(.placeholder) .el-number,
.periodic-table.mode-place-element .element-cell:not(.placeholder) .el-symbol,
.periodic-table.mode-place-element .element-cell:not(.placeholder) .el-name,
.periodic-table.mode-place-element .element-cell:not(.placeholder) .el-mass,
.periodic-table.mode-neighbor .element-cell:not(.placeholder) .el-number,
.periodic-table.mode-neighbor .element-cell:not(.placeholder) .el-symbol,
.periodic-table.mode-neighbor .element-cell:not(.placeholder) .el-name,
.periodic-table.mode-neighbor .element-cell:not(.placeholder) .el-mass { display: none; }

/* neighbor: the reference element stays readable */
.periodic-table.mode-neighbor .element-cell.anchor .el-symbol { display: inline; }
.periodic-table.mode-neighbor .element-cell.anchor .el-name { display: block; }

/* mass-duel: the board is a faded backdrop; only the two contenders read.
   Masses AND numbers hidden — either would hand over the answer. */
.periodic-table.mode-mass-duel .element-cell:not(.placeholder) {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}
.periodic-table.mode-mass-duel .element-cell .el-mass,
.periodic-table.mode-mass-duel .element-cell .el-number { display: none; }
.periodic-table.mode-mass-duel .element-cell.anchor,
.periodic-table.mode-mass-duel .element-cell.correct,
.periodic-table.mode-mass-duel .element-cell.incorrect { opacity: 1; }

/* The reference/contender marker */
.element-cell.anchor {
    outline: 2.5px solid var(--chalk-yellow);
    outline-offset: 2px;
    opacity: 1 !important;
    z-index: 10;
}

/* ── Cell states ──────────────────────────────────────────────────────────── */
.element-cell.target {
    outline: 2.5px solid var(--chalk-yellow);
    outline-offset: 2px;
    background: color-mix(in srgb, var(--cat, #8FB3D9) 34%, transparent);
    animation: targetPulse 1.2s ease-in-out infinite alternate;
    z-index: 10;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: default;
}
@keyframes targetPulse {
    from { outline-color: var(--chalk-yellow); box-shadow: 0 0 14px rgba(239,200,104,0.35); }
    to   { outline-color: rgba(239,200,104,0.35); box-shadow: 0 0 4px rgba(239,200,104,0.1); }
}

.element-cell.correct {
    outline: 2.5px solid var(--mint) !important;
    background: color-mix(in srgb, var(--mint) 35%, transparent) !important;
    box-shadow: 0 0 16px rgba(150,211,162,0.45) !important;
    animation: none !important;
}
.element-cell.incorrect {
    animation: wrongShake 0.4s ease;
    outline: 2.5px solid var(--coral) !important;
    background: color-mix(in srgb, var(--coral) 30%, transparent) !important;
}
@keyframes wrongShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}

.element-cell.hint-highlight { outline: 2px dashed var(--chalk-yellow); }

/* Completed cells (normal mode) */
.element-cell.completed { opacity: 0.55; }

/* Out-of-set elements: barely-there chalk ghosts */
.periodic-table.filtered .element-cell.out-of-set {
    opacity: 0.13;
    pointer-events: none;
    cursor: default;
}
.periodic-table.filtered .element-cell.out-of-set:hover { background: inherit; transform: none; }

/* ── Legend ───────────────────────────────────────────────────────────────── */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 14px;
    padding: 10px 0;
}
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--chalk-dim); }
.legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px 4px 3px 5px;
    border: 1.5px solid var(--cat);
    background: color-mix(in srgb, var(--cat) 30%, transparent);
    flex-shrink: 0;
}

/* ── Progress view (mastery heatmap) ──────────────────────────────────────── */
/* hm-* classes come after the family colors so they win the --cat cascade */
.hm-mastered { --cat: #96D3A2; }
.hm-strong   { --cat: #D9DF82; }
.hm-weak     { --cat: #E58677; }
.hm-unseen   { --cat: #7C8F88; }
.element-cell.hm-mastered { box-shadow: 0 0 10px rgba(150,211,162,0.3); }
.element-cell.hm-unseen   { opacity: 0.55; }

.heatmap-legend { display: none; }
.progress-view .heatmap-legend { display: flex; }
.progress-view .family-legend { display: none; }
.progress-view .hint-btn,
.progress-view .skip-btn { display: none; }
.progress-view .timer-bar-compact { visibility: hidden; }
.progress-view .stats-compact { display: none; }
.progress-view .element-cell { cursor: help; }

/* ── Header feedback strip ────────────────────────────────────────────────── */
.header-feedback {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 92vw;
    z-index: 200;
    text-align: center;
    padding: 8px 22px;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: var(--radius-hand);
    background: rgba(20, 37, 31, 0.95);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.header-feedback.correct   { color: var(--mint);  border: 1.5px solid var(--mint); }
.header-feedback.incorrect { color: var(--coral); border: 1.5px solid var(--coral); }
.header-feedback.fade-out  { opacity: 0; }

/* ── Floating controls ────────────────────────────────────────────────────── */
.floating-controls {
    position: fixed;
    bottom: 22px;
    right: 22px;
    display: flex;
    gap: 8px;
    z-index: 150;
}
.btn-floating {
    padding: 9px 16px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    background: var(--board-deep);
    color: var(--chalk-dim);
    border: 1.5px solid var(--chalk-faint);
    box-shadow: 0 3px 10px rgba(0,0,0,0.35);
    transition: filter 0.15s, transform 0.1s, border-color 0.15s;
    touch-action: manipulation;
}
.btn-floating:hover { filter: brightness(1.15); transform: translateY(-1px); border-color: var(--chalk-dim); }
.hint-btn { color: var(--chalk-yellow); border-color: rgba(239,200,104,0.5); }
.skip-btn { }
.new-quiz-btn { color: var(--chalk); }

/* ── Zoom controls ────────────────────────────────────────────────────────── */
.zoom-controls {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 50;
}
.zoom-btn {
    width: 32px;
    height: 32px;
    background: var(--board-deep);
    color: var(--chalk-dim);
    border: 1.5px solid var(--chalk-faint);
    border-radius: var(--radius-hand);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    touch-action: manipulation;
}
.zoom-btn:hover { opacity: 1; color: var(--chalk); }

/* ── Tooltip: a paper flashcard ───────────────────────────────────────────── */
.element-tooltip {
    position: fixed;
    background:
        linear-gradient(var(--paper), var(--paper)) padding-box,
        var(--paper);
    color: var(--ink);
    border-radius: 4px;
    border-top: 5px solid var(--coral);
    padding: 10px 14px;
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 500;
    max-width: 170px;
    box-shadow: 3px 5px 14px rgba(0,0,0,0.45);
    line-height: 1.55;
    transform: rotate(-1.5deg);
}
.tooltip-symbol { font-family: var(--font-chalk); font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.tooltip-name   { font-weight: 700; }
.tooltip-detail { color: var(--ink-soft); font-size: 0.74rem; }

/* ── Chalkboard practice modal: a small framed slate ──────────────────────── */
.chalkboard-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 15, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
}
.chalkboard-card {
    background:
        radial-gradient(110% 90% at 50% 0%, rgba(255,255,255,0.05), rgba(0,0,0,0) 55%),
        var(--board-deep);
    border: 7px solid var(--wood);
    border-radius: 10px;
    box-shadow: inset 0 0 24px rgba(0,0,0,0.45), 0 10px 30px rgba(0,0,0,0.5);
    padding: 26px 32px;
    text-align: center;
    color: var(--chalk);
    max-width: 360px;
    width: 90%;
}
.chalkboard-emoji { font-size: 1.7rem; color: var(--chalk-yellow); margin-bottom: 6px; }
.chalkboard-instruction { font-size: 0.85rem; color: var(--chalk-dim); margin-bottom: 12px; }
.chalkboard-target {
    font-family: var(--font-chalk);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--chalk-yellow);
    transform: rotate(-1deg);
    margin-bottom: 10px;
}
.chalkboard-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 14px; min-height: 12px; }
.chalkboard-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--chalk-faint); }
.chalkboard-dot.filled { background: var(--mint); border-color: var(--mint); }
.chalkboard-input {
    font-family: var(--font-chalk);
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px dashed var(--chalk-faint);
    color: var(--chalk);
    padding: 6px 12px;
    font-size: 1.15rem;
    text-align: center;
}
.chalkboard-input::placeholder { color: var(--chalk-faint); font-size: 0.95rem; }
.chalkboard-input:focus { outline: none; border-bottom: 2px solid var(--chalk-yellow); }
.chalkboard-input.shake { animation: shake 0.35s ease; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}
.chalkboard-submit { margin-top: 14px; }
.chalkboard-feedback { margin-top: 8px; font-size: 0.85rem; min-height: 20px; }

/* ── Did you mean ─────────────────────────────────────────────────────────── */
.dym-yes { border-color: var(--mint); color: var(--mint); margin-left: 4px; }
.dym-yes:hover { background: rgba(150,211,162,0.12); border-color: var(--mint); }
.dym-no  { margin-left: 4px; }

/* ── Completion modal: the report card ────────────────────────────────────── */
.completion-modal {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 15, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
}
.completion-card {
    /* ruled index card */
    background:
        linear-gradient(rgba(229,134,119,0.45), rgba(229,134,119,0.45)) 0 56px / 100% 1.5px no-repeat,
        repeating-linear-gradient(
            var(--paper) 0px, var(--paper) 31px,
            rgba(90, 140, 190, 0.13) 31px, rgba(90, 140, 190, 0.13) 32.5px),
        var(--paper);
    color: var(--ink);
    border-radius: 5px;
    padding: 30px 36px;
    text-align: center;
    max-width: 380px;
    width: 90%;
    box-shadow: 4px 8px 28px rgba(0,0,0,0.5);
    transform: rotate(-0.8deg);
}
.completion-emoji { font-size: 2.3rem; margin-bottom: 6px; }
.completion-title {
    font-family: var(--font-chalk);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
}
.completion-score { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.completion-detail { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 20px; }
.completion-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.completion-btn {
    padding: 9px 20px;
    border: none;
    border-radius: var(--radius-hand);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
}
.completion-btn:hover { filter: brightness(1.08); }
.completion-btn.primary   { background: #3E6B54; color: var(--paper); }
.completion-btn.secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--ink-soft); }

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

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .doodle { display: none; }
}

@media (max-width: 600px) {
    body { padding: 5px; }
    .container { min-height: calc(100vh - 10px); }

    header { padding: 32px 16px 80px; gap: 24px; }
    .start-controls { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
    .quiz-select { min-width: unset; width: 100%; }
    .start-btn { width: 100%; }
    .chalk-tray { bottom: 18px; }

    .quiz-main { height: calc(100vh - 10px); height: calc(100dvh - 10px); }
    .quiz-info-bar { padding: 6px 10px; flex-wrap: wrap; gap: 6px; }
    .target-text { font-size: 1.15rem; }
    /* Condensed stats on their own line instead of hidden entirely */
    .stats-compact { font-size: 0.72rem; gap: 4px; width: 100%; justify-content: flex-end; }

    /* 16px stops iOS from zooming the viewport when an input is focused */
    .answer-input-compact { font-size: 16px; width: 150px; }
    .chalkboard-input { font-size: 16px; }

    .table-wrapper-fullscreen { padding: 10px; }
    .legend { gap: 6px 10px; margin-top: 10px; }
    .legend-item { font-size: 0.64rem; }

    .zoom-controls { top: 10px; right: 10px; }
    .floating-controls { bottom: 12px; right: 12px; }
    .btn-floating { padding: 7px 12px; font-size: 0.75rem; }
}