/* 6-measurement (plan 119): Birim Dönüştürücü, Arazi Planlayıcısı, Pi Laboratuvarı and Yay Radarı
   (units/6-measurement-boards.js) and the Hızlı Parmak figures (u6m-figure, units/6-measurement-core.js). Theme
   tokens only, so light, dark and high contrast follow tokens.css and the world tokens of topic-games.css. */

/* ---------- Shared ---------- */
.u6m-board { width: min(100%, 1040px); }
.u6m-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; }
.u6m-spark:empty { visibility: hidden; }
.u6m-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; }
.u6m-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 420px; }
.u6m-choice { min-width: 150px; padding: 6px 16px; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; text-align: center; }
.u6m-choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u6m-choice[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }
.u6m-board [data-answer]:not(.u6m-choice) { color: var(--green-ink); }

/* Lines and shapes, shared by the boards and the Hızlı Parmak figures. */
.u6m-shape { fill: var(--world-band, var(--brand-tint)); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.u6m-dash { stroke-dasharray: 7 6; }
.u6m-height { fill: none; stroke: var(--world-accent, var(--coral-base)); stroke-width: 3; }
.u6m-measure { stroke: var(--world-accent, var(--coral-base)); stroke-width: 4; stroke-linecap: round; }
.u6m-hub { fill: var(--ink); }
.u6m-ring { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.u6m-slice { fill: var(--gold-base, var(--brand-tint)); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.u6m-label { fill: var(--ink); font-size: 17px; font-weight: 900; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.u6m-label--soft { fill: var(--ink-2); font-style: italic; }
.u6m-label--angle { font-size: 15px; }
.u6m-grid { fill: none; stroke: var(--line); stroke-width: 1; }

/* ---------- Hızlı Parmak figures ---------- */
.u6m-figure { display: block; width: min(100%, 320px); height: auto; margin-inline: auto; }
.u6m-figure .u6m-shape { fill: var(--brand-tint); }

/* ---------- Keypad boards: the work on the left, the keypad on the right (stacked on a phone) ---------- */
.u6m-ladder__work, .u6m-planner__work, .u6m-pilab__work, .u6m-radarboard__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }

/* ---------- Birim Dönüştürücü ---------- */
.u6m-ladder__rail { display: grid; gap: 0; margin: 0; padding: 0 0 0 6px; list-style: none; border-left: 6px solid var(--world-model-edge); border-right: 6px solid var(--world-model-edge); border-radius: 6px; }
.u6m-ladder__rung { position: relative; display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-bottom: 4px solid var(--world-model-edge); }
.u6m-ladder__rung:last-child { border-bottom: 0; }
.u6m-ladder__unit { min-width: 6.5em; color: var(--ink-2); font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; white-space: nowrap; }
.u6m-ladder__rung[data-on] .u6m-ladder__unit { color: var(--world-ink); }
.u6m-ladder__rung[data-from] .u6m-ladder__unit,
.u6m-ladder__rung[data-to] .u6m-ladder__unit { padding: 2px 10px; color: var(--ink); background: var(--surface); border: 3px solid var(--brand); border-radius: 10px; font-weight: 900; }
.u6m-ladder__rung[data-to] .u6m-ladder__unit { border-style: dashed; border-color: var(--coral-base); }
.u6m-ladder__rung[data-answer] .u6m-ladder__unit { color: var(--green-ink); background: var(--green-tint); border: 3px solid var(--green-base); }
.u6m-ladder__step { position: absolute; right: -76px; bottom: -16px; z-index: 1; padding: 0 8px; color: var(--ink-2); background: var(--surface); border: 2px solid var(--line); border-radius: 999px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.u6m-ladder__step[data-on] { color: var(--world-ink); background: var(--world-band); border-color: var(--world-model-edge); font-weight: 900; }
.u6m-ladder__rail { margin-right: 76px; }
.u6m-ladder__model { display: grid; justify-items: center; gap: 6px; margin: 0; }
.u6m-square { display: block; width: clamp(120px, 14vw, 170px); height: auto; }
.u6m-square__big { fill: var(--world-band); stroke: var(--ink); stroke-width: 3; }
.u6m-square__cuts { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.u6m-square__one { fill: var(--brand); stroke: var(--ink); stroke-width: 2; }
.u6m-ladder__caption { color: var(--world-ink); font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; text-align: center; }

/* ---------- Arazi Planlayıcısı ---------- */
.u6m-planner__sheet { display: grid; justify-items: center; gap: 8px; width: min(100%, 480px); padding: 8px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u6m-paper { display: block; width: 100%; height: auto; background: var(--surface); border-radius: 8px; }
.u6m-plot { fill: var(--world-band); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.u6m-plot--moved { fill: var(--gold-tint, var(--world-band)); stroke: var(--world-accent); stroke-dasharray: 8 5; }
.u6m-plot--ghost { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 4 5; }
.u6m-cutline { stroke: var(--world-accent); stroke-width: 3; }
.u6m-planner__move { min-height: var(--touch); font-size: clamp(18px, 1.7vw, 22px); }
.u6m-planner__note { margin: 0; color: var(--world-ink); font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; text-align: center; }

/* ---------- Pi Laboratuvarı ---------- */
.u6m-pilab__bench { display: grid; justify-items: center; gap: 4px; width: min(100%, 520px); padding: 8px 10px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u6m-pilab__pi { margin: 0; padding: 0 14px; color: var(--world-ink); background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 999px; font-size: clamp(18px, 1.8vw, 24px); font-weight: 900; }
.u6m-track { display: block; width: 100%; height: auto; overflow: visible; }
.u6m-ground { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.u6m-tick { stroke: var(--ink-2); stroke-width: 3; }
.u6m-tick__label { fill: var(--ink-2); font-size: 15px; font-weight: 800; }
.u6m-tyre { fill: var(--surface); stroke: var(--ink); stroke-width: 8; }
.u6m-spoke { stroke: var(--ink-2); stroke-width: 3; }
.u6m-trace { stroke: var(--world-accent); stroke-width: 7; stroke-linecap: round; stroke-dasharray: var(--u6m-turn); stroke-dashoffset: var(--u6m-turn); }
.u6m-trace--given { stroke-dasharray: none; stroke-dashoffset: 0; }
/* The carriage carries the wheel and its size label along the track; only the wheel itself turns. */
.u6m-roller { transform-box: view-box; transform-origin: 56px 116px; }
[data-rolled] .u6m-trace { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(.45, 0, .25, 1); }
[data-rolled] .u6m-carriage { transform: translateX(var(--u6m-turn)); transition: transform 1.4s cubic-bezier(.45, 0, .25, 1); }
[data-rolled] .u6m-roller { transform: rotate(360deg); transition: transform 1.4s cubic-bezier(.45, 0, .25, 1); }
.u6m-pilab__readout { min-height: 1.3em; margin: 0; color: var(--world-ink); font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  [data-rolled] .u6m-trace, [data-rolled] .u6m-carriage, [data-rolled] .u6m-roller { transition: none; }
}

/* ---------- Yay Radarı: a dark screen in every theme, its own light text ---------- */
/* A monitor, not a disc: the figure is taller than wide (the arc label sits above the rings). */
.u6m-radarboard__screen { width: min(100%, 340px); padding: 6px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 24px; }
.u6m-radar { display: block; width: 100%; height: auto; }
.u6m-radar__ring { fill: none; stroke: var(--world-model-edge); stroke-width: 2; }
.u6m-radar__slice { fill: var(--gold-base, var(--world-accent)); fill-opacity: .7; stroke: var(--gold-base, var(--world-accent)); stroke-width: 3; stroke-linejoin: round; }
.u6m-radar__beam { stroke: var(--world-ink); stroke-width: 3; stroke-linecap: round; }
.u6m-radar__dot { fill: var(--world-ink); }
.u6m-radar__label { fill: var(--world-ink); font-size: 18px; font-weight: 900; }
.u6m-radar__angle { fill: var(--ink); font-size: 17px; font-weight: 900; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.u6m-radarboard__controls { display: grid; justify-items: center; gap: 10px; }
.u6m-radarboard__pi { margin: 0; color: var(--world-ink); font-size: clamp(17px, 1.6vw, 20px); font-weight: 900; text-align: center; }

/* High contrast: no tints; marks speak through borders and weight. */
body.high-contrast .u6m-plot--moved { fill: none; }
body.high-contrast .u6m-radar__slice { fill: var(--ink); fill-opacity: .25; stroke: var(--ink); }

/* A short landscape board (1366 × 768): the kicker goes, as on the units 1–2 boards, and the figures slim so the
   reason line stays above the instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.u6m-board) .question-kicker { display: none; }
  .question-card--topic:has(.u6m-board) .question-copy { margin-bottom: 8px; }
  .u6m-ladder__rung { min-height: 34px; }
  .u6m-planner__sheet { width: min(100%, 420px); }
  .u6m-paper { max-height: 34vh; }
  .u6m-pilab__bench { width: min(100%, 460px); }
  .u6m-radarboard__screen { width: min(100%, 290px); }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: only the rungs of the round, smaller
     figures, two choices a row. */
  .u6m-choices { gap: 8px; }
  .u6m-choice { min-width: 0; flex: 1 1 40%; }
  .u6m-ladder__work, .u6m-planner__work, .u6m-pilab__work, .u6m-radarboard__work { gap: 8px; }
  .u6m-ladder__rung[data-off-path] { display: none; }
  .u6m-ladder__step:not([data-on]) { display: none; }
  .u6m-ladder__rung { min-height: 36px; }
  .u6m-ladder__model { grid-template-columns: auto auto; align-items: center; }
  .u6m-square { width: 76px; }
  .u6m-ladder__caption { font-size: 15px; }
  .u6m-planner__sheet, .u6m-pilab__bench { gap: 4px; padding: 4px 6px; }
  .u6m-paper { max-height: 20vh; }
  .u6m-track { max-height: 15vh; }
  .u6m-radarboard__screen { width: min(50%, 180px); }
  .u6m-radarboard__pi { font-size: 15px; }
}