/* 7-solids (plan 119): Küp Gözcüsü, Kargo Tasarımcısı and Litre Küpleri (units/7-solids-boards.js) and the Hızlı
   Parmak figures (u7s-figure, units/7-solids-core.js). Theme tokens only, so light, dark and high contrast follow
   tokens.css and the world tokens of topic-games.css. */

/* ---------- Shared ---------- */
.u7s-board { width: min(100%, 1040px); }
.u7s-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; }
.u7s-spark:empty { visibility: hidden; }
.u7s-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; }
.u7s-board [data-answer] { color: var(--green-ink); }

/* Unit cubes: a lit top, a mid front and a shaded right face, the same in every figure. */
.u7s-board, .u7s-figure, .question-card { --u7s-top: var(--gold-tint); --u7s-front: var(--gold-fill); --u7s-right: var(--gold-base); --u7s-edge: var(--ink); }
/* Dark gold tints are deep, so the bright gold goes on top: the light still falls from above. */
html[data-theme="dark"] :is(.u7s-board, .u7s-figure, .question-card) { --u7s-top: var(--gold-base); --u7s-front: var(--gold-fill); --u7s-right: var(--gold-tint); }
.u7s-face { stroke: var(--u7s-edge); stroke-width: 2; stroke-linejoin: round; }
.u7s-face--top { fill: var(--u7s-top); }
.u7s-face--front { fill: var(--u7s-front); }
.u7s-face--right { fill: var(--u7s-right); }
.u7s-plate { fill: var(--surface-2); stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; }
.u7s-plate__grid { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.u7s-label { fill: var(--ink); font-size: 17px; font-weight: 900; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.u7s-look line { stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.u7s-look polygon { fill: var(--ink-2); }
.u7s-look__text { fill: var(--ink-2); font-size: 16px; font-weight: 800; }
.u7s-look--asked line { stroke: var(--world-accent, var(--coral-base)); stroke-width: 5; }
.u7s-look--asked polygon { fill: var(--world-accent, var(--coral-base)); }
.u7s-look--asked .u7s-look__text { fill: var(--ink); font-size: 19px; font-weight: 900; }
.u7s-view__squares rect { fill: var(--brand); stroke: var(--ink); stroke-width: 1.5; }
.u7s-view__holes rect { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }

/* ---------- Hızlı Parmak figures ---------- */
.u7s-figure { display: block; width: min(100%, 300px); height: auto; max-height: 220px; margin-inline: auto; }
.u7s-box__face { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.u7s-box__face--top { fill: var(--u7s-top); }
.u7s-box__face--front { fill: var(--u7s-front); }
.u7s-box__face--right { fill: var(--u7s-right); }

/* ---------- Work rows: the figure on the left, its controls on the right (stacked on a phone) ---------- */
.u7s-watch__work, .u7s-build__work, .u7s-cargo__work, .u7s-ladder__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); width: 100%; }

/* ---------- Küp Gözcüsü ---------- */
.u7s-watch__stage, .u7s-build__preview { margin: 0; padding: 6px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u7s-stack { display: block; width: clamp(240px, 30vw, 400px); height: auto; max-height: 46vh; }
.u7s-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.u7s-choice { display: grid; place-items: center; min-width: 132px; min-height: 104px; padding: 8px; }
.u7s-choice .u7s-view { display: block; width: auto; height: auto; max-width: 112px; max-height: 84px; }
.u7s-choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u7s-choice[data-answer] { background: var(--green-tint); border-color: var(--green-base); opacity: 1; }
.u7s-build { gap: 10px; }
.u7s-build__views { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.u7s-viewcard { display: grid; justify-items: center; gap: 4px; margin: 0; padding: 6px 12px; background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 14px; }
.u7s-viewcard figcaption { color: var(--world-ink); font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; }
.u7s-viewcard .u7s-view { display: block; width: auto; height: auto; max-height: 72px; }
.u7s-build__plate { display: grid; justify-items: center; gap: 4px; }
.u7s-build__edge { margin: 0; color: var(--ink-2); font-size: 15px; font-weight: 800; }
.u7s-build__grid { display: grid; grid-template-columns: repeat(var(--u7s-cols), 54px); gap: 6px; }
.u7s-place { min-width: 0; width: 54px; height: 54px; padding: 0; font-size: 24px; font-weight: 900; }
.u7s-place[data-height="0"] { color: var(--ink-2); }
.u7s-place[data-height="2"] { background: var(--gold-tint); }
.u7s-place[data-height="3"] { background: var(--gold-tint); border-color: var(--gold-line); border-width: 3px; }
.u7s-build__preview .u7s-stack { width: clamp(180px, 20vw, 260px); max-height: 30vh; }
.u7s-build__check { align-self: center; min-height: var(--touch); font-size: clamp(18px, 1.7vw, 22px); }

/* ---------- Kargo Tasarımcısı ---------- */
.u7s-cargo__bench { display: grid; justify-items: center; gap: 6px; width: min(100%, 460px); padding: 8px 10px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
/* The opened net keeps its pair legend beside it, so the round stays one screen tall. */
.u7s-cargo__show { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.u7s-cargo__figure { display: grid; place-items: center; flex: 1 1 auto; min-width: 0; }
.u7s-box, .u7s-net { display: block; width: 100%; height: auto; max-height: 38vh; }
.u7s-wall { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; }
.u7s-wall--floor { fill: var(--surface-2); }
.u7s-wall__grid { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.u7s-cubegrid { fill: none; stroke: var(--u7s-edge); stroke-width: 1; stroke-opacity: .55; }
.u7s-rim { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.u7s-net__face { stroke: var(--ink); stroke-width: 2.5; }
.u7s-net__face--ab { fill: var(--gold-tint); }
.u7s-net__face--ac { fill: var(--gold-fill); }
.u7s-net__face--bc { fill: var(--surface); }
.u7s-net__label { fill: var(--ink); font-weight: 900; }
.u7s-cargo__tool { min-height: var(--touch); font-size: clamp(18px, 1.7vw, 22px); }
.u7s-cargo__caption { margin: 0; color: var(--world-ink); font-size: clamp(17px, 1.6vw, 21px); font-weight: 900; text-align: center; }
.u7s-cargo__legend { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; padding: 0; list-style: none; }
.u7s-cargo__legend[hidden] { display: none; }
.u7s-cargo__legend li { padding: 2px 10px; color: var(--ink); border: 2px solid var(--ink-2); border-radius: 999px; font-size: 16px; font-weight: 800; }
.u7s-cargo__legend [data-pair="ab"] { background: var(--gold-tint); }
.u7s-cargo__legend [data-pair="ac"] { background: var(--gold-fill); }
.u7s-cargo__legend [data-pair="bc"] { background: var(--surface); }

/* ---------- Litre Küpleri ---------- */
.u7s-ladder__rail { display: grid; gap: 0; margin: 0 92px 0 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; }
.u7s-ladder__rung { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding: 2px 12px; border-bottom: 4px solid var(--world-model-edge); }
.u7s-ladder__rung:last-child { border-bottom: 0; }
.u7s-ladder__unit { min-width: 6.5em; color: var(--ink-2); font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; white-space: nowrap; }
.u7s-ladder__rung[data-on] .u7s-ladder__unit { color: var(--world-ink); }
.u7s-ladder__rung[data-from] .u7s-ladder__unit,
.u7s-ladder__rung[data-to] .u7s-ladder__unit { padding: 2px 10px; color: var(--ink); background: var(--surface); border: 3px solid var(--brand); border-radius: 10px; font-weight: 900; }
.u7s-ladder__rung[data-to]:not([data-from]) .u7s-ladder__unit { border-style: dashed; border-color: var(--coral-base); }
.u7s-ladder__rung[data-answer] .u7s-ladder__unit { color: var(--green-ink); background: var(--green-tint); border: 3px solid var(--green-base); }
.u7s-ladder__alias { padding: 0 8px; color: var(--world-ink); background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 999px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.u7s-ladder__step { position: absolute; right: -92px; 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; }
.u7s-ladder__step[data-on] { color: var(--world-ink); background: var(--world-band); border-color: var(--world-model-edge); font-weight: 900; }
.u7s-ladder__model { display: grid; justify-items: center; gap: 6px; margin: 0; }
.u7s-block { display: block; width: clamp(130px, 15vw, 190px); height: auto; }
.u7s-block--rod { width: clamp(130px, 15vw, 190px); }
.u7s-one { fill: var(--brand); stroke: var(--ink); stroke-width: 1.5; }
.u7s-ladder__caption { max-width: 16em; color: var(--world-ink); font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; text-align: center; }

/* High contrast: no tints; the faces step from surface to ink-tinted surfaces with ink edges. */
body.high-contrast .u7s-board, body.high-contrast .u7s-figure, body.high-contrast .question-card { --u7s-top: var(--surface); --u7s-front: var(--surface-2); --u7s-right: var(--surface-3); }
body.high-contrast .u7s-place[data-height="2"], body.high-contrast .u7s-place[data-height="3"] { background: var(--surface-2); }

/* 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(.u7s-board) .question-kicker { display: none; }
  .question-card--topic:has(.u7s-board) .question-copy { margin-bottom: 8px; }
  .u7s-stack { max-height: 40vh; }
  .u7s-build__preview .u7s-stack { max-height: 26vh; }
  .u7s-place { width: 48px; height: 48px; }
  .u7s-build__grid { grid-template-columns: repeat(var(--u7s-cols), 48px); }
  .u7s-viewcard .u7s-view { max-height: 56px; }
  .u7s-box, .u7s-net { max-height: 32vh; }
  .u7s-ladder__rung { min-height: 38px; }
}

@media (max-width: 700px) {
  /* A 390 × 844 phone holds the whole round above the instruction bar: smaller figures, the views in one row,
     only the rungs of the round. */
  .u7s-watch__work, .u7s-build__work, .u7s-cargo__work, .u7s-ladder__work { gap: 8px; }
  .u7s-stack { width: min(100%, 260px); max-height: 26vh; }
  .u7s-choices { gap: 8px; width: 100%; }
  .u7s-choice { min-width: 0; min-height: 76px; padding: 4px; }
  .u7s-choice .u7s-view { max-width: 96px; max-height: 60px; }
  .u7s-build__views { flex-wrap: nowrap; gap: 6px; }
  .u7s-viewcard { padding: 4px 6px; }
  .u7s-viewcard figcaption { font-size: 15px; }
  .u7s-viewcard .u7s-view { max-width: 88px; max-height: 50px; }
  .u7s-place { width: 44px; height: 44px; font-size: 20px; }
  .u7s-build__grid { grid-template-columns: repeat(var(--u7s-cols), 44px); gap: 5px; }
  .u7s-build__edge { font-size: 13px; }
  .u7s-build__preview .u7s-stack { width: 130px; max-height: 18vh; }
  .u7s-cargo__bench { gap: 4px; padding: 4px 6px; }
  .u7s-box { max-height: 22vh; }
  .u7s-net { max-height: 18vh; }
  .u7s-cargo__caption { font-size: 15px; }
  .u7s-cargo__legend { gap: 4px; }
  .u7s-cargo__legend li { padding: 1px 8px; font-size: 14px; }
  .u7s-ladder__rail { margin-right: 84px; }
  .u7s-ladder__step { right: -84px; }
  .u7s-ladder__rung[data-off-path] { display: none; }
  .u7s-ladder__step:not([data-on]) { display: none; }
  .u7s-ladder__rung { min-height: 38px; }
  .u7s-ladder__model { grid-template-columns: auto auto; align-items: center; }
  .u7s-block, .u7s-block--rod { width: 84px; }
  .u7s-ladder__caption { font-size: 15px; }
}