/* Topic-game look and feel (plan 104 §6, steps 3-5). topic-feel.js drives the particles, the combo badge,
   the round transition and the result moment; topic-worlds.js, topic-line.js and topic-special.js draw the
   worlds (the four look-test worlds and the Climb) and their boards. This sheet only styles them. Motion animates transform, opacity
   and colour only, and every entrance is off under reduced motion (the kit also skips its own animations
   then). No canvas, no filters: every world is DOM, CSS and inline SVG. */

/* ---------- Particles: one fixed pool of 24 <i>, hidden until a burst marks them live ---------- */
.tf-particles {
  position: fixed;
  z-index: 2400;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.tf-particle {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--gold);
  visibility: hidden;
}
.tf-particle--1 { background: var(--green); border-radius: 50%; }
.tf-particle--2 { background: var(--world-accent); }
.tf-particle.is-live { visibility: visible; }

/* ---------- Combo badge: "Seri ×3/×5/×8" pops just under the solo or class score card ---------- */
.solo-score,
.class-score { position: relative; }
/* The badge hangs below the band: the band rises above the stage (painted after it) and stops clipping
   (narrow screens give it overflow-x: auto for duel rows; a single solo or class card needs no scroll). */
.game-scoreboard:has([data-combo-badge]) { position: relative; z-index: 3; overflow: visible; }
.tf-combo {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 12px;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  background: var(--gold-fill);
  color: var(--on-fill);
  font-size: 15px;
  font-weight: 900;
  line-height: 20px;
  white-space: nowrap;
  pointer-events: none;
}
body.high-contrast .tf-combo { background: #000000; color: #ffffff; border-color: #000000; }

/* ---------- Round transition: no input while the new board slides in ---------- */
#gameStage[data-round-transition],
#gameStage[data-round-transition] * { pointer-events: none !important; }

/* ---------- Steal banner: slides in from the stealing side ---------- */
.steal-banner { animation: tf-steal-in 420ms cubic-bezier(.2, .9, .3, 1.15) both; }
.steal-banner[data-player="p1"] { animation-name: tf-steal-in-right; }
@keyframes tf-steal-in {
  from { transform: translateX(-32px) scale(.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes tf-steal-in-right {
  from { transform: translateX(32px) scale(.96); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------- Result moment: the new-record line ---------- */
.result-record {
  justify-self: center;
  width: max-content;
  max-width: 100%;
  margin: 4px auto 0;
  padding: 4px 14px;
  border: 2px solid var(--gold-line);
  border-radius: 999px;
  background: var(--gold-tint);
  color: var(--gold-ink);
  font-size: 1.15rem;
  font-weight: 900;
}
body.high-contrast .result-record { background: #ffffff; color: #000000; border-color: #000000; }

/* ---------- Type scale: key caps readable from the back row ---------- */
#gameStage .number-pad [data-question-action="key"] { font-size: clamp(22px, 2.2vw, 32px); }

/* ---------- Worlds (plan 104 §6.1): each re-points the six world tokens from the school palette, so dark
   mode follows the palette; high contrast keeps the black-on-white tokens from tokens.css ---------- */
body:not(.high-contrast) [data-world="rail"] {
  --world-band: var(--apricot-tint);
  --world-band-edge: var(--coral-base);
  --world-accent: var(--coral-base);
  --world-ink: var(--coral-ink);
  --world-model: var(--gold-tint);
  --world-model-edge: var(--apricot-ink);
}
body:not(.high-contrast) [data-world="sea"] {
  --world-band: var(--sky-tint);
  --world-band-edge: var(--sky-base);
  --world-accent: var(--sky-base);
  --world-ink: var(--sky-ink);
  --world-model: var(--brand-tint);
  --world-model-edge: var(--brand);
}
body:not(.high-contrast) [data-world="gates"] {
  --world-band: var(--green-tint);
  --world-band-edge: var(--green-base);
  --world-accent: var(--green-base);
  --world-ink: var(--green-ink);
  --world-model: var(--apricot-tint);
  --world-model-edge: var(--apricot-ink);
}
body:not(.high-contrast) [data-world="space"] {
  --world-band: var(--inverse);
  --world-band-edge: var(--brand);
  --world-accent: var(--gold-base);
  --world-ink: var(--on-inverse);
  --world-model: var(--gold-fill);
  --world-model-edge: var(--gold-line);
}
body:not(.high-contrast) [data-world="climb"] {
  --world-band: var(--green-tint);
  --world-band-edge: var(--green-base);
  --world-accent: var(--gold-base);
  --world-ink: var(--green-ink);
  --world-model: var(--surface);
  --world-model-edge: var(--green-ink);
}

body:not(.high-contrast) [data-world="track"] {
  --world-band: var(--coral-tint);
  --world-band-edge: var(--coral-base);
  --world-accent: var(--coral-base);
  --world-ink: var(--coral-ink);
  --world-model: var(--surface);
  --world-model-edge: var(--coral-ink);
}
body:not(.high-contrast) [data-world="forest"] {
  --world-band: var(--green-tint);
  --world-band-edge: var(--green-base);
  --world-accent: var(--green-base);
  --world-ink: var(--green-ink);
  --world-model: var(--gold-tint);
  --world-model-edge: var(--apricot-ink);
}
body:not(.high-contrast) [data-world="mine"] {
  --world-band: var(--surface-3);
  --world-band-edge: var(--line-strong);
  --world-accent: var(--sky-base);
  --world-ink: var(--ink-2);
  --world-model: var(--gold-tint);
  --world-model-edge: var(--apricot-ink);
}
body:not(.high-contrast) [data-world="market"] {
  --world-band: var(--apricot-tint);
  --world-band-edge: var(--coral-base);
  --world-accent: var(--coral-base);
  --world-ink: var(--apricot-ink);
  --world-model: var(--gold-tint);
  --world-model-edge: var(--apricot-ink);
}
body:not(.high-contrast) [data-world="ice"] {
  --world-band: var(--sky-tint);
  --world-band-edge: var(--sky-base);
  --world-accent: var(--sky-base);
  --world-ink: var(--sky-ink);
  --world-model: var(--paper);
  --world-model-edge: var(--sky-ink);
}

body:not(.high-contrast) [data-world="newsroom"] {
  --world-band: var(--surface-2);
  --world-band-edge: var(--brand);
  --world-accent: var(--coral-base);
  --world-ink: var(--ink-2);
  --world-model: var(--paper);
  --world-model-edge: var(--ink-2);
}
body:not(.high-contrast) [data-world="picnic"] {
  --world-band: var(--apricot-tint);
  --world-band-edge: var(--coral-base);
  --world-accent: var(--gold-base);
  --world-ink: var(--apricot-ink);
  --world-model: var(--paper);
  --world-model-edge: var(--apricot-ink);
}
body:not(.high-contrast) [data-world="blueprint"] {
  --world-band: var(--brand-tint);
  --world-band-edge: var(--brand);
  --world-accent: var(--coral-base);
  --world-ink: var(--brand-ink);
  --world-model: var(--paper);
  --world-model-edge: var(--brand-ink);
}
body:not(.high-contrast) [data-world="fair"] {
  --world-band: var(--gold-tint);
  --world-band-edge: var(--coral-base);
  --world-accent: var(--coral-base);
  --world-ink: var(--gold-ink);
  --world-model: var(--surface);
  --world-model-edge: var(--gold-ink);
}

/* Board pieces change colour and move; they never transition box-shadow or layout, so a finale sampled
   inside the world root only ever finds transform, opacity and colour at work. */
#gameStage [data-world] *,
#gameStage [data-world] *::before,
#gameStage [data-world] *::after { transition-property: transform, opacity, color, background-color, border-color; }

/* ---------- The band over a world's card: inline SVG, decoration only (high contrast drops it) ---------- */
.tg-world-band {
  height: clamp(36px, 4vw, 56px);
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--world-band);
  border-bottom: 3px solid var(--world-band-edge);
  border-radius: 18px;
}
.tg-world-band svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* A prop is a piece of the band a board draws again where its result lands (the picnic basket in the set
   tray), so the finale plays in view; its finale parts follow the same rules as the band's. */
.tg-world-prop { display: block; flex: none; width: auto; height: 32px; overflow: visible; }
[data-world] [data-finale-part] { transform-box: fill-box; transform-origin: center; }
[data-world] [data-finale-part="door"] { transform-origin: 50% 0; }
[data-world] [data-finale-part="tree"] { transform-origin: 50% 100%; }
[data-world] [data-finale-part="glass"] { transform-origin: 50% 100%; }
[data-world] [data-finale-part="mercury"] { transform-origin: 50% 100%; }
[data-world] [data-finale-part="compass"] { transform-origin: 50% 0; }
[data-world] [data-finale-part="arc"] { opacity: 0; transform: scale(.6); transform-origin: 50% 100%; }
.tgw-hill { fill: var(--world-band-edge); opacity: .3; stroke: var(--world-band-edge); stroke-width: 2; }
.tgw-edge { fill: none; stroke: var(--world-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tgw-sleepers { stroke: var(--world-ink); stroke-width: 3; opacity: .6; }
.tgw-smoke { fill: var(--surface); stroke: var(--world-ink); stroke-width: 1.5; }
.tgw-model { fill: var(--world-model); stroke: var(--world-model-edge); stroke-width: 2.5; }
.tgw-accent { fill: var(--world-accent); }
.tgw-wheel { fill: var(--world-ink); }
.tgw-sun { fill: var(--gold-base); }
.tgw-wave { fill: var(--world-accent); opacity: .45; }
.tgw-wave--front { opacity: .8; }
.tgw-door { fill: var(--world-model); stroke: var(--world-model-edge); stroke-width: 2; }
.tgw-star { stroke: var(--world-ink); stroke-width: 3; stroke-linecap: round; }
.tgw-ring { fill: none; stroke: var(--world-accent); stroke-width: 2.5; }
.tgw-core { fill: var(--world-accent); opacity: .35; }
.tgw-road { fill: var(--world-ink); opacity: .8; }
.tgw-lane { fill: none; stroke: var(--surface); stroke-width: 1.5; stroke-dasharray: 10 8; }
.tgw-post { stroke: var(--world-ink); stroke-width: 3; stroke-linecap: round; }
.tgw-pine { fill: var(--world-band-edge); opacity: .35; }
.tgw-gem { fill: var(--world-accent); }
.tgw-gem--ruby { fill: var(--coral-base); }
.tgw-gold { fill: var(--gold-base); }
.tgw-awning,
.tgw-receipt { fill: var(--paper); }
.tgw-receipt { stroke: var(--world-ink); stroke-width: 1.5; stroke-linejoin: round; }
.tgw-tag { fill: var(--gold-tint); stroke: var(--world-ink); stroke-width: 1.5; }
.tgw-thin { stroke-width: 1.5; opacity: .6; }
.tgw-faint { opacity: .35; }
.tgw-drink { fill: var(--gold-base); }
.tgw-stamp rect { fill: none; stroke: var(--coral-base); stroke-width: 2.5; }
.tgw-stamp text { fill: var(--coral-base); font-family: var(--font-display); font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.tgw-floe { fill: var(--world-model); stroke: var(--world-band-edge); stroke-width: 2; stroke-linejoin: round; }
.tgw-glass { fill: var(--paper); stroke: var(--world-ink); stroke-width: 2; }
.tgw-mercury { fill: var(--coral-base); }
.tgw-snow { fill: var(--on-inverse); stroke: var(--world-band-edge); stroke-width: 1; }
.tgw-lamp { fill: var(--gold-base); }
.tgw-print { fill: var(--world-ink); }
.tgw-bar--1 { fill: var(--chart-1); }
.tgw-bar--2 { fill: var(--chart-2); }
.tgw-bar--3 { fill: var(--chart-3); }
.tgw-bar--4 { fill: var(--chart-4); }
.tgw-ticker { fill: var(--navy); }
.tgw-ticker-text { fill: none; stroke: var(--surface); stroke-width: 2.5; stroke-linecap: round; }
.tgw-check { fill: var(--paper); opacity: .85; }
.tgw-crust { fill: var(--gold-base); }
.tgw-cheese { fill: var(--gold-fill); }
.tgw-cut { fill: none; stroke: var(--gold-line); stroke-width: 1; }
.tgw-topping { fill: var(--coral-base); }
.tgw-basket { fill: var(--world-model-edge); stroke: var(--world-ink); stroke-width: 1.5; stroke-linejoin: round; }
.tgw-weave { fill: none; stroke: var(--world-band); stroke-width: 1.5; opacity: .8; }
/* The mine's gems wait dim in the seam; the finale lights them. The market's glasses wait a quarter full
   and its receipt unstamped. */
[data-world] [data-finale-part="gem"] { opacity: .45; transform: scale(.8); }
[data-world] [data-finale-part="glass"] { opacity: .6; transform: scaleY(.25); }
[data-world] [data-finale-part="stamp"] { opacity: 0; transform: scale(1.6) rotate(-14deg); }
/* The ice station's thermometer waits low and the snow hangs faint; the finale raises the one and drops the other. */
[data-world] [data-finale-part="mercury"] { transform: scaleY(.35); }
[data-world] [data-finale-part="snow"] { opacity: .4; transform: translateY(-8px); }
/* The elevator tower's floor lights wait dim; the newsroom's front page and strip wait for the headline. */
[data-world] [data-finale-part="light"] { opacity: .3; transform: scale(.8); }
[data-world] [data-finale-part="headline"] { opacity: 0; transform: scaleX(0); transform-origin: 0 50%; }
/* The picnic basket waits empty: its pizzas hang hidden above it until a solved board drops them in. */
[data-world] [data-finale-part="pizza"] { opacity: 0; transform: translateY(-14px) scale(.6); }
[data-world] [data-finale-part="basket"] { transform-origin: 50% 100%; }
/* Çarpan Kulesi's tower waits for its crown; a solved round sets it on the top floor. */
[data-world] [data-finale-part="crown"] { opacity: 0; transform: translateY(-10px) scale(.6); transform-origin: 50% 100%; }
/* The finale's last frame, held once data-finale is "done" (and shown at once under reduced motion). */
[data-finale="done"] [data-finale-part="train"] { transform: translateX(500px); }
[data-finale="done"] [data-finale-part="smoke"] { opacity: 0; }
[data-finale="done"] [data-finale-part="rider"] { transform: translate(480px, 0); }
[data-finale="done"] [data-finale-part="wave"] { transform: translateX(40px); }
[data-finale="done"] [data-finale-part="submarine"] { transform: translate(440px, 3px); }
[data-finale="done"] [data-finale-part="door"] { transform: scaleY(.12); }
[data-finale="done"] [data-finale-part="core"] .tgw-core { opacity: 1; }
[data-finale="done"] [data-finale-part="climber"] { transform: translateY(-16px); }
[data-finale="done"] [data-finale-part="flag"] { transform: translateY(-4px); }
[data-finale="done"] [data-finale-part="bus"] { transform: translateX(480px); }
[data-finale="done"] [data-finale-part="runner"] { transform: translateX(470px); }
[data-finale="done"] [data-finale-part="tree"] { transform: scale(1.1); }
[data-finale="done"] [data-finale-part="gem"] { opacity: 1; transform: scale(1.1); }
[data-finale="done"] [data-finale-part="cart"] { transform: translateX(480px); }
[data-finale="done"] [data-finale-part="glass"] { opacity: 1; transform: scaleY(1); }
[data-finale="done"] [data-finale-part="stamp"] { opacity: 1; transform: rotate(-8deg); }
[data-finale="done"] [data-finale-part="mercury"] { transform: scaleY(1); }
[data-finale="done"] [data-finale-part="snow"] { opacity: 1; transform: translateY(6px); }
[data-finale="done"] [data-finale-part="light"] { opacity: 1; transform: scale(1.1); }
[data-finale="done"] [data-finale-part="lift"] { transform: translateY(-27px); }
[data-finale="done"] [data-finale-part="headline"] { opacity: 1; transform: scaleX(1); }
[data-finale="done"] [data-finale-part="pizza"] { opacity: 1; transform: none; }
[data-finale="done"] [data-finale-part="crown"] { opacity: 1; transform: none; }
[data-finale="done"] [data-finale-part="arc"] { opacity: 1; transform: none; }
[data-finale="done"] [data-finale-part="wheel"] { transform: rotate(180deg); }
body.high-contrast .tg-world-band,
body.high-contrast .tg-world-prop { display: none; }

/* ---------- Board scale: the prompt stays readable from the back row without crowding the board ---------- */
.question-card--topic .question-copy { margin-inline: auto; margin-bottom: clamp(10px, 1.6vw, 18px); }
.question-card--topic .question-copy h2 { font-size: clamp(22px, 2.6vw, 36px); }
.tg-board { display: grid; justify-items: center; gap: clamp(10px, 1.4vw, 16px); }
.tg-key {
  display: inline-grid;
  min-width: var(--touch);
  min-height: var(--touch);
  place-items: center;
  padding: 0 12px;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.tg-key:hover:not(:disabled) { border-color: var(--world-model-edge); transform: translateY(-1px); }
.tg-key:active:not(:disabled) { transform: translateY(1px); }
.tg-key:disabled { opacity: .45; cursor: default; }
.tg-board [tabindex="0"]:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }

/* ---------- The placement boards: Sayı Doğrusu Sörfü (sea), Ölçü Parkuru (track), Yolculuk Planı (rail, a
   double line) and Kök Ormanı (forest). The line-kit ticks are laid out as Nişancı's; every mark is centred
   on its value with the translate property, so a finale's transform moves it without shifting it. ---------- */
.tg-place__line { width: min(1080px, 100%); padding: 0 clamp(26px, 4vw, 48px); }
.tg-place__track {
  --axis-y: 72px;
  position: relative;
  height: 118px;
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  background: linear-gradient(to bottom, transparent var(--axis-y), var(--world-band) var(--axis-y));
}
/* A settled line carries the reveal, so it keeps full strength (not the global disabled fade) and makes
   room under its labels for the flag's value. */
.tg-place__track[aria-disabled="true"] { cursor: default; opacity: 1; margin-bottom: 32px; }
.tg-place__axis { position: absolute; top: calc(var(--axis-y) - 3px); right: -14px; left: -14px; height: 6px; background: var(--world-ink); border-radius: 3px; }
.tg-place-line__minor { position: absolute; top: calc(var(--axis-y) - 9px); left: 0; width: 100%; height: 18px; overflow: visible; }
.tg-place-line__minor path { fill: none; stroke: var(--world-ink); stroke-width: 2; }
.tg-place-tick { position: absolute; top: 0; bottom: 0; left: var(--at); width: 0; }
.tg-place-tick__mark { position: absolute; top: calc(var(--axis-y) - 15px); left: -2px; width: 4px; height: 30px; background: var(--world-ink); border-radius: 2px; }
.tg-place-tick__label { position: absolute; top: calc(var(--axis-y) + 20px); left: 0; color: var(--ink); font-size: clamp(16px, 1.6vw, 23px); font-weight: 850; line-height: 1.1; white-space: nowrap; transform: translateX(-50%); }
.tg-place__marker,
.tg-place__flag,
.tg-place__reference,
.tg-place__pill,
.tg-tree { position: absolute; left: var(--at); display: grid; justify-items: center; pointer-events: none; translate: -50% 0; }
.tg-place__marker { z-index: 3; top: calc(var(--axis-y) - 64px); width: 46px; }
.tg-place__figure { width: 46px; height: 50px; overflow: visible; }
.tg-place__model { fill: var(--world-model); stroke: var(--world-model-edge); stroke-width: 2.5; stroke-linejoin: round; }
.tg-place__ink { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tg-place__head { fill: var(--coral-base); }
.tg-place__accent { fill: var(--world-accent); }
.tg-place__wheel { fill: var(--ink); }
.tg-place__marker i { width: 4px; height: 14px; background: var(--world-model-edge); border-radius: 2px; }
.tg-place__flag { z-index: 2; top: calc(var(--axis-y) - 2px); width: 2px; }
.tg-place__flag i { width: 22px; height: 22px; margin-top: -9px; background: var(--gold-base); border: 3px solid var(--surface); border-radius: 50%; }
.tg-place__flag b { margin-top: 34px; padding: 2px 10px; color: var(--on-fill); background: var(--gold-fill); border: 2px solid var(--gold-line); border-radius: 999px; font-size: clamp(15px, 1.5vw, 20px); font-weight: 900; white-space: nowrap; }
.tg-place__flag.is-start b { translate: calc(50% - 12px) 0; }
.tg-place__flag.is-end b { translate: calc(-50% + 12px) 0; }
.tg-place__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tg-place__lock { min-width: 140px; }
.tg-place__status { min-height: 1.4em; margin: 0; color: var(--ink-2); font-size: clamp(15px, 1.4vw, 18px); font-weight: 750; }
.tg-place__status[data-tg-points] { color: var(--world-ink); font-size: clamp(20px, 2vw, 26px); font-weight: 900; }
/* The reveal under the line: Ölçü Parkuru's chain of units, Yolculuk Planı's factor. */
.tg-place__reveal { max-width: 100%; margin: 0; padding: 4px 16px; color: var(--world-ink); background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 14px; font-size: clamp(17px, 1.7vw, 23px); font-weight: 900; text-align: center; overflow-wrap: anywhere; }
/* Labels standing on a line: a pill over a stem down to the axis. */
.tg-place__reference b,
.tg-place__pill b { padding: 1px 9px; color: var(--world-ink); background: var(--surface); border: 2px solid var(--world-band-edge); border-radius: 999px; font-size: clamp(14px, 1.3vw, 18px); font-weight: 850; line-height: 1.25; white-space: nowrap; }
.tg-place__reference i,
.tg-place__pill i { width: 3px; background: var(--world-ink); border-radius: 2px; }

/* Ölçü Parkuru: the reference flag on a pole from the top of the track down to the axis. */
.tg-place[data-topic-game="track"] .tg-place__track { --axis-y: 82px; height: 128px; }
.tg-place__reference { top: 2px; height: calc(var(--axis-y) - 2px); grid-template-rows: auto 1fr; }
.tg-place__reference b { border-style: dashed; }

/* Yolculuk Planı: the top line in kilometres above the bottom line that takes the bus; the givens stand
   over both axes, the target in the accent. A line whose pills take two rows grows by the raised row. Zor's
   table stands beside the two lines on wider screens, so the bottom line stays on a 768 px board. */
.tg-place__track--top { --axis-y: 48px; height: 86px; cursor: default; background: none; }
.tg-place__pill { top: calc(var(--axis-y) - 42px); height: 40px; grid-template-rows: auto 1fr; }
.tg-place__pill.is-raised { top: calc(var(--axis-y) - 72px); height: 70px; }
.tg-place__pill.is-target b { color: var(--world-ink); background: var(--world-band); border: 3px solid var(--world-accent); }
.tg-place__track--top:has(.is-raised) { --axis-y: 76px; height: 114px; }
.tg-place[data-topic-game="doubleLine"] [data-tg-track]:has(.is-raised) { --axis-y: 76px; height: 122px; }
@media (min-width: 701px) {
  .tg-place:has(> .tg-place__table) { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(14px, 2vw, 28px); }
  .tg-place:has(> .tg-place__table) > * { grid-column: 1 / -1; }
  .tg-place:has(> .tg-place__table) > .tg-place__table { grid-row: 1 / span 2; grid-column: 1; align-self: center; }
  .tg-place:has(> .tg-place__table) > .tg-place__line--top { grid-row: 1; grid-column: 2; }
  .tg-place:has(> .tg-place__table) > [data-tg-line] { grid-row: 2; grid-column: 2; }
}
.tg-place__table { border-collapse: separate; border-spacing: 0; color: var(--ink); background: var(--surface); border: 2px solid var(--world-band-edge); border-radius: 12px; font-size: clamp(16px, 1.6vw, 21px); font-weight: 850; text-align: center; overflow: hidden; }
.tg-place__table th,
.tg-place__table td { padding: 3px 18px; }
.tg-place__table th { color: var(--world-ink); background: var(--world-band); font-weight: 900; }
.tg-place__table td + td { border-left: 2px solid var(--world-band-edge); }
.tg-place__table .is-target td { color: var(--world-ink); border-top: 2px dashed var(--world-band-edge); }

/* Kök Ormanı: a tree on each whole number, its label under the axis; the two trees around the root are
   marked once the board settles. The sapling stands above the tree tops on a stem down to the axis, so a
   guess on a whole number never covers that tree. The flag's value fits inside the track, a row under the
   tree labels. The soil is a strip under the axis that fades out, so the room kept for the flag's value
   reads as ground, not as an empty box. */
.tg-place[data-topic-game="rootLine"] .tg-place__track {
  --axis-y: 98px;
  height: 184px;
  margin-bottom: 0;
  background: linear-gradient(to bottom, transparent var(--axis-y), var(--world-band) var(--axis-y), var(--world-band) calc(var(--axis-y) + 14px), transparent calc(var(--axis-y) + 54px));
}
.tg-place[data-topic-game="rootLine"] .tg-place__marker { top: calc(var(--axis-y) - 98px); }
.tg-place[data-topic-game="rootLine"] .tg-place__marker i { height: 48px; }
.tg-place[data-topic-game="rootLine"] .tg-place__flag b { margin-top: 40px; }
.tg-tree { top: calc(var(--axis-y) - 46px); }
.tg-tree__art { width: 30px; height: 44px; }
.tg-tree__trunk { fill: var(--world-model-edge); }
.tg-tree__crown { fill: var(--world-accent); stroke: var(--world-ink); stroke-width: 1.5; stroke-linejoin: round; }
.tg-tree b { margin-top: 12px; padding: 0 6px; color: var(--ink); border: 2px solid transparent; border-radius: 8px; font-size: clamp(15px, 1.5vw, 20px); font-weight: 850; line-height: 1.25; white-space: nowrap; }
.tg-tree[data-tg-around] b { color: var(--world-ink); background: var(--world-band); border-color: var(--world-accent); }
.tg-tree[data-tg-around] .tg-tree__crown { fill: var(--gold-base); }

/* ---------- Kesir Treni (rail): the train on its rail, the station, the strips of one whole ---------- */
.tg-train {
  --wheels: radial-gradient(circle at 7px 5px, var(--ink) 5px, transparent 5.5px) left 10px top / 14px 12px no-repeat, radial-gradient(circle at 7px 5px, var(--ink) 5px, transparent 5.5px) right 10px top / 14px 12px no-repeat;
  width: 100%;
}
.tg-train__station,
.tg-climb__tray {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  min-height: 76px;
  padding: 6px 16px;
  background: var(--world-band);
  border: 2px dashed var(--world-band-edge);
  border-radius: 16px;
}
.tg-train__sign,
.tg-climb__sign { color: var(--world-ink); font-size: 15px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.tg-train__waiting-slot:empty,
.tg-climb__slot:empty { display: none; }
.tg-train__queue,
.tg-climb__queue { color: var(--ink-2); font-size: 15px; font-weight: 750; }
.tg-train__queue:empty,
.tg-climb__queue:empty { display: none; }
/* The rail is drawn under every piece (the locomotive, each wagon's wheels, each gap), so a wrapped train
   keeps its track on every row. */
.tg-train__rail { --rail: linear-gradient(var(--world-ink), var(--world-ink)) left bottom / 100% 4px no-repeat; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; row-gap: 14px; max-width: 100%; }
.tg-train__loco { width: clamp(58px, 6vw, 76px); height: auto; padding-bottom: 3px; overflow: visible; background: var(--rail); box-sizing: content-box; }
.tg-train__loco-body,
.tg-train__loco-cab { fill: var(--world-accent); stroke: var(--world-ink); stroke-width: 2; }
.tg-train__loco-window { fill: var(--surface); }
.tg-train__loco-nose { fill: var(--world-ink); }
.tg-train__wheel { fill: var(--ink); }
.tg-wagon {
  position: relative;
  display: grid;
  min-width: clamp(62px, 6.6vw, 92px);
  height: clamp(54px, 6.4vw, 72px);
  margin-bottom: 12px;
  place-items: center;
  padding: 0 10px;
  color: var(--ink);
  background: var(--world-model);
  border: 3px solid var(--world-model-edge);
  border-radius: 10px 10px 6px 6px;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 900;
  white-space: nowrap;
}
/* Two wheels in the wagon's bottom margin, on the rail when the wagon is coupled. */
.tg-wagon::after {
  position: absolute;
  right: -3px;
  bottom: -15px;
  left: -3px;
  height: 12px;
  background: var(--wheels);
  content: "";
}
.tg-train__rail .tg-wagon::after { background: var(--wheels), var(--rail); }
.tg-train__station .tg-wagon { border-style: dashed; border-color: var(--world-accent); }
/* A gap on any insertion board is a dashed "+" ring to tap; the whole stretch between two pieces is the
   touch target. Disabled (the row is done), it closes up and the ring goes. */
.tg-gap {
  display: grid;
  padding: 0;
  place-items: center;
  color: var(--world-ink);
  background: none;
  border: 0;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
}
.tg-gap span { display: grid; width: 44px; height: 44px; place-items: center; background: var(--surface); border: 2px dashed var(--world-band-edge); border-radius: 50%; transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.tg-gap:hover:not(:disabled) span { background: var(--world-band); border-style: solid; transform: scale(1.08); }
.tg-gap:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.tg-gap:disabled { cursor: default; }
.tg-gap:disabled span { display: none; }
/* On the train a gap is a stretch of rail. */
.tg-train__rail .tg-gap { min-width: 50px; height: calc(clamp(54px, 6.4vw, 72px) + 12px); padding: 0 3px 16px; background: var(--rail); }
.tg-train__rail .tg-gap:disabled { min-width: 8px; padding: 0; }
.tg-train__strips {
  --unit: clamp(80px, 22vw, 220px);
  display: grid;
  max-width: 100%;
  gap: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  justify-items: start;
}
.tg-strip { display: grid; grid-template-columns: 4.6em auto; align-items: center; gap: 10px; }
.tg-strip__label { color: var(--ink); font-size: 18px; font-weight: 900; text-align: right; white-space: nowrap; }
.tg-strip.is-waiting .tg-strip__label { color: var(--world-ink); }
.tg-strip__bar { position: relative; display: flex; height: 26px; }
.tg-strip__bar i { box-sizing: border-box; width: var(--unit); height: 100%; background: var(--surface); border: 2px solid var(--world-model-edge); }
.tg-strip__bar i + i { border-left-width: 0; }
.tg-strip__bar b { position: absolute; top: 5px; bottom: 5px; left: 0; background: var(--world-model-edge); border-radius: 0 3px 3px 0; }
.tg-strip.is-waiting .tg-strip__bar b { background: var(--world-accent); }

/* ---------- Tam Sayı Merdiveni and Rasyonel Sıralama (climb): the ladder, the shelf, the mini line ---------- */
.tg-climb-card {
  display: grid;
  min-width: clamp(68px, 7vw, 96px);
  height: clamp(52px, 6vw, 66px);
  place-items: center;
  padding: 0 12px;
  color: var(--ink);
  background: var(--surface);
  border: 3px dashed var(--world-accent);
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 900;
  white-space: nowrap;
}
/* Placed pieces take the integer lab's sign colours: orange below 0, blue above, the world's green at 0. */
.tg-rung,
.tg-shelf-item {
  color: var(--ink);
  border: 3px solid var(--line-strong);
  font-family: var(--font-display);
  font-weight: 900;
  white-space: nowrap;
}
.tg-rung[data-sign="neg"],
.tg-shelf-item[data-sign="neg"] { color: var(--sign-neg-ink); background: var(--sign-neg-tint); border-color: var(--sign-neg-line); }
.tg-rung[data-sign="pos"],
.tg-shelf-item[data-sign="pos"] { color: var(--sign-pos-ink); background: var(--sign-pos-tint); border-color: var(--sign-pos-line); }
.tg-rung[data-sign="zero"],
.tg-shelf-item[data-sign="zero"] { color: var(--world-ink); background: var(--world-band); border-color: var(--world-band-edge); }

/* The ladder: rails either side, the tray and the mini line beside it (above it on a phone). Gaps reach a
   little into the rungs around them, so a Zor round's ladder fits a 768-px board without its touch targets
   shrinking. */
.tg-ladder {
  grid-template-columns: auto minmax(0, 400px);
  grid-template-areas: "frame side";
  align-items: center;
  justify-content: center;
  column-gap: clamp(20px, 4vw, 56px);
  width: 100%;
}
.tg-ladder__side { display: grid; grid-area: side; gap: 12px; justify-self: stretch; }
.tg-ladder__frame {
  display: flex;
  grid-area: frame;
  flex-direction: column;
  width: clamp(220px, 22vw, 300px);
  padding: 8px 0;
  border-inline: 8px solid var(--world-ink);
  border-radius: 6px;
}
.tg-rung {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: clamp(22px, 2.2vw, 30px);
}
.tg-rung[data-ground] { border-bottom-width: 7px; }
.tg-rung__distance { font-size: .72em; font-weight: 800; }
.tg-ladder__frame .tg-gap { position: relative; z-index: 1; width: 100%; height: 44px; margin-block: -6px; }
.tg-ladder__frame .tg-gap span { width: 34px; height: 34px; font-size: 20px; }
.tg-ladder__frame .tg-gap:disabled { height: 8px; margin-block: 0; }

/* The shelf: cards standing on one plank, drawn under every piece so a wrapped shelf keeps its plank. */
.tg-shelf { width: 100%; }
.tg-shelf__plank { --plank: linear-gradient(var(--world-ink), var(--world-ink)) left bottom / 100% 6px no-repeat; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; row-gap: 14px; max-width: 100%; }
.tg-shelf-item {
  position: relative;
  display: grid;
  min-width: clamp(62px, 6.6vw, 92px);
  height: clamp(54px, 6.4vw, 72px);
  margin-bottom: 10px;
  place-items: center;
  padding: 0 10px;
  border-radius: 10px 10px 4px 4px;
  font-size: clamp(20px, 2.1vw, 28px);
}
.tg-shelf-item::after { position: absolute; right: -3px; bottom: -13px; left: -3px; height: 6px; background: var(--plank); content: ""; }
.tg-shelf__plank .tg-gap { min-width: 50px; height: calc(clamp(54px, 6.4vw, 72px) + 10px); padding: 0 3px 10px; background: var(--plank); }
.tg-shelf__plank .tg-gap:disabled { min-width: 8px; padding-inline: 0; }

/* The mini line under a wrong gap: the card and its neighbours by value, labels above and below in turn. */
.tg-miniline { width: min(520px, 100%); justify-self: center; padding: 0 30px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.tg-miniline__axis { position: relative; height: 104px; }
.tg-miniline__axis::before { position: absolute; top: 50%; right: -14px; left: -14px; height: 4px; margin-top: -2px; background: var(--ink-2); border-radius: 2px; content: ""; }
.tg-miniline__mark,
.tg-miniline__zero { position: absolute; top: 50%; left: var(--at); width: 0; }
.tg-miniline__mark i,
.tg-miniline__zero i { position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; background: var(--ink-2); border: 3px solid var(--surface-2); border-radius: 50%; }
.tg-miniline__zero i { top: -10px; left: -2px; width: 4px; height: 20px; border: 0; border-radius: 2px; }
.tg-miniline__mark b,
.tg-miniline__zero b { position: absolute; left: 0; color: var(--ink); font-size: 18px; font-weight: 900; white-space: nowrap; transform: translateX(-50%); }
.tg-miniline__mark b { bottom: 14px; }
.tg-miniline__mark[data-side="below"] b,
.tg-miniline__zero b { top: 14px; bottom: auto; }
.tg-miniline__zero b { color: var(--ink-2); font-size: 16px; }
.tg-miniline__mark.is-waiting i { background: var(--world-accent); }
.tg-miniline__mark.is-waiting b { padding: 0 6px; background: var(--surface); border: 2px dashed var(--world-accent); border-radius: 8px; }

/* ---------- Üs Reaktörü (space): chambers of tiles, the core and the exponent dial ---------- */
.tg-reactor__chambers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.tg-reactor__chamber {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
  color: var(--world-ink);
  background: var(--world-band);
  border: 2px solid var(--world-band-edge);
  border-radius: 16px;
}
.tg-reactor__label { font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); font-weight: 900; }
.tg-reactor__tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: min(360px, 74vw); }
.tg-reactor__tile {
  display: grid;
  min-width: 42px;
  height: 42px;
  place-items: center;
  padding: 0 6px;
  color: var(--on-fill);
  background: var(--gold-fill);
  border: 2px solid var(--gold-line);
  border-radius: 9px;
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  transition: transform var(--dur) ease, opacity var(--dur) ease;
}
.tg-reactor__tile[data-cancelled] { opacity: .3; transform: scale(.82); text-decoration: line-through 3px; }
.tg-reactor__sign { color: var(--ink); font-size: clamp(26px, 2.6vw, 34px); font-weight: 900; }
.tg-reactor__console { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; }
.tg-reactor__core-wrap { display: grid; place-items: center; }
.tg-reactor__core { width: 54px; height: 54px; }
.tg-reactor__core-ring { fill: var(--brand-tint); stroke: var(--brand); stroke-width: 3; }
.tg-reactor__core-heart { fill: var(--gold-base); }
.tg-reactor__core-ray { stroke: var(--gold-line); stroke-width: 3; stroke-linecap: round; }
.tg-reactor__dial-group { display: flex; align-items: center; gap: 8px; }
.tg-reactor__dial {
  display: inline-flex;
  min-width: 128px;
  align-items: flex-start;
  justify-content: center;
  padding: 4px 16px 8px;
  color: var(--ink);
  background: var(--surface);
  border: 3px solid var(--brand);
  border-radius: 16px;
  font-family: var(--font-display);
  font-size: clamp(36px, 3.6vw, 48px);
  font-weight: 900;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.tg-reactor__k { color: var(--brand-ink); font-size: .6em; }
/* Every power on a topic card, prompt, chambers and dial alike, as one raised exponent at .6 of its base. */
.question-card--topic sup { font-size: .6em; line-height: 0; vertical-align: super; }
.tg-reactor__fire { min-width: 140px; }

/* ---------- Uzay Ölçekleri (space, step 15): the normalizer, the powers-of-ten ruler and the comparison. The
   ruler's decades are buttons of equal width, each ticked at its left edge with its power; the objects hang
   over it at log10 of their size, their names in two rows so neighbours do not collide: two labels on one row
   stand four decades or more apart, and the upper row starts a label's height (fixed line height) and a few
   pixels above the lower one, so neighbours on adjacent rows never touch even where they overlap sideways. Pins
   are placed by left and margins, so a finale's transform moves them in place. ---------- */
.tg-scales__normalizer {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  padding: 6px 26px 10px;
  color: var(--world-ink);
  background: var(--world-band);
  border: 3px solid var(--world-band-edge);
  border-radius: 18px;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 900;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.tg-scales__coefficient { min-width: 2ch; text-align: right; }
.tg-scales__comma { display: inline-block; color: var(--world-accent); }
.tg-scales__times { font-size: .8em; }
.tg-scales__exponent { color: var(--world-accent); }
.tg-scales__normalizer[data-answer] { border-color: var(--green-base); }
.tg-scales__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; }
.tg-scales__move { min-width: 128px; }
.tg-scales__check { min-width: 160px; min-height: var(--touch); scroll-margin-block: 12px; }
.tg-scales__status { min-height: 1.4em; margin: 0; color: var(--ink-2); font-size: clamp(15px, 1.4vw, 18px); font-weight: 750; text-align: center; }
.tg-scales__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; }

/* The quantity stands beside the check key as the legend of its gold pin, which shows once the round is over. */
.tg-scales__quantity { margin: 0; color: var(--ink); font-size: clamp(20px, 2vw, 26px); font-weight: 800; text-align: center; }
.tg-scales__quantity::before { display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -2px; background: var(--gold-fill); border: 3px solid var(--gold-line); border-radius: 50%; content: ""; }
.tg-scales__quantity b { color: var(--brand-ink); font-weight: 900; }
.tg-scales__size { white-space: nowrap; }
.tg-scales__ruler {
  width: min(100%, 940px);
  padding: 8px 30px 12px;
  background: var(--world-band);
  border: 2px solid var(--world-band-edge);
  border-radius: 18px;
}
.tg-scales__sky { position: relative; height: 82px; }
.tg-scales__object { position: absolute; bottom: 0; width: 0; height: 100%; }
.tg-scales__pin { position: absolute; bottom: 2px; left: 0; width: 16px; height: 16px; margin-left: -8px; background: var(--world-accent); border: 2px solid var(--world-band); border-radius: 50%; }
.tg-scales__label {
  position: absolute;
  bottom: 24px;
  left: 0;
  padding: 1px 7px;
  color: var(--world-ink);
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  transform: translateX(-50%);
}
.tg-scales__object[data-row="1"] .tg-scales__label { bottom: 52px; }
.tg-scales__object[data-edge="start"] .tg-scales__label { left: -8px; transform: none; }
.tg-scales__object[data-edge="end"] .tg-scales__label { right: -8px; left: auto; transform: none; }
.tg-scales__label::after { position: absolute; top: 100%; left: 50%; width: 2px; height: 30px; margin-left: -1px; background: var(--world-accent); opacity: .55; content: ""; }
.tg-scales__object[data-row="0"] .tg-scales__label::after { height: 4px; }
.tg-scales__object[data-edge="start"] .tg-scales__label::after { left: 8px; }
.tg-scales__object[data-edge="end"] .tg-scales__label::after { right: 7px; left: auto; }
.tg-scales__object--quantity .tg-scales__pin { bottom: 0; width: 24px; height: 24px; margin-left: -12px; background: var(--gold-fill); border: 3px solid var(--gold-line); }
.tg-scales__decades { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-right: 3px solid var(--world-ink); }
.tg-scales__decade {
  display: block;
  height: 60px;
  padding: 22px 0 0 8px;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-left: 3px solid var(--world-ink);
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 900;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.tg-scales__decade:nth-child(even) { background: var(--surface-2); }
.tg-scales__decade:hover:not(:disabled) { color: var(--brand-ink); }
.tg-scales__decade:focus-visible { position: relative; z-index: 1; outline: 4px solid var(--focus); outline-offset: -4px; }
.tg-scales__decade[aria-pressed="true"] { color: var(--on-fill); background: var(--gold-fill); }
.tg-scales__decade:disabled { color: var(--ink-3); opacity: 1; cursor: default; }
.tg-scales__decade[data-answer] { color: var(--green-ink); background: var(--green-tint); box-shadow: inset 0 -6px 0 var(--green-base); }
.tg-scales__end { position: absolute; top: 22px; right: 6px; color: var(--ink-3); font-family: var(--font-display); font-size: clamp(16px, 1.5vw, 20px); font-weight: 900; pointer-events: none; }

.tg-scales__pair { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 48px); font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tg-scales__number { padding: 4px 18px 8px; color: var(--world-ink); background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 16px; white-space: nowrap; }
.tg-scales__slot { display: inline-grid; min-width: 1.6em; place-items: center; color: var(--ink-3); border: 3px dashed var(--line-strong); border-radius: 14px; transition: color var(--dur) ease, background-color var(--dur) ease, border-color var(--dur) ease; }
.tg-scales__slot[data-answer] { color: var(--green-ink); background: var(--green-tint); border-style: solid; border-color: var(--green-base); }
.tg-scales__choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.tg-scales__choice { min-width: 88px; min-height: 64px; font-size: 34px; }
.tg-scales__choice[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }

/* A short landscape board (1366 × 768 in a duel, under the scoreboard): the kicker goes and the prompt keeps 32 px,
   as on the newsroom and the elevator, and the ruler slims down, so the decades and the check key stand above the
   instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.tg-scales) .question-kicker { display: none; }
  .question-card--topic:has(.tg-scales) .turn-banner,
  .question-card--topic:has(.tg-scales) .question-experience { margin-bottom: 6px; }
  .question-card--topic:has(.tg-scales) .question-copy { margin-bottom: 8px; }
  .question-card--topic:has(.tg-scales) .question-copy h2 { font-size: clamp(22px, 2.35vw, 32px); }
  .tg-scales { gap: 10px; }
  .tg-scales__sky { height: 72px; }
  .tg-scales__object[data-row="1"] .tg-scales__label { bottom: 50px; }
  .tg-scales__object[data-row="1"] .tg-scales__label::after { height: 28px; }
  .tg-scales__decade { height: 54px; padding-top: 18px; }
  .tg-scales__end { top: 18px; }
}

/* ---------- Bölünebilme Kapıları (gates): the Zor gates, and the classifier's badge and digits ---------- */
.tg-gates__number { display: flex; margin: 0; padding: 4px 22px; color: var(--ink); background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 16px; font-family: var(--font-display); font-size: clamp(40px, 4.6vw, 60px); font-weight: 900; letter-spacing: .03em; line-height: 1.1; }
.tg-gates__row { display: grid; width: min(1120px, 100%); grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.tg-gate {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 8px 6px 10px;
  color: var(--ink);
  background: var(--surface);
  border: 3px solid var(--world-model-edge);
  border-radius: 16px 16px 10px 10px;
  cursor: pointer;
  transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.tg-gate:hover:not(:disabled) { transform: translateY(-2px); }
.tg-gate__arch { position: relative; display: block; width: 46px; height: 40px; overflow: hidden; border: 3px solid var(--world-model-edge); border-bottom: 0; border-radius: 23px 23px 0 0; }
.tg-gate__door { position: absolute; inset: 3px 3px 0; background: var(--world-model); border-radius: 18px 18px 0 0; transform-origin: 50% 0; transition: transform var(--dur) ease; }
.tg-gate[aria-pressed="true"] { background: var(--world-band); border-color: var(--world-accent); }
.tg-gate[aria-pressed="true"] .tg-gate__door { transform: scaleY(.15); }
.tg-gate__k { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 900; line-height: 1; }
.tg-gate__rule { color: var(--ink-2); font-size: 13px; font-weight: 700; line-height: 1.2; }
.tg-gate[data-result]::after { position: absolute; top: -12px; right: -10px; display: grid; width: 28px; height: 28px; place-items: center; color: #ffffff; border-radius: 50%; font-size: 16px; font-weight: 900; }
.tg-gate[data-result="right"] { background: var(--green-tint); border-color: var(--green-base); }
.tg-gate[data-result="right"]::after { background: var(--green-fill); content: "✓"; }
.tg-gate[data-result="wrong"] { background: var(--red-tint); border-color: var(--red-base); }
.tg-gate[data-result="wrong"]::after { background: var(--red-fill); content: "✗"; }
.tg-gate[data-result="missed"] { background: var(--gold-tint); border-color: var(--gold-line); border-style: dashed; }
.tg-gate[data-result="missed"]::after { color: var(--on-fill); background: var(--gold-fill); content: "!"; }
.tg-gate[data-result="wrong"] .tg-gate__rule,
.tg-gate[data-result="missed"] .tg-gate__rule { display: none; }
.tg-gate__reason { font-size: 14px; font-weight: 800; line-height: 1.2; }
.tg-gate[data-result="wrong"] .tg-gate__reason { color: var(--red-ink); }
.tg-gate[data-result="missed"] .tg-gate__reason { color: var(--gold-ink); }
.tg-gates__check { min-width: 160px; }
.tg-gate-badge { display: inline-flex; align-items: baseline; margin: 0; padding: 5px 16px; gap: 10px; color: var(--world-ink); background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 999px; font-size: clamp(15px, 1.4vw, 18px); font-weight: 750; }
.tg-gate-badge strong { font-size: clamp(20px, 1.9vw, 25px); font-weight: 900; }
.tg-digit[data-rule-read] { color: var(--world-ink); text-decoration: underline 3px var(--world-accent); text-underline-offset: 5px; }
.sg-sort-card__reason { display: block; margin-top: 4px; font-size: .8em; font-weight: 700; }

/* ---------- Tarif Karıştırıcı (market): two jugs, the ratio table, the price tag, the offers, the keypad ---------- */
.tg-mixer__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); width: 100%; }
.tg-mixer__jugs { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 3vw, 40px); }
.tg-mixer__jug { display: grid; justify-items: center; gap: 6px; margin: 0; }
.tg-mixer__name { color: var(--world-ink); font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 900; line-height: 1; }
/* The jug: a glass body with a spout and a handle; the drink fills it from the bottom. */
.tg-mixer__vessel { position: relative; display: block; width: clamp(92px, 9vw, 120px); height: clamp(108px, 11vw, 144px); overflow: hidden; background: var(--surface); border: 4px solid var(--world-model-edge); border-top-width: 3px; border-radius: 10px 10px 26px 26px; }
/* The pour is white in every theme (--on-inverse), so the gold at its ratio's opacity reads as pale-to-gold
   lemonade over the dark vessel too, not as gold muddied by the navy behind it. */
.tg-mixer__pour { position: absolute; right: 0; bottom: 0; left: 0; background: var(--on-inverse); }
.tg-mixer__drink { position: absolute; inset: 0; background: var(--gold); border-top: 3px solid var(--gold-line); transition-duration: 0s; }
.tg-mixer__jug[data-answer] .tg-mixer__vessel { border-color: var(--green-base); }
.tg-mixer__recipe { display: grid; justify-items: center; color: var(--ink); font-size: clamp(16px, 1.5vw, 20px); font-weight: 750; line-height: 1.25; }
.tg-mixer__recipe b { font-family: var(--font-display); font-size: 1.3em; font-weight: 900; }
.tg-mixer__versus { align-self: center; color: var(--world-ink); font-family: var(--font-display); font-size: clamp(30px, 3vw, 42px); font-weight: 900; }
.tg-mixer__choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.tg-mixer__choice { min-width: 150px; font-size: clamp(18px, 1.6vw, 22px); }
.tg-mixer__choice[data-answer] { color: var(--green-ink); border-color: var(--green-base); opacity: 1; }
.tg-mixer__table { border-collapse: separate; border-spacing: 0; overflow: hidden; color: var(--ink); background: var(--surface); border: 3px solid var(--world-model-edge); border-radius: 14px; font-size: clamp(20px, 2vw, 26px); font-variant-numeric: tabular-nums; }
.tg-mixer__table th,
.tg-mixer__table td { padding: 6px clamp(12px, 1.6vw, 22px); text-align: center; border-top: 2px solid var(--line); }
.tg-mixer__table thead th,
.tg-mixer__table thead td { color: var(--world-ink); background: var(--world-band); border-top: 0; font-size: .8em; font-weight: 900; }
.tg-mixer__table tbody th { color: var(--ink-2); font-size: .72em; font-weight: 800; text-align: left; }
.tg-mixer__table tbody td { font-family: var(--font-display); font-weight: 900; }
.tg-mixer__missing { display: inline-grid; min-width: 1.8em; place-items: center; padding: 0 6px; color: var(--world-ink); background: var(--world-model); border: 2px dashed var(--world-model-edge); border-radius: 8px; }
.tg-mixer__missing[data-answer] { color: var(--green-ink); background: var(--green-tint); border: 2px solid var(--green-base); }
/* The price tag hangs on its string; one small circle for every piece it prices. */
.tg-mixer__tag { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 22px 12px 34px; color: var(--ink); background: var(--gold-tint); border: 3px solid var(--gold-line); border-radius: 8px 18px 18px 8px; }
.tg-mixer__tag[data-answer] { border-color: var(--green-base); }
.tg-mixer__tag::before { position: absolute; top: calc(50% - 7px); left: 10px; width: 14px; height: 14px; background: var(--surface); border: 2px solid var(--gold-line); border-radius: 50%; content: ""; }
.tg-mixer__pieces { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 150px; }
.tg-mixer__pieces i { width: 14px; height: 14px; background: var(--gold); border: 2px solid var(--gold-line); border-radius: 50%; }
.tg-mixer__tag-adet { font-size: clamp(17px, 1.6vw, 21px); font-weight: 750; }
.tg-mixer__tag-adet b,
.tg-mixer__tag-price { font-family: var(--font-display); font-weight: 900; }
.tg-mixer__tag-price { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.05; }
.tg-mixer__count { margin: 0; width: 100%; color: var(--ink); font-size: clamp(18px, 1.7vw, 22px); font-weight: 750; text-align: center; }
.tg-mixer__count b { font-family: var(--font-display); font-size: 1.4em; font-weight: 900; }
.tg-mixer__model { display: grid; justify-items: center; gap: 12px; }
.tg-mixer__offers { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.tg-mixer__offer { display: grid; justify-items: center; gap: 4px; min-width: 170px; padding: 10px 18px 12px; color: var(--ink); background: var(--paper); border: 3px solid var(--world-model-edge); border-radius: 14px; font-size: clamp(16px, 1.5vw, 19px); font-weight: 700; }
.tg-mixer__offer b { white-space: nowrap; font-family: var(--font-display); font-size: 1.2em; font-weight: 900; }
.tg-mixer__offer[data-answer] { border-color: var(--green-base); }
/* Keypad 2 (topic-studio.js): the entry and its unit, the keys (six columns unless a board sets
   --pad-columns), then Temizle and Kontrol et. */
.tg-pad { display: grid; justify-items: center; gap: 10px; }
.tg-pad__answer { display: flex; align-items: center; gap: 10px; }
.tg-pad__entry { display: inline-grid; min-width: 4.2em; min-height: 1.4em; place-items: center; padding: 2px 14px; color: var(--ink); background: var(--surface); border: 3px solid var(--world-model-edge); border-radius: 14px; font-family: var(--font-display); font-size: clamp(30px, 3vw, 40px); font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tg-pad__entry[data-value=""]::before { color: var(--ink-3); content: "?"; }
.tg-pad__entry[data-missed] { color: var(--red-ink); border-color: var(--red-base); }
/* The settled entry keeps its value readable, not dimmed like a disabled control. */
.tg-pad__entry[aria-disabled="true"] { cursor: default; opacity: 1; }
.tg-pad__entry[data-answer] { border-color: var(--green-base); }
.tg-pad__unit { color: var(--world-ink); font-size: clamp(18px, 1.7vw, 22px); font-weight: 900; }
.tg-pad__keys { display: grid; grid-template-columns: repeat(var(--pad-columns, 6), minmax(var(--touch), 1fr)); gap: 8px; }
.tg-pad__actions { display: flex; gap: 10px; }
.tg-pad__actions .tg-key { font-size: 18px; }
/* On a wide screen the choices stand in a column beside the jugs or the offers, so the board stays one
   screen tall at 1366×768. */
@media (min-width: 701px) {
  .tg-mixer__work { flex-wrap: nowrap; }
  .tg-mixer__choices { flex-direction: column; width: auto; }
}
.tg-mixer__reason { margin: 0; padding: 6px 16px; color: var(--world-ink); background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 999px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; text-align: center; }

/* ---------- Buzul İstasyonu (ice): the thermometer or the fine number line, then keypad 2 ---------- */
.tg-ice__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 36px); width: 100%; }
.tg-ice__work[data-orientation="vertical"] { flex-wrap: nowrap; gap: clamp(10px, 3vw, 48px); }
.tg-ice__scale { --level: var(--sign-zero); --level-line: var(--sign-zero); color: var(--ink); }
.tg-ice__scale[data-sign="pos"] { --level: var(--sign-pos); --level-line: var(--sign-pos-line); }
.tg-ice__scale[data-sign="neg"] { --level: var(--sign-neg); --level-line: var(--sign-neg-line); }
.tg-ice__track { position: relative; }
.tg-ice__tick,
.tg-ice__label,
.tg-ice__mark,
.tg-ice__change,
.tg-ice__hop,
.tg-ice__tube,
.tg-ice__bulb,
.tg-ice__mercury { position: absolute; }
.tg-ice__tick { background: var(--ink-3); }
.tg-ice__tick.is-major { background: var(--ink); }
.tg-ice__label { color: var(--ink); font-family: var(--font-display); font-size: clamp(15px, 1.4vw, 19px); font-weight: 900; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Marks: the start is a ring, the end (the dividend, or the result once the round is over) a gold dot. Both
   centre with translate, so the finale's pulse (a transform) keeps them on their value. */
.tg-ice__mark { width: 20px; height: 20px; border-radius: 50%; }
.tg-ice__mark--start { z-index: 2; background: var(--surface); border: 4px solid var(--ink); }
.tg-ice__mark--end { z-index: 3; background: var(--gold-base); border: 3px solid var(--gold-line); }
/* The change: a bar from the start to the end, its head at the end, its signed size beside it; rising is
   the positive blue, falling the negative orange. */
.tg-ice__change { --arrow: var(--sign-pos-line); --arrow-ink: var(--sign-pos-ink); background: var(--arrow); }
.tg-ice__change[data-direction="down"],
.tg-ice__change[data-direction="left"] { --arrow: var(--sign-neg-line); --arrow-ink: var(--sign-neg-ink); }
.tg-ice__change::after { position: absolute; width: 0; height: 0; border: 8px solid transparent; content: ""; }
.tg-ice__change b,
.tg-ice__hop b { position: absolute; color: var(--arrow-ink, var(--world-ink)); font-family: var(--font-display); font-size: clamp(16px, 1.5vw, 20px); font-weight: 900; white-space: nowrap; }
.tg-ice__hop { border: 3px solid var(--world-accent); }
.tg-ice__hop--ghost { border-style: dashed; }
/* The jumps land one after another once the round is over. */
.tg-ice__hop[data-tg-jump] { animation: tg-ice-hop 260ms ease-out calc(var(--i) * 70ms) backwards; }
@keyframes tg-ice-hop { from { opacity: 0; transform: scale(.6); } }

/* The thermometer: labels, ticks, the tube with its bulb, then the marks, the hops and the arrow. */
.tg-ice__scale[data-orientation="vertical"] { flex: none; padding: 20px 0 50px; }
.tg-ice__scale[data-orientation="vertical"] .tg-ice__track { width: 168px; height: clamp(200px, 30vh, 320px); }
.tg-ice__scale[data-orientation="vertical"] .tg-ice__label { right: calc(100% - 44px); bottom: var(--at); translate: 0 50%; }
.tg-ice__scale[data-orientation="vertical"] .tg-ice__tick { left: 50px; bottom: var(--at); width: 8px; height: 2px; translate: 0 50%; }
.tg-ice__scale[data-orientation="vertical"] .tg-ice__tick.is-major { left: 46px; width: 12px; height: 3px; }
.tg-ice__tube { top: -18px; bottom: -12px; left: 60px; width: 26px; background: var(--paper); border: 3px solid var(--line-strong); border-bottom: 0; border-radius: 13px 13px 0 0; }
.tg-ice__bulb { bottom: -46px; left: 55px; z-index: 1; width: 36px; height: 36px; background: var(--level); border: 3px solid var(--line-strong); border-radius: 50%; }
.tg-ice__bulb::before { position: absolute; bottom: 100%; left: 50%; width: 10px; height: 16px; background: var(--level); translate: -50% 0; content: ""; }
/* The mercury fills the track and stands scaled to its level from the bottom, so its top is on the value. */
.tg-ice__mercury { top: 0; bottom: 0; left: 68px; width: 10px; background: var(--level); transform: scaleY(var(--fill)); transform-origin: 50% 100%; transition-duration: 700ms; transition-timing-function: cubic-bezier(.3, .7, .3, 1); }
.tg-ice__bulb,
.tg-ice__bulb::before { transition-duration: 700ms; }
.tg-ice__scale[data-orientation="vertical"] .tg-ice__mark { left: 92px; bottom: var(--at); translate: 0 50%; }
.tg-ice__scale[data-orientation="vertical"] .tg-ice__hop { left: 101px; width: 22px; border-left: 0; border-radius: 0 999px 999px 0; }
.tg-ice__scale[data-orientation="vertical"] .tg-ice__hop b { top: 50%; left: calc(100% + 4px); translate: 0 -50%; }
.tg-ice__scale[data-orientation="vertical"] .tg-ice__change { left: 122px; width: 4px; }
.tg-ice__change[data-direction="up"]::after { bottom: 100%; left: -6px; border-bottom: 12px solid var(--arrow); border-top-width: 0; }
.tg-ice__change[data-direction="down"]::after { top: 100%; left: -6px; border-top: 12px solid var(--arrow); border-bottom-width: 0; }
.tg-ice__scale[data-orientation="vertical"] .tg-ice__change b { top: 50%; left: 10px; translate: 0 -50%; }

/* The fine number line: the axis across, labels under it, the marks on it, the arrow and the hops above. */
.tg-ice__work[data-orientation="horizontal"] { flex-direction: column; }
.tg-ice__scale[data-orientation="horizontal"] { width: min(100%, 860px); padding: 0 26px; }
.tg-ice__scale[data-orientation="horizontal"] .tg-ice__track { --axis: 74px; height: 112px; }
.tg-ice__scale[data-orientation="horizontal"] .tg-ice__track::before { position: absolute; top: calc(var(--axis) - 1.5px); right: -18px; left: -18px; height: 3px; background: var(--ink); content: ""; }
.tg-ice__scale[data-orientation="horizontal"] .tg-ice__tick { top: calc(var(--axis) - 6px); left: var(--at); width: 2px; height: 12px; translate: -50% 0; }
.tg-ice__scale[data-orientation="horizontal"] .tg-ice__tick.is-major { top: calc(var(--axis) - 10px); width: 3px; height: 20px; }
.tg-ice__scale[data-orientation="horizontal"] .tg-ice__label { top: calc(var(--axis) + 12px); left: var(--at); translate: -50% 0; }
.tg-ice__scale[data-orientation="horizontal"] .tg-ice__mark { top: var(--axis); left: var(--at); translate: -50% -50%; }
.tg-ice__scale[data-orientation="horizontal"] .tg-ice__hop { top: calc(var(--axis) - 28px); height: 28px; border-bottom: 0; border-radius: 999px 999px 0 0; }
.tg-ice__scale[data-orientation="horizontal"] .tg-ice__hop b { bottom: 100%; left: 50%; translate: -50% 0; }
.tg-ice__scale[data-orientation="horizontal"] .tg-ice__change { top: 34px; height: 4px; }
.tg-ice__change[data-direction="right"]::after { top: -6px; left: 100%; border-left: 12px solid var(--arrow); border-right-width: 0; }
.tg-ice__change[data-direction="left"]::after { top: -6px; right: 100%; border-right: 12px solid var(--arrow); border-left-width: 0; }
.tg-ice__scale[data-orientation="horizontal"] .tg-ice__change b { bottom: 8px; left: 50%; translate: -50% 0; }

/* Keypad 2 on the ice: six columns beside the thermometer (a calculator's three on a phone), seven under the line (five on a phone). */
.tg-ice__work[data-orientation="horizontal"] .tg-pad { --pad-columns: 7; }
/* On a wide screen the entry and its actions stand beside the keys under the line, so the board stays one
   screen tall at 1366×768. A typed item's keypad (the fraction one of Ondalık Tarayıcı) stands the same way in
   seven key columns, so it fits under a duel's scoreboard. */
@media (min-width: 701px) {
  .tg-ice__work[data-orientation="horizontal"] .tg-pad,
  .tg-typed .tg-pad { grid-template-columns: auto auto; align-items: center; column-gap: 24px; }
  .tg-ice__work[data-orientation="horizontal"] .tg-pad__answer,
  .tg-typed .tg-pad__answer { grid-area: 1 / 1; }
  .tg-ice__work[data-orientation="horizontal"] .tg-pad__actions,
  .tg-typed .tg-pad__actions { grid-area: 2 / 1; }
  .tg-ice__work[data-orientation="horizontal"] .tg-pad__keys,
  .tg-typed .tg-pad__keys { grid-area: 1 / 2 / span 2; }
  .tg-typed .tg-pad { --pad-columns: 7; }
}
.tg-ice__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(16px, 1.5vw, 20px); font-weight: 800; text-align: center; }

/* ---------- The step 7 classifiers' tools (topic-special.js) ---------- */
/* Ondalık Tarayıcı: the long division after the comma; the period's steps carry the bar of the one-line notation. */
.tg-division { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 3px; margin-top: 6px; font-size: .82em; font-weight: 800; }
.tg-division__head { align-self: center; margin-right: 2px; }
.tg-division__step { display: inline-grid; justify-items: center; min-width: 2.2em; padding: 1px 3px 2px; border-top: 3px solid transparent; line-height: 1.1; }
.tg-division__step b { font-size: 1.15em; }
.tg-division__step small { color: var(--ink-2); font-size: .72em; font-weight: 700; white-space: nowrap; }
.tg-division__step[data-period] { border-top-color: currentColor; }
/* Orantı Dedektifi: a card's rows as a table or a graph. */
.tg-ratio { display: block; margin-top: 4px; }
.tg-ratio--table { display: inline-grid; grid-template-columns: repeat(2, minmax(2.6em, auto)); overflow: hidden; color: var(--ink); background: var(--surface); border: 2px solid var(--world-band-edge); border-radius: 8px; font-size: .84em; font-variant-numeric: tabular-nums; }
.tg-ratio__row { display: contents; }
.tg-ratio__row > span { padding: 1px 8px; text-align: center; border-top: 1px solid var(--line); }
.tg-ratio__row > span + span { border-left: 1px solid var(--line); }
.tg-ratio__row--head > span { color: var(--world-ink); background: var(--world-band); border-top: 0; font-size: .86em; font-weight: 900; }
.tg-ratio--graph { width: 150px; height: auto; overflow: visible; color: var(--ink); }
.tg-ratio__axis { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tg-ratio__guide { fill: none; stroke: var(--world-accent); stroke-width: 1; stroke-dasharray: 3 3; }
.tg-ratio__leader { fill: none; stroke: currentColor; stroke-width: .8; stroke-linecap: round; }
.tg-ratio__dot { fill: var(--world-accent); stroke: var(--surface); stroke-width: 1.5; }
.tg-ratio__tick,
.tg-ratio__name { fill: currentColor; font-size: 9px; font-weight: 700; }
.tg-ratio-turn { display: flex; justify-content: center; margin: 0 auto clamp(10px, 1.4vw, 16px); }
.tg-ratio-turn .tg-ratio--graph { width: min(230px, 60vw); }
.tg-ratio-turn .tg-ratio--table { font-size: clamp(16px, 1.6vw, 20px); }
/* Sayı Pasaportu: a right card's stamp names its set. */
.tg-stamp { display: inline-block; margin-left: 8px; padding: 0 7px; color: var(--green-ink); border: 2px solid var(--green-base); border-radius: 6px; font-size: .74em; font-weight: 900; letter-spacing: .04em; transform: rotate(-6deg); }

/* The classifier belt halts while the game is paused and while the next round comes in. */
#gameShell:has(> #pauseCurtain:not([hidden])) .sg-game--belt [data-tg-riding],
#gameStage[data-round-transition] .sg-game--belt [data-tg-riding] { animation-play-state: paused; }

/* ---------- Tam Sayı Asansörü (climb, step 16): the shaft on the left, the trip or the move on the right at every
   width. The shaft is a window on its 25 floors, as tall as the screen leaves room for: the floors are a grid of
   equal rows (the label, then the well) on a track that slides by translateY to keep the cabin in view, centred
   where the shaft allows and held at its roof and its pit. The cabin is one floor tall, stands on the top floor of
   the track and rides by translateY in whole cabin heights, so its box never moves. topic-elevator.js sets --at
   (the floor to centre) and --cab (the cabin's floor), both counted in floors from the top; the offset follows a
   resize by itself. Floors above ground are tinted in the positive sign colour, floors below in the negative one.
   A fade at each edge of the window, as tall as the empty roof and pit at the track's ends, says the shaft goes
   on; the cabin is held clear of it. ---------- */
.tg-elevator {
  --floor: clamp(18px, 2.6vh, 22px);
  --floor-label: 40px;
  --floor-well: clamp(52px, 5vw, 72px);
  --cap: calc(var(--floor) * .8);
  --shaft-full: calc(25 * var(--floor) + 2 * var(--cap));
  --shaft-h: clamp(calc(7 * var(--floor) + 2 * var(--cap)), 100dvh - 560px, var(--shaft-full));
}
.tg-elevator__work { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 48px); width: 100%; }
.tg-shaft { position: relative; flex: none; box-sizing: content-box; height: var(--shaft-h); overflow: hidden; background: var(--world-band); border: 3px solid var(--world-band-edge); border-radius: 14px; }
.tg-shaft::before,
.tg-shaft::after { position: absolute; z-index: 1; inset-inline: 0; height: var(--cap); pointer-events: none; content: ""; }
.tg-shaft::before { top: 0; background: linear-gradient(var(--world-band), transparent); }
.tg-shaft::after { bottom: 0; background: linear-gradient(transparent, var(--world-band)); }
.tg-shaft__track {
  --ideal: calc(var(--shaft-h) / 2 - var(--cap) - (var(--at) + .5) * var(--floor));
  --keep: clamp(calc(var(--cab) * var(--floor) * -1), var(--ideal), calc(var(--shaft-h) - 2 * var(--cap) - (var(--cab) + 1) * var(--floor)));
  position: relative;
  padding: var(--cap) 8px var(--cap) 4px;
  transform: translateY(clamp(calc(var(--shaft-h) - var(--shaft-full)), var(--keep), 0px));
}
.tg-shaft__floors { display: grid; grid-auto-rows: var(--floor); margin: 0; padding: 0; list-style: none; }
.tg-shaft__floor { display: grid; grid-template-columns: var(--floor-label) var(--floor-well); column-gap: 6px; align-items: center; justify-items: end; color: var(--ink-2); font-size: calc(var(--floor) * .78); font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; }
.tg-shaft__floor::after { align-self: stretch; justify-self: stretch; background: var(--surface); border-inline: 2px solid var(--world-model-edge); border-top: 1px solid var(--line); content: ""; }
.tg-shaft__floor[data-sign="pos"] { color: var(--sign-pos-ink); }
.tg-shaft__floor[data-sign="pos"]::after { background: var(--sign-pos-tint); }
.tg-shaft__floor[data-sign="neg"] { color: var(--sign-neg-ink); }
.tg-shaft__floor[data-sign="neg"]::after { background: var(--sign-neg-tint); }
.tg-shaft__floor[data-sign="zero"] { color: var(--ink); font-weight: 900; }
.tg-shaft__floor[data-sign="zero"]::after { border-top: 3px solid var(--world-ink); }
.tg-shaft__floor:first-child::after { border-top: 2px solid var(--world-model-edge); border-radius: 6px 6px 0 0; }
.tg-shaft__floor:last-child::after { border-bottom: 2px solid var(--world-model-edge); border-radius: 0 0 6px 6px; }
.tg-shaft__floor[data-start] { color: var(--ink); font-weight: 900; text-decoration: underline 2px; text-underline-offset: 2px; }
.tg-shaft__floor[data-target] { color: var(--ink); font-weight: 900; }
.tg-shaft__floor[data-target]::after { background: var(--gold-fill); }
.tg-shaft__cabin { position: absolute; top: var(--cap); left: calc(4px + var(--floor-label) + 6px); width: var(--floor-well); height: var(--floor); padding: 1px 5px; pointer-events: none; }
.tg-shaft__car { display: block; height: 100%; background: linear-gradient(to right, var(--world-accent) calc(50% - 1px), var(--world-ink) 0 calc(50% + 1px), var(--world-accent) 0); border: 2px solid var(--world-ink); border-radius: 4px; }
.tg-elevator__panel { display: grid; justify-items: center; gap: 12px; min-width: 0; max-width: 520px; }
.tg-elevator__expression { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; line-height: 1.2; }
.tg-elevator__term { padding: 2px 10px; color: var(--ink-3); border: 2px dashed var(--line-strong); border-radius: 10px; white-space: nowrap; }
.tg-elevator__term[data-filled="true"] { color: var(--world-ink); background: var(--world-band); border: 2px solid var(--world-band-edge); }
.tg-elevator__predictions { display: grid; grid-template-columns: repeat(4, minmax(64px, auto)); gap: 8px; }
.tg-elevator__prediction { font-size: 24px; }
.tg-elevator__prediction[aria-pressed="true"],
.tg-elevator__op[aria-pressed="true"] { color: var(--on-inverse); background: var(--inverse); border-color: var(--inverse); }
/* The locked prediction stays readable through the ride; the right one is marked once the round is over. */
.tg-elevator__prediction[aria-pressed="true"]:disabled { opacity: 1; }
.tg-elevator__prediction[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }
/* The next move, Başa dön (Alıştırma only) and Kontrol et share one row. */
.tg-elevator__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tg-elevator__step { min-width: 190px; min-height: var(--touch); font-size: 20px; font-weight: 900; }
.tg-elevator__reset { font-size: 18px; }
.tg-elevator__submit { min-height: var(--touch); }
/* The stage scrolls by whole pixels while the board sits on fractional ones; a scroll margin keeps the control
   that ends the round clear of the stage's edge when it is scrolled into view. */
.tg-elevator__submit,
.tg-elevator [data-tg-action=check] { scroll-margin-block: 12px; }
.tg-elevator__status { min-height: 1.4em; margin: 0; color: var(--ink-2); font-size: clamp(15px, 1.4vw, 18px); font-weight: 750; text-align: center; }
.tg-elevator__move { display: grid; justify-items: center; gap: 10px; }
.tg-elevator__ops { display: flex; gap: 10px; }
.tg-elevator__op { min-width: 72px; font-size: 30px; }
/* The typed number of the move reads in brackets, "+ (−5)", as the trip's terms do. */
.tg-elevator .tg-pad__answer::before,
.tg-elevator .tg-pad__answer::after { color: var(--ink-2); font-family: var(--font-display); font-size: clamp(30px, 3vw, 40px); font-weight: 900; }
.tg-elevator .tg-pad__answer::before { content: "("; }
.tg-elevator .tg-pad__answer::after { content: ")"; }
.tg-elevator__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; }

/* ---------- Haber Merkezi (newsroom, step 16): the "SON DAKİKA" ticker over the desk. Bar and line charts
   share one plot box: the gridlines, the bars' slots and the line's point area all sit between the headroom
   (for the printed values) and the label row, so a value of v stands v/max of the plot high. ---------- */
/* One column no wider than the board, so a wide chart shrinks beside the keypad instead of pushing it out. */
.tg-news { grid-template-columns: minmax(0, 1fr); }
.tg-news__ticker { display: flex; align-items: center; gap: 12px; width: min(1080px, 100%); margin: 0; padding: 6px 14px 6px 6px; background: var(--inverse); border-radius: 12px; }
.tg-news__tag { flex: none; padding: 3px 10px; color: var(--gold); background: var(--inverse); border: 2px solid var(--gold); border-radius: 8px; font-family: var(--font-display); font-size: clamp(14px, 1.3vw, 17px); font-weight: 900; letter-spacing: .06em; }
.tg-news__headline { min-width: 0; color: var(--on-inverse); font-size: clamp(16px, 1.6vw, 21px); font-weight: 800; line-height: 1.25; }
.tg-news__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 36px); width: 100%; }
.tg-news__desk { display: flex; flex: 0 1 auto; justify-content: center; min-width: 0; max-width: 100%; }
.tg-news__answer { display: grid; flex: none; justify-items: center; gap: 10px; }
.tg-chart { margin: 0; color: var(--ink); }
.tg-chart--bar,
.tg-chart--line { --plot-h: clamp(160px, 30vh, 250px); --headroom: 28px; --label-h: 32px; --axis-w: 40px; display: grid; gap: 2px; width: calc(var(--n) * clamp(58px, 8vw, 112px) + var(--axis-w) + 12px); max-width: 100%; }
.tg-chart__unit { justify-self: start; color: var(--ink-2); font-size: clamp(13px, 1.2vw, 16px); font-weight: 850; }
.tg-chart__plot { position: relative; height: calc(var(--plot-h) + var(--headroom) + var(--label-h)); margin-left: var(--axis-w); }
.tg-chart__grid,
.tg-chart__slot,
.tg-chart__area { position: absolute; top: var(--headroom); right: 0; bottom: var(--label-h); left: 0; }
.tg-chart__grid { border-left: 2px solid var(--line-strong); }
.tg-chart__tick { position: absolute; right: 0; left: 0; height: 0; border-top: 1px solid var(--line); }
.tg-chart__tick:first-child { border-top: 2px solid var(--line-strong); }
.tg-chart__tick b { position: absolute; top: -.65em; right: calc(100% + 6px); color: var(--ink-2); font-size: clamp(12px, 1.1vw, 15px); font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tg-chart__marks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(4px, .8vw, 12px); padding-inline: clamp(4px, .8vw, 12px); }
.tg-chart__bar { position: relative; display: block; min-width: 0; height: 100%; padding: 0; color: var(--ink); background: none; border: 0; border-radius: 10px; }
.tg-chart__fill { position: absolute; right: 8%; bottom: 0; left: 8%; height: var(--h); border-radius: 6px 6px 0 0; transform-origin: 50% 100%; }
.tg-chart__amount { position: absolute; font-family: var(--font-display); font-size: clamp(14px, 1.4vw, 19px); font-weight: 900; line-height: 1.2; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tg-chart__bar .tg-chart__amount { right: -6px; bottom: var(--h); left: -6px; padding-bottom: 2px; }
.tg-chart__label,
.tg-chart__labels span { display: flex; justify-content: center; padding-top: 6px; color: var(--ink-2); font-size: clamp(13px, 1.3vw, 17px); font-weight: 800; line-height: 1.2; white-space: nowrap; }
.tg-chart__label { position: absolute; right: 0; bottom: 0; left: 0; height: var(--label-h); }
.tg-chart__labels { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); height: var(--label-h); }
.tg-chart__bar--1 .tg-chart__fill,
.tg-chart__swatch--1 { background-color: var(--chart-1); }
.tg-chart__bar--2 .tg-chart__fill,
.tg-chart__swatch--2 { background-color: var(--chart-2); }
.tg-chart__bar--3 .tg-chart__fill,
.tg-chart__swatch--3 { background-color: var(--chart-3); }
.tg-chart__bar--4 .tg-chart__fill,
.tg-chart__swatch--4 { background-color: var(--chart-4); }
.tg-chart__bar--5 .tg-chart__fill,
.tg-chart__swatch--5 { background-color: var(--chart-5); }
.tg-chart__bar--6 .tg-chart__fill,
.tg-chart__swatch--6 { background-color: var(--chart-6); }
.tg-chart__slice--1 { fill: var(--chart-1); }
.tg-chart__slice--2 { fill: var(--chart-2); }
.tg-chart__slice--3 { fill: var(--chart-3); }
.tg-chart__slice--4 { fill: var(--chart-4); }
.tg-chart__slice--5 { fill: var(--chart-5); }
.tg-chart__slice--6 { fill: var(--chart-6); }
/* The line: an SVG polyline stretched over the point area, the points (36 px targets) centred on their values
   by a negative margin, so a finale's scale stays on the dot. */
.tg-chart__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tg-chart__line polyline { fill: none; stroke: var(--chart-1); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tg-chart__point { position: absolute; display: grid; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; place-items: center; color: var(--ink); background: none; border: 0; border-radius: 50%; }
.tg-chart__dot { width: 18px; height: 18px; background-color: var(--chart-1); border: 3px solid var(--surface); border-radius: 50%; }
.tg-chart__point .tg-chart__amount { right: -20px; bottom: calc(100% - 6px); left: -20px; }
.tg-chart__point[data-asked] .tg-chart__dot { width: 24px; height: 24px; background-color: var(--world-accent); }
.tg-chart__point[data-asked] .tg-chart__amount { color: var(--world-ink); }
/* Tapping a mark answers the max task; once the round is over the chart keeps full strength. */
button.tg-chart__bar,
button.tg-chart__point { cursor: pointer; }
button.tg-chart__bar:hover:not(:disabled) { background-color: var(--surface-2); }
button.tg-chart__point:hover:not(:disabled) .tg-chart__dot { border-color: var(--ink); }
.tg-chart__bar:focus-visible,
.tg-chart__point:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.tg-chart__bar:disabled,
.tg-chart__point:disabled { cursor: default; opacity: 1; }
.tg-chart [data-missed] [data-tg-fill] { opacity: .3; }
.tg-chart [data-missed] .tg-chart__label { text-decoration: line-through 2px; }
.tg-chart [data-answer] [data-tg-fill] { outline: 4px solid var(--green-base); outline-offset: 3px; }
.tg-chart [data-answer] .tg-chart__amount { color: var(--green-ink); }
/* The pie: slices from 12 o'clock clockwise, the asked one pulled out and outlined, a legend with the total. */
.tg-chart--pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); }
.tg-chart__pie { width: clamp(180px, 28vh, 260px); height: auto; aspect-ratio: 1; overflow: visible; }
.tg-chart__slice { stroke: var(--surface); stroke-width: .025; stroke-linejoin: round; }
.tg-chart__slice[data-asked] { stroke: var(--ink); stroke-width: .04; }
.tg-chart__legend { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: clamp(15px, 1.4vw, 19px); }
.tg-chart__key,
.tg-chart__total { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 2px 8px; border-radius: 8px; }
.tg-chart__swatch { width: 18px; height: 18px; border-radius: 4px; }
.tg-chart__key span { font-weight: 750; }
.tg-chart__key b,
.tg-chart__total b { font-family: var(--font-display); font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.tg-chart__key.is-asked { background: var(--gold-tint); outline: 2px solid var(--gold-line); }
.tg-chart__total { margin-top: 2px; padding-top: 6px; color: var(--ink-2); border-top: 2px solid var(--line-strong); border-radius: 0; font-weight: 800; }
.tg-chart__total span { grid-column: 1 / 3; }
/* The data table (chartType, build); build's rows end in a slider in the colour of the row's bar. */
.tg-news__table { border-collapse: separate; border-spacing: 0; overflow: hidden; color: var(--ink); background: var(--surface); border: 3px solid var(--world-model-edge); border-radius: 14px; font-size: clamp(17px, 1.6vw, 21px); font-variant-numeric: tabular-nums; }
.tg-news__table caption { padding-bottom: 4px; color: var(--ink-2); font-size: .8em; font-weight: 850; }
.tg-news__table th,
.tg-news__table td { padding: 5px clamp(10px, 1.4vw, 18px); text-align: left; border-top: 2px solid var(--line); }
.tg-news__table thead th { color: var(--world-ink); background: var(--world-band); border-top: 0; font-size: .8em; font-weight: 900; }
.tg-news__table tbody th { font-weight: 800; }
.tg-news__table tbody td { font-family: var(--font-display); font-weight: 900; }
.tg-news__table td.tg-news__slide { padding-block: 0; }
.tg-news__table tbody tr:nth-child(6n + 1) { --thumb: var(--chart-1); }
.tg-news__table tbody tr:nth-child(6n + 2) { --thumb: var(--chart-2); }
.tg-news__table tbody tr:nth-child(6n + 3) { --thumb: var(--chart-3); }
.tg-news__table tbody tr:nth-child(6n + 4) { --thumb: var(--chart-4); }
.tg-news__table tbody tr:nth-child(6n + 5) { --thumb: var(--chart-5); }
.tg-news__table tbody tr:nth-child(6n + 6) { --thumb: var(--chart-6); }
.tg-news__slide input { display: block; width: clamp(130px, 16vw, 220px); height: 44px; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.tg-news__slide input:disabled { cursor: default; opacity: 1; }
.tg-news__slide input:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; border-radius: 10px; }
.tg-news__slide input::-webkit-slider-runnable-track { height: 8px; background: var(--line-strong); border-radius: 4px; }
.tg-news__slide input::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -11px; background: var(--thumb); border: 3px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 2px var(--ink-2); -webkit-appearance: none; appearance: none; }
.tg-news__slide input::-moz-range-track { height: 8px; background: var(--line-strong); border-radius: 4px; }
.tg-news__slide input::-moz-range-thumb { width: 24px; height: 24px; background: var(--thumb); border: 3px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 2px var(--ink-2); }
.tg-news[data-task="build"] .tg-news__work { flex-direction: column; }
.tg-news__build { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 32px); }
.tg-chart--build { --plot-h: clamp(140px, 24vh, 210px); width: calc(var(--n) * clamp(52px, 6vw, 84px) + var(--axis-w) + 12px); }
.tg-chart__bar[data-corrected] .tg-chart__fill { outline: 3px dashed var(--red-base); outline-offset: 2px; }
.tg-chart__bar[data-corrected] .tg-chart__amount { color: var(--red-ink); }
.tg-news__check { min-height: var(--touch); }
/* The chart choices, each with a small picture of its chart. */
.tg-news__choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tg-news__choice { grid-auto-flow: column; gap: 10px; min-width: 150px; font-size: clamp(18px, 1.6vw, 22px); }
.tg-news__icon { width: 30px; height: 30px; fill: var(--brand); }
.tg-news__icon-line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tg-news__icon-cut { fill: var(--coral-base); }
.tg-news__choice[data-answer] { color: var(--green-ink); border-color: var(--green-base); opacity: 1; }
.tg-news__choice[data-missed] { border-color: var(--red-base); border-style: dashed; }
.tg-news__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; }
/* On a wide screen the keypad or the chart choices stand beside the desk, so the round stays one screen tall. */
@media (min-width: 701px) {
  .tg-news:not([data-task="build"]) .tg-news__work { flex-wrap: nowrap; }
  .tg-news__choices { flex-direction: column; }
}
/* A short landscape board (1366 × 768 in a duel, under the scoreboard): the kicker goes, the prompt keeps 32 px and the
   ticker slims down, the chart takes the height that is left, and the keypad puts its entry beside Temizle and
   Kontrol et over two rows of keys, so the whole chart and the check key stand above the instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card[data-world="newsroom"] .question-kicker { display: none; }
  .question-card[data-world="newsroom"] .turn-banner,
  .question-card[data-world="newsroom"] .question-experience { margin-bottom: 6px; }
  .question-card[data-world="newsroom"] .question-copy { margin-bottom: 8px; }
  .question-card[data-world="newsroom"] .question-copy h2 { font-size: clamp(22px, 2.35vw, 32px); }
  .tg-news { gap: 8px; }
  .tg-news__ticker { padding-block: 3px; }
  .tg-news__tag { padding-block: 1px; font-size: 14px; }
  .tg-news__headline { font-size: 17px; }
  /* The bar builder sets its chart over "Grafiği kontrol et" beside a tighter table. */
  .tg-news[data-task="build"] .tg-news__work { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 28px; row-gap: 8px; }
  .tg-news[data-task="build"] .tg-news__desk,
  .tg-news__build { display: contents; }
  .tg-chart--build { --plot-h: clamp(72px, 100vh - 690px, 140px); --headroom: 24px; --label-h: 28px; grid-area: 1 / 1; }
  .tg-news[data-task="build"] .tg-news__answer { grid-area: 2 / 1; }
  .tg-news__build .tg-news__table { grid-area: 1 / 2 / span 2; font-size: 17px; }
  /* The column head "Sütun" already names the sliders, so the caption stays only for screen readers. */
  .tg-news__build .tg-news__table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .tg-news__table th,
  .tg-news__table td { padding-block: 2px; }
  .tg-chart--bar:not(.tg-chart--build),
  .tg-chart--line { --plot-h: clamp(100px, 100vh - 660px, 160px); --headroom: 24px; --label-h: 28px; }
  .tg-chart__pie { width: clamp(150px, 100vh - 600px, 220px); }
  .tg-news .tg-pad { grid-template-columns: auto auto; align-items: center; column-gap: 12px; row-gap: 8px; }
  .tg-news .tg-pad__answer { grid-area: 1 / 1; }
  .tg-news .tg-pad__actions { grid-area: 1 / 2; }
  .tg-news .tg-pad__keys { --pad-columns: 7; grid-area: 2 / 1 / auto / span 2; gap: 6px; }
  .tg-news .tg-pad .tg-key,
  .tg-news .tg-pad .button { min-height: calc(var(--touch) - 6px); }
  .tg-news .tg-pad__entry { font-size: 28px; }
}
/* The elevator on a short landscape board: the kicker goes and the prompt keeps 32 px, as the newsroom's does, and
   the inverse move sets its sign, its entry and Temizle with Kontrol et in one row over two rows of keys, so the
   predictions, the inverse keypad and Kontrol et stand above the instruction bar in a duel. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.tg-elevator) .question-kicker { display: none; }
  .question-card--topic:has(.tg-elevator) .turn-banner,
  .question-card--topic:has(.tg-elevator) .question-experience { margin-bottom: 6px; }
  .question-card--topic:has(.tg-elevator) .question-copy { margin-bottom: 8px; }
  .question-card--topic:has(.tg-elevator) .question-copy h2 { font-size: clamp(22px, 2.35vw, 32px); }
  .tg-elevator[data-task="inverse"] .tg-elevator__panel { max-width: none; }
  .tg-elevator__move { grid-template-columns: repeat(3, auto); align-items: center; column-gap: 16px; row-gap: 8px; }
  .tg-elevator .tg-pad { display: contents; }
  .tg-elevator__ops { grid-area: 1 / 1; }
  .tg-elevator .tg-pad__answer { grid-area: 1 / 2; }
  .tg-elevator .tg-pad__actions { grid-area: 1 / 3; }
  .tg-elevator .tg-pad__keys { --pad-columns: 7; grid-area: 2 / 1 / auto / span 3; gap: 6px; }
  .tg-elevator .tg-pad .tg-key,
  .tg-elevator .tg-pad .button { min-height: calc(var(--touch) - 6px); }
}

/* ---------- The factor kit (topic-factors.js, step 8): Asal Maden and Kripto Çarpanlar (mine), Kesişim
   İstasyonu (rail), Kök Ormanı's root tree and operations (forest) ---------- */
.tg-fk { --node: 54px; --node-h: 46px; --node-gap: 10px; width: 100%; }
.tg-fk__chisels { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tg-fk__chisel { min-width: 66px; color: var(--world-ink); }
/* The spark keeps its line while empty, so a hint never pushes the pieces under it. */
.tg-fk__spark,
.tg-tw__spark { min-height: 1.6em; margin: 0; padding: 2px 14px; border-radius: 12px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; text-align: center; }
.tg-fk__spark { color: var(--world-ink); background: var(--world-band); }
/* The tower boards' spark only ever explains a miss, so it reads as one: ink on the red tint, a red edge. */
.tg-tw__spark { color: var(--ink); background: var(--red-tint); border: 2px solid var(--red-base); border-left-width: 8px; }
.tg-fk__spark:empty,
.tg-tw__spark:empty { visibility: hidden; }
.tg-fk__reason,
.tg-tw__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; }

/* A tree is a chain of rows: the number, then each split's gem and what is left. Every row stands half a
   piece to the right of the one above, so a part sits over the two pieces it split into, with a bracket
   between them. */
.tg-fk__trees { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(18px, 3vw, 44px); }
.tg-fk__tree { --half: calc((var(--node) + var(--node-gap)) / 2); display: grid; justify-items: start; row-gap: 14px; }
.tg-fk__row { position: relative; display: flex; gap: var(--node-gap); margin-left: calc(var(--depth) * var(--half)); }
.tg-fk__row--split::before { position: absolute; top: -12px; left: calc(var(--node) / 2); width: calc(var(--node) + var(--node-gap)); height: 10px; content: ""; border: 2px solid var(--world-model-edge); border-bottom: 0; border-radius: 8px 8px 0 0; }
.tg-fk__rock,
.tg-fk__gem,
.tg-fk__part { display: inline-grid; width: var(--node); height: var(--node-h); place-items: center; padding: 0; font-family: var(--font-display); font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tg-fk__rock { color: var(--ink); background: var(--world-model); border: 3px solid var(--world-model-edge); border-radius: 16px 12px 18px 10px; cursor: pointer; transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.tg-fk__rock[aria-pressed="true"] { color: var(--surface); background: var(--world-model-edge); transform: translateY(-2px); }
.tg-fk__rock:disabled { cursor: default; }
.tg-fk__gem { color: var(--sky-ink); background: var(--sky-tint); border: 3px solid var(--sky-base); border-radius: 999px; }
.tg-fk__part { color: var(--ink-2); border: 2px dashed var(--line-strong); border-radius: 12px; }

/* The Venn: the waiting tiles in the tray, then the two sets as overlapping rings. Ring A covers the a and both
   regions, ring B the both and b regions, and the lens (ring B's shape clipped by ring A) fills the intersection.
   The three region buttons are clear and sit over the rings in the columns 3 : 4 : 3; their padding keeps the
   name and the placed tiles inside their part of the picture, and both outlines stay on top. */
.tg-fk__venn { display: grid; gap: 10px; width: min(100%, 940px); }
.tg-fk__tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 44px; }
.tg-fk__tray:empty:not([data-empty]) { display: none; }
.tg-fk__tray[data-empty]::before { align-self: center; color: var(--ink-3); content: attr(data-empty); font-size: 17px; font-weight: 800; }
.tg-fk__tile { display: inline-grid; min-width: 44px; min-height: 44px; place-items: center; padding: 0 6px; color: var(--ink); background: var(--surface); border: 3px solid var(--line-strong); border-radius: 12px; font-family: var(--font-display); font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; cursor: pointer; transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.tg-fk__tile[aria-pressed="true"] { background: var(--world-band); border-color: var(--world-accent); transform: translateY(-3px); }
/* A placed tile is a smaller chip inside its region. */
.tg-fk__held .tg-fk__tile { min-width: 38px; min-height: 34px; padding: 0 5px; font-size: 18px; border-width: 2px; cursor: default; }
.tg-fk__sets { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr); width: 100%; isolation: isolate; }
.tg-fk__ring { position: relative; grid-row: 1; border-radius: 50%; pointer-events: none; }
.tg-fk__ring::after { position: absolute; inset: 0; z-index: 3; content: ""; border: 3px solid; border-radius: inherit; }
.tg-fk__ring--a { grid-column: 1 / 3; overflow: hidden; background: var(--sky-tint); }
.tg-fk__ring--a::after { border-color: var(--sky-base); }
.tg-fk__ring--b { grid-column: 2 / 4; background: var(--coral-tint); }
.tg-fk__ring--b::after { border-color: var(--coral-base); }
.tg-fk__lens { position: absolute; top: 0; bottom: 0; left: calc(300% / 7); width: 100%; background: var(--gold-tint); border-radius: 50%; }
.tg-fk__set { position: relative; z-index: 2; display: grid; grid-row: 1; min-width: 0; min-height: 196px; align-content: center; justify-items: center; gap: 6px; padding: 12px 0; color: var(--ink); background: none; border: 0; border-radius: 50%; cursor: pointer; }
.tg-fk__set:disabled { cursor: default; opacity: 1; }
.tg-fk__set--a { grid-column: 1; padding-inline: 26% 4%; }
.tg-fk__set--both { grid-column: 2; padding-inline: 19%; }
.tg-fk__set--b { grid-column: 3; padding-inline: 4% 26%; }
.tg-fk__set-name { font-family: var(--font-display); font-size: 22px; font-weight: 900; line-height: 1.2; }
.tg-fk__set--a .tg-fk__set-name { color: var(--sky-ink); }
.tg-fk__set--b .tg-fk__set-name { color: var(--coral-ink); }
.tg-fk__held { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tg-fk__held:empty { display: none; }

/* The timetable: the two shuttles with their colour dots, then one button per minute either leaves. Once the
   round is over every time carries the dots of the services that leave then, on its lower edge. */
.tg-fk__lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tg-fk__line { padding: 4px 14px; border: 2px solid; border-radius: 999px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; }
.tg-fk__line b { font-weight: inherit; }
.tg-fk__line .tg-fk__dot { margin-right: 8px; vertical-align: 1px; }
.tg-fk__line--a { color: var(--sky-ink); background: var(--sky-tint); border-color: var(--sky-base); }
.tg-fk__line--b { color: var(--coral-ink); background: var(--coral-tint); border-color: var(--coral-base); }
.tg-fk__dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.tg-fk__line--a .tg-fk__dot,
.tg-fk__dot--a { background: var(--sky-base); }
.tg-fk__line--b .tg-fk__dot,
.tg-fk__dot--b { background: var(--coral-base); }
.tg-fk__times { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; max-width: 860px; }
.tg-fk__time { position: relative; display: inline-grid; min-width: 58px; min-height: 48px; place-items: center; padding: 0 6px; color: var(--ink); background: var(--surface); border: 3px solid var(--line-strong); border-radius: 12px; font-family: var(--font-display); font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; cursor: pointer; transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.tg-fk__time:hover:not(:disabled) { border-color: var(--world-accent); transform: translateY(-1px); }
.tg-fk__time:disabled { cursor: default; opacity: 1; }
.tg-fk__time[data-placed] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); }
.tg-fk__time[data-missed] { color: var(--red-ink); border-color: var(--red-base); border-style: dashed; opacity: .6; }
.tg-fk__departs { position: absolute; bottom: -7px; left: 50%; display: flex; gap: 3px; transform: translateX(-50%); }
.tg-fk__departs .tg-fk__dot { width: 11px; height: 11px; box-shadow: 0 0 0 2px var(--surface); }

/* The choices: four answers in two rows. */
.tg-fk__choices { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 10px; }
.tg-fk__choice { font-size: clamp(20px, 2vw, 26px); }
.tg-fk__choice[data-answer] { color: var(--green-ink); border-color: var(--green-base); opacity: 1; }
.tg-fk__choice[data-missed] { border-color: var(--red-base); border-style: dashed; }

/* Kripto Çarpanlar's lock: the prime Venn beside the keypad. */
.tg-fk__vault { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(14px, 2.4vw, 32px); width: 100%; }
.tg-fk__vault .tg-fk__venn { flex: 1 1 420px; }

/* The keypad of the lock and the root tree puts its entry beside Temizle and Kontrol et over two rows of keys. */
.tg-fk .tg-pad { grid-template-columns: auto auto; align-items: center; column-gap: 12px; row-gap: 8px; }
.tg-fk .tg-pad__answer { grid-area: 1 / 1; }
.tg-fk .tg-pad__actions { grid-area: 1 / 2; }
.tg-fk .tg-pad__keys { grid-area: 2 / 1 / auto / span 2; }
.tg-fk .tg-pad__entry { min-width: 3.2em; }

/* Kök Ormanı: the chisels over the tree under the root sign and the climbed-out pairs, the keypad beside them
   from the top, so Kontrol et stays where it is while the tree grows. */
.tg-fk__grove { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(16px, 3vw, 40px); }
.tg-fk__dig { display: grid; justify-items: center; gap: 10px; }
.tg-fk__root { display: flex; align-items: flex-start; gap: 4px; padding: 8px 14px 4px 0; border-top: 3px solid var(--world-ink); }
.tg-fk__radical { margin-top: -20px; color: var(--world-ink); font-size: 52px; font-weight: 700; line-height: 1; }
.tg-fk__out { margin: 0; color: var(--world-ink); font-size: clamp(18px, 1.7vw, 22px); font-weight: 800; }
.tg-fk__pair { display: inline-grid; min-width: 40px; min-height: 36px; place-items: center; color: var(--ink); background: var(--gold-tint); border: 2px solid var(--gold-base); border-radius: 10px; font-family: var(--font-display); font-weight: 900; }
@media (min-width: 701px) {
  .tg-fk__trees--two { flex-wrap: nowrap; }
}
/* A short landscape board (1366 × 768 in a duel, under the scoreboard): the kicker goes and the prompt keeps 32 px,
   as the newsroom's does, the rings are flatter (so their regions keep more inner padding) and the times use the
   whole width in narrower keys, so the root tree's Kontrol et, the Venn regions and the departures stand above
   the instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.tg-fk) .question-kicker { display: none; }
  .question-card--topic:has(.tg-fk) .turn-banner,
  .question-card--topic:has(.tg-fk) .question-experience { margin-bottom: 6px; }
  .question-card--topic:has(.tg-fk) .question-copy { margin-bottom: 8px; }
  .question-card--topic:has(.tg-fk) .question-copy h2 { font-size: clamp(22px, 2.35vw, 32px); }
  .tg-fk { gap: 10px; }
  .tg-fk__spark { font-size: 18px; }
  .tg-fk__venn { gap: 8px; }
  .tg-fk__set { min-height: 138px; padding-block: 4px; gap: 4px; }
  .tg-fk__held .tg-fk__tile { min-width: 34px; min-height: 30px; font-size: 17px; }
  .tg-fk__set--a { padding-inline: 28% 4%; }
  .tg-fk__set--both { padding-inline: 20%; }
  .tg-fk__set--b { padding-inline: 4% 28%; }
  .tg-fk__times { max-width: none; gap: 10px 6px; }
  .tg-fk__time { min-width: 48px; }
  .tg-fk__time,
  .tg-fk__tile { min-height: 44px; }
}

/* ---------- Kesir Üçlüsü and Paylaşım Pikniği (picnic, step 12): the cards, the claim row right under them,
   then the tray of found sets (a phone puts the claim row and the tray first). A card is a napkin on the cloth;
   pressed it lifts onto the band colour, found it turns green and fades, and once the round is over a card that
   belongs to no set is dashed. ---------- */
.tg-sets { --sets-gap: 10px; width: 100%; }
.tg-sets__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sets-gap); width: min(100%, 1080px); }
.tg-sets__card { position: relative; display: grid; flex: 0 1 calc((100% - 5 * var(--sets-gap)) / 6); min-width: 0; min-height: 84px; place-items: center; padding: 8px 6px; color: var(--ink); background: var(--world-model); border: 3px solid var(--line-strong); border-radius: 16px; font-family: var(--font-display); font-size: clamp(22px, 2.1vw, 30px); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; cursor: pointer; transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity var(--dur-fast) ease; }
.tg-sets__card:hover:not(:disabled) { border-color: var(--world-model-edge); }
.tg-sets__card[aria-pressed="true"] { background: var(--world-band); border-color: var(--world-band-edge); transform: translateY(-4px); }
.tg-sets__card:disabled { cursor: default; }
.tg-sets__card[data-found] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: .5; }
.tg-sets__card[data-odd] { border-style: dashed; opacity: .6; }
.tg-sets__label { white-space: nowrap; }
.tg-sets .tug-period__d { padding-top: .04em; border-top: .075em solid currentColor; }
.tg-sets .buzzer-visual { width: 100%; margin: 0; }
.tg-sets .buzzer-model svg { max-height: 44px; }
.tg-sets .buzzer-model--grid svg { width: auto; height: 64px; max-height: none; }
/* The models' dividers keep a fixed width however far the card scales the drawing down: a strip's parts are
   split light on the shaded ones and dark on the empty ones, and the grid's lines are drawn in ink, so a 2 of 4
   strip shows four parts and the grid its hundred cells in every theme. */
.tg-sets .buzzer-model :is(.buzzer-part, .buzzer-model__lines, .buzzer-model__frame) { vector-effect: non-scaling-stroke; }
.tg-sets .buzzer-model__frame { stroke-width: 2px; }
.tg-sets [data-visual="bar"] .buzzer-part { stroke: var(--ink-2); stroke-width: 2px; }
.tg-sets [data-visual="bar"] .buzzer-part.is-shaded { stroke: var(--surface); }
.tg-sets [data-visual="grid"] .buzzer-model__lines { stroke: var(--ink); stroke-width: 1px; }
/* A sharing card: the pizzas over the children who share them, split by a dashed line. */
.tg-sets__share { display: grid; justify-items: center; gap: 4px; width: 100%; }
.tg-sets__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.tg-sets__row--kids { padding-top: 4px; border-top: 2px dashed var(--world-model-edge); }
.tg-sets__pizza { display: block; width: 22px; height: 22px; background: radial-gradient(circle at 34% 36%, var(--coral-base) 0 14%, transparent 15%), radial-gradient(circle at 66% 60%, var(--coral-base) 0 14%, transparent 15%), var(--gold-fill); border: 3px solid var(--gold-base); border-radius: 50%; }
.tg-sets__kid { position: relative; display: block; width: 16px; height: 22px; }
.tg-sets__kid::before { position: absolute; top: 0; left: 3px; width: 10px; height: 10px; content: ""; background: var(--world-ink); border-radius: 50%; }
.tg-sets__kid::after { position: absolute; bottom: 0; left: 0; width: 16px; height: 11px; content: ""; background: var(--sky-base); border-radius: 8px 8px 2px 2px; }
.tg-sets__kid:nth-child(even)::after { background: var(--green-base); }
/* A wrong claim writes each card's value on its lower edge; a text card shows it under its label, in the card's own space. */
.tg-sets__value { position: absolute; right: 6px; bottom: 4px; left: 6px; padding: 1px 4px; color: var(--ink); background: var(--gold-tint); border: 2px solid var(--gold-base); border-radius: 999px; font-size: 17px; line-height: 1.25; text-align: center; white-space: nowrap; }
.tg-sets__card[data-kind="share"] .tg-sets__value,
.tg-sets__card[data-kind="grid"] .tg-sets__value { bottom: auto; top: 4px; }
.tg-sets__card:has(.tg-sets__label) { align-content: center; gap: 2px; }
.tg-sets__label + .tg-sets__value { position: static; justify-self: stretch; }
/* Bırak and Topla stand in the middle of the row, the meter on their left and the note on their right. */
.tg-sets__controls { display: grid; grid-template-columns: 1fr auto auto 1fr; align-items: center; gap: 8px 14px; width: min(100%, 1080px); }
.tg-sets__meter { display: inline-flex; gap: 6px; justify-self: end; }
.tg-sets__dot { display: block; width: 16px; height: 16px; border: 3px solid var(--world-ink); border-radius: 50%; transition: background-color var(--dur-fast) ease; }
.tg-sets__dot[data-on] { background: var(--world-accent); }
.tg-sets__claim { min-width: 132px; font-size: 22px; }
.tg-sets__clear { font-size: 20px; }
/* The note keeps its line while empty, so a message never moves the tray. */
.tg-sets__note { max-width: 24em; min-height: 1.4em; margin: 0; color: var(--world-ink); font-size: 18px; font-weight: 800; }
.tg-sets__tray { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: min(100%, 1080px); min-height: 52px; padding: 8px 12px; background: var(--surface-2); border: 2px dashed var(--world-model-edge); border-radius: 18px; }
.tg-sets__set { padding: 4px 14px; color: var(--ink); background: var(--world-model); border: 2px solid var(--world-accent); border-radius: 999px; font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); font-weight: 900; font-variant-numeric: tabular-nums; }
.tg-sets__empty { color: var(--ink-3); font-size: 17px; font-weight: 800; }
.tg-sets__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; }
/* A short landscape board (1366 × 768, under a duel's scoreboard): the kicker goes, the band is lower (the tray's
   basket plays the finale in view) and the cards are lower, so the claim row stands above the instruction bar on
   the busiest board. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.tg-sets) .question-kicker { display: none; }
  .question-card--topic:has(.tg-sets) .tg-world-band { height: 40px; margin-bottom: 8px; }
  .question-card--topic:has(.tg-sets) .turn-banner,
  .question-card--topic:has(.tg-sets) .question-experience { margin-bottom: 6px; }
  .question-card--topic:has(.tg-sets) .question-copy { margin-bottom: 8px; }
  .question-card--topic:has(.tg-sets) .question-copy h2 { font-size: clamp(22px, 2.35vw, 32px); }
  .tg-sets { gap: 10px; }
  .tg-sets__card { min-height: 72px; padding-block: 6px; }
  .tg-sets__card[data-kind="share"] { padding-block: 4px; }
}

/* ---------- Basamak Galaksisi (space) and Ondalık Denizaltısı (sea), step 11: the place-value chart beside
   its answer (the choices or keypad 2; a phone stacks them). The chart is a panel of the world's band colour;
   each column is its name over one cell, the natural chart in bölükler, the decimal one with the comma between
   birler and onda birler. Columns stand on their cells, so a two-line decimal name or the submarine over the
   asked column never lifts a cell out of line. ---------- */
.tg-pv { width: 100%; }
.tg-pv__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 36px); width: 100%; }
.tg-pv__figure { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.tg-pv__chart { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px 12px; padding: 10px 14px 12px; background: var(--world-band); border: 3px solid var(--world-band-edge); border-radius: 18px; }
.tg-pv[data-chart="decimal"] .tg-pv__chart { flex-wrap: nowrap; gap: 6px; }
.tg-pv__period { display: grid; justify-items: center; gap: 4px; padding: 4px 6px 6px; border: 3px solid transparent; border-radius: 14px; }
.tg-pv__period[data-tg-asked] { border-color: var(--world-accent); }
.tg-pv__period-name { color: var(--world-ink); font-size: clamp(14px, 1.3vw, 17px); font-weight: 800; white-space: nowrap; }
.tg-pv__row { display: flex; align-items: flex-end; gap: 6px; }
.tg-pv__col { display: grid; justify-items: center; align-content: end; gap: 4px; }
.tg-pv__name { color: var(--world-ink); font-size: clamp(14px, 1.3vw, 17px); font-weight: 900; line-height: 1.1; text-align: center; }
.tg-pv__cell { display: inline-grid; width: clamp(46px, 4vw, 54px); height: clamp(50px, 4.6vw, 60px); place-items: center; padding: 0; color: var(--ink); background: var(--surface); border: 3px solid var(--world-model-edge); border-radius: 12px; font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; transition: transform var(--dur-fast) ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; }
button.tg-pv__cell { cursor: pointer; }
button.tg-pv__cell:hover:not(:disabled) { border-color: var(--world-accent); transform: translateY(-2px); }
/* A missed column keeps its dashed red mark at full strength, and a settled chart is not greyed out. */
button.tg-pv__cell:disabled { cursor: default; opacity: 1; }
/* A place the number does not reach (on a shown or a settled chart) is an empty place, not a box to fill:
   dashed and see-through. A tapped one keeps its size, since the sum may reach it. */
:where(.tg-pv:not([data-task="write"], [data-task="build"]), .tg-pv[data-settled]) .tg-pv__cell[data-digit=""] { background: transparent; border-style: dashed; border-color: var(--world-band-edge); }
/* The settled add chart: the columns whose digit changed stand out, the rest stay as they were, a little dimmed. */
.tg-pv[data-task="add"][data-settled] .tg-pv__cell[data-finale-board]:not([data-answer]) { border-color: var(--world-accent); }
.tg-pv[data-task="add"][data-settled] .tg-pv__cell:not([data-finale-board], [data-answer], [data-missed]) { opacity: .8; }
.tg-pv__cell[data-tg-highlight] { color: var(--on-fill); background: var(--gold-fill); border-color: var(--gold-line); }
.tg-pv__cell[data-missed] { color: var(--red-ink); border-color: var(--red-base); border-style: dashed; }
.tg-pv__cell[data-answer] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); }
.tg-pv__comma { align-self: flex-end; color: var(--world-ink); font-family: var(--font-display); font-size: clamp(40px, 4vw, 54px); font-weight: 900; line-height: .9; }
.tg-pv__sub { display: block; width: 40px; height: 22px; overflow: visible; }
.tg-pv__number { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(28px, 2.8vw, 38px); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tg-pv__reading { max-width: 32em; margin: 0; color: var(--ink-2); font-size: clamp(17px, 1.6vw, 21px); font-weight: 750; text-align: center; }
/* The choices: four in two rows; a decimal place value stands as a fraction, the numerator over the bar. */
.tg-pv__choices { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 10px; }
.tg-pv__choice { min-height: calc(var(--touch) + 8px); font-size: clamp(22px, 2.1vw, 28px); font-variant-numeric: tabular-nums; }
.tg-pv__choice[data-answer] { color: var(--green-ink); border-color: var(--green-base); opacity: 1; }
.tg-pv__frac { display: inline-grid; justify-items: center; font-size: .82em; line-height: 1.05; }
.tg-pv__frac > span:first-child { padding: 0 6px 1px; border-bottom: 3px solid currentColor; }
/* An expand round's prompt stacks its fraction terms the same way, centred on the line. */
.question-copy h2 .tg-pv__frac { margin: 0 2px; font-size: .74em; vertical-align: middle; }
.question-copy h2 .tg-pv__frac > span:first-child { padding: 0 4px 1px; border-bottom-width: 2px; }
/* On a wide screen the answer stands beside the chart, so the board stays one screen tall at 1366×768. */
@media (min-width: 701px) {
  .tg-pv__work { flex-wrap: nowrap; }
}
/* A short landscape board (1366 × 768 in a duel, under the scoreboard): the kicker goes, the prompt keeps 32 px,
   the cells are a little smaller and keypad 2 puts Temizle and Kontrol et beside the entry (wide enough for a
   grouped nine-digit number, so they stay put while it is typed), so Kontrol et stands above the instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has(.tg-pv) .question-kicker { display: none; }
  .question-card--topic:has(.tg-pv) .turn-banner,
  .question-card--topic:has(.tg-pv) .question-experience { margin-bottom: 6px; }
  .question-card--topic:has(.tg-pv) .question-copy { margin-bottom: 8px; }
  .question-card--topic:has(.tg-pv) .question-copy h2 { font-size: clamp(22px, 2.35vw, 32px); }
  .tg-pv__cell { width: 48px; height: 54px; }
  .tg-pv .tg-pad { grid-template-columns: auto auto; align-items: center; column-gap: 12px; row-gap: 8px; }
  .tg-pv .tg-pad__answer { grid-area: 1 / 1; }
  .tg-pv .tg-pad__actions { grid-area: 1 / 2; }
  .tg-pv .tg-pad__keys { grid-area: 2 / 1 / auto / span 2; }
  .tg-pv .tg-pad__actions > * { white-space: nowrap; }
  .tg-pv .tg-pad__entry { min-width: 7.6em; font-size: 28px; }
}

/* ---------- Mahalle Pazarı and Kafe Hesabı (market, step 9): the stall's tags and bar model over the plan chips
   and keypad 2; the café's receipt beside the strip, the percent model or the columns, then keypad 2 ---------- */
.tg-stall,
.tg-cafe { width: 100%; }
.tg-stall__work,
.tg-cafe__work { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 36px); width: 100%; }
.tg-stall__scene { display: grid; flex: 1 1 340px; justify-items: center; gap: 10px; min-width: 0; max-width: 620px; }
.tg-stall__goods { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 0; }
/* The price tag hangs on its string, as on Tarif Karıştırıcı. */
.tg-stall__tag { position: relative; display: inline-grid; justify-items: center; padding: 4px 14px 5px 30px; color: var(--ink); background: var(--gold-tint); border: 3px solid var(--gold-line); border-radius: 6px 16px 16px 6px; line-height: 1.1; }
.tg-stall__tag::before { position: absolute; top: calc(50% - 6px); left: 9px; width: 12px; height: 12px; background: var(--surface); border: 2px solid var(--gold-line); border-radius: 50%; content: ""; }
.tg-stall__tag b { font-family: var(--font-display); font-size: clamp(22px, 2.1vw, 28px); font-weight: 900; white-space: nowrap; }
.tg-stall__tag small { color: var(--ink-2); font-size: 14px; font-weight: 750; }
.tg-stall__count { color: var(--world-ink); font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); font-weight: 900; white-space: nowrap; }
/* The bar model: the whole's bracket over one bar whose parts share it by their amounts; dashed cells count
   the copies of a part. A part's label is a paper tag with the bar's edge, so no cell divider runs through it. */
