/* South African music quiz. A permanent dark stage from under the site navbar
   to the footer, in the spirit of the timeline.music quiz: deep night-blue
   surfaces, warm off-white type, gold (#f0a500) as the one strong accent and a
   soft protea pink as the second. The navbar and footer keep the site style.
   Text colours are chosen for WCAG AA on --mq-surface (the lightest surface
   text sits on); see the contrast notes in the PR. */
.mq-page {
  --mq-ink: #f6f1e7;
  --mq-body: #d4cdd9;
  --mq-muted: #aaa3b5;
  --mq-line: rgba(255, 255, 255, .1);
  --mq-line-strong: rgba(255, 255, 255, .2);
  --mq-stage: #0b0b17;
  --mq-stage-top: #17142c;
  --mq-surface: #16152b;
  --mq-surface-2: #1e1c37;
  --mq-gold: #f0a500;
  --mq-gold-hover: #ffb81c;
  --mq-gold-soft: rgba(240, 165, 0, .12);
  --mq-on-gold: #16120a;
  --mq-protea: #f4a6bb;
  --mq-protea-soft: rgba(244, 166, 187, .12);
  --mq-good: #6ee7b7;
  --mq-good-line: #34d399;
  --mq-good-soft: rgba(16, 185, 129, .16);
  --mq-bad: #fca5a5;
  --mq-bad-line: #f87171;
  --mq-bad-soft: rgba(239, 68, 68, .16);
  --mq-focus: #ffd27a;
  --mq-radius: 16px;
  color-scheme: dark;
  color: var(--mq-body);
  background: linear-gradient(180deg, var(--mq-stage-top) 0, var(--mq-stage) 420px) var(--mq-stage);
}

.mq-page h1, .mq-page h2, .mq-page h3 { color: var(--mq-ink); }
.mq-page a { color: var(--mq-gold); text-underline-offset: .18em; }
.mq-page a:hover { color: var(--mq-gold-hover); }
.mq-page a:focus-visible { outline: 3px solid var(--mq-focus); outline-offset: 2px; border-radius: 4px; }
.mq-muted { color: var(--mq-muted); }
.mq-small { font-size: .85rem; }

/* Header: a thin gold-to-protea rule closes it off from the stage. */
.mq-header { position: relative; padding: 2rem 0 1.5rem; }
.mq-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 165, 0, .55) 30%, rgba(244, 166, 187, .45) 70%, transparent); }
.mq-back { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; font-size: .9rem; text-decoration: none; }
.mq-title { margin: .25rem 0 .5rem; font-size: clamp(1.9rem, 4.5vw, 2.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.mq-lead { max-width: 62ch; margin: 0; font-size: 1.05rem; line-height: 1.55; }

.mq-stage-wrap { padding: 1.75rem 0 2.5rem; }
.mq-app { max-width: 760px; margin: 0 auto; }
.mq-note { margin: 1rem 0; }

/* Buttons: 44px targets everywhere */
.mq-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .6rem 1.4rem; border: 1px solid transparent; border-radius: 12px; font-weight: 700; font-size: 1rem; cursor: pointer; touch-action: manipulation; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.mq-btn:focus-visible, .mq-option:focus-visible, .mq-clip__play:focus-visible, .mq-input:focus-visible { outline: 3px solid var(--mq-focus); outline-offset: 2px; }
.mq-btn--primary { background: var(--mq-gold); color: var(--mq-on-gold); }
.mq-btn--primary:hover:not(:disabled) { background: var(--mq-gold-hover); }
.mq-btn--secondary { background: var(--mq-gold-soft); border-color: rgba(240, 165, 0, .55); color: var(--mq-gold); }
.mq-btn--secondary:hover:not(:disabled) { background: rgba(240, 165, 0, .2); border-color: var(--mq-gold); }
.mq-btn--ghost { background: transparent; border-color: var(--mq-line-strong); color: var(--mq-body); }
.mq-btn--ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .06); color: var(--mq-ink); }
.mq-btn:disabled { opacity: .6; cursor: default; }
.mq-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

