/* Brew & Brain — layout: one centred column (max 1080px), card grid that collapses to a single column on phones.
   Pale mint "café counter" ground, espresso ink, cobalt for anything you tap, roasted amber for scores and rewards. */
:root {
  --bg: #EFF5F1;
  --surface: #FFFFFF;
  --surface-2: #E4EDE7;
  --ink: #24170F;
  --muted: #66584E;
  --line: #D5E0D8;
  --brain: #2F5BEA;
  --brain-ink: #FFFFFF;
  --brain-soft: #E3E9FD;
  --brew: #A9561A;
  --brew-soft: #F7E7D8;
  --good: #1C8F57;
  --good-soft: #DDF3E7;
  --bad: #C93A43;
  --bad-soft: #FBE1E3;
  --geo: #157A74;
  --food: #A9561A;
  --you: #6A47D6;
  --retro: #B23A66;
  --words: #275C86;
  --mix: #2F5BEA;
  --sci: #3B7D2C;
  --wild: #8C6312;
  --shadow: 0 1px 2px rgba(36, 23, 15, .06), 0 6px 20px rgba(36, 23, 15, .06);

  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.8rem, 5vw, 2.6rem);
  --step-4: clamp(2.2rem, 7vw, 3.6rem);
  --radius: 14px;
}
/* One light look on purpose: the illustrations are all drawn on mint, so a dark theme turned them into glowing boxes */
:root { color-scheme: light; }


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--brain); }
:focus-visible { outline: 3px solid var(--brain); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }

.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 700px) { .wrap { padding-inline: 24px; } }

/* Header. It pins to the very top and pads itself below the phone's status bar, so it never covers the page.
   html padding is reset because the home page used to get that gap a different way. */
