/* 5-probability (plan 119): Olasılık Termometresi (units/5-probability-boards.js) and the Hızlı Parmak scene (u5p-figure,
   markup in units/5-probability-core.js). Theme tokens only, so light, dark and high contrast follow tokens.css and the
   world tokens of topic-games.css. A marble wears its colour's letter, a crossed face is dashed and struck through, a
   band says its name: colour is never the only cue. */

/* ---------- Board ---------- */
.u5p-board { width: min(100%, 1000px); }
.u5p-work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u5p-scene { display: grid; justify-items: center; align-content: center; gap: 8px; width: min(100%, 540px); min-height: 220px; margin: 0; padding: 12px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u5p-scene__caption, .u5p-bag__caption { margin: 0; color: var(--world-ink); font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; text-align: center; }

/* The bag: lettered marbles in a soft sack; after new evidence the bag before and the bag now, the change between them. */
.u5p-bags { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.u5p-bag { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.u5p-bag__marbles { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; width: 196px; min-height: 120px; padding: 12px 10px; background: var(--surface); border: 3px solid var(--ink-2); border-radius: 18px 18px 40px 40px; }
.u5p-bags .u5p-bag__marbles { width: 172px; }
.u5p-marble { --marble-tint: var(--surface); --marble-edge: var(--ink); display: inline-grid; flex: none; place-items: center; width: 36px; height: 36px; color: var(--ink); background: var(--marble-tint); border: 3px solid var(--marble-edge); border-radius: 50%; font-size: 16px; font-weight: 900; line-height: 1; }
.u5p-marble--K { --marble-tint: var(--red-tint); --marble-edge: var(--red-base); }
.u5p-marble--M { --marble-tint: var(--brand-tint); --marble-edge: var(--brand); }
.u5p-marble--Y { --marble-tint: var(--green-tint); --marble-edge: var(--green-base); }
.u5p-change { margin: 0; padding: 4px 10px; color: var(--ink); background: var(--surface); border: 2px dashed var(--ink-2); border-radius: 999px; font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; white-space: nowrap; }

/* The die: six faces; a clue crosses out the faces it rules out. */
.u5p-faces { display: grid; grid-template-columns: repeat(6, 52px); gap: 8px; }
.u5p-face { display: grid; place-items: center; height: 52px; color: var(--ink); background: var(--surface); border: 3px solid var(--ink); border-radius: 12px; font-size: 24px; font-weight: 900; }
.u5p-face[data-u5p-out] { color: var(--ink-2); border-style: dashed; border-color: var(--ink-2); text-decoration: line-through 3px; }
.u5p-clue { margin: 0; padding: 6px 14px; color: var(--ink); background: var(--surface); border: 2px solid var(--brand); border-radius: 14px 14px 14px 4px; font-size: clamp(17px, 1.6vw, 20px); font-weight: 800; text-align: center; }

/* The coin and the record of ten days. */
.u5p-coins { display: flex; gap: 24px; }
.u5p-coin { display: grid; place-items: center; width: 92px; height: 92px; color: var(--ink); background: var(--gold-tint); border: 4px solid var(--gold-base); border-radius: 50%; font-size: 20px; font-weight: 900; }
.u5p-days { display: grid; grid-template-columns: repeat(10, 38px); gap: 6px; }
.u5p-day { display: grid; place-items: center; height: 48px; color: var(--ink-2); background: var(--surface); border: 2px solid var(--ink-2); border-radius: 8px; font-size: 20px; font-weight: 900; }
.u5p-day[data-u5p-hit] { color: var(--brand-ink); background: var(--brand-tint); border: 3px solid var(--brand); }
.u5p-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0; color: var(--world-ink); font-size: 16px; font-weight: 800; }

/* The end of the round marks the favourable outcomes. */
.u5p-board[data-settled] .u5p-marble[data-u5p-fav], .u5p-board[data-settled] .u5p-face[data-u5p-fav], .u5p-board[data-settled] .u5p-coin[data-u5p-fav] { box-shadow: 0 0 0 4px var(--green-base); }

/* ---------- The thermometer: Kesin on top, a tube that fills up to the right band ---------- */
.u5p-thermo { display: grid; gap: 6px; width: min(100%, 330px); }
.u5p-band { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px 0 12px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.15; text-align: start; }
.u5p-tube { align-self: stretch; margin-block: -2px; background: var(--surface); border-inline: 3px solid var(--ink-2); }
.u5p-band:first-child .u5p-tube { border-top: 3px solid var(--ink-2); border-radius: 11px 11px 0 0; margin-top: 8px; }
.u5p-band:last-child .u5p-tube { border-bottom: 3px solid var(--ink-2); border-radius: 0 0 11px 11px; margin-bottom: 8px; }
.u5p-band__label { overflow-wrap: anywhere; }
.u5p-band__mark { min-width: 1.4em; color: var(--ink-2); font-size: 0.85em; font-weight: 900; text-align: end; }
.u5p-prior { padding: 1px 8px; color: var(--brand-ink); background: var(--surface); border: 2px solid var(--brand); border-radius: 999px; font-size: 14px; font-weight: 900; }
.u5p-band[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u5p-band[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }
.u5p-band[data-filled] .u5p-tube { background: var(--red-base); }

.u5p-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; }
.u5p-spark:empty { visibility: hidden; }
.u5p-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 Hızlı Parmak scene (SVG) ---------- */
.u5p-figure { display: block; width: min(100%, 460px); height: auto; margin-inline: auto; overflow: visible; }
.u5p-svg-bag { fill: var(--surface); stroke: var(--ink-2); stroke-width: 3; }
svg .u5p-svg-marble { fill: var(--marble-tint); stroke: var(--marble-edge); stroke-width: 3; }
.u5p-svg-letter { fill: var(--ink); font-size: 14px; font-weight: 900; }
.u5p-svg-caption { fill: var(--ink-2); font-size: 13px; font-weight: 800; }
.u5p-svg-num { fill: var(--ink); font-size: 20px; font-weight: 900; }
.u5p-svg-face { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.u5p-svg-face--out { stroke: var(--ink-2); stroke-dasharray: 6 4; }
.u5p-svg-cross { fill: none; stroke: var(--red-base); stroke-width: 3; stroke-linecap: round; }
.u5p-svg-coin { fill: var(--gold-tint); stroke: var(--gold-base); stroke-width: 4; }
.u5p-svg-day { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }
.u5p-svg-day--hit { fill: var(--brand-tint); stroke: var(--brand); stroke-width: 3; }

/* High contrast: no tints; letters, dashes and borders carry the marbles, the crossed faces and the states. */
body.high-contrast .u5p-marble { --marble-tint: var(--surface); --marble-edge: var(--ink); }
body.high-contrast .u5p-coin, body.high-contrast .u5p-day[data-u5p-hit] { color: var(--ink); background: var(--surface); border-color: var(--ink); }
body.high-contrast .u5p-face[data-u5p-out], body.high-contrast .u5p-day { color: var(--ink); border-color: var(--ink); }
body.high-contrast .u5p-band[data-filled] .u5p-tube { background: var(--ink); }
body.high-contrast .u5p-band[data-answer] { color: var(--ink); background: var(--surface); border-width: 4px; }
body.high-contrast .u5p-prior { color: var(--ink); border-color: var(--ink); }
body.high-contrast .u5p-board[data-settled] [data-u5p-fav] { box-shadow: 0 0 0 4px var(--ink); }
body.high-contrast svg .u5p-svg-marble, body.high-contrast .u5p-svg-coin, body.high-contrast .u5p-svg-day--hit { fill: var(--surface); stroke: var(--ink); }

/* A short landscape board (1366 × 768): the kicker goes and the scene and the bands shrink so the reason line stays above the instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.u5p-board) .question-kicker { display: none; }
  .question-card--topic:has(.u5p-board) .question-copy { margin-bottom: 8px; }
  .u5p-scene { min-height: 0; padding: 8px 12px; }
  .u5p-band { min-height: 46px; }
  .u5p-thermo { gap: 4px; }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone: the scene on top, the spark under it, the thermometer below, all above the instruction bar. */
  .u5p-board { gap: 8px; }
  .u5p-work { display: contents; }
  .u5p-scene { order: 0; gap: 4px; width: 100%; min-height: 0; padding: 6px 8px; }
  .u5p-spark { order: 1; }
  .u5p-spark:empty { display: none; }
  .u5p-thermo { order: 2; gap: 4px; width: 100%; }
  .u5p-reason { order: 3; }
  .u5p-scene__caption, .u5p-bag__caption { font-size: 15px; }
  /* Four 22 px marbles a row, so the fullest bag (12) takes three rows and both bags and the chip share one line. */
  .u5p-bags { gap: 4px; }
  .u5p-bag__marbles, .u5p-bags .u5p-bag__marbles { width: 116px; min-height: 0; gap: 3px; padding: 5px; border-radius: 14px 14px 28px 28px; }
  .u5p-bag__marbles .u5p-marble { width: 22px; height: 22px; border-width: 2px; font-size: 12px; }
  .u5p-change { padding: 2px 5px; font-size: 14px; white-space: normal; text-align: center; }
  .u5p-faces { grid-template-columns: repeat(6, minmax(0, 44px)); gap: 6px; }
  .u5p-face { height: 44px; font-size: 20px; }
  .u5p-coin { width: 72px; height: 72px; font-size: 17px; }
  .u5p-days { grid-template-columns: repeat(10, minmax(0, 30px)); gap: 3px; }
  .u5p-day { height: 36px; font-size: 16px; }
  .u5p-legend { font-size: 14px; }
  .u5p-clue { padding: 4px 10px; font-size: 16px; }
  .u5p-band { min-height: 42px; gap: 8px; padding: 0 10px; font-size: 17px; }
}