/* 6-probability (plan 119): Çark Laboratuvarı (units/6-probability-boards.js) and the Hızlı Parmak wheel (u6p-figure,
   markup in units/6-probability-core.js). Theme tokens only, so light, dark and high contrast follow tokens.css and the
   world tokens of topic-games.css. Sectors and bars wear the colour's letter as well, and a mark's tone has its own label
   text: brand = the pupil's try, green = the truth, ink = the wheel's share; colour is never the only cue. */

/* ---------- Board ---------- */
.u6p-board { width: min(100%, 1040px); }
.u6p-lab__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u6p-desk { display: grid; gap: 4px; width: min(100%, 580px); margin: 0; padding: 8px 10px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u6p-desk__caption { color: var(--world-ink); font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; text-align: center; }
.u6p-lab__controls { display: grid; justify-items: center; gap: 10px; }
.u6p-spins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.u6p-spin { min-width: 0; padding: 6px 8px; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.u6p-spin[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.u6p-spark { min-height: 1.6em; margin: 0; padding: 2px 14px; color: var(--ink); background: var(--red-tint); border: 2px solid var(--red-base); border-left-width: 8px; border-radius: 12px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; text-align: center; overflow-wrap: anywhere; }
.u6p-spark:empty { visibility: hidden; }
.u6p-reason { margin: 0; padding: 6px 16px; color: var(--world-ink); background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 14px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; text-align: center; overflow-wrap: anywhere; }

/* ---------- The wheel and its chart ---------- */
.u6p-figure { display: block; width: min(100%, 560px); height: auto; margin-inline: auto; overflow: visible; }
.u6p-desk .u6p-figure { width: 100%; }
/* The disc turns about the wheel's centre (user units of the figure's viewBox); a spin is short, and none under reduced motion. */
.u6p-disc { transform: rotate(var(--u6p-angle, 0deg)); transform-origin: 88px 106px; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
/* Each badge turns back about its own centre at the same pace, so its letter always reads upright. */
.u6p-tag { transform: rotate(calc(-1 * var(--u6p-angle, 0deg))); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .u6p-disc, .u6p-tag { transition: none; } }
.u6p-s--K { fill: var(--red-base); }
.u6p-s--M { fill: var(--brand); }
.u6p-s--Y { fill: var(--green-base); }
.u6p-s--S { fill: var(--gold-fill); }
html[data-theme="dark"] .u6p-s--S { fill: var(--gold-base); }
.u6p-sector { stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; }
.u6p-rim { fill: none; stroke: var(--ink); stroke-width: 3; }
.u6p-pointer { fill: var(--ink); stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; }
.u6p-badge { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
.u6p-letter { fill: var(--ink); font-size: 14px; font-weight: 900; }
.u6p-name { fill: var(--ink); font-size: 16px; font-weight: 900; }
.u6p-caption, .u6p-tick { fill: var(--ink-2); font-size: 13px; font-weight: 800; }
.u6p-axis { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.u6p-bar { stroke: var(--ink); stroke-width: 1.5; }
.u6p-bar--target { stroke-width: 3.5; }
.u6p-count, .u6p-note { font-size: 13px; font-weight: 900; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.u6p-count { fill: var(--ink); }
.u6p-line { fill: none; stroke-width: 2.5; stroke-dasharray: 6 4; }
.u6p-ring { fill: none; stroke-width: 3; }
.u6p-trend { fill: none; stroke: var(--ink-2); stroke-width: 2.5; stroke-linejoin: round; }
.u6p-point { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.u6p-mk--try .u6p-line, .u6p-mk--try .u6p-ring { stroke: var(--brand); }
.u6p-mk--theory .u6p-line { stroke: var(--ink-2); }
.u6p-mk--truth .u6p-line, .u6p-mk--truth .u6p-ring { stroke: var(--green-base); }
.u6p-mk--truth .u6p-line { stroke-dasharray: none; stroke-width: 3; }
.u6p-mk--try .u6p-note { fill: var(--brand-ink); }
.u6p-mk--theory .u6p-note { fill: var(--ink); }
.u6p-mk--truth .u6p-note { fill: var(--green-ink); }

/* High contrast: the sectors turn to paper with ink outlines (the letters tell them apart); marks speak through ink and weight. */
body.high-contrast .u6p-s--K, body.high-contrast .u6p-s--M, body.high-contrast .u6p-s--Y, body.high-contrast .u6p-s--S { fill: var(--surface); }
body.high-contrast .u6p-sector { stroke: var(--ink); stroke-width: 2.5; }
body.high-contrast .u6p-bar--target { stroke-width: 5; }
body.high-contrast .u6p-mk--try .u6p-line, body.high-contrast .u6p-mk--try .u6p-ring, body.high-contrast .u6p-mk--theory .u6p-line,
body.high-contrast .u6p-mk--truth .u6p-line, body.high-contrast .u6p-mk--truth .u6p-ring { stroke: var(--ink); }
body.high-contrast .u6p-mk--try .u6p-note, body.high-contrast .u6p-mk--truth .u6p-note { fill: var(--ink); }

/* A short landscape board (1366 × 768): the kicker goes and the figure is capped by height so the reason line stays above the instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.u6p-board) .question-kicker { display: none; }
  .question-card--topic:has(.u6p-board) .question-copy { margin-bottom: 8px; }
  .u6p-desk { width: min(100%, 500px); }
  .u6p-desk .u6p-figure { max-height: 42vh; }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: the figure is capped by height (labels stay 12 px or more).
     The spark sits between the figure and the controls, so a wrong try's meaning is read where the eye already is. */
  .u6p-board { gap: 8px; }
  .u6p-lab__work { display: contents; }
  .u6p-lab__controls { order: 2; gap: 6px; }
  .u6p-spark { order: 1; }
  .u6p-spark:empty { display: none; }
  .u6p-reason { order: 3; }
  .u6p-desk { gap: 2px; padding: 4px 6px; }
  .u6p-desk__caption { display: none; }
  .u6p-desk .u6p-figure { max-height: 28vh; }
  .u6p-spins { gap: 6px; }
  .u6p-spin { padding: 4px 2px; font-size: 14px; white-space: nowrap; }
  .u6p-board .tg-pad { gap: 6px; }
}