.tg-stall__bar { display: grid; gap: 2px; width: 100%; }
.tg-stall__whole { display: grid; justify-items: center; color: var(--world-ink); font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px); font-weight: 900; line-height: 1.15; }
.tg-stall__whole::after { display: block; width: 100%; height: 10px; border: 3px solid var(--world-model-edge); border-bottom: 0; border-radius: 8px 8px 0 0; content: ""; }
.tg-stall__segs { display: flex; width: 100%; min-height: 62px; overflow: hidden; background: var(--world-model); border: 3px solid var(--world-model-edge); border-radius: 12px; }
.tg-stall__seg { --seg: var(--world-model); position: relative; display: grid; flex-basis: 0; min-width: 0; place-items: center; padding: 4px; background: var(--seg); }
.tg-stall__seg + .tg-stall__seg { border-left: 3px solid var(--world-model-edge); }
.tg-stall__seg.is-unknown { --seg: var(--surface); }
.tg-stall__cells { position: absolute; inset: 0; display: flex; }
.tg-stall__cells i { flex: 1 1 0; }
.tg-stall__cells i + i { border-left: 2px dashed var(--world-band-edge); }
.tg-stall__seg b { position: relative; padding: 1px 7px; color: var(--ink); background: var(--surface); border: 2px solid var(--world-model-edge); border-radius: 8px; font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 24px); font-weight: 900; line-height: 1.1; text-align: center; }
[data-tg-unknown] { color: var(--world-ink); transition: color var(--dur-fast) ease; }
[data-tg-unknown][data-answer] { color: var(--green-ink); }
.tg-stall__answer { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.tg-stall__plan { display: grid; gap: 8px; width: min(100%, 440px); }
.tg-stall__chip { min-height: var(--touch); padding: 6px 14px; font-size: clamp(17px, 1.6vw, 21px); font-variant-numeric: tabular-nums; line-height: 1.2; white-space: normal; }
.tg-stall__chip[aria-pressed="true"] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); opacity: 1; }
.tg-stall__chip[data-missed] { color: var(--red-ink); border-color: var(--red-base); border-style: dashed; text-decoration: line-through; }
.tg-stall__chip[data-answer] { color: var(--green-ink); border-color: var(--green-base); opacity: 1; }

