/*
 * Quiz Dash.
 *
 * The board is composed as three pieces: a sunken console at the top holding
 * the category, the streak, the lives and the clock; the question in the
 * clear space below it; and the four answers as full-width pressable rows.
 * Reading down the file follows that order.
 *
 * Every colour here is either one of the shared brand custom properties or a
 * status colour. Three literal values are written below and nowhere else: the
 * green of a right answer, the red of a wrong one, and the white that sits on
 * top of them. They are deliberately NOT brand-derived — "you got it right"
 * must not turn red because a buyer picked a red brand — and they are never
 * the only signal either, since a tick or a cross sits beside them, so the
 * board still reads without colour vision.
 *
 * Both are darkened a little past the obvious green and red so that they
 * clear 4.5:1 everywhere they are used: as text on the board, as text on
 * their own 10% tint, and with white on top of them in a letter badge.
 *
 * They are tuned for a light board. A buyer moving to a very dark background
 * should check the contrast of these two against their surface, or retune the
 * three values here; nothing else in the game reads them.
 */

.qd {
  --qd-right: #12703f;
  --qd-right-soft: rgb(18 112 63 / 0.1);
  --qd-wrong: #a01f18;
  --qd-wrong-soft: rgb(160 31 24 / 0.09);
  --qd-on-status: #ffffff;

  /* A measure, not a stretch. The width is stated rather than left to the
     content: the shell sizes a board to fit its contents, so a board that
     took its width from the question would grow and shrink as the round
     moved between a short question and a long one. A long question wraps to
     two lines here, which is what the space above the answers is reserved
     for. */
  width: 560px;
  max-width: 100%;
  display: grid;
  gap: 14px;
}

/* The other half of that: the shell's board is a one-column grid whose
   column is sized to its contents, and a column sized to a stated 560px
   would keep all 560 on a phone and push the board off the side. Capping the
   column instead lets it fall back to whatever the screen allows. The media
   query below does the same job for a browser too old for :has(), where the
   board simply goes back to being sized by its contents. */
.la-board:has(> .qd) {
  grid-template-columns: minmax(0, 560px);
}
@media (max-width: 660px) {
  .qd {
    width: 100%;
  }
}

/* Visually hidden, still read aloud. */
.qd-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Console --------------------------------------------------------- */
/* Category, streak, lives and the clock in one sunken panel. Grouping them
   is most of what stops the board reading as stacked blocks. */
.qd-console {
  display: grid;
  gap: 10px;
  padding: 11px 13px 13px;
  background: var(--la-surface-sunken);
  border: 1px solid var(--la-line);
  border-radius: var(--la-radius);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.045);
}

.qd-hud {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
}
.qd-hud__right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* The category is a label, not a headline: quiet pill, brand-coloured glyph. */
.qd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  background: var(--la-surface);
  border: 1px solid var(--la-line);
  color: var(--la-ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: var(--la-shadow-sm);
}
.qd-chip__icon {
  display: inline-flex;
  flex: none;
  color: var(--la-primary);
}
.qd-chip svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* ---- Streak ---------------------------------------------------------- */
/* One chip, four levels of emphasis: it starts as quietly as the category
   and ends up the loudest thing on the console. game.js decides which level
   a run has earned. */
.qd-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--la-line);
  background: var(--la-surface);
  color: var(--la-ink-soft);
  font-family: var(--la-numeric);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: var(--la-shadow-sm);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.qd-streak[hidden] {
  display: none;
}
.qd-streak__icon {
  display: inline-flex;
  flex: none;
}
.qd-streak svg {
  width: 13px;
  height: 13px;
  display: block;
}
.qd-streak--warm {
  background: var(--la-primary-soft);
  border-color: transparent;
  color: var(--la-primary);
}
.qd-streak--hot {
  background: var(--la-primary-soft);
  border-color: var(--la-primary);
  color: var(--la-primary);
}
.qd-streak--blaze {
  /* The colour is set as well as the gradient: the white figure on top of it
     must never be left standing on the pale background underneath. */
  background-color: var(--la-primary);
  background-image: linear-gradient(180deg, var(--la-primary), var(--la-primary-hover));
  border-color: transparent;
  color: var(--la-on-primary);
  box-shadow: var(--la-shadow-md), 0 0 0 3px var(--la-primary-glow), inset 0 1px 0 rgb(255 255 255 / 0.2);
}
.qd-streak--blaze svg {
  width: 14px;
  height: 14px;
}

/* ---- Lives ----------------------------------------------------------- */
.qd-lives {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.qd-life {
  display: inline-flex;
  color: var(--la-primary);
  filter: drop-shadow(0 1px 1px var(--la-primary-glow));
  transition: color 0.3s ease;
}
.qd-life svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* A lost life stays in place as an empty outline: the player can always see
   how many were there to begin with. */
.qd-life--lost {
  color: var(--la-ink-soft);
  filter: none;
}
.qd-life--lost svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* ---- Clock ----------------------------------------------------------- */
/* Count on the left, the figure on the right, the bar spanning both. */
.qd-clock {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 5px 12px;
}

.qd-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--la-ink-soft);
  font-variant-numeric: tabular-nums;
}

