/*
 * Zeka Soruları — the classroom puzzle dialog (plan 107 step 2, zeka-sorulari.js). Colours come from tokens.css, so the
 * game follows the light, dark and high-contrast themes; the figures are inline SVG coloured by the --zk-* tokens below.
 * Like marbles.css: no color-mix(), filters, blur or container queries (classroom boards run older browsers on
 * integrated GPUs), and the CSS moves only transform and opacity.
 * Fit: at 1366x768 the whole question (prompt, figure, the 2x2 options, the explanation and Yeni soru) shows without
 * scrolling; below 720px the dialog itself scrolls as one column.
 */
#zekaDialog {
  --zk-fh: min(33vh, 250px);           /* the tallest a figure may be */
  --zk-wood: #e2b26b;
  --zk-wood-edge: #a8722b;
  --zk-head: #d9480f;
  --zk-figure-bg: var(--sky-tint);
  --zk-line: var(--ink);
  --zk-dot: var(--brand);
  --zk-cell: var(--surface);
  --zk-cell-dark: #c9d4e3;
  --zk-die: #ffffff;
  --zk-die-side: #d5deea;
  --zk-die-top: #eef3f9;
  --zk-pip: #1d2b44;
  --zk-red: #e03131;
  --zk-blue: #1c7ed6;
  --zk-ball: #7048e8;
  --zk-cube: var(--gold-base);
}
html[data-theme="dark"] #zekaDialog {
  --zk-wood: #d9a55a;
  --zk-wood-edge: #f1c98a;
  --zk-head: #ff7a45;
  --zk-cell-dark: #2c3e5c;
  --zk-die: #e9eef6;
  --zk-die-side: #9fb0c8;
  --zk-die-top: #cfd9e6;
  --zk-pip: #0b1628;
  --zk-red: #ff6b6b;
  --zk-blue: #4dabf7;
  --zk-ball: #9775fa;
}
body.high-contrast #zekaDialog {
  --zk-wood: #000000;
  --zk-wood-edge: #000000;
  --zk-head: #c00000;
  --zk-figure-bg: #ffffff;
  --zk-line: #000000;
  --zk-dot: #000000;
  --zk-cell: #ffffff;
  --zk-cell-dark: #7a7a7a;
  --zk-die: #ffffff;
  --zk-die-side: #bdbdbd;
  --zk-die-top: #e6e6e6;
  --zk-pip: #000000;
  --zk-red: #c00000;
  --zk-blue: #0040c0;
  --zk-ball: #000000;
  --zk-cube: #ffffff;
}

html.zk-lock, html.zk-lock body { height: 100%; overflow: hidden; }
#zekaDialog [hidden] { display: none !important; }
#zekaDialog {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--bg);
  border: 0;
  font-family: var(--font-sans);
}
#zekaDialog[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
/* Main and foot keep their rows when the filter bar is folded away (phones), so the foot never lands in the 1fr row. */
#zekaDialog > .zk-main { grid-row: 3; }
#zekaDialog > .zk-foot { grid-row: 4; }
#zekaDialog::backdrop { background: var(--scrim); }
#zekaDialog:focus { outline: none; }
#zekaDialog :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#zekaDialog button, #zekaDialog input { font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#zekaDialog h2, #zekaDialog h3, #zekaDialog p, #zekaDialog figure { margin: 0; }

/* ---- Buttons ------------------------------------------------------------------------------------------------
   The tools and the main actions are kit buttons (UIKit.iconButton; their keys are in the tips). .zk-btn is the one
   text button, Yazarak cevapla. */
.zk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 750;
  white-space: nowrap;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .zk-btn:hover:not(:disabled) { border-color: var(--brand); }
}
.zk-btn:active:not(:disabled) { transform: scale(.97); }
.zk-btn--ghost { background: transparent; border-color: var(--line); }
.zk-btn:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }

