/* Noos Trivia — accent identity distinct from every other game color
   (--sudoku indigo, --jigsaw amber, --pipes cyan, --wordz orange).
   A warm fuchsia/violet reads as "quiz show" energy without clashing
   with the site's soft, rounded, Quicksand-driven look. */
:root {
    --trivia: #c026d3;
    --trivia-dark: #86198f;
    --trivia-light: #fae8ff;
    --trivia-correct: #22c55e;
    --trivia-wrong: #ef4444;
}

body { font-family: 'Quicksand', sans-serif; }

/* ==========================================================================
   LOBBY
   ========================================================================== */

.trivia-lobby-container { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.trivia-lobby-container h1 { text-align: center; margin-bottom: 6px; font-family: 'Quicksand', sans-serif; }
.trivia-lobby-sub { text-align: center; color: #64748b; margin-bottom: 30px; font-family: 'Quicksand', sans-serif; }

.trivia-search-row { display: flex; justify-content: center; margin-bottom: 18px; }

/* ---------------- Breadcrumb (Level 1 and Level 2) ---------------- */
.trivia-breadcrumb {
    font-size: 13px; font-weight: 700; color: #64748b; margin-bottom: 14px;
    font-family: 'Quicksand', sans-serif;
}
.trivia-breadcrumb a { color: var(--trivia-dark); text-decoration: none; }
.trivia-breadcrumb a:hover { text-decoration: underline; }

/* ---------------- Level 0 — quiz_type hub cards ---------------- */
.trivia-type-hub-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px; margin: 24px 0 36px;
}
.trivia-type-hub-card {
    display: block; padding: 26px 22px; border-radius: 22px; text-decoration: none;
    color: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: 'Quicksand', sans-serif;
}
.trivia-type-hub-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,0.16); }
.trivia-type-hub-ladder { background: linear-gradient(135deg, #7c2d12 0%, #ea580c 100%); }
.trivia-type-hub-personality { background: linear-gradient(135deg, #581c87 0%, #c026d3 60%, #fbbf24 100%); }
.trivia-type-hub-standard { background: linear-gradient(135deg, #86198f 0%, #c026d3 100%); }
.trivia-type-hub-icon { font-size: 34px; margin-bottom: 10px; }
.trivia-type-hub-label { font-size: 1.2rem; font-weight: 800; margin-bottom: 6px; }
.trivia-type-hub-blurb { font-size: 12.5px; opacity: 0.9; line-height: 1.45; margin-bottom: 14px; }
.trivia-type-hub-count { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.85; }

/* ---------------- Level 1 (Standard) — category cards ---------------- */
.trivia-category-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px; margin-top: 20px;
}
.trivia-category-card {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    background: #fff; border-radius: 18px; padding: 22px 14px; text-decoration: none;
    color: inherit; box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease; font-family: 'Quicksand', sans-serif;
}
.trivia-category-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,0.1); }
.trivia-category-icon { font-size: 32px; margin-bottom: 8px; }
.trivia-category-name { font-weight: 700; font-size: 14px; color: #1e293b; margin-bottom: 4px; }
.trivia-category-count { font-size: 11px; color: #94a3b8; font-weight: 600; }

/* ---------------- Popular horizontal scroller ---------------- */
.trivia-section-heading {
    font-size: 1.1rem; font-weight: 800; color: #1e293b; margin: 8px 0 14px;
    font-family: 'Quicksand', sans-serif;
}
.trivia-popular-scroller {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 10px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.trivia-popular-scroller::-webkit-scrollbar { height: 6px; }
.trivia-popular-scroller::-webkit-scrollbar-thumb { background: #e9d5ff; border-radius: 6px; }
.trivia-popular-card {
    flex: 0 0 auto; width: 170px; aspect-ratio: 4 / 3; border-radius: 16px;
    background-size: cover; background-position: center; background-color: var(--trivia-light);
    text-decoration: none; scroll-snap-align: start; position: relative; overflow: hidden;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08); display: flex; align-items: flex-end;
}
.trivia-popular-overlay {
    width: 100%; padding: 10px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 100%);
}
.trivia-popular-title { color: #fff; font-weight: 700; font-size: 12.5px; font-family: 'Quicksand', sans-serif; line-height: 1.3; }

/* ==========================================================================
   NEW THIS ROUND — paste this block into assets/css/trivia.css, right
   after the existing ".trivia-popular-scroller"/".trivia-popular-card"
   rules. It generalizes that one hardcoded "Popular" scroller into many
   named shelves (Continue / Popular / New / per-category), and adds the
   new dedicated quiz filter bar (includes/trivia_filter_bar.php).
   ========================================================================== */

/* ---------------- Generic shelf (Continue / Popular / New / per-category) ---------------- */
.trivia-shelf { margin-bottom: 30px; }
.trivia-shelf-heading {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
    font-size: 1.05rem; font-weight: 800; color: #1e293b;
    font-family: 'Quicksand', sans-serif;
}
.trivia-shelf-heading .trivia-shelf-icon { font-size: 18px; }
.trivia-shelf-scroller {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.trivia-shelf-scroller::-webkit-scrollbar { height: 6px; }
.trivia-shelf-scroller::-webkit-scrollbar-thumb { background: #e9d5ff; border-radius: 6px; }

/* ---------------- Continue-playing card — distinct from a plain popular
   card since it carries a progress bar and question-position text, not
   a category/title overlay. ---------------- */
.trivia-continue-card {
    flex: 0 0 auto; width: 170px; height: 96px; border-radius: 16px;
    background-size: cover; background-position: center; background-color: var(--trivia-light);
    text-decoration: none; scroll-snap-align: start; position: relative; overflow: hidden;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08); padding: 12px; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.trivia-continue-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);
}
.trivia-continue-title {
    position: relative; z-index: 1; color: #fff; font-weight: 700; font-size: 12.5px;
    font-family: 'Quicksand', sans-serif; line-height: 1.3; margin-bottom: 4px;
}
.trivia-continue-sub {
    position: relative; z-index: 1; color: rgba(255,255,255,0.85); font-size: 10.5px; font-weight: 600;
}
.trivia-continue-progress-track {
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.3); z-index: 1;
}
.trivia-continue-progress-fill { height: 100%; background: #fff; }

/* ---------------- New quiz filter bar (includes/trivia_filter_bar.php)
   — deliberately its own component, not a reskin of the shared
   .filter-bar used by puzzle games, so trivia's wording/behavior can
   diverge freely (see that file's own header comment for why). ---------------- */
.trivia-filter-bar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 12px; background: #fff; border-radius: 16px; padding: 12px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin: 18px 0 22px;
    font-family: 'Quicksand', sans-serif;
}
.trivia-filter-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.trivia-filter-count { font-size: 13px; font-weight: 700; color: #64748b; white-space: nowrap; }
.trivia-filter-divider { width: 1px; height: 18px; background: #e2e8f0; }
.trivia-filter-pills { display: flex; gap: 6px; }
.trivia-filter-pill {
    font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 10px;
    text-decoration: none; color: #64748b; background: #f1f5f9; transition: background 0.15s ease, color 0.15s ease;
}
.trivia-filter-pill:hover { background: #e2e8f0; }
.trivia-filter-pill.is-active { background: var(--trivia); color: #fff; }
.trivia-filter-right { display: flex; align-items: center; gap: 10px; }
.trivia-filter-select {
    font-family: 'Quicksand', sans-serif; font-size: 12.5px; font-weight: 600; color: #1e293b;
    border: 1px solid #e2e8f0; border-radius: 10px; padding: 7px 10px; background: #f8fafc; cursor: pointer;
}
.trivia-filter-surprise {
    display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700;
    color: var(--trivia-dark); background: var(--trivia-light); border: 1px solid #f0abfc;
    border-radius: 10px; padding: 7px 14px; text-decoration: none; white-space: nowrap;
    transition: background 0.15s ease;
}
.trivia-filter-surprise:hover { background: #f5d0fe; }
.trivia-filter-surprise-icon { font-size: 13px; }

@media (max-width: 600px) {
    .trivia-filter-bar { padding: 10px 12px; }
    .trivia-filter-right { width: 100%; justify-content: space-between; }
}

/* ---------------- Search results ---------------- */
.trivia-search-results { margin-top: 8px; }
.trivia-search-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.trivia-cat-chip {
    display: inline-block; background: var(--trivia-light); color: var(--trivia-dark);
    border: 1px solid #f0abfc; border-radius: 12px; padding: 8px 14px;
    font-size: 12.5px; font-weight: 700; text-decoration: none; font-family: 'Quicksand', sans-serif;
}
.trivia-cat-chip:hover { background: #f5d0fe; }
.trivia-search-other-header {
    font-size: 13px; font-weight: 800; color: #94a3b8; text-transform: uppercase;
    letter-spacing: 0.4px; margin: 26px 0 12px; font-family: 'Quicksand', sans-serif;
}

   .trivia-replay-score-line {
        font-size: 12.5px; color: #64748b; margin: -14px 0 18px; line-height: 1.5;
    }
    .trivia-replay-score-line strong { color: var(--trivia-dark); }
    .trivia-replay-btn {
        background: #fff; color: var(--trivia-dark);
        border: 2px solid var(--trivia-light) !important;
    }
    .trivia-replay-btn:hover { border-color: var(--trivia) !important; background: var(--trivia-light); }
    .trivia-replay-ad-tag { font-size: 11px; opacity: 0.65; font-weight: 600; }

.trivia-subcat-row { display: flex; justify-content: center; margin: -8px 0 20px; }
.trivia-subcat-row .filter-select { max-width: 280px; }
.trivia-search-form { display: flex; gap: 8px; width: 100%; max-width: 420px; }
.trivia-search-input {
    flex: 1; padding: 12px 16px; border-radius: 14px; border: 1px solid #e2e8f0;
    font-family: 'Quicksand', sans-serif; font-size: 14px; background: #f8fafc;
}
.trivia-search-input:focus { outline: none; border-color: var(--trivia); background: #fff; }
.trivia-search-btn {
    background: var(--trivia); color: #fff; border: none; border-radius: 14px;
    padding: 0 18px; font-size: 16px; cursor: pointer;
}

.trivia-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 22px; margin-top: 24px;
}

.trivia-card {
    position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center;
    background-color: var(--trivia-light);
    border-radius: 22px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex; flex-direction: column; justify-content: flex-end;
    text-decoration: none; color: inherit;
}
.trivia-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,0.13); }

/* Text-only quizzes get a category-tinted flat card with a big icon,
   instead of a broken/missing image — the icon becomes the visual
   anchor rather than leaving an empty gradient. */
.trivia-card-noimg {
    background: linear-gradient(135deg, var(--trivia-light) 0%, #f5d0fe 100%);
}
.trivia-card-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%);
    font-size: 64px; opacity: 0.35; pointer-events: none;
}

.trivia-card-overlay {
    padding: 16px 18px;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0) 100%);
    box-sizing: border-box; position: relative; z-index: 1;
}
.trivia-card-noimg .trivia-card-overlay {
    background: linear-gradient(to top, rgba(88,28,135,0.55) 0%, rgba(88,28,135,0.1) 70%, rgba(0,0,0,0) 100%);
}
.trivia-card-cat {
    font-size: 11px; font-weight: 700; color: #f5d0fe; text-transform: uppercase;
    letter-spacing: 0.4px; margin-bottom: 4px; font-family: 'Quicksand', sans-serif;
}
.trivia-card-noimg .trivia-card-cat { color: var(--trivia-dark); }
.trivia-card-title {
    font-weight: 700; color: #fff; font-size: 1.05rem; line-height: 1.25;
    font-family: 'Quicksand', sans-serif; margin-bottom: 4px;
}
.trivia-card-noimg .trivia-card-title { color: #4a044e; }
.trivia-card-meta { font-size: 12px; color: #e9d5ff; font-weight: 600; }
.trivia-card-noimg .trivia-card-meta { color: var(--trivia-dark); opacity: 0.75; }

.trivia-score-badge {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    background: rgba(255,255,255,0.92); color: var(--trivia-dark);
    padding: 6px 12px; border-radius: 12px; font-weight: 800; font-size: 13px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); font-family: 'Quicksand', sans-serif;
}

.trivia-empty {
    grid-column: 1 / -1; text-align: center; padding: 60px 20px;
    color: #94a3b8; font-weight: 600; font-size: 15px;
}

@media (max-width: 600px) {
    .trivia-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .trivia-card-overlay { padding: 12px; }
    .trivia-card-title { font-size: 0.9rem; }
}

/* ==========================================================================
   QUIZ PLAY
   ========================================================================== */

.trivia-page { max-width: 640px; margin: 18px auto; padding: 0 20px; }

.trivia-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; font-family: 'Quicksand', sans-serif;
}
.trivia-topic { font-weight: 700; font-size: 1.15rem; color: #1e293b; }
.trivia-progress { font-size: 13px; font-weight: 700; color: var(--trivia-dark); }

.trivia-progress-bar {
    height: 6px; background: #f3e8ff; border-radius: 6px; overflow: hidden; margin-bottom: 10px;
}
.trivia-progress-fill {
    height: 100%; background: var(--trivia); border-radius: 6px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.trivia-lifeline-bar {
    display: flex; gap: 8px; margin-bottom: 12px;
}
.trivia-lifeline-btn {
    flex: 1; background: #fff; border: 2px solid var(--trivia-light);
    border-radius: 14px; padding: 8px 6px; font-family: 'Quicksand', sans-serif;
    font-weight: 700; font-size: 12px; color: var(--trivia-dark); cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.trivia-lifeline-btn:hover:not(:disabled) { border-color: var(--trivia); background: var(--trivia-light); }
.trivia-lifeline-btn:disabled {
    opacity: 0.4; cursor: default; border-color: #e2e8f0;
}
.trivia-lifeline-btn.is-spent {
    /* Permanently spent for the rest of the quiz — distinct, slightly
       different look from a just-temporarily-disabled-mid-question
       state, so a player can tell at a glance "gone for good" vs
       "wait for the next question". */
    background: #f1f5f9; text-decoration: line-through; opacity: 0.5;
}

.trivia-question-card {
    background: #fff; border-radius: 26px; padding: 20px 22px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.06); font-family: 'Quicksand', sans-serif;
}

.trivia-question-image {
    width: 100%;
    /* min() of a fixed cap AND a viewport-height-relative cap — on a
       short (landscape) screen the vh term wins automatically and
       shrinks the image, without needing a matching width-based media
       query to catch every possible short-but-wide device size. Lowered
       from 180px: the lifeline bar (added this round) added a whole new
       row's worth of height to the default stack that wasn't accounted
       for when 180px was originally tuned, which is what pushed the
       full desktop layout past one screen (see Mark's screenshot). */
    max-height: min(160px, 20vh);
    object-fit: contain; border-radius: 18px; margin-bottom: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    /* contain, not cover — a flag's exact shape/detail can BE the answer,
       so cropping it (as cover would) risks hiding the actual clue. The
       full image always shows, letterboxed on a plain background if its
       aspect ratio doesn't match the box, rather than filling the box by
       cutting off part of the picture. */
    background: #f8fafc;
    display: block;
    margin-left: auto; margin-right: auto;
}

.trivia-question-text {
    /* Larger + bolder (1.2rem/700 -> 1.5rem/800) and given its own
       shaded background block, per Mark's screenshot feedback — the
       question was getting lost above the answer grid, especially on
       desktop where the whole card has more breathing room to work
       with. --trivia-light (the same soft fuchsia tint already used
       for hover states and the fact-box) keeps this on-palette rather
       than introducing a new color. Padding replaces what used to be
       plain margin-only spacing, since the tint needs room to read as
       a deliberate card-within-a-card rather than a stray highlight
       hugging the text. */
    font-size: 1.5rem; font-weight: 800; color: #1e293b; line-height: 1.35;
    margin-bottom: 18px; text-align: center;
    background: var(--trivia-light);
    border-radius: 18px;
    padding: 18px 20px;
}

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

.trivia-answer-btn {
    background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 16px;
    padding: 12px 14px; font-family: 'Quicksand', sans-serif; font-weight: 700;
    font-size: 14px; color: #1e293b; text-align: center; cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-height: 54px; line-height: 1.25;
}
.trivia-answer-btn span:first-child {
    /* Answer text itself — allow it to wrap onto 2 lines within the
       button rather than overflow or force the button wider than its
       grid cell, since a 2-column layout gives each button roughly half
       the width a full-row button used to have. */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Answer images (round: answer images, tightened for viewport fit).
   Sized with the same min()-of-a-px-cap-and-a-vh-cap approach
   .trivia-question-image already uses above — on a short viewport the
   vh term wins and shrinks the image automatically, without needing a
   matching width-based media query to catch every device size. A 2x2
   grid of answer images competes for vertical space alongside the
   question image, the question text, the lifeline bar, and (after
   reveal) the fact box + Next button — so each answer image gets a
   noticeably smaller budget than the single question image does. */
.trivia-answer-btn-img {
    min-height: 70px;
    max-height: min(110px, 16vh);
    padding: 8px;
    overflow: hidden;
}
.trivia-answer-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    display: block;
}

@media (max-width: 480px) {
    .trivia-answer-btn-img { min-height: 56px; max-height: min(90px, 14vh); padding: 6px; }
}

@media (max-height: 750px) {
    .trivia-answer-btn-img { max-height: min(90px, 13vh); }
}

@media (max-height: 520px) {
    .trivia-answer-btn-img { min-height: 44px; max-height: min(64px, 12vh); padding: 4px; }
}
.trivia-answer-btn:hover:not(:disabled) { border-color: var(--trivia); background: var(--trivia-light); }
.trivia-answer-btn:active:not(:disabled) { transform: scale(0.98); }
.trivia-answer-btn:disabled { cursor: default; }

/* The one bold, memorable moment: a quick pulse/shake + icon morph on
   reveal, rather than a static color swap. Correct answer always ends
   up highlighted green even if the player picked wrong, so the eye is
   drawn to what they should have chosen. Wrong-answer shake is now
   VERTICAL (not horizontal) — in a 2-column grid a horizontal shake risks
   visually colliding with the button next to it in the same row. */
.trivia-answer-btn.is-correct {
    background: #dcfce7; border-color: var(--trivia-correct); color: #14532d;
    animation: trivia-correct-pulse 0.5s ease;
}
.trivia-answer-btn.is-wrong {
    background: #fee2e2; border-color: var(--trivia-wrong); color: #7f1d1d;
    animation: trivia-wrong-shake-v 0.4s ease;
}
/* Fixed-height reserved slot, present and taking up space from the very
   first render — NOT toggled via opacity on empty->populated content.
   Opacity alone doesn't prevent a layout shift: an empty span has zero
   height, so the moment JS sets its textContent to '✓'/'✕' the span
   gains real height and grows the button, regardless of any opacity
   transition running on top of that. Reserving the height up front,
   whether or not there's a character inside yet, is what actually stops
   the buttons changing size on reveal (see the "Palau"/"Japan" buttons
   growing taller than their neighbors in Mark's screenshot). */
.trivia-answer-icon {
    display: block; height: 20px; line-height: 20px; font-size: 16px;
    opacity: 0; transition: opacity 0.15s ease;
}
.trivia-answer-btn.is-correct .trivia-answer-icon,
.trivia-answer-btn.is-wrong .trivia-answer-icon { opacity: 1; }

/* Remove-One / 50:50 trimmed-out answer — dimmed and struck through
   rather than removed from the DOM/layout entirely, so the 2x2 grid
   never reflows or jumps when a lifeline is used mid-question. */
.trivia-answer-btn.is-trimmed {
    opacity: 0.35; text-decoration: line-through; background: #f8fafc;
}

/* Ask AI percentage readout — same fixed-height-reserved-up-front
   principle as .trivia-answer-icon above, for the same reason: without
   a reserved slot, the moment JS populates this with "62%" the button
   would grow, exactly the bug already fixed for the correct/wrong icon. */
.trivia-answer-pct {
    display: block; height: 16px; line-height: 16px; font-size: 11px;
    font-weight: 800; color: var(--trivia-dark); letter-spacing: 0.3px;
}
.trivia-answer-pct.is-thinking { color: #94a3b8; letter-spacing: 2px; }
.trivia-answer-pct.is-revealed { animation: trivia-pct-in 0.3s ease; }
@keyframes trivia-pct-in {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes trivia-correct-pulse {
    0% { transform: scale(1); } 40% { transform: scale(1.03); } 100% { transform: scale(1); }
}
@keyframes trivia-wrong-shake-v {
    0%, 100% { transform: translateY(0); }
    20% { transform: translateY(-4px); }
    40% { transform: translateY(4px); }
    60% { transform: translateY(-3px); }
    80% { transform: translateY(3px); }
}

.trivia-fact-box {
    margin-top: 10px; background: var(--trivia-light); border: 1px solid #f0abfc;
    border-radius: 14px; padding: 10px 14px; font-size: 12.5px; color: var(--trivia-dark);
    line-height: 1.4; opacity: 0; transform: translateY(6px);
    animation: trivia-fact-in 0.35s ease forwards; animation-delay: 0.3s;
}
.trivia-fact-box strong { color: #4a044e; }
@keyframes trivia-fact-in { to { opacity: 1; transform: translateY(0); } }

.trivia-next-btn {
    margin-top: 12px; width: 100%; background: var(--trivia); color: #fff; border: none;
    border-radius: 16px; padding: 12px; font-family: 'Quicksand', sans-serif; font-weight: 700;
    font-size: 15px; cursor: pointer; opacity: 0; transform: translateY(6px);
    animation: trivia-fact-in 0.35s ease forwards; animation-delay: 0.45s;
}
.trivia-next-btn:active { transform: scale(0.98); }

.trivia-flag-wrap { margin-top: 10px; }
.trivia-flag-trigger {
    background: none; border: none; color: #94a3b8; font-size: 11px;
    font-weight: 600; cursor: pointer; padding: 4px 0; font-family: 'Quicksand', sans-serif;
}
.trivia-flag-trigger:hover { color: #64748b; text-decoration: underline; }
.trivia-flag-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.trivia-flag-reason-btn {
    background: #f1f5f9; border: none; border-radius: 8px; padding: 6px 10px;
    font-size: 11px; font-weight: 600; color: #475569; cursor: pointer; font-family: 'Quicksand', sans-serif;
}
.trivia-flag-reason-btn:hover { background: #e2e8f0; }
.trivia-flag-reason-btn:disabled { opacity: 0.5; cursor: default; }
.trivia-flag-thanks { font-size: 11px; color: #16a34a; font-weight: 600; margin-top: 6px; }

/* "Already played" locked state */
.trivia-already-played {
    text-align: center; background: #fff; border-radius: 26px; padding: 50px 30px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.06); font-family: 'Quicksand', sans-serif;
}
.trivia-already-emoji { font-size: 44px; margin-bottom: 10px; }
.trivia-already-sub { color: #64748b; margin-bottom: 18px; }
.trivia-already-score {
    font-size: 2.4rem; font-weight: 800; color: var(--trivia); margin-bottom: 26px;
}
.trivia-btn {
    display: inline-block; padding: 13px 28px; border-radius: 14px; font-weight: 700;
    text-decoration: none; font-family: 'Quicksand', sans-serif;
}
.trivia-btn-primary { background: var(--trivia); color: #fff; }

@media (max-width: 480px) {
    .trivia-lifeline-bar { gap: 6px; margin-bottom: 12px; }
    .trivia-lifeline-btn { padding: 8px 4px; font-size: 10.5px; border-radius: 12px; }
    .trivia-question-card { padding: 16px 14px; border-radius: 20px; }
    .trivia-question-image { max-height: min(130px, 20vh); margin-bottom: 12px; }
    .trivia-question-text { font-size: 1.15rem; margin-bottom: 14px; padding: 14px 16px; }
    .trivia-answers { gap: 8px; }
    .trivia-answer-btn { padding: 10px 8px; font-size: 12.5px; min-height: 52px; }
    .trivia-fact-box { margin-top: 10px; padding: 10px 12px; font-size: 12px; }
    .trivia-next-btn { margin-top: 12px; padding: 12px; font-size: 14px; }
}

/* Height-based, NOT width-based — this is what a landscape iPad/tablet
   actually needs. A landscape iPad is roughly 1024-1180px WIDE (well
   past the 480/600px width breakpoints above, so it got none of their
   tightening) but only ~700-820px TALL, which is the dimension that was
   actually tight there. Every rule above this point only ever checked
   width, so a short-but-wide viewport fell through every single one of
   them untouched — this is the fix for "the bottom answer row sits below
   the scroll line on iPad landscape" specifically. Catches ANY short
   viewport regardless of width: landscape tablets, landscape phones, a
   browser window resized short on desktop, all get the same treatment. */
@media (max-height: 750px) {
    .trivia-page { margin-top: 14px; }
    .trivia-meta { margin-bottom: 10px; }
    .trivia-progress-bar { margin-bottom: 10px; }
    .trivia-lifeline-bar { margin-bottom: 10px; }
    .trivia-question-card { padding: 16px 18px; }
    .trivia-question-image { max-height: 16vh; margin-bottom: 10px; }
    .trivia-question-text { font-size: 1.2rem; margin-bottom: 12px; padding: 12px 16px; }
    .trivia-answers { gap: 8px; }
    .trivia-answer-btn { padding: 10px 10px; min-height: 48px; }
    .trivia-fact-box { margin-top: 8px; padding: 8px 12px; font-size: 12px; }
    .trivia-next-btn { margin-top: 8px; padding: 10px; }
}

/* Even shorter still (e.g. a phone in landscape, which combines narrow
   height with the lifeline bar + progress bar + meta row all competing
   for the same limited vertical space) — trims further. */
@media (max-height: 520px) {
    .trivia-meta { margin-bottom: 6px; }
    .trivia-progress-bar { margin-bottom: 6px; height: 4px; }
    .trivia-lifeline-bar { margin-bottom: 6px; }
    .trivia-lifeline-btn { padding: 6px 4px; font-size: 10px; }
    .trivia-question-card { padding: 12px 14px; }
    .trivia-question-image { max-height: 12vh; margin-bottom: 8px; }
    .trivia-question-text { font-size: 0.95rem; margin-bottom: 8px; }
    .trivia-answer-btn { min-height: 42px; padding: 8px; }
    .trivia-fact-box { margin-top: 6px; padding: 6px 10px; font-size: 11px; }
    .trivia-next-btn { margin-top: 6px; padding: 8px; font-size: 13px; }
}

/* Width-based tier for tablet-ish viewports (iPad Mini and similar,
   both orientations — 768-820px wide). The site's ~80-100px fixed
   header (shared across all games, source not in this project) eats a
   fixed chunk of vertical space regardless of orientation, so a
   768-wide/1024-tall portrait viewport can scroll even though it's
   "tall" on paper — the existing max-height tiers never catch it
   because 1024px clears all of them. This is Mark's iPad Mini
   screenshots (both orientations) specifically. */
@media (min-width: 481px) and (max-width: 820px) {
    .trivia-page { margin-top: 10px; }
    .trivia-question-card { padding: 16px 18px; }
    .trivia-question-image { max-height: min(120px, 15vh); margin-bottom: 10px; }
    .trivia-question-text { font-size: 1.2rem; margin-bottom: 12px; padding: 14px 16px; }
    .trivia-lifeline-bar { margin-bottom: 10px; }
    .trivia-answer-btn { min-height: 48px; padding: 10px 10px; }
    .trivia-fact-box { margin-top: 8px; padding: 8px 12px; }
    .trivia-next-btn { margin-top: 8px; padding: 10px; }
}

/* ==========================================================================
   PERSONALITY QUIZ PLAY
   ========================================================================== */

/* Option buttons — single column (not the 2x2 grid Standard uses),
   since personality options are typically longer/more conversational
   phrases ("I'd rather stay in with a book") than short trivia answers,
   and there's no right/wrong reveal state to budget layout space for. */
.trivia-personality-options {
    display: flex; flex-direction: column; gap: 12px;
}
.trivia-personality-option-btn {
    background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 16px;
    padding: 16px 18px; font-family: 'Quicksand', sans-serif; font-weight: 700;
    font-size: 15px; color: #1e293b; text-align: left; cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}
.trivia-personality-option-btn:hover { border-color: var(--trivia); background: var(--trivia-light); }
.trivia-personality-option-btn:active { transform: scale(0.98); }

/* Result screen */
.trivia-personality-result { text-align: center; }
.trivia-personality-result-image {
    width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
    margin: 0 auto 16px; display: block; box-shadow: 0 10px 24px rgba(0,0,0,0.12);
    border: 4px solid #fff; outline: 2px solid var(--trivia-light);
}
.trivia-personality-result-label {
    font-size: 13px; font-weight: 700; color: #94a3b8; text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 6px;
}
.trivia-personality-result-name {
    font-size: 1.8rem; font-weight: 800; color: var(--trivia-dark); margin: 0 0 12px;
}
.trivia-personality-result-desc {
    font-size: 14.5px; color: #475569; line-height: 1.6; max-width: 460px; margin: 0 auto 24px;
}
.trivia-personality-result-actions { display: flex; gap: 10px; margin-top: 8px; }

/* Tied result — shown side by side, never silently resolved to one */
.trivia-personality-tied-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px; margin: 18px 0 24px; text-align: left;
}
.trivia-personality-tied-card {
    background: var(--trivia-light); border: 1px solid #f0abfc; border-radius: 16px;
    padding: 16px; text-align: center;
}
.trivia-personality-tied-card h3 { font-size: 1.1rem; color: var(--trivia-dark); margin: 8px 0 6px; }
.trivia-personality-tied-card p { font-size: 13px; color: #6b21a8; line-height: 1.5; margin: 0; }
.trivia-personality-result-image-small { width: 80px; height: 80px; margin: 0 auto 8px; }

@media (max-width: 480px) {
    .trivia-personality-option-btn { padding: 13px 15px; font-size: 14px; }
    .trivia-personality-result-image { width: 110px; height: 110px; }
    .trivia-personality-result-name { font-size: 1.4rem; }
    .trivia-personality-tied-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
   FREE-TEXT ANSWER (answer_type = 'free_text')
   Markup is rendered by trivia-game.js: .trivia-freetext-wrap contains the
   input, the Submit button and the post-answer hint. JS adds .is-correct /
   .is-wrong to the wrap on reveal. Everything is centred in a narrow column
   so it reads as one deliberate unit under the question block.
   ========================================================================== */
.trivia-freetext-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    width: 100%; max-width: 420px; margin: 6px auto 0;
    font-family: 'Quicksand', sans-serif;
}
.trivia-freetext-input {
    width: 100%; box-sizing: border-box; text-align: center;
    padding: 14px 18px; border-radius: 16px;
    border: 2px solid #e2e8f0; background: #f8fafc;
    font-family: 'Quicksand', sans-serif; font-size: 1.1rem; font-weight: 700; color: #1e293b;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.trivia-freetext-input::placeholder { color: #94a3b8; font-weight: 600; }
.trivia-freetext-input:focus {
    outline: none; border-color: var(--trivia); background: #fff;
    box-shadow: 0 0 0 4px rgba(192,38,211,0.15);
}
.trivia-freetext-input:disabled { cursor: default; }
.trivia-freetext-submit {
    min-width: 180px; padding: 13px 32px; border: none; border-radius: 16px;
    background: linear-gradient(135deg, var(--trivia) 0%, var(--trivia-dark) 100%);
    color: #fff; font-family: 'Quicksand', sans-serif; font-weight: 800; font-size: 15px;
    letter-spacing: 0.3px; cursor: pointer;
    box-shadow: 0 6px 16px rgba(192,38,211,0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.trivia-freetext-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(192,38,211,0.38); }
.trivia-freetext-submit:active:not(:disabled) { transform: scale(0.97); }
.trivia-freetext-submit:disabled { opacity: 0.6; cursor: default; }

.trivia-freetext-hint {
    width: 100%; text-align: center; font-size: 14px; font-weight: 700;
    line-height: 1.4; padding: 10px 14px; border-radius: 14px;
}
.trivia-freetext-answer { font-weight: 800; }

/* Reveal states — same green/red language as the multiple-choice buttons */
.trivia-freetext-wrap.is-correct .trivia-freetext-input {
    background: #dcfce7; border-color: var(--trivia-correct); color: #14532d;
    animation: trivia-correct-pulse 0.5s ease;
}
.trivia-freetext-wrap.is-wrong .trivia-freetext-input {
    background: #fee2e2; border-color: var(--trivia-wrong); color: #7f1d1d;
    animation: trivia-wrong-shake-v 0.4s ease;
}
.trivia-freetext-wrap.is-correct .trivia-freetext-hint { background: #dcfce7; color: #14532d; }
.trivia-freetext-wrap.is-wrong .trivia-freetext-hint { background: #fee2e2; color: #7f1d1d; }

@media (max-width: 480px) {
    .trivia-freetext-wrap { max-width: 100%; gap: 10px; }
    .trivia-freetext-input { padding: 12px 14px; font-size: 1rem; }
    .trivia-freetext-submit { width: 100%; }
}
@media (max-height: 520px) {
    .trivia-freetext-wrap { gap: 8px; margin-top: 2px; }
    .trivia-freetext-input { padding: 9px 12px; }
    .trivia-freetext-submit { padding: 9px 24px; }
}