.qd-seconds {
  justify-self: end;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--la-numeric);
  color: var(--la-ink);
  line-height: 1;
  transition: color 0.55s linear;
}
.qd-seconds__value {
  min-width: 2ch;
  text-align: right;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.qd-seconds__unit {
  font-size: 12px;
  font-weight: 700;
  color: var(--la-ink-soft);
}

.qd-track {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: var(--la-line);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.06);
  overflow: hidden;
}
/* No transition on width: game.js writes it every frame, and a transition
   here would lag the real clock and fight prefers-reduced-motion. The colour
   is a different matter — it crosses from calm to urgent over half a second,
   so the bar warms up rather than snapping. currentColor drives the fill and
   its glow together, which is why only one property animates. */
.qd-track__fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  color: var(--la-primary);
  background-color: currentColor;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.32), rgb(255 255 255 / 0));
  box-shadow: 0 1px 4px -2px currentColor;
  transition: color 0.55s linear;
}
.qd-clock--warn .qd-track__fill {
  /* Halfway between the brand colour and the alarm, so nothing new is
     invented. Browsers without color-mix keep the calm colour until the bar
     hits the low threshold below. */
  color: var(--la-primary);
  color: color-mix(in oklab, var(--qd-wrong) 50%, var(--la-primary));
}
.qd-clock--low .qd-track__fill {
  color: var(--qd-wrong);
}
.qd-clock--low .qd-seconds {
  color: var(--qd-wrong);
}
.qd-clock--low .qd-seconds__unit {
  color: inherit;
}

/* ---- Question -------------------------------------------------------- */
/* Two lines are reserved whatever the question is, so the answers below do
   not jump about as the round moves between short and long prompts, and a
   one-line question sits in the middle of that space rather than leaving a
   hole under it. */
.qd-question {
  margin: 0;
  display: grid;
  align-content: center;
  padding: clamp(6px, 1.8vw, 12px) 2px;
  min-height: calc(2.68em + clamp(12px, 3.6vw, 24px));
  font-size: clamp(18px, 1.3vw + 14px, 23px);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -0.018em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* ---- Answers --------------------------------------------------------- */
.qd-options {
  display: grid;
  gap: 9px;
}

.qd-option {
  font: inherit;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 10px 14px 10px 10px;
  text-align: left;
  border: 1px solid var(--la-line);
  border-radius: var(--la-radius);
  background: var(--la-surface);
  color: var(--la-ink);
  cursor: pointer;
  box-shadow: var(--la-shadow-sm), var(--la-shadow-inset);
  transition:
    transform 0.14s cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 0.16s ease,
    border-color 0.2s ease,
    background-color 0.35s ease,
    color 0.35s ease;
}
.qd-option:hover:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(-2px);
  border-color: var(--la-primary);
  box-shadow: var(--la-shadow-md), var(--la-shadow-inset);
}
.qd-option:hover:not(:disabled):not([aria-disabled="true"]) .qd-option__key {
  background: var(--la-primary);
  color: var(--la-on-primary);
}
/* Pressed: the card goes down into the page rather than merely darkening. */
.qd-option:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0);
  border-color: var(--la-primary);
  background: var(--la-primary-soft);
  box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.09);
}
/* The ring sits close to the card, and above its neighbours. */
.qd-option:focus-visible {
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

.qd-option__key {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--la-primary-soft);
  color: var(--la-primary);
  font-size: 13px;
  font-weight: 800;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.qd-option__text {
  min-width: 0;
  font-size: 15.5px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
}
/* The mark keeps its place while the question is live, so revealing a tick
   never reflows the row it lands on. */
.qd-option__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}
.qd-option__mark svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Struck out by Cut Two — ruled through and unusable, but still on screen
   and still readable. The colours transition, so they recede over a third of
   a second rather than blinking out. */
