/*
 * Tam sayı laboratuvarı — chapter player (plan 94). Colours come only from tokens.css (the sign tokens:
 * positive blue, negative orange). No color-mix(), SVG filters, blur or container queries: classroom
 * boards run older browsers on integrated GPUs. Stage motion is driven by integer-lab-player.js
 * (attributes and transforms per frame); CSS animates only small chrome (poster pulse, caption fade)
 * and nothing under reduced motion.
 */
.il-dialog [hidden] { display: none !important; }
/* While the theatre is open the page behind it neither scrolls nor extends past the viewport. */
html.il-lock, html.il-lock body { height: 100%; overflow: hidden; }
.il-dialog { --il-gold: var(--gold-base); --il-on-gold: var(--inverse); }
.arena-dialog.il-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-columns: minmax(0, 1fr);
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
}
.il-dialog :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:where(.il-dialog) button { font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.il-dialog svg { display: block; }
.il-dialog .il-stroke { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Header: titles · chapter rail · Kesintisiz + Kapat ---------------------------------- */
.il-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: var(--glass-strong);
  border-bottom: 1px solid var(--glass-line);
}
.il-head::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: var(--brand-sheen); pointer-events: none; }
.il-titles { min-width: 0; }
.il-eyebrow { margin: 0; color: var(--brand-ink); font-size: 12px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.il-titles h2 { margin: 1px 0 0; overflow: hidden; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
.il-rail { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; }
.il-rail__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px 0 6px;
  color: var(--ink-2); background: transparent; border: 0; border-radius: 12px; font-size: 15px; font-weight: 750; cursor: pointer;
}
.il-rail__glyph {
  display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%;
  color: var(--brand-ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 17px; font-weight: 800; line-height: 1;
}
.il-rail__btn[aria-current="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-strong); }
.il-rail__btn[aria-current="true"] .il-rail__glyph { color: var(--on-brand); background: var(--brand); box-shadow: none; }
html:not([data-input="touch"]) .il-rail__btn:not([aria-current="true"]):hover { color: var(--ink); background: var(--brand-tint); }
.il-head__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.il-close, .il-hbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 14px 0 11px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 13px; box-shadow: var(--shadow-xs); font-size: 16px; font-weight: 750; white-space: nowrap; cursor: pointer;
}
.il-close svg, .il-hbtn svg { flex: none; width: 21px; height: 21px; fill: currentColor; }
/* Ses (lab-voice.js): the speaker with waves while the lab speaks, crossed out while it is silent. */
.il-voice[aria-pressed="false"] .il-voice__on, .il-voice[aria-pressed="true"] .il-voice__off { display: none; }
html:not([data-input="touch"]) .il-close:hover, html:not([data-input="touch"]) .il-hbtn:hover { background: var(--brand-tint); border-color: var(--brand); }
/* Anlatım | Sen dene */
.il-mode { display: flex; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 15px; }
.il-mode__btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px 0 9px;
  color: var(--ink-2); background: transparent; border: 0; border-radius: 12px; font-size: 16px; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.il-mode__btn svg { flex: none; width: 20px; height: 20px; fill: currentColor; }
.il-mode__btn[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-strong); }
.il-mode__btn[data-il="practice"][aria-pressed="true"] { color: var(--il-on-gold); background: var(--il-gold); box-shadow: var(--shadow-sm); }
html:not([data-input="touch"]) .il-mode__btn[aria-pressed="false"]:hover { color: var(--ink); background: var(--brand-tint); }
.il-switch {
  display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 46px; padding: 0 8px;
  color: var(--ink-2); background: transparent; border: 0; border-radius: 12px; font-size: 15px; font-weight: 750; cursor: pointer;
}
.il-switch__track { position: relative; flex: none; width: 42px; height: 26px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-strong); }
.il-switch__track::after { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-xs); transition: transform var(--dur) var(--ease-out); }
.il-switch[aria-pressed="true"] { color: var(--ink); }
.il-switch[aria-pressed="true"] .il-switch__track { background: var(--brand); box-shadow: none; }
.il-switch[aria-pressed="true"] .il-switch__track::after { transform: translateX(16px); }

/* ---- Stage ---------------------------------------------------------------------------------- */
.il-stage {
  position: relative;
  min-height: 0;
  margin: 12px 16px 0;
  overflow: hidden;
  background-color: var(--surface);
  background-image: radial-gradient(var(--bg-grid) 1.1px, transparent 1.4px);
  background-size: 24px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  outline: none;
  contain: layout paint;
}
.il-stage::before { content: ""; position: absolute; z-index: 3; top: 0; right: 0; left: 0; height: 4px; background: var(--brand-sheen); pointer-events: none; }
.il-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; }
.il-svg { position: absolute; top: 0; left: 0; overflow: visible; font-family: var(--font-sans); user-select: none; -webkit-user-select: none; }
.il-svg text { font-weight: 750; font-variant-numeric: tabular-nums; }
.il-panda, .il-ghost-panda {
  position: absolute; z-index: 1; top: 0; left: 0; width: 100px; height: 100px;
  transform-origin: 50% 95%; pointer-events: none; user-select: none; -webkit-user-select: none; will-change: transform;
}
.il-ghost-panda { z-index: 0; }

/* Equation chip, top centre of the stage. */
.il-equation {
  position: absolute; z-index: 2; top: 16px; left: 50%;
  display: block; box-sizing: border-box; width: max-content; max-width: calc(100% - 24px); min-height: calc(1.25em + 22px); padding: 9px 24px;
  color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 999px; box-shadow: var(--shadow-sm);
  font-size: clamp(20px, 2.3vw, 32px); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; text-align: center; white-space: nowrap;
  font-variant-numeric: tabular-nums; transform: translateX(-50%);
}
.il-equation.is-empty { opacity: 0; }
.il-tp { color: var(--sign-pos-ink); }
.il-tn { color: var(--sign-neg-ink); }
.il-flip { position: relative; display: inline-block; padding: 0 3px; border-radius: 8px; transform-origin: 50% 55%; }
.il-flip.is-from { color: transparent; }
.il-flip.is-from::after { content: attr(data-from); position: absolute; inset: 0; color: var(--ink); text-align: center; }
.il-flip.is-from.il-from-neg::after { color: var(--sign-neg-ink); }
.il-flip.is-from.il-from-pos::after { color: var(--sign-pos-ink); }
.il-flip.is-lit { background: var(--gold-tint); box-shadow: 0 0 0 2px var(--gold-base); }