:root { padding-top: 0; }
.site-header {
  position: sticky; top: 0; z-index: 10;
  padding-top: env(safe-area-inset-top, 0px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.logo img { width: 42px; height: 36px; flex: none; display: block; }
.logo span { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; white-space: nowrap; }
.logo span b { color: var(--brew); font-weight: 800; }
.nav { display: flex; gap: 4px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; padding: 8px 10px; border-radius: 999px; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--surface-2); }
@media (max-width: 420px) { .nav a.hide-sm { display: none; } }

/* Hero */
.hero { padding-block: 24px 8px; display: grid; gap: 20px; }
@media (min-width: 820px) { .hero { grid-template-columns: 1.1fr .9fr; align-items: center; padding-block: 56px 28px; gap: 40px; } }
.perks { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.perks li {
  font-size: .85rem; font-weight: 700; padding: 6px 12px 6px 28px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); position: relative;
}
.perks li::before {
  content: ""; position: absolute; left: 11px; top: 50%; width: 10px; height: 6px; margin-top: -5px;
  border-left: 2.5px solid var(--good); border-bottom: 2.5px solid var(--good); transform: rotate(-45deg);
}
.ticket { text-decoration: none; color: inherit; }
.ticket .btn { justify-self: start; margin-top: 4px; }
.ticket-art { position: absolute; right: 18px; bottom: 18px; width: 104px; height: 104px; border-radius: 12px; object-fit: cover; }
.ticket h2, .ticket p { padding-right: 0; }
.ticket p { max-width: calc(100% - 110px); }
@media (min-width: 820px) { .ticket-art { width: 132px; height: 132px; } .ticket p { max-width: calc(100% - 140px); } }
a.ticket:hover .btn { filter: brightness(1.06); }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brew); margin: 0 0 10px; }
.hero h1 { font-size: var(--step-4); font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--brain); }
.hero p.lede { font-size: var(--step-1); color: var(--muted); max-width: 34ch; margin: 10px 0 16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 1rem/1 var(--font-body); padding: 14px 22px; border-radius: 999px; border: 0;
  background: var(--brain); color: var(--brain-ink); text-decoration: none; cursor: pointer;
  min-height: 48px; transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Featured "order ticket" card */
.ticket {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; position: relative; display: grid; gap: 12px;
  border: 1px solid var(--line);
}
.ticket::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--brew) 0 14px, transparent 14px 22px);
  border-radius: 0 0 4px 4px; opacity: .8;
}
.ticket .meta { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.ticket h2 { font-size: var(--step-2); }
.ticket p { margin: 0; color: var(--muted); }

/* Sections */
.section { padding-block: 28px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.section-head h2 { font-size: var(--step-3); font-weight: 800; }
.section-head p { margin: 0; color: var(--muted); }

.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .grid.three { grid-template-columns: repeat(3, 1fr); } .grid.four { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease; min-width: 0;
}
@media (hover: hover) { a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } }
.card .band { height: 84px; display: flex; align-items: flex-end; padding: 12px 16px; color: var(--surface); position: relative; }
.card .band .big { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: .8; opacity: .95; }
.card .band .unit { font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-left: 8px; margin-bottom: 2px; }
.band.geo { background: var(--geo); } .band.food { background: var(--food); } .band.you { background: var(--you); }
.band.game { background: var(--brain); }
.band.retro { background: var(--retro); } .band.words { background: var(--words); } .band.mix { background: var(--mix); } .band.sci { background: var(--sci); } .band.wild { background: var(--wild); }
.card { position: relative; }
.new-badge {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  background: var(--brew); color: var(--surface); font-size: .7rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
}
.see-all { font-weight: 700; text-decoration: none; white-space: nowrap; }
.see-all:hover { text-decoration: underline; }
.cat-page h1 { font-size: var(--step-3); font-weight: 800; }
.cat-intro { color: var(--muted); max-width: 60ch; margin: 8px 0 20px; font-size: var(--step-1); }
.card .art { display: block; aspect-ratio: 16 / 9; background: #ECF4EF; overflow: hidden; }
.card .art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
@media (hover: hover) { a.card:hover .art img { transform: scale(1.03); } }
.card .body { padding: 16px; display: grid; gap: 6px; flex: 1; align-content: start; }
.card h3 { font-size: var(--step-1); font-weight: 700; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }
.card .foot { padding: 0 16px 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Phones: two-across picture tiles, so a whole section fits on one screen and one tap starts a quiz */
@media (max-width: 619px) {
  .section { padding-block: 16px; }
  .section-head { margin-bottom: 12px; }
  .section-head h2 { font-size: 1.45rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card .art { aspect-ratio: 1 / 1; }
  .card .band { height: auto; aspect-ratio: 1 / 1; flex-direction: column; align-items: center; justify-content: center; padding: 8px; text-align: center; }
  .card .band .big { font-size: 2.2rem; }
  .card .band .unit { margin: 6px 0 0; font-size: .62rem; letter-spacing: .06em; }
  .card .body { padding: 10px 12px 2px; gap: 2px; }
  .card .chip, .card .foot span:last-child { display: none; }
  .card .blurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; line-height: 1.3; color: var(--muted); margin: 2px 0 4px; }
  .card h3 { font-size: 1rem; line-height: 1.2; }
  .card .foot { padding: 2px 12px 10px; font-size: .78rem; }
  .new-badge { top: 8px; left: 8px; font-size: .62rem; padding: 3px 7px; }
  /* Compact intro so the first quizzes show without scrolling */
  .hero { padding-block: 14px 4px; gap: 14px; }
  .hero h1 { font-size: 1.85rem; }
  .hero p.lede { font-size: 1rem; margin: 6px 0 0; }
  .perks { display: none; }
  .ticket { padding: 16px; gap: 6px; }
  .ticket h2 { font-size: 1.3rem; }
  .ticket-art { width: 88px; height: 88px; right: 14px; bottom: 14px; }
}
@media (min-width: 620px) { .lede-perks { display: none; } }
.chip { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.best { color: var(--brew); font-weight: 700; }

/* Ad slots: keep well away from answer buttons (AdSense accidental-click policy) */
.ad-slot {
  margin-block: 28px; min-height: 120px; border: 1px dashed var(--line); border-radius: 10px;
  display: grid; place-items: center; color: var(--muted); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
}
.ad-slot::before { content: "Advertisement"; }
.ad-slot.live { border: 0; min-height: 0; display: block; }
.ad-slot.live::before { content: none; }

/* Footer */
.site-footer { margin-top: 40px; border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--muted); font-size: .9rem; }
.site-footer .wrap { display: grid; gap: 12px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-footer a { color: var(--muted); }

/* Prose pages (legal, about) */
.prose { max-width: 68ch; padding-block: 36px 12px; }
.prose h1 { font-size: var(--step-3); font-weight: 800; margin-bottom: 8px; }
.prose h2 { font-size: var(--step-1); margin: 28px 0 8px; }
.prose p, .prose li { color: var(--ink); }
.prose .updated { color: var(--muted); font-size: .9rem; margin-top: 0; }
.email-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.email-box code { font-size: 1.05rem; user-select: all; font-family: var(--font-body); font-weight: 700; word-break: break-all; }

/* Quiz player */
.player { max-width: 640px; margin: 0 auto; padding-block: 24px 8px; }
.player-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .85rem; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Progress: a cup that fills with coffee as you go */
.player-top { margin-bottom: 18px; }
.cup-progress { display: flex; align-items: center; gap: 10px; }
.cup-progress svg { width: 44px; height: 44px; flex: none; }
.cup-progress .fill { transform-box: view-box; transform-origin: 50% 42px; transition: transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .cup-progress .fill { transition: none; } }
.cup-progress b { display: block; color: var(--ink); font-size: .95rem; }
.cup-progress span { line-height: 1.25; }
.score-pill { background: var(--surface); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; color: var(--ink); font-weight: 800; box-shadow: 2px 2px 0 var(--ink); }
.question { font-size: var(--step-2); font-weight: 700; margin-bottom: 18px; }
.options { display: grid; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font: 600 1.05rem/1.3 var(--font-body); color: var(--ink);
  background: var(--surface); border: 2px solid var(--line); border-radius: 12px;
  padding: 14px 16px; min-height: 56px; cursor: pointer; transition: border-color .12s, background .12s, transform .1s;
}
/* Hover only on devices with a real mouse: phones keep a "hover" on the last tapped spot,
   which made an answer on the next question look selected */
@media (hover: hover) { .option:hover:not([disabled]) { border-color: var(--brain); } }
.option { -webkit-tap-highlight-color: transparent; }
.option:focus:not(:focus-visible) { outline: none; }
.option:active:not([disabled]) { transform: scale(.99); }
.option .key { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); font-size: .85rem; font-weight: 800; }
.option[disabled] { cursor: default; }
.option.correct { border-color: var(--good); background: var(--good-soft); }
.option.correct .key { background: var(--good); color: var(--surface); }
.option.wrong { border-color: var(--bad); background: var(--bad-soft); }
.option.wrong .key { background: var(--bad); color: var(--surface); }
.option.faded { opacity: .55; }
.fact { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: var(--brew-soft); }
.fact b { color: var(--brew); }
.next-row { margin-top: 18px; display: flex; justify-content: flex-end; }

/* Quiz title screen */
.intro { display: grid; gap: 14px; justify-items: start; padding-block: 12px 8px; }
.intro h1 { font-size: var(--step-4); font-weight: 800; }
.intro-art { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: #ECF4EF; display: block; margin-bottom: 4px; }
.intro-chip { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--surface); padding: 6px 12px; border-radius: 999px; }
.intro-chip.geo { background: var(--geo); } .intro-chip.food { background: var(--food); } .intro-chip.you { background: var(--you); }
.intro-chip.retro { background: var(--retro); } .intro-chip.words { background: var(--words); } .intro-chip.mix { background: var(--mix); } .intro-chip.sci { background: var(--sci); } .intro-chip.wild { background: var(--wild); }
.intro-blurb { margin: 0; font-size: var(--step-1); color: var(--muted); max-width: 36ch; }
.intro-facts { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.intro-facts li { padding: 14px 8px; text-align: center; color: var(--muted); font-size: .85rem; font-weight: 600; }
.intro-facts li + li { border-left: 1px solid var(--line); }
.intro-facts b { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.intro-go { width: 100%; font-size: 1.1rem; min-height: 56px; }
.result { text-align: center; padding-block: 16px 12px; display: grid; gap: 10px; justify-items: center; }
.score-ring { width: 170px; height: 170px; }
.score-ring text { font-family: var(--font-display); font-weight: 800; fill: var(--ink); }
.result h1 { font-size: var(--step-3); font-weight: 800; }
.result p { color: var(--muted); max-width: 40ch; margin: 0; }
.result .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.toast { min-height: 1.4em; font-size: .9rem; color: var(--good); font-weight: 600; }
.result-art { width: 220px; height: 220px; border-radius: 28px; object-fit: cover; background: #EEF5F0; box-shadow: 0 0 0 6px var(--surface); }
.friend { display: flex; align-items: center; gap: 14px; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.friend img { width: 84px; height: 84px; border-radius: 12px; flex: none; background: #EEF5F0; }
.friend p { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.cup-badge { font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); color: var(--you); line-height: 1; }

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

/* "See all" tile that fills an odd gap in a section */
.more-tile { align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 16px; min-height: 140px;
  background: var(--brain-soft); border-color: transparent; color: var(--brain); }
.more-num { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; }
.more-label { font-weight: 700; font-size: .95rem; }


/* ===== Sticker style: chunky outlines and solid offset shadows, the same language as the illustrations ===== */
:root { --edge: 2px solid var(--ink); --pop: 3px 3px 0 var(--ink); --pop-lg: 5px 5px 0 var(--ink); }
.card, .ticket, .option, .intro-facts, .friend, .email-box, .more-tile { border: var(--edge); box-shadow: var(--pop); }
.card, .ticket { border-radius: 18px; }
.card .art, .card .band { border-bottom: var(--edge); }
@media (max-width: 619px) { .card .art, .card .band { border-bottom: var(--edge); border-right: 0; } }
@media (hover: hover) {
  a.card:hover, a.ticket:hover { transform: translate(-2px, -2px); box-shadow: var(--pop-lg); }
  .option:hover:not([disabled]) { border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
}
a.card:active, a.ticket:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.card, .ticket, .option, .btn { transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.ticket::before { left: 18px; right: 18px; top: 8px; height: 5px; }
.ticket { padding-top: 26px; }
.ticket-art { border: var(--edge); }

/* Buttons */
.btn { border: var(--edge); box-shadow: var(--pop); }
.btn:hover { filter: none; }
@media (hover: hover) { .btn:hover:not([disabled]) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); } }
.btn:active:not([disabled]) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.ghost { background: var(--surface); box-shadow: var(--pop); }

/* Answers */
.option { border-radius: 14px; }
.option .key { border: 2px solid var(--ink); background: var(--surface); }
.option:active:not([disabled]) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.option.correct { border-color: var(--ink); background: var(--good-soft); }
.option.correct .key { background: var(--good); border-color: var(--ink); color: #fff; }
.option.wrong { border-color: var(--ink); background: var(--bad-soft); }
.option.wrong .key { background: var(--bad); border-color: var(--ink); color: #fff; }
.option.faded { opacity: .45; box-shadow: none; }
.fact { border: var(--edge); border-radius: 14px; }
.fact.right { background: var(--good-soft); } .fact.right b { color: var(--good); }
.fact.miss { background: var(--brew-soft); }

/* Badges, chips and pictures */
.new-badge { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.intro-chip { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.intro-art, .result-art { border: var(--edge); box-shadow: var(--pop-lg); }
.result-art { border-radius: 24px; }
.friend img { border: var(--edge); }
.intro-facts li + li { border-left: var(--edge); }
.perks li { border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.more-tile { background: var(--brain-soft); }
.score-ring { filter: drop-shadow(3px 3px 0 var(--ink)); }
.site-header { border-bottom: var(--edge); }
.ad-slot { border: 2px dashed var(--line); }

/* Result name takes its quiz's colour */
.band-you { --q: var(--you); } .band-retro { --q: var(--retro); } .band-food { --q: var(--food); } .band-geo { --q: var(--geo); } .band-words { --q: var(--words); } .band-mix { --q: var(--mix); } .band-sci { --q: var(--sci); } .band-wild { --q: var(--wild); }
.cup-badge { color: var(--q, var(--you)); }

/* Trivia score: mascot cup with the score on a sticker badge */
.mascot-wrap { position: relative; display: inline-block; margin-bottom: 6px; }
.score-badge { position: absolute; right: -14px; bottom: -10px; background: var(--brew); color: #fff; font-family: var(--font-display);
  font-weight: 800; font-size: 2rem; line-height: 1; padding: 10px 14px; border-radius: 18px; border: var(--edge); box-shadow: var(--pop);
  transform: rotate(-6deg); font-variant-numeric: tabular-nums; }
.score-badge small { font-size: 1.1rem; opacity: .9; }

/* Paged mode: ad above the question, and a second one well clear of the answer buttons */
.paged .ad-top { margin-block: 12px 4px; min-height: 100px; }
.paged .ad-bottom { margin-top: 180px; }
/* Result screen: keep the ad well clear of the Share / Play again buttons */
#result-ad { margin-top: 96px; }
.paged .player { padding-top: 12px; }

/* Today's quiz card fades in once the day's pick is filled in, so the placeholder never flashes */
.ticket:not(.ready) { opacity: 0; }
.ticket { transition: opacity .2s ease; }
.ad-slot.gone { display: none !important; }

/* About this quiz: plain-text intro and answers under every quiz, readable without JavaScript.
   Collapsed to one bar until tapped, and hidden while a question is on screen. */
body.playing .about-quiz { display: none; }
.about-quiz { max-width: 68ch; margin-inline: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; }
.about-quiz > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.about-quiz > summary::-webkit-details-marker { display: none; }
.about-quiz > summary::after { content: "+"; font: 700 1.4rem/1 var(--font-display); color: var(--brain); }
.about-quiz[open] > summary::after { content: "\2212"; }
.about-quiz > summary h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 0; }
.about-quiz > summary:focus-visible { outline: 2px solid var(--brain); outline-offset: 2px; border-radius: 6px; }
.about-quiz h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 6px 0 10px; }
.about-quiz > p { color: var(--muted); line-height: 1.65; margin: 0 0 14px; }
.about-quiz details { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 2px 14px; margin-bottom: 18px; }
.about-quiz details summary { cursor: pointer; font-weight: 700; padding: 10px 0; color: var(--brain); }
.about-quiz details summary span { color: var(--muted); font-weight: 400; }
.about-quiz ol { margin: 0 0 12px; padding-left: 1.4em; display: grid; gap: 14px; }
.about-quiz .aq { margin: 0; font-weight: 600; }
.about-quiz .aa { margin: 4px 0 0; color: var(--muted); line-height: 1.55; }
.about-quiz .aa b { color: var(--good); }
.about-quiz .results-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.about-quiz .results-list li { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.about-quiz .results-list h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 4px; }
.about-quiz .results-list p { margin: 0; color: var(--muted); line-height: 1.55; }

/* Game cards with a logo: logo centred on a soft cobalt tile, same shape as the quiz pictures */
.card .game-art { display: grid; place-items: center; background: var(--brain-soft); }
.card .game-art img { width: auto; height: 74%; object-fit: contain; }
@media (hover: hover) { a.card:hover .game-art img { transform: scale(1.04); } }

/* Phones: a slightly smaller logo and menu so the name and all three links
   (Personality, Trivia, Games) fit on one line */
.nav a { white-space: nowrap; }
@media (max-width: 430px) {
  .site-header .wrap { gap: 6px; }
  .logo { gap: 6px; }
  .logo img { width: 34px; height: 29px; }
  .logo span { font-size: 1.08rem; }
  .nav { gap: 0; }
  .nav a { padding: 7px 6px; font-size: .86rem; }
}
@media (max-width: 350px) { .logo span { display: none; } }