/* ══════════════════════════════════════════════════════════════════
   /quizzes/: the quiz hub
   The words on the left and, on the right, three moments of a round
   (a wrong answer, a right one, the result) that fan out as you start
   to scroll. The gold tile explains multiplayer beside the lobby. The
   multiplayer switch rides at the top of the six cards it changes.
   Countries and Custom open and close the list as wide cards, the two
   Arabic quizzes sit together right-aligned, and a quiet row about the
   leaderboard ends the list. Gold is the quiz colour.
   ══════════════════════════════════════════════════════════════════ */

/* Screenshots of the quiz player come in each theme: show the one that matches */
.tv--snowy, .tv--midnight { display: none !important; }
:root[data-palette="snowy-owl"] .tv--night, :root[data-palette="midnight"] .tv--night { display: none !important; }
:root[data-palette="snowy-owl"] .tv--snowy, :root[data-palette="midnight"] .tv--midnight { display: block !important; }

/* ── Hero ────────────────────────────────────────────────────────── */
.qh-hero { padding-block: clamp(48px, 7vw, 104px) clamp(64px, 8vw, 120px); overflow: clip; }
.qh-hero-in { display: grid; gap: clamp(48px, 6vw, 72px); align-items: center; }
@media (min-width: 900px) { .qh-hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.qh-title { font-size: clamp(44px, 5.4vw, 76px); line-height: 1.04; letter-spacing: -0.032em; font-weight: 600; }
.qh-title em { font-style: normal; color: var(--gold); }
.qh-hero-copy .t-lead { max-width: 30em; margin-top: 22px; }
.qh-hero-copy .btns { margin-top: 30px; }
.js .qh-in { animation: qh-in 1s var(--ease-out) var(--d, 0s) both; }
@keyframes qh-in { from { opacity: 0; transform: translateY(24px); } }

.qh-stats { display: flex; gap: clamp(24px, 4vw, 48px); list-style: none; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 30em; }
.qh-stats li { display: grid; gap: 4px; }
.qh-stats b { font-size: clamp(32px, 3.4vw, 44px); line-height: 1; font-weight: 600; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.qh-stats span { font-size: 15px; color: var(--fg-3); }

/* The fan: a deck at first, spread out within the first few hundred pixels of scrolling
   (with reduced motion --p is 1, so it shows fully spread) */
.qh-fan {
    --s: min(1, calc(.55 + var(--p, 1) * 2));
    position: relative; height: clamp(460px, 42vw, 600px);
}
.qh-fan figure {
    position: absolute; margin: 0; overflow: hidden;
    border-radius: clamp(14px, 1.6vw, 22px); background: var(--bg-2);
    box-shadow: 0 0 0 1px var(--line), var(--shadow);
    will-change: transform;
}
.qh-fan img { display: block; width: 100%; height: auto; }
.qh-fan-a { z-index: 1; top: 0; left: 0; width: 80%;
    transform: translate3d(calc((1 - var(--s)) * 18%), calc((1 - var(--s)) * 26%), 0) rotate(calc((1 - var(--s)) * -5deg)); }
.qh-fan-c { z-index: 2; right: -8%; bottom: 0; width: 66%;
    transform: translate3d(calc((1 - var(--s)) * -18%), calc((1 - var(--s)) * -22%), 0) rotate(calc((1 - var(--s)) * 5deg)); }
.qh-fan-b { z-index: 3; top: 28%; left: 12%; width: 92%;
    transform: translate3d(0, calc((1 - var(--s)) * 20px), 0); }

/* ── Multiplayer tile ───────────────────────────────────────────── */
.qh-mp-wrap { margin-bottom: 0; }
.qh-mp { display: grid; gap: 40px; align-items: stretch; min-height: 0; padding: clamp(44px, 6vw, 88px) clamp(24px, 6vw, 88px) 0; }
@media (min-width: 900px) {
    .qh-mp { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .qh-mp-copy { padding-bottom: clamp(56px, 6vw, 88px); }
}
.qh-mp-copy { display: grid; align-content: start; gap: 32px; max-width: 600px; }
.qh-kind { font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; color: var(--fg-2); margin-bottom: 10px; }
.qh-mp .t-display { max-width: 9em; }
.qh-how-title { font-size: 17px; font-weight: 600; color: var(--fg); margin-bottom: 14px; }
.qh-steps { list-style: none; counter-reset: step; display: grid; }
.qh-steps li {
    counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px;
    padding: 14px 0; border-top: 1px solid var(--line);
    font-size: 17px; line-height: 1.42; color: var(--fg-2);
}
.qh-steps li::before { content: counter(step); font-size: 28px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--fg); }
.qh-mp .btn svg { transition: transform .25s var(--ease-out); }
.qh-mp .btn:hover svg { transform: translateX(3px); }

/* The lobby starts level with the headline and clearly runs off the bottom of the tile */
.qh-mp-media { position: relative; min-height: 440px; }
.qh-mp-shot {
    position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none;
    aspect-ratio: 900 / 1200; object-fit: cover; object-position: top center;
    border-radius: 26px 26px 0 0; box-shadow: 0 30px 60px -20px rgba(22,22,26,.45);
    transform: translate3d(-50%, calc((1 - var(--p, 1)) * 140px), 0);
}

/* Between 900 and 1100px the copy column is narrow: the lobby keeps to its own column, rising from the bottom edge */
@media (min-width: 900px) and (max-width: 1099px) {
    .qh-mp-shot { top: auto; bottom: 0; height: auto; width: min(100%, 440px); }
}

/* ── The quizzes ─────────────────────────────────────────────────── */
.qh-list-head { margin-bottom: clamp(32px, 4vw, 48px); }

/* The switch rides at the top of the cards it changes */
.qh-bar {
    position: sticky; top: 12px; z-index: 5;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px;
    margin-bottom: 20px; padding: 10px 22px 10px 14px; border-radius: 22px;
    background: var(--nav-bg); box-shadow: 0 0 0 1px var(--line);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.qh-switch-row { display: flex; align-items: center; gap: 12px; }
.qh-switch {
    display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px 0 0;
    border: 0; border-radius: 12px; background: none; color: var(--fg); font-size: 17px; font-weight: 600; letter-spacing: -0.012em;
}
.qh-switch-track {
    position: relative; flex: none; width: 52px; height: 32px; border-radius: 980px;
    background: var(--bg-3); box-shadow: inset 0 0 0 2px var(--fg-3);
    transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.qh-switch-knob {
    position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
    background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.28), 0 0 0 .5px rgba(0,0,0,.1);
    transition: transform .35s var(--ease-out), background-color .3s var(--ease);
}
.qh-switch[aria-checked="true"] .qh-switch-track { background: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.qh-switch[aria-checked="true"] .qh-switch-knob { transform: translateX(20px); background: #FFFFFF; }
.qh-switch-state { min-width: 2em; font-size: 15px; font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.qh-switch[aria-checked="true"] ~ .qh-switch-state { color: var(--accent); }
.qh-status { flex: 1 1 22em; font-size: 15px; line-height: 1.4; color: var(--fg-2); }
.qh[data-mode="multiplayer"] .qh-status { color: var(--fg); }

.qh-grid { display: grid; gap: 20px; }
@media (min-width: 834px) {
    .qh-grid { grid-template-columns: 1fr 1fr; }
    .qh-card.qh-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
    .qh-card.qh-card--wide .qh-card-copy { align-self: center; padding-bottom: clamp(28px, 3.6vw, 48px); }
    .qh-card.qh-card--wide .qh-card-shot { margin: clamp(28px, 3.6vw, 48px) 0 0; border-radius: 18px 0 0 0; }
    .qh-card.qh-card--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .qh-card.qh-card--flip .qh-card-copy { order: 2; }
    .qh-card.qh-card--flip .qh-card-shot { order: 1; border-radius: 0 18px 0 0; }
}
.qh-card {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; min-height: 100%;
    border-radius: var(--radius-lg); background: var(--bg-2); color: var(--fg);
}
.qh-card:hover { text-decoration: none; }
.qh-card-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3.6vw, 48px) clamp(24px, 3.6vw, 48px) 28px; }
.qh-meta { display: flex; flex-wrap: wrap; font-size: 15px; font-weight: 600; color: var(--gold); }
.qh-meta > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: currentColor; vertical-align: .28em; }
.qh-name { margin-top: 12px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.06; letter-spacing: -0.028em; font-weight: 600; }
.qh-name [lang="ar"] { letter-spacing: 0; line-height: 1.3; font-weight: 700; }
.qh-text { display: block; margin-top: 14px; max-width: 32em; font-size: 17px; line-height: 1.47; color: var(--fg-2); }
.qh-ar { display: block; margin-top: 8px; font-size: 18px; line-height: 1.7; color: var(--fg-2); }
.qh-tags { display: flex; flex-wrap: wrap; margin-top: 16px; font-size: 14px; color: var(--fg-3); }
.qh-tags > span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 9px; border-radius: 50%; background: currentColor; vertical-align: .28em; }
.qh-best { display: block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.qh-go { margin-top: 22px; }
.qh-go--mp { display: none; }
.qh[data-mode="multiplayer"] .qh-go--mp { display: inline-block; }
.qh[data-mode="multiplayer"] .qh-go--solo { display: none; }
.qh-card::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-radius: inherit; box-shadow: inset 0 0 0 2px var(--gold);
    opacity: 0; transition: opacity .35s var(--ease);
}
.qh[data-mode="multiplayer"] .qh-card::after { opacity: 1; }

/* The two Arabic quizzes: one right-hand edge, their screens cropped on the Arabic question */
.qh-card--ar .qh-card-copy { align-items: flex-end; }
.qh-card--ar .qh-name, .qh-card--ar .qh-ar { text-align: right; }
.qh-card--ar .qh-text { align-self: stretch; max-width: 26em; margin-inline-start: auto; text-align: start; }
.qh-card--ar .qh-meta, .qh-card--ar .qh-tags { justify-content: flex-end; }
.qh-card--ar .qh-card-shot { margin-inline: clamp(24px, 3.6vw, 48px) 0; border-radius: 18px 0 0 0; }

/* Each card ends in a screenshot of its own round */
.qh-card-shot {
    display: block; margin: auto clamp(24px, 3.6vw, 48px) 0; overflow: hidden;
    border-radius: 18px 18px 0 0; box-shadow: 0 0 0 1px var(--line);
}
.qh-card-shot img { display: block; width: 100%; height: auto; transform: translate3d(0, 8px, 0); transition: transform .7s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .qh-card:hover .qh-card-shot img { transform: translate3d(0, 0, 0); }
    .qh-card:hover .more::after { transform: translateX(2px) rotate(45deg); }
}
:root[data-palette="snowy-owl"] .qh-card-shot { box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 20px 40px -24px rgba(0,0,0,.35); }

/* The note: a quiet row under the cards, at body size */
.qh-note {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px;
    margin-top: clamp(48px, 6vw, 72px); padding-top: 28px; border-top: 1px solid var(--line);
}
.qh-note-text { flex: 1 1 28em; max-width: 44em; font-size: 17px; line-height: 1.47; color: var(--fg-2); }
.qh-note-text strong { color: var(--fg); }

/* ── Dialog ──────────────────────────────────────────────────────── */
.qh-dlg { max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; }
html:has(.qh-dlg[open]) { overflow: hidden; }
.qh-dlg-kind { margin-bottom: 0; color: var(--gold); }
.qh-dlg .dlg-title { margin-top: 6px !important; }
.qh-dlg-field { margin-top: 24px !important; }
.qh-dlg .err:empty { display: none; }
.qh-dlg .btns { margin-top: 20px; }
.qh-dlg .field input { background: var(--bg); }
.qh-dlg .dlg-x { width: 44px; height: 44px; top: 8px; right: 8px; }
.qh-join { display: grid; gap: 0; }
.qh-join .btns { margin-top: 20px; }
.qh-code { text-align: center; text-transform: uppercase; letter-spacing: .4em; font-size: 24px !important; font-weight: 600; font-variant-numeric: tabular-nums; }
.qh-code::placeholder { letter-spacing: .4em; color: var(--fg-3); opacity: .6; }
.qh-dlg .dlg-hint { margin-top: 20px !important; padding-top: 16px; border-top: 1px solid var(--line); }

/* ── Phones ──────────────────────────────────────────────────────── */
@media (max-width: 899px) {
    .qh-fan { height: auto; }
    .qh-fan .qh-fan-a, .qh-fan .qh-fan-c { display: none; }
    .qh-fan .qh-fan-b { position: relative; top: 0; left: 0; width: 100%; transform: none; }
    .qh-mp-media { min-height: 400px; }
}
@media (max-width: 600px) {
    .qh-bar { display: contents; }
    .qh-switch-row {
        position: sticky; top: 10px; z-index: 5; width: fit-content; margin-bottom: 12px;
        padding: 4px 16px 4px 8px; border-radius: 980px;
        background: var(--nav-bg); box-shadow: 0 0 0 1px var(--line);
        -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    }
    .qh-status { display: block; margin-bottom: 20px; font-size: 15px; }
    .qh-card-shot img { transform: none; }
    .qh-steps li { grid-template-columns: 34px minmax(0, 1fr); font-size: 16px; }
    .qh-dlg .btns .btn { flex: 1 1 100%; }
    .qh-note .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .qh-fan { --s: 1; }
    .js .qh-in { animation: none; }
    .qh-card-shot img { transform: none; }
}