.tg-cafe__receipt { display: grid; gap: 3px; min-width: 210px; padding: 8px 16px 12px; color: var(--ink); background: var(--paper); border: 2px solid var(--line-strong); border-top: 4px dashed var(--world-model-edge); border-bottom: 4px dashed var(--world-model-edge); border-radius: 4px; font-variant-numeric: tabular-nums; }
.tg-cafe__head { margin: 0 0 2px; color: var(--world-ink); font-family: var(--font-display); font-size: 18px; font-weight: 900; letter-spacing: .14em; text-align: center; }
.tg-cafe__line { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: 0; font-size: clamp(16px, 1.5vw, 20px); font-weight: 750; }
.tg-cafe__line b { font-family: var(--font-display); font-size: 1.15em; font-weight: 900; white-space: nowrap; }
.tg-cafe__line--due { margin-top: 4px; padding-top: 6px; border-top: 2px dashed var(--line-strong); }
[data-tg-due] { color: var(--world-ink); transition: color var(--dur-fast) ease; }
[data-tg-due][data-answer] { color: var(--green-ink); }
.tg-cafe__model { display: grid; justify-items: center; gap: 8px; min-width: 0; }
.tg-cafe__strip { display: flex; width: clamp(280px, 30vw, 420px); max-width: 100%; overflow: hidden; background: var(--surface); border: 3px solid var(--world-model-edge); border-radius: 12px; }
.tg-cafe__part { flex: 1 1 0; min-width: 28px; min-height: calc(var(--touch) + 6px); padding: 0; background: transparent; border: 0; cursor: pointer; transition: background-color var(--dur-fast) ease; }
.tg-cafe__part + .tg-cafe__part { border-left: 2px solid var(--world-model-edge); }
.tg-cafe__part:hover:not(:disabled) { background: var(--world-band); }
.tg-cafe__part[aria-pressed="true"] { background: var(--world-accent); }
.tg-cafe__part:disabled { cursor: default; }
.tg-cafe__note { margin: 0; color: var(--ink-2); font-size: clamp(16px, 1.5vw, 19px); font-weight: 750; }
.tg-cafe__note b { font-family: var(--font-display); font-weight: 900; }
.tg-cafe__percent { display: grid; justify-items: center; gap: 8px; }
.tg-cafe__cells { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; width: clamp(150px, 14vw, 190px); padding: 2px; background: var(--world-model-edge); border-radius: 6px; }
.tg-cafe__cell { aspect-ratio: 1; background: var(--surface); }
.tg-cafe__percent[data-model="strip"] .tg-cafe__cells { width: clamp(250px, 24vw, 320px); }
.tg-cafe__percent[data-model="strip"] .tg-cafe__cell { aspect-ratio: auto; height: 40px; }
.tg-cafe__cell[data-off] { background: var(--world-accent); }
.tg-cafe__keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.tg-cafe__key { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: clamp(15px, 1.4vw, 18px); font-weight: 750; }
.tg-cafe__key::before { width: 16px; height: 16px; background: var(--surface); border: 2px solid var(--world-model-edge); border-radius: 4px; content: ""; }
.tg-cafe__key.is-off::before { background: var(--world-accent); }
.tg-cafe__key b { font-family: var(--font-display); font-weight: 900; }
/* The column addition: every row on the same tracks (sign, whole part, comma, decimals, TL), so the commas
   stand in one column; the sum waits, hidden, under the rule. */
