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

.quiz__banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--grape);
    color: #fff;
    border-radius: var(--r);
    padding: 0.7rem 1rem;
    margin-bottom: 1.5rem;
}

.quiz__banner .counter { color: #fff; }

.banner__right { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Running points total while the quiz is in play. */
.tally-pill {
    font-family: var(--display);
    font-weight: 800;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-radius: var(--r-pill);
    padding: 0.28rem 0.7rem;
}

.counter {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1rem;
    color: var(--heading);
}

.clock {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.05rem;
    background: var(--sun);
    color: #3d1a80;
    border-radius: var(--r-pill);
    padding: 0.3rem 0.85rem;
}

.clock__label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }

.clock.is-low { background: var(--coral); color: #fff; animation: tick 800ms steps(2) infinite; }

@keyframes tick {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.meter {
    height: 14px;
    background: var(--surface-2);
    border-radius: var(--r-pill);
    overflow: hidden;
    margin-bottom: 1.75rem;
    border: 2px solid var(--lav-200);
}

.meter__fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: repeating-linear-gradient(45deg, var(--violet) 0 10px, var(--violet-d) 10px 20px);
    transition: width 300ms ease;
}

.question { font-size: 1.6rem; line-height: 1.22; margin-bottom: 1.4rem; }

.options { display: grid; gap: 0.75rem; }

/* Answer tile: coloured, chunky, one of four house colours. */
.option {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    font-family: var(--body);
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    background: var(--tile, var(--violet));
    border: 0;
    border-radius: var(--r);
    padding: 0.9rem 1rem;
    cursor: pointer;
    box-shadow: 0 5px 0 var(--tile-d, var(--violet-d));
    transition: transform 100ms ease, box-shadow 100ms ease, opacity 150ms ease;
}

.option--c1 { --tile: #ff6a5e; --tile-d: #e04b3f; }
.option--c2 { --tile: #3aa9ff; --tile-d: #1c88df; }
.option--c3 { --tile: #ffc13b; --tile-d: #e0a121; color: #3d1a80; }
.option--c4 { --tile: #21ce9e; --tile-d: #14a97f; }

.option:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 0 var(--tile-d); }
.option:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--tile-d); }

.option__key {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.28);
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.05rem;
}

.option--c3 .option__key { background: rgba(61, 26, 128, 0.16); }

.option.is-picked { outline: 4px solid var(--ring); outline-offset: 2px; }

.option.is-right { --tile: #17b57f; --tile-d: #0e9166; color: #fff; }
.option.is-right .option__key { background: rgba(255, 255, 255, 0.3); }

.option.is-wrong { --tile: #f2504a; --tile-d: #cf3a35; color: #fff; }

/* After an answer, every tile that is neither the correct one nor the picked
   one goes plain white — colour then means something: green right, red wrong. */
.option.is-neutral {
    --tile: var(--surface);
    --tile-d: var(--lav-200);
    color: var(--ink-soft);
    box-shadow: 0 3px 0 var(--lav-200);
}

.option.is-neutral .option__key { background: var(--surface-2); color: var(--ink-soft); }

.option.is-dim { opacity: 0.4; }

.option:disabled { cursor: default; transform: none; }

.option__tag {
    margin-left: auto;
    flex: none;
    font-family: var(--display);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.25);
    border-radius: var(--r-pill);
    padding: 0.2rem 0.6rem;
}

.verdict {
    border-radius: var(--r);
    border: 3px solid var(--lav-200);
    background: var(--surface-2);
    padding: 1rem 1.1rem;
    margin-bottom: 1.15rem;
}

.verdict--right { border-color: var(--wash-mint-line); background: var(--wash-mint); }
.verdict--wrong { border-color: var(--wash-coral-line); background: var(--wash-coral); }

.verdict__head { font-family: var(--display); font-weight: 800; font-size: 1.25rem; margin-bottom: 0.25rem; }

.verdict__points {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 0.3rem;
    color: var(--ink);
}
.verdict--right .verdict__head { color: var(--good-d); }
.verdict--wrong .verdict__head { color: var(--bad-d); }
.verdict p:last-child { font-size: 0.98rem; color: var(--ink-soft); font-weight: 600; }

/* Start & finish screens */
.quiz-splash { text-align: center; }

/* --- Mobile UX & touch-friendliness ---------------------------------
   Phones: bigger tap targets (44px+), roomier answer tiles, sheets instead
   of desktop modals, and a burger drawer for the nav. Anchored at 640px and
   below so tablets keep the roomier desktop layouts. */
@media (max-width: 640px) {

    /* Tap targets: ghost buttons, icon buttons and the admin reordering
       arrows all grow to a comfortable thumb-sized hit area. */
    .btn--ghost,
    .icon-btn,
    .site-tab,
    .board-tab {
        min-height: 44px;
    }

    .btn { min-height: 46px; }
    .btn--lg { min-height: 52px; }

    /* Answer tiles: taller touch area, letter keys and tags get out of the
       way of the answer text on narrow screens. */
    .option {
        min-height: 56px;
        align-items: center;
    }

    /* Modals become full-width sheets with comfortable side margins. */
    .modal {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        max-height: calc(100dvh - 24px);
        margin: 12px auto;
    }

}

.quiz-splash__badge {
    width: 96px;
    height: 96px;
    margin: 0 auto 1.1rem;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background: var(--violet);
    color: #fff;
    box-shadow: 0 6px 0 var(--violet-d);
    transform: rotate(-6deg);
}

.quiz-splash__badge svg { width: 48px; height: 48px; }

/* The badge above auth forms and quiz splashes was sized for desktop; at
   phone width it crowds the headline. Sits after the base rule so it wins. */
@media (max-width: 640px) {
    .quiz-splash__badge { width: 54px; height: 54px; border-radius: 20px; }
    .quiz-splash__badge svg { width: 24px; height: 24px; }
}

.score {
    font-family: var(--display);
    font-weight: 800;
    font-size: 4.4rem;
    line-height: 1;
    color: var(--violet-ink);
    margin: 0.4rem 0 0.2rem;
}

.score__of { color: var(--ink-mute); font-size: 2.2rem; }

.outcome {
    border-radius: var(--r);
    padding: 1.1rem;
    margin-top: 1.1rem;
    background: var(--surface-2);
    border: 3px solid var(--lav-200);
}

.outcome__label { font-family: var(--display); font-weight: 800; font-size: 1.15rem; margin-bottom: 0.25rem; }
.outcome p:last-child { font-weight: 600; color: var(--ink-soft); }

.outcome--pass { background: var(--wash-mint); border-color: var(--wash-mint-line); }
.outcome--pass .outcome__label { color: var(--good-d); }
.outcome--fail { background: var(--wash-sun); border-color: var(--wash-sun-line); }
.outcome--fail .outcome__label { color: var(--sun-d); }

/* "Score saved" line under the result. */
.save-status {
    min-height: 1.4em;
    margin: 0.9rem 0 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink-mute);
}

.save-status--good { color: var(--good-d); }
.save-status--bad { color: var(--bad-d); }

/* --------------------------------------------------------------------------
   Progress panel
   -------------------------------------------------------------------------- */

.tally { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tally__item {
    background: var(--surface-2);
    border-radius: var(--r);
    padding: 0.85rem 0.9rem;
    text-align: center;
}

.tally__value {
    display: block;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.7rem;
    line-height: 1.1;
    color: var(--violet-ink);
}

.tally__label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ink-mute); margin-top: 0.15rem; }

.record-list { list-style: none; margin: 0; padding: 0; }

.record {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.3rem 0.6rem;
    padding: 0.65rem 0;
    border-bottom: 2px dotted var(--lav-200);
}

.record:last-child { border-bottom: 0; }

.record__dot { width: 12px; height: 12px; border-radius: 4px; background: var(--violet); }
.record__dot--violet { background: var(--violet); }
.record__dot--mint { background: var(--mint); }
.record__dot--sky { background: var(--sky); }
.record__dot--coral { background: var(--coral); }
.record__dot--sun { background: var(--sun); }

.record__name { font-family: var(--display); font-weight: 800; font-size: 1.02rem; }

.record__points {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--violet-ink);
    grid-row: span 2;
    align-self: center;
}

