/* 8-unit-4 (plan 119): Denklem Kaçışı, Grafik Pilotu, Kaykay Rampası and Sınır Devriyesi (units/8-unit-4-boards.js)
   and the Hızlı Parmak figures (u84-figure, units/8-unit-4-core.js). Theme tokens only, so light, dark and high
   contrast follow tokens.css and the world tokens of topic-games.css. Text never sits in --world-ink outside the
   band: in the space world that ink is white. */

/* ---------- Shared ---------- */
.u84-board { width: min(100%, 1040px); }
.u84-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; }
.u84-spark:empty { visibility: hidden; }
.u84-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; }
.u84-check { min-height: var(--touch); font-size: clamp(18px, 1.7vw, 22px); }
.u84-escape__work, .u84-pilot__work, .u84-skate__work, .u84-patrol__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u84-escape__controls, .u84-pilot__controls, .u84-skate__controls, .u84-patrol__controls { display: grid; justify-items: center; gap: 10px; }
.u84-choices { display: grid; gap: 10px; width: min(100%, 360px); }
.u84-choice { padding: 6px 16px; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.2; text-align: center; white-space: nowrap; }
.u84-choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u84-choice[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }

/* Figures shared by the boards and Hızlı Parmak (drawn about 1:1 in px). */
.u84-figure { display: block; width: min(100%, 340px); height: auto; margin-inline: auto; }
.u84-figure--line { width: min(100%, 420px); }
.u84-gridline { fill: none; stroke: var(--line); stroke-width: 1; }
.u84-axis { fill: none; stroke: var(--ink); stroke-width: 2; }
.u84-tick { fill: var(--ink); font-size: 13px; font-weight: 800; }
.u84-label { fill: var(--ink); font-size: 15px; font-weight: 900; }
/* A point's name sits on a plate of paper, so an axis number under it never reads into it. */
.u84-tag { fill: var(--surface); stroke: var(--line); stroke-width: .5; }
.u84-line { stroke: var(--brand); stroke-width: 3; stroke-linecap: round; }
.u84-dot { fill: var(--red-base); stroke: var(--ink); stroke-width: 1.5; }
.u84-ramp { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.u84-leg { stroke: var(--green-base); stroke-width: 3; stroke-dasharray: 7 5; }
.u84-numline { stroke: var(--ink); stroke-width: 2; }
.u84-ray { stroke: var(--red-base); stroke-width: 6; stroke-linecap: round; }
.u84-ray-head { fill: var(--red-base); }
.u84-end { fill: var(--surface); stroke: var(--red-base); stroke-width: 3; }
.u84-end--closed { fill: var(--red-base); }

/* ---------- Denklem Kaçışı ---------- */
.u84-gate { display: grid; justify-items: center; gap: 8px; width: min(100%, 620px); padding: 10px 14px 12px; background: var(--world-model); border: 3px solid var(--world-model-edge); border-radius: 18px 18px 8px 8px; box-shadow: 0 4px 0 var(--world-band-edge); }
.u84-gate__head { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 0; }
.u84-gate__lock, .u84-gate__mult { padding: 2px 12px; color: var(--ink); background: var(--surface); border: 2px solid var(--world-model-edge); border-radius: 999px; font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; }
.u84-gate[data-open] .u84-gate__lock { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); }
.u84-equation { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 8px; margin: 0; }
.u84-equation__eq { align-self: flex-start; padding-top: 6px; color: var(--ink); font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; }
.u84-term { display: grid; justify-items: center; gap: 4px; min-width: 52px; padding: 4px 10px; color: var(--ink); background: var(--surface); border: 2px solid var(--world-model-edge); border-radius: 12px; }
.u84-term__body { font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; white-space: nowrap; }
.u84-term--zero { font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; }
.u84-term__times { padding: 0 8px; color: var(--green-ink); background: var(--green-tint); border: 2px solid var(--green-base); border-radius: 8px; font-size: clamp(17px, 1.7vw, 22px); font-weight: 900; white-space: nowrap; }
.u84-term__times[data-frac] { color: var(--ink); background: var(--red-tint); border-color: var(--red-base); border-style: dashed; }
.u84-gate__out { min-height: 1.3em; margin: 0; color: var(--ink); font-size: clamp(20px, 2vw, 26px); font-weight: 900; text-align: center; overflow-wrap: anywhere; }
.u84-gate__out:empty { display: none; }
.u84-gate__out[data-u84-cleared], .u84-gate__out[data-u84-solution] { color: var(--green-ink); }