.tg-cafe__columns { display: grid; gap: 2px; padding: 8px 16px; color: var(--ink); background: var(--paper); border: 3px solid var(--world-model-edge); border-radius: 14px; font-family: var(--font-display); font-size: clamp(26px, 2.5vw, 34px); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tg-cafe__row { display: grid; grid-template-columns: 1em calc(var(--whole) * 1ch) .45em calc(var(--rest) * 1ch) auto; align-items: baseline; }
.tg-cafe__sign { color: var(--world-ink); }
.tg-cafe__whole { text-align: right; }
.tg-cafe__comma { text-align: center; }
.tg-cafe__unit { margin-left: .3em; color: var(--ink-2); font-size: .6em; }
.tg-cafe__row:nth-last-child(2) { padding-bottom: 4px; border-bottom: 3px solid var(--ink); }
.tg-cafe__sum { visibility: hidden; color: var(--green-ink); }
.tg-cafe__sum[data-shown] { visibility: visible; }
.tg-cafe .tg-pad { --pad-columns: 7; }
/* On a wide screen the keypad stands beside the drawings, so the board stays one screen tall at 1366×768, and a
   receipt line keeps its name on one line. */
@media (min-width: 701px) {
  .tg-stall__work,
  .tg-cafe__work { flex-wrap: nowrap; }
  .tg-cafe__line > span { white-space: nowrap; }
}
/* A short landscape board (1366 × 768, also under a duel's scoreboard): the kicker goes, the turn banner and the
   chip share a line, the prompt keeps 32 px and keypad 2 puts Temizle and Kontrol et beside the entry, so
   Kontrol et (and the estimate round's lock) stands above the instruction bar. */
@media (orientation: landscape) and (min-width: 900px) and (max-height: 820px) {
  .question-card--topic:has([data-topic-game="stall"], [data-topic-game="cafe"]) .question-kicker { display: none; }
  .question-card--topic:has([data-topic-game="stall"], [data-topic-game="cafe"]) .question-copy { display: contents; }
  .question-card--topic:has([data-topic-game="stall"], [data-topic-game="cafe"]) .turn-banner,
  .question-card--topic:has([data-topic-game="stall"], [data-topic-game="cafe"]) .question-experience { margin: 0 3px 6px; vertical-align: top; }
  .question-card--topic:has([data-topic-game="stall"], [data-topic-game="cafe"]) .question-copy h2 { margin-bottom: 8px; font-size: clamp(22px, 2.35vw, 32px); }
  .tg-place[data-topic-game="stall"] { gap: 8px; }
  .tg-stall .tg-pad,
  .tg-cafe .tg-pad { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 6px; width: 400px; }
  .tg-stall .tg-pad__answer,
  .tg-cafe .tg-pad__answer { grid-area: 1 / 1; justify-self: stretch; }
  .tg-stall .tg-pad__actions,
  .tg-cafe .tg-pad__actions { grid-area: 1 / 2; gap: 6px; }
  .tg-stall .tg-pad__keys,
  .tg-cafe .tg-pad__keys { grid-area: 2 / 1 / auto / span 2; grid-template-columns: repeat(var(--pad-columns, 6), minmax(0, 1fr)); gap: 5px; width: 100%; }
  .tg-stall .tg-pad__entry,
  .tg-cafe .tg-pad__entry { flex: 1 1 auto; min-width: 0; padding-inline: 6px; font-size: 28px; }
  .tg-stall .tg-pad__actions > *,
  .tg-cafe .tg-pad__actions > * { padding-inline: 10px; font-size: 16px; white-space: nowrap; }
  .tg-stall__chip { min-height: 48px; padding-block: 4px; }
  .tg-stall__plan { gap: 6px; }
}

/* ---------- Çarpan Kulesi (climb, step 14): the ruler of widths over the site, then the tower of floors. A floor
   lies on its long side, drawn to scale in unit squares, the 1 × n floor at the bottom and each label left of its
   floor; a misfit's full rows and left-over squares stand on top. The tower is as wide as the 1 × n floor at no
   more than 24 px a square, and its floors together no taller than --tower-h. The departures are a minute line
   with the shuttle's hops over four departure keys. ---------- */
.tg-tw { --label: 78px; width: 100%; }
.tg-tw__ruler { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 10px; background: var(--world-band); border: 2px solid var(--world-band-edge); border-radius: 16px; }
.tg-tw__width { padding: 0 6px; color: var(--world-ink); font-variant-numeric: tabular-nums; }
.tg-tw__width[data-built] { color: var(--gold-ink); background: var(--gold-tint); border-color: var(--gold-base); opacity: 1; }
.tg-tw__width[data-missed] { border-color: var(--red-base); border-style: dashed; }
.tg-tw__tower { --tower-h: clamp(110px, 24vh, 190px); display: flex; flex-direction: column-reverse; width: min(100%, calc(var(--label) + var(--n) * 24px), calc(var(--label) + var(--tower-h) * var(--n) / var(--rows))); }
.tg-tw__floor { display: flex; align-items: center; justify-content: center; min-height: 28px; padding-left: var(--label); animation: tg-tw-rise 260ms ease-out backwards; }
@keyframes tg-tw-rise { from { opacity: 0; transform: translateY(-16px); } }
.tg-tw__slab { position: relative; flex: none; width: calc(var(--long) / var(--n) * 100%); aspect-ratio: var(--long) / var(--short); }
.tg-tw__floor[data-tg-floor] .tg-tw__slab,
.tg-tw__rows,
.tg-tw__rest { background-color: var(--surface); background-image: linear-gradient(90deg, var(--world-band-edge) 1px, transparent 1px), linear-gradient(var(--world-band-edge) 1px, transparent 1px); }
.tg-tw__floor[data-tg-floor] .tg-tw__slab { background-size: calc(100% / var(--long)) 100%, 100% calc(100% / var(--short)); box-shadow: inset 0 0 0 2px var(--world-ink); }
.tg-tw__slab b { position: absolute; top: 50%; right: calc(100% + 8px); color: var(--world-ink); font-size: clamp(15px, 1.4vw, 19px); font-weight: 900; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; translate: 0 -50%; }
.tg-tw__rows,
.tg-tw__rest { position: absolute; bottom: 0; }
.tg-tw__rows { top: 0; left: 0; width: calc((var(--long) - 1) / var(--long) * 100%); background-size: calc(100% / (var(--long) - 1)) 100%, 100% calc(100% / var(--short)); outline: 2px dashed var(--world-ink); outline-offset: -2px; }
.tg-tw__rest { right: 0; width: calc(100% / var(--long)); height: calc(var(--rest) / var(--short) * 100%); background-color: var(--red-tint); background-size: 100% calc(100% / var(--rest)); box-shadow: inset 0 0 0 2px var(--red-base); }
.tg-tw__floor--misfit .tg-tw__slab b { color: var(--red-ink); }
/* The misfit is drawn at its own square size, big enough to count from the back of the room, at most eight
   squares tall and never wider than the tower. */
.tg-tw__floor--misfit { --cell: clamp(12px, 1vw, 16px); }
.tg-tw__floor--misfit .tg-tw__slab { width: min(100%, calc(var(--long) * var(--cell)), calc(8 * var(--cell) * var(--long) / var(--short))); }
.tg-tw__floor--stacked .tg-tw__rows { top: calc(100% / var(--short)); width: 100%; background-size: calc(100% / var(--long)) 100%, 100% calc(100% / (var(--short) - 1)); }
.tg-tw__floor--stacked .tg-tw__rest { top: 0; right: auto; bottom: auto; left: 0; width: calc(var(--rest) / var(--long) * 100%); height: calc(100% / var(--short)); background-size: calc(100% / var(--rest)) 100%; }

.tg-tw__line { width: min(1000px, 100%); padding: 0 clamp(22px, 3vw, 40px); }
.tg-tw__track { --axis-y: 66px; position: relative; height: 106px; }
.tg-tw__axis { position: absolute; top: calc(var(--axis-y) - 3px); right: -14px; left: -14px; height: 6px; background: var(--world-ink); border-radius: 3px; }
.tg-tw-line__minor { position: absolute; top: calc(var(--axis-y) - 8px); left: 0; width: 100%; height: 16px; overflow: visible; }
.tg-tw-line__minor path { fill: none; stroke: var(--world-ink); stroke-width: 2; }
.tg-tw-tick { position: absolute; top: 0; bottom: 0; left: var(--at); width: 0; }
.tg-tw-tick__mark { position: absolute; top: calc(var(--axis-y) - 13px); left: -2px; width: 4px; height: 26px; background: var(--world-ink); border-radius: 2px; }
.tg-tw-tick__label { position: absolute; top: calc(var(--axis-y) + 16px); left: 0; color: var(--ink); font-size: clamp(15px, 1.5vw, 20px); font-weight: 850; line-height: 1.1; white-space: nowrap; translate: -50% 0; }
.tg-tw__depot,
.tg-tw__stop { position: absolute; top: calc(var(--axis-y) - 10px); z-index: 2; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; }
.tg-tw__depot { background: var(--world-model); border: 4px solid var(--world-ink); }
.tg-tw__stop { background: var(--coral-base); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--world-ink); }
.tg-tw__hop,
.tg-tw__gap { position: absolute; top: calc(var(--axis-y) - 30px); height: 30px; border: 3px solid var(--world-accent); border-bottom: 0; border-radius: 999px 999px 0 0; animation: tg-tw-hop 220ms ease-out var(--delay, 0ms) backwards; }
.tg-tw__hop::after { position: absolute; right: -8px; bottom: -6px; width: 13px; height: 13px; background: var(--world-accent); border: 2px solid var(--world-ink); border-radius: 50%; content: ""; }
.tg-tw__gap { border-color: var(--red-base); border-style: dashed; }
.tg-tw__gap b { position: absolute; bottom: calc(100% + 6px); left: 50%; color: var(--red-ink); font-size: clamp(16px, 1.5vw, 20px); font-weight: 900; line-height: 1; white-space: nowrap; translate: -50% 0; }
@keyframes tg-tw-hop { from { opacity: 0; transform: scale(.6); } }
.tg-tw__departures { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; }
.tg-tw__departure { font-size: clamp(20px, 2vw, 26px); }
.tg-tw__departure[data-answer] { color: var(--green-ink); border-color: var(--green-base); opacity: 1; }
.tg-tw__departure[data-missed] { border-color: var(--red-base); border-style: dashed; }