.record__meta {
    grid-column: 2;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   Leaderboard
   -------------------------------------------------------------------------- */

.tabs {
    display: flex;
    /* Wraps rather than scrolling sideways, so subject four and beyond stay
       visible instead of hiding off the edge of the row. */
    flex-wrap: wrap;
    gap: 0.35rem;
    background: var(--surface-2);
    border-radius: var(--r-lg);
    padding: 0.3rem;
    margin-bottom: 1.15rem;
}

.board-tab {
    flex: 1 1 auto;
    white-space: nowrap;
    border: 0;
    background: transparent;
    border-radius: var(--r-pill);
    padding: 0.5rem 0.7rem;
    font-family: var(--display);
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--ink-soft);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.board-tab:hover { color: var(--violet-ink); }
.board-tab.is-active { background: var(--surface); color: var(--violet-ink); box-shadow: 0 3px 0 var(--lav-200); }

.board { list-style: none; margin: 0; padding: 0; counter-reset: none; }

.board__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--r-sm);
}

.board__row + .board__row { margin-top: 0.25rem; }

.board__row--you { background: var(--surface-2); outline: 2px solid var(--lav-300); }

.board__place {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--display);
    font-weight: 800;
    font-size: 0.9rem;
    background: var(--surface-2);
    color: var(--ink-soft);
}

