/* 8-unit-6 (plan 119): Koordinat Işınlayıcı, Ambalaj Mühendisi and Açınım Arkeoloğu (units/8-unit-6-boards.js) and
   the Hızlı Parmak figures (u86-figure, units/8-unit-6-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. Net faces: bases sky, sides green, what a wrong answer counted red. */

/* ---------- Shared ---------- */
.u86-board { width: min(100%, 1060px); }
.u86-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; }
.u86-spark:empty { visibility: hidden; }
.u86-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; }
.u86-work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u86-controls { display: grid; justify-items: center; gap: 10px; }
.u86-stage { display: grid; justify-items: center; gap: 6px; width: min(100%, 600px); 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); }
.u86-stage .u86-figure { width: 100%; max-height: 320px; }
.u86-figure-slot { width: 100%; }
.u86-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; }

/* ---------- Koordinat Işınlayıcı: the plane is paper; the points to tap sit on it as round keys ---------- */
/* The stage sets the plane's size; the figure fills it exactly, so the keys' percentages land on the grid points. */
.u86-stage--plane { width: min(100%, 452px); padding: 6px; }
.u86-plane { position: relative; width: 100%; aspect-ratio: 1; }
.u86-stage--plane .u86-plane .u86-figure { width: 100%; max-height: none; }
.u86-spot { position: absolute; display: grid; place-items: center; aspect-ratio: 1; min-width: 44px; min-height: 44px; padding: 0; color: var(--ink); background: var(--surface); border: 4px solid var(--brand); border-radius: 999px; box-shadow: 0 3px 0 var(--line-strong); font: inherit; font-size: clamp(18px, 1.9vw, 24px); font-weight: 900; line-height: 1; cursor: pointer; transform: translate(-50%, -50%); touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 120ms ease-out; }
.u86-spot:active:not(:disabled) { transform: translate(-50%, -50%) scale(.94); }
@media (hover: hover) and (pointer: fine) { .u86-spot:hover:not(:disabled) { background: var(--brand-tint); } }
.u86-spot:focus-visible { outline: 4px solid var(--ink); outline-offset: 2px; }
.u86-spot:disabled { cursor: default; }
.u86-spot[data-missed] { color: var(--red-ink); background: var(--red-tint); border-color: var(--red-base); border-style: dashed; box-shadow: none; }
.u86-spot[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); }
.u86-spot:disabled:not([data-missed]):not([data-answer]) { opacity: .55; }