/* ---------- High contrast: black on white, pressed and marked states by fill and symbol ---------- */
body.high-contrast .tg-key,
body.high-contrast .tg-gap span,
body.high-contrast .tg-climb-card,
body.high-contrast .tg-rung,
body.high-contrast .tg-shelf-item,
body.high-contrast .tg-gate,
body.high-contrast .tg-reactor__dial { color: #000000; background: #ffffff; border-color: #000000; }
body.high-contrast .tg-gate[aria-pressed="true"],
body.high-contrast .tg-reactor__tile { color: #ffffff; background: #000000; border-color: #000000; }
body.high-contrast .tg-gate[aria-pressed="true"] .tg-gate__rule { color: #ffffff; }
body.high-contrast .tg-gate[data-result] { color: #000000; background: #ffffff; border-width: 5px; }
body.high-contrast .tg-gate[data-result] .tg-gate__rule,
body.high-contrast .tg-gate__rule,
body.high-contrast .tg-train__queue,
body.high-contrast .tg-place__status,
body.high-contrast .tg-gate[data-result] .tg-gate__reason { color: #000000; }
body.high-contrast .tg-gate[data-result]::after { color: #ffffff; background: #000000; }
body.high-contrast .tg-place__flag b,
body.high-contrast .tg-place__reference b,
body.high-contrast .tg-place__pill b,
body.high-contrast .tg-place__reveal,
body.high-contrast .tg-place__table,
body.high-contrast .tg-place__table th,
body.high-contrast .tg-place__table td,
body.high-contrast .tg-tree[data-tg-around] b { color: #000000; background: #ffffff; border-color: #000000; }
body.high-contrast .tg-place__pill.is-target b { color: #ffffff; background: #000000; }
body.high-contrast .tg-tree__crown { fill: #ffffff; stroke: #000000; }
body.high-contrast .tg-tree[data-tg-around] .tg-tree__crown { fill: #000000; }
body.high-contrast .tg-strip__bar b { background: #000000; }
body.high-contrast .tg-climb-card { border-style: dashed; }
body.high-contrast .tg-rung[data-sign="zero"],
body.high-contrast .tg-shelf-item[data-sign="zero"] { color: #ffffff; background: #000000; }
body.high-contrast .tg-climb__queue,
body.high-contrast .tg-miniline__mark b,
body.high-contrast .tg-miniline__zero b { color: #000000; }
body.high-contrast .tg-miniline { background: #ffffff; border-color: #000000; }
body.high-contrast .tg-miniline__axis::before,
body.high-contrast .tg-miniline__mark i,
body.high-contrast .tg-miniline__zero i { background: #000000; }
body.high-contrast .tg-miniline__mark.is-waiting b { color: #ffffff; background: #000000; border-color: #000000; }
body.high-contrast .tg-ratio--table,
body.high-contrast .tg-ratio__row > span,
body.high-contrast .tg-stamp,
body.high-contrast .sg-belt-miss { color: var(--ink); background: var(--surface); border-color: var(--ink); }
body.high-contrast .tg-ratio__row--head > span { color: var(--surface); background: var(--ink); }
body.high-contrast .tg-ratio__guide { stroke: var(--ink); }
body.high-contrast .tg-ratio__dot { fill: var(--ink); stroke: var(--surface); }
body.high-contrast .tg-division__step small,
body.high-contrast .sg-belt-lives { color: var(--ink); }
body.high-contrast .sg-belt-miss { border-width: 4px; }
body.high-contrast .tg-mixer__vessel,
body.high-contrast .tg-mixer__table,
body.high-contrast .tg-mixer__tag,
body.high-contrast .tg-mixer__offer,
body.high-contrast .tg-pad__entry,
body.high-contrast .tg-mixer__missing,
body.high-contrast .tg-mixer__reason { color: var(--ink); background: var(--surface); border-color: var(--ink); }
body.high-contrast .tg-mixer__table thead th,
body.high-contrast .tg-mixer__table thead td { color: var(--surface); background: var(--ink); }
body.high-contrast .tg-mixer__table th,
body.high-contrast .tg-mixer__table td { border-color: var(--ink); }
body.high-contrast .tg-mixer__drink,
body.high-contrast .tg-mixer__pieces i { border-color: var(--ink); }
body.high-contrast .tg-mixer__name,
body.high-contrast .tg-mixer__versus,
body.high-contrast .tg-pad__unit,
body.high-contrast .tg-pad__entry[data-missed] { color: var(--ink); }
body.high-contrast .tg-pad__entry[data-missed] { border-style: dashed; }
body.high-contrast [data-topic-game="mixer"] [data-answer],
body.high-contrast .tg-mixer__jug[data-answer] .tg-mixer__vessel { border-width: 5px; border-color: var(--ink); }
/* The ice keeps the sign colours (tokens.css gives them high-contrast values); every other piece is ink on
   surface, and the end mark is filled ink where the start is a ring. */
body.high-contrast .tg-ice__tick,
body.high-contrast .tg-ice__scale[data-orientation="horizontal"] .tg-ice__track::before { background: var(--ink); }
body.high-contrast .tg-ice__label,
body.high-contrast .tg-ice__change b,
body.high-contrast .tg-ice__hop b { color: var(--ink); }
body.high-contrast .tg-ice__tube,
body.high-contrast .tg-ice__bulb { border-color: var(--ink); }
body.high-contrast .tg-ice__tube,
body.high-contrast .tg-ice__mark--start { background: var(--surface); }
body.high-contrast .tg-ice__mark--start,
body.high-contrast .tg-ice__mark--end { border-color: var(--ink); }
body.high-contrast .tg-ice__mark--end { background: var(--ink); }
body.high-contrast .tg-ice__hop { border-color: var(--ink); }
body.high-contrast .tg-ice__reason { color: var(--ink); background: var(--surface); border-color: var(--ink); }

/* The elevator keeps the sign colours on its floor labels; the wells, the cabin and the panel are ink on
   surface, the cabin filled ink. The newsroom keeps its chart palette (tokens.css gives it high-contrast
   values); tables, legends and the reason are ink on surface. */
body.high-contrast .tg-shaft,
body.high-contrast .tg-elevator__term[data-filled="true"],
body.high-contrast .tg-elevator__reason,
body.high-contrast .tg-news__table,
body.high-contrast .tg-news__reason { color: var(--ink); background: var(--surface); border-color: var(--ink); }
body.high-contrast .tg-shaft__floor::after { background: var(--surface); border-color: var(--ink); }
body.high-contrast .tg-shaft__floor[data-target]::after { background: repeating-linear-gradient(135deg, var(--ink) 0 2px, var(--surface) 2px 6px); }
body.high-contrast .tg-shaft__car { background: var(--ink); border-color: var(--ink); }
/* The window's edge fades go: the floors cut at the frame say the shaft goes on. */
body.high-contrast .tg-shaft::before,
body.high-contrast .tg-shaft::after { display: none; }
body.high-contrast .tg-elevator__term { color: var(--ink); border-color: var(--ink); }
body.high-contrast .tg-elevator__prediction[data-answer],
body.high-contrast .tg-news__choice[data-answer] { color: var(--ink); background: var(--surface); border-width: 5px; border-color: var(--ink); }
body.high-contrast .tg-elevator__status,
body.high-contrast .tg-chart__unit,
body.high-contrast .tg-chart__tick b,
body.high-contrast .tg-chart__label,
body.high-contrast .tg-chart__labels span,
body.high-contrast .tg-chart__total,
body.high-contrast .tg-chart__point[data-asked] .tg-chart__amount,
body.high-contrast .tg-chart [data-answer] .tg-chart__amount,
body.high-contrast .tg-chart__bar[data-corrected] .tg-chart__amount { color: var(--ink); }
body.high-contrast .tg-chart__grid,
body.high-contrast .tg-chart__tick,
body.high-contrast .tg-chart__total { border-color: var(--ink); }
body.high-contrast .tg-chart [data-answer] [data-tg-fill],
body.high-contrast .tg-chart__bar[data-corrected] .tg-chart__fill { outline-color: var(--ink); }
body.high-contrast .tg-chart__point[data-asked] .tg-chart__dot { background-color: var(--ink); }
body.high-contrast .tg-chart__key.is-asked { background: var(--surface); outline: 3px solid var(--ink); }
body.high-contrast .tg-news__table th,
body.high-contrast .tg-news__table td { border-color: var(--ink); }
body.high-contrast .tg-news__table thead th { color: var(--surface); background: var(--ink); }
body.high-contrast .tg-news__icon,
body.high-contrast .tg-news__icon-cut { fill: var(--ink); }
body.high-contrast .tg-news__icon-line { fill: none; stroke: var(--ink); }
body.high-contrast .tg-news__choice[data-missed] { border-color: var(--ink); }
body.high-contrast .tg-fk__rock,
body.high-contrast .tg-fk__part,
body.high-contrast .tg-fk__tile,
body.high-contrast .tg-fk__time,
body.high-contrast .tg-fk__line,
body.high-contrast .tg-fk__pair,
body.high-contrast .tg-fk__spark,
body.high-contrast .tg-fk__reason,
body.high-contrast .tg-tw__spark,
body.high-contrast .tg-tw__reason { color: #000000; background: #ffffff; border-color: #000000; }
body.high-contrast .tg-fk__gem { color: #000000; background: #ffffff; border: 5px double #000000; }
body.high-contrast .tg-fk__rock[aria-pressed="true"],
body.high-contrast .tg-fk__tray .tg-fk__tile[aria-pressed="true"],
body.high-contrast .tg-fk__time[data-placed],
body.high-contrast .tg-fk__choice[data-answer] { color: #ffffff; background: #000000; border-color: #000000; }
body.high-contrast .tg-fk__ring,
body.high-contrast .tg-fk__lens,
body.high-contrast .tg-fk__set--both { background: #ffffff; }
body.high-contrast .tg-fk__ring::after { border-color: #000000; }
body.high-contrast .tg-fk__ring--b::after { border-style: dashed; }
body.high-contrast .tg-fk__set-name { color: #000000; }
body.high-contrast .tg-fk__line--a .tg-fk__dot,
body.high-contrast .tg-fk__dot--a { background: #000000; }
body.high-contrast .tg-fk__line--b .tg-fk__dot,
body.high-contrast .tg-fk__dot--b { background: #ffffff; box-shadow: inset 0 0 0 3px #000000; }
body.high-contrast .tg-fk__departs .tg-fk__dot--a { box-shadow: 0 0 0 2px #ffffff; }
body.high-contrast .tg-fk__departs .tg-fk__dot--b { box-shadow: inset 0 0 0 3px #000000, 0 0 0 2px #ffffff; }
body.high-contrast .tg-fk__time[data-missed],
body.high-contrast .tg-fk__choice[data-missed] { color: #000000; border-color: #000000; opacity: 1; }
body.high-contrast .tg-fk__row--split::before { border-color: #000000; }
body.high-contrast .tg-fk__root { border-top-color: #000000; }
body.high-contrast .tg-fk__radical,
body.high-contrast .tg-fk__out,
body.high-contrast .tg-fk__tray[data-empty]::before { color: #000000; }

/* Uzay Ölçekleri reads off the black-on-white world tokens: every decade is white between ink ticks, the picked
   one fills ink, a missed one is struck through, the answer keeps a thick ink floor, and the quantity is a ring
   among the objects' dots. */
body.high-contrast .tg-scales__decade,
body.high-contrast .tg-scales__decade:nth-child(even),
body.high-contrast .tg-scales__slot,
body.high-contrast .tg-scales__choice[data-answer] { color: var(--ink); background: var(--surface); border-color: var(--ink); }
body.high-contrast .tg-scales__decade[aria-pressed="true"] { color: var(--surface); background: var(--ink); }
body.high-contrast .tg-scales__decade[data-answer] { color: var(--ink); background: var(--surface); box-shadow: inset 0 -10px 0 var(--ink); }
body.high-contrast .tg-scales__decade:disabled:not([data-answer]) { text-decoration: line-through 3px; }
body.high-contrast .tg-scales__object--quantity .tg-scales__pin { background: var(--surface); border: 5px solid var(--ink); }
body.high-contrast .tg-scales__slot[data-answer],
body.high-contrast .tg-scales__choice[data-answer] { border-style: solid; border-width: 5px; }
body.high-contrast .tg-scales__label::after { opacity: 1; }
body.high-contrast .tg-scales__status,
body.high-contrast .tg-scales__end,
body.high-contrast .tg-scales__quantity b { color: var(--ink); }
body.high-contrast .tg-sets__card,
body.high-contrast .tg-sets__set,
body.high-contrast .tg-sets__value { color: #000000; background: #ffffff; border-color: #000000; }
body.high-contrast .tg-sets__card[aria-pressed="true"] { border-width: 6px; outline: 3px solid #000000; outline-offset: 3px; }
body.high-contrast .tg-sets__card[data-found] { border-style: dotted; opacity: .55; }
body.high-contrast .tg-sets__dot { border-color: #000000; }
body.high-contrast .tg-sets__dot[data-on] { background: #000000; }
body.high-contrast .tg-sets__tray { background: #ffffff; border-color: #000000; }
body.high-contrast .tg-sets__kid::after { background: #000000; }
body.high-contrast .tg-sets__row--kids { border-top-color: #000000; }
/* The models' shaded parts take the dark chart blue, so the white strip dividers and the black grid lines both
   show on them. */
body.high-contrast .tg-sets .buzzer-part.is-shaded { fill: var(--chart-1); }
/* The place-value chart: ink cells on white, the highlighted digit filled ink, the answer by a heavy border. */
body.high-contrast .tg-pv__cell { color: #000000; background: #ffffff; border-color: #000000; }
body.high-contrast .tg-pv__cell[data-tg-highlight] { color: #ffffff; background: #000000; }
body.high-contrast .tg-pv__number,
body.high-contrast .tg-pv__reading { color: #000000; }
body.high-contrast .tg-pv__cell[data-answer],
body.high-contrast .tg-pv__choice[data-answer] { color: #000000; border-width: 5px; border-color: #000000; }
body.high-contrast .tg-pv__cell[data-tg-highlight][data-answer] { color: #ffffff; }
body.high-contrast .tg-pv[data-task="add"][data-settled] .tg-pv__cell[data-finale-board]:not([data-answer]) { color: #000000; border-color: #000000; border-width: 4px; }

/* The market studio: ink drawings on white; the shaded strip parts and the discount cells filled ink, the chosen
   plan and the answers by a heavy border. */
body.high-contrast .tg-stall__tag,
body.high-contrast .tg-stall__segs,
body.high-contrast .tg-stall__seg,
body.high-contrast .tg-cafe__receipt,
body.high-contrast .tg-cafe__strip,
body.high-contrast .tg-cafe__columns { --seg: #ffffff; color: #000000; background: #ffffff; border-color: #000000; }
body.high-contrast .tg-stall__tag::before,
body.high-contrast .tg-stall__whole::after,
body.high-contrast .tg-cafe__part + .tg-cafe__part,
body.high-contrast .tg-cafe__key::before { border-color: #000000; }
body.high-contrast .tg-stall__cells i + i { border-left-color: #000000; }
body.high-contrast .tg-stall__tag small,
body.high-contrast .tg-stall__count,
body.high-contrast .tg-stall__whole,
body.high-contrast .tg-cafe__head,
body.high-contrast .tg-cafe__note,
body.high-contrast .tg-cafe__note b,
body.high-contrast .tg-cafe__sign,
body.high-contrast .tg-cafe__unit,
body.high-contrast [data-tg-unknown],
body.high-contrast [data-tg-due] { color: #000000; }
body.high-contrast .tg-stall__chip[aria-pressed="true"],
body.high-contrast .tg-stall__chip[data-answer] { color: #000000; background: #ffffff; border-width: 5px; border-color: #000000; }
body.high-contrast .tg-stall__chip[data-missed] { color: #000000; border-color: #000000; }
body.high-contrast .tg-cafe__part[aria-pressed="true"],
body.high-contrast .tg-cafe__cell[data-off],
body.high-contrast .tg-cafe__key.is-off::before { background: #000000; }
body.high-contrast .tg-cafe__cells { background: #000000; }
body.high-contrast .tg-cafe__cell { background: #ffffff; }
body.high-contrast .tg-cafe__sum,
body.high-contrast [data-tg-unknown][data-answer],
body.high-contrast [data-tg-due][data-answer] { color: #000000; text-decoration: underline 3px; }

body.high-contrast .tg-tw__width[data-built],
body.high-contrast .tg-tw__departure[data-answer] { color: #ffffff; background: #000000; border-color: #000000; }
body.high-contrast .tg-tw__width[data-missed],
body.high-contrast .tg-tw__departure[data-missed] { color: #000000; border-color: #000000; opacity: 1; }
body.high-contrast .tg-tw__rest { background-color: #000000; background-image: linear-gradient(90deg, #ffffff 2px, transparent 2px), linear-gradient(#ffffff 2px, transparent 2px); box-shadow: none; }
body.high-contrast .tg-tw__gap { border-color: #000000; }
body.high-contrast .tg-tw__floor--misfit .tg-tw__slab b,
body.high-contrast .tg-tw__gap b { color: #000000; }
body.high-contrast .tg-tw__stop { background: #000000; }

/* ---------- Phone ---------- */
@media (max-width: 700px) {
  /* A topic round's card: the kicker goes, the world band slims, the turn banner and the game's chip share one
     line and the prompt tightens, so a duel's round opens with its board right under the scoreboard. A steal
     keeps the prompt in view over the board and the feedback strip: the chip gives way with the turn banner it
     shared a line with (the steal banner names the stealer), and the banner and strip are slim. */
  .question-card--topic { padding-top: 6px; }
  .question-card--topic .question-kicker { display: none; }
  .question-card--topic .tg-world-band { height: 26px; margin-bottom: 4px; }
  .question-card--topic .question-copy { display: contents; }
  .question-card--topic .turn-banner,
  .question-card--topic .question-experience { min-height: 31px; margin: 0 3px 6px; vertical-align: top; }
  .question-card--topic .question-copy h2 { margin-bottom: 4px; font-size: 22px; line-height: 1.12; }
  .question-card--topic:has(> .steal-banner) .question-experience { display: none; }
  .question-card--topic .steal-banner { margin-bottom: 4px; padding: 2px 10px; font-size: 15px; line-height: 1.3; }
  .question-card--topic .inline-feedback { min-height: 0; margin-top: 4px; padding-block: 4px; }
  /* A typed item's keypad takes seven key columns (a fraction round has 13 or 14 keys, so none is left alone on a
     last row) inside a slimmer card edge. */
  .question-card--topic:has(.tg-typed) { padding-inline: 10px; }
  .tg-typed,
  .tg-typed .tg-pad { grid-template-columns: minmax(0, 1fr); }
  .tg-typed .tg-pad { width: 100%; }
  .tg-typed .tg-pad__keys { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 4px; width: 100%; }
  .tg-typed .tg-pad .tg-key { min-width: 0; padding-inline: 2px; }
  .tg-place__line { padding: 0 22px; }
  .tg-place__line[data-dense] .tg-place__track { height: 140px; }
  .tg-place__line[data-dense] .tg-place-tick.is-odd .tg-place-tick__label { top: calc(var(--axis-y) + 42px); }
  .tg-place__line[data-dense] .tg-place__flag b { margin-top: 51px; }
  /* The proportion table (a duel's tallest Zor round) stacks over both lines on a phone: tighter table rows,
     board gap and tick labels keep the raised lines' pills and the keypad above the instruction bar. */
  .tg-place:has(> .tg-place__table) { gap: 6px; }
  .tg-place__table th,
  .tg-place__table td { padding-block: 1px; }
  .tg-place:has(> .tg-place__table) .tg-place-tick__label { top: calc(var(--axis-y) + 17px); }
  .tg-place:has(> .tg-place__table) .tg-place__track--top:has(.is-raised) { height: 110px; }
  .tg-place:has(> .tg-place__table) [data-tg-track]:has(.is-raised) { height: 118px; }
  .tg-place[data-topic-game="rootLine"] .tg-place__track { height: 202px; }
  .tg-place[data-topic-game="rootLine"] .tg-place__flag b { margin-top: 66px; }
  .tg-tree.is-odd b { margin-top: 40px; }
  .tg-train__station,
  .tg-climb__tray { min-height: 64px; padding: 6px 10px; }
  .tg-train__rail .tg-gap,
  .tg-shelf__plank .tg-gap { min-width: 44px; padding-inline: 2px; }
  .tg-gap span { width: 40px; height: 40px; }
  .tg-ladder { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "frame"; row-gap: 12px; }
  .tg-ladder__frame { justify-self: center; width: min(280px, 100%); }
  .tg-miniline { padding: 0 24px; }
  .tg-gates__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .tg-gate__rule,
  .tg-gate__reason { font-size: 12px; }
  .tg-reactor__chambers { flex-direction: column; gap: 6px; }
  .tg-reactor__tiles { gap: 4px; max-width: 80vw; }
  .tg-reactor__tile { min-width: 34px; height: 36px; padding: 0 3px; font-size: 15px; }
  .tg-reactor__dial { min-width: 104px; }
  .tg-ratio--graph { width: 128px; }
  .tg-mixer__work { gap: 12px; }
  .tg-mixer__vessel { width: 84px; height: 96px; }
  .tg-mixer__choice { min-width: 0; flex: 1 1 30%; padding: 0 6px; font-size: 16px; }
  .tg-mixer__offer { min-width: 0; flex: 1 1 40%; padding: 8px 10px; }
  /* A typed round (the ratio table or the price tag, the entry, the keypad, Kontrol et) fits one phone screen:
     tighter table rows and entry, and keys 6 px shorter than --touch but as wide. */
  .tg-mixer__table { line-height: 1.25; }
  .tg-mixer__table th,
  .tg-mixer__table td { padding: 3px 12px; }
  .tg-pad { gap: 6px; }
  .tg-pad__entry { font-size: 26px; }
  .tg-pad__keys { gap: 6px; }
  .tg-pad .tg-key,
  .tg-pad .button { min-height: calc(var(--touch) - 6px); }
  .tg-mixer__reason { border-radius: 14px; }
  /* The thermometer stays beside its three key columns: a narrower, shorter scale with smaller labels
     (180 px still keeps the densest scale, 30 steps, 6 px a tick). */
  .tg-ice__scale[data-orientation="vertical"] .tg-ice__track { width: 150px; height: 180px; }
  .tg-ice__scale[data-orientation="vertical"] .tg-ice__label { right: calc(100% - 40px); font-size: 15px; }
  .tg-ice__scale[data-orientation="vertical"] .tg-ice__tick { left: 45px; width: 7px; }
  .tg-ice__scale[data-orientation="vertical"] .tg-ice__tick.is-major { left: 42px; width: 10px; }
  .tg-ice__tube { left: 54px; width: 24px; }
  .tg-ice__bulb { left: 48px; }
  .tg-ice__mercury { left: 61px; }
  .tg-ice__scale[data-orientation="vertical"] .tg-ice__mark { left: 83px; width: 18px; height: 18px; }
  .tg-ice__scale[data-orientation="vertical"] .tg-ice__hop { left: 91px; width: 18px; }
  .tg-ice__scale[data-orientation="vertical"] .tg-ice__change { left: 110px; }
  .tg-ice__scale[data-orientation="vertical"] .tg-ice__change b { left: 8px; font-size: 15px; }
  .tg-ice__scale[data-orientation="horizontal"] { padding: 0 20px; }
  /* Every ice round opens with Kontrol et on screen above the footer at 390×844, keys --touch minus 6 px tall.
     Thermometer: the pad wrapper has no role, so it steps out of the layout; the entry sits over the scale and
     the three key columns stand beside both with Temizle and Kontrol et right under them, so even a six-line
     prompt leaves Kontrol et above the footer (the 1fr row takes whatever height the scale needs below them). */
  .tg-ice .tg-pad__entry { font-size: 22px; line-height: 1.1; }
  .tg-ice__work[data-orientation="vertical"] { display: grid; grid-template-areas: "answer keys" "scale keys" "scale actions"; grid-template-rows: auto auto 1fr; justify-content: center; align-items: start; gap: 6px 10px; }
  .tg-ice__work[data-orientation="vertical"] .tg-pad { display: contents; }
  .tg-ice__work[data-orientation="vertical"] .tg-ice__scale { grid-area: scale; }
  .tg-ice__work[data-orientation="vertical"] .tg-pad__answer { grid-area: answer; justify-self: center; gap: 6px; }
  .tg-ice__work[data-orientation="vertical"] .tg-pad__entry { min-width: 3.2em; padding-inline: 8px; }
  .tg-ice__work[data-orientation="vertical"] .tg-pad__keys { grid-area: keys; --pad-columns: 3; }
  .tg-ice__work[data-orientation="vertical"] .tg-pad__actions { grid-area: actions; display: grid; grid-template-columns: auto 1fr; gap: 6px; }
  .tg-ice__work[data-orientation="vertical"] .tg-pad__actions > * { min-width: 0; padding-inline: 4px; font-size: 16px; white-space: nowrap; }
  /* Number line: six key columns, so the fourteen keys leave four free cells in their last row, and Temizle
     and Kontrol et take those cells (the actions share the keys' grid row and sit at its foot). */
  .tg-ice__work[data-orientation="horizontal"] { gap: 8px; }
  .tg-ice__work[data-orientation="horizontal"] .tg-pad { grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
  .tg-ice__work[data-orientation="horizontal"] .tg-pad__answer { grid-column: 1 / -1; }
  .tg-ice__work[data-orientation="horizontal"] .tg-pad__keys { grid-area: 2 / 1 / 3 / -1; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
  .tg-ice__work[data-orientation="horizontal"] .tg-pad__actions { grid-area: 2 / 3 / 3 / -1; align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
  .tg-ice__work[data-orientation="horizontal"] .tg-pad .tg-key,
  .tg-ice__work[data-orientation="horizontal"] .tg-pad .button { min-width: 0; padding-inline: 4px; }
  .tg-ice__work[data-orientation="horizontal"] .tg-pad__actions > * { font-size: 16px; }
  /* The elevator: the shaft keeps the left edge of the board in a narrow window of 18 px floors, the panel takes
     the rest: the four predictions in one row, the next move over Başa dön and Kontrol et, and the inverse move's
     sign and entry over its keys in four columns, Temizle and Kontrol et closing the last row. */
  .tg-elevator { --floor: 18px; --floor-label: 28px; --floor-well: 32px; --shaft-h: clamp(calc(7 * var(--floor) + 2 * var(--cap)), 100dvh - 600px, var(--shaft-full)); }
  .tg-elevator__work { gap: 10px; }
  .tg-shaft__track { padding-inline: 2px 4px; }
  .tg-shaft__cabin { left: calc(2px + var(--floor-label) + 6px); padding-inline: 3px; }
  .tg-elevator__panel { flex: 1 1 0; gap: 8px; }
  .tg-elevator__expression { gap: 4px; font-size: 20px; }
  .tg-elevator__term { padding: 1px 6px; }
  .tg-elevator__predictions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .tg-elevator__prediction { min-width: 0; min-height: calc(var(--touch) - 6px); padding-inline: 2px; font-size: 20px; }
  .tg-elevator__actions { width: 100%; gap: 8px; }
  .tg-elevator__actions > * { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
  .tg-elevator__step { flex-basis: 100%; font-size: 18px; }
  .tg-elevator__move { grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: stretch; gap: 6px; width: 100%; }
  .tg-elevator__ops { grid-column: span 2; gap: 6px; }
  .tg-elevator__ops .tg-key { flex: 1 1 0; min-width: 0; min-height: calc(var(--touch) - 6px); font-size: 26px; }
  .tg-elevator .tg-pad,
  .tg-elevator .tg-pad__keys,
  .tg-elevator .tg-pad__actions { display: contents; }
  .tg-elevator .tg-pad__answer { grid-column: span 2; justify-content: center; gap: 2px; }
  .tg-elevator .tg-pad .tg-key,
  .tg-elevator .tg-pad .button { min-width: 0; min-height: calc(var(--touch) - 6px); padding-inline: 2px; }
  .tg-elevator .tg-pad [data-tg-action="clear"] { font-size: 14px; }
  .tg-elevator .tg-pad [data-tg-action="check"] { grid-column: span 2; }
  .tg-elevator .tg-pad__answer::before,
  .tg-elevator .tg-pad__answer::after { font-size: 22px; }
  .tg-elevator .tg-pad__entry { min-width: 2.4em; padding-inline: 6px; font-size: 24px; }
  .tg-elevator__reason { font-size: 16px; }
  .tg-scales__normalizer { padding: 4px 16px 8px; font-size: 40px; }
  .tg-scales__actions { width: 100%; gap: 8px; }
  .tg-scales__actions > * { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
  .tg-scales__reason { font-size: 16px; }
  .tg-scales__ruler { padding: 6px 12px 10px; }
  .tg-scales__sky { height: 60px; }
  .tg-scales__label { bottom: 23px; padding: 0 3px; font-size: 13px; }
  .tg-scales__object[data-row="1"] .tg-scales__label { bottom: 42px; }
  .tg-scales__object[data-row="1"] .tg-scales__label::after { height: 23px; }
  .tg-scales__decade { height: 46px; padding: 16px 0 0 3px; font-size: 16px; }
  .tg-scales { gap: 8px; }
  .tg-scales__quantity { flex: 1 1 100%; font-size: 16px; }
  .tg-scales__quantity::before { width: 14px; height: 14px; margin-right: 6px; }
  .tg-scales__end { display: none; }
  .tg-scales__pair { flex-direction: column; gap: 8px; font-size: 32px; }
  .tg-scales__choice { flex: 1 1 0; min-width: 0; }
  .tg-scales__choices { width: 100%; }
  /* The newsroom's charts take the board's width; five labels or more alternate between two rows. A duel's round
     fits one phone screen: a slimmer card edge and tag, a 120 px plot, and keypad 2 spanning the board, its
     entry with Temizle and Kontrol et on one line over seven key columns of 44 px or more. */
  .question-card--topic:has(.tg-news) { padding-top: 4px; padding-inline: 10px; }
  .question-card[data-world="newsroom"] .tg-world-band { height: 22px; }
  .question-card[data-world="newsroom"] .question-experience { margin-bottom: 4px; }
  .question-card[data-world="newsroom"] .question-copy h2 { margin-bottom: 2px; }
  .tg-news { gap: 6px; }
  .tg-news__ticker { gap: 8px; padding: 2px 10px 2px 4px; }
  .tg-news__tag { padding: 1px 6px; font-size: 13px; letter-spacing: .03em; }
  .tg-news__headline { font-size: 15px; line-height: 1.15; }
  .tg-news__work { gap: 8px; }
  .tg-news__answer { width: 100%; }
  .tg-news .tg-pad { justify-self: stretch; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; }
  .tg-news .tg-pad__answer { grid-area: 1 / 1; justify-self: stretch; gap: 6px; }
  .tg-news .tg-pad__entry { flex: 1 1 auto; min-width: 0; padding-inline: 6px; }
  .tg-news .tg-pad__actions { grid-area: 1 / 2; gap: 6px; }
  .tg-news .tg-pad__actions > * { padding: 0 10px; font-size: 16px; white-space: nowrap; }
  .tg-news .tg-pad__keys { grid-area: 2 / 1 / auto / span 2; grid-template-columns: repeat(7, minmax(0, 1fr)); width: 100%; }
  .tg-news .tg-pad .tg-key { min-width: 0; padding-inline: 2px; }
  /* A row of work wraps under the chart. The bar builder's round fits one phone screen, a duel's too: "Grafiği
     kontrol et" stands at the chart's top right beside its unit, over a 68 px plot, and the table under the chart
     keeps only its rows on screen (a group, its amount with the unit, a slider in its bar's colour), its caption and
     column heads staying for screen readers. After a miss the strip settles over table rows, not over the key. */
  .tg-news__desk { flex-basis: 100%; }
  .tg-news[data-task="build"] .tg-news__work { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 0; }
  .tg-news[data-task="build"] .tg-news__desk,
  .tg-news__build { display: contents; }
  .tg-news__build > .tg-chart { grid-area: 1 / 1 / auto / span 2; }
  .tg-news[data-task="build"] .tg-news__answer { grid-area: 1 / 2; align-self: start; width: auto; }
  .tg-news__check { min-height: calc(var(--touch) - 8px); padding-block: 0; }
  .tg-chart--build .tg-chart__unit { display: flex; align-items: flex-end; min-height: calc(var(--touch) - 8px); }
  .tg-news__build .tg-news__table { grid-area: 2 / 1 / auto / span 2; justify-self: center; }
  .tg-news__build .tg-news__table caption,
  .tg-news__build .tg-news__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .tg-news__build .tg-news__table tbody tr:first-child > * { border-top: 0; }
  .tg-chart--bar,
  .tg-chart--line { --plot-h: 120px; --axis-w: 30px; }
  .tg-news__desk > .tg-chart,
  .tg-news__build,
  .tg-news__build > .tg-chart { width: 100%; }
  .tg-chart--build { --plot-h: 68px; --headroom: 20px; }
  .tg-chart__plot { margin-right: 10px; }
  .tg-chart[data-dense] { --label-h: 40px; }
  .tg-chart[data-dense] .tg-chart__bar:nth-child(even) .tg-chart__label,
  .tg-chart[data-dense] .tg-chart__labels span:nth-child(even) { padding-top: 24px; }
  .tg-chart__label,
  .tg-chart__labels span { font-size: 13px; }
  .tg-chart__pie { width: 170px; }
  .tg-chart__legend { font-size: 15px; }
  .tg-news__table { font-size: 16px; border-width: 2px; }
  .tg-news__table th,
  .tg-news__table td { padding: 3px 8px; border-top-width: 1px; }
  /* Each slider keeps its 44 px hit box but reaches 2 px into the row edges, so six rows of a Zor round (41 px apart)
     stand above the footer at 390×844. */
  .tg-news__slide input { width: 120px; margin-block: -2px; }
  .tg-news__choice { min-width: 0; flex: 1 1 30%; padding: 0 6px; font-size: 16px; }
  .tg-news__icon { width: 24px; height: 24px; }
  .tg-news__reason { font-size: 16px; }
  /* The crypto lock fits one phone screen in a duel: the six-column keypad (342 px) gets a slimmer card edge, the
     tray's caption one line, and the board's rows, the vault and the Temizle / Kontrol et row are tighter. */
  .question-card--topic:has(.tg-fk) { padding-inline: 10px; }
  .question-card--topic:has(.tg-fk) .question-copy h2 { font-size: 18px; }
  .tg-fk { --node: 46px; --node-h: 44px; --node-gap: 8px; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tg-fk__chisels { gap: 6px; }
  .tg-fk__chisel { min-width: 48px; min-height: calc(var(--touch) - 8px); padding: 0 6px; font-size: 19px; }
  .tg-fk__grove { gap: 10px; }
  .tg-fk__dig { gap: 4px; }
  .tg-fk .tg-pad { column-gap: 8px; row-gap: 4px; }
  .tg-fk .tg-pad .tg-key,
  .tg-fk .tg-pad .button { min-height: calc(var(--touch) - 8px); }
  .tg-fk .tg-pad__keys { gap: 4px 6px; }
  .tg-fk .tg-pad__entry { font-size: 26px; }
  .tg-fk .tg-pad__actions { gap: 6px; }
  .tg-fk .tg-pad__actions > * { padding: 0 10px; font-size: 16px; }
  .tg-fk__vault { gap: 4px; }
  .tg-fk__spark,
  .tg-fk__reason,
  .tg-tw__spark,
  .tg-tw__reason { font-size: 16px; }
  .tg-fk__spark,
  .tg-tw__spark { min-height: 1.4em; }
  .tg-fk__rock,
  .tg-fk__gem,
  .tg-fk__part { font-size: 19px; }
  /* The phone Venn stacks the regions: ring A (rows 1 and 2) and ring B (rows 2 and 3) are rounded boxes set
     apart sideways, so the middle row between both outlines is their intersection, filled by the both region. */
  .tg-fk__venn { gap: 4px; }
  .tg-fk__tray { gap: 4px; min-height: 34px; }
  .tg-fk__tray[data-empty]::before { font-size: 15px; }
  .tg-fk__tile { min-width: 44px; min-height: 44px; padding: 0 3px; font-size: 18px; border-width: 2px; border-radius: 10px; }
  .tg-fk__held .tg-fk__tile { min-width: 34px; min-height: 30px; padding: 0 3px; font-size: 17px; }
  .tg-fk__sets { grid-template-columns: minmax(0, 1fr); }
  .tg-fk__ring { border-radius: 22px; }
  .tg-fk__ring--a { grid-row: 1 / 3; grid-column: 1; margin-right: 16px; }
  .tg-fk__ring--b { grid-row: 2 / 4; grid-column: 1; margin-left: 16px; }
  .tg-fk__lens { display: none; }
  .tg-fk__set { grid-column: 1; grid-template-columns: 2.8em minmax(0, 1fr); min-height: 44px; align-items: center; align-content: center; justify-items: start; gap: 4px; padding: 5px 0; border-radius: 0; }
  .tg-fk__set--a { grid-row: 1; padding-inline: 12px 26px; }
  .tg-fk__set--both { grid-row: 2; margin-inline: 16px; padding-inline: 10px; background: var(--gold-tint); border-radius: 22px 0; }
  .tg-fk__set--b { grid-row: 3; padding-inline: 26px 12px; }
  .tg-fk__set-name { font-size: 19px; }
  .tg-fk__set--both .tg-fk__set-name { font-size: 16px; }
  .tg-fk__held { justify-content: flex-start; gap: 4px; }
  .tg-fk__lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .tg-fk__line { padding: 3px 8px; border-radius: 12px; font-size: 15px; line-height: 1.25; }
  .tg-fk__line b { display: block; }
  .tg-fk__line .tg-fk__dot { width: 10px; height: 10px; margin-right: 5px; vertical-align: 0; }
  .tg-fk__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 9px 3px; width: 100%; }
  .tg-fk__time { min-width: 0; min-height: 36px; padding: 0; font-size: 15px; border-width: 2px; border-radius: 9px; }
  .tg-fk__departs { bottom: -6px; gap: 2px; }
  .tg-fk__departs .tg-fk__dot { width: 9px; height: 9px; }
  .tg-fk__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .tg-fk__choice { padding: 0 6px; font-size: 19px; }
  .tg-fk__root { padding-right: 8px; }
  .tg-fk__radical { font-size: 44px; }
  /* On a phone the claim row moves above the cards: twelve cards in a narrow column push anything under them
     below the instruction bar, and the claim must be on screen when a turn opens. The tray (with its basket)
     follows the claim row, so the sets and the finale stay in view when the answer scrolls the board top up.
     A duel's twelve cards fit one screen under them and a 22 px prompt: a slimmer card edge, tighter gaps, keys
     6 px shorter than --touch, cards at least 48 px tall, and the empty tray's basket and caption on one line. */
  .question-card--topic:has(.tg-sets) { padding-inline: 10px; }
  .tg-sets { --sets-gap: 6px; gap: 6px; }
  .tg-sets__controls { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 4px; order: -1; }
  .tg-sets__claim,
  .tg-sets__clear { min-height: calc(var(--touch) - 6px); padding-block: 0; }
  .tg-sets__tray { order: -1; min-height: 44px; padding: 6px 10px; }
  .tg-sets__empty { font-size: 15px; }
  .tg-sets__card { flex-basis: calc((100% - 3 * var(--sets-gap)) / 4); min-height: 48px; padding: 4px 3px; border-radius: 12px; font-size: 18px; }
  .tg-sets .buzzer-model svg { max-height: 28px; }
  .tg-sets .buzzer-model--grid svg { height: 48px; }
  /* A board with sharing pictures lays three cards to a row, so five pizzas and seven children fit a line. */
  .tg-sets:has(.tg-sets__share) .tg-sets__card { flex-basis: calc((100% - 2 * var(--sets-gap)) / 3); }
  .tg-sets__pizza { width: 15px; height: 15px; border-width: 2px; }
  .tg-sets__kid { width: 11px; height: 15px; }
  .tg-sets__kid::before { left: 2px; width: 7px; height: 7px; }
  .tg-sets__kid::after { width: 11px; height: 7px; border-radius: 6px 6px 2px 2px; }
  .tg-sets__share { gap: 3px; }
  .tg-sets__row { gap: 2px; }
  .tg-sets__value { right: 2px; left: 2px; padding: 0 2px; font-size: 14px; }
  .tg-sets__claim { min-width: 112px; }
  .tg-sets__note { flex-basis: 100%; min-height: 1.25em; font-size: 16px; line-height: 1.25; text-align: center; }
  .tg-sets__set { padding: 3px 10px; font-size: 17px; }
  /* The place-value chart: a 22 px prompt on a slimmer card edge; the three bölükler stand on one line in small
     cells (a tapped column keeps the touch size, so those bölükler wrap two to a row, the higher ones first);
     keypad 2 fits the card's width, Temizle and Kontrol et beside the entry (wide enough for a grouped nine-digit
     number, so they stay put while it is typed). */
  .question-card--topic:has(.tg-pv) { padding-inline: 16px; }
  .question-card--topic:has(.tg-pv) .question-copy h2 { font-size: 22px; line-height: 1.08; }
  .question-card--topic:has(.tg-pv) .question-copy h2 .tg-pv__frac { font-size: .66em; line-height: 1; }
  .tg-pv__work { gap: 4px; }
  .tg-pv__figure { gap: 3px; }
  .tg-pv__chart { gap: 6px; padding: 4px 6px 6px; border-radius: 14px; }
  .tg-pv[data-chart="natural"] .tg-pv__chart:not(:has(button)) { flex-wrap: nowrap; }
  .tg-pv__period { gap: 2px; padding: 2px; border-width: 2px; border-radius: 10px; }
  .tg-pv__period-word { display: none; }
  .tg-pv__period-name,
  .tg-pv__name { font-size: 13px; }
  .tg-pv__row { gap: 3px; }
  .tg-pv__col { gap: 2px; }
  .tg-pv__cell { width: 28px; height: 36px; border-width: 2px; border-radius: 8px; font-size: 22px; }
  .tg-pv[data-chart="decimal"] .tg-pv__cell { width: 44px; height: 42px; font-size: 24px; }
  button.tg-pv__cell { width: 46px; height: 48px; font-size: 24px; }
  .tg-pv__comma { font-size: 36px; }
  .tg-pv__sub { width: 34px; height: 19px; }
  .tg-pv__number { font-size: 26px; }
  .tg-pv__reading { font-size: 15px; line-height: 1.15; }
  .tg-pv__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .tg-pv__choice { min-height: 50px; font-size: 22px; }
  .tg-pv .tg-pad { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 6px; width: 100%; }
  .tg-pv .tg-pad__answer { grid-area: 1 / 1; justify-self: stretch; }
  .tg-pv .tg-pad__actions { grid-area: 1 / 2; gap: 6px; }
  .tg-pv .tg-pad__keys { grid-area: 2 / 1 / auto / span 2; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; width: 100%; }
  .tg-pv .tg-pad__entry { flex: 1 1 auto; min-width: 0; padding-inline: 6px; font-size: 18px; }
  .tg-pv .tg-pad__actions > * { padding-inline: 8px; font-size: 16px; white-space: nowrap; }

  /* The market studio: keypad 2 spans the card, Temizle and Kontrol et beside the entry, and the café's thirteen
     keys keep 46 px in seven columns on a slimmer card edge (the estimate round's placement board keeps its edge,
     room for the line's end label). */
  .question-card--topic:has(.tg-stall, .tg-cafe) { padding-inline: 10px; }
  .tg-stall__work,
  .tg-cafe__work { gap: 8px; }
  .tg-stall__scene { flex-basis: 100%; gap: 4px; }
  .tg-stall__goods { gap: 6px 10px; }
  .tg-stall__tag { padding: 2px 10px 3px 24px; }
  .tg-stall__tag::before { left: 7px; width: 10px; height: 10px; }
  .tg-stall__tag b { font-size: 19px; }
  .tg-stall__tag small { font-size: 12px; }
  .tg-stall__count { font-size: 22px; }
  .tg-stall__whole { font-size: 18px; }
  .tg-stall__whole::after { height: 7px; }
  .tg-stall__segs { min-height: 46px; border-radius: 10px; }
  .tg-stall__seg b { padding: 0 4px; border-radius: 6px; font-size: 15px; }
  .tg-stall__answer { width: 100%; gap: 6px; }
  .tg-stall__plan { gap: 5px; width: 100%; }
  .tg-stall__chip { min-height: calc(var(--touch) - 6px); padding: 3px 10px; font-size: 15px; }
  /* The café: a tight receipt; a fraction round puts the shading count beside it and the strip across the
     card under both, so the keypad's second row clears a duel's instruction bar. */
  .tg-cafe__receipt { gap: 0; min-width: 0; padding: 2px 10px 4px; border-top-width: 3px; border-bottom-width: 3px; }
  .tg-cafe__head { margin: 0; font-size: 14px; line-height: 1.2; }
  .tg-cafe__line { gap: 10px; font-size: 14px; line-height: 1.25; }
  .tg-cafe__line--due { margin-top: 2px; padding-top: 2px; }
  .tg-cafe[data-task="fraction"] .tg-cafe__work { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "receipt note" "strip strip" "pad pad"; align-items: center; gap: 6px 10px; }
  .tg-cafe[data-task="fraction"] .tg-cafe__receipt { grid-area: receipt; }
  .tg-cafe[data-task="fraction"] .tg-cafe__model { display: contents; }
  .tg-cafe[data-task="fraction"] .tg-pad { grid-area: pad; }
  .tg-cafe__strip { grid-area: strip; width: 100%; }
  .tg-cafe__part { min-height: calc(var(--touch) - 6px); }
  .tg-cafe__note { grid-area: note; font-size: 15px; line-height: 1.2; text-align: center; }
  .tg-cafe__note b { display: block; color: var(--world-ink); font-size: 30px; line-height: 1.1; }
  .tg-cafe__percent { gap: 4px; }
  .tg-cafe__cells { width: 120px; }
  .tg-cafe__percent[data-model="strip"] .tg-cafe__cells { width: 150px; }
  .tg-cafe__percent[data-model="strip"] .tg-cafe__cell { height: 30px; }
  .tg-cafe__keys { flex-direction: column; align-items: flex-start; }
  .tg-cafe__key { font-size: 14px; }
  .tg-cafe__columns { padding: 4px 10px; font-size: 22px; }
  .tg-stall .tg-pad,
  .tg-cafe .tg-pad { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 6px; width: 100%; }
  .tg-stall .tg-pad__answer,
  .tg-cafe .tg-pad__answer { grid-area: 1 / 1; justify-self: stretch; }
  .tg-stall .tg-pad__actions,
  .tg-cafe .tg-pad__actions { grid-area: 1 / 2; gap: 6px; }
  .tg-stall .tg-pad__keys,
  .tg-cafe .tg-pad__keys { grid-area: 2 / 1 / auto / span 2; grid-template-columns: repeat(var(--pad-columns, 6), minmax(0, 1fr)); gap: 4px; width: 100%; }
  .tg-cafe .tg-pad__keys { gap: 3px; }
  .tg-stall .tg-pad .tg-key,
  .tg-cafe .tg-pad .tg-key { min-width: 0; padding-inline: 2px; }
  .tg-stall .tg-pad__entry,
  .tg-cafe .tg-pad__entry { flex: 1 1 auto; min-width: 0; padding-inline: 6px; font-size: 22px; }
  .tg-stall .tg-pad__actions > *,
  .tg-cafe .tg-pad__actions > * { padding-inline: 8px; font-size: 15px; white-space: nowrap; }
  .tg-tw { --label: 64px; }
  .tg-tw__ruler { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; width: 100%; padding: 4px; }
  .tg-tw__width { min-width: 0; padding: 0; }
  .tg-tw__tower { --tower-h: clamp(96px, 20vh, 150px); }
  .tg-tw__slab b { right: calc(100% + 6px); font-size: 15px; }
  .tg-tw__floor--misfit { --cell: 9px; }
  .tg-tw__line { padding: 0 20px; }
  .tg-tw__track { --axis-y: 46px; height: 82px; }
  .tg-tw__hop,
  .tg-tw__gap { top: calc(var(--axis-y) - 24px); height: 24px; }
  .tg-tw-tick__label { font-size: 14px; }
  .tg-tw__departures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
  .tg-tw__departure { min-width: 0; min-height: calc(var(--touch) - 4px); font-size: 19px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-on) .steal-banner { animation: none; }
  body:not(.motion-on) .tf-particle { visibility: hidden; }
  body:not(.motion-on) #gameStage [data-world] *,
  body:not(.motion-on) #gameStage [data-world] *::before,
  body:not(.motion-on) #gameStage [data-world] *::after { transition: none !important; animation: none !important; }
}
body.reduced-motion .steal-banner { animation: none; }
body.reduced-motion .tf-particle { visibility: hidden; }
body.reduced-motion #gameStage [data-world] *,
body.reduced-motion #gameStage [data-world] *::before,
body.reduced-motion #gameStage [data-world] *::after { transition: none !important; animation: none !important; }