/* 6-algebra (plan 119): Gizemli Kutu, Kural Fabrikası and Kod Akışı (units/6-algebra-boards.js) and the Hızlı
   Parmak figures (u6a-figure, units/6-algebra-core.js). Theme tokens only, so light, dark and high contrast follow
   tokens.css and the world tokens of topic-games.css. */

/* ---------- Shared ---------- */
.u6a-board { width: min(100%, 1040px); }
.u6a-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; }
.u6a-spark:empty { visibility: hidden; }
.u6a-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; }
.u6a-title { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(16px, 1.5vw, 20px); font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.u6a-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.u6a-choice { min-width: 150px; padding: 6px 16px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.2; text-align: center; white-space: nowrap; }
.u6a-choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u6a-choice[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }

/* ---------- The scale (board and Hızlı Parmak) ---------- */
.u6a-figure { display: block; width: min(100%, 380px); height: auto; margin-inline: auto; overflow: visible; }
.u6a-stand { fill: var(--world-model-edge, var(--line)); }
.u6a-beam { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.u6a-pivot { fill: var(--ink); }
.u6a-string { fill: none; stroke: var(--ink-2); stroke-width: 2; }
.u6a-pan { fill: var(--world-band, var(--brand-tint)); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.u6a-box__body { fill: var(--brand); stroke: var(--ink); stroke-width: 2; }
.u6a-box__text { fill: var(--surface); font-size: 16px; font-weight: 900; }
.u6a-box--small .u6a-box__text { font-size: 11px; }
.u6a-weight__knob { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.u6a-weight__body { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.u6a-weight__text { fill: var(--ink); font-size: 15px; font-weight: 900; }

/* The flow figure (Hızlı Parmak). */
.u6a-figure--flow { width: min(100%, 520px); }
.u6a-arrow { fill: none; stroke: var(--ink-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.u6a-figure--flow .u6a-flow__tag { fill: var(--ink-2); font-size: 13px; font-weight: 800; }
.u6a-figure--flow .u6a-flow__node { fill: var(--brand-tint); stroke: var(--brand); stroke-width: 2.5; }
.u6a-figure--flow .u6a-flow__node--end { fill: var(--surface); stroke: var(--ink); }
.u6a-figure--flow .u6a-flow__text { fill: var(--ink); font-size: 18px; font-weight: 900; }

/* ---------- Gizemli Kutu ---------- */
.u6a-box-board__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u6a-box-board__scale { display: grid; justify-items: center; gap: 8px; width: min(100%, 480px); }
.u6a-scale { width: 100%; padding: 6px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u6a-scale .u6a-figure { width: 100%; }
.u6a-scale[data-tilt="left"],
.u6a-scale[data-tilt="right"] { border-color: var(--red-base); border-style: dashed; }
.u6a-equation { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.u6a-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; }
.u6a-takes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.u6a-take { min-width: 96px; font-size: clamp(18px, 1.7vw, 22px); white-space: nowrap; }
.u6a-box-board__pad { display: grid; justify-items: center; gap: 6px; }
.u6a-box-board[data-task="write"] .u6a-choices { flex-direction: column; align-items: stretch; }
.u6a-mini[hidden] { display: none; }
.u6a-mini { display: grid; justify-items: center; gap: 2px; width: min(100%, 260px); padding: 4px 8px; background: var(--surface); border: 2px dashed var(--red-base); border-radius: 14px; }
.u6a-mini__label { margin: 0; color: var(--ink); font-size: 16px; font-weight: 900; }
.u6a-figure--mini { width: min(100%, 240px); }

/* ---------- Kural Fabrikası ---------- */
.u6a-factory__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u6a-factory__table { padding: 8px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u6a-table { border-collapse: separate; border-spacing: 4px; font-variant-numeric: tabular-nums; }
.u6a-table th { padding: 0 8px; color: var(--ink); font-size: clamp(15px, 1.4vw, 18px); font-weight: 900; text-align: left; white-space: nowrap; }
.u6a-table td { min-width: 2.6em; padding: 4px 6px; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 10px; font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); font-weight: 900; text-align: center; }
.u6a-table td.u6a-table__next { border-style: dashed; border-color: var(--world-model-edge); }
.u6a-table__yours td { color: var(--ink-2); }
.u6a-table__yours td.u6a-table__next { visibility: hidden; }
.u6a-table td[data-miss] { color: var(--ink); background: var(--red-tint); border-color: var(--red-base); }
.u6a-table td[data-answer] { color: var(--green-ink); background: var(--green-tint); border: 2px solid var(--green-base); }
.u6a-factory__machine { display: grid; justify-items: center; gap: 8px; padding: 10px 14px 12px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 18px; box-shadow: 0 4px 0 var(--world-band-edge); }
.u6a-rule { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(28px, 2.8vw, 38px); font-weight: 900; white-space: nowrap; }
.u6a-rule[data-answer] { color: var(--green-ink); }
.u6a-slot { min-width: 2.2em; min-height: var(--touch); padding: 0 8px; font-size: inherit; font-weight: 900; }
.u6a-slot[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); }
.u6a-sign { min-width: var(--touch); min-height: var(--touch); padding: 0 6px; font-size: inherit; font-weight: 900; }
.u6a-digits { display: grid; grid-template-columns: repeat(5, minmax(var(--touch), 1fr)); gap: 6px; }
.u6a-digits .tg-key { font-size: clamp(20px, 1.9vw, 24px); font-weight: 900; }
.u6a-factory__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.u6a-run { min-height: var(--touch); font-size: clamp(18px, 1.7vw, 22px); }

/* ---------- Kod Akışı ---------- */
.u6a-code__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }
.u6a-flow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 6px; padding: 10px 12px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u6a-flow__end,
.u6a-flow__step { display: grid; justify-items: center; gap: 4px; }
.u6a-flow__tag { color: var(--ink-2); font-size: clamp(14px, 1.3vw, 17px); font-weight: 900; }
.u6a-flow__node { display: inline-grid; min-width: 2.8em; min-height: var(--touch); place-items: center; padding: 0 10px; color: var(--ink); background: var(--brand-tint); border: 3px solid var(--brand); border-radius: 10px; font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; white-space: nowrap; }
.u6a-flow__node--end { background: var(--surface); border-color: var(--ink); border-radius: 999px; }
.u6a-flow__node.tg-key { color: var(--ink); background: var(--brand-tint); border: 3px solid var(--brand); }
.u6a-flow__node[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); }
.u6a-flow__node[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }
.u6a-flow__arrow { align-self: flex-end; padding-bottom: 10px; color: var(--ink-2); font-size: clamp(20px, 2vw, 26px); font-weight: 900; }
.u6a-flow__value { color: var(--green-ink); font-size: clamp(17px, 1.6vw, 21px); font-weight: 900; }
.u6a-flow__fixer { display: grid; justify-items: center; gap: 8px; max-width: 460px; }
.u6a-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.u6a-example { padding: 4px 12px; color: var(--ink); background: var(--surface); border: 2px solid var(--world-model-edge); border-radius: 999px; font-family: var(--font-display); font-size: clamp(19px, 1.8vw, 24px); font-weight: 900; white-space: nowrap; }
.u6a-fixes__hint { margin: 0; color: var(--ink-2); font-size: clamp(16px, 1.5vw, 19px); font-weight: 800; }
.u6a-fixes .u6a-choice { min-width: 96px; }

/* High contrast: no tints behind the marks; they speak through borders and weight. */
body.high-contrast .u6a-scale[data-tilt="left"],
body.high-contrast .u6a-scale[data-tilt="right"] { border-width: 3px; }

/* A short landscape board (1366 × 768): the kicker goes, as on the units 1–2 boards, and the scale slims so the
   keypad and the hint stay above the instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.u6a-board) .question-kicker { display: none; }
  .question-card--topic:has(.u6a-board) .question-copy { margin-bottom: 8px; }
  .u6a-box-board__scale { width: min(100%, 400px); }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: a smaller scale and table, a tighter flow. */
  .u6a-choice { min-width: 0; flex: 1 1 40%; }
  .u6a-fixes .u6a-choice { min-width: 0; flex: 1 1 28%; }
  .u6a-box-board__scale { gap: 4px; }
  .u6a-scale { padding: 2px; }
  .u6a-scale .u6a-figure { max-height: 17vh; }
  .u6a-box-board__pad .u6a-title { display: none; }
  .u6a-equation { font-size: 22px; }
  .u6a-take { min-width: 0; padding: 0 10px; }
  .u6a-mini { width: min(100%, 220px); }
  .u6a-figure--mini { max-height: 12vh; }
  .u6a-factory__table { padding: 4px; }
  .u6a-table { border-spacing: 3px; }
  .u6a-table th { padding: 0 2px; font-size: 13px; white-space: normal; }
  .u6a-table td { min-width: 0; padding: 2px 4px; font-size: 18px; }
  .u6a-factory__machine { gap: 6px; padding: 8px 10px; }
  .u6a-factory__machine .u6a-title { display: none; }
  .u6a-factory__actions { flex-wrap: nowrap; }
  .u6a-factory__actions .tg-key { padding: 0 10px; }
  .u6a-run { padding: 0 12px; font-size: 17px; white-space: nowrap; }
  /* Three boxes and both ends stay on one row. */
  .u6a-flow { gap: 2px; padding: 6px 4px; }
  .u6a-flow__node { min-width: 1.8em; padding: 0 5px; font-size: 18px; }
  .u6a-flow__node.tg-key { min-width: var(--touch); padding: 0 5px; font-size: 18px; }
  .u6a-flow__arrow { padding-bottom: 12px; font-size: 14px; }
}