/* ---------- Açınım Arkeoloğu, eşleştir: the dug-out solid and the three nets as keys ---------- */
.u86-stage--solid { width: min(100%, 260px); }
.u86-stage--solid .u86-figure { max-height: 250px; }
.u86-nets { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.u86-net-choice { position: relative; display: grid; place-items: center; width: clamp(150px, 17vw, 220px); aspect-ratio: 1; padding: 30px 10px 10px; background: var(--surface); }
.u86-net-choice .u86-figure { width: 100%; height: 100%; max-height: none; }
.u86-net-letter { position: absolute; top: 4px; left: 10px; color: var(--ink); font-size: clamp(20px, 2vw, 26px); font-weight: 900; }
.u86-net-choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u86-net-choice[data-missed] .u86-net-letter { color: var(--red-ink); }
.u86-net-choice[data-answer] { background: var(--green-tint); border-color: var(--green-base); opacity: 1; }
.u86-net-choice[data-answer] .u86-net-letter { color: var(--green-ink); }

/* ---------- Figures shared by the boards and Hızlı Parmak ---------- */
.u86-figure { display: block; width: min(100%, 340px); height: auto; margin-inline: auto; overflow: visible; }
.u86-label, .u86-name { fill: var(--ink); font-weight: 900; }
/* A label sits on a plate of paper, so a line under it never reads into it. */
.u86-tag { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
/* The plane: paper, light grid, the axes in ink (the mirror axis bold), numbers haloed so lines never cross them. */
.u86-figure--plane { width: min(100%, 360px); background: var(--surface); border-radius: 12px; }
.u86-grid-line { stroke: var(--line); stroke-width: 1.5; }
.u86-axis { stroke: var(--ink); stroke-width: 2.5; }
.u86-axis--mirror { stroke: var(--brand); stroke-width: 6; }
.u86-axis-head { fill: var(--ink); }
.u86-tick { fill: var(--ink-2); font-weight: 800; paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.u86-axis-name { fill: var(--ink); font-weight: 900; font-style: italic; }
.u86-dot { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.u86-dot--p { fill: var(--brand); }
.u86-dot--given { fill: var(--sky-base); }
.u86-dot--image { fill: var(--green-base); }
.u86-arrow { color: var(--ink-2); }
.u86-arrow-line { stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.u86-arrow-head { fill: currentColor; }
.u86-arrow--given { color: var(--sky-base); }
.u86-arrow--true { color: var(--green-base); }
.u86-arrow--ghost { color: var(--red-base); }
.u86-arrow--ghost .u86-arrow-line { stroke-dasharray: 8 6; }
.u86-mirror-line { stroke: var(--green-base); stroke-width: 4; stroke-dasharray: 3 7; stroke-linecap: round; }
/* Nets and solids. */
.u86-face { stroke-width: 2.5; stroke-linejoin: round; }
.u86-face--base { fill: var(--sky-tint); stroke: var(--sky-base); }
.u86-face--side { fill: var(--green-tint); stroke: var(--green-base); }
.u86-face.is-lit { fill: var(--red-tint); stroke: var(--red-base); stroke-width: 4; }
.u86-face--ghost { stroke-dasharray: 9 6; }
/* A settled round marks what the answer counted in the brand colour: red stays for what a wrong answer counted. */
[data-found] .u86-face.is-lit { fill: var(--brand-tint); stroke: var(--brand); }
[data-found] .u86-edge.is-lit { stroke: var(--brand); }
[data-found] .u86-corner.is-lit { fill: var(--brand); }
.u86-edge.is-lit { stroke: var(--red-base); stroke-width: 6; stroke-linecap: round; }
.u86-corner.is-lit { fill: var(--red-base); stroke: var(--ink); stroke-width: 2; }
.u86-measure { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 4; }
.u86-solid { fill: var(--green-tint); }
.u86-solid-edge { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.u86-hidden { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 6 5; }

/* High contrast: no tints; faces speak through their borders, the lit ones through a heavier dashed one. */
body.high-contrast .u86-face, body.high-contrast .u86-solid, body.high-contrast [data-found] .u86-face.is-lit { fill: var(--surface); }
body.high-contrast .u86-face.is-lit { stroke-width: 6; stroke-dasharray: 10 5; }

/* 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(.u86-board) .question-kicker { display: none; }
  .question-card--topic:has(.u86-board) .question-copy { margin-bottom: 8px; }
  .u86-stage .u86-figure { max-height: 290px; }
  .u86-stage--plane { width: min(100%, 340px); }
  .u86-net-choice { width: clamp(150px, 15vw, 200px); }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: smaller figures and tighter panels. */
  .u86-work { gap: 8px; }
  .u86-controls { gap: 6px; }
  .u86-stage { padding: 4px 6px; }
  .u86-stage .u86-figure { max-height: 200px; }
  .u86-stage--plane { width: min(100%, 272px); }
  .u86-spot { border-width: 3px; font-size: 17px; }
  .u86-stage--solid { width: min(100%, 200px); }
  .u86-stage--solid .u86-figure { max-height: 130px; }
  .u86-nets { gap: 6px; }
  .u86-net-choice { width: calc((100% - 12px) / 3); padding: 24px 4px 4px; }
  .u86-net-letter { top: 2px; left: 6px; font-size: 18px; }
}