/* Satoshi — display and body face of the portal */
@font-face {
    font-family: "Satoshi-Variable";
    src: url("../fonts/Satoshi-Variable.woff2") format("woff2"),
         url("../fonts/Satoshi-Variable.woff") format("woff");
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
}

/* QuizFun.fun — visual system
   Bold display typography, pill buttons, soft cards, green primary with a
   yellow accent. Colours can be overridden per portal in the admin area. */

:root {
    --qf-primary:    #008744;
    --qf-primary-dk: #00693a;
    --qf-secondary:  #008efb;
    --qf-accent:     #f9c004;

    /* One colour per area of the portal. Everything below refers to these
       three, so changing an area is a change in one line.
       Yellow carries dark text, the other two carry white. */
    --qf-quiz:       #f9c004;   /* quizzes */
    --qf-quiz-lt:    #fff6d6;
    --qf-quiz-dk:    #c99c00;
    --qf-quiz-ink:   #0f1219;

    --qf-tourn:      #008744;   /* tournaments */
    --qf-tourn-lt:   #e6f4ec;
    --qf-tourn-dk:   #00693a;
    --qf-tourn-ink:  #ffffff;

    --qf-money:      #0b6bcb;   /* balance, payouts, premium, invoices */
    --qf-money-lt:   #e7f0fb;
    --qf-money-dk:   #08529c;
    --qf-money-ink:  #ffffff;

    --qf-ink:        #0f1219;
    --qf-ink-2:      #1a1e29;
    --qf-ink-soft:   #2e374a;
    --qf-muted:      #6b7280;

    --qf-bg:         #f9f9f9;
    --qf-surface:    #ffffff;
    --qf-surface-2:  #f4f4f6;
    --qf-line:       #eaeaea;

    --qf-good:       #12a150;
    --qf-bad:        #dc2626;

    --qf-violet:     #7c3aed;
    /* No longer an area colour; kept for anything that still refers to it. */
    --qf-coral:      #ff6b4a;
    --qf-pink:       #ec4899;
    --qf-teal:       #06b6d4;

    --qf-radius:     20px;
    --qf-radius-sm:  12px;
    --qf-pill:       999px;
    --qf-gap:        1rem;
    --qf-shell:      78rem;
    --qf-shadow:     0 1px 2px rgba(15,18,25,.04), 0 12px 32px rgba(15,18,25,.07);
    --qf-shadow-lg:  0 24px 60px rgba(15,18,25,.14);

    --qf-font: "Satoshi-Variable", "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
    --qf-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--qf-bg);
    color: var(--qf-ink);
    font-family: var(--qf-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5rem; font-weight: 800; }
p { margin: 0 0 1rem; }
a { color: var(--qf-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--qf-primary); outline-offset: 2px;
}

.shell { width: 100%; max-width: var(--qf-shell); margin: 0 auto; padding: 0 1.1rem; }
main.shell { padding-top: 2rem; padding-bottom: 3.5rem; min-height: 60vh; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--qf-ink); color: #fff; padding: .75rem 1rem; z-index: 30; }
.skip-link:focus { left: 0; }

/* Header ------------------------------------------------------------------- */
.masthead { background: var(--qf-surface); border-bottom: 1px solid var(--qf-line); padding: .7rem 0; position: sticky; top: 0; z-index: 20; }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--qf-gap); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--qf-ink); }
.brand:hover { text-decoration: none; }
.brand__mark {
    display: grid; place-items: center; width: 2.3rem; height: 2.3rem;
    border-radius: var(--qf-pill); background: var(--qf-primary); color: #fff;
    font-weight: 900; font-size: .82rem; letter-spacing: .02em;
}
.brand__name { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; }

.masthead__tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }


.langswitch select {
    background: var(--qf-surface-2); color: var(--qf-ink); border: 1px solid var(--qf-line);
    border-radius: var(--qf-pill); padding: .38rem .8rem; font: inherit; font-size: .85rem; font-weight: 600;
}