/* ---------- Grafik Pilotu ---------- */
.u84-plane { position: relative; width: min(100%, 360px); aspect-ratio: 1; background: var(--surface); border: 2px solid var(--world-model-edge); border-radius: 12px; box-shadow: 0 4px 0 var(--world-band-edge); }
.u84-plane__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.u84-plane__svg .u84-gridline { stroke-width: .35; }
.u84-plane__svg .u84-axis { stroke-width: .7; }
.u84-plane__tick { fill: var(--ink); font-size: 3.6px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.u84-plane__name { font-style: italic; font-weight: 900; }
.u84-point-label { fill: var(--ink); font-size: 4.4px; font-weight: 900; }
.u84-plot-line { stroke: var(--green-base); stroke-width: 1.4; stroke-linecap: round; }
.u84-ghost-line { stroke: var(--red-base); stroke-width: 1; stroke-dasharray: 3 2; }
.u84-plot-dot { fill: var(--red-base); stroke: var(--ink); stroke-width: .6; }
.u84-plane__nodes { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); }
.u84-node { display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 50%; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.u84-node::before { content: ""; width: 22%; height: 22%; background: var(--ink-3); border-radius: 50%; }
.u84-node:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.u84-node[data-placed]::before { width: 52%; height: 52%; background: var(--brand); border: 2px solid var(--ink); }
.u84-node[data-missed]::before { background: var(--red-base); border-style: dashed; }
.u84-node[data-answer]::before { width: 52%; height: 52%; background: var(--green-base); border: 2px solid var(--ink); }
.u84-node:disabled { cursor: default; opacity: 1; }
.u84-pilot__line { margin: 0; padding: 4px 14px; color: var(--ink); background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 12px; font-size: clamp(20px, 2vw, 26px); font-weight: 900; white-space: nowrap; }
.u84-table { border-collapse: collapse; font-size: clamp(19px, 1.8vw, 24px); font-weight: 900; font-variant-numeric: tabular-nums; }
.u84-table th, .u84-table td { min-width: 3em; padding: 4px 10px; color: var(--ink); background: var(--surface); border: 2px solid var(--world-model-edge); text-align: center; }
.u84-table th { background: var(--world-model); font-style: italic; }
.u84-table td[data-u84-y] { background: var(--brand-tint); }

/* ---------- Kaykay Rampası ---------- */
.u84-skate__park { display: grid; justify-items: center; gap: 6px; width: min(100%, 360px); padding: 8px; background: var(--world-model); border: 3px solid var(--world-model-edge); border-radius: 18px; }
.u84-skate__figure { width: 100%; }
.u84-skate__figure .u84-figure { width: 100%; max-height: 300px; }
.u84-skate__slope { flex-basis: 100%; color: var(--ink); text-align: center; }
.u84-skate__legs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 0; color: var(--green-ink); font-size: clamp(17px, 1.6vw, 21px); font-weight: 900; }
.u84-skate__goal { margin: 0; color: var(--ink); font-size: clamp(20px, 2vw, 26px); font-weight: 900; text-align: center; }
.u84-skate__goal { padding: 4px 16px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 12px; }
.u84-skate__work--lanes { flex-direction: column; gap: 10px; }
.u84-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: clamp(8px, 1.6vw, 20px); width: min(100%, 640px); }
.u84-lane-pick { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 6px; background: var(--surface); }
.u84-lane { display: block; width: 100%; max-height: 250px; }
.u84-lane .u84-gridline { stroke-width: 1; }
.u84-lane .u84-ramp { stroke-width: 4; }
.u84-lane-pick__name { color: var(--ink); font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; white-space: nowrap; }
.u84-lane-pick[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u84-lane-pick[data-answer] { background: var(--green-tint); border: 3px solid var(--green-base); opacity: 1; }
.u84-lane-pick[data-answer] .u84-lane-pick__name { color: var(--green-ink); }

/* ---------- Sınır Devriyesi ---------- */
.u84-patrol__post { display: grid; justify-items: center; gap: 4px; width: min(100%, 460px); padding: 8px 12px; background: var(--world-model); border: 3px solid var(--world-model-edge); border-radius: 18px; }
.u84-patrol__expr { margin: 0; color: var(--ink); font-size: clamp(26px, 2.8vw, 38px); font-weight: 900; font-variant-numeric: tabular-nums; }
.u84-patrol__expr[data-u84-result] { color: var(--green-ink); }
.u84-patrol__line { width: 100%; }
.u84-patrol__line .u84-figure { width: 100%; }
.u84-signs { display: grid; grid-template-columns: repeat(4, var(--touch)); gap: 10px; }
.u84-sign { min-width: var(--touch); min-height: var(--touch); padding: 0; font-size: 28px; font-weight: 900; }
.u84-sign[aria-pressed="true"] { color: var(--ink); background: var(--brand-tint); border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.u84-stepper { display: grid; grid-template-columns: auto var(--touch) minmax(2.4em, auto) var(--touch); align-items: center; gap: 8px; }
.u84-stepper__label { color: var(--ink); font-size: clamp(17px, 1.6vw, 21px); font-weight: 900; white-space: nowrap; }
.u84-stepper__key { min-width: var(--touch); min-height: var(--touch); padding: 0; font-size: 24px; font-weight: 900; }
.u84-stepper__value { color: var(--ink); font-size: clamp(24px, 2.4vw, 32px); font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }

/* High contrast: no tints; marks speak through borders and weight. */
body.high-contrast .u84-table td[data-u84-y], body.high-contrast .u84-table th { background: var(--surface); }
body.high-contrast .u84-node::before { background: var(--ink); }

/* 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(.u84-board) .question-kicker { display: none; }
  .question-card--topic:has(.u84-board) .question-copy { margin-bottom: 8px; }
  .u84-plane { width: min(100%, 330px); }
  .u84-skate__figure .u84-figure { max-height: 260px; }
  .u84-lane { max-height: 220px; }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: smaller figures and tighter panels. */
  .u84-gate, .u84-skate__park, .u84-patrol__post { padding: 6px 8px 8px; }
  .u84-escape__work, .u84-pilot__work, .u84-skate__work, .u84-patrol__work { gap: 8px; }
  .u84-escape__controls, .u84-pilot__controls, .u84-skate__controls, .u84-patrol__controls { gap: 6px; }
  .u84-equation { gap: 6px; }
  .u84-term { min-width: 40px; padding: 2px 6px; }
  .u84-plane { width: min(100%, 290px); }
  /* The prompt already names the line; the table and the check button share one row. */
  .u84-pilot__line { display: none; }
  .u84-pilot__controls { grid-auto-flow: column; align-items: center; }
  .u84-table th, .u84-table td { min-width: 2.2em; padding: 2px 6px; }
  .u84-choices { grid-template-columns: 1fr 1fr; gap: 8px; }
  .u84-choice { padding: 4px 6px; font-size: 17px; }
  .u84-skate__figure .u84-figure { max-height: 150px; }
  .u84-lane { max-height: 26vh; }
  .u84-lane-pick__name { font-size: 15px; }
  .u84-signs { gap: 8px; }
}