/* 8-unit-3 (plan 119): Şans Kasası, Cebir Atölyesi, Özdeşlik Kartları and Parça Birleştir (units/8-unit-3-boards.js)
   and the Hızlı Parmak figures (u83-figure, units/8-unit-3-core.js). Theme tokens only, so light, dark and high
   contrast follow tokens.css and the world tokens of topic-games.css. */

/* ---------- Shared ---------- */
.u83-board { width: min(100%, 1040px); }
.u83-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; }
.u83-spark:empty { visibility: hidden; }
.u83-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; }
.u83-check { min-height: var(--touch); font-size: clamp(18px, 1.7vw, 22px); }
.u83-choices { display: grid; gap: 10px; width: min(100%, 460px); }
.u83-choice { padding: 6px 16px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.u83-choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u83-choice[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }
.u83-stepper { display: grid; grid-template-columns: auto var(--touch) minmax(2.4em, auto) var(--touch); align-items: center; gap: 8px; }
.u83-stepper__label { color: var(--ink); font-size: clamp(17px, 1.6vw, 21px); font-weight: 900; white-space: nowrap; }
.u83-stepper__key { min-width: var(--touch); min-height: var(--touch); padding: 0; font-size: 24px; font-weight: 900; }
.u83-stepper__value { color: var(--world-ink); font-size: clamp(24px, 2.4vw, 32px); font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }

/* Figures shared by the boards and Hızlı Parmak. */
.u83-figure { display: block; width: min(100%, 340px); height: auto; margin-inline: auto; }
.u83-label { fill: var(--ink); font-size: 16px; font-weight: 900; }
.u83-head, .u83-side { fill: var(--world-ink, var(--brand-ink)); font-size: 17px; font-weight: 900; }
.u83-sector { stroke: var(--ink); stroke-width: 2; }
.u83-sector--a { fill: var(--brand-tint); }
.u83-sector--b { fill: var(--surface); }
.u83-hub, .u83-needle { fill: var(--ink); }
.u83-cell { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.u83-cell--asked { fill: var(--brand-tint); }
.u83-part { stroke: var(--ink); stroke-width: 2; }
.u83-part--sq { fill: var(--brand-tint); }
.u83-part--bar { fill: var(--green-tint); }
.u83-part--unit { fill: var(--coral-tint, var(--red-tint)); }
.u83-part--ghost { fill: none; stroke-dasharray: 6 5; }
.u83-part--shade { fill: var(--brand-tint); }
.u83-part--cut { fill: var(--surface); stroke-dasharray: 6 4; }
.u83-part[data-flash] { stroke: var(--red-base); stroke-width: 4; stroke-dasharray: none; }
.u83-tile { stroke: var(--ink); stroke-width: 1.5; }
.u83-tile--sq { fill: var(--brand-tint); }
.u83-tile--bar { fill: var(--green-tint); }
.u83-tile--unit { fill: var(--coral-tint, var(--red-tint)); }
.u83-tile--rest { stroke: var(--red-base); stroke-width: 2.5; stroke-dasharray: 4 3; }

/* ---------- Şans Kasası ---------- */
.u83-vault__work, .u83-atelier__work, .u83-identity__work, .u83-tiles__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u83-vault__safe { display: grid; gap: 8px; width: min(100%, 620px); padding: 10px 14px 12px; background: var(--world-model); border: 3px solid var(--world-model-edge); border-radius: 18px; box-shadow: 0 4px 0 var(--world-band-edge); }
.u83-vault__head, .u83-atelier__product { margin: 0; color: var(--world-ink); font-family: var(--font-display); font-size: clamp(17px, 1.6vw, 21px); font-weight: 900; letter-spacing: .04em; }
.u83-vault__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.u83-card { display: grid; place-items: center; min-width: 0; min-height: var(--touch); padding: 0; font-size: clamp(19px, 1.8vw, 24px); font-weight: 900; font-variant-numeric: tabular-nums; border-radius: 10px; }
.u83-card--fixed { color: var(--ink); background: var(--surface); border: 2px solid var(--line); }
.u83-card[aria-pressed="true"] { color: var(--world-ink); background: var(--world-band); border-color: var(--world-model-edge); box-shadow: inset 0 0 0 2px var(--world-model-edge); }
.u83-card[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u83-card[data-answer] { color: var(--green-ink); background: var(--green-tint); border: 3px solid var(--green-base); opacity: 1; }
.u83-vault__count { margin: 0; color: var(--ink); font-size: clamp(17px, 1.6vw, 20px); font-weight: 800; }
.u83-vault__controls, .u83-atelier__controls, .u83-identity__controls, .u83-tiles__controls { display: grid; justify-items: center; gap: 10px; }
.u83-meter { padding: 4px 14px 0; }
.u83-meter__bar { position: relative; height: 12px; margin: 22px 0 6px; background: linear-gradient(90deg, var(--surface), var(--brand-tint)); border: 2px solid var(--ink); border-radius: 999px; }
.u83-meter__tick { position: absolute; top: 14px; color: var(--ink); font-size: 15px; font-weight: 900; transform: translateX(-50%); }
.u83-meter__pin { position: absolute; bottom: 14px; padding: 0 6px; color: var(--ink); background: var(--red-tint); border: 2px solid var(--red-base); border-radius: 8px; font-size: 15px; font-weight: 900; white-space: nowrap; transform: translateX(-50%); }
.u83-meter__pin[data-kind="answer"] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); }
.u83-meter__name { display: flex; justify-content: space-between; margin: 24px 0 0; color: var(--ink-2); font-size: 14px; font-weight: 800; }

/* ---------- Cebir Atölyesi ---------- */
.u83-atelier__sheet { display: grid; justify-items: center; gap: 8px; width: min(100%, 520px); padding: 10px 14px 12px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 18px; }
.u83-grid { display: grid; grid-template-columns: minmax(48px, auto) 1.7fr 1fr; width: 100%; }
.u83-grid__corner, .u83-grid__head { display: grid; place-items: center; padding: 4px 8px; color: var(--world-ink); font-size: clamp(18px, 1.8vw, 23px); font-weight: 900; }
.u83-grid__corner { color: var(--ink-2); }
.u83-grid__cell { display: grid; place-items: center; min-height: 58px; padding: 6px; color: var(--ink); background: var(--surface); border: 2px solid var(--ink); margin: -1px 0 0 -1px; font-size: clamp(19px, 1.9vw, 25px); font-weight: 900; }
.u83-grid__cell--xx { min-height: 84px; }
.u83-grid__cell[data-asked] { background: var(--brand-tint); border-style: dashed; }
.u83-grid__cell[data-shown] { color: var(--ink); border-style: solid; }
.u83-grid__cell[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); border-style: solid; }
.u83-atelier__sum { min-height: 1.3em; margin: 0; color: var(--ink); font-size: clamp(18px, 1.8vw, 23px); font-weight: 900; text-align: center; overflow-wrap: anywhere; }
.u83-atelier__sum[data-solved] { color: var(--green-ink); }
.u83-atelier__ask { margin: 0; color: var(--world-ink); font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; text-align: center; }