/* ---- Header ------------------------------------------------------------------------------------------------- */
.zk-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 5px 18px;
  background: var(--glass-strong);
  border-bottom: 1px solid var(--glass-line);
}
.zk-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-base), var(--coral-base), var(--sky-base), var(--green-base), var(--brand));
  pointer-events: none;
}
.zk-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zk-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--on-fill, #1d1400);
  font-size: 28px;
  font-weight: 900;
  background: var(--gold-fill, var(--gold-base));
  border: 2px solid var(--gold-line, var(--gold-ink));
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transform: rotate(-6deg);
}
.zk-titles { min-width: 0; }
.zk-eyebrow { color: var(--brand-ink); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.zk-titles h2 { overflow: hidden; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
#zekaDialog [data-zk=close] { justify-self: end; }

/* Segmented toggles (mode, difficulty, timer, target) */
.zk-seg { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; }
.zk-seg__btn {
  min-height: 44px;
  padding: 2px 14px;
  color: var(--ink-2);
  font-size: 17px;
  font-weight: 750;
  line-height: 1.1;
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .zk-seg__btn:hover { color: var(--ink); }
}
.zk-seg__btn[aria-pressed="true"] { color: var(--on-primary); background: var(--brand-grad); box-shadow: var(--shadow-sm); }
.zk-seg--mode .zk-seg__btn { min-width: 118px; min-height: 42px; font-size: 18px; }
.zk-seg--small { grid-auto-columns: auto; border-radius: 14px; }
.zk-seg--small .zk-seg__btn { min-height: 36px; padding: 2px 11px; font-size: 15px; border-radius: 10px; }

/* ---- Filter bar --------------------------------------------------------------------------------------------- */
.zk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 18px; border-bottom: 1px solid var(--line); }
.zk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 13px 0 10px;
  color: var(--ink-3);
  font-size: 15px;
  font-weight: 750;
  background: transparent;
  border: 2px dashed var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
}
.zk-chip::before { content: ""; width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; }
.zk-chip[aria-pressed="true"] { color: var(--ink); background: var(--surface); border-style: solid; border-color: var(--zk-chip, var(--brand)); }
.zk-chip[aria-pressed="true"]::before { background: var(--zk-chip, var(--brand)); border-color: var(--zk-chip, var(--brand)); }
.zk-chip--mantik { --zk-chip: var(--brand); }
.zk-chip--sayilar { --zk-chip: var(--sky-base); }
.zk-chip--sekiller { --zk-chip: var(--green-base); }
.zk-chip--sayma { --zk-chip: var(--gold-base); }
.zk-chip--hesap { --zk-chip: var(--coral-base); }
.zk-chip--strateji { --zk-chip: var(--apricot-base, var(--coral-base)); }
.zk-bar__end { margin-left: auto; }

/* ---- Main and the question card ----------------------------------------------------------------------------- */
/* overflow:auto is only a safety net for unusual windows: at the board's 1366x768 nothing ever scrolls. */
.zk-main { display: grid; place-items: center; min-height: 0; padding: 10px 18px; overflow: auto; }
/* The card fills the stage, so the options sit at the same place for every question; the question area in between
   takes what is left and the figure grows into it (up to --zk-fh), shrinking a little when the explanation appears. */
.zk-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 1300px;
  height: 100%;
  padding: 12px 20px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-sm);
}
.zk-card--in .zk-q, .zk-card--in .zk-options { animation: zkIn .32s ease-out both; }
.zk-card--in .zk-options { animation-delay: .06s; }
@keyframes zkIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.zk-meta { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; min-height: 40px; }
.zk-meta__start, .zk-meta__end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.zk-qno { color: var(--brand-ink); font-size: 18px; font-weight: 850; letter-spacing: .02em; }
.zk-tag {
  padding: 3px 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  background: var(--surface-2);
  border-left: 5px solid var(--zk-chip, var(--brand));
  border-radius: 8px;
}
.zk-tag[data-category="mantik"] { --zk-chip: var(--brand); }
.zk-tag[data-category="sayilar"] { --zk-chip: var(--sky-base); }
.zk-tag[data-category="sekiller"] { --zk-chip: var(--green-base); }
.zk-tag[data-category="sayma"] { --zk-chip: var(--gold-base); }
.zk-tag[data-category="hesap"] { --zk-chip: var(--coral-base); }
.zk-tag[data-category="strateji"] { --zk-chip: var(--apricot-base, var(--coral-base)); }
.zk-level { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-2); font-size: 15px; font-weight: 750; }
.zk-level i { width: 10px; height: 10px; background: var(--line); border-radius: 50%; }
.zk-level span { margin-left: 4px; }
.zk-level[data-level="1"] i:nth-child(-n+1),
.zk-level[data-level="2"] i:nth-child(-n+2),
.zk-level[data-level="3"] i:nth-child(-n+3) { background: var(--gold-base); }
.zk-level[data-level="3"] i { background: var(--coral-base); }
.zk-left { color: var(--ink-3); font-size: 14px; font-weight: 650; }