.qd-option:disabled,
.qd-option--cut {
  cursor: not-allowed;
  background: var(--la-surface-sunken);
  border-style: dashed;
  border-color: var(--la-line-strong);
  color: var(--la-ink-soft);
  box-shadow: none;
}
.qd-option--cut .qd-option__text {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.qd-option--cut .qd-option__key {
  background: transparent;
  border: 1px dashed var(--la-line-strong);
  color: var(--la-ink-soft);
}

/* ---- Answered -------------------------------------------------------- */
.qd-option[aria-disabled="true"] {
  cursor: default;
  transform: none;
}
/* The answers that were neither right nor picked step back out of the way. */
.qd-option[aria-disabled="true"]:not(.qd-option--right):not(.qd-option--picked-wrong):not(.qd-option--cut) {
  background: transparent;
  color: var(--la-ink-soft);
  box-shadow: none;
}
.qd-option[aria-disabled="true"]:not(.qd-option--right):not(.qd-option--picked-wrong):not(.qd-option--cut)
  .qd-option__key {
  background: var(--la-surface-sunken);
  color: var(--la-ink-soft);
}

/* The right answer is always revealed, and it is the one that stays lifted. */
.qd-option--right {
  border-color: var(--qd-right);
  background: var(--qd-right-soft);
  color: var(--la-ink);
  box-shadow: inset 3px 0 0 var(--qd-right), var(--la-shadow-md);
}
.qd-option--right .qd-option__key {
  background: var(--qd-right);
  color: var(--qd-on-status);
}
.qd-option--right .qd-option__mark {
  color: var(--qd-right);
}
/* A wrong pick keeps its full text contrast and loses its lift instead: flat
   and edged in the alarm colour, with a cross beside it. */
.qd-option--picked-wrong {
  border-color: var(--qd-wrong);
  background: var(--qd-wrong-soft);
  color: var(--la-ink);
  box-shadow: inset 3px 0 0 var(--qd-wrong);
}
.qd-option--picked-wrong .qd-option__key {
  background: var(--qd-wrong);
  color: var(--qd-on-status);
}
.qd-option--picked-wrong .qd-option__mark {
  color: var(--qd-wrong);
}

/* ---- Feedback and controls ------------------------------------------- */
/* The strip holds its height while the question is live, so the verdict
   arriving never pushes the buttons down the page. */
.qd-feedback {
  margin: 0;
  min-height: 24px;
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--la-radius-sm);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--la-ink-soft);
  background: transparent;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.qd-feedback--right {
  color: var(--qd-right);
  background: var(--qd-right-soft);
  box-shadow: inset 2px 0 0 var(--qd-right);
}
.qd-feedback--wrong {
  color: var(--qd-wrong);
  background: var(--qd-wrong-soft);
  box-shadow: inset 2px 0 0 var(--qd-wrong);
}

.qd-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.qd-actions .la-btn--primary {
  margin-left: auto;
}
/* Held rather than spent — the cut is still in hand, it just cannot be used
   while an answer is on screen, so it dims rather than emptying out. */
.qd-actions .la-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---- Cut Two --------------------------------------------------------- */
/* One use a round, so it is worth something while it is in hand: tinted,
   outlined in the brand colour, and carrying its own glyph. */
.qd-cut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 12px;
  background: var(--la-primary-soft);
  border-color: var(--la-primary);
  color: var(--la-primary);
  box-shadow: var(--la-shadow-sm), inset 0 1px 0 rgb(255 255 255 / 0.5);
}
.qd-cut[hidden] {
  display: none;
}
.qd-cut:hover:not(:disabled) {
  background: var(--la-primary-soft);
  border-color: var(--la-primary);
  box-shadow: var(--la-shadow-md), 0 0 0 3px var(--la-primary-glow);
}
.qd-cut__icon {
  display: inline-flex;
  flex: none;
}
.qd-cut__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
/* Spent: an empty slot rather than a dimmed button, and readable, so a
   player can still see what it was. */
.qd-actions .la-btn.qd-cut--spent:disabled {
  opacity: 1;
  background: transparent;
  border-color: var(--la-line-strong);
  border-style: dashed;
  color: var(--la-ink-soft);
  box-shadow: none;
}
.qd-cut--spent .qd-cut__icon {
  opacity: 0.55;
}

.qd-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--la-ink-soft);
}

/* ---- Start panel ----------------------------------------------------- */
.qd-start {
  display: grid;
  gap: 15px;
  justify-items: center;
  text-align: center;
  padding: clamp(12px, 5vw, 34px) 0 clamp(8px, 2.5vw, 16px);
}
.qd-start__title {
  margin: 0;
  font-size: clamp(21px, 2vw + 15px, 28px);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.qd-start__line {
  margin: 0;
  max-width: 46ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--la-ink-soft);
  text-wrap: balance;
}
.qd-start__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  list-style: none;
  margin: 2px 0;
  padding: 0;
}
.qd-start__categories li {
  display: flex;
}
.qd-start .la-btn--primary {
  padding: 13px 30px;
  font-size: 15px;
}
.qd-start .qd-hint {
  color: var(--la-ink-faint);
  font-size: 12px;
}

.qd-panel[hidden],
.qd-round[hidden] {
  display: none;
}

.qd-round {
  display: grid;
  gap: 12px;
}

/* ---- Narrow screens -------------------------------------------------- */
@media (max-width: 420px) {
  .qd-console {
    padding: 10px 11px 12px;
  }
  .qd-option {
    min-height: 54px;
    gap: 10px;
    padding: 9px 11px 9px 9px;
  }
  .qd-option__key {
    width: 27px;
    height: 27px;
    border-radius: 9px;
  }
  .qd-option__text {
    font-size: 14.5px;
  }
  .qd-option__mark {
    width: 19px;
    height: 19px;
  }
  .qd-option__mark svg {
    width: 18px;
    height: 18px;
  }
  .qd-seconds__value {
    font-size: 19px;
  }
  .qd-actions .la-btn--primary {
    margin-left: auto;
  }
}