/* Top three get the medal treatment. */
.board__place--1 { background: var(--sun); color: #3d1a80; }
.board__place--2 { background: var(--lav-300); color: #fff; }
.board__place--3 { background: var(--coral); color: #fff; }

.board__name {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board__you {
    font-family: var(--display);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--violet);
    color: #fff;
    border-radius: var(--r-pill);
    padding: 0.1rem 0.45rem;
    margin-left: 0.3rem;
}

.board__points {
    flex: none;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--violet-ink);
}

/* --------------------------------------------------------------------------
   Post-quiz leaderboard celebration
   Fades in under the quiz panel after a saved attempt; the "you" row climbs
   from its previous rank (--climb-y set in JS from real measured offsets) and
   the points count up from zero. .is-landed adds the landing pulse.
   -------------------------------------------------------------------------- */

.quiz-board-celebrate {
    margin-top: 1.5rem;
    padding: 1.1rem 1.25rem 1.25rem;
    background: var(--surface);
    border: 3px solid var(--lav-200);
    border-radius: var(--r-lg);
    box-shadow: var(--ledge);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 450ms ease, transform 450ms ease;
}

.quiz-board-celebrate.is-in { opacity: 1; transform: translateY(0); }

.quiz-board-celebrate__title {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--violet-ink);
    margin: 0 0 0.75rem;
}

.quiz-board-celebrate .btn { margin-top: 0.9rem; }

/* The climbing row: starts shifted down by its old-rank distance, then
   slides up to the new rank once .is-in lands on the panel. */
.quiz-board-celebrate .board__row--you.is-climbing {
    transform: translateY(var(--climb-y, 0px));
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.quiz-board-celebrate.is-in .board__row--you.is-climbing { transform: translateY(0); }

/* Landed: a soft glow pulse to say "this is your new spot". */
.quiz-board-celebrate .board__row--you.is-landed {
    animation: board-land 700ms ease;
}

@keyframes board-land {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-board-celebrate,
    .quiz-board-celebrate .board__row--you.is-climbing { transition: none; }
    .quiz-board-celebrate .board__row--you.is-landed { animation: none; }
}