/* Quiz duel — the mock's board area, value for value.
   Every number below is copied from console.html §MATCH SCREENS (the
   `m.isQuiz` blocks, desktop and phone) rather than eyeballed: the score card
   is `padding:11px 14px; border-radius:13px; gap:3px`, the track segment is
   `26×5` at `border-radius:3px`, the option is `padding:15px 17px;
   border-radius:13px; gap:11px` with a `26×26` key tile at `border-radius:8px`,
   and the countdown ring is a 52px conic gradient with a 4px inset hole.

   Written NARROW-FIRST, and the breakpoint is `@container scene`, never
   `@media`: at a 1280px window the scene is 858px, so a window query answers
   the wrong question. The phone draws track → stage → cards and no legend; the
   desktop draws cards → track → stage → legend. Same DOM, `order:` does the
   rest.

   The teal is the quiz rail's own accent from the mock's GAMES table
   (`#2dd4bf`); it exists nowhere else in the console, so it is local. */

.view-quiz {
  --qz-accent: #2dd4bf;
  --qz-ring: 1turn;
  /* The ring's hole is opaque on purpose — a translucent one lets the conic
     gradient show through and the digit loses its ground. The mock's value. */
  --qz-ring-hole: #130d24;
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  /* One screenful, not a page: `--match-h` is written by fitMatchColumn() in
     ui/board.js from the SCENE's measured height. The fallback keeps the old
     scrolling layout in a browser without ResizeObserver. On a phone it is a
     FLOOR rather than a fixed height — four long answers plus a two-line
     question can outgrow the scene, and clipping the fourth option is worse
     than a scroll. */
  min-height: var(--match-h, auto);
}
.view-quiz > * { flex: 0 0 auto; }

.qz-track { order: 1; }
.qz-stage { order: 3; }
.qz-duel { order: 4; }
/* deadends-map S7: the phone used to hide the legend entirely (display:none,
   back only ≥620), so the score jumped by 100/150/175 with no explanation on
   the one width most players hold. It rides as a compact wrapping row right
   under the track; the console block below restores the mock's desktop order
   and chip size. */
.qz-scoring { display: flex; flex-wrap: wrap; order: 2; }

/* === failure ============================================================
   The one block every screen shows when it could not read. It takes the whole
   view, because a countdown ring painted full of seconds that are not running
   is a clock lying about a game that never started. */
.qz-fail { order: 0; }
.qz-fail-card {
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--panel-strong);
  border: 1px solid var(--glass-brd);
}

/* === the two score cards ================================================ */
.qz-duel { display: flex; align-items: stretch; gap: 7px; }
.qz-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 11px 14px;
  border-radius: 13px;
  border: 1px solid rgba(var(--t-violet), 0.2);
  background: rgba(26, 17, 48, 0.55);
}
.qz-card.is-me {
  border-color: rgba(var(--t-gold), 0.45);
  background: rgba(var(--t-gold), 0.08);
}
.qz-card-score {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: rgba(var(--t-mute), 0.72);
  font-variant-numeric: tabular-nums;
}
.qz-card.is-me .qz-card-score { color: var(--gold); }
/* The phone names the seat above its score; the console puts the number
   first. Same node, one `order`. */
.qz-card-label {
  order: -1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  color: rgba(var(--t-mute), 0.42);
}
/* Always laid out, only sometimes painted. The pill lives above the question
   and the answer buttons, so entering and leaving flow every time a streak
   reached 3 or broke moved the buttons under the player's thumb by 18.84px,
   on a timer. Same reason as .ai-think in ai.css. */
.qz-card-streak {
  padding: 2px 9px;
  border-radius: 6px;
  background: rgba(var(--t-danger), 0.14);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  color: #ff8a94;
}
.qz-card-streak.is-idle { visibility: hidden; }

/* === the ten-segment track ============================================== */
.qz-track { display: flex; align-items: center; gap: 8px; }
.qz-dots { flex: 1 1 auto; display: flex; gap: 3px; min-width: 0; }
.qz-dot {
  flex: 1 1 0;
  max-width: 26px;
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--t-violet), 0.16);
}
.qz-dot.is-done { background: linear-gradient(90deg, var(--qz-accent), var(--violet)); }
.qz-dot.is-now {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(var(--t-gold), 0.6);
}
.qz-track-label {
  flex: 0 0 auto;
  order: -1;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-soft);
}

/* === the question stage ================================================= */
.qz-stage {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
/* Phone: the countdown sits beside the question. Console: the category and
   the countdown share a centred row and the question spans under them. */
.qz-head { display: flex; align-items: center; gap: 12px; }
.qz-category {
  display: none;
  padding: 4px 12px;
  border-radius: 8px;
  background: rgba(var(--t-violet), 0.14);
  border: 1px solid rgba(var(--t-violet), 0.28);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet-300);
}

/* The countdown. A conic sweep and the whole seconds inside it — the bar this
   replaces painted a full 15 seconds whenever nothing had loaded. */
.qz-ring {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.qz-ring-track {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--qz-accent) 0turn var(--qz-ring),
    rgba(var(--t-violet), 0.14) var(--qz-ring) 1turn
  );
}
.qz-ring.is-low .qz-ring-track {
  background: conic-gradient(
    var(--danger) 0turn var(--qz-ring),
    rgba(var(--t-violet), 0.14) var(--qz-ring) 1turn
  );
}
.qz-ring-hole {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--qz-ring-hole);
}
.qz-ring-num {
  position: relative;
  font-size: 17px;
  font-weight: 700;
  color: var(--qz-accent);
  font-variant-numeric: tabular-nums;
}
.qz-ring.is-low .qz-ring-num { color: var(--danger); }