.zk-timer {
  min-width: 92px;
  padding: 1px 14px;
  color: var(--ink);
  font-size: 26px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--surface-2);
  border: 2px solid var(--line-strong);
  border-radius: 12px;
}
.zk-timer.is-low { color: var(--red-ink); background: var(--red-tint); border-color: var(--red-base); animation: zkPulse 1s ease-in-out infinite; }
@keyframes zkPulse { 50% { transform: scale(1.06); } }

/* İki takım scoreboard: the player tokens give the two teams their identity colours. */
.zk-teams { display: flex; align-items: center; gap: 10px; }
.zk-team {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 2px 14px;
  color: var(--player-a-ink);
  font-size: 17px;
  font-weight: 800;
  background: var(--player-a-tint);
  border: 2px solid var(--player-a-line);
  border-radius: 14px;
  transition: transform .2s ease;
}
.zk-team--b { padding: 2px 14px 2px 4px; color: var(--player-b-ink); background: var(--player-b-tint); border-color: var(--player-b-line); }
.zk-team strong {
  min-width: 44px;
  padding: 0 8px;
  color: var(--on-player-solid);
  font-size: 26px;
  line-height: 32px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: var(--player-a-solid);
  border-radius: 10px;
}
.zk-team--b strong { background: var(--player-b-solid); }
.zk-team strong.is-bumped { animation: zkPop .5s ease-out; }
.zk-team.is-turn { box-shadow: 0 0 0 3px var(--player-a-solid); transform: scale(1.04); }
.zk-team--b.is-turn { box-shadow: 0 0 0 3px var(--player-b-solid); }
.zk-turn {
  padding: 6px 14px;
  color: var(--on-player-solid);
  font-size: 16px;
  font-weight: 850;
  white-space: nowrap;
  background: var(--player-a-solid);
  border-radius: 999px;
}
.zk-turn[data-team="b"] { background: var(--player-b-solid); }
.zk-turn[data-phase="steal"] { color: var(--on-fill, #1d1400); background: var(--gold-fill, var(--gold-base)); box-shadow: 0 0 0 3px var(--gold-line, var(--gold-ink)); animation: zkPulse 1.1s ease-in-out 2; }
#zekaDialog[data-phase="over"] .zk-turn { color: var(--ink); background: var(--surface-2); }
.zk-float {
  position: absolute;
  top: -6px;
  right: 8px;
  color: var(--green-ink);
  font-size: 26px;
  font-weight: 900;
  pointer-events: none;
  animation: zkFloat 1.1s ease-out forwards;
}
@keyframes zkFloat { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-34px); } }

.zk-solo { display: flex; gap: 8px; }
.zk-solo__item { padding: 2px 14px; line-height: 30px; color: var(--ink-2); font-size: 17px; font-weight: 750; background: var(--surface-2); border: 2px solid var(--line); border-radius: 12px; }
.zk-solo__item b { margin-left: 4px; color: var(--ink); font-size: 23px; font-weight: 850; font-variant-numeric: tabular-nums; }
.zk-solo__item--streak { color: var(--gold-ink); background: var(--gold-tint); border-color: var(--gold-base); }

