/* 8-unit-5 (plan 119): Üçgen Mimarı, Kayıp Kenar and Ölçek Aynası (units/8-unit-5-boards.js) and the Hızlı Parmak
   figures (u85-figure, units/8-unit-5-core.js). Theme tokens only, so light, dark and high contrast follow
   tokens.css and the world tokens of topic-games.css. Text sits on --surface or the world's model paper, never in
   --world-ink outside the band. */

/* ---------- Shared ---------- */
.u85-board { width: min(100%, 1060px); }
.u85-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; }
.u85-spark:empty { visibility: hidden; }
.u85-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; }
.u85-check { min-height: var(--touch); font-size: clamp(18px, 1.7vw, 22px); }
.u85-work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u85-controls { display: grid; justify-items: center; gap: 10px; }
.u85-stage { display: grid; justify-items: center; gap: 6px; width: min(100%, 460px); padding: 8px; background: var(--world-model); border: 3px solid var(--world-model-edge); border-radius: 18px; box-shadow: 0 4px 0 var(--world-band-edge); }
.u85-stage--wide { width: min(100%, 600px); }
.u85-stage--maps { width: min(100%, 580px); }
.u85-stage .u85-figure { width: 100%; max-height: 330px; }
.u85-stage > div { width: 100%; }
.u85-choices { display: grid; gap: 10px; width: min(100%, 300px); }
.u85-choice { min-height: var(--touch); padding: 6px 16px; font-size: clamp(20px, 1.9vw, 26px); font-weight: 900; line-height: 1.2; text-align: center; white-space: nowrap; }
.u85-choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u85-choice[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }
.u85-result { margin: 0; padding: 2px 14px; color: var(--green-ink); background: var(--surface); border: 2px solid var(--green-base); border-radius: 12px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.u85-stepper { display: grid; grid-template-columns: auto var(--touch) minmax(2.4em, auto) var(--touch); align-items: center; gap: 8px; }
.u85-stepper__label { color: var(--ink); font-size: clamp(17px, 1.6vw, 21px); font-weight: 900; white-space: nowrap; }
.u85-stepper__key { min-width: var(--touch); min-height: var(--touch); padding: 0; font-size: 24px; font-weight: 900; }
.u85-stepper__value { color: var(--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 (drawn about 1:1 in px) ---------- */
.u85-figure { display: block; width: min(100%, 340px); height: auto; margin-inline: auto; }
.u85-label { fill: var(--ink); font-weight: 900; }
.u85-label--missing, .u85-label--miss { fill: var(--red-ink); }
/* A label sits on a plate of paper, so a line under it never reads into it. */
.u85-tag { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.u85-tri { fill: var(--brand-tint); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.u85-tri--right { fill: var(--surface); }
.u85-right { fill: none; stroke: var(--ink); stroke-width: 2; }
.u85-arc { fill: var(--green-tint); stroke: var(--green-base); stroke-width: 3; }
.u85-side-mark { stroke: var(--green-base); stroke-width: 7; stroke-linecap: round; }
.u85-square { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.u85-square--missing { fill: var(--red-tint); stroke: var(--red-base); stroke-dasharray: 8 5; }
.u85-reach { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 6 6; }
.u85-base { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.u85-rod { stroke-width: 9; stroke-linecap: round; }
.u85-rod--a { stroke: var(--brand); }
.u85-rod--b { stroke: var(--red-base); }
.u85-hinge { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.u85-apex { fill: var(--green-base); stroke: var(--ink); stroke-width: 3; }
.u85-gap { fill: none; stroke: var(--red-base); stroke-width: 3; stroke-dasharray: 6 4; }
/* Scenes: ground, wall and ladder, a garden path, a kite on its string, a tablet. */
.u85-ground { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.u85-wall { fill: var(--line); stroke: var(--ink); stroke-width: 2; }
.u85-ladder { stroke: var(--brand); stroke-width: 5; stroke-linecap: round; }
.u85-rung { stroke: var(--brand); stroke-width: 3; }
.u85-garden { fill: var(--green-tint); stroke: var(--green-base); stroke-width: 3; }
.u85-path { stroke: var(--ink); stroke-width: 5; stroke-dasharray: 10 6; stroke-linecap: round; }
.u85-tablet { fill: var(--ink); stroke: var(--ink); stroke-width: 2; }
.u85-screen { fill: var(--brand-tint); }
.u85-diagonal { stroke: var(--red-base); stroke-width: 4; stroke-linecap: round; }
.u85-drop { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 6 5; }
.u85-string { stroke: var(--ink); stroke-width: 2.5; }
.u85-kite { fill: var(--red-base); stroke: var(--ink); stroke-width: 2; }
.u85-kid { fill: var(--brand); stroke: var(--ink); stroke-width: 2; }
.u85-kid-body { stroke: var(--brand); stroke-width: 6; stroke-linecap: round; }
/* Maps: two grids of paper, the shape in the world's colour, the copy in red, a wrong k's ghost dashed. */
.u85-panel { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.u85-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.u85-caption { fill: var(--ink); font-weight: 900; }
.u85-poly { fill: var(--brand-tint); stroke: var(--brand); stroke-width: 3; stroke-linejoin: round; }
.u85-poly--copy { fill: var(--red-tint); stroke: var(--red-base); }
.u85-edge { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.u85-ghost { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-dasharray: 7 5; }

/* High contrast: no tints; marks speak through borders and weight. */
body.high-contrast .u85-tri, body.high-contrast .u85-poly, body.high-contrast .u85-screen, body.high-contrast .u85-garden { fill: 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(.u85-board) .question-kicker { display: none; }
  .question-card--topic:has(.u85-board) .question-copy { margin-bottom: 8px; }
  .u85-stage .u85-figure { max-height: 290px; }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: smaller figures and tighter panels. */
  .u85-work { gap: 8px; }
  .u85-controls { gap: 6px; }
  .u85-stage { padding: 4px 6px; }
  .u85-stage .u85-figure { max-height: 200px; }
  /* A story round carries a four-line prompt and the unit beside the keypad: its scene gives up a little height. */
  .u85-stage .u85-figure--scene { max-height: 176px; }
  /* The choices share one row, each as wide as its word ("Benzer değil" needs more room than "Eş"). */
  .u85-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
  .u85-choice { flex: 1 1 auto; padding: 4px 10px; font-size: 18px; }
}