.usernav { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.usernav__link {
    position: relative; background: none; border: 0; padding: .25rem 0; cursor: pointer;
    color: var(--qf-ink-soft); font: inherit; font-size: .92rem; font-weight: 600;
}
.usernav__link::after {
    content: ""; position: absolute; left: 0; bottom: -2px; height: 3px; width: 0;
    background: var(--qf-primary); transform: skewX(-24deg); opacity: 0; transition: width .3s, opacity .3s;
}
.usernav__link:hover { color: var(--qf-ink); text-decoration: none; }
.usernav__link:hover::after { width: 100%; opacity: 1; }
.usernav__cta {
    background: var(--qf-primary); color: #fff; border: 1px solid var(--qf-primary);
    padding: .5rem 1.1rem; border-radius: var(--qf-pill); font-size: .9rem; font-weight: 700;
}
.usernav__cta:hover { background: #fff; color: var(--qf-ink); text-decoration: none; }
.usernav__user { display: inline-flex; align-items: center; gap: .45rem; color: var(--qf-ink); font-size: .92rem; font-weight: 700; }
.usernav__user:hover { text-decoration: none; }
.usernav__avatar { border-radius: var(--qf-pill); background: var(--qf-surface-2); }
.usernav__logout { margin: 0; }

/* Buttons ------------------------------------------------------------------- */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--qf-primary); color: #fff; border: 1px solid var(--qf-primary);
    border-radius: var(--qf-pill); padding: .72rem 1.5rem;
    font: inherit; font-weight: 700; cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
.button:hover { background: #fff; color: var(--qf-ink); text-decoration: none; }
.button--ghost { background: transparent; color: var(--qf-ink); border-color: var(--qf-ink); }
.button--ghost:hover { background: var(--qf-ink); color: #fff; }
.button--danger { background: var(--qf-bad); border-color: var(--qf-bad); }
.button--danger:hover { background: #fff; color: var(--qf-bad); }
.button--block { display: flex; width: 100%; }
.button--lg { padding: .95rem 2rem; font-size: 1.02rem; }

/* Landing ------------------------------------------------------------------- */
.hero { margin-bottom: 2.4rem; }
.hero__eyebrow {
    display: inline-block; margin: 0 0 .9rem; padding: .3rem .9rem;
    border-radius: var(--qf-pill); background: rgba(0,135,68,.12); color: var(--qf-primary-dk);
    font-size: .8rem; font-weight: 700; letter-spacing: .02em;
}
.hero__title { font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 900; letter-spacing: -.035em; }
.hero__lead { font-size: 1.12rem; color: var(--qf-ink-soft); max-width: 46ch; }
.hero__note { color: var(--qf-muted); max-width: 46ch; }
.hero__actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }
.hero__trust { color: var(--qf-muted); font-size: .88rem; margin: 1rem 0 0; }

.hero--landing {
    margin: -2rem -1.1rem 2.6rem;
    padding: 4rem 1.4rem 3.4rem;
    background:
        radial-gradient(80% 120% at 100% 0%, rgba(249,192,4,.20) 0%, rgba(249,192,4,0) 60%),
        radial-gradient(90% 120% at 0% 100%, rgba(0,142,251,.18) 0%, rgba(0,142,251,0) 60%),
        linear-gradient(160deg, var(--qf-ink) 0%, #171c2b 100%);
    color: #fff;
    border-radius: 0 0 32px 32px;
}
.hero--landing .hero__eyebrow { background: rgba(255,255,255,.14); color: #fff; }
.hero--landing .hero__title { max-width: 20ch; font-size: clamp(2.4rem, 9vw, 4.4rem); }
.hero--landing .hero__lead { color: rgba(255,255,255,.78); max-width: 44ch; }
.hero--landing .button--ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.hero--landing .button--ghost:hover { background: #fff; color: var(--qf-ink); }
.hero--landing .hero__trust { color: rgba(255,255,255,.55); }
@media (min-width: 78rem) { .hero--landing { border-radius: 32px; margin-top: 1.2rem; } }

.benefits { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 2.6rem; }
@media (min-width: 46rem) { .benefits { grid-template-columns: repeat(3, 1fr); } }
.benefit {
    background: var(--qf-surface); border: 1px solid var(--qf-line);
    border-radius: var(--qf-radius); padding: 1.5rem; box-shadow: var(--qf-shadow);
    transition: transform .25s, box-shadow .25s;
}
.benefit:hover { transform: translateY(-3px); box-shadow: var(--qf-shadow-lg); }
.benefit__mark {
    display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: .7rem;
    border-radius: var(--qf-pill); background: var(--qf-accent); color: var(--qf-ink);
    font-family: var(--qf-mono); font-size: .78rem; font-weight: 700;
}
.benefit__title { font-size: 1.25rem; margin: 0 0 .4rem; }
.benefit__text { margin: 0; color: var(--qf-ink-soft); font-size: .97rem; }

.steps { margin-bottom: 2.6rem; }
.steps__list { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: .8rem; }
@media (min-width: 60rem) { .steps__list { grid-template-columns: repeat(3, 1fr); } }
.steps__list li {
    position: relative; padding: 1.2rem;
    background: var(--qf-surface-2); border-radius: var(--qf-radius); display: grid; gap: .25rem;
}
.steps__list strong { font-size: 1.05rem; margin-top: .3rem; }
.steps__list span { color: var(--qf-ink-soft); font-size: .94rem; }

.ctaband {
    display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between;
    background: linear-gradient(120deg, var(--qf-primary) 0%, #00a352 100%);
    color: #fff; border-radius: var(--qf-radius); padding: 2rem; margin-bottom: 2.4rem;
}
.ctaband__title { font-size: 1.6rem; margin: 0 0 .3rem; }
.ctaband__text { margin: 0; color: rgba(255,255,255,.85); font-size: 1rem; max-width: 48ch; }
.ctaband .button { background: #fff; color: var(--qf-ink); border-color: #fff; }
.ctaband .button:hover { background: var(--qf-ink); color: #fff; border-color: var(--qf-ink); }

/* Cards, panels, headings ---------------------------------------------------- */
.cards { display: grid; gap: var(--qf-gap); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* The quiz list goes to five across once there is room, so fifteen fill three
   even rows. The banner between the cards is left out at that width: it is
   not the height of a quiz card and would tear a hole in the row. Three sit
   above the list instead. Below this width the cards stack and the banner is
   simply the next thing down, which reads well, so it stays. */
@media (min-width: 78rem) { .cards--tight { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 78rem) { .cards__ad { display: none; } }

.card {
    background: var(--qf-surface); border: 1px solid var(--qf-line); border-radius: var(--qf-radius);
    padding: 1.3rem; box-shadow: var(--qf-shadow); transition: transform .25s, box-shadow .25s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--qf-shadow-lg); }
.card__title { font-size: 1.15rem; margin: 0 0 .45rem; }
.card__text { margin: 0 0 .5rem; color: var(--qf-ink-soft); font-size: .95rem; }

.panel {
    background: var(--qf-surface); border: 1px solid var(--qf-line); border-radius: var(--qf-radius);
    padding: 1.5rem; margin-bottom: 1.3rem; box-shadow: var(--qf-shadow);
}
.panel--highlight { border-color: var(--qf-primary); box-shadow: 0 0 0 3px rgba(0,135,68,.1); }

.page-head { margin-bottom: 1.4rem; }
.page-head__title { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 900; }
.page-head__meta { color: var(--qf-muted); font-size: .95rem; margin: 0; }
.section-title { font-size: 1.35rem; margin: 2rem 0 .8rem; }
.subheading { font-size: 1rem; margin: 1.3rem 0 .4rem; color: var(--qf-ink-soft); }
.metalist { list-style: none; margin: 0 0 .8rem; padding: 0; font-size: .95rem; color: var(--qf-ink-soft); }
.metalist li { margin-bottom: .35rem; padding-left: 1.1rem; position: relative; }
.metalist li::before { content: ""; position: absolute; left: 0; top: .62em; width: .45rem; height: .45rem; border-radius: 50%; background: var(--qf-primary); }
.submitrow { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.linkish { font-size: .9rem; font-weight: 600; }
.tiny { font-size: .78rem; color: var(--qf-muted); }
.key { display: inline-block; font-family: var(--qf-mono); background: var(--qf-surface-2); padding: .3rem .6rem; border-radius: var(--qf-radius-sm); letter-spacing: .05em; word-break: break-all; }
.codelist { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .45rem; }
.codelist li { font-family: var(--qf-mono); background: var(--qf-surface-2); border-radius: var(--qf-radius-sm); padding: .5rem; text-align: center; font-weight: 600; }
.steps-list { padding-left: 1.2rem; font-size: .95rem; color: var(--qf-ink-soft); }
.steps-list li { margin-bottom: .5rem; }

.statgrid { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.4rem; }
@media (min-width: 48rem) { .statgrid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--qf-surface); border: 1px solid var(--qf-line); border-radius: var(--qf-radius); padding: 1.1rem; }
.stat__value { display: block; font-size: 1.7rem; font-weight: 900; letter-spacing: -.03em; }
.stat__label { display: block; font-size: .82rem; color: var(--qf-muted); font-weight: 600; }

.pill { display: inline-block; padding: .18rem .7rem; border-radius: var(--qf-pill); font-size: .78rem; font-weight: 700; }
.pill--ok  { background: rgba(0,135,68,.13); color: var(--qf-primary-dk); }
.pill--bad { background: rgba(220,38,38,.11); color: var(--qf-bad); }

.flash { border-radius: var(--qf-radius-sm); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .95rem; border: 1px solid transparent; }
.flash--success { background: rgba(0,135,68,.1); border-color: rgba(0,135,68,.3); }
.flash--error   { background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.3); }
.flash--info    { background: rgba(0,142,251,.08); border-color: rgba(0,142,251,.3); }

/* Tables --------------------------------------------------------------------- */
.table {
    width: 100%; border-collapse: collapse; background: var(--qf-surface);
    border: 1px solid var(--qf-line); border-radius: var(--qf-radius); overflow: hidden; font-size: .93rem;
    display: block; overflow-x: auto; white-space: nowrap;
}
@media (min-width: 48rem) { .table { display: table; white-space: normal; } }
.table th, .table td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--qf-line); }
.table thead th { background: var(--qf-surface-2); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--qf-muted); }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: #fcfcfd; }
.table--edit td input { font-size: .9rem; }

.pager { display: flex; gap: .35rem; margin-top: 1.2rem; flex-wrap: wrap; }
.pager a { padding: .4rem .85rem; border-radius: var(--qf-pill); border: 1px solid var(--qf-line); background: #fff; font-size: .88rem; font-weight: 600; }
.pager a:hover { border-color: var(--qf-ink); text-decoration: none; }
.pager a.is-active { background: var(--qf-primary); color: #fff; border-color: var(--qf-primary); }

/* Forms ---------------------------------------------------------------------- */
.form { margin: 0; }
.field { margin-bottom: 1.1rem; border: 0; padding: 0; }
.field > label, .field > legend { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .35rem; }
.field__sublabel { display: block; font-weight: 700; font-size: .86rem; margin: .8rem 0 .3rem; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=date],
.field input[type=search], .field input[type=url], .field input[type=datetime-local], .field select,
.field input[type=file], .field textarea,
.filterbar input, .filterbar select, .table--edit input, .form--inline input, .form--inline select {
    width: 100%; padding: .72rem .95rem; font: inherit;
    border: 1px solid var(--qf-line); border-radius: var(--qf-radius-sm);
    background: #fff; color: var(--qf-ink);
}
.field textarea { font-family: inherit; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--qf-primary); }
.field__hint { margin: .35rem 0 0; font-size: .84rem; color: var(--qf-muted); }
.field__hint.is-free { color: var(--qf-good); font-weight: 700; }
.field__hint.is-taken { color: var(--qf-bad); font-weight: 700; }
.field__error { margin: .35rem 0 0; font-size: .85rem; color: var(--qf-bad); font-weight: 700; }
.field__check, .field--check label { display: block; font-weight: 500; font-size: .94rem; margin: .4rem 0; }
.field__check input, .field--check input { margin-right: .45rem; }
.field-row { display: grid; gap: 0 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.form--inline { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.form--inline input, .form--inline select { width: auto; min-width: 10rem; }
.filterbar { margin-bottom: 1.2rem; }

.captcha { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; }
.captcha img { border: 1px solid var(--qf-line); border-radius: var(--qf-radius-sm); }
.captcha .button { padding: .5rem .9rem; font-size: .85rem; }

.avatargrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: .55rem; margin: .6rem 0; }
.avatargrid__item { position: relative; display: block; cursor: pointer; }
.avatargrid__item input { position: absolute; opacity: 0; }
.avatargrid__item img { width: 100%; height: auto; border-radius: var(--qf-pill); border: 3px solid transparent; display: block; }
.avatargrid__item input:checked + img { border-color: var(--qf-primary); }
.avatar { border-radius: var(--qf-pill); border: 1px solid var(--qf-line); background: #fff; }
.avatar--photo { border-radius: var(--qf-radius-sm); }
.profilerow { display: flex; gap: 1rem; align-items: center; margin-bottom: .9rem; flex-wrap: wrap; }

/* Auth ----------------------------------------------------------------------- */
.authpage { background: linear-gradient(160deg, var(--qf-ink) 0%, #171c2b 100%); min-height: 100vh; }
.authshell { max-width: 34rem; margin: 0 auto; padding: 2.2rem 1.1rem 3rem; }
.authbrand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; margin-bottom: 1.3rem; }
.authbrand:hover { text-decoration: none; }
.authcard { background: var(--qf-surface); border-radius: 24px; padding: 1.8rem; box-shadow: var(--qf-shadow-lg); }
.authcard__title { font-size: 1.6rem; }
.authcard__lead { color: var(--qf-ink-soft); font-size: .97rem; }
.authcard__foot { margin: 1.2rem 0 0; font-size: .92rem; color: var(--qf-muted); text-align: center; }
.authfoot { color: rgba(255,255,255,.5); font-size: .8rem; text-align: center; margin-top: 1.3rem; font-variant-numeric: tabular-nums; }

/* Quiz and tournament -------------------------------------------------------- */
.playpage { background: var(--qf-bg); }
.playhead {
    position: sticky; top: 0; z-index: 10;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--qf-ink); color: #fff;
    margin: 0 -1.1rem 1.4rem; padding: .9rem 1.1rem;
}
/* The title shares the bar with the clock. On a phone the two fought for the
   same line and the title was squeezed into a narrow column of two words. It
   now gets the room it needs and gives way in size instead of in width. */
.playhead__title { font-size: 1.05rem; margin: 0; line-height: 1.25; }
.playhead__left { flex: 1 1 12rem; min-width: 0; }
.playhead__timer { display: flex; align-items: baseline; gap: .5rem; font-variant-numeric: tabular-nums; }
.playhead__timer strong { font-family: var(--qf-mono); font-size: 1.35rem; font-weight: 700; }
.playhead__label { font-size: .74rem; color: rgba(255,255,255,.55); }
.playhead--urgent { background: var(--qf-bad); }

.question { margin-bottom: 1.1rem; }
.question__index { font-size: .78rem; color: var(--qf-muted); margin: 0 0 .4rem; font-weight: 700; letter-spacing: .04em; }
.question__text { font-size: 1.25rem; margin: 0 0 .9rem; }
.question__media { border-radius: var(--qf-radius-sm); margin-bottom: .9rem; display: block; }
.question__hint { font-size: .82rem; color: var(--qf-muted); margin: 0 0 .7rem; }
.question__explanation { font-size: .93rem; color: var(--qf-ink-soft); margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--qf-line); }
.question__report { margin: .6rem 0 0; font-size: .85rem; }

.answeroption {
    display: flex; align-items: flex-start; gap: .7rem;
    border: 2px solid var(--qf-line); border-radius: var(--qf-radius-sm);
    padding: .85rem 1rem; margin-bottom: .55rem; cursor: pointer; font-size: .98rem; font-weight: 500;
    transition: border-color .2s, background .2s;
}
.answeroption:hover { border-color: var(--qf-ink-soft); }
.answeroption input { margin-top: .25rem; accent-color: var(--qf-primary); }
.answeroption:has(input:checked) { border-color: var(--qf-primary); background: rgba(0,135,68,.06); }

.answerrow { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.answerrow__check { flex: 0 0 auto; margin: 0; }
.answerrow input[type=text] { flex: 1 1 auto; padding: .65rem .8rem; font: inherit; border: 1px solid var(--qf-line); border-radius: var(--qf-radius-sm); }

.answerresult { margin: 0 0 .35rem; padding: .55rem .8rem; border-radius: var(--qf-radius-sm); font-size: .95rem; }
.answerresult--correct { background: rgba(0,135,68,.12); color: var(--qf-primary-dk); font-weight: 700; }
.answerresult--wrong { background: rgba(220,38,38,.09); color: var(--qf-bad); }

.mediapreview { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: .8rem; }
.mediapreview img, .mediapreview video { border-radius: var(--qf-radius-sm); border: 1px solid var(--qf-line); max-width: 100%; }
.mediapreview figure { margin: 0; }

/* Wallet, premium, sharing --------------------------------------------------- */
.amount-plus { color: var(--qf-good); font-weight: 700; white-space: nowrap; }
.amount-minus { color: var(--qf-bad); font-weight: 700; white-space: nowrap; }
.planprice { font-size: 2rem; font-weight: 900; margin: .2rem 0 .5rem; letter-spacing: -.03em; color: var(--qf-primary-dk); }

.adbox { position: relative; margin: 1.4rem 0; border: 1px solid var(--qf-line); border-radius: var(--qf-radius); background: var(--qf-surface); overflow: hidden; }
/* The banner sits above the text and uses the full width. A picture keeps its
   own ratio, so one file works on a phone and on a wide screen alike. */
.adbox__link { display: block; color: inherit; }
.adbox__link:hover { text-decoration: none; background: var(--qf-surface-2); }
.adbox__image { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.adbox__body { display: grid; gap: .2rem; padding: .9rem 1rem 1rem; }
/* A creative from a network has a fixed size. It is never cropped, only
   scaled down when the screen is narrower than the picture. */
.adbox__title { font-size: 1rem; }
.adbox__text { font-size: .9rem; color: var(--qf-ink-soft); }
/* The word used to be laid over the top right corner of the box, which
   worked while a banner left a margin around itself. A 468 wide picture on a
   narrow screen fills the box edge to edge and covered it, so the one thing
   that has to be readable was the one thing hidden. It stands above the
   banner now, on a line of its own, where nothing can cover it. */
.adbox__label { display: block; padding: .45rem .7rem 0; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--qf-muted); }

.sharebox { margin: 1.8rem 0; padding: 1.3rem; background: var(--qf-surface-2); border-radius: var(--qf-radius); }
.sharebox__title { font-size: 1.1rem; margin-bottom: .2rem; }
.sharebox__list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .8rem 0 0; }
.sharebox__list .button { padding: .5rem 1rem; font-size: .88rem; background: #fff; color: var(--qf-ink); border-color: var(--qf-line); }
.sharebox__list .button:hover { background: var(--qf-ink); color: #fff; border-color: var(--qf-ink); }

/* Messaging ------------------------------------------------------------------ */
.msg { border-bottom: 1px solid var(--qf-line); padding: .9rem 0; }
.msg:last-child { border-bottom: 0; }
.msg--internal { background: rgba(249,192,4,.12); border-radius: var(--qf-radius-sm); padding: .9rem; border-bottom: 0; }
.msg__meta { font-size: .8rem; color: var(--qf-muted); margin: 0 0 .35rem; }
.msg__body { margin: 0; font-size: .96rem; }

/* Admin ---------------------------------------------------------------------- */
.adminpage { background: var(--qf-bg); }
.adminbar { background: var(--qf-ink); color: #fff; padding: .7rem 0; }
.adminbar__inner { max-width: 86rem; margin: 0 auto; padding: 0 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.adminbar .brand { color: #fff; }
.adminbar .clock__value { color: #fff; }
.adminbar__right { display: flex; align-items: center; gap: 1rem; }
.adminbar .usernav__link { color: rgba(255,255,255,.75); }
.adminbar .usernav__link:hover { color: #fff; }
.adminlayout { max-width: 86rem; margin: 0 auto; padding: 1.4rem 1.1rem 3.5rem; display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 58rem) { .adminlayout { grid-template-columns: 14rem 1fr; } }
.adminnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; overflow-x: auto; }
@media (min-width: 58rem) { .adminnav ul { display: block; overflow: visible; position: sticky; top: 1rem; } }
.adminnav a { display: block; padding: .55rem .85rem; border-radius: var(--qf-pill); color: var(--qf-ink-soft); font-size: .92rem; font-weight: 600; white-space: nowrap; }
.adminnav a:hover { background: var(--qf-surface-2); text-decoration: none; }
.adminnav a.is-active { background: var(--qf-primary); color: #fff; }
.admincontent { min-width: 0; }

/* Footer, errors, print ------------------------------------------------------ */
.footer { border-top: 1px solid var(--qf-line); background: var(--qf-surface); padding: 1.4rem 0; }
.footer__inner { display: flex; justify-content: space-between; gap: var(--qf-gap); flex-wrap: wrap; }
.footer__copy, .footer__meta { margin: 0; color: var(--qf-muted); font-size: .86rem; }

.errorpage { display: grid; place-items: center; min-height: 100vh; }
.error { text-align: center; padding: 2rem 1rem; }
.error__code { font-family: var(--qf-mono); font-size: 3.4rem; margin: 0; color: var(--qf-primary); font-weight: 700; }
.error__title { font-size: 1.6rem; }
.error__text { color: var(--qf-ink-soft); }

.printpage { background: #fff; }
.invoice { max-width: 46rem; margin: 2rem auto; }
.invoice__head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.invoice__title { font-size: 1.6rem; margin: 0; }
.invoice__meta { color: var(--qf-muted); margin: 0; }
.invoice__issuer { font-size: .88rem; color: var(--qf-ink-soft); text-align: right; }
.invoice__buyer h2 { font-size: 1rem; margin-bottom: .3rem; }
.invoice__foot { margin-top: 1.6rem; font-size: .86rem; color: var(--qf-muted); }
@media print { .invoice { margin: 0; } body { background: #fff; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ==========================================================================
   Playful layer — colour, movement, personality
   ========================================================================== */

body { background:
    radial-gradient(60% 40% at 100% 0%, rgba(249,192,4,.10) 0%, rgba(249,192,4,0) 60%),
    radial-gradient(50% 40% at 0% 12%, rgba(0,142,251,.10) 0%, rgba(0,142,251,0) 60%),
    var(--qf-bg);
    background-attachment: fixed;
}

/* Buttons with depth and a press feel */
.button {
    background: linear-gradient(135deg, var(--qf-primary) 0%, #00b35c 100%);
    border: 0; box-shadow: 0 6px 0 rgba(0,105,58,.55), 0 12px 24px rgba(0,135,68,.25);
    transform: translateY(0); transition: transform .12s ease, box-shadow .12s ease, filter .2s;
    font-weight: 800; letter-spacing: -.01em;
}
.button:hover { filter: brightness(1.06); background: linear-gradient(135deg, var(--qf-primary) 0%, #00b35c 100%); color: #fff; }
.button:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,105,58,.55), 0 6px 12px rgba(0,135,68,.2); }
.button--ghost {
    background: #fff; color: var(--qf-ink); border: 2px solid var(--qf-ink);
    box-shadow: 0 5px 0 var(--qf-ink);
}
.button--ghost:hover { background: var(--qf-accent); color: var(--qf-ink); }
.button--danger { background: linear-gradient(135deg, var(--qf-bad) 0%, #f05252 100%); box-shadow: 0 6px 0 #9b1c1c, 0 12px 24px rgba(220,38,38,.25); }
.button--danger:hover { color: #fff; }

/* Hero: bright, alive, with floating shapes */
.hero--landing {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #00a352 0%, #008744 45%, #007cc7 100%);
    padding: 4.5rem 1.4rem 4rem;
    border-radius: 0 0 40px 40px;
}
.hero--landing::before, .hero--landing::after {
    content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.hero--landing::before {
    width: 22rem; height: 22rem; right: -6rem; top: -8rem;
    background: radial-gradient(circle, rgba(249,192,4,.55) 0%, rgba(249,192,4,0) 70%);
    animation: qf-float 9s ease-in-out infinite;
}
.hero--landing::after {
    width: 18rem; height: 18rem; left: -7rem; bottom: -8rem;
    background: radial-gradient(circle, rgba(255,107,74,.45) 0%, rgba(255,107,74,0) 70%);
    animation: qf-float 11s ease-in-out infinite reverse;
}
.hero--landing > * { position: relative; z-index: 1; }
.hero--landing .hero__eyebrow {
    background: var(--qf-accent); color: var(--qf-ink); font-weight: 800;
    box-shadow: 0 4px 0 rgba(0,0,0,.15);
}
.hero--landing .hero__title { text-shadow: 0 6px 24px rgba(0,0,0,.18); }
.hero--landing .hero__lead { color: rgba(255,255,255,.9); font-weight: 500; }
.hero--landing .button { background: var(--qf-accent); color: var(--qf-ink); box-shadow: 0 6px 0 #c99a00, 0 14px 28px rgba(0,0,0,.2); }
.hero--landing .button:hover { background: #fff; }
.hero--landing .button--ghost { background: transparent; color: #fff; border-color: #fff; box-shadow: 0 5px 0 rgba(255,255,255,.35); }
.hero--landing .button--ghost:hover { background: #fff; color: var(--qf-ink); }
.hero--landing .hero__trust { color: rgba(255,255,255,.75); }

@keyframes qf-float {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(0, 2rem, 0) scale(1.08); }
}
@keyframes qf-pop {
    0%   { transform: scale(.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Benefit cards get their own colour */
.benefit { border: 0; border-top: 6px solid var(--qf-primary); animation: qf-pop .4s ease both; }
.benefit:nth-child(2) { border-top-color: var(--qf-accent); animation-delay: .08s; }
.benefit:nth-child(3) { border-top-color: var(--qf-teal); animation-delay: .16s; }
.benefit:hover { transform: translateY(-6px) rotate(-.5deg); }
.benefit:nth-child(2) .benefit__mark { background: var(--qf-teal); color: #fff; }
.benefit:nth-child(3) .benefit__mark { background: var(--qf-money); color: var(--qf-money-ink); }
.benefit__mark { width: 2.6rem; height: 2.6rem; font-size: .85rem; box-shadow: 0 4px 0 rgba(0,0,0,.12); }

/* Steps as colourful chips */
.steps__list li { background: #fff; border: 2px dashed var(--qf-line); transition: border-color .25s, transform .25s; }
.steps__list li:hover { border-color: var(--qf-primary); transform: translateY(-3px); }
.steps__list strong { margin-top: .4rem; }

/* CTA band */
.ctaband {
    background: linear-gradient(120deg, var(--qf-violet) 0%, var(--qf-teal) 100%);
    box-shadow: 0 18px 40px rgba(124,58,237,.28);
}
.ctaband .button { background: var(--qf-accent); color: var(--qf-ink); box-shadow: 0 6px 0 #c99a00; }
.ctaband .button:hover { background: #fff; }

/* Content cards with a colour stripe that rotates through the palette */
.cards .card { border: 0; border-left: 6px solid var(--qf-primary); }
.cards .card:nth-child(3n+2) { border-left-color: var(--qf-teal); }
.cards .card:nth-child(3n+3) { border-left-color: var(--qf-money); }
.cards .card:hover { transform: translateY(-5px) rotate(.4deg); }

/* Stats as colourful tiles */
.stat { border: 0; color: #fff; background: linear-gradient(135deg, var(--qf-primary) 0%, #00b35c 100%); box-shadow: 0 10px 24px rgba(0,135,68,.22); }
.statgrid:not(.statgrid--compact) .stat:nth-child(2) { background: linear-gradient(135deg, var(--qf-teal) 0%, #0ea5e9 100%); box-shadow: 0 10px 24px rgba(6,182,212,.22); }
.statgrid:not(.statgrid--compact) .stat:nth-child(3) { background: linear-gradient(135deg, var(--qf-accent) 0%, #ffdb4d 100%); color: var(--qf-ink); box-shadow: 0 10px 24px rgba(249,192,4,.28); }
.statgrid:not(.statgrid--compact) .stat:nth-child(4) { background: linear-gradient(135deg, var(--qf-violet) 0%, #a855f7 100%); box-shadow: 0 10px 24px rgba(124,58,237,.22); }
.statgrid:not(.statgrid--compact) .stat:nth-child(5) { background: linear-gradient(135deg, var(--qf-money) 0%, #2f88e0 100%); box-shadow: 0 10px 24px rgba(11,107,203,.22); }
.statgrid:not(.statgrid--compact) .stat:nth-child(6) { background: linear-gradient(135deg, var(--qf-ink-soft) 0%, #4b5563 100%); }
.stat__value { font-size: 1.9rem; }
.stat__label { color: rgba(255,255,255,.85); }
.statgrid:not(.statgrid--compact) .stat:nth-child(3) .stat__label { color: rgba(15,18,25,.7); }

/* Answers as big lettered tiles */
.question { counter-reset: answer; }
.answeroption {
    display: flex; align-items: center; gap: .75rem;
    padding: .7rem .9rem; border-radius: 14px; border-width: 2px;
    counter-increment: answer; font-weight: 600; background: #fff;
}
.answeroption::before {
    content: counter(answer, upper-alpha);
    flex: 0 0 auto;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--qf-surface-2); color: var(--qf-ink-soft);
    display: grid; place-items: center; font-weight: 800; font-size: .92rem;
    transition: background .2s, color .2s;
}
.answeroption input { position: absolute; left: -9999px; }
.answeroption:hover { border-color: var(--qf-primary); transform: translateX(3px); }
.answeroption:has(input:checked) { border-color: var(--qf-primary); background: rgba(0,135,68,.08); }
.answeroption:has(input:checked)::before { background: var(--qf-primary); color: #fff; }
.answeroption:has(input:focus-visible) { outline: 3px solid var(--qf-primary); outline-offset: 2px; }

/* Play screen with more energy */
.playhead { background: linear-gradient(120deg, var(--qf-ink) 0%, #1d2438 100%); border-radius: 0 0 22px 22px; }
.playhead__timer strong { color: var(--qf-accent); }
.playhead--urgent { background: linear-gradient(120deg, var(--qf-bad) 0%, #f05252 100%); animation: qf-pulse 1s ease-in-out infinite; }
@keyframes qf-pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
.question__text { font-size: 1.35rem; font-weight: 800; }

/* Plan cards */
.planprice { color: var(--qf-primary); font-size: 2.3rem; }
.panel--highlight { border: 0; box-shadow: 0 0 0 3px var(--qf-accent), var(--qf-shadow); }

/* Pills and badges pop a little more */
.pill { padding: .25rem .8rem; font-weight: 800; }
.hero__eyebrow { box-shadow: 0 4px 0 rgba(0,135,68,.15); }

/* Sharing */
.sharebox { background: linear-gradient(120deg, rgba(249,192,4,.16) 0%, rgba(6,182,212,.14) 100%); border: 0; }

/* Brand mark with a wink */
.brand__mark { box-shadow: 0 4px 0 rgba(0,105,58,.5); transition: transform .25s; }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.05); }

@media (prefers-reduced-motion: reduce) {
    .hero--landing::before, .hero--landing::after, .playhead--urgent, .benefit { animation: none !important; }
}

/* ==========================================================================
   Illustrated layer
   ========================================================================== */

.hero--landing { padding-bottom: 0; }
.herogrid { display: grid; gap: 1.5rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 62rem) { .herogrid { grid-template-columns: 1.05fr .95fr; } }
.herogrid__art { position: relative; justify-self: center; }
.herogrid__art img { display: block; width: 100%; max-width: 30rem; filter: drop-shadow(0 30px 50px rgba(0,0,0,.28)); animation: qf-hover 6s ease-in-out infinite; }
@keyframes qf-hover { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.herogrid__copy { padding-bottom: 3rem; }

.featurerow { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 2.6rem; }
@media (min-width: 60rem) { .featurerow { grid-template-columns: repeat(4, 1fr); } }
.feature {
    background: var(--qf-surface); border-radius: var(--qf-radius); padding: 1.4rem 1.1rem;
    text-align: center; box-shadow: var(--qf-shadow); transition: transform .25s, box-shadow .25s;
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--qf-shadow-lg); }
.feature img { width: 68px; height: 68px; margin-bottom: .7rem; }
.feature__title { font-size: 1rem; margin: 0 0 .25rem; }
.feature__text { font-size: .88rem; color: var(--qf-ink-soft); margin: 0; }

.steps__list li { padding: 1.1rem; text-align: center; }
.steps__illus { width: 84px; height: 84px; object-fit: contain; margin: 0 auto .4rem; display: block; }

.authshell { position: relative; }
.authillus { display: none; }
@media (min-width: 64rem) {
    .authshell { max-width: 62rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
    .authshell > .authbrand { grid-column: 1 / -1; }
    .authillus { display: block; }
    .authillus img { width: 100%; filter: drop-shadow(0 24px 40px rgba(0,0,0,.3)); }
}

.leaderhead { display: flex; align-items: center; gap: .8rem; }
.leaderhead img { width: 42px; height: 50px; object-fit: contain; }

.emptybox { text-align: center; padding: 2rem 1rem; }
.emptybox img { width: 220px; max-width: 70%; margin-bottom: 1rem; }

/* ==========================================================================
   Responsive polish — small screens first
   ========================================================================== */

/* Header: nothing may push the layout wider than the screen */
.masthead__inner { flex-wrap: nowrap; gap: .7rem; }
.masthead__tools { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: .7rem; }
.usernav { flex: 1 1 auto; min-width: 0; justify-content: flex-end; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.usernav::-webkit-scrollbar { display: none; }
.usernav > * { flex: 0 0 auto; }

@media (max-width: 47.99rem) {
    .masthead { padding: .55rem 0; }
    .masthead__inner { flex-wrap: wrap; }
    .brand__name { font-size: .98rem; }
    .langswitch { order: 3; }
    .langswitch select { padding: .3rem .6rem; font-size: .8rem; }
    .usernav { order: 2; width: 100%; justify-content: flex-start; gap: 1rem; padding-top: .2rem; }
    .usernav__cta { padding: .42rem .9rem; font-size: .84rem; }
    .usernav__link { font-size: .88rem; }
}

/* Hero on phones: copy first, artwork below, no wasted height */
@media (max-width: 61.99rem) {
    .hero--landing {
        margin: -2rem -1.1rem 2rem;
        padding: 2.4rem 1.1rem 0;
        border-radius: 0 0 28px 28px;
    }
    .herogrid { gap: .5rem; }
    .herogrid__copy { padding-bottom: 1.4rem; }
    .herogrid__art img { max-width: 20rem; margin: 0 auto; }
    .hero--landing::before { width: 14rem; height: 14rem; right: -4rem; top: -5rem; }
    .hero--landing::after { width: 12rem; height: 12rem; left: -5rem; bottom: -5rem; }
    .hero__actions .button { flex: 1 1 12rem; }
}
@media (max-width: 30rem) {
    .hero--landing .hero__title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
    .hero__lead { font-size: 1rem; }
    .herogrid__art img { max-width: 15rem; }
    .hero__actions { gap: .55rem; }
    .button--lg { padding: .8rem 1.2rem; font-size: .95rem; }
}

/* Feature tiles: two per row on phones, one on very narrow screens */
@media (max-width: 26rem) {
    .featurerow { grid-template-columns: 1fr; }
    .feature { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 1rem; }
    .feature img { width: 52px; height: 52px; margin: 0; flex: 0 0 auto; }
}

/* Steps: illustration left, number right, text between them */
@media (max-width: 59.99rem) {
    .steps__list li {
        display: grid;
        grid-template-columns: 5.2rem 1fr;
        align-items: center;
        gap: .2rem .9rem;
        padding: .9rem 1rem;
        min-height: 5.6rem;
        text-align: left;
    }
    .steps__illus {
        position: static; transform: none;
        grid-column: 1; grid-row: 1 / span 2;
        width: 5.2rem; height: 5.2rem; justify-self: center;
    }
    .steps__list strong { grid-column: 2; grid-row: 1; margin: 0; align-self: end; font-size: 1rem; }
    .steps__list span { grid-column: 2; grid-row: 2; align-self: start; font-size: .88rem; }
    }

@media (max-width: 26rem) {
    .steps__list li { grid-template-columns: 4rem 1fr; gap: .15rem .7rem; padding: .8rem .8rem; }
    .steps__illus { width: 4rem; height: 4rem; }
    .steps__list strong { font-size: .95rem; }
    .steps__list span { font-size: .84rem; }
}

/* Panels and cards get less padding where space is tight */
@media (max-width: 34rem) {
    main.shell { padding-top: 1.4rem; }
    .panel { padding: 1.1rem; border-radius: 16px; }
    .card { padding: 1.1rem; }
    .statgrid { gap: .6rem; }
    .stat { padding: .85rem; }
    .stat__value { font-size: 1.45rem; }
    .page-head__title { font-size: 1.5rem; }
    .section-title { font-size: 1.15rem; }
    .ctaband { padding: 1.4rem; }
    .ctaband__title { font-size: 1.25rem; }
    .sharebox { padding: 1rem; }
    .sharebox__list .button { flex: 1 1 8rem; }
}

/* Play screen: thumb friendly */
@media (max-width: 34rem) {
    .playhead { margin: 0 -1.1rem 1rem; padding: .7rem 1.1rem; border-radius: 0 0 18px 18px; }
    /* No cap at sixty per cent: that squeezed a title of five words into a
       column two words wide. The bar wraps instead, so the title runs its
       full width and the clock moves to the line below. */
    .playhead__title { font-size: .95rem; }
    .playhead__left { flex: 1 1 100%; }
    .playhead__timer { flex: 0 0 auto; }
    .playhead__timer strong { font-size: 1.2rem; }
    .question__text { font-size: 1.15rem; }
    .answeroption { padding: .7rem .8rem; }
    .answeroption::before { width: 1.9rem; height: 1.9rem; }
}

/* Admin on phones */
@media (max-width: 57.99rem) {
    .adminbar__inner { gap: .6rem; }
    .adminnav ul { padding-bottom: .3rem; }
    .adminnav a { padding: .45rem .8rem; font-size: .88rem; }
    .adminlayout { padding-top: 1rem; }
}

/* Forms: inline rows must not overflow */
@media (max-width: 34rem) {
    .form--inline { gap: .5rem; }
    .form--inline input, .form--inline select, .filterbar input, .filterbar select { width: 100%; min-width: 0; }
    .form--inline .button { width: 100%; }
    .captcha { flex-wrap: wrap; }
}

/* Nothing may ever break out of the viewport */
img, video, table, pre, code { max-width: 100%; }
.key { max-width: 100%; overflow-wrap: anywhere; }
body { overflow-x: hidden; }

/* Hero artwork: keep the original proportions, move calmly ------------------- */
.herogrid__art { display: flex; justify-content: center; align-items: center; width: 100%; }
.herogrid__art img {
    width: auto;
    max-width: min(100%, 30rem);
    height: auto;
    max-height: 30rem;
    aspect-ratio: 1052 / 884;
    object-fit: contain;
    animation: qf-hover 11s ease-in-out infinite;
    will-change: transform;
}
@keyframes qf-hover {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
@media (max-width: 61.99rem) {
    .herogrid__art img { max-width: min(88%, 22rem); max-height: 22rem; }
}
@media (max-width: 30rem) {
    .herogrid__art img { max-width: min(82%, 16rem); max-height: 16rem; }
}
@media (prefers-reduced-motion: reduce) {
    .herogrid__art img { animation: none; }
}

/* Payment details ----------------------------------------------------------- */
.bankbox {
    background: var(--qf-surface-2); border-radius: var(--qf-radius-sm); padding: 1rem;
    font-family: var(--qf-mono); font-size: .88rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere;
}
select[multiple] { min-height: 12rem; }

/* Admin navigation with categories -------------------------------------------- */
.adminnav { display: grid; gap: .3rem; align-content: start; }
@media (min-width: 58rem) { .adminnav { position: sticky; top: 1rem; } }
.adminnav__group { background: var(--qf-surface); border: 1px solid var(--qf-line); border-radius: var(--qf-radius-sm); overflow: hidden; }
.adminnav__summary {
    cursor: pointer; list-style: none; padding: .65rem .9rem;
    font-weight: 800; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--qf-ink-soft); display: flex; align-items: center; justify-content: space-between;
}
.adminnav__summary::-webkit-details-marker { display: none; }
.adminnav__summary::after { content: "+"; font-weight: 700; color: var(--qf-muted); }
.adminnav__group[open] .adminnav__summary { color: var(--qf-ink); border-bottom: 1px solid var(--qf-line); }
.adminnav__group[open] .adminnav__summary::after { content: "–"; }
.adminnav__group ul { list-style: none; margin: 0; padding: .35rem; display: grid; gap: .15rem; overflow: visible; }
.adminnav__group a { display: block; padding: .5rem .75rem; border-radius: var(--qf-radius-sm); font-size: .9rem; font-weight: 600; color: var(--qf-ink-soft); white-space: normal; }
.adminnav__group a:hover { background: var(--qf-surface-2); }
.adminnav__group a.is-active { background: var(--qf-primary); color: #fff; }

/* Dashboard blocks */
.adminboard { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 1.4rem; }
@media (min-width: 60rem) { .adminboard { grid-template-columns: 1fr 1fr; } }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.todo li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem .8rem; background: var(--qf-surface-2); border-radius: var(--qf-radius-sm); }
.todo a { font-weight: 700; }
.todo__count { font-family: var(--qf-mono); font-weight: 700; background: var(--qf-primary); color: #fff; border-radius: var(--qf-pill); padding: .1rem .6rem; font-size: .85rem; }
.todo__count--zero { background: var(--qf-line); color: var(--qf-muted); }
.warn { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.warn li { padding: .7rem .9rem; border-radius: var(--qf-radius-sm); background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.25); font-size: .92rem; }
.warn li.ok { background: rgba(0,135,68,.08); border-color: rgba(0,135,68,.25); }

/* Translation editor ---------------------------------------------------------- */
.translist { display: grid; gap: .6rem; margin-bottom: 1.2rem; }
.transrow { background: var(--qf-surface); border: 1px solid var(--qf-line); border-radius: var(--qf-radius-sm); padding: .8rem 1rem; }
.transrow__head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .5rem; flex-wrap: wrap; }
.transrow__key { font-family: var(--qf-mono); font-size: .85rem; font-weight: 700; color: var(--qf-ink); }
.transrow__fields { display: grid; gap: .4rem; }
.transfield { display: grid; grid-template-columns: 3rem 1fr 5.5rem; gap: .5rem; align-items: center; }
.transfield__lang { font-family: var(--qf-mono); font-size: .75rem; font-weight: 700; color: var(--qf-muted); }
.transfield input {
    width: 100%; padding: .5rem .7rem; font: inherit; font-size: .92rem;
    border: 1px solid var(--qf-line); border-radius: var(--qf-radius-sm); background: #fff;
}
.transfield input.is-empty { background: rgba(249,192,4,.14); border-color: rgba(249,192,4,.5); }
.transfield input:focus { border-color: var(--qf-primary); }
.transfield__state { font-size: .75rem; font-weight: 700; color: var(--qf-muted); }
.transfield__state.is-saved { color: var(--qf-good); }
.transfield__state.is-failed { color: var(--qf-bad); }
@media (max-width: 40rem) {
    .transfield { grid-template-columns: 2.4rem 1fr; }
    .transfield__state { grid-column: 2; }
}

/* Language coverage badges ----------------------------------------------------- */
.langflags { white-space: nowrap; }
.langflag {
    display: inline-block; margin-right: .2rem; padding: .1rem .4rem;
    border-radius: var(--qf-pill); font-family: var(--qf-mono); font-size: .68rem; font-weight: 700;
    background: var(--qf-line); color: var(--qf-muted);
}
.langflag.is-on { background: rgba(0,135,68,.15); color: var(--qf-primary-dk); }

.translations-inline > summary { cursor: pointer; font-size: .95rem; padding: .2rem 0 .6rem; }
.translations-inline fieldset { border: 1px solid var(--qf-line); border-radius: var(--qf-radius-sm); padding: 1rem; margin-bottom: .8rem; }
.translations-inline legend { font-weight: 800; font-size: .85rem; padding: 0 .4rem; }

/* Member area with sidebar ----------------------------------------------------- */
.memberlayout { display: grid; gap: 1.4rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) { .memberlayout { grid-template-columns: 15rem 1fr; } }
.membernav { display: grid; gap: .3rem; align-content: start; }
@media (min-width: 62rem) { .membernav { position: sticky; top: 5rem; } }
.membercontent { min-width: 0; }
.shell--member { max-width: 84rem; }

/* Promo blocks on the member overview */
.promo { margin-bottom: 2rem; }
.promo__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; }
.promo__head h2 { margin: 0; font-size: 1.25rem; }
.dailycard {
    display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--qf-accent) 0%, #ffdb4d 100%);
    color: var(--qf-ink); border-radius: var(--qf-radius); padding: 1.4rem; margin-bottom: 1.6rem;
}
.dailycard h2 { margin: 0 0 .2rem; font-size: 1.3rem; }
.dailycard p { margin: 0; font-size: .95rem; }
.dailycard .button { background: var(--qf-ink); border-color: var(--qf-ink); color: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.25); }
.dailycard .button:hover { background: #fff; color: var(--qf-ink); }
.premioffer {
    display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--qf-violet) 0%, var(--qf-teal) 100%);
    color: #fff; border-radius: var(--qf-radius); padding: 1.5rem; margin-bottom: 1.8rem;
}
.premioffer h2 { margin: 0 0 .2rem; font-size: 1.25rem; }
.premioffer p { margin: 0; color: rgba(255,255,255,.85); font-size: .95rem; max-width: 46ch; }
.premioffer .button { background: var(--qf-accent); color: var(--qf-ink); border-color: var(--qf-accent); box-shadow: 0 5px 0 #c99a00; }

/* ==========================================================================
   Compact layer — fit more on one screen
   ========================================================================== */

/* Header: brand, navigation and tools in a single row */
.masthead { padding: .45rem 0; }
.masthead__inner { flex-wrap: nowrap; gap: .8rem; align-items: center; }
.masthead__inner .usernav { flex: 1 1 auto; justify-content: flex-start; gap: 1.1rem; }
.masthead__tools { flex: 0 0 auto; gap: .6rem; }
.brand__mark { width: 1.95rem; height: 1.95rem; font-size: .72rem; }
.brand__name { font-size: .96rem; }
.usernav__link { font-size: .88rem; }
.usernav__cta { padding: .38rem .95rem; font-size: .85rem; }
.usernav__user { font-size: .88rem; }
.usernav__avatar { width: 26px; height: 26px; }
.langswitch select { padding: .28rem .5rem; font-size: .78rem; }

@media (max-width: 61.99rem) {
    .masthead__inner { flex-wrap: wrap; row-gap: .35rem; }
    .brand { order: 1; }
    .masthead__tools { order: 2; margin-left: auto; }
    .masthead__inner .usernav { order: 3; width: 100%; gap: 1.2rem; padding-bottom: .1rem; }
    .usernav__name { display: none; }
}
@media (max-width: 30rem) {
    .masthead__inner .usernav { gap: .9rem; }
    .usernav__link { font-size: .84rem; }
    .brand__name { font-size: .9rem; }
}

/* Statistics tiles: half the height they had */
.statgrid { gap: .6rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.2rem; }
@media (min-width: 40rem) { .statgrid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 78rem) { .statgrid { grid-template-columns: repeat(8, 1fr); } }
.stat { padding: .7rem .8rem; border-radius: 14px; box-shadow: 0 4px 12px rgba(15,18,25,.10); }
.stat__value { font-size: 1.15rem; line-height: 1.2; letter-spacing: -.02em; }
.stat__label { font-size: .7rem; line-height: 1.25; margin-top: .1rem; }
@media (min-width: 78rem) { .stat__value { font-size: 1.25rem; } }

/* Page headings and spacing */
main.shell { padding-top: 1.2rem; padding-bottom: 2.2rem; }
.page-head { margin-bottom: 1rem; }
.page-head__title { font-size: clamp(1.35rem, 3vw, 1.85rem); }
.page-head__meta { font-size: .88rem; }
.section-title { font-size: 1.1rem; margin: 1.3rem 0 .6rem; }
.panel { padding: 1.1rem; margin-bottom: .9rem; }
.card { padding: 1rem; }
.card__title { font-size: 1.02rem; }
.card__text { font-size: .9rem; margin-bottom: .4rem; }
.cards { gap: .8rem; }

/* Landing hero: shorter, calmer type */
.hero--landing { padding: 2.4rem 1.4rem 0; border-radius: 0 0 26px 26px; margin-bottom: 1.8rem; }
.hero--landing .hero__title { font-size: clamp(1.9rem, 5vw, 3rem); }
.hero--landing .hero__lead { font-size: 1rem; }
.hero__eyebrow { font-size: .74rem; padding: .22rem .7rem; margin-bottom: .6rem; }
.hero__actions { margin-top: 1rem; }
.hero__trust { font-size: .8rem; margin-top: .7rem; }
.button--lg { padding: .7rem 1.4rem; font-size: .95rem; }
.herogrid { gap: .8rem; }
.herogrid__copy { padding-bottom: 1.6rem; }
.herogrid__art img { max-height: 20rem; }
@media (min-width: 62rem) { .herogrid__art img { max-height: 22rem; } }
@media (max-width: 61.99rem) {
    .hero--landing { padding: 1.8rem 1.1rem 0; margin: -1.2rem -1.1rem 1.4rem; }
    .herogrid__art img { max-height: 13rem; }
    .herogrid__copy { padding-bottom: .8rem; }
}

/* Promo blocks and bands */
.dailycard, .premioffer, .ctaband { padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; }
.dailycard h2, .premioffer h2 { font-size: 1.08rem; }
.dailycard p, .premioffer p { font-size: .88rem; }
.ctaband__title { font-size: 1.2rem; }
.ctaband__text { font-size: .9rem; }
.promo { margin-bottom: 1.4rem; }
.promo__head h2 { font-size: 1.08rem; }
.benefit { padding: 1.1rem; }
.benefit__title { font-size: 1.05rem; }
.benefit__text { font-size: .89rem; }
.benefit__mark { width: 2.1rem; height: 2.1rem; margin-bottom: .5rem; }
.feature { padding: 1rem .9rem; }
.feature img { width: 54px; height: 54px; margin-bottom: .5rem; }
.feature__title { font-size: .95rem; }
.feature__text { font-size: .84rem; }
.benefits, .featurerow { margin-bottom: 1.6rem; gap: .8rem; }
.steps { margin-bottom: 1.6rem; }

/* Member sidebar a touch tighter */
.memberlayout { gap: 1rem; }
@media (min-width: 62rem) { .memberlayout { grid-template-columns: 13.5rem 1fr; } }
.adminnav__summary { padding: .5rem .8rem; font-size: .76rem; }
.adminnav__group a { padding: .42rem .7rem; font-size: .86rem; }

/* Tables and forms */
.table { font-size: .88rem; }
.table th, .table td { padding: .6rem .75rem; }
.field { margin-bottom: .85rem; }
.field input, .field select, .field textarea { padding: .6rem .8rem; }
.footer { padding: 1rem 0; }

/* Hashtags -------------------------------------------------------------------- */
.tagcloud { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; }
.tagchip {
    border: 1px solid var(--qf-line); background: var(--qf-surface-2); color: var(--qf-ink-soft);
    border-radius: var(--qf-pill); padding: .2rem .65rem; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.tagchip:hover { border-color: var(--qf-primary); color: var(--qf-primary-dk); }

/* Prize cards and banners ------------------------------------------------------ */
.prizerow { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-bottom: 1rem; }
.prizecard {
    position: relative; text-align: center; padding: 1rem .8rem;
    background: var(--qf-surface-2); border-radius: var(--qf-radius-sm);
}
.prizecard__rank {
    position: absolute; top: .4rem; left: .5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--qf-accent); color: var(--qf-ink); display: grid; place-items: center;
    font-size: .75rem; font-weight: 800;
}
.prizecard__image { width: 100%; max-height: 6rem; object-fit: contain; margin-bottom: .4rem; }
.prizecard__value { display: block; font-size: 1rem; font-weight: 800; }
.prizecard__note { display: block; font-size: .8rem; color: var(--qf-muted); margin-top: .2rem; }
.cardbanner { width: 100%; height: 7rem; object-fit: cover; border-radius: var(--qf-radius-sm); margin-bottom: .6rem; }
.rewardsum { font-size: .95rem; margin: .6rem 0; }

/* Clock and sign in on every screen -------------------------------------------- */
.clock { font-size: .68rem; color: var(--qf-muted); }

.adminbar .clock__label { color: rgba(255,255,255,.55); }
.adminbar .clock__value { color: #fff; }

.usernav__ctaicon { display: none; }
@media (max-width: 33rem) {
    .usernav__cta { padding: .42rem .55rem; }
    .usernav__ctatext { display: none; }
    .usernav__ctaicon { display: block; }
}
@media (max-width: 26rem) {
    .clock { font-size: .62rem; }
}

/* Badges ----------------------------------------------------------------------- */
.badgegrid { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.6rem; }
@media (min-width: 40rem) { .badgegrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62rem) { .badgegrid { grid-template-columns: repeat(4, 1fr); } }
.badgecard {
    background: var(--qf-surface); border: 1px solid var(--qf-line); border-radius: var(--qf-radius);
    padding: 1rem .8rem; text-align: center; box-shadow: var(--qf-shadow);
}
.badgecard__image { width: 72px; height: 72px; filter: grayscale(1); opacity: .35; transition: filter .3s, opacity .3s, transform .3s; }
.badgecard.is-earned .badgecard__image { filter: none; opacity: 1; }
.badgecard.is-earned:hover .badgecard__image { transform: scale(1.06) rotate(-4deg); }
.badgecard__name { font-size: .95rem; margin: .5rem 0 .2rem; }
.badgecard__text { font-size: .8rem; color: var(--qf-muted); margin: 0 0 .4rem; }
.badgecard__state { font-size: .8rem; margin: .4rem 0 0; color: var(--qf-ink-soft); }
.progress { height: .45rem; background: var(--qf-line); border-radius: var(--qf-pill); overflow: hidden; margin-top: .4rem; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--qf-primary), #00b35c); }

/* Registration form: two columns, compact ---------------------------------------- */
.authshell:has(.regform) { max-width: 52rem; }
.regform { display: grid; gap: 0 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .regform { grid-template-columns: 1fr 1fr; } }
.regform .field-row { display: contents; }
.authcard__lead--small { font-size: .85rem; color: var(--qf-muted); margin-bottom: 1rem; }
.req { color: var(--qf-bad); text-decoration: none; margin-left: .15rem; font-weight: 700; border: 0; }
.avatargrid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .4rem; }
.avatargrid__item img { border-width: 2px; }
.authcard:has(.regform) { padding: 1.4rem; }
@media (min-width: 64rem) {
    .authshell:has(.regform) { grid-template-columns: 1fr; max-width: 52rem; }
    .authshell:has(.regform) .authillus { display: none; }
}

.panel--locked { border-color: var(--qf-bad); box-shadow: 0 0 0 2px rgba(220,38,38,.12); }
.button[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ==========================================================================
   Detail pages for quiz and tournament, mobile first
   ========================================================================== */

.detail { margin-bottom: 1.4rem; }
.detail__banner {
    width: 100%; max-height: 15rem; object-fit: cover;
    border-radius: var(--qf-radius); margin-bottom: 1rem; display: block;
}
.detail__head { margin-bottom: 1rem; }
.detail__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .5rem; }
/* Small enough that a long title such as a question in full stays on one
   line on a normal screen, and still the largest text on the page. */
.detail__title { font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 900; line-height: 1.25; margin: 0 0 .2rem; text-wrap: balance; }
/* The lead line, quiet under the title. */
.detail__lead { font-size: .95rem; color: var(--qf-ink-soft); margin: 0 0 .5rem; line-height: 1.35; }
/* The description under the title. */
.detail__text { font-size: .92rem; color: var(--qf-muted); margin: .35rem 0 0; line-height: 1.45; max-width: 62ch; }
/* Only where a lead line stands above it does the description need parting
   from it. Without a lead the rule would separate the text from the title,
   which is the opposite of belonging together. */
.detail__lead + .detail__text { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--qf-line); }
.detail__slogan { color: var(--qf-ink-soft); font-size: 1rem; margin: 0; }
.pill--accent { background: var(--qf-accent); color: var(--qf-ink); }

.factrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; margin-bottom: .9rem; }
@media (min-width: 40rem) { .factrow { grid-template-columns: repeat(4, 1fr); } }
.fact {
    background: var(--qf-surface); border: 1px solid var(--qf-line);
    border-radius: 14px; padding: .7rem .8rem; text-align: center;
}
.fact__value { display: block; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.fact__label { display: block; font-size: .7rem; color: var(--qf-muted); font-weight: 600; }

.startbox {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    background: linear-gradient(120deg, var(--qf-ink) 0%, #1d2438 100%); color: #fff;
    border-radius: var(--qf-radius); padding: .9rem 1.1rem; margin-bottom: .9rem;
}
.startbox__label { font-size: .78rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; }
.startbox strong { font-family: var(--qf-mono); font-size: 1.35rem; color: var(--qf-accent); font-variant-numeric: tabular-nums; }
.startbox__date { font-size: .82rem; color: rgba(255,255,255,.65); margin-left: auto; }

.seatbar { height: .5rem; background: var(--qf-line); border-radius: var(--qf-pill); overflow: hidden; margin-bottom: .9rem; }
.seatbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--qf-primary), var(--qf-accent)); }

/* Play screen: progress and thumb friendly submit bar */
.playhead { position: relative; align-items: flex-start; padding-bottom: 1rem; }
.playhead__left { display: grid; gap: .1rem; }
.playhead__progress { margin: 0; font-size: .76rem; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; }
.playbar { position: absolute; left: 0; right: 0; bottom: 0; height: .3rem; background: rgba(255,255,255,.15); }
.playbar span { display: block; height: 100%; background: var(--qf-accent); transition: width .3s ease; }

.submitbar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border-top: 1px solid var(--qf-line);
    padding: .7rem 1.1rem; margin: 1rem -1.1rem 0;
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom));
}
.submitbar__state { font-family: var(--qf-mono); font-weight: 700; font-size: .9rem; color: var(--qf-ink-soft); }
.submitbar .button { flex: 1 1 auto; max-width: 18rem; }

@media (max-width: 34rem) {
    .detail__banner { max-height: 9rem; border-radius: 14px; }
    .startbox { padding: .8rem; }
    .startbox strong { font-size: 1.15rem; }
    .startbox__date { margin-left: 0; width: 100%; }
    .fact { padding: .6rem; }
    .fact__value { font-size: 1rem; }
    .question__text { font-size: 1.1rem; }
    .answeroption { font-size: .95rem; }
}

/* PWA: standalone window gets a little more room */
@media (display-mode: standalone) {
    .masthead { padding-top: max(.45rem, env(safe-area-inset-top)); }
    main.shell { padding-bottom: calc(2.2rem + env(safe-area-inset-bottom)); }
}

/* Question editor: base language and its translations ---------------------------- */
.field--sub { margin-bottom: .45rem; display: grid; grid-template-columns: 2.6rem 1fr; gap: .5rem; align-items: center; }
.field--sub > label { font-family: var(--qf-mono); font-size: .72rem; color: var(--qf-muted); margin: 0; font-weight: 700; }
.field--sub input { padding: .45rem .7rem; font-size: .9rem; }
.answerblock { border: 1px solid var(--qf-line); border-radius: var(--qf-radius-sm); padding: .9rem; margin-bottom: .7rem; }
.answerblock legend { font-weight: 800; font-size: .85rem; padding: 0 .4rem; }
.answerblock .field { margin-bottom: .5rem; }

/* Briefing before the clock starts ---------------------------------------------- */
.briefing__list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 .9rem; }
.briefing__list li {
    background: var(--qf-surface-2); border-radius: var(--qf-radius-sm);
    padding: .55rem .9rem; font-size: .88rem; color: var(--qf-ink-soft);
}
.briefing__list strong { font-size: 1.05rem; color: var(--qf-ink); }
.briefing__rule {
    border-left: 4px solid var(--qf-accent); background: rgba(249,192,4,.10);
    border-radius: 0 var(--qf-radius-sm) var(--qf-radius-sm) 0;
    padding: .7rem .9rem; margin: 0 0 .7rem; font-size: .93rem;
}

/* Social media tiles ------------------------------------------------------------ */
.socialgrid { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.2rem; }
@media (min-width: 62rem) { .socialgrid { grid-template-columns: repeat(4, 1fr); } }
.socialtile { margin: 0; background: var(--qf-surface); border: 1px solid var(--qf-line); border-radius: var(--qf-radius); padding: .6rem; }
.socialtile canvas { width: 100%; height: auto; border-radius: var(--qf-radius-sm); display: block; background: var(--qf-surface-2); }
.socialtile figcaption { margin-top: .5rem; text-align: center; }
.socialtile .button { width: 100%; padding: .45rem .7rem; font-size: .82rem; }

/* Legal pages ------------------------------------------------------------------- */
.legal { max-width: 48rem; margin: 0 auto 2rem; }
.legal__title { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 900; margin-bottom: 1rem; }
.legal__heading { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }
.legal p { font-size: .95rem; color: var(--qf-ink-soft); line-height: 1.75; }
.legal__list { padding-left: 1.2rem; font-size: .95rem; color: var(--qf-ink-soft); line-height: 1.7; }
.legal__list li { margin-bottom: .3rem; }
.legal__foot { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--qf-line); font-size: .85rem; color: var(--qf-muted); }
.footer__nav { display: flex; flex-wrap: wrap; gap: .8rem; width: 100%; margin-bottom: .6rem; }
.footer__nav a { font-size: .85rem; color: var(--qf-ink-soft); font-weight: 600; }

/* Installable app --------------------------------------------------------------- */
.updatebar {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--qf-ink); color: #fff; border-radius: var(--qf-radius);
    padding: .8rem 1rem; box-shadow: var(--qf-shadow-lg); font-size: .9rem;
    margin-bottom: env(safe-area-inset-bottom);
}
.updatebar .button { padding: .45rem 1rem; font-size: .85rem; }
@media (min-width: 40rem) { .updatebar { left: auto; right: 1.5rem; max-width: 26rem; } }
.footer__install { margin: 0 0 .6rem; padding: .45rem 1rem; font-size: .85rem; }

/* Cookie notice ----------------------------------------------------------------- */
.consent {
    position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 45;
    background: var(--qf-surface); border: 1px solid var(--qf-line); border-radius: var(--qf-radius);
    box-shadow: var(--qf-shadow-lg); padding: 1rem 1.1rem;
    margin-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 44rem) { .consent { left: auto; right: 1.5rem; max-width: 30rem; } }
.consent__text { font-size: .9rem; color: var(--qf-ink-soft); margin: 0 0 .7rem; }
.consent__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.consent__actions .button { flex: 1 1 9rem; padding: .55rem 1rem; font-size: .88rem; }

/* Header symmetry: brand mark and sign in share one shape --------------------- */
.usernav__cta {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--qf-pill);
}
@media (max-width: 47.99rem) {
    .masthead__tools { order: 2; margin-left: auto; align-items: center; gap: .5rem; }
    .langswitch { order: 1; }
    .usernav__cta, .usernav__user { order: 2; }
    .usernav__cta {
        width: 2.3rem; height: 2.3rem; padding: 0;
        background: var(--qf-primary); border: 0;
        box-shadow: 0 3px 0 rgba(0,105,58,.5);
    }
    .usernav__cta:hover { background: var(--qf-primary-dk); color: #fff; }
    .usernav__ctatext { display: none; }
    .usernav__ctaicon { display: block; width: 20px; height: 20px; }
    .brand__mark { width: 2.3rem; height: 2.3rem; font-size: .78rem; box-shadow: 0 3px 0 rgba(0,105,58,.5); }
    .usernav__avatar { width: 2.3rem; height: 2.3rem; border: 2px solid var(--qf-line); }
}

/* Hidden elements stay hidden even when a rule sets display ------------------- */
[hidden] { display: none !important; }

/* Compact confirmation buttons ------------------------------------------------- */
.button--sm { padding: .42rem 1rem; font-size: .84rem; box-shadow: 0 3px 0 rgba(0,105,58,.35); }
.button--sm:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,105,58,.35); }
.button--ghost.button--sm { box-shadow: none; }

.consent__actions .button { flex: 0 0 auto; padding: .42rem 1rem; font-size: .84rem; }
.consent { padding: .85rem 1rem; }
.consent__text { font-size: .85rem; margin-bottom: .6rem; }

.noticebar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0; }
.noticebar form { display: inline; margin: 0; }

/* Steps: keep the number badge round on narrow screens ------------------------ */
@media (max-width: 59.99rem) {
        .steps__list li:hover { transform: none; }
}
@media (max-width: 26rem) {
    }

/* Slim notice: one line, buttons on the right --------------------------------- */
.slimnotice {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: #fff8e6; border: 1px solid var(--qf-accent); border-left: 4px solid var(--qf-accent);
    border-radius: var(--qf-radius-sm); padding: .65rem .9rem; margin-bottom: 1rem;
}
.slimnotice__text { margin: 0; font-size: .88rem; color: var(--qf-ink-soft); display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.slimnotice__text strong { color: var(--qf-ink); font-size: .92rem; }
.slimnotice__actions { display: flex; align-items: center; gap: .8rem; }
.slimnotice__actions form { display: inline; margin: 0; }
.slimnotice__actions .linkish { font-size: .85rem; font-weight: 600; }
@media (max-width: 34rem) {
    .slimnotice { padding: .6rem .7rem; }
    .slimnotice__text { font-size: .83rem; }
    .slimnotice__actions { width: 100%; justify-content: space-between; }
}

/* Step navigation inside a run --------------------------------------------------- */
.stepnav {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: 1rem;
}
.stepnav__position { font-family: var(--qf-mono); font-size: .85rem; color: var(--qf-muted); font-variant-numeric: tabular-nums; }
.stepnav .button { min-width: 6.5rem; }
.stepnav .button[disabled] { visibility: hidden; }
.question[hidden] { display: none !important; }

/* Dashboard: compact, tappable stat tiles ------------------------------------- */
.statgrid--compact { gap: .55rem; margin-bottom: 1rem; }
.statgrid--compact .stat {
    padding: .65rem .7rem; min-height: 0; border-radius: 14px;
    text-decoration: none; display: block; transition: transform .15s, box-shadow .15s;
}
.statgrid--compact .stat:hover { transform: translateY(-2px); box-shadow: var(--qf-shadow); }
.statgrid--compact .stat__value { font-size: 1.15rem; line-height: 1.15; }
.statgrid--compact .stat__label { font-size: .68rem; line-height: 1.25; opacity: .92; }
@media (min-width: 48rem) { .statgrid--compact { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 75rem) { .statgrid--compact { grid-template-columns: repeat(8, 1fr); } }

/* Dashboard sections a little tighter so more fits on one screen */
.dailycard { padding: .9rem 1.1rem; margin-bottom: 1rem; }
.dailycard h2 { font-size: 1.05rem; margin: 0 0 .15rem; }
.dailycard p { font-size: .85rem; margin: 0; }
.promo { margin-bottom: 1.2rem; }
.promo__head { margin-bottom: .6rem; }
.promo__head h2 { font-size: 1.05rem; }
.promo .card { padding: .9rem; }
.promo .card__title { font-size: .98rem; }
.promo .card__text { font-size: .85rem; margin-bottom: .5rem; }
.promo .button--block { padding: .5rem 1rem; font-size: .88rem; }

/* Narrower member sidebar ------------------------------------------------------- */
@media (min-width: 62rem) {
    .memberlayout { grid-template-columns: 11.5rem 1fr; gap: 1.1rem; }
}
@media (min-width: 80rem) {
    .memberlayout { grid-template-columns: 12.5rem 1fr; }
}
.membernav .adminnav__summary { padding: .45rem .65rem; font-size: .7rem; letter-spacing: .04em; }
.membernav .adminnav__group a { padding: .38rem .65rem; font-size: .82rem; }

/* Rules of a quiz as four small boxes ------------------------------------------ */
.rulegrid { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-bottom: .9rem; }

/* One row of four boxes. The outer two carry a sentence and a date and need
   the room; the inner two a number and a word and need less. Written as a
   flexible row rather than fixed columns, so a quiz without a closing date
   still fills the line instead of leaving a gap. */
@media (min-width: 52rem) {
    .rulegrid { display: flex; flex-wrap: wrap; align-items: stretch; }
    /* Short boxes outside, long ones inside. Written as a flexible row rather
       than fixed columns, so a quiz without a closing date still fills the
       line instead of leaving a gap. */
    .rule--narrow { flex: 1 1 8.5rem; }
    .rule--wide { flex: 1.5 1 15rem; }
    /* The uplift line of a daily quiz belongs on its own row below. */
    .rule--uplift { flex: 1 1 100%; }
}
/* The date stays on one line, whatever the width of the window. */
.rule--wide .rule__value { white-space: nowrap; }
.rule {
    background: #fdf8ec; border: 1px solid #f0e3c4; border-radius: 12px;
    padding: .6rem .75rem; display: grid; gap: .1rem;
}
.rule__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--qf-muted); font-weight: 700; }
.rule__value { font-size: .88rem; color: var(--qf-ink); font-weight: 600; line-height: 1.3; }

/* Dashboard as a direct link above the groups ---------------------------------- */
.membernav__top {
    display: block; padding: .5rem .7rem; margin-bottom: .35rem;
    border-radius: var(--qf-radius-sm); font-size: .85rem; font-weight: 700;
    color: var(--qf-ink); background: var(--qf-surface); border: 1px solid var(--qf-line);
    text-decoration: none;
}
.membernav__top:hover { border-color: var(--qf-primary); color: var(--qf-primary); }
.membernav__top.is-active { background: var(--qf-primary); border-color: var(--qf-primary); color: #fff; }

/* Admin dashboard as a direct link above the groups ---------------------------- */
.adminnav__top {
    display: block; padding: .5rem .7rem; margin-bottom: .35rem;
    border-radius: var(--qf-radius-sm); font-size: .85rem; font-weight: 700;
    color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    text-decoration: none;
}
.adminnav__top:hover { background: rgba(255,255,255,.16); color: #fff; }
.adminnav__top.is-active { background: var(--qf-primary); border-color: var(--qf-primary); }

/* Clickable stat tiles ---------------------------------------------------------- */
a.stat { text-decoration: none; display: block; transition: transform .15s, box-shadow .15s; }
a.stat:hover { transform: translateY(-2px); box-shadow: var(--qf-shadow); }

/* One colour per area: quizzes yellow, tournaments green, money blue ------------ */
.statgrid .stat.stat--quiz { background: linear-gradient(140deg, var(--qf-quiz) 0%, #ffd54a 100%); color: var(--qf-quiz-ink); box-shadow: 0 8px 20px rgba(249,192,4,.24); }
.statgrid .stat.stat--tournament { background: linear-gradient(140deg, var(--qf-tourn) 0%, #00a352 100%); color: var(--qf-tourn-ink); box-shadow: 0 8px 20px rgba(0,135,68,.2); }
.statgrid .stat.stat--money { background: linear-gradient(140deg, var(--qf-money) 0%, #2f88e0 100%); color: var(--qf-money-ink); box-shadow: 0 8px 20px rgba(11,107,203,.22); }
.statgrid .stat.stat--quiz .stat__label { color: rgba(15,18,25,.72); }
.statgrid .stat.stat--money .stat__label,
.statgrid .stat.stat--tournament .stat__label { color: rgba(255,255,255,.85); }

.button--quiz { background: var(--qf-quiz); color: var(--qf-quiz-ink); box-shadow: 0 4px 0 var(--qf-quiz-dk); }
.button--quiz:hover { background: #ffd54a; color: var(--qf-quiz-ink); }
.button--tournament { background: var(--qf-tourn); color: var(--qf-tourn-ink); box-shadow: 0 4px 0 var(--qf-tourn-dk); }
.button--tournament:hover { background: #00a352; color: var(--qf-tourn-ink); }
.button--money { background: var(--qf-money); color: var(--qf-money-ink); box-shadow: 0 4px 0 var(--qf-money-dk); }
.button--money:hover { background: #2f88e0; color: var(--qf-money-ink); }

/* Daily quiz and premium offer side by side ------------------------------------- */
.dashduo { display: grid; gap: .8rem; grid-template-columns: 1fr; margin-bottom: 1.2rem; }
@media (min-width: 52rem) { .dashduo { grid-template-columns: 1fr 1fr; } }
.dashduo__card {
    border-radius: var(--qf-radius); padding: 1rem 1.1rem;
    display: flex; flex-direction: column; gap: .3rem;
}
.dashduo__card h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin: 0; opacity: .8; }
.dashduo__title { font-size: 1.05rem; font-weight: 800; margin: 0; }
.dashduo__text { font-size: .88rem; margin: 0 0 .6rem; }
.dashduo__card .button { align-self: flex-start; padding: .5rem 1.1rem; font-size: .9rem; }
.dashduo__card--quiz { background: linear-gradient(140deg, var(--qf-quiz) 0%, #ffd96b 100%); color: var(--qf-quiz-ink); }
.dashduo__card--tournament { background: linear-gradient(140deg, var(--qf-tourn) 0%, #00a352 100%); color: var(--qf-tourn-ink); }
.dashduo__card--tournament .button { background: var(--qf-ink); color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.dashduo__card--money { background: linear-gradient(140deg, var(--qf-money) 0%, #2f88e0 100%); color: var(--qf-money-ink); }
.dashduo__card--money .button { background: var(--qf-ink); color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.35); }

/* Dismissable messages ---------------------------------------------------------- */
.flash { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.flash__close {
    background: none; border: 0; font-size: 1.3rem; line-height: 1; cursor: pointer;
    color: inherit; opacity: .55; padding: 0 .1rem;
}
.flash__close:hover { opacity: 1; }
.flash.is-going { opacity: 0; transition: opacity .4s ease; }

/* Next tournaments inside the dashboard card ------------------------------------ */
.nextlist { list-style: none; padding: 0; margin: 0 0 .7rem; display: grid; gap: .45rem; }
.nextlist li { padding-bottom: .45rem; border-bottom: 1px solid rgba(255,255,255,.25); }
.nextlist li:last-child { border-bottom: 0; padding-bottom: 0; }
.nextlist__title { display: block; font-weight: 700; font-size: .92rem; color: inherit; text-decoration: none; }
.nextlist__title:hover { text-decoration: underline; color: inherit; }
.nextlist__meta { display: block; font-size: .76rem; opacity: .9; line-height: 1.35; }

.submitbar__note { display: block; font-family: var(--qf-font); font-size: .74rem; color: var(--qf-bad); font-weight: 600; }

/* One direction only: position left, next right ------------------------------- */
.stepnav { justify-content: space-between; }
.stepnav__position { order: 1; }
.stepnav .button { order: 2; min-width: 7rem; }

/* ==========================================================================
   Play screen: 75 percent question, 25 percent send button
   ========================================================================== */
.playgrid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) { .playgrid { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } }
/* A grid column is as wide as its widest child unless it is told otherwise.
   Without the minimum of zero a long word or a long row pushes the column,
   and with it the page, past the right edge of the screen. */
.playgrid > * { min-width: 0; }

.playgrid__main .question { margin-bottom: 0; padding: 1.1rem 1.2rem; }
.question__index { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--qf-muted); margin: 0 0 .35rem; font-weight: 700; }
.question__text { font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1.3; margin: 0 0 .8rem; }
.question__hint { font-size: .78rem; color: var(--qf-muted); margin: 0 0 .6rem; }
.question__media { max-height: 12rem; width: auto; margin-bottom: .7rem; border-radius: var(--qf-radius-sm); }

.answeroption { margin-bottom: .45rem; font-size: .95rem; }
.answeroption::before { width: 1.85rem; height: 1.85rem; font-size: .82rem; }

/* Two buttons, one above the other, both centred and of one width: the
   clock and the send button belong together and should read as a pair. */
.sendbox {
    position: sticky; top: 5rem;
    justify-items: center;
    background: var(--qf-surface); border: 1px solid var(--qf-line); border-radius: var(--qf-radius);
    padding: .9rem; display: grid; gap: .5rem; text-align: center;
    /* A grid box is as wide as its widest child. Without these two lines a
       single wide child - a long row of dots, a long word, a wide image -
       stretches the box, and with it the column and the whole page. The
       buttons inside carry button--block, so they follow whatever width the
       box takes: that is why they were the part that showed. */
    max-width: 100%;
}
.sendbox > * { min-width: 0; max-width: 100%; width: 100%; }
.sendbox .button { margin: 0; }
.sendbox__position { font-family: var(--qf-mono); font-size: .8rem; color: var(--qf-muted); font-variant-numeric: tabular-nums; }
.sendbox__note { font-size: .76rem; color: var(--qf-bad); font-weight: 600; line-height: 1.35; }

/* Phone: the button sits at the bottom edge, always in reach */
@media (max-width: 61.99rem) {
    .playgrid__side {
        position: sticky; bottom: 0; z-index: 20;
        margin: 0 -1.1rem;
    }
    /* The bar sits over the page, so the questions need room underneath.
       Without it the last answer of a question hides behind the bar and a
       long answer pushes it out of reach entirely. */
    .playgrid__main { padding-bottom: 5.5rem; }
    .sendbox {
        position: static; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
        grid-template-columns: auto 1fr; align-items: center; gap: .8rem;
        background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
        padding: .7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom));
    }
    .sendbox .button { margin: 0; }
    .sendbox__note { grid-column: 1 / -1; text-align: left; }
    .playgrid__main .question { padding: .9rem 1rem; }
    .question__text { font-size: 1.08rem; }
    .answeroption { padding: .6rem .7rem; font-size: .92rem; }
    .answeroption::before { width: 1.7rem; height: 1.7rem; }
}

.rule--uplift { grid-column: 1 / -1; background: #eef8f1; border-color: #cbe8d5; }
.rule--uplift .rule__value { font-weight: 500; font-size: .84rem; line-height: 1.4; }


/* ==========================================================================
   Rankings: every column keeps its width while the numbers grow
   Percent has at most four characters, the ratio is shortened to 1.2k / 15k,
   so nothing shifts once a member reaches four or five digits.
   ========================================================================== */
.table--rank {
    display: table; white-space: normal; width: 100%; max-width: 38rem;
    margin-left: 0; table-layout: fixed;
}
.table--rank th, .table--rank td { padding: .5rem .5rem; }
.table--rank td.num, .table--rank th.num,
.table--rank thead th.num, .table--rank tbody td.num {
    text-align: right;
    white-space: nowrap;
    /* Figures of equal width, so units, tens and hundreds sit in one line
       down the column and can be read against each other. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.table--rank th:first-child, .table--rank td:first-child { width: 2.2rem; text-align: center; padding-inline: .25rem; }
.table--rank th:nth-child(2), .table--rank td:nth-child(2) {
    width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.table--rank td.num--percent { width: 4rem; }
.table--rank th.num--percent { width: 4rem; }
/* The score sits with the two values it is made of, and carries the weight. */
.table--rank td.num--score, .table--rank th.num--score { width: 4.6rem; }
.table--rank td.num--score { font-weight: 700; color: var(--qf-ink); }
.table--rank td.num--ratio, .table--rank th.num--ratio { width: 7rem; color: var(--qf-ink-soft); }
.table--rank td.num--count, .table--rank th.num--count { width: 4.2rem; }
.table--rank .usernav__avatar { width: 20px; height: 20px; }

/* Words above the columns on a wide screen, signs on a narrow one. */
.table--rank .th__sign { display: none; font-size: 1.05rem; line-height: 1; }
.table--rank .th__sign--ok { color: var(--qf-tourn); font-weight: 900; }
.ranklegend { display: none; }

@media (max-width: 47.99rem) {
    .table--rank { max-width: none; font-size: .85rem; }
    /* Four characters of column will not hold the word Wertung, so the sign
       takes its place and the legend above the table explains it. */
    .table--rank .th__word { display: none; }
    .table--rank .th__sign { display: inline; }
    .ranklegend {
        display: flex; flex-wrap: wrap; gap: .2rem 1rem;
        margin: 0 0 .5rem; font-size: .82rem; color: var(--qf-muted);
    }
    .ranklegend .th__sign { display: inline; font-size: 1rem; }
    .table--rank th, .table--rank td { padding: .5rem .25rem; }
    .table--rank th:first-child, .table--rank td:first-child { width: 1.5rem; }
    /* Seven columns do not fit on a phone. The counts behind the two
       percentages give way, header and cell together; the score and the two
       values it is made of stay. Until now this took effect only below 384
       pixels, so a common phone still showed all seven and squeezed them. */
    .table--rank td.num--ratio, .table--rank th.num--ratio,
    .table--rank td.num--count, .table--rank th.num--count { display: none; }
    /* Wide enough for the words above them: Wertung needs 3.6rem at this
       size, and a heading that does not fit is what made the row look
       crushed. */
    .table--rank td.num--percent, .table--rank th.num--percent { width: 3.4rem; }
    .table--rank td.num--score, .table--rank th.num--score { width: 4rem; }
    .table--rank .usernav__avatar { width: 18px; height: 18px; }
}
@media (max-width: 24rem) {
    .table--rank .usernav__avatar { display: none; }
}

/* Play screen: less empty space, a clearer side column ------------------------ */
.playgrid { gap: 1.2rem; }
@media (min-width: 62rem) {
    .playgrid { grid-template-columns: minmax(0, 1fr) 15rem; max-width: 62rem; }
}
.playgrid__main .question { padding: 1.2rem 1.3rem; }
.question__text { margin-bottom: 1rem; }

.sendbox { padding: 1rem; gap: .7rem; max-width: 100%; }


@media (max-width: 61.99rem) {
    .sendbox {
        display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
        padding: .6rem 1.1rem calc(.6rem + env(safe-area-inset-bottom));
    }
    .sendbox__position { flex: 0 0 auto; font-size: .78rem; }
    .sendbox .button { flex: 1 1 8rem; margin: 0; padding: .6rem 1rem; font-size: .95rem; }
    .sendbox__note { flex: 1 1 100%; text-align: left; }
}

/* Questions and answers are not for copying ----------------------------------- */
.question, .answeroption, .answerresult, .question__explanation {
    -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.question img, .question video { -webkit-user-drag: none; user-drag: none; pointer-events: auto; }

/* ==========================================================================
   Phone header: four rows, each with one job
   1 brand, language, account, sign out
   2 clock, centred
   3 the public sections
   4 the member sections
   ========================================================================== */
@media (max-width: 61.99rem) {
    .masthead__inner {
        display: grid;
        grid-template-areas: "brand clock tools" "nav nav nav";
        grid-template-columns: auto 1fr auto;
        row-gap: .3rem; column-gap: .5rem;
        align-items: center;
    }
    .brand { grid-area: brand; }
    .masthead__tools { grid-area: tools; justify-content: flex-end; gap: .4rem; }
    .usernav { grid-area: nav; justify-content: space-between; gap: .2rem; overflow: visible; }

    /* The clock keeps the middle column, its own grid stays untouched. */
    .clock--inline { grid-area: clock; font-size: .66rem; justify-content: center; }

    .usernav__name, .usernav__logouttext { display: none; }
    .usernav__logoutbtn { display: inline-flex; align-items: center; padding: .35rem; }
    .usernav__logouticon { display: block; }
    .usernav__link--admin { font-size: .78rem; }

}
@media (min-width: 62rem) {
    .usernav__logouticon { display: none; }
}

/* Both navigation rows on a phone look and behave the same ------------------- */
@media (max-width: 61.99rem) {
    .usernav, .usernav--member {
        display: flex; justify-content: space-between; align-items: center;
        gap: .2rem; padding: .3rem 0; overflow: visible;
        border-top: 1px solid var(--qf-line);
    }
    .usernav .usernav__link, .usernav--member .usernav__link {
        flex: 1 1 0; text-align: center; padding: .3rem .1rem;
        font-size: .88rem; font-weight: 600;
    }
    .usernav--member { border-bottom: 1px solid var(--qf-line); }
}

/* The second navigation row belongs to the phone only. On a wide screen the
   left sidebar covers those sections, so the row stays out of the way. */
@media (min-width: 62rem) {
    .usernav--member { display: none !important; }
    .usernav__logouticon { display: none; }
    .usernav__logouttext { display: inline; }
}

/* The section you are in carries a bar under its label ------------------------ */
.usernav__link.is-active { color: var(--qf-ink); }
.usernav__link.is-active::after { width: 100%; opacity: 1; }
@media (max-width: 61.99rem) {
    .usernav__link.is-active::after { transform: none; height: 3px; bottom: -.25rem; }
}

/* ==========================================================================
   The clock: one grid for both lines
   The whole clock is a single two column grid and the rows dissolve into it,
   so every label sits in the same column and the digits line up across lines.
   ========================================================================== */
.clock {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: .4rem; row-gap: 0;
    justify-content: flex-end;
    align-items: baseline;
    line-height: 1.3;
    white-space: nowrap;
}
.clock__row { display: contents; }
.clock__label {
    grid-column: 1; justify-self: end;
    font-family: var(--qf-mono); font-size: .82em; letter-spacing: .04em;
    color: var(--qf-muted); text-transform: uppercase;
}
.clock__value {
    grid-column: 2; justify-self: end;
    font-family: var(--qf-mono); font-variant-numeric: tabular-nums;
    font-weight: 600; color: var(--qf-ink-2);
}
.clock__row--utc .clock__value { color: var(--qf-ink-2); font-weight: 600; }
.adminbar .clock__label { color: rgba(255,255,255,.55); }
.adminbar .clock__value, .adminbar .clock__row--utc .clock__value { color: #fff; }

/* Ranking filters on a phone: two fields per row, the button underneath ------- */
@media (max-width: 47.99rem) {
    .filterbar--rank { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
    .filterbar--rank select { width: 100%; min-width: 0; }
    .filterbar--rank .button { grid-column: 1 / -1; }
}

/* On a phone the header already carries both navigation rows, so the sidebar
   inside the content area would repeat them. It stays on wide screens. */
@media (max-width: 61.99rem) {
    .memberlayout > .membernav { display: none; }
}

/* Sub items of the current section, phone only ------------------------------- */
.subnav { display: none; }
@media (max-width: 61.99rem) {
    .subnav {
        display: flex; flex-wrap: wrap; gap: .3rem;
        margin: 0 0 .9rem; padding: 0 0 .6rem;
        border-bottom: 1px solid var(--qf-line);
    }
    .subnav__link {
        flex: 1 1 auto; text-align: center;
        padding: .35rem .6rem; border-radius: var(--qf-pill);
        background: var(--qf-surface-2); color: var(--qf-ink-soft);
        font-size: .8rem; font-weight: 700; text-decoration: none;
    }
    .subnav__link.is-active { background: var(--qf-primary); color: #fff; }
}

/* Where am I: the section in the header and the page in the sub bar --------- */
@media (max-width: 61.99rem) {
    .usernav__link.is-active {
        color: var(--qf-primary);
        background: rgba(0,135,68,.08);
        border-radius: var(--qf-radius-sm);
    }
    .usernav__link.is-active::after {
        content: ""; position: absolute; left: .35rem; right: .35rem; bottom: -.05rem;
        width: auto; height: 3px; opacity: 1; transform: none;
        background: var(--qf-primary); border-radius: 2px;
    }
    .subnav__link.is-active { background: var(--qf-primary); color: #fff; }
}

/* Choice between extension and upgrade ---------------------------------------- */
.modechoice { border: 1px solid var(--qf-line); border-radius: var(--qf-radius-sm); padding: .7rem .8rem; }
.modechoice legend { font-size: .82rem; color: var(--qf-ink-soft); padding: 0 .3rem; }
.modechoice .field__check { align-items: flex-start; gap: .5rem; margin-bottom: .5rem; }
.modechoice .field__check:last-child { margin-bottom: 0; }
.modechoice strong { display: block; font-size: .9rem; }
.modechoice .tiny { display: block; color: var(--qf-muted); font-size: .78rem; line-height: 1.4; }

/* Where a payout balance comes from ------------------------------------------- */
.originbox { display: grid; gap: .9rem; margin: .6rem 0; }
@media (min-width: 48rem) { .originbox { grid-template-columns: 1fr 1fr; } }
.originbox__title { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--qf-muted); margin: 0 0 .3rem; }
.originbox .metalist { margin: 0; font-size: .85rem; }

/* The short review: only the own answer, no verdict --------------------------- */
.answerresult--own { background: var(--qf-surface-2); border-color: var(--qf-line); font-weight: 600; }

/* Five quiz cards in a row on a wide screen, so an advert tile fits in ------- */
@media (min-width: 66rem) { .cards--tight { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 82rem) { .cards--tight { grid-template-columns: repeat(5, 1fr); } }
.cards--tight .card { padding: .9rem; }
.cards--tight .card__title { font-size: 1rem; }
.cards--tight .card__text { font-size: .85rem; }

/* An advert tile looks like a card but is marked as one --------------------- */
.card--ad { position: relative; border-style: dashed; }
.card__adlink { display: block; color: inherit; }
.card__adlink:hover { text-decoration: none; }
.card--ad .cardbanner { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.card__adlabel { position: absolute; top: .5rem; right: .7rem; font-size: .62rem;
                 letter-spacing: .08em; text-transform: uppercase; color: var(--qf-muted);
                 background: var(--qf-surface); padding: 0 .25rem; border-radius: 4px; }

/* The page between signing in and the dashboard. It must fit on one screen,
   so on a wide display the banner sits next to the text, not above it. */
.gate { max-width: 46rem; margin: 1.2rem auto; text-align: center; }
.gate__label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--qf-muted); }
.gate__panel { display: grid; gap: 1rem; align-items: center; margin: .6rem 0; }
@media (min-width: 44rem) { .gate__panel { grid-template-columns: 1fr 1fr; text-align: left; } }
.gate__image { display: block; }
.gate__image img { display: block; margin: 0 auto; max-width: 100%; height: auto;
                   max-height: 44vh; border-radius: var(--qf-radius); }
.gate__title { font-size: 1.2rem; margin: 0 0 .3rem; }
.gate__text { color: var(--qf-ink-soft); font-size: .92rem; margin: 0; }
.gate__actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: 1rem 0 0; }
/* The two column layout puts the text beside the picture, so its buttons
   belong under the text. A partner code has no second column: the banner
   stands alone in the middle and the button belongs under the middle of it. */
@media (min-width: 44rem) { .gate__panel .gate__actions { justify-content: flex-start; } }
.gate__script + .gate__actions { justify-content: center; }
.gate__script + .gate__actions .button { padding: .5rem 1.1rem; font-size: .85rem; }
.gate__note { font-size: .75rem; color: var(--qf-muted); margin-top: .8rem; }

/* Partner code brings its own layout, we only give it room ------------------- */
.adbox__script, .card__adscript, .gate__script { padding: .9rem; text-align: center; overflow: hidden; }
.adbox__script img, .card__adscript img, .gate__script img { max-width: 100%; height: auto; }
.adbox__script iframe, .card__adscript iframe, .gate__script iframe { max-width: 100%; border: 0; }

/* A row of three small banners. On a narrow screen only the first is shown,
   so the page does not turn into a column of adverts. */
.adstrip { position: relative; margin: 1.6rem 0; }
.adstrip__label { display: block; font-size: .66rem; letter-spacing: .08em;
                  text-transform: uppercase; color: var(--qf-muted); margin-bottom: .35rem; }
.adstrip__row { display: grid; gap: .8rem; grid-template-columns: 1fr; }
.adstrip__item { border: 1px solid var(--qf-line); border-radius: var(--qf-radius-sm);
                 background: var(--qf-surface); overflow: hidden; text-align: center; }
.adstrip__item img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.adstrip__text { display: grid; gap: .1rem; padding: .7rem; color: inherit; font-size: .85rem; }
.adstrip__text:hover { text-decoration: none; background: var(--qf-surface-2); }
.adstrip__item--1, .adstrip__item--2 { display: none; }
@media (min-width: 48rem) {
    .adstrip__row { grid-template-columns: repeat(3, 1fr); }
    .adstrip__item--1, .adstrip__item--2 { display: block; }
}

/* Paging between two quizzes. Two arrows at the end of the badge row, where
   the eye already is, instead of a wide bar far below the page. */
.detail__tagrow { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.detail__tagrow .detail__tags { margin: 0; }
.pagericons { display: flex; gap: .3rem; flex: 0 0 auto; }
.pagericon { display: grid; place-items: center; width: 2rem; height: 2rem; font-size: 1.35rem;
             line-height: 1; color: var(--qf-ink-soft); border: 1px solid var(--qf-line);
             border-radius: 50%; background: var(--qf-surface); }
.pagericon:hover { text-decoration: none; color: var(--qf-primary); border-color: var(--qf-primary); }
.pagericon--off { opacity: .35; }

/* On a wide screen the banner takes the left half and the text the right ----- */
.detail__top { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 62rem) {
    .detail__top { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
    .detail__top--plain { grid-template-columns: 1fr; }
}
.detail__top .detail__banner { margin: 0; }

/* Own place in a ranking, marked so the eye finds it without searching ------- */
.table--rank tr.is-me td, .table tr.is-me td { background: rgba(0,135,68,.10); font-weight: 700; }
.table tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--qf-primary); }
.rankgap td { text-align: center; color: var(--qf-muted); letter-spacing: .3em; padding: .2rem; }
.rankbreak td { padding: .4rem 0; background: none; }
.rankbreak .adstrip { margin: .2rem 0; }
.rankbreak .adstrip__row { grid-template-columns: 1fr; }

/* Surfaces of one banner, as a grid of checkboxes -------------------------- */
.slotgrid { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .slotgrid { grid-template-columns: 1fr 1fr; } }
.slotgrid .field__check { align-items: flex-start; gap: .5rem; margin: 0;
                          border: 1px solid var(--qf-line); border-radius: var(--qf-radius-sm); padding: .55rem .7rem; }
.slotgrid .field__check strong { display: block; font-size: .88rem; }
.slotgrid .field__check .tiny { display: block; color: var(--qf-muted); font-size: .75rem; line-height: 1.35; }
.slotgrid .is-off { opacity: .42; }

/* One run, question by question: right and wrong at a glance --------------- */
.row--ok td:first-child { box-shadow: inset 3px 0 0 var(--qf-ok, #0a8); }
.row--bad td:first-child { box-shadow: inset 3px 0 0 var(--qf-bad, #c33); }
.row--bad td { background: rgba(200,50,50,.05); }

/* The choice page: one panel for the free way, premium as a quiet line ---- */
.choice { max-width: 34rem; margin: 2.5rem auto; }
.choice__title { font-size: clamp(1.4rem, 4vw, 2rem); margin: 0 0 .4rem; text-align: center; }
.choice__lead { text-align: center; color: var(--qf-ink-soft); margin: 0 0 1.6rem; }
.choice__main { border: 1px solid var(--qf-primary); border-radius: var(--qf-radius);
                background: var(--qf-surface); padding: 1.5rem; }
.choice__name { font-size: 1.2rem; margin: 0 0 .8rem; }
.choice__list { margin: 0 0 1.3rem; padding-left: 1.1rem; display: grid; gap: .4rem; font-size: .95rem; }
.button--block { display: block; text-align: center; width: 100%; }
.button--lg { padding: .85rem 1.2rem; font-size: 1.02rem; }
.choice__note { font-size: .8rem; color: var(--qf-muted); margin: .9rem 0 0; }
.choice__alt { text-align: center; font-size: .88rem; color: var(--qf-ink-soft); margin: 1.1rem 0 0; }
.choice__more { text-align: center; margin-top: 1.4rem; font-size: .85rem; }
.consent__text strong { display: block; }
.consent__alt { font-size: .85rem; color: var(--qf-ink-soft); align-self: center; }

/* The clock button in a tournament run: a reminder, not a control ---------- */
.sendbox__clock { display: flex; justify-content: space-between; align-items: center;
                  gap: .6rem; margin-bottom: .6rem; font-size: .85rem; }
.sendbox__clock strong { font-variant-numeric: tabular-nums; }
.sendbox__clock.is-asking { border-color: var(--qf-accent); color: var(--qf-ink);
                            background: rgba(249,192,4,.14); font-weight: 700; }
.briefing__rule--warn { border-left: 3px solid var(--qf-accent); padding-left: .7rem; }

/* What a draft still needs before it can go online ------------------------- */
.checklist__list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .45rem; }
.checklist__list li { padding-left: 1.7rem; position: relative; font-size: .92rem; }
.checklist__list li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.checklist__list .is-done::before { content: '\2713'; color: var(--qf-primary); }
.checklist__list .is-open::before { content: '\2022'; color: var(--qf-muted); }
.checklist__list .is-open { color: var(--qf-ink-soft); }

/* Picking many questions at once, instead of one after another ------------- */
.pickbox { max-height: 26rem; overflow-y: auto; border: 1px solid var(--qf-line);
           border-radius: var(--qf-radius-sm); background: var(--qf-surface); }
.pickbox__row { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .7rem;
                border-bottom: 1px solid var(--qf-line); font-size: .88rem; cursor: pointer; }
.pickbox__row:last-child { border-bottom: 0; }
.pickbox__row:hover { background: var(--qf-surface-2); }
.pickbox__row input { margin-top: .18rem; flex: 0 0 auto; }
.pickbox__text { flex: 1 1 auto; line-height: 1.4; }
.pickbox__actions { display: flex; align-items: center; gap: .5rem; margin: .7rem 0; }
.pickbox__actions .field__hint { margin-left: auto; }
.pickbox__head { display: flex; align-items: center; gap: .7rem; margin: 0 0 .5rem; font-size: .88rem; }
.pager--pages { display: flex; align-items: center; gap: .6rem; justify-content: center; margin: .8rem 0; grid-template-columns: none; }

/* A tournament that is over is still readable, but does not compete ------- */
.card--past { opacity: .82; }
.card--past .cardbanner { filter: saturate(.6); }
.page-head--sub { margin-top: 2.2rem; }
.archive__more { text-align: center; margin: 1rem 0 0; }

/* The result page: answers on the left, one banner beside each ------------- */
.reviewgrid { display: grid; gap: .8rem 1.2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) {
    .reviewgrid { grid-template-columns: minmax(0, 1fr) 468px; }
    .reviewgrid__ad { position: sticky; top: 1rem; }
}
.reviewgrid .question--sm { margin: 0; padding: .8rem 1rem; }
.question--sm .question__text { font-size: .96rem; line-height: 1.4; margin: .1rem 0 .5rem; }
.question--sm .question__index { font-size: .74rem; margin: 0 0 .2rem; }
.question--sm .answerresult { font-size: .88rem; padding: .28rem .5rem; margin: .12rem 0; }
.question--sm .question__explanation { font-size: .82rem; margin-top: .5rem; }
.question--sm .question__report { font-size: .76rem; margin: .4rem 0 0; }
.reviewgrid__ad .adstrip { margin: 0; padding: 0; border: 0; background: none; }
.reviewgrid__ad .adstrip__row { grid-template-columns: 1fr; }
/* On a narrow screen the banner sits under its question, not beside it. */
@media (max-width: 61.99rem) { .reviewgrid__ad { margin-bottom: .4rem; } }
/* Badges of a tournament card share one line ------------------------------ */
.card__pills { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .4rem; }

/* The area colours reach the badges as well, so a page reads the same
   whether one looks at a tile, a button or a small mark. ------------------- */
.pill--quiz { background: var(--qf-quiz-lt); color: var(--qf-quiz-ink); border-color: var(--qf-quiz); }
.pill--tourn { background: var(--qf-tourn-lt); color: var(--qf-tourn-dk); border-color: var(--qf-tourn); }
.pill--money { background: var(--qf-money-lt); color: var(--qf-money-dk); border-color: var(--qf-money); }

/* Section headings of an area carry a short rule in its colour. */
.page-head--quiz .page-head__title { border-left: 4px solid var(--qf-quiz); padding-left: .6rem; }
.page-head--tourn .page-head__title { border-left: 4px solid var(--qf-tourn); padding-left: .6rem; }
.page-head--money .page-head__title { border-left: 4px solid var(--qf-money); padding-left: .6rem; }

/* The cycles of a membership, side by side ------------------------------- */
.table--cycles { width: auto; margin: .3rem 0 .5rem; }
.table--cycles th, .table--cycles td { text-align: center; padding: .35rem .7rem; font-variant-numeric: tabular-nums; }
.table--cycles th:first-child, .table--cycles td:first-child { text-align: left; color: var(--qf-ink-soft); }
.table--cycles .is-current { background: var(--qf-money-lt); color: var(--qf-money-dk); font-weight: 700; }
/* Three prizes on one line where the room allows. The amounts themselves are
   bound together, so a narrow screen breaks between two prizes rather than
   inside one. Nothing is ever cut off. */
.card__text--nowrap { overflow-wrap: normal; }
@media (max-width: 30rem) { .card__text--nowrap { font-size: .92rem; } }

/* The standing of a tournament ---------------------------------------------
   Its own widths, not those of the ranking: the columns here hold a ratio and
   a time to the millisecond, both wider than a percentage. */
.table--standing { width: 100%; max-width: 50rem; table-layout: fixed; }
.table--standing th, .table--standing td { padding: .55rem .6rem; vertical-align: middle; }
.table--standing .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table--standing .num--place { width: 2.4rem; text-align: center; padding-inline: .25rem; }
.table--standing th:nth-child(2), .table--standing td:nth-child(2) {
    width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Room for what is coming, not only for what is there today: a tournament of
   366 questions writes 312 / 366, and a long window can push the seconds into
   five figures. The columns are sized for that from the start, so the table
   does not have to be rebuilt when the first big tournament runs. */
.table--standing .num--hits { width: 7.5rem; }
.table--standing .num--time { width: 9.5rem; }
.table--standing .usernav__avatar { width: 20px; height: 20px; vertical-align: middle; margin-right: .25rem; }

@media (max-width: 47.99rem) {
    .table--standing { max-width: none; font-size: .85rem; }
    .table--standing th, .table--standing td { padding: .5rem .3rem; }
    .table--standing .num--place { width: 1.6rem; }
    .table--standing .num--hits { width: 5.6rem; }
    /* The full time to the millisecond, on a phone as well. Exact timing and
       everybody being able to check it are what this portal rests on, so the
       figure is never shortened; the column is given the room instead. */
    .table--standing .num--time { width: 7rem; }
}
/* The clock of a run, shown only in the last minute ------------------------ */
.playhead__warn { margin: .3rem 0 0; font-size: .9rem; color: var(--qf-accent); font-variant-numeric: tabular-nums; }
.playhead__warn strong { font-family: var(--qf-mono); font-size: 1.15rem; }


/* ---------------------------------------------------------------------------
   Sharing an earned badge
   --------------------------------------------------------------------------- */

/* Closed until somebody asks for it. Six links under every tile would bury
   the badges themselves, and the cards keep the height they had. */
.badgeshare { margin-top: .4rem; }
.badgeshare__toggle {
    cursor: pointer; font-size: .74rem; color: var(--qf-muted);
    list-style: none; padding: .1rem 0;
}
.badgeshare__toggle::-webkit-details-marker { display: none; }
.badgeshare__toggle:hover { color: var(--qf-primary); }
.badgeshare__list {
    display: flex; flex-wrap: wrap; gap: .28rem; justify-content: center;
    list-style: none; padding: .35rem 0 0; margin: 0;
}
.badgeshare__link {
    display: inline-block; padding: .16rem .46rem; font-size: .72rem;
    border: 1px solid var(--qf-line); border-radius: var(--qf-pill);
    background: #fff; color: var(--qf-ink-soft);
}
.badgeshare__link:hover { border-color: var(--qf-primary); color: var(--qf-primary); text-decoration: none; }

/* ---------------------------------------------------------------------------
   The list of members
   --------------------------------------------------------------------------- */

.memberfind { margin-bottom: 1.1rem; }
.memberfind input[type="search"] { min-width: 14rem; }

.memberlist {
    display: grid; gap: .5rem; list-style: none; padding: 0; margin: 0;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.memberlist__link {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .7rem; border: 1px solid var(--qf-line);
    border-radius: var(--qf-radius); background: var(--qf-surface);
    color: inherit; text-decoration: none;
}
.memberlist__link:hover { border-color: var(--qf-primary); text-decoration: none; }
.memberlist__photo {
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    object-fit: cover; flex: 0 0 auto;
}
.memberlist__photo--letter {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--qf-surface-2); color: var(--qf-muted);
    font-weight: 700; font-size: 1.1rem;
}
.memberlist__name { flex: 1 1 auto; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

/* The top bar of a phone already carries five sections. A sixth would push
   the row into a second line, so on a narrow screen the members live in the
   sub navigation of the ranking section instead. */
@media (max-width: 61.99rem) {
    .usernav__link--wide { display: none; }
}

/* NEW BLOCKS BELOW: names here must not exist above */

/* ---------------------------------------------------------------------------
   The public member page
   --------------------------------------------------------------------------- */

.memberhead { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.memberhead__photo { border-radius: 50%; object-fit: cover; width: 6rem; height: 6rem; }
.memberhead__text { min-width: 12rem; }

/* A member without a picture gets the first letter of the name. Better than
   an empty frame, and better than a face that belongs to nobody. */
.memberhead__photo--letter {
    display: inline-flex; align-items: center; justify-content: center;
    background: #eef1f4; color: #5b6169;
    font-size: 2.4rem; font-weight: 700; line-height: 1;
}

/* Every field keeps its name. A value the member withheld shows three
   asterisks, set apart so nobody reads them as content. */
.factlist { margin: 0; }
.factlist__row { display: flex; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid #eceff2; }
.factlist__label { flex: 0 0 9rem; color: #5b6169; margin: 0; }
.factlist__value { margin: 0; font-weight: 600; }
.factlist__value--masked { color: #9aa1a9; font-weight: 400; letter-spacing: .18em; }
.factlist__note { margin-top: .75rem; font-size: .84rem; }

/* A member name is a link wherever it stands. It stays quiet until somebody
   points at it: a leaderboard of twenty blue names reads as an advert. */
.memberlink { color: inherit; text-decoration: none; border-bottom: 1px dotted #b9c0c7; }
.memberlink:hover, .memberlink:focus { color: #0a7a3c; border-bottom-color: currentColor; }

.cards--stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 1.25rem 0; }
.card--stat { text-align: center; padding: 1rem .5rem; }
.card--stat .card__value { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.card--stat .card__label { display: block; font-size: .82rem; color: #5b6169; margin-top: .3rem; }

.memberbadges { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; margin: 0; }
.memberbadges__item { width: 5.5rem; text-align: center; }
.memberbadges__name { display: block; font-size: .74rem; line-height: 1.25; margin-top: .35rem; }

.table--placings td:nth-child(2),
.table--placings td:nth-child(3),
.table--placings th:nth-child(2),
.table--placings th:nth-child(3) { text-align: right; width: 4.5rem; }
.table--placings td:last-child,
.table--placings th:last-child { text-align: right; width: 6rem; white-space: nowrap; }

.section--cta { text-align: center; padding: 1.5rem 1rem; }

/* On a phone the four figures need two rows, and the placing table drops the
   count of correct answers: the place and the prize are what a visitor came
   for, and four columns do not fit. */
@media (max-width: 47.99rem) {
    .cards--stats { grid-template-columns: repeat(2, 1fr); }
    .table--placings td:nth-child(3),
    .table--placings th:nth-child(3) { display: none; }
    .memberhead__photo { width: 4.5rem; height: 4.5rem; }
    .memberhead__photo--letter { font-size: 1.8rem; }
    .factlist__label { flex: 0 0 6.5rem; }
}

/* ---------------------------------------------------------------------------
   The public list of payouts
   --------------------------------------------------------------------------- */

.table--payouts td.amount,
.table--payouts th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table--payouts td:nth-child(3),
.table--payouts th:nth-child(3) { text-align: right; width: 4rem; }

/* The pager of the payout list uses the .pager already in this file. A
   second rule under the same name overrode it everywhere else, which is
   how the badge page lost its layout. */
.payouts__note { margin-top: 1rem; font-size: .84rem; }

/* On a phone the date and the place go: the tournament, who and how much are
   what somebody came to see, and five columns do not fit on a narrow screen. */
@media (max-width: 47.99rem) {
    .table--payouts td:nth-child(1),
    .table--payouts th:nth-child(1),
    .table--payouts td:nth-child(3),
    .table--payouts th:nth-child(3) { display: none; }
}


/* Shown only where a banner was blocked. It takes the room the banner would
   have had, so the page does not jump when it appears. */
.adnote { margin: 1.6rem 0; padding: 1rem 1.1rem; text-align: center;
          border: 1px dashed var(--qf-line); border-radius: var(--qf-radius-sm);
          background: var(--qf-surface-2); }
.adnote[hidden] { display: none; }
.adnote__title { margin: 0 0 .3rem; font-weight: 600; font-size: .95rem; }
.adnote__text { margin: 0 0 .7rem; font-size: .85rem; color: var(--qf-muted); }
.adnote .button { padding: .5rem 1.1rem; font-size: .85rem; }


/* The strip on the premium page carries its own line, because there it is not
   only advertising but the argument for the offer. */
.adpitch { margin: 1.4rem 0 2rem; }
.adpitch__label { margin: 0 0 .5rem; font-size: .74rem; letter-spacing: .06em;
                  text-transform: uppercase; color: var(--qf-muted); text-align: center; }

/* A strip between the members, so the list does not read the same all the way
   down. It spans the whole grid rather than standing in one column. */
.memberlist__ad { grid-column: 1 / -1; list-style: none; }