/* The question: text on the left, the figure on the right */
.zk-q { display: flex; flex: 1 1 0; align-items: center; gap: 24px; min-height: 0; }
.zk-q__text { display: flex; flex: 1 1 0; flex-direction: column; gap: 10px; min-width: 0; }
.zk-prompt { font-size: clamp(30px, 2.4vw, 36px); font-weight: 750; letter-spacing: -.01em; line-height: 1.22; overflow-wrap: break-word; }
.zk-prompt.is-long { font-size: 30px; line-height: 1.2; }
.zk-hint {
  align-self: flex-start;
  padding: 6px 14px;
  color: var(--gold-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  background: var(--gold-tint);
  border: 2px dashed var(--gold-base);
  border-radius: 12px;
  animation: zkIn .25s ease-out both;
}
.zk-hint strong { margin-right: 4px; font-weight: 900; }
.zk-hint strong::after { content: ":"; }
.zk-figure {
  flex: none;
  width: auto;
  max-width: 46%;
  height: 100%;
  aspect-ratio: var(--zk-ratio, 1);
  max-height: var(--zk-fh);
  padding: 8px;
  background: var(--zk-figure-bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-sizing: border-box;
}
.zk-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Options: a 2x2 grid of large buttons */
.zk-options { display: grid; flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.zk-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 62px;
  padding: 6px 54px 6px 8px;
  color: var(--ink);
  font-size: 25px;
  font-weight: 750;
  line-height: 1.15;
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background-color .12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .zk-opt:hover:not(:disabled) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
}
.zk-opt:active:not(:disabled) { transform: scale(.98); }
.zk-opt__key {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--on-primary);
  font-size: 22px;
  font-weight: 900;
  background: var(--zk-key, var(--brand));
  border-radius: 13px;
}
/* The *-ink tokens carry --on-primary at 4.5:1+ in light (white) and dark (navy); the *-base fills do not (sky 2.9:1, coral 3.6:1, dark brand 3.5:1). */
.zk-opt--a { --zk-key: var(--sky-ink); }
.zk-opt--b { --zk-key: var(--coral-ink); }
.zk-opt--c { --zk-key: var(--green-ink); }
.zk-opt--d { --zk-key: var(--brand-ink); }
.zk-opt__text { min-width: 0; overflow-wrap: break-word; }
.zk-opt:disabled { cursor: default; opacity: .55; box-shadow: none; }
.zk-opt::after {
  position: absolute;
  top: 50%;
  right: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 20px;
  font-weight: 900;
  border-radius: 50%;
  transform: translateY(-50%);
}
.zk-opt[data-state="wrong"] { color: var(--red-ink); background: var(--red-tint); border-color: var(--red-base); opacity: 1; }
.zk-opt[data-state="wrong"]::after { content: "✗"; color: #fff; background: var(--red-fill); }
.zk-opt[data-correct="true"] { color: var(--green-ink); background: var(--green-tint); border-color: var(--green-base); box-shadow: 0 0 0 3px var(--green-base); opacity: 1; }
.zk-opt[data-correct="true"]::after { content: "✓"; color: #fff; background: var(--green-fill); }
.zk-opt[data-state="wrong"] .zk-opt__key { color: #fff; background: var(--red-fill); }
.zk-opt[data-correct="true"] .zk-opt__key { color: #fff; background: var(--green-fill); }
/* Only the parts inside a button animate: the buttons themselves never move. */
.zk-opt[data-correct="true"]::after, .zk-opt[data-state="wrong"]::after { animation: zkMark .35s cubic-bezier(.3, 1.6, .5, 1) both; }
.zk-opt[data-state="correct"] .zk-opt__key { animation: zkPop .45s ease-out; }
.zk-opt[data-state="wrong"] .zk-opt__key { animation: zkWobble .4s ease-in-out; }
@keyframes zkMark { from { opacity: 0; transform: translateY(-50%) scale(.3); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes zkPop { 40% { transform: scale(1.25) rotate(-8deg); } }
@keyframes zkWobble { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* The explanation after an answer */
.zk-explain {
  padding: 10px 16px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.38;
  background: var(--surface-2);
  border-left: 6px solid var(--sky-base);
  border-radius: 12px;
  flex: none;
  animation: zkIn .3s ease-out both;
}
.zk-explain[data-tone="right"] { background: var(--green-tint); border-left-color: var(--green-base); }
.zk-explain[data-tone="wrong"] { background: var(--red-tint); border-left-color: var(--red-base); }
.zk-explain__lead { margin-right: 4px; font-size: 22px; font-weight: 900; }
.zk-explain[data-tone="right"] .zk-explain__lead { color: var(--green-ink); }
.zk-explain[data-tone="wrong"] .zk-explain__lead { color: var(--red-ink); }
.zk-explain__answer { font-weight: 850; }

/* ---- Footer ------------------------------------------------------------------------------------------------- */
.zk-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 7px 18px;
  background: var(--glass-strong);
  border-top: 1px solid var(--glass-line);
}
.zk-foot__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
#zekaDialog [data-zk=next] { --uk-size: 56px; }
#zekaDialog [data-zk=next].is-ready { animation: zkNudge 1.6s ease-in-out .6s 2; }
@keyframes zkNudge { 50% { transform: translateX(6px); } }
.zk-typed { display: flex; align-items: center; gap: 8px; }
.zk-typed__input {
  width: 170px;
  min-height: 48px;
  padding: 0 14px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: 12px;
}
.zk-typed__input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--focus); }
.zk-typed[data-state="correct"] .zk-typed__input { border-color: var(--green-base); background: var(--green-tint); }
.zk-typed[data-state="wrong"] .zk-typed__input { border-color: var(--red-base); background: var(--red-tint); }

/* ---- Result (İki takım) and the empty state ----------------------------------------------------------------- */
.zk-result, .zk-empty {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 14px 28px;
  width: min(900px, 100%);
  padding: 26px 32px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-md, var(--shadow-sm));
}
.zk-result { grid-template-columns: auto minmax(0, 1fr); text-align: left; animation: zkIn .4s ease-out both; }
.zk-result__panda .mw-mascot { width: clamp(130px, 26vh, 200px); }
.zk-result__body { display: grid; justify-items: start; gap: 12px; }
.zk-result__kicker { color: var(--brand-ink); font-size: 18px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.zk-result h3 { font-size: clamp(44px, 8vh, 72px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
.zk-result__scores { display: flex; gap: 12px; }
.zk-result__scores .zk-team { font-size: 20px; }
.zk-result__scores .zk-team strong { min-width: 56px; font-size: 32px; line-height: 48px; }
.zk-result__scores .zk-team.is-winner { box-shadow: 0 0 0 4px var(--gold-base); }
.zk-empty__badge {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  color: #fff;
  font-size: 40px;
  font-weight: 900;
  background: var(--green-fill);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.zk-empty h3 { font-size: 32px; font-weight: 850; letter-spacing: -.02em; }
.zk-empty p { max-width: 640px; color: var(--ink-2); font-size: 20px; line-height: 1.4; }
#zekaDialog[data-phase="none"] .zk-empty__badge { color: var(--on-fill); background: var(--gold-fill); }
#zekaDialog[data-phase="none"] .zk-empty__badge::before { content: "?"; }
#zekaDialog[data-phase="none"] .zk-empty__badge { font-size: 0; }
#zekaDialog[data-phase="none"] .zk-empty__badge::before { font-size: 40px; }

/* ---- Figures ------------------------------------------------------------------------------------------------ */
.zk-svg text { font-family: var(--font-sans); font-weight: 800; text-anchor: middle; }
.zk-ln { stroke: var(--zk-line); stroke-width: 3.5; stroke-linecap: round; }
.zk-dot { fill: var(--zk-dot); stroke: var(--zk-figure-bg); stroke-width: 2; }
.zk-cell { fill: var(--zk-cell); stroke: var(--zk-line); stroke-width: 2.5; }
.zk-cell--dark { fill: var(--zk-cell-dark); }
.zk-cell--blocked { fill: var(--red-tint); }
.zk-cross { stroke: var(--zk-red); stroke-width: 4; stroke-linecap: round; }
.zk-cell--start { fill: var(--green-tint); }
.zk-cell--end { fill: var(--gold-tint); }
.zk-cell-label { fill: var(--green-ink); font-size: 24px; }
.zk-cell-label--end { fill: var(--gold-ink); }
.zk-corner { stroke: var(--zk-figure-bg); stroke-width: 3; }
.zk-corner--start { fill: var(--green-base); }
.zk-corner--end { fill: var(--coral-base); }
.zk-stick { stroke: var(--zk-wood); stroke-width: 8; stroke-linecap: round; }
.zk-head { fill: var(--zk-head); }
.zk-table { stroke: var(--zk-line); stroke-width: 3; stroke-linecap: round; }
.zk-die { stroke: var(--zk-line); stroke-width: 2.5; stroke-linejoin: round; }
.zk-die--front { fill: var(--zk-die); }
.zk-die--side { fill: var(--zk-die-side); }
.zk-die--top { fill: var(--zk-die-top); }
.zk-pip { fill: var(--zk-pip); }
.zk-face { fill: var(--surface); stroke: var(--zk-line); stroke-width: 5; }
.zk-tick { stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.zk-tick--hour { stroke: var(--zk-line); stroke-width: 4; }
.zk-num { fill: var(--zk-line); font-size: 20px; }
.zk-hand { stroke-linecap: round; }
.zk-hand--hour { stroke: var(--zk-line); stroke-width: 8; }
.zk-hand--minute { stroke: var(--zk-head); stroke-width: 5; }
.zk-pin { fill: var(--zk-line); }
.zk-stand { fill: var(--zk-line); }
.zk-post { stroke: var(--zk-line); stroke-width: 5; stroke-linecap: round; }
.zk-beam { stroke: var(--zk-line); stroke-width: 6; stroke-linecap: round; }
.zk-string { stroke: var(--ink-3); stroke-width: 1.8; }
.zk-pan { fill: var(--surface-3, var(--surface-2)); stroke: var(--zk-line); stroke-width: 2.5; }
.zk-ball { fill: var(--zk-ball); stroke: var(--zk-line); stroke-width: 1.5; }
.zk-cube { fill: var(--zk-cube); stroke: var(--zk-line); stroke-width: 2; }
.zk-block { stroke: var(--zk-line); stroke-width: 2; }
.zk-block--red { fill: var(--zk-red); }
.zk-block--blue { fill: var(--zk-blue); }
.zk-weight { fill: var(--surface-2); stroke: var(--zk-line); stroke-width: 2; }
.zk-weight-label { fill: var(--zk-line); font-size: 13px; }
.zk-scale-no { fill: var(--ink-2); font-size: 16px; }
body.high-contrast .zk-figure { border: 2px solid #000; }
body.high-contrast .zk-opt { --zk-key: #000; border-color: #000; }
body.high-contrast .zk-chip[aria-pressed="false"] { color: #000; border-color: #000; }

/* ---- Smaller screens ---------------------------------------------------------------------------------------- */
@media (max-height: 700px) and (min-width: 721px) {
  #zekaDialog { --zk-fh: min(28vh, 200px); }
  .zk-prompt, .zk-prompt.is-long { font-size: 26px; }
  .zk-opt { min-height: 54px; font-size: 22px; }
}
@media (max-width: 1100px) and (min-width: 721px) {
  .zk-head { grid-template-columns: minmax(0, 1fr) auto auto; }
  .zk-bar__end { margin-left: 0; }
}
@media (max-width: 720px) {
  #zekaDialog { --zk-fh: 210px; }
  .zk-head { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 8px 12px; }
  .zk-head .zk-seg--mode { grid-column: 1 / -1; grid-row: 2; }
  .zk-seg--mode .zk-seg__btn { min-width: 0; padding: 2px 6px; font-size: 16px; }
  .zk-titles h2 { font-size: 20px; }
  .zk-logo { width: 38px; height: 38px; font-size: 24px; }
  .zk-bar { padding: 10px 12px; }
  .zk-bar__end { margin-left: 0; }
  .zk-seg--small .zk-seg__btn { min-height: 44px; padding: 2px 8px; }
  .zk-chip { min-height: 44px; }
  /* The board's rows stay (head, bar, main, foot), so the foot never covers an answer. The card fills the main row and
     the figure takes the height the prompt and the answers leave (at least 90 px); only a very long question scrolls,
     inside the main row. */
  .zk-main { place-items: stretch; padding: 8px 10px; }
  .zk-card { gap: 8px; padding: 10px 12px 12px; border-radius: 20px; }
  .zk-q { flex-direction: column; align-items: stretch; gap: 8px; }
  .zk-prompt { font-size: 21px; line-height: 1.3; }
  .zk-prompt.is-long { font-size: 19px; line-height: 1.28; }
  .zk-card { height: auto; }
  .zk-q { flex: 1 1 auto; }
  .zk-q__text { flex: none; }
  /* The basis, not min-height, holds the floor: through aspect-ratio a min-height becomes a min-width that beats
     max-width, and a very wide figure (six points in a row) ran off the card. */
  .zk-figure { flex: 1 0 min(90px, var(--zk-fh)); align-self: center; width: auto; max-width: 100%; height: auto; min-height: 0; }
  .zk-options { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .zk-opt { min-height: 50px; padding-right: 48px; font-size: 20px; }
  .zk-opt__key { width: 38px; height: 38px; font-size: 19px; }
  .zk-explain { font-size: 17px; }
  .zk-hint { font-size: 17px; }
  .zk-teams { flex-wrap: wrap; }
  .zk-team strong { font-size: 22px; line-height: 32px; }
  .zk-foot { flex-wrap: wrap; padding: 8px 12px; background: var(--surface); box-shadow: var(--shadow-sm); }
  .zk-foot__tools { flex: 1 1 100%; }
  .zk-foot__tools .zk-btn { flex: 1 1 auto; padding: 0 12px; font-size: 16px; }
  .zk-foot__tools .uk-btn--labelled { flex: 1 1 auto; }
  .zk-typed { flex: 1 1 100%; }
  .zk-typed__input { flex: 1 1 auto; width: auto; min-width: 0; }
  #zekaDialog [data-zk=next] { --uk-size: 52px; flex: 1 1 100%; }
  .zk-result { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 20px 16px; text-align: center; }
  .zk-result__body { justify-items: center; }
  .zk-result__panda .mw-mascot { width: 120px; }
  .zk-empty { padding: 20px 16px; }
  .zk-empty h3 { font-size: 24px; }
  .zk-empty p { font-size: 17px; }
}

/* A phone, upright or sideways: the filter bar is folded away behind Ayarlar (it would push the answers off the screen). */
#zekaDialog [data-zk=settings] { display: none; }
@media (max-width: 720px), (max-height: 500px) {
  #zekaDialog [data-zk=settings] { display: inline-flex; }
  #zekaDialog [data-zk=settings][aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
  #zekaDialog[data-settings="closed"] .zk-bar { display: none; }
}
/* Sideways phone (about 844x390): the question number and scores take one line across the card; below it the question
   gets the wider column and the answers sit one per row beside it, so the longest answer ("Hangisinden çeksen olur")
   stays on one line. The scoreboard names the teams by letter (the turn badge still says "Takım A cevaplıyor"). With the prompt at 20 px (18 px past 200 characters) and 44 px buttons, the
   tallest question (346 characters, or a balance figure beside 146) fits without scrolling in every mode
   (zeka-sorulari.spec.js). */
@media (max-height: 500px) and (min-width: 721px) {
  #zekaDialog { --zk-fh: 90px; }
  .zk-head { padding: 3px 18px; }
  .zk-main { padding: 4px 14px; }
  .zk-card { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px 16px; padding: 6px 12px 8px; }
  .zk-meta, .zk-explain { grid-column: 1 / -1; }
  .zk-meta { gap: 6px 10px; min-height: 0; }
  .zk-q { grid-area: 2 / 1; }
  .zk-options { grid-area: 2 / 2; grid-template-columns: minmax(0, 1fr); align-self: center; gap: 6px; }
  .zk-prompt { font-size: 20px; line-height: 1.25; }
  .zk-prompt.is-long { font-size: 18px; line-height: 1.25; }
  .zk-opt { gap: 10px; min-height: 44px; padding: 3px 44px 3px 5px; font-size: 19px; border-radius: 14px; }
  .zk-opt__key { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
  .zk-teams { gap: 6px; }
  .zk-team { gap: 6px; padding-left: 10px; }
  .zk-team--b { padding: 2px 10px 2px 4px; }
  .zk-team strong { line-height: 28px; }
  .zk-meta .zk-team__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .zk-turn { padding: 5px 10px; }
  .zk-solo__item { line-height: 26px; }
  .zk-foot { padding: 5px 18px; }
  .zk-foot .zk-btn { min-height: 44px; }
  .zk-foot .uk-btn { --uk-size: 44px; }
}

/* ---- Reduced motion ----------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-on) #zekaDialog *, body:not(.motion-on) #zekaDialog *::before, body:not(.motion-on) #zekaDialog *::after { animation: none !important; transition: none !important; }
}
body.reduced-motion #zekaDialog *, body.reduced-motion #zekaDialog *::before, body.reduced-motion #zekaDialog *::after { animation: none !important; transition: none !important; }