.qz-question {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-wrap: pretty;
}

.qz-options { display: flex; flex-direction: column; gap: 7px; }
.qz-option {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 17px;
  border-radius: 13px;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(var(--t-violet), 0.2);
  background: rgba(26, 17, 48, 0.55);
  transition: border-color 0.16s, background 0.16s, transform var(--dur-fast) var(--spring);
}
@media (hover: hover) {
  .qz-option:hover:not(:disabled) { border-color: rgba(45, 212, 191, 0.5); }
}
.qz-option:active:not(:disabled) { transform: scale(0.99); }
.qz-option:disabled { cursor: default; }
.qz-option-key {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: rgba(var(--t-violet), 0.12);
  color: var(--text-soft);
}
.qz-option-text {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
}
.qz-option-mark { flex: 0 0 auto; font-size: 15px; font-weight: 800; }

/* The pick, before the engine has said anything about it. */
.qz-option.is-picked { border-color: rgba(var(--t-gold), 0.5); background: rgba(var(--t-gold), 0.07); }
.qz-option.is-right {
  border-color: rgba(53, 199, 131, 0.7);
  background: rgba(53, 199, 131, 0.13);
}
.qz-option.is-right .qz-option-key { background: rgba(53, 199, 131, 0.26); color: var(--ok); }
.qz-option.is-right .qz-option-mark { color: var(--ok); }
.qz-option.is-wrong {
  border-color: rgba(var(--t-danger), 0.6);
  background: rgba(var(--t-danger), 0.1);
}
.qz-option.is-wrong .qz-option-key { background: rgba(var(--t-danger), 0.24); color: #ff8a94; }
.qz-option.is-wrong .qz-option-mark { color: var(--danger); }

/* Between my answer and the opponent's. The engine only opens `correct` once
   both seats have answered, so this is the state the screen is genuinely in —
   not a spinner standing in for one. */
.qz-wait {
  text-align: center;
  font-size: 11px;
  color: var(--text-soft);
}

/* === the scoring legend ================================================= */
/* Narrow-first: small chips in a wrapping row under the track (deadends-map
   S7); the ≥620 console block restores the mock's desktop size and order. */
.qz-scoring { align-items: center; justify-content: center; gap: 5px; }
.qz-scoring-chip {
  padding: 4px 9px;
  border-radius: 9px;
  background: rgba(53, 199, 131, 0.1);
  border: 1px solid rgba(53, 199, 131, 0.28);
  font-size: 9px;
  font-weight: 700;
  color: var(--ok);
  white-space: nowrap;
}

/* === the closed game ==================================================== */
.view-quiz.is-over .qz-stage { justify-content: center; }
.qz-over {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border-radius: var(--r-lg);
  background: var(--panel-strong);
  border: 1px solid var(--glass-brd);
  text-align: center;
}
.qz-over-icon { font-size: 46px; line-height: 1; }
.qz-over-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.qz-over-score {
  font-size: 24px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
/* The hub says «Без рейтинга» and «Играть уже можно, а рейтинга ещё нет». The
   table is where a player asks what the game was worth, so it says the same
   thing here rather than leaving them to guess. */
.qz-over-unrated {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 420px;
}
.qz-over-unrated-tag {
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: rgba(var(--t-violet), 0.14);
  border: 1px solid rgba(var(--t-violet), 0.28);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-300);
}
.qz-over-unrated-sub { font-size: 11.5px; line-height: 1.45; color: var(--text-soft); }
.qz-over-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* === the console ========================================================
   Cards on top, the legend back, the question at display size and the options
   in two columns — the mock's desktop grid. */
@container scene (min-width: 620px) {
  .view-quiz { gap: 13px; height: var(--match-h, auto); min-height: 0; }
  .qz-duel { order: 1; gap: 14px; }
  .qz-track { order: 2; }
  .qz-stage { order: 3; flex: 1 1 auto; min-height: 0; }
  .qz-scoring { display: flex; order: 4; gap: 8px; }
  .qz-scoring-chip { padding: 6px 13px; font-size: 10px; }

  .qz-card-score { font-size: 26px; }
  .qz-card-label {
    order: 0;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .qz-card-streak { order: 1; }

  .qz-track { gap: 9px; }
  .qz-dots { flex: 0 0 auto; gap: 9px; }
  .qz-dot { flex: 0 0 26px; width: 26px; max-width: none; }
  .qz-track-label { order: 1; margin-left: 5px; font-size: 10px; font-weight: 400; color: var(--text-faint); }

  .qz-stage {
    align-items: center;
    justify-content: center;
    gap: 17px;
  }
  /* The category and the countdown share a centred row and the question takes
     the next one. `flex: 0 0 100%` is the line break — a grid span would let
     the question's own min-content width stretch the two chips above it. */
  .qz-head {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 13px;
    row-gap: 17px;
  }
  .qz-category { display: inline-block; }
  .qz-question {
    flex: 0 0 100%;
    max-width: 730px;
    margin: 0 auto;
    text-align: center;
    font-size: 24px;
    line-height: 1.35;
  }
  .qz-options {
    width: min(760px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }
  .qz-option-text { font-size: 14px; }

  .qz-over-icon { font-size: 56px; }
  .qz-over-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .qz-option { transition: none; }
  .qz-option:active:not(:disabled) { transform: none; }
}