/* 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; }
/* Once the feedback strip is open it carries the message, so an empty spark gives its line back to the board. */
.question-card:has(> .feedback-slot:not(:empty)) .u7s-spark:empty { display: none; }
.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. The net's three pairs of
   equal faces each have their own colour (gold, sky, coral) on the faces and in the legend; their ink passes AA on
   all three in every theme. */
.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); --u7s-pair-ab: var(--gold-fill); --u7s-pair-ac: var(--sky-base); --u7s-pair-bc: var(--coral-base); --u7s-pair-ink: var(--ink); }
/* Dark gold tints are deep, so the bright gold goes on top: the light still falls from above. The dark pairs are
   bright, so their ink is the dark surface. */
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-pair-ab: var(--gold-ink); --u7s-pair-ink: var(--surface); }
.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; }
/* The stack beside one view (gorunum-yon) and the three views in a row (gorunum-kur) run wide and short. */
.u7s-figure.u7s-lookfig { width: min(100%, 420px); }
.u7s-figure.u7s-views { width: min(100%, 380px); }
.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%; }
.u7s-two__work, .u7s-pour__work, .u7s-rise__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; }
/* Square places and cubes: the key's taller minimum (and a touch screen's 48 px button minimum) would stretch them. */
.u7s-place { min-width: 0; min-height: 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__floor { display: flex; align-items: center; gap: 10px; }
/* The tray of unit cubes beside the plate (board-place.js): its cube is dragged, or tapped and then a place. */
.u7s-tray { display: grid; justify-items: center; gap: 2px; padding: 6px; background: var(--world-band); border: 2px dashed var(--world-band-edge); border-radius: 14px; }
.u7s-tray__cube { position: relative; min-width: 0; min-height: 0; width: 54px; height: 54px; padding: 0; cursor: grab; }
.u7s-tray__cube, .u7s-place { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.u7s-tray__figure { display: block; width: 40px; height: auto; pointer-events: none; }
.u7s-tray__label { margin: 0; color: var(--world-ink); font-size: clamp(16px, 1.3vw, 18px); font-weight: 800; }
/* Lifted, open, lit: colour and border only; the carried cube rides above the plate. */
.u7s-tray__cube[data-place-lifted] { border-color: var(--brand); border-width: 3px; }
.u7s-tray__cube[data-place-carrying] { z-index: 5; cursor: grabbing; }
.u7s-place[data-place-open], .u7s-tray[data-place-open] { border-color: var(--world-model-edge); border-style: dashed; }
.u7s-place[data-place-lit], .u7s-tray[data-place-lit] { background: var(--world-band); border-color: var(--brand); border-style: solid; border-width: 3px; }
.u7s-build__plate > [data-u7s-check] { align-self: center; }
/* relation: the mirror pair's view stands where the stack would; count: the seen view joins at the end. */
.u7s-watch__stage > .u7s-viewcard { padding: 10px 18px; }
.u7s-watch__stage > .u7s-viewcard .u7s-view { max-height: 132px; }
.u7s-viewcard[data-answer] { border-color: var(--green-base); }

/* ---------- Görünümü çiz: squared paper, painted by taps, sweeps or the keys ---------- */
.u7s-draw__desk { display: grid; justify-items: center; gap: 10px; }
/* The paper owns every touch, so a sweep paints instead of scrolling; no transition on a square, it toggles often. */
.u7s-paper { display: grid; grid-template-columns: repeat(var(--u7s-cols), var(--touch)); gap: 3px; padding: 8px; background: var(--surface); border: 2px solid var(--world-model-edge); border-radius: 12px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.u7s-cell { width: var(--touch); height: var(--touch); min-height: 0; margin: 0; padding: 0; background: var(--surface-2); border: 2px solid var(--line-strong); border-radius: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.u7s-cell[data-on] { background: var(--brand); border-color: var(--ink); }
.u7s-cell:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.u7s-cell:disabled { cursor: default; opacity: 1; }
.u7s-paper[data-answer] { border-color: var(--green-base); border-width: 3px; }
@media (hover: hover) and (pointer: fine) {
  .u7s-cell:not([data-on]):not(:disabled):hover { background: var(--world-band); border-color: var(--brand); }
}
.u7s-draw__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
body.high-contrast .u7s-cell { background: var(--surface); border-color: var(--ink); }
body.high-contrast .u7s-cell[data-on] { background: var(--ink); }

/* ---------- 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(--u7s-pair-ab); }
.u7s-net__face--ac { fill: var(--u7s-pair-ac); }
.u7s-net__face--bc { fill: var(--u7s-pair-bc); }
/* A label wider than its face keeps its face's colour round its letters. */
.u7s-net__label { fill: var(--u7s-pair-ink); font-weight: 900; paint-order: stroke; stroke-width: 4px; stroke-linejoin: round; }
.u7s-net__label--ab { stroke: var(--u7s-pair-ab); }
.u7s-net__label--ac { stroke: var(--u7s-pair-ac); }
.u7s-net__label--bc { stroke: var(--u7s-pair-bc); }
/* yuzey: a face shows its colour and its sides once tapped, with its equal face; the legend lists the pairs found. */
.u7s-cargo .u7s-net__face { cursor: pointer; outline: none; }
.u7s-cargo .u7s-net__face:not([data-found]) { fill: var(--surface-2); }
.u7s-cargo .u7s-net__face:not([data-found]) + .u7s-net__label { visibility: hidden; }
.u7s-cargo .u7s-net__label { pointer-events: none; }
.u7s-cargo .u7s-net__face:focus-visible { stroke: var(--brand); stroke-width: 5; }
/* Adım adım (app.js calls showStep): the faces, edges and notes the step names are lit, the other faces fade back. */
.u7s-net__face, .u7s-box__face { transition: fill-opacity 160ms var(--ease-out); }
.u7s-cargo__figure[data-step] :is(.u7s-net__face, .u7s-box__face):not([data-lit]) { fill-opacity: .3; }
.u7s-cargo__figure[data-step] :is(.u7s-net__face, .u7s-box__face)[data-lit] { stroke: var(--brand-ink); stroke-width: 5; }
.u7s-cargo__figure[data-step] .u7s-label[data-lit] { fill: var(--brand-ink); }
.u7s-cargo__legend [data-lit], .u7s-cargo__note[data-lit] { outline: 3px solid var(--brand-ink); outline-offset: 1px; }
.u7s-cargo__caption { margin: 0; color: var(--world-ink); font-size: clamp(17px, 1.6vw, 21px); font-weight: 900; text-align: center; }
.u7s-cargo__caption:empty { display: none; }
.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(--u7s-pair-ink); border: 2px solid var(--ink); border-radius: 999px; font-size: 16px; font-weight: 800; }
.u7s-cargo__legend [data-pair="ab"] { background: var(--u7s-pair-ab); }
.u7s-cargo__legend [data-pair="ac"] { background: var(--u7s-pair-ac); }
.u7s-cargo__legend [data-pair="bc"] { background: var(--u7s-pair-bc); }
.u7s-cargo__note { margin: 0; padding: 2px 10px; color: var(--ink); background: var(--surface); border: 2px solid var(--ink-2); border-radius: 999px; font-size: 16px; font-weight: 800; white-space: nowrap; }
/* Two figures side by side (compare, koli), each named. */
.u7s-cargo__figure:has(> .u7s-cargo__part) { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px; }
.u7s-cargo__part { display: grid; justify-items: center; gap: 2px; margin: 0; }
.u7s-cargo__part figcaption { color: var(--world-ink); font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; }
.u7s-cargo__solid { width: clamp(160px, 17vw, 210px); max-height: 30vh; }
.u7s-cargo__solid--small { width: clamp(110px, 11vw, 140px); }
/* fill: the tray's cube, row and layer go into the box (board-place.js) by a drag, by tap-then-tap or by the keys. */
.u7s-cargo__tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.u7s-cargo__piece { display: grid; justify-items: center; gap: 2px; min-height: var(--touch); padding: 4px 10px; font-size: 16px; font-weight: 800; cursor: grab; }
.u7s-cargo__piece, .u7s-cargo__cell, .u7s-cargo__figure[data-u7s-box] { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.u7s-piece { display: block; width: auto; height: 40px; pointer-events: none; }
/* A piece that does not fit yet stays readable: dashed, not faded. */
.u7s-cargo__piece[aria-disabled="true"] { color: var(--ink-2); background: var(--surface-2); border-style: dashed; cursor: default; }
.u7s-cargo__piece[data-place-lifted], .u7s-cargo__cell[data-place-lifted] { border-color: var(--brand); border-width: 3px; }
.u7s-cargo__piece[data-place-carrying], .u7s-cargo__cell[data-place-carrying] { z-index: 5; cursor: grabbing; }
.u7s-cargo__figure[data-place-open] { border-radius: 12px; outline: 3px dashed var(--world-model-edge); outline-offset: 2px; }
.u7s-cargo__figure[data-place-lit] { border-radius: 12px; background: var(--world-band); outline: 3px solid var(--brand); outline-offset: 2px; }
/* equal: the floor grid; the base's cells are gold, its corner is the handle. */
.u7s-cargo__floor { display: grid; justify-items: center; gap: 4px; }
.u7s-cargo__edge { margin: 0; color: var(--ink-2); font-size: 15px; font-weight: 800; text-align: center; }
/* Square 44 px places (the key's taller minimum would stretch them). */
.u7s-cargo__grid { display: grid; grid-template-columns: repeat(var(--u7s-max), 44px); gap: 4px; }
.u7s-cargo__cell { min-width: 0; min-height: 0; width: 44px; height: 44px; padding: 0; }
.u7s-cargo__cell[data-in] { background: var(--gold-tint); border-color: var(--gold-line); }
.u7s-cargo__cell[data-corner] { background: var(--gold-fill); border-color: var(--ink); border-width: 3px; cursor: grab; }
.u7s-cargo__cell[data-place-open] { border-style: dashed; }
.u7s-cargo__cell[data-place-lit] { border-color: var(--brand); border-style: solid; border-width: 3px; }
.u7s-cargo__build { width: clamp(150px, 16vw, 210px); max-height: 30vh; }
.u7s-cargo__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.u7s-cargo__layers { display: flex; gap: 8px; }
/* compare and problem: the answers and the plan. */
.u7s-cargo__pad { display: grid; justify-items: center; gap: 8px; }
.u7s-cargo__choices { display: grid; gap: 8px; width: min(100%, 300px); }
.u7s-cargo__choice { min-height: var(--touch); font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; }
.u7s-cargo__choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.u7s-cargo__choice[data-answer] { background: var(--green-tint); border-color: var(--green-base); opacity: 1; }
.u7s-cargo__plan { width: min(100%, 400px); }
/* The chosen plan stands alone once it opens the keys. */
.u7s-cargo__plan:has([aria-pressed="true"]) .tg-stall__chip:not([aria-pressed="true"]) { display: none; }
/* A settled round folds its spent controls away, so the caption and the reason line rise clear of the feedback strip. */
.u7s-cargo[data-settled] :is(.tg-pad__keys, .tg-pad__actions, .u7s-cargo__tray, .u7s-cargo__actions, .u7s-cargo__floor, .tg-stall__chip:not([data-answer]), .u7s-spark:empty) { display: none; }
.u7s-cargo__pad .u7s-reason { width: 400px; max-width: 100%; }

/* ---------- 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-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-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; }

/* litre: the cube ladder and the liquid ladder side by side, a row per level (subgrid keeps the columns), the step
   chips outside the rails straddling each rung line. */
.u7s-two__ladders { display: grid; gap: 2px; padding-inline: 84px; }
.u7s-two__heads, .u7s-two__rows { display: grid; grid-template-columns: max-content 2.2em max-content; margin: 0; }
.u7s-two__heads { color: var(--ink-2); font-size: 15px; font-weight: 800; text-align: center; }
.u7s-two__rows { padding: 0; list-style: none; }
.u7s-two__row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.u7s-two__cell { position: relative; display: flex; align-items: center; min-height: 44px; padding: 2px 12px; }
.u7s-two__cell--cube, .u7s-two__cell--rail { border-inline: 6px solid var(--world-model-edge); }
.u7s-two__cell--litre { border-inline: 6px solid var(--sky-base); }
.u7s-two__cell--cube, .u7s-two__cell--litre { border-bottom: 4px solid var(--line-strong); }
.u7s-two__cell--cube { border-bottom-color: var(--world-model-edge); }
.u7s-two__cell--litre { border-bottom-color: var(--sky-base); }
.u7s-two__row:last-child .u7s-two__cell--cube { border-bottom: 0; }
.u7s-two__unit { color: var(--ink-2); font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; white-space: nowrap; }
.u7s-two__cell[data-on] > .u7s-two__unit { color: var(--ink); font-weight: 900; }
.u7s-two__cell:is([data-from], [data-to]) > .u7s-two__unit { padding: 2px 10px; color: var(--ink); background: var(--surface); border: 3px solid var(--brand); border-radius: 10px; font-weight: 900; }
.u7s-two__cell[data-to]:not([data-from]) > .u7s-two__unit { border-style: dashed; border-color: var(--coral-base); }
.u7s-two__cell[data-answer] > .u7s-two__unit { color: var(--green-ink); background: var(--green-tint); border: 3px solid var(--green-base); }
.u7s-two__link { display: grid; place-items: center; color: var(--ink-2); font-size: 22px; font-weight: 900; }
.u7s-two__link[data-on] { color: var(--ink); }
.u7s-two__step { position: absolute; bottom: -16px; z-index: 1; padding: 0 8px; color: var(--ink-2); background: var(--surface); border: 2px solid var(--line); border-radius: 999px; font-weight: 800; white-space: nowrap; }
/* Both ladders' step chips (× 1.000, × 10) and the bridge chip (cm³ = mL) share one size, on the board and a phone. */
.u7s-ladder__step, .u7s-ladder__alias, .u7s-two__step { font-size: 18px; }
.u7s-two__cell--cube > .u7s-two__step, .u7s-two__cell--rail > .u7s-two__step { right: calc(100% + 4px); }
.u7s-two__cell--litre > .u7s-two__step { left: calc(100% + 4px); }
.u7s-two__step[data-on] { color: var(--world-ink); background: var(--world-band); border-color: var(--world-model-edge); font-weight: 900; }

/* olc · pour: the cup is the dragged piece, the bottle the one place; the water rises by scale only. */
.u7s-pour__bench { display: grid; grid-template-columns: auto auto; align-items: end; justify-items: center; gap: 8px clamp(16px, 3vw, 40px); padding: 10px 14px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u7s-pour__cup, .u7s-pour__bottle { display: grid; justify-items: center; gap: 2px; padding: 6px 10px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.u7s-pour__cup { min-width: 104px; min-height: 112px; cursor: grab; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.u7s-pour__cup:active:not(:disabled) { transform: scale(0.97); }
.u7s-pour__cup[data-place-lifted] { border-color: var(--brand); border-width: 3px; }
.u7s-pour__cup[data-place-carrying] { position: relative; z-index: 5; cursor: grabbing; }
.u7s-pour__bottle { background: var(--surface); border: 2px solid var(--world-model-edge); border-radius: 14px; }
.u7s-pour__bottle[data-place-open] { border-style: dashed; border-color: var(--brand); }
.u7s-pour__bottle[data-place-lit] { background: var(--world-band); border: 3px solid var(--brand); }
.u7s-pour__bottle[data-full] { border-color: var(--green-base); }
.u7s-pour__cupfig { display: block; width: 56px; height: auto; pointer-events: none; }
.u7s-pour__bottlefig { display: block; width: clamp(86px, 8vw, 112px); height: auto; pointer-events: none; }
.u7s-pour__glass { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.u7s-pour__drink { fill: var(--sky-tint); stroke: var(--sky-base); stroke-width: 2; }
.u7s-pour__water { fill: var(--sky-tint); transform-box: fill-box; transform-origin: 50% 100%; transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1); }
.u7s-pour__name { color: var(--ink); font-size: clamp(17px, 1.6vw, 21px); font-weight: 900; white-space: nowrap; }
.u7s-pour__notes { grid-column: 1 / -1; display: grid; justify-items: center; gap: 2px; }
.u7s-pour__count, .u7s-pour__caption { margin: 0; text-align: center; }
.u7s-pour__count { color: var(--ink-2); font-size: clamp(16px, 1.5vw, 19px); font-weight: 800; }
.u7s-pour__caption { color: var(--world-ink); font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; }
.u7s-pour__caption[data-answer] { color: var(--green-ink); }

/* olc · order: amount cards from the tray onto the places, least to most. */
.u7s-order__tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(100%, 820px); min-height: calc(var(--touch) + 16px); padding: 8px; background: var(--world-band); border: 2px dashed var(--world-band-edge); border-radius: 14px; }
.u7s-order__card { min-width: 6.5em; min-height: var(--touch); padding: 4px 14px; font-size: clamp(19px, 1.8vw, 24px); font-weight: 900; white-space: nowrap; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.u7s-order__card:active:not(:disabled) { transform: scale(0.97); }
.u7s-order__card[data-place-lifted] { border-color: var(--brand); border-width: 3px; }
.u7s-order__card[data-place-carrying] { position: relative; z-index: 5; cursor: grabbing; }
.u7s-order__card[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }
.u7s-order__line { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.u7s-order__end { color: var(--ink-2); font-size: clamp(16px, 1.5vw, 19px); font-weight: 800; white-space: nowrap; }
.u7s-order__slots { display: grid; grid-template-columns: repeat(var(--u7s-count), minmax(0, 10em)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.u7s-order__slot { position: relative; display: grid; place-items: center; min-height: calc(var(--touch) + 26px); padding: 22px 6px 6px; background: var(--surface); border: 2px dashed var(--line-strong); border-radius: 14px; }
.u7s-order__slot[data-filled] { border-style: solid; border-color: var(--world-model-edge); }
.u7s-order__slot .u7s-order__card { width: 100%; min-width: 0; padding-inline: 6px; }
.u7s-order__place { position: absolute; top: 1px; left: 10px; color: var(--ink-2); font-size: 18px; font-weight: 900; line-height: 1.2; }
:is(.u7s-order__slot, .u7s-order__tray)[data-place-open] { border-color: var(--brand); border-style: dashed; }
:is(.u7s-order__slot, .u7s-order__tray)[data-place-lit] { background: var(--world-band); border: 3px solid var(--brand); }
.u7s-order > [data-u7s-check] { align-self: center; }
@media (hover: hover) and (pointer: fine) {
  .u7s-order__card:hover:not(:disabled), .u7s-pour__cup:hover:not(:disabled) { border-color: var(--brand); }
}

/* olc · rise: two measuring jugs drawn in ink on the surface, so their numbers keep the text contrast. */
.u7s-rise__bench { display: grid; justify-items: center; gap: 6px; padding: 8px 12px; background: var(--world-model); border: 2px solid var(--world-model-edge); border-radius: 16px; }
.u7s-rise__jugs { display: flex; align-items: end; gap: clamp(12px, 3vw, 40px); }
.u7s-rise__jug { display: grid; justify-items: center; gap: 2px; margin: 0; padding: 4px 6px; background: var(--surface); border-radius: 12px; }
.u7s-rise__jug figcaption { color: var(--ink); font-size: clamp(16px, 1.5vw, 19px); font-weight: 900; }
.u7s-jug { display: block; width: auto; height: clamp(220px, 40vh, 330px); }
.u7s-jug__water { fill: var(--sky-tint); }
.u7s-jug__surface { stroke: var(--sky-base); stroke-width: 3; }
.u7s-jug__glass { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.u7s-jug__ticks { fill: none; stroke: var(--ink); stroke-width: 2; }
.u7s-jug__label { fill: var(--ink); font-size: 30px; font-weight: 800; }
.u7s-jug__stone { fill: var(--surface-3); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.u7s-rise__caption { margin: 0; color: var(--world-ink); font-size: clamp(17px, 1.6vw, 21px); font-weight: 900; text-align: center; }
.u7s-rise__caption[data-answer] { color: var(--green-ink); }

/* olc · judge: the two amounts and Eşit. */
.u7s-judge__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, 780px); }
.u7s-judge__choice { min-width: 0; min-height: 96px; font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .u7s-pour__water, .u7s-pour__cup, .u7s-order__card { transition: none; }
}
body.reduced-motion :is(.u7s-pour__water, .u7s-pour__cup, .u7s-order__card) { transition: none; }

/* 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); --u7s-pair-ab: var(--gold-fill); --u7s-pair-ink: var(--ink); }
body.high-contrast .u7s-place[data-height="2"], body.high-contrast .u7s-place[data-height="3"] { background: var(--surface-2); }
body.high-contrast .u7s-cargo__cell[data-in] { background: var(--surface-2); border-color: var(--ink); }
body.high-contrast .u7s-cargo__cell[data-corner] { background: var(--surface-3); border-width: 5px; }
body.high-contrast .u7s-cargo__choice[data-answer] { color: #000000; background: #ffffff; border-width: 5px; border-color: #000000; }
body.high-contrast :is(.u7s-pour__drink, .u7s-pour__water, .u7s-jug__water) { fill: var(--surface-3); }
body.high-contrast .u7s-two__cell--litre { border-color: var(--ink); }

/* A short landscape board (1366 × 768): the kicker goes and the world band and the prompt slim, 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) .tg-world-band { height: 40px; margin-bottom: 8px; }
  .question-card--topic:has(.u7s-board) .question-copy { margin-bottom: 8px; }
  .question-card--topic:has(.u7s-board) .question-copy h2 { font-size: clamp(22px, 2.35vw, 32px); }
  .u7s-stack { max-height: 40vh; }
  .u7s-build__preview .u7s-stack { max-height: 20vh; }
  /* insa: Kontrol et closes the work row beside the preview, so the plate is only its floor and the views, the plate
     and an open feedback strip share the screen. */
  .u7s-build__work { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; align-items: center; gap: 4px 28px; }
  .u7s-build__plate { display: contents; }
  .u7s-build__plate > :not([data-u7s-check]) { grid-column: 1; justify-self: center; }
  .u7s-build__preview { grid-area: 1 / 2 / span 3; }
  .u7s-build__plate > [data-u7s-check] { grid-area: 1 / 3 / span 3; }
  .u7s-place { width: 48px; height: 48px; }
  .u7s-build__grid { grid-template-columns: repeat(var(--u7s-cols), 48px); }
  .u7s-tray__cube { width: 48px; height: 48px; }
  .u7s-viewcard .u7s-view { max-height: 56px; }
  .u7s-watch__stage > .u7s-viewcard .u7s-view { max-height: 120px; }
  .u7s-paper { grid-template-columns: repeat(var(--u7s-cols), 48px); }
  .u7s-cell { width: 48px; height: 48px; }
  /* A box or a net leaves room for a two-line feedback strip (its labels keep their size, fitFigure). */
  .u7s-box, .u7s-net { max-height: 28vh; }
  .u7s-cargo__solid, .u7s-cargo__build { max-height: 26vh; }
  /* Story problems: a two-line prompt, the bench and an open feedback strip share the screen, so their figures slim
     (their labels keep their size, fitFigure). */
  .u7s-cargo:is([data-task="koli"], [data-task="wrap"], [data-task="aquarium"]) .u7s-box { max-height: 20vh; }
  /* koli: a wider reason line takes a step's sentence in fewer lines beside the figures. */
  .u7s-cargo__pad .u7s-reason { width: 520px; }
  /* equal: the layer buttons and Kontrol et stand in a column beside the floor, so an 8 × 8 floor fits too. */
  .u7s-cargo__pad:has(> .u7s-cargo__floor) { grid-auto-flow: column; align-items: end; gap: 12px; }
  .u7s-cargo__actions { flex-direction: column; align-items: stretch; }
  .u7s-cargo__layers { justify-content: center; }
  .u7s-ladder__rung { min-height: 38px; }
  .u7s-two__cell { min-height: 38px; }
  .u7s-jug { height: min(34vh, 260px); }
}

@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. */
  /* While the feedback strip is open the experience chip gives the strip its line, as during a steal (topic-games.css),
     so the board and the strip both stay in view. */
  .question-card--topic:has(.u7s-board):has(> .feedback-slot:not(:empty)) .question-experience { display: none; }
  .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__floor { gap: 6px; }
  .u7s-tray { padding: 4px; }
  .u7s-tray__cube { width: 44px; height: 44px; }
  .u7s-tray__figure { width: 32px; }
  .u7s-tray__label { font-size: 14px; }
  .u7s-build__edge { font-size: 14px; }
  .u7s-build__preview .u7s-stack { width: 130px; max-height: 18vh; }
  /* insa: the plate's rows span the work row and Kontrol et stands beside the preview, so the views, the plate, the
     preview and an open feedback strip share the screen. */
  .u7s-build__work { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 4px 12px; }
  .u7s-build__plate { display: contents; }
  .u7s-build__plate > :not([data-u7s-check]) { grid-column: 1 / -1; justify-self: center; }
  .u7s-build__preview { grid-area: 4 / 1; }
  .u7s-build__plate > [data-u7s-check] { grid-area: 4 / 2; }
  .u7s-watch__stage > .u7s-viewcard .u7s-view { max-width: 180px; max-height: 96px; }
  /* The paper and its two buttons side by side under the stack. */
  .u7s-draw .u7s-stack { max-height: 20vh; }
  .u7s-draw__desk { grid-auto-flow: column; align-items: center; gap: 8px; }
  .u7s-draw__tools { flex-direction: column; }
  .u7s-draw__tools > * { padding-inline: 10px; font-size: 16px; }
  .u7s-paper { grid-template-columns: repeat(var(--u7s-cols), 44px); padding: 5px; }
  .u7s-cell { width: 44px; height: 44px; }
  .u7s-cargo__bench { gap: 4px; padding: 4px 6px; }
  .u7s-box { max-height: 16vh; }
  /* The answer and its two buttons share a line above the keys, as on the other typed boards. */
  .u7s-cargo .tg-pad, .u7s-watch .tg-pad { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 6px; width: 100%; }
  .u7s-cargo .tg-pad__answer, .u7s-watch .tg-pad__answer { grid-area: 1 / 1; justify-self: stretch; }
  .u7s-cargo .tg-pad__actions, .u7s-watch .tg-pad__actions { grid-area: 1 / 2; gap: 6px; }
  .u7s-cargo .tg-pad__keys, .u7s-watch .tg-pad__keys { grid-area: 2 / 1 / auto / span 2; }
  /* Six key columns share the card's width (about 50 px a key at 390 px), so a keypad never pushes the card past the
     screen edge. */
  .u7s-board .tg-pad__keys { grid-template-columns: repeat(var(--pad-columns, 6), minmax(0, 1fr)); gap: 5px; width: 100%; }
  .u7s-board .tg-pad__keys .tg-key { min-width: 0; }
  .u7s-cargo .tg-pad__entry, .u7s-watch .tg-pad__entry { flex: 1 1 auto; min-width: 0; padding-inline: 6px; font-size: 26px; }
  .u7s-cargo .tg-pad__actions > *, .u7s-watch .tg-pad__actions > * { padding-inline: 8px; font-size: 16px; white-space: nowrap; }
  .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-cargo__note { font-size: 14px; }
  .u7s-cargo__solid { width: 140px; max-height: 15vh; }
  /* koli: the konteyner and one koli share the phone's width, so their labels may drop to the 14 px floor
     (fitFigure) and both boxes still show. */
  .u7s-cargo__solid--large, .u7s-cargo__solid--small { --u7s-label-floor: 14; }
  .u7s-cargo__solid--large { width: min(184px, 46vw); max-height: 11vh; }
  .u7s-cargo__solid--small { width: min(112px, 28vw); }
  .u7s-cargo__part figcaption { font-size: 15px; }
  .u7s-cargo__tray { gap: 6px; }
  .u7s-cargo__piece { padding: 2px 6px; font-size: 14px; }
  .u7s-piece { height: 30px; }
  /* The floor takes the card's width: 44 px places up to 6 × 6, a little smaller on an 8 × 8 floor. */
  .u7s-cargo__floor { width: 100%; }
  .u7s-cargo__grid { grid-template-columns: repeat(var(--u7s-max), minmax(0, 1fr)); gap: 3px; width: min(100%, calc(var(--u7s-max) * 47px - 3px)); }
  .u7s-cargo__cell { width: auto; height: auto; aspect-ratio: 1; }
  .u7s-cargo__edge { font-size: 14px; }
  .u7s-cargo__build { width: 120px; max-height: 14vh; }
  .u7s-cargo__actions .uk-btn--primary { padding-inline: 10px; }
  /* One row of three buttons under the floor keeps Kontrol et above the fold on an 8 × 8 floor too. */
  .u7s-cargo__actions { flex-wrap: nowrap; }
  .u7s-cargo__pad { gap: 6px; width: 100%; }
  .u7s-cargo__pad .u7s-reason { width: 100%; padding: 4px 10px; font-size: 15px; }
  .u7s-cargo__choices { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .u7s-cargo__choice { padding-inline: 4px; font-size: 16px; }
  .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; }
  .u7s-two__work, .u7s-pour__work, .u7s-rise__work { gap: 8px; }
  .u7s-two__ladders { padding-inline: 62px; }
  .u7s-two__row[data-off-path], .u7s-two__step:not([data-on]) { display: none; }
  .u7s-two__cell { min-height: 38px; padding: 2px 6px; }
  .u7s-two__unit { font-size: 17px; }
  .u7s-two__cell:is([data-from], [data-to]) > .u7s-two__unit { padding: 1px 6px; }
  .u7s-two__step { padding: 0 4px; }
  .u7s-two__cell--cube > .u7s-two__step, .u7s-two__cell--rail > .u7s-two__step { right: calc(100% - 2px); }
  .u7s-two__cell--litre > .u7s-two__step { left: calc(100% - 2px); }
  /* The litre boards' keypads take the full card width under their figure, inside a slimmer card edge (as on the
     typed boards), so the two ladders and six key columns fit 390 px. */
  .question-card--topic:has(.u7s-board[data-topic-game="litreLadder"]) { padding-inline: 10px; }
  :is(.u7s-ladder__pad, .u7s-pour__pad, .u7s-rise__pad), :is(.u7s-ladder, .u7s-pour, .u7s-rise) .tg-pad { width: 100%; }
  .u7s-pour__bench { gap: 4px 16px; padding: 6px 8px; }
  .u7s-pour__cup { min-width: 84px; min-height: 96px; padding: 4px 6px; }
  .u7s-pour__cupfig { width: 44px; }
  .u7s-pour__bottlefig { width: 72px; }
  .u7s-order__tray { gap: 6px; padding: 6px; }
  .u7s-order__card { min-width: 5.5em; padding-inline: 8px; font-size: 19px; }
  .u7s-order__line { flex-direction: column; gap: 4px; }
  .u7s-order__slots { grid-template-columns: 1fr; gap: 6px; width: min(100%, 300px); }
  .u7s-order__slot { grid-template-columns: 2em 1fr; min-height: var(--touch); padding: 3px 6px; }
  .u7s-order__place { position: static; font-size: 18px; }
  .u7s-rise__bench { padding: 4px 6px; }
  .u7s-jug { height: 210px; }
  .u7s-judge__choices { grid-template-columns: 1fr 1fr; gap: 8px; }
  .u7s-judge__choice { min-height: 72px; font-size: 22px; }
  .u7s-judge__choice[data-value="Eşit"] { grid-column: 1 / -1; min-height: 60px; }
}