/* Number line */
.il-band--neg { fill: var(--sign-neg-tint); }
.il-band--pos { fill: var(--sign-pos-tint); }
.il-axis__line { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.il-axis__end { fill: var(--ink); }
.il-axis__word { letter-spacing: .02em; }
.il-axis__word--neg { fill: var(--sign-neg-ink); }
.il-axis__word--pos { fill: var(--sign-pos-ink); }
.il-tick line { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.il-tick--zero line { stroke-width: 4; }
.il-axis.is-dense .il-tick--minor line { stroke-width: 1.8; stroke: var(--ink-3); }
.il-tick__hit { fill: transparent; stroke: none; }
.il-tick__label { fill: var(--ink-2); }
.il-tick__label.is-pos { fill: var(--sign-pos-ink); }
.il-tick__label.is-neg { fill: var(--sign-neg-ink); }
.il-tick__label.is-zero { fill: var(--ink); font-weight: 800; }
.il-zero-dot { fill: var(--gold-base); stroke: var(--surface); stroke-width: 2.5; }
.il-mirror { stroke: var(--gold-base); stroke-width: 3; stroke-dasharray: 3 9; stroke-linecap: round; }
.il-flight { fill: none; stroke: var(--gold-base); stroke-width: 4; stroke-dasharray: 2 10; stroke-linecap: round; }
.il-zero-flash { fill: none; stroke: var(--gold-base); stroke-width: 5; }
.il-chevron { fill: none; stroke: var(--brand-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.il-bracket__path { fill: none; stroke: var(--gold-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

.il-arrow__line { fill: none; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.il-arrow.is-arc .il-arrow__line { stroke-width: 4.5; }
.il-arrow.is-pos .il-arrow__line { stroke: var(--sign-pos-line); }
.il-arrow.is-neg .il-arrow__line { stroke: var(--sign-neg-line); }
.il-arrow.is-pos .il-arrow__head, .il-arrow.is-pos .il-arrow__dot { fill: var(--sign-pos-line); }
.il-arrow.is-neg .il-arrow__head, .il-arrow.is-neg .il-arrow__dot { fill: var(--sign-neg-line); }
.il-arrow.is-ghost .il-arrow__line { stroke-dasharray: 10 9; }

.il-pill rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.il-pill text { fill: var(--ink); font-weight: 800; }
.il-arrow.is-pos .il-pill rect { stroke: var(--sign-pos-line); }
.il-arrow.is-neg .il-pill rect { stroke: var(--sign-neg-line); }
.il-arrow.is-pos .il-pill text, .il-pill--mark.is-pos text { fill: var(--sign-pos-ink); }
.il-arrow.is-neg .il-pill text, .il-pill--mark.is-neg text { fill: var(--sign-neg-ink); }
.il-pill--mark.is-pos rect { stroke: var(--sign-pos-line); }
.il-pill--mark.is-neg rect { stroke: var(--sign-neg-line); }
.il-mark--end rect { fill: var(--il-gold); stroke: var(--il-gold); stroke-width: 2.5; }
.il-pill--mark.il-mark--end text { fill: var(--il-on-gold); }
.il-mark--point rect { fill: var(--sky-tint); }
.il-mark--ghost rect { stroke-dasharray: 6 5; }
.il-pill--bracket rect { fill: var(--gold-tint); stroke: var(--gold-base); }
.il-pill--bracket text { fill: var(--gold-ink); }

/* Counters (sayma pulları) */
.il-felt__rect { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
.il-tray__rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 9 7; }
.il-tray__label { fill: var(--ink-2); font-weight: 800; letter-spacing: .02em; }
.il-counter__edge { fill: var(--sign-pos-edge); }
.il-counter__body { fill: var(--sign-pos); }
.il-counter[data-sign="neg"] .il-counter__edge { fill: var(--sign-neg-edge); }
.il-counter[data-sign="neg"] .il-counter__body { fill: var(--sign-neg); }
.il-counter__shine { fill: var(--on-sign); fill-opacity: .2; }
.il-counter__glyph { fill: var(--on-sign); font-weight: 800; }
.il-counter__ring { fill: none; stroke: var(--sign-zero); stroke-width: 3; stroke-dasharray: 6 5; }
.il-counter__zero { fill: var(--sign-zero); font-weight: 800; transform-box: fill-box; transform-origin: center; }
.il-counter[data-state="taken"] .il-counter__body { stroke: var(--surface); stroke-width: 2.5; stroke-dasharray: 5 4; }
.il-halo rect { fill: none; stroke: var(--gold-base); stroke-width: 3; stroke-dasharray: 7 6; }
.il-halo text { fill: var(--gold-ink); font-weight: 800; }
.il-burst__ring { fill: none; stroke: var(--gold-base); stroke-width: 4; }
.il-burst__spark { stroke: var(--gold-base); stroke-width: 4; stroke-linecap: round; }

/* Thermometer */
.il-thermo__glass { fill: var(--surface); stroke: var(--ink-3); stroke-width: 3; }
.il-thermo__mercury { fill: var(--gold-base); }
.il-thermo__tick { stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.il-thermo__tick.is-zero { stroke: var(--ink); stroke-width: 3; }
.il-thermo__tick.is-lit { stroke: var(--gold-base); stroke-width: 5; }
.il-thermo__label { fill: var(--ink-2); }
.il-thermo__label.is-pos { fill: var(--sign-pos-ink); }
.il-thermo__label.is-neg { fill: var(--sign-neg-ink); }
.il-thermo__label.is-zero { fill: var(--ink); font-weight: 800; }
.il-thermo__zero { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 3; }
.il-pill--value rect { fill: var(--inverse); stroke: none; }
.il-pill--value text { fill: var(--on-inverse); }
.il-thermo__pointer { fill: var(--inverse); }
.il-pill--badge rect { fill: var(--il-gold); stroke: var(--il-gold); stroke-width: 2.5; }
.il-pill--badge text { fill: var(--il-on-gold); }
.il-thermo__badge-arrow { fill: var(--gold-base); }
.il-thermo__bracket { fill: none; stroke: var(--gold-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.il-thermo__lead { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 3 3; }
.il-tmark--end rect { fill: var(--il-gold); stroke: var(--il-gold); }
.il-tmark--end text { fill: var(--il-on-gold); }

/* Decorations */
.il-decor__wave { fill: none; stroke: var(--sky-base); stroke-width: 3.5; stroke-linecap: round; }
.il-decor__line { stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 3 4; }
.il-decor__head, .il-decor__body { fill: var(--brand); }
.il-decor__mask { fill: var(--sky-tint); stroke: var(--sky-base); stroke-width: 2; }
.il-decor__bubble { fill: none; stroke: var(--sky-base); stroke-width: 2; }
.il-decor__arrow { fill: none; stroke: var(--sign-neg-line); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.il-decor__glass { fill: var(--surface); stroke: var(--ink-3); stroke-width: 3; }
.il-decor__fill { fill: var(--gold-base); }

/* Giriş pictures (G2–G5): sea, lift, debt and credit, the upright scale laid flat */
.il-pic__sky { fill: var(--surface-2); }
.il-pic__water { fill: var(--sky-tint); stroke: var(--sky-base); stroke-width: 2; }
.il-pic__wave { fill: none; stroke: var(--sky-base); stroke-width: 4; stroke-linecap: round; }
.il-pic__ruler { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
.il-pic__tick { stroke: var(--ink-3); stroke-width: 2.5; stroke-linecap: round; }
.il-pic__tick.is-zero { stroke: var(--ink); stroke-width: 4; }
.il-pic__label { fill: var(--ink-2); font-weight: 750; }
.il-pic__label.is-pos, .il-pic__carnum.is-pos, .il-pic__word.is-pos { fill: var(--sign-pos-ink); }
.il-pic__label.is-neg, .il-pic__carnum.is-neg, .il-pic__word.is-neg { fill: var(--sign-neg-ink); }
.il-pic__label.is-zero { fill: var(--ink); font-weight: 800; }
.il-pic__depth { stroke: var(--sign-neg-line); stroke-width: 8; stroke-linecap: round; }
.il-pic__earth { fill: var(--sign-neg-tint); }
.il-pic__floor { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; }
.il-pic__floor.is-pos { stroke: var(--sign-pos-line); }
.il-pic__floor.is-neg { fill: var(--sign-neg-tint); stroke: var(--sign-neg-line); }
.il-pic__ground { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.il-pic__name { fill: var(--ink); font-weight: 800; }
.il-pic__shaft { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 2; }
.il-pic__car rect { fill: var(--surface); stroke: var(--brand); stroke-width: 4; }
.il-pic__carnum { fill: var(--ink); font-weight: 800; }
.il-pic__band.is-pos { fill: var(--sign-pos-tint); stroke: var(--sign-pos-line); stroke-width: 1.5; }
.il-pic__band.is-neg { fill: var(--sign-neg-tint); stroke: var(--sign-neg-line); stroke-width: 1.5; }
.il-pic__word { font-weight: 800; }
.il-pmark--zero rect { fill: var(--sky-tint); stroke: var(--sky-base); }
.il-pmark--end rect { fill: var(--il-gold); stroke: var(--il-gold); }
.il-pmark--end text { fill: var(--il-on-gold); }
.il-pmark--debt rect { fill: var(--sign-neg-tint); stroke: var(--sign-neg-line); stroke-width: 3; }
.il-pmark--debt text { fill: var(--sign-neg-ink); }
.il-pmark--credit rect { fill: var(--sign-pos-tint); stroke: var(--sign-pos-line); stroke-width: 3; }
.il-pmark--credit text { fill: var(--sign-pos-ink); }

/* Rule cards and sign tables (HTML layers on the stage) */
.il-rules, .il-table { position: absolute; z-index: 1; box-sizing: border-box; visibility: hidden; }
.il-rules { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.2vh, 22px); padding: 18px 12px 8px; }
.il-rules--cards { flex-flow: row wrap; align-content: center; gap: clamp(14px, 2vw, 28px); }
.il-rule {
  position: relative; display: grid; flex: 1 1 280px; gap: 8px; box-sizing: border-box; max-width: 500px; padding: 22px 24px 22px 30px;
  overflow: visible; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 22px; box-shadow: var(--shadow-md);
}
.il-rule::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 12px; width: 6px; border-radius: 3px; background: var(--brand); }
.il-rule__title { font-size: clamp(19px, 1.9vw, 27px); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.il-rule__text { color: var(--ink-2); font-size: clamp(17px, 1.65vw, 23px); font-weight: 650; line-height: 1.3; }
.il-rule.is-active { border-color: var(--gold-base); box-shadow: 0 0 0 4px var(--gold-tint), var(--shadow-lg); transform: translateY(-8px); }
.il-rule.is-active::before { background: var(--gold-base); }
.il-rule.is-dim { opacity: .5; }
.il-rules.is-compact .il-rule.is-dim { display: none; }
.il-rules--single .il-rule { flex-basis: auto; max-width: 760px; padding: 26px 34px 28px 40px; text-align: left; }
.il-rules--single .il-rule::before { left: 16px; width: 7px; }
.il-rules--single .il-rule__title { font-size: clamp(26px, 3vw, 42px); line-height: 1.15; }
.il-rule__kicker { color: var(--gold-ink); font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.il-tag {
  position: absolute; top: -15px; right: 18px; padding: 4px 12px;
  color: var(--il-on-gold); background: var(--il-gold); border: 2px solid var(--il-gold); border-radius: 999px; font-size: 14px; font-weight: 800; line-height: 1.2;
}
.il-signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); width: min(660px, 100%); }
.il-sign {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .3em; box-sizing: border-box; min-height: clamp(62px, 11vh, 92px); padding: 10px;
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: 20px; box-shadow: var(--shadow-sm);
  font-size: clamp(22px, 2.5vw, 34px); font-weight: 800; white-space: nowrap;
}
.il-sign.is-active { background: var(--gold-tint); border-color: var(--gold-base); box-shadow: 0 0 0 4px var(--gold-tint), var(--shadow-md); }
.il-disc { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; color: var(--on-sign); font-weight: 800; line-height: 1; }
.il-disc--pos { background: var(--sign-pos); }
.il-disc--neg { background: var(--sign-neg); }
.il-note { margin: 0; padding: 10px 20px; background: var(--surface-2); border: 2px dashed var(--line-strong); border-radius: 16px; font-size: clamp(17px, 1.8vw, 24px); font-weight: 750; }

/* Pattern table (Çarpma M3) */
.il-table { display: grid; place-items: center; }
.il-table__grid { position: relative; padding-right: clamp(80px, 9vw, 120px); }
.il-trow {
  display: grid; grid-template-columns: 6.6em 1.3em 2.6em; align-items: center; height: var(--il-row);
  padding: 0 .4em; border-radius: 12px; font-size: calc(var(--il-row) * .56); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.il-trow__expr { text-align: right; }
.il-trow__eq { color: var(--ink-3); text-align: center; }
.il-trow__res { text-align: right; }
.il-trow__res.is-pos { color: var(--sign-pos-ink); }
.il-trow__res.is-neg { color: var(--sign-neg-ink); }
.il-trow.is-zero { background: var(--surface-2); }
.il-trow.is-flip { background: var(--sign-pos-tint); }
.il-table__steps { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(80px, 9vw, 120px); pointer-events: none; }
.il-tstep { position: absolute; left: 6px; display: flex; align-items: center; gap: 6px; transform-origin: left center; }
.il-tstep__arc { width: 14px; height: calc(var(--il-row) * .72); border: 3px solid var(--gold-base); border-left: 0; border-radius: 0 12px 12px 0; }
.il-tstep__label { padding: 2px 10px; color: var(--il-on-gold); background: var(--il-gold); border: 2px solid var(--il-gold); border-radius: 999px; font-size: calc(var(--il-row) * .36); font-weight: 800; }

/* Poster (before the first play) and end card */
.il-poster { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 20px; }
.il-poster__card {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); box-sizing: border-box; max-width: min(900px, 100%); padding: clamp(18px, 3vw, 36px) clamp(20px, 3.4vw, 44px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg);
}
.il-poster__panda { flex: none; width: clamp(110px, 15vw, 200px); height: auto; }
.il-poster__copy { min-width: 0; }
.il-poster__eyebrow { margin: 0; color: var(--brand-ink); font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.il-poster__title { margin: 6px 0 8px; font-size: clamp(26px, 3.3vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.il-poster__instruction { margin: 0 0 20px; color: var(--ink-2); font-size: clamp(17px, 1.7vw, 22px); font-weight: 600; line-height: 1.35; }
.il-poster__play {
  display: inline-flex; align-items: center; gap: 14px; min-height: 66px; padding: 0 32px 0 10px;
  color: var(--on-primary); background: var(--brand-grad); border: 0; border-radius: 999px; box-shadow: var(--shadow-brand); font-size: 22px; font-weight: 800; cursor: pointer;
}
.il-poster__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--il-on-gold); background: var(--il-gold); animation: ilPulse 1.6s var(--ease-out) 3; }
.il-poster__icon svg { width: 26px; height: 26px; fill: currentColor; transform: translateX(2px); }
html:not([data-input="touch"]) .il-poster__play:hover { background: var(--primary-hover); }
/* A stage too short for the whole card (phones; the height depends on the header, caption band and transport) gets a
   leaner one, chosen by LabTheatre.fitPoster() after each layout: first without the panda, then only the title and a
   48 px play button (the caption band under the stage reads the scene). */
.il-poster[data-fit] .il-poster__panda { display: none; }
.il-poster[data-fit="compact"] { padding: 8px; }
.il-poster[data-fit="compact"] .il-poster__card { gap: 0; padding: 12px 16px; border-radius: 20px; }
.il-poster[data-fit="compact"] .il-poster__eyebrow, .il-poster[data-fit="compact"] .il-poster__instruction { display: none; }
.il-poster[data-fit="compact"] .il-poster__title { margin: 0 0 10px; font-size: 22px; }
.il-poster[data-fit="compact"] .il-poster__play { gap: 10px; min-height: 48px; padding: 0 22px 0 6px; font-size: 18px; }
.il-poster[data-fit="compact"] .il-poster__icon { width: 36px; height: 36px; }
.il-poster[data-fit="compact"] .il-poster__icon svg { width: 20px; height: 20px; }
@keyframes ilPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.il-endcard {
  position: absolute; z-index: 5; bottom: 16px; left: 50%; display: flex; align-items: center; gap: 16px; padding: 10px 12px 10px 22px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 22px; box-shadow: var(--shadow-lg); transform: translateX(-50%); white-space: nowrap;
}
.il-endcard__title { margin: 0; font-size: 20px; font-weight: 800; }
/* Shown in place of the caption once the chapter is over. */
.il-captionband.has-end { align-content: center; }
.il-captionband.has-end > :not(.il-endcard) { display: none; }
.il-captionband .il-endcard { position: static; transform: none; box-shadow: var(--shadow-md); animation: ilRise .35s var(--ease-out); }
.il-endcard__actions { display: flex; gap: 8px; }
.il-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 18px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; font-size: 17px; font-weight: 750; cursor: pointer;
}
.il-btn svg { width: 22px; height: 22px; fill: currentColor; }
.il-btn--primary { color: var(--on-primary); background: var(--brand-grad); border-color: transparent; box-shadow: var(--shadow-brand); }

/* ---- Caption band ------------------------------------------------------------------------- */
.il-captionband { display: grid; justify-items: center; gap: 2px; padding: 10px 24px 6px; text-align: center; }
.il-capmeta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; }
.il-scene-label { margin: 0; color: var(--brand-ink); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
/* "Kendi örneğin" chip with its reset button */
.il-mine {
  display: inline-flex; align-items: center; gap: 10px; padding: 2px 3px 2px 14px;
  color: var(--gold-ink); background: var(--gold-tint); border: 2px solid var(--gold-base); border-radius: 999px; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.il-mine__reset {
  min-height: 44px; padding: 0 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: 14px; font-weight: 800; cursor: pointer;
}
html:not([data-input="touch"]) .il-mine__reset:hover { background: var(--brand-tint); border-color: var(--brand); }
.il-caption {
  max-width: 1260px; min-height: 2.48em; margin: 0; color: var(--ink);
  font-size: clamp(22px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.012em; line-height: 1.24; text-wrap: balance;
}
.il-caption.is-new { animation: ilCaption .38s var(--ease-out); }
@keyframes ilCaption { from { opacity: .15; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Transport ------------------------------------------------------------------------------ */
.il-transport { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 6px 16px 12px; }
.il-buttons { display: flex; flex: none; align-items: center; gap: 8px; }
.il-tbtn {
  display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 0;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-xs); cursor: pointer;
}
.il-tbtn svg { width: 24px; height: 24px; fill: currentColor; }
html:not([data-input="touch"]) .il-tbtn:hover { background: var(--brand-tint); border-color: var(--brand); }
.il-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 176px; height: 56px; padding: 0 22px 0 16px;
  color: var(--on-primary); background: var(--brand-grad); border: 0; border-radius: 16px; box-shadow: var(--shadow-brand); font-size: 19px; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.il-play__icon svg { width: 26px; height: 26px; fill: currentColor; }
html:not([data-input="touch"]) .il-play:hover { background: var(--primary-hover); }
.il-dots { display: flex; flex: none; gap: 4px; margin: 0; padding: 0; list-style: none; }
.il-dot {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  color: var(--ink-2); background: var(--surface-2); border: 2px solid var(--line-strong); border-radius: 50%; font-size: 15px; font-weight: 800; cursor: pointer; font-variant-numeric: tabular-nums;
}
.il-dot.is-done { color: var(--brand-ink); background: var(--brand-tint-2); border-color: var(--brand); }
.il-dot[aria-current="step"] { color: var(--on-brand); background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.il-scrub { position: relative; display: flex; flex: 1 1 200px; align-items: center; min-width: 140px; height: 44px; }
.il-dialog .il-scrub__range {
  --il-p: 0%;
  width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.il-scrub__range::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--brand) 0, var(--brand) var(--il-p), var(--surface-3) var(--il-p), var(--surface-3) 100%); }
.il-scrub__range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -9px; background: var(--surface); border: 4px solid var(--brand); border-radius: 50%; box-shadow: var(--shadow-sm); -webkit-appearance: none; appearance: none; }
.il-scrub__range::-moz-range-track { height: 10px; border-radius: 999px; background: var(--surface-3); }
.il-scrub__range::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--brand); }
.il-scrub__range::-moz-range-thumb { width: 22px; height: 22px; background: var(--surface); border: 4px solid var(--brand); border-radius: 50%; }
.il-scrub__marks { position: absolute; top: 50%; right: 14px; left: 14px; height: 0; pointer-events: none; }
.il-scrub__marks span { position: absolute; top: -9px; width: 4px; height: 18px; margin-left: -2px; background: var(--surface); border-radius: 2px; box-shadow: 0 0 0 1.5px var(--line-strong); }
.il-time { flex: none; min-width: 86px; color: var(--ink-2); font-size: 15px; font-weight: 750; text-align: center; font-variant-numeric: tabular-nums; }
.il-speed { display: flex; flex: none; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.il-speed__btn {
  min-width: 56px; height: 44px; padding: 0 6px;
  color: var(--ink-2); background: transparent; border: 0; border-radius: 11px; font-size: 16px; font-weight: 800; cursor: pointer; font-variant-numeric: tabular-nums;
}
.il-speed__btn[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line-strong); }

/* ---- Custom-number panel ("Kendi sayıların") -------------------------------------------- */
.il-head { grid-row: 1; grid-column: 1; }
.il-stage { grid-row: 2; grid-column: 1; }
.il-captionband { grid-row: 3; grid-column: 1; }
.il-transport { grid-row: 4; grid-column: 1; }
.il-pband { grid-row: 3 / 5; grid-column: 1; }
.il-custom {
  position: relative; z-index: 20; grid-row: 2 / 5; grid-column: 1; display: grid; place-items: center; min-height: 0; padding: 12px 16px 16px;
  overflow: auto; background: var(--scrim); overscroll-behavior: contain;
}
.il-custom__card {
  display: grid; gap: 16px; box-sizing: border-box; width: min(760px, 100%); padding: 22px 26px 22px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 28px; box-shadow: var(--shadow-lg);
}
.il-custom__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
.il-custom__head h3 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.il-custom__preview {
  margin: 0; padding: 4px 18px; color: var(--ink); background: var(--surface-2); border: 2px solid var(--line-strong); border-radius: 999px;
  font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.il-custom__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.il-field { display: grid; gap: 8px; padding: 14px 16px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; }
.il-field__label { color: var(--ink); font-size: 17px; font-weight: 800; }
.il-field__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.il-step {
  min-width: 64px; height: 54px; padding: 0 10px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 15px;
  box-shadow: 0 3px 0 var(--line-strong); font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer;
}
.il-step:disabled { color: var(--ink-3); background: var(--surface-2); box-shadow: none; cursor: default; opacity: .6; }
html:not([data-input="touch"]) .il-step:not(:disabled):hover { background: var(--brand-tint); border-color: var(--brand); }
.il-step:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line-strong); }
.il-field__value { color: var(--ink); font-size: 40px; font-weight: 800; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.il-field[data-key] .il-field__value { letter-spacing: -.02em; }
.il-field__hint { margin: -2px 0 0; color: var(--ink-2); font-size: 14px; font-weight: 700; }
.il-dialog .il-field__range {
  --il-p: 50%;
  width: 100%; height: 40px; min-height: 0; margin: 0; padding: 0; background: transparent; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.il-field__range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.il-field__range::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -11px; background: var(--surface); border: 4px solid var(--brand); border-radius: 50%; box-shadow: var(--shadow-sm); -webkit-appearance: none; appearance: none; }
.il-field__range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--surface-3); }
.il-field__range::-moz-range-thumb { width: 24px; height: 24px; background: var(--surface); border: 4px solid var(--brand); border-radius: 50%; }
.il-custom__status { min-height: 1.35em; margin: -4px 0 0; color: var(--gold-ink); font-size: 16px; font-weight: 750; line-height: 1.35; }
.il-custom__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.il-custom__actions .il-btn--primary { min-width: 168px; justify-content: center; }

/* ---- Sen dene: practice band (replaces the caption band and the transport) ---------------- */
.il-pband { display: none; }
.il-dialog[data-mode="practice"] .il-captionband,
.il-dialog[data-mode="practice"] .il-transport { display: none; }
.il-dialog[data-mode="practice"] .il-pband { display: grid; gap: 6px; justify-items: center; padding: 10px 16px 12px; text-align: center; }
.il-pband__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; width: 100%; }
.il-pips { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.il-pip, .il-finish__dot {
  display: grid; place-items: center; box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%;
  color: var(--ink-3); background: var(--surface); border: 2px solid var(--line-strong); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.il-pip[data-current="true"] { color: var(--brand-ink); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.il-pip[data-done="true"] { color: var(--il-on-gold); background: var(--il-gold); border-color: var(--il-gold); }
.il-pip.is-pop { animation: ilPop .5s var(--ease-out); }
.il-pcount { color: var(--ink-2); font-size: 16px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.il-btn--quiet { min-height: 44px; padding: 0 14px; color: var(--ink-2); background: transparent; border-style: dashed; font-size: 15px; }
.il-btn:disabled { cursor: default; opacity: .45; box-shadow: none; }
.il-task {
  max-width: 1100px; margin: 0; color: var(--ink); font-size: clamp(20px, 2.1vw, 28px); font-weight: 750; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance;
}
.il-feedback {
  box-sizing: border-box; max-width: 1100px; min-height: 2.6em; margin: 0; padding: 4px 10px; color: var(--ink-2);
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 750; line-height: 1.3; text-wrap: balance;
}
.il-feedback:empty { visibility: hidden; }
.il-feedback[data-kind="hint"] { color: var(--gold-ink); }
.il-feedback[data-kind="win"] { color: var(--green-ink); }
.il-feedback[data-kind="answer"] { color: var(--ink); }
.il-feedback[data-kind="hint"], .il-feedback[data-kind="win"], .il-feedback[data-kind="answer"] { animation: ilRise .35s var(--ease-out); }
.il-pcontrols { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.il-pc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.il-nudge {
  min-width: 58px; height: 56px; padding: 0 8px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: 0 3px 0 var(--line-strong); font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer;
}
.il-nudge:disabled { opacity: .45; box-shadow: none; cursor: default; }
.il-check { min-width: 200px; min-height: 56px; justify-content: center; font-size: 19px; }
.il-next { min-height: 56px; }
.il-next svg { fill: none; }
.il-next:not(:disabled) { color: var(--on-primary); background: var(--brand-grad); border-color: transparent; box-shadow: var(--shadow-brand); }
.il-options__label { color: var(--ink-2); font-size: 15px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.il-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.il-option {
  min-width: 70px; height: 56px; padding: 0 12px; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 16px;
  box-shadow: 0 3px 0 var(--line-strong); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer;
}
.il-option.is-pos { color: var(--sign-pos-ink); }
.il-option.is-neg { color: var(--sign-neg-ink); }
.il-option[aria-pressed="true"] { color: var(--on-brand); background: var(--brand); border-color: var(--brand); box-shadow: 0 3px 0 var(--brand-ink); opacity: 1; }
.il-option:disabled { cursor: default; }
.il-option:disabled:not([aria-pressed="true"]):not(.is-right) { opacity: .55; box-shadow: none; }
.il-option.is-wrong { text-decoration: line-through; text-decoration-thickness: 3px; border-style: dashed; }
.il-option.is-right { opacity: 1; color: var(--il-on-gold); background: var(--il-gold); border-color: var(--il-gold); box-shadow: 0 3px 0 var(--gold-ink); }
html:not([data-input="touch"]) .il-option:not(:disabled):hover, html:not([data-input="touch"]) .il-nudge:not(:disabled):hover { background: var(--brand-tint); border-color: var(--brand); }
.il-zpbtn { min-height: 56px; }
.il-zpbtn__icon { display: inline-flex; }
.il-zpbtn__icon i {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--on-sign); font-size: 16px; font-style: normal; font-weight: 800; line-height: 1;
}
.il-zpbtn__icon i:first-child { background: var(--sign-pos); }
.il-zpbtn__icon i:last-child { margin-left: -6px; background: var(--sign-neg); box-shadow: 0 0 0 2px var(--surface); }

/* ---- Sen dene: stage layers ------------------------------------------------------------------ */
/* Board, question card and completion views hide the number line (display, since SVG children carry their
   own visibility attributes). */
.il-stage:is([data-pview="board"], [data-pview="choice"], [data-pview="finish"], [data-pview="lift"], [data-pview="cards"]) :is(.il-svg, .il-panda, .il-ghost-panda) { display: none !important; }
.il-stage:is([data-pview="board"], [data-pview="choice"], [data-pview="finish"], [data-pview="lift"], [data-pview="cards"]) .il-equation { visibility: hidden !important; }
.il-stage[data-pview="line"] { touch-action: none; }
.il-equation.is-masked { opacity: 0; }
/* The flag: a slider standing on the number line; its foot is at the transform origin. */
.il-flag, .il-guess {
  --il-flag-h: 92px;
  position: absolute; z-index: 0; top: 0; left: 0; box-sizing: border-box; width: 52px; height: var(--il-flag-h);
  margin: calc(-1 * var(--il-flag-h)) 0 0 -26px; touch-action: none; user-select: none; -webkit-user-select: none;
}
.il-flag { cursor: grab; outline: none; }
.il-flag:active { cursor: grabbing; }
.il-flag[aria-disabled="true"] { cursor: default; opacity: 1; filter: none; pointer-events: auto; }
.il-flag:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 12px; }
.il-flag__pole { position: absolute; top: 4px; bottom: 0; left: 50%; width: 5px; margin-left: -2.5px; background: var(--ink); border-radius: 3px; }
.il-flag__cloth {
  position: absolute; top: 0; left: calc(50% + 2px); display: flex; align-items: center; box-sizing: border-box; min-width: 62px; height: 42px; padding: 0 20px 0 10px;
  color: var(--il-on-gold); background: var(--il-gold); border-radius: 4px 0 0 4px; box-shadow: inset 0 -4px 0 var(--gold-ink);
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%); transform-origin: 0 50%;
  font-size: 22px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.il-flag__foot { position: absolute; bottom: -6px; left: 50%; width: 20px; height: 12px; margin-left: -10px; background: var(--ink); border-radius: 50%; }
.il-flag.is-shake { animation: ilShake .42s var(--ease-out); }
.il-flag.is-win .il-flag__cloth { animation: ilWave .9s var(--ease-out) 2; }
.il-guess { z-index: 0; pointer-events: none; opacity: .85; }
.il-guess__pole { position: absolute; top: 6px; bottom: 0; left: 50%; border-left: 3px dashed var(--ink-3); margin-left: -1.5px; }
.il-guess__tag {
  position: absolute; top: 0; left: 50%; padding: 2px 10px; color: var(--ink-2); background: var(--surface); border: 2px dashed var(--ink-3); border-radius: 999px;
  font-size: 14px; font-weight: 800; white-space: nowrap; transform: translateX(-50%);
}
.il-panda.is-cheer { animation: ilCheer .9s var(--ease-out); }
/* Giriş: the lift. Floors max…min from the top; the flag and the car stand on floor --i (0 = the top floor). */
.il-lift { position: absolute; z-index: 2; inset: 12px; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.il-lift__building { position: relative; width: min(100%, 480px); height: min(100%, calc(var(--n) * 62px)); cursor: pointer; }
.il-lift__floors { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.il-lift__floor {
  display: flex; align-items: center; gap: 10px; box-sizing: border-box; padding-left: 14px;
  background: var(--surface); border: 2px solid var(--line-strong); border-bottom-width: 0; font-variant-numeric: tabular-nums;
}
.il-lift__floor:first-child { border-radius: 14px 14px 0 0; }
.il-lift__floor:last-child { border-bottom-width: 2px; border-radius: 0 0 14px 14px; }
.il-lift__floor.is-pos { background: var(--sign-pos-tint); }
.il-lift__floor.is-neg { background: var(--sign-neg-tint); }
.il-lift__floor.is-zero { border-bottom: 5px solid var(--ink); }
.il-lift__num { min-width: 2.2em; font-size: clamp(18px, 2.4vh, 24px); font-weight: 800; }
.il-lift__floor.is-pos .il-lift__num { color: var(--sign-pos-ink); }
.il-lift__floor.is-neg .il-lift__num { color: var(--sign-neg-ink); }
.il-lift__name { color: var(--ink); font-size: clamp(14px, 1.9vh, 18px); font-weight: 800; }
.il-lift__floor.is-flag { box-shadow: inset 0 0 0 3px var(--gold-base); }
.il-lift__floor.is-guess { outline: 3px dashed var(--ink-3); outline-offset: -6px; }
.il-lift__shaft { position: absolute; top: 0; right: 12%; bottom: 0; width: 24%; background: var(--surface-3); border-inline: 3px solid var(--line-strong); }
.il-lift__car {
  position: absolute; top: calc(var(--i) * 100% / var(--n) + 3px); right: 4px; left: 4px; display: grid; place-items: center;
  height: calc(100% / var(--n) - 6px); box-sizing: border-box; background: var(--surface); border: 3px solid var(--brand); border-radius: 10px;
  transition: top var(--ms, 0ms) cubic-bezier(.45, 0, .25, 1);
}
.il-lift__panda { height: 88%; width: auto; }
.il-lift__flag {
  position: absolute; top: calc(var(--i) * 100% / var(--n)); left: 30%; box-sizing: border-box; width: 120px; height: calc(100% / var(--n));
  touch-action: none; cursor: grab; outline: none;
}
.il-lift__flag:active { cursor: grabbing; }
.il-lift__flag[aria-disabled="true"] { cursor: default; }
.il-lift__flag:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 10px; }
.il-lift__pole { position: absolute; top: 4px; bottom: 4px; left: 0; width: 5px; background: var(--ink); border-radius: 3px; }
.il-lift__cloth {
  position: absolute; top: 50%; left: 5px; display: flex; align-items: center; box-sizing: border-box; min-width: 64px; height: min(40px, calc(100% - 10px)); padding: 0 20px 0 10px;
  color: var(--il-on-gold); background: var(--il-gold); box-shadow: inset 0 -4px 0 var(--gold-ink); translate: 0 -50%;
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%); transform-origin: 0 50%;
  font-size: 22px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.il-lift__flag.is-shake { animation: ilShake .42s var(--ease-out); }
.il-lift__flag.is-win .il-lift__cloth { animation: ilWave .9s var(--ease-out) 2; }
/* Sıralama: four cards in a row; the answer lands them on a −10…+10 line (rows stack close neighbours). */
.il-cards {
  --card-h: 70px; --step: 86px; --axis: 44px; --lift: 22px;
  position: absolute; z-index: 2; inset: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
}
.il-cards__row { display: flex; justify-content: center; gap: clamp(10px, 2vw, 24px); }
.il-card {
  display: grid; place-items: center; box-sizing: border-box; min-width: clamp(76px, 9vw, 124px); height: clamp(84px, 14vh, 124px); padding: 0 12px;
  color: var(--ink); background: var(--surface); border: 3px solid var(--line-strong); border-radius: 20px; box-shadow: 0 4px 0 var(--line-strong);
  font-size: clamp(32px, 4.2vw, 54px); font-weight: 800; font-variant-numeric: tabular-nums; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
}
.il-card.is-pos { color: var(--sign-pos-ink); background: var(--sign-pos-tint); border-color: var(--sign-pos-line); box-shadow: 0 4px 0 var(--sign-pos-line); }
.il-card.is-neg { color: var(--sign-neg-ink); background: var(--sign-neg-tint); border-color: var(--sign-neg-line); box-shadow: 0 4px 0 var(--sign-neg-line); }
.il-card[aria-pressed="true"] { outline: 5px solid var(--gold-base); outline-offset: 3px; translate: 0 -6px; }
.il-card.is-drag { position: relative; z-index: 3; box-shadow: var(--shadow-lg); cursor: grabbing; }
.il-card:disabled { cursor: default; opacity: 1; }
.il-cards__row.is-shake { animation: ilShake .42s var(--ease-out); }
.il-cards__line { display: none; position: relative; width: min(100% - 40px, 1000px); height: calc(var(--axis) + var(--lift) + var(--rows, 1) * var(--step)); }
.il-cards.is-landed .il-cards__line { display: block; }
.il-cards.is-landed .il-cards__row { display: none; }
.il-cards__axis { position: absolute; right: 0; bottom: var(--axis); left: 0; height: 4px; background: var(--ink); border-radius: 2px; }
.il-cards__tick { position: absolute; top: -6px; width: 3px; height: 16px; margin-left: -1.5px; background: var(--ink-3); }
.il-cards__tick.is-major { top: -10px; height: 24px; background: var(--ink); }
.il-cards__num { position: absolute; top: 28px; left: 50%; color: var(--ink); font-size: 20px; font-weight: 800; translate: -50% 0; white-space: nowrap; }
.il-cards__tick.is-pos .il-cards__num { color: var(--sign-pos-ink); }
.il-cards__tick.is-neg .il-cards__num { color: var(--sign-neg-ink); }
.il-card--landed {
  position: absolute; bottom: calc(var(--axis) + var(--lift) + var(--row, 0) * var(--step)); min-width: 64px; height: var(--card-h); padding: 0 10px;
  font-size: 32px; border-radius: 16px; translate: -50% 0; cursor: default;
}
.il-card--landed::after {
  content: ""; position: absolute; top: 100%; left: 50%; height: calc(var(--lift) + var(--row, 0) * var(--step) + 2px); margin-top: 3px; border-left: 3px dashed currentColor;
}
/* Zero-pair board (Çıkarma) */
.il-zp {
  --cell: 58px;
  position: absolute; z-index: 2; inset: 14px 12px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.il-zp__board { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
.il-zp__cols { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 10px 8px; max-width: 100%; }
.il-zp__col { display: grid; grid-template-rows: var(--cell) var(--cell); gap: 6px; padding: 4px; border: 2.5px solid transparent; border-radius: 999px; }
.il-zp__col.is-pair { background: var(--gold-tint); border-color: var(--gold-base); border-style: dashed; }
.il-zp .il-counter {
  display: grid; place-items: center; box-sizing: border-box; width: var(--cell); height: var(--cell); padding: 0;
  color: var(--on-sign); background: var(--sign-pos); border: 0; border-radius: 50%; box-shadow: inset 0 -5px 0 var(--sign-pos-edge);
  font-family: inherit; font-size: calc(var(--cell) * .58); font-weight: 800; line-height: 1;
}
.il-zp .il-counter[data-sign="neg"] { background: var(--sign-neg); box-shadow: inset 0 -5px 0 var(--sign-neg-edge); }
.il-zp .il-counter:disabled { cursor: default; opacity: 1; }
.il-zp .il-counter:not(:disabled) { cursor: pointer; outline: 3px dashed var(--gold-base); outline-offset: 3px; }
.il-zp .il-counter:not(:disabled):focus-visible { outline: 3px solid var(--focus); }
html:not([data-input="touch"]) .il-zp .il-counter:not(:disabled):hover { transform: translateY(-3px); }
.il-zp .il-counter { position: relative; }
.il-zp .il-counter.is-fresh::after {
  content: ""; position: absolute; inset: -3px; border: 3px solid var(--gold-base); border-radius: 50%; opacity: 0; pointer-events: none;
  animation: ilRing .6s var(--ease-out);
}
.il-slot { box-sizing: border-box; width: var(--cell); height: var(--cell); border-radius: 50%; visibility: hidden; }
.il-slot.is-gone { visibility: visible; border: 2.5px dashed var(--line-strong); }
.il-zp__tray {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; box-sizing: border-box; max-width: 100%;
  min-height: calc(var(--cell) * .72 + 20px); padding: 8px 18px; background: var(--surface); border: 2px dashed var(--line-strong); border-radius: 20px;
}
.il-zp__traylabel { color: var(--ink-2); font-size: 15px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.il-zp__taken { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.il-zp__taken .il-counter { width: calc(var(--cell) * .72); height: calc(var(--cell) * .72); font-size: calc(var(--cell) * .42); outline: 2.5px dashed var(--surface); outline-offset: -6px; }
.il-zp__empty { color: var(--ink-3); font-size: 15px; font-weight: 700; }
.il-zp__total {
  margin: 0; padding: 6px 18px; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 999px; box-shadow: var(--shadow-sm);
  font-size: 20px; font-weight: 750; animation: ilRise .4s var(--ease-out);
}
.il-zp__total strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.il-zp__total.is-pos strong { color: var(--sign-pos-ink); }
.il-zp__total.is-neg strong { color: var(--sign-neg-ink); }
/* Quotient question card (Bölme, before the choice) */
.il-qcard { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; padding: 16px; }
.il-qcard__card {
  display: grid; justify-items: center; gap: 8px; box-sizing: border-box; max-width: 100%; padding: 22px clamp(20px, 4vw, 48px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg);
}
.il-qcard__panda { width: clamp(70px, 9vw, 110px); height: auto; }
.il-qcard__eq { margin: 0; font-size: clamp(36px, 5.6vw, 68px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.il-qcard__box {
  display: inline-grid; place-items: center; min-width: 1.2em; padding: 0 .12em; color: var(--il-on-gold); background: var(--il-gold); border-radius: .22em;
  box-shadow: inset 0 -.08em 0 var(--gold-ink);
}
.il-qcard__hint { margin: 0; color: var(--ink-2); font-size: clamp(16px, 1.6vw, 21px); font-weight: 700; }
.il-qcard__card--story { max-width: 820px; }
.il-qcard__story { margin: 0; font-size: clamp(20px, 2.2vw, 30px); font-weight: 750; line-height: 1.35; text-align: center; text-wrap: balance; }
.il-options--expr .il-option--expr { height: auto; min-height: 56px; padding: 6px 16px; font-size: clamp(18px, 1.8vw, 24px); }
/* Five rounds done */
.il-finish { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; text-align: center; }
.il-finish__panda { width: clamp(110px, 16vw, 190px); height: auto; }
.il-finish__title { margin: 0; font-size: clamp(30px, 4vw, 52px); font-weight: 800; letter-spacing: -.03em; }
.il-finish__pips { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.il-finish__pips .il-finish__dot { width: 40px; height: 40px; color: var(--il-on-gold); background: var(--il-gold); border-color: var(--il-gold); font-size: 18px; }
.il-finish.is-in .il-finish__dot { animation: ilPop .5s var(--ease-out) backwards; }
.il-finish.is-in .il-finish__dot:nth-child(2) { animation-delay: .1s; }
.il-finish.is-in .il-finish__dot:nth-child(3) { animation-delay: .2s; }
.il-finish.is-in .il-finish__dot:nth-child(4) { animation-delay: .3s; }
.il-finish.is-in .il-finish__dot:nth-child(5) { animation-delay: .4s; }
@keyframes ilPop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes ilRing { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes ilRise { from { opacity: .2; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes ilShake { 0%, 100% { translate: 0 0; } 20% { translate: -7px 0; } 45% { translate: 6px 0; } 70% { translate: -4px 0; } }
@keyframes ilWave { 0%, 100% { transform: scaleX(1); } 30% { transform: scaleX(.86) skewY(3deg); } 65% { transform: scaleX(1.06) skewY(-2deg); } }
@keyframes ilCheer { 0% { translate: 0 0; rotate: y 0deg; } 45% { translate: 0 -26px; } 100% { translate: 0 0; rotate: y 360deg; } }

/* ---- Themes and preferences ----------------------------------------------------------------- */
body.high-contrast .il-counter[data-sign="pos"] .il-counter__body { stroke: var(--ink); stroke-width: 3; }
body.high-contrast .il-counter[data-sign="neg"] .il-counter__body { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 6 4; }
body.high-contrast .il-stage { background-image: none; border-color: var(--ink); }
body.high-contrast .il-zp .il-counter { border: 3px solid var(--ink); }
body.high-contrast .il-zp .il-counter[data-sign="neg"] { border-style: dashed; }
body.high-contrast :is(.il-card, .il-lift__floor) { border-color: var(--ink); }
body.high-contrast .il-card.is-neg { border-style: dashed; }
body.high-contrast :is(.il-pic__floor, .il-pic__band) { stroke: var(--ink); }
body.reduced-motion .il-dialog *,
body.reduced-motion .il-dialog *::before,
body.reduced-motion .il-dialog *::after { animation: none !important; transition: none !important; }

/* ---- Narrower screens ----------------------------------------------------------------------- */
/* Smartboard (1366 px): the seven chapters and the header buttons share one row (room for one more button), so
   the rail drops its glyphs and Kendi sayıların keeps only its icon and accessible name. */
@media (max-width: 1540px) {
  .il-rail__glyph { display: none; }
  .il-rail__btn { padding: 0 10px; }
  .il-hbtn { padding: 0 12px; }
  .il-hbtn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1180px) {
  .il-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .il-rail { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .il-head__actions { grid-column: 2; grid-row: 1; }
  .il-transport { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .il-scrub { flex-basis: 100%; order: 5; }
}
@media (max-width: 760px) {
  .il-head { grid-template-columns: minmax(0, 1fr); padding: 6px 10px; gap: 6px 8px; }
  .il-titles { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .il-head__actions { grid-column: 1; grid-row: 1; justify-content: stretch; gap: 6px; }
  .il-rail { grid-row: 2; }
  .il-mode { flex: 1; }
  .il-mode__btn { flex: 1; justify-content: center; padding: 0 8px; font-size: 15px; }
  .il-hbtn, .il-close { justify-content: center; min-width: 46px; min-height: 46px; padding: 0 11px; }
  .il-hbtn__label, .il-close__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Seven chapters in two clean rows: four above, three below. */
  .il-rail { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); justify-self: stretch; padding: 3px; gap: 2px; }
  .il-rail__btn { grid-column: span 3; justify-content: center; min-width: 0; padding: 0 2px; font-size: 13px; }
  .il-rail__btn:nth-child(n+5) { grid-column: span 4; }
  .il-rail__glyph { display: none; }
  .il-switch { display: none; }
  .il-stage { margin: 8px 10px 0; border-radius: 18px; }
  .il-equation { top: 12px; min-height: calc(1.25em + 18px); padding: 7px 16px; font-size: clamp(16px, 4.4vw, 22px); white-space: normal; }
  .il-captionband { padding: 8px 12px 4px; }
  .il-scene-label { display: none; }
  .il-caption { min-height: 4.96em; font-size: 20px; }
  .il-transport {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "btns btns" "scrub speed" "dots dots";
    gap: 6px 10px; padding: 4px 10px 10px;
  }
  .il-buttons { grid-area: btns; justify-content: space-between; }
  .il-play { flex: 1; min-width: 0; height: 52px; }
  .il-tbtn { width: 50px; height: 50px; }
  .il-scrub { grid-area: scrub; min-width: 0; }
  .il-speed { grid-area: speed; }
  .il-speed__btn { min-width: 44px; padding: 0 4px; font-size: 15px; }
  .il-dots { grid-area: dots; justify-content: center; }
  .il-dot { font-size: 14px; }
  .il-time { display: none; }
  .il-poster { padding: 12px; }
  .il-poster__card { flex-direction: column; gap: 6px; padding: 18px; text-align: center; }
  .il-poster__panda { width: 96px; }
  .il-poster__instruction { margin-bottom: 14px; }
  .il-poster__play { min-height: 58px; font-size: 20px; }
  .il-captionband.has-end { padding-top: 6px; }
  .il-captionband .il-endcard { box-sizing: border-box; width: 100%; }
  .il-endcard { right: 10px; bottom: 10px; left: 10px; flex-direction: column; gap: 6px; padding: 8px 10px 10px; transform: none; white-space: normal; }
  .il-endcard__title { font-size: 16px; }
  .il-endcard__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .il-endcard .il-btn { justify-content: center; min-height: 46px; padding: 0 8px; font-size: 15px; }
  .il-endcard .il-btn svg { width: 18px; height: 18px; }
  .il-capmeta { width: 100%; }
  .il-mine { box-sizing: border-box; justify-content: space-between; width: 100%; max-width: 420px; gap: 6px; padding-left: 10px; font-size: 13px; white-space: nowrap; }
  .il-mine__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .il-mine__reset { flex: none; min-height: 44px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
  /* Sen dene on a phone: compact band; the dialog may scroll so the stage keeps a usable height. */
  .arena-dialog.il-dialog[open][data-mode="practice"] { overflow-y: auto; grid-template-rows: auto minmax(330px, 1fr) auto auto; }
  .il-dialog[data-mode="practice"] .il-pband { gap: 4px; padding: 6px 10px 10px; }
  .il-pip { width: 24px; height: 24px; font-size: 12px; }
  .il-pcount { font-size: 14px; }
  .il-btn--quiet { min-height: 44px; padding: 0 10px; font-size: 14px; }
  .il-task { font-size: 18px; }
  .il-feedback { min-height: 2.5em; font-size: 16px; }
  .il-pcontrols { gap: 8px; }
  .il-check { min-width: 0; flex: 1; }
  .il-pc--line { flex: 1 1 100%; flex-wrap: nowrap; }
  .il-options__label { display: none; }
  .il-options--six { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .il-option { min-width: 60px; height: 52px; font-size: 22px; }
  .il-next, .il-zpbtn { min-height: 52px; }
  .il-pc--options { flex: 1 1 100%; }
  .il-flag__cloth { min-width: 52px; height: 34px; padding: 0 16px 0 8px; font-size: 18px; }
  .il-qcard__card { padding: 16px; }
  .il-qcard__eq { font-size: clamp(30px, 10vw, 44px); }
  .il-zp { inset: 10px 8px 8px; gap: 8px; }
  .il-lift, .il-cards { inset: 8px; }
  .il-lift__flag { left: 26%; width: 96px; }
  .il-lift__cloth { min-width: 52px; padding: 0 16px 0 8px; font-size: 18px; }
  .il-cards { --card-h: 50px; --step: 58px; --axis: 36px; --lift: 16px; gap: 16px; }
  .il-card { min-width: 70px; height: 80px; font-size: 32px; }
  .il-card--landed { min-width: 44px; height: var(--card-h); padding: 0 6px; font-size: 22px; border-radius: 12px; }
  .il-cards__line { width: calc(100% - 24px); }
  .il-cards__num { top: 24px; font-size: 15px; }
  .il-options--expr { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .il-zp__col { gap: 4px; padding: 3px; }
  .il-zp__tray { padding: 6px 10px; }
  .il-custom { padding: 8px; }
  .il-custom__card { gap: 12px; padding: 16px 14px; border-radius: 22px; }
  .il-custom__head h3 { font-size: 20px; }
  .il-custom__preview { font-size: 22px; }
  .il-field { padding: 10px 12px 8px; }
  .il-field__value { font-size: 34px; }
  .il-custom__actions { justify-content: stretch; }
  .il-custom__actions .il-btn { flex: 1 1 auto; justify-content: center; }
  .il-rule { padding: 16px 16px 16px 26px; }
  .il-tag { font-size: 12px; }
}
/* Portrait tablets (768 px): Kendi sayıların keeps its icon (and accessible name) so the chapter title has room. */
@media (min-width: 761px) and (max-width: 900px) {
  .il-hbtn { padding: 0 12px; }
  .il-hbtn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Narrow phones (320 px): the Anlatım | Sen dene switch shrinks so Kesintisiz + Kapat stay on screen. */
@media (max-width: 760px) {
  .il-mode { min-width: 0; }
  .il-mode__btn { min-width: 0; }
}
@media (max-width: 359px) {
  .il-head { padding: 6px 8px; }
  .il-head__actions { gap: 4px; }
  .il-mode__btn { padding: 0 4px; font-size: 14px; }
  .il-hbtn, .il-close { min-width: 44px; padding: 0 9px; }
  .il-rail__btn { font-size: 12px; }
}
/* Short phones (e.g. 320x568): tighter header, caption band and transport so the stage gets more height. */
@media (max-width: 760px) and (max-height: 680px) {
  .il-head { padding-top: 4px; padding-bottom: 5px; row-gap: 4px; }
  .il-hbtn, .il-close { min-height: 44px; }
  .il-stage { margin-top: 6px; }
  .il-captionband { padding: 4px 10px 2px; }
  .il-caption { min-height: 4.96em; font-size: 16px; }
  .il-transport { gap: 4px 8px; padding: 2px 10px 6px; }
  .il-play { min-height: 0; height: 48px; }
  .il-tbtn { min-height: 0; width: 46px; height: 46px; }
  .il-speed__btn { min-height: 0; height: 44px; }
  .il-dot { min-height: 0; font-size: 13px; }
  .il-endcard { gap: 4px; padding: 6px 8px 8px; }
  .il-endcard__title { font-size: 15px; }
  .il-endcard .il-btn { min-height: 44px; padding: 0 6px; font-size: 14px; line-height: 1.15; }
  .il-endcard .il-btn svg { width: 16px; height: 16px; }
}