/* Menu */
.mq-menu { display: grid; gap: 1rem; }
@media (min-width: 640px) { .mq-menu { grid-template-columns: 1fr 1fr; } }
.mq-card { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.4rem; background: var(--mq-surface); border: 1px solid var(--mq-line); border-top: 3px solid var(--mq-protea); border-radius: var(--mq-radius); }
.mq-card--daily { border-top-color: var(--mq-gold); background: linear-gradient(160deg, rgba(240, 165, 0, .1), transparent 55%) var(--mq-surface); }
.mq-card__title { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.mq-card__body { margin: 0 0 .5rem; }
.mq-card__done { margin: 0 0 .5rem; font-weight: 600; color: var(--mq-ink); }
.mq-card .mq-btn { margin-top: auto; }

/* Progress */
.mq-progress { margin-top: 1.25rem; padding: 1.4rem; background: var(--mq-surface); border: 1px solid var(--mq-line); border-radius: var(--mq-radius); }
.mq-progress__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.mq-progress__title { margin: 0; font-size: 1.1rem; font-weight: 800; }
.mq-level { margin: .9rem 0; }
.mq-level__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .4rem; color: var(--mq-ink); }
.mq-bar { height: 10px; background: rgba(255, 255, 255, .08); border-radius: 999px; overflow: hidden; }
.mq-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--mq-gold), var(--mq-protea)); border-radius: 999px; }
.mq-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .5rem; }
@media (min-width: 640px) { .mq-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mq-stat { padding: .6rem .65rem; background: var(--mq-surface-2); border: 1px solid var(--mq-line); border-radius: 12px; }
.mq-stat dt { font-size: .72rem; font-weight: 600; color: var(--mq-muted); }
.mq-stat dd { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--mq-ink); font-variant-numeric: tabular-nums; }
.mq-badges__title { margin: 1rem 0 .5rem; font-size: 1rem; font-weight: 800; }
.mq-badges { display: grid; gap: .5rem; padding: 0; margin: 0; list-style: none; }
@media (min-width: 640px) { .mq-badges { grid-template-columns: 1fr 1fr; } }
/* Locked badges stay readable but step back (dashed edge, muted text), so
   players can see what to aim for; earned ones light up in gold. */
.mq-badge { display: flex; gap: .65rem; align-items: flex-start; padding: .65rem .75rem; border: 1px dashed var(--mq-line-strong); border-radius: 12px; color: var(--mq-muted); }
.mq-badge__icon { flex: 0 0 auto; font-size: 1.1rem; line-height: 1.3; }
.mq-badge__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; line-height: 1.45; }
.mq-badge__text strong { color: var(--mq-body); font-size: .92rem; }
.mq-badge__count { flex: 0 0 auto; align-self: flex-start; padding: .1rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--mq-body); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mq-badge--on { color: var(--mq-body); border-style: solid; border-color: rgba(240, 165, 0, .6); background: var(--mq-gold-soft); }
.mq-badge--on .mq-badge__text strong { color: var(--mq-ink); }
.mq-badge--on .mq-badge__icon { color: var(--mq-gold); }

/* Round */
.mq-round { padding: 1.4rem; background: var(--mq-surface); border: 1px solid var(--mq-line); border-radius: var(--mq-radius); }
.mq-round__head { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--mq-muted); }
.mq-round__points strong { color: var(--mq-gold); font-variant-numeric: tabular-nums; }
.mq-timer { height: 6px; margin: .6rem 0 1rem; background: rgba(255, 255, 255, .08); border-radius: 999px; overflow: hidden; }
.mq-timer__fill { display: block; width: 100%; height: 100%; background: var(--mq-gold); border-radius: 999px; transition: width .2s linear; }
.mq-timer__text { min-height: 1.4em; margin: .25rem 0 .75rem; font-size: .85rem; font-variant-numeric: tabular-nums; }
.mq-question { margin: .75rem 0 0; font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.mq-question:focus { outline: none; }

.mq-clip { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.25rem 1rem .75rem; border: 1px solid var(--mq-line); border-radius: var(--mq-radius); background: var(--mq-surface-2); }
.mq-clip__play { display: inline-flex; align-items: center; gap: .6rem; min-height: 56px; padding: .5rem 1.4rem .5rem .6rem; border: 0; border-radius: 999px; background: var(--mq-gold); color: var(--mq-on-gold); font-weight: 700; font-size: 1rem; cursor: pointer; touch-action: manipulation; }
.mq-clip__play:hover { background: var(--mq-gold-hover); }
.mq-clip__icon { position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .14); }
.mq-clip__icon::before { content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%); border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent currentColor; }
.mq-clip[data-playing="true"] .mq-clip__icon::before { left: 50%; width: 14px; height: 16px; border: 0; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.mq-clip[data-failed="true"] .mq-clip__play { opacity: .5; }
.mq-clip__status { min-height: 1.3em; margin: 0; font-size: .85rem; text-align: center; }
.mq-clip__credit { margin: 0; font-size: .75rem; color: var(--mq-muted); }

.mq-options { display: grid; gap: .6rem; margin-top: .75rem; }
@media (min-width: 576px) { .mq-options { grid-template-columns: 1fr 1fr; } }
.mq-option { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 56px; padding: .65rem .9rem; border: 1px solid var(--mq-line-strong); border-radius: 12px; background: rgba(255, 255, 255, .04); color: var(--mq-ink); font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; touch-action: manipulation; transition: background-color .15s ease, border-color .15s ease; }
.mq-option:hover:not(:disabled) { border-color: var(--mq-gold); background: var(--mq-gold-soft); }
.mq-option:disabled { cursor: default; }
.mq-option__key { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--mq-line-strong); border-radius: 8px; font-size: .8rem; color: var(--mq-muted); font-variant-numeric: tabular-nums; }
.mq-option:hover:not(:disabled) .mq-option__key { border-color: rgba(240, 165, 0, .6); color: var(--mq-gold); }
.mq-option__label { flex: 1 1 auto; }
.mq-option__mark { flex: 0 0 auto; font-weight: 800; }
.mq-option--right { border-color: var(--mq-good-line); background: var(--mq-good-soft); }
.mq-option--right .mq-option__mark { color: var(--mq-good); }
.mq-option--wrong { border-color: var(--mq-bad-line); background: var(--mq-bad-soft); }
.mq-option--wrong .mq-option__mark { color: var(--mq-bad); }
/* The also-rans step back but stay readable (muted, not faded). */
.mq-option:disabled:not(.mq-option--right):not(.mq-option--wrong) { color: var(--mq-muted); border-color: var(--mq-line); background: transparent; }
.mq-combo { margin: .75rem 0 0; font-size: .9rem; font-weight: 700; color: var(--mq-protea); }