/* ---------- Özdeşlik Kartları ---------- */
.u83-identity__sheet { width: min(100%, 320px); padding: 6px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u83-identity__sheet .u83-figure { width: 100%; }
.u83-identity__sheet[data-solved] .u83-part--shade { stroke: var(--green-base); stroke-width: 3; }
.u83-identity__line { margin: 0; color: var(--ink); font-size: clamp(20px, 2vw, 26px); font-weight: 900; text-align: center; overflow-wrap: anywhere; }
.u83-identity__line[data-answer] { color: var(--green-ink); }

/* ---------- Parça Birleştir ---------- */
.u83-tiles__table { display: grid; justify-items: center; gap: 6px; width: min(100%, 560px); padding: 10px 14px 12px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 18px; }
.u83-tiles__hand { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; margin: 0; color: var(--ink); font-size: clamp(16px, 1.5vw, 19px); font-weight: 800; }
.u83-tiles__hand strong { color: var(--world-ink); font-size: clamp(20px, 2vw, 26px); font-weight: 900; }
.u83-tiles__preview { display: grid; place-items: center; width: 100%; min-height: 120px; }
.u83-tiles__preview .u83-figure { width: auto; max-width: 100%; max-height: 240px; }
.u83-tiles__preview .u83-figure--rows { width: 100%; max-height: 220px; }
.u83-tiles__preview[data-solved] .u83-tile { stroke: var(--green-base); }
.u83-tiles__built { min-height: 1.3em; margin: 0; color: var(--ink); font-size: clamp(16px, 1.5vw, 19px); font-weight: 800; text-align: center; }
.u83-tiles__result { min-height: 1.3em; margin: 0; color: var(--green-ink); font-size: clamp(22px, 2.2vw, 28px); font-weight: 900; }
.u83-tiles__result:empty { visibility: hidden; }

/* High contrast: no tints; marks speak through borders and weight. */
body.high-contrast .u83-part--sq, body.high-contrast .u83-part--bar, body.high-contrast .u83-part--unit, body.high-contrast .u83-part--shade,
body.high-contrast .u83-tile, body.high-contrast .u83-sector--a, body.high-contrast .u83-cell--asked { fill: var(--surface); }
body.high-contrast .u83-meter__bar { background: var(--surface); }

/* A short landscape board (1366 × 768): the kicker goes, as on the units 1–2 boards, and the figures slim so the
   controls stand above the instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.u83-board) .question-kicker { display: none; }
  .question-card--topic:has(.u83-board) .question-copy { margin-bottom: 8px; }
  .u83-identity__sheet { width: min(100%, 280px); }
  .u83-tiles__preview .u83-figure { max-height: 200px; }
  .u83-grid__cell { min-height: 50px; }
  .u83-grid__cell--xx { min-height: 70px; }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: smaller figures and tighter cards. */
  .u83-vault__safe, .u83-atelier__sheet, .u83-tiles__table { padding: 6px 8px 8px; }
  .u83-vault__cards { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .u83-identity__sheet { width: min(100%, 220px); }
  .u83-identity__sheet .u83-figure { max-height: 19vh; }
  .u83-choices { gap: 8px; }
  .u83-choice { padding: 4px 8px; font-size: 17px; }
  /* The prompt already names the product; the empty sum and result lines take no room until the end. */
  .u83-atelier__product { display: none; }
  .u83-atelier__sum:empty, .u83-tiles__result:empty { display: none; }
  .u83-atelier__sheet, .u83-tiles__table { gap: 4px; }
  .u83-atelier__controls, .u83-tiles__controls { gap: 6px; }
  .u83-grid__cell { min-height: 40px; padding: 2px; }
  .u83-grid__cell--xx { min-height: 48px; }
  .u83-tiles__preview { min-height: 0; }
  .u83-tiles__preview .u83-figure { max-height: 15vh; }
  .u83-stepper { gap: 6px; }
  .u83-meter__bar { margin-top: 20px; }
  /* In the chance stage the cards are a picture, not buttons, and the prompt names the vault: shorter cards in more
     columns and no head, so the fraction keypad stays above the instruction bar. */
  .u83-vault:not([data-task="pick"]) .u83-vault__head { display: none; }
  .u83-vault:not([data-task="pick"]) .u83-vault__cards { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .u83-vault:not([data-task="pick"]) .u83-card--fixed { min-height: 30px; font-size: 17px; }
}