.mq-reveal:empty { display: none; }
.mq-reveal { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--mq-line); }
.mq-verdict { margin: 0 0 .4rem; font-size: 1.1rem; color: var(--mq-ink); }
.mq-verdict--right strong { color: var(--mq-good); }
.mq-verdict--wrong strong { color: var(--mq-bad); }
.mq-reveal__track { margin: 0 0 .4rem; color: var(--mq-ink); }
.mq-reveal__fact { margin: 0 0 .5rem; }
.mq-links { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding: 0; margin: 0 0 .75rem; list-style: none; font-size: .9rem; }
.mq-links a { display: inline-flex; align-items: center; min-height: 44px; }
.mq-next { margin-top: .25rem; }

/* Result and board */
.mq-result { padding: 1.4rem; background: var(--mq-surface); border: 1px solid var(--mq-line); border-radius: var(--mq-radius); }
.mq-result__title { margin: 0 0 .5rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }
.mq-result__title:focus { outline: none; }
.mq-result__figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.mq-result__points { margin: 0; font-size: 2.4rem; font-weight: 800; color: var(--mq-gold); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mq-result__score { margin: 0; font-size: 1.1rem; color: var(--mq-ink); }
.mq-result__notes { margin: .75rem 0 0; padding-left: 1.2rem; }
.mq-result__notes li::marker { color: var(--mq-protea); }
.mq-board-wrap { margin-top: 1.25rem; }
.mq-board__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.mq-board__title { margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 800; }
.mq-board__table { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.mq-board__table th, .mq-board__table td { padding: .55rem .5rem; border-bottom: 1px solid var(--mq-line); text-align: left; }
.mq-board__table th:nth-child(n+3), .mq-board__table td:nth-child(n+3) { text-align: right; white-space: nowrap; }
.mq-board__table th { font-size: .78rem; color: var(--mq-muted); font-weight: 700; }
.mq-board__table td:first-child { color: var(--mq-muted); }
.mq-board__table td:nth-child(2) { overflow-wrap: anywhere; color: var(--mq-ink); }
.mq-board__table td:last-child { color: var(--mq-gold); font-weight: 700; }
.mq-board__mine td { font-weight: 800; color: var(--mq-ink); background: var(--mq-gold-soft); }
.mq-board__mine td:first-child { box-shadow: inset 3px 0 0 var(--mq-gold); color: var(--mq-ink); }
.mq-form { margin-bottom: 1.25rem; padding: 1rem; background: var(--mq-surface-2); border: 1px solid var(--mq-line); border-radius: 12px; }
.mq-label { display: block; margin-bottom: .3rem; font-weight: 700; color: var(--mq-ink); }
.mq-form__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.mq-input { flex: 1 1 180px; min-width: 0; min-height: 48px; padding: .5rem .8rem; border: 1px solid #78718a; border-radius: 10px; background: var(--mq-stage); color: var(--mq-ink); font-size: 1rem; }
.mq-input::placeholder { color: var(--mq-muted); }
.mq-form__message { min-height: 1.3em; margin: .5rem 0 0; font-weight: 600; color: var(--mq-ink); }

/* About */
.mq-about { padding: 2.25rem 0 3rem; border-top: 1px solid var(--mq-line); }
.mq-about__grid { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .mq-about__grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.mq-h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: .6rem; }
.mq-about p { max-width: 62ch; line-height: 1.6; }
.mq-legal { font-size: .85rem; color: var(--mq-muted); }

@media (prefers-reduced-motion: reduce) {
  .mq-timer__fill, .mq-btn, .mq-option { transition: none; }
}