/*
 * Bilye Yarışı — the marble-race picker dialog (plan 99, marbles.js). Chrome colours come from tokens.css; the
 * canvas reads the --mb-* tokens below through getComputedStyle (light, dark, high contrast). No color-mix(),
 * filters, blur or container queries: classroom boards run older browsers on integrated GPUs. CSS moves only
 * transform and opacity; the race itself is painted by marbles.js.
 */
#marblesDialog {
  /* Canvas palette: track */
  --mb-bg-top: #eaf5fd;
  --mb-bg-bottom: #fff4e2;
  --mb-out: #d9e4f0;
  --mb-wall: #1d3a66;
  --mb-wall-hi: rgba(255, 255, 255, .55);
  --mb-peg: #1d4f9f;
  --mb-peg-hi: rgba(255, 255, 255, .7);
  --mb-bumper: #e8590c;
  --mb-bumper-hi: #ffd8a8;
  --mb-kick: #f76707;
  --mb-boost: #2f9e44;
  --mb-hazard: #f0aa0e;
  --mb-hazard-2: #0b1b33;
  --mb-pit: #0a1220;
  --mb-rotor: #7048e8;
  --mb-rotor-hub: #3b1f99;
  --mb-lift: #1ba3dd;
  --mb-door-ghost: rgba(29, 58, 102, .16);
  --mb-finish-a: #0b1b33;
  --mb-finish-b: #ffffff;
  --mb-ring: #f0aa0e;
  --mb-edge: rgba(8, 16, 32, .55);
  --mb-text: #1d3a66;
  /* 14 marble hues (× 3 patterns: solid, band, two-tone) */
  --mb-m1: #e03131;
  --mb-m2: #f76707;
  --mb-m3: #fcc419;
  --mb-m4: #74b816;
  --mb-m5: #2b9a49;
  --mb-m6: #12b886;
  --mb-m7: #15aabf;
  --mb-m8: #1c7ed6;
  --mb-m9: #4c55d8;
  --mb-m10: #9c36b5;
  --mb-m11: #e64980;
  --mb-m12: #a61e4d;
  --mb-m13: #8d5a3b;
  --mb-m14: #495057;
  /* Chrome */
  --mb-gold: var(--gold-base);
  --mb-gold-ink: #1d1400;
  --mb-pill-bg: rgba(255, 255, 255, .94);
  --mb-pill-ink: #0b1628;
  --mb-strip: rgba(255, 255, 255, .9);
  /* The rest of the field (plan 113 D9): --ink stays at 4.5:1 or more over a black or a white scene behind the panel. */
  --mb-field-bg: rgba(255, 255, 255, .66);
  --mb-field-line: rgba(29, 58, 102, .22);
  /* An out marble's row (plan 114 §3.6): muted, yet 4.5:1 or more over a black or a white scene behind the panel. */
  --mb-field-out-ink: #2f3c4e;
}
html[data-theme="dark"] #marblesDialog {
  --mb-bg-top: #0f1d33;
  --mb-bg-bottom: #1a1830;
  --mb-out: #070d18;
  --mb-wall: #8fb3e3;
  --mb-wall-hi: rgba(255, 255, 255, .5);
  --mb-peg: #5cb8f2;
  --mb-peg-hi: rgba(255, 255, 255, .6);
  --mb-bumper: #ff7a33;
  --mb-bumper-hi: #ffe0c2;
  --mb-kick: #ff922b;
  --mb-boost: #69db7c;
  --mb-hazard: #fcc419;
  --mb-hazard-2: #1a1a1a;
  --mb-pit: #02050b;
  --mb-rotor: #9775fa;
  --mb-rotor-hub: #e5dbff;
  --mb-lift: #4dc3f0;
  --mb-door-ghost: rgba(255, 255, 255, .1);
  --mb-finish-a: #e6edf6;
  --mb-finish-b: #0a1220;
  --mb-ring: #fcc419;
  --mb-edge: rgba(0, 0, 0, .6);
  --mb-text: #c9daf2;
  --mb-pill-bg: rgba(17, 28, 46, .94);
  --mb-pill-ink: #f1f5fb;
  --mb-strip: rgba(10, 18, 32, .88);
  --mb-field-bg: rgba(17, 28, 46, .72);
  --mb-field-line: rgba(230, 237, 246, .18);
  --mb-field-out-ink: #ccd7e5;
}
body.high-contrast #marblesDialog {
  --mb-bg-top: #ffffff;
  --mb-bg-bottom: #ffffff;
  --mb-out: #d0d0d0;
  --mb-wall: #000000;
  --mb-wall-hi: #ffffff;
  --mb-peg: #000000;
  --mb-peg-hi: #ffffff;
  --mb-edge: #000000;
  --mb-pit: #000000;
  --mb-door-ghost: rgba(0, 0, 0, .25);
  --mb-text: #000000;
  --mb-pill-bg: #ffffff;
  --mb-pill-ink: #000000;
  --mb-strip: #ffffff;
  --mb-field-bg: var(--surface);
  --mb-field-line: var(--ink);
  --mb-field-out-ink: var(--ink-3);
}

html.mb-lock, html.mb-lock body { height: 100%; overflow: hidden; }
#marblesDialog [hidden] { display: none !important; }
#marblesDialog {
  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);
}
#marblesDialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
#marblesDialog::backdrop { background: var(--scrim); }
#marblesDialog :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#marblesDialog button { font-family: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#marblesDialog h2, #marblesDialog h3, #marblesDialog p { margin: 0; }

/* ---- Buttons ------------------------------------------------------------------------------------------------ */
.mb-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;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  cursor: pointer;
}
.mb-btn:hover { border-color: var(--brand); }
.mb-btn--ghost { background: transparent; border-color: var(--line); }
.mb-btn--primary { color: var(--on-primary); background: var(--brand-grad); border-color: transparent; box-shadow: var(--shadow-brand); }
.mb-btn--primary:hover { background: var(--primary-hover); }
.mb-btn:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }

/* ---- Header ------------------------------------------------------------------------------------------------- */
.mb-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 8px 18px;
  background: var(--glass-strong);
  border-bottom: 1px solid var(--glass-line);
}
.mb-head::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; background: linear-gradient(90deg, var(--mb-m1), var(--mb-m3), var(--mb-m5), var(--mb-m8), var(--mb-m10), var(--mb-m11)); pointer-events: none; }
.mb-titles { min-width: 0; }
.mb-eyebrow { color: var(--brand-ink); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mb-titles h2 { overflow: hidden; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; text-overflow: ellipsis; }
.mb-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; min-width: 0; color: var(--ink-2); font-size: 15px; font-weight: 650; }
.mb-meta span { padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.mb-meta b { color: var(--ink); font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.mb-head__actions { display: flex; gap: 8px; justify-content: flex-end; }
/* Race controls (step 7): Duraklat/Devam, Lider, Tüm pist, Sonuca atla. A bottom bar on phones. */
.mb-controls { display: flex; gap: 8px; }
.mb-ctl[aria-pressed="true"] { color: var(--ink); background: var(--brand-tint); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.mb-ctl--pause::before { content: "❚❚"; font-size: .7em; letter-spacing: -.12em; }
#marblesDialog[data-paused="true"] .mb-ctl--pause { color: var(--mb-gold-ink); background: var(--mb-gold); border-color: #7a5200; }
#marblesDialog[data-paused="true"] .mb-ctl--pause::before { content: "▶"; letter-spacing: 0; }
/* The short phone labels ("Pist", "Atla"; plan 109 D8) are aria-hidden and shown only on phones. */
.mb-ctl__short { display: none; }
/* Ses (plan 108 step 6): a note icon and the word. Off crosses both out (a slash over the note, a line through the word), so
   colour is never the only cue. */
.mb-ctl--sound .mb-ctl__icon { position: relative; margin-right: .35em; }
.mb-ctl--sound[aria-pressed="false"] { color: var(--ink-2); }
.mb-ctl--sound[aria-pressed="false"] .mb-ctl__text { text-decoration: line-through; text-decoration-thickness: 2px; }
.mb-ctl--sound[aria-pressed="false"] .mb-ctl__icon::after { content: ""; position: absolute; top: 50%; right: -.15em; left: -.15em; height: 2px; background: currentColor; transform: rotate(-45deg); }

/* ---- Setup -------------------------------------------------------------------------------------------------- */
.mb-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px 18px;
  min-height: 0;
  padding: 14px 22px 8px;
  overflow: auto;
}
.mb-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
}
.mb-h { color: var(--ink-2); font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.mb-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; }
.mb-seg__btn {
  min-height: 50px;
  padding: 4px 10px;
  color: var(--ink-2);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.1;
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.mb-seg__btn small { display: block; color: var(--ink-3); font-size: 12px; font-weight: 650; }
.mb-seg__btn[aria-pressed="true"] { color: var(--on-primary); background: var(--brand-grad); box-shadow: var(--shadow-sm); }
.mb-seg__btn:disabled { cursor: not-allowed; opacity: .6; }
.mb-pane { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-height: 0; }
.mb-label { color: var(--ink); font-size: 16px; font-weight: 750; }
.mb-label small { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.mb-names {
  flex: 1 1 auto;
  width: 100%;
  min-height: 150px;
  padding: 12px 14px;
  color: var(--ink);
  font: 600 19px/1.4 var(--font-sans);
  background: var(--surface-soft, var(--surface));
  border: 2px solid var(--line-strong);
  border-radius: 14px;
  resize: none;
}
.mb-names:focus { border-color: var(--brand); outline: none; }
.mb-stepper { display: grid; grid-template-columns: 64px minmax(0, 160px) 64px; gap: 8px; align-items: stretch; }
.mb-step { min-height: 60px; padding: 0; font-size: 30px; }
.mb-number { min-width: 0; padding: 0 10px; color: var(--ink); font: 800 30px var(--font-sans); text-align: center; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 14px; }
.mb-hint { color: var(--ink-3); font-size: 14px; }
/* Sonuç and Eleme share one row, so the race panel keeps fitting 1366×768 without scrolling. */
.mb-opts { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 4px 12px; }
.mb-opt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mb-opts .mb-hint { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.3; }
.mb-count { color: var(--brand-ink); font-size: 20px; font-weight: 800; }
.mb-count.is-bad { color: var(--coral-ink); }

/* ---- Class source, Çıkarılan kazananlar --------------------------------------------------------------------- */
.mb-btn--small { min-height: 44px; padding: 0 14px; font-size: 15px; border-radius: 12px; }
/* Classes are one tap each (grouped by grade when there are several); the pane names who does not race and opens the
   student sheet, where the whole class is in sight at once. */
.mb-classes { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.mb-classes__grade { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.mb-classes__label { color: var(--ink-2); font-size: 14px; font-weight: 800; }
.mb-classbtn {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 64px;
  max-width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  text-align: start;
  background: var(--surface-2);
  border: 2px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 120ms var(--ease-out, ease-out);
}
.mb-classbtn:hover { border-color: var(--brand); }
.mb-classbtn:active { transform: scale(.97); }
.mb-classbtn__label { min-width: 0; overflow-wrap: anywhere; }
.mb-classbtn__size { flex: none; color: var(--ink-2); font-size: 14px; font-weight: 700; }
.mb-classbtn[aria-pressed="true"] { color: var(--on-primary); background: var(--brand-grad); border-color: transparent; box-shadow: var(--shadow-sm); }
.mb-classbtn[aria-pressed="true"] .mb-classbtn__size { color: inherit; }
/* The class pane keeps its full height: a long "Yarışmayacak" list makes the panel scroll instead of running over the
   count below it. */
.mb-pane--class { flex: none; }
.mb-panel--who { overflow-y: auto; }
.mb-class__who { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 8px 12px; padding: 10px 12px; background: var(--surface-2); border-radius: 14px; }
.mb-class__out { color: var(--ink-2); font-size: 16px; font-weight: 600; line-height: 1.35; }
.mb-class__out b { color: var(--ink); font-weight: 800; }
.mb-class__outname { white-space: nowrap; }
.mb-class__open { min-height: 56px; }
.mb-class__ratio { padding: 2px 10px; color: var(--brand-ink); font-size: 16px; font-variant-numeric: tabular-nums; background: var(--brand-tint); border-radius: 999px; }
body.board-view .mb-classbtn { min-height: 60px; padding: 13px 18px; font-size: 23px; }
body.board-view .mb-class__out { font-size: 18px; }
body.board-view .mb-class__open { min-height: 64px; font-size: 20px; }

/* The student sheet: a dialog over Bilye Yarışı with the class in Turkish alphabetical order, the search and the letters
   (student-picker.css), and the count beside Tamam. */
.mb-sheet {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--bg);
  border: 0;
}
.mb-sheet[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: mb-sheet-in 200ms var(--ease-out, ease-out); }
.mb-sheet::backdrop { background: transparent; }
@keyframes mb-sheet-in { from { opacity: 0; transform: translateY(12px); } }
.mb-sheet__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 22px; background: var(--glass-strong); border-bottom: 1px solid var(--glass-line); }
.mb-sheet__title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.mb-sheet__title:focus { outline: none; }
.mb-sheet__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-sheet__body { min-height: 0; padding: 14px 22px; overflow: auto; overscroll-behavior: contain; }
.mb-sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 22px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--glass-strong); border-top: 1px solid var(--glass-line); }
.mb-sheet__status { display: grid; gap: 2px; min-width: 0; }
.mb-sheet__note { margin: 0; font-size: 13px; line-height: 1.3; }
.mb-sheet__count { color: var(--brand-ink); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mb-sheet__count.is-bad { color: var(--coral-ink); }
.mb-sheet__done { min-width: 160px; min-height: 56px; font-size: 20px; }
body.board-view .mb-sheet__actions .mb-btn { min-height: 56px; font-size: 18px; }
body.board-view .mb-sheet__done { min-height: 64px; font-size: 22px; }
.mb-pick {
  display: flex;
  flex-wrap: wrap;           /* a long name pushes "bugün yok" to its own line instead of cutting the name */
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 10px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  background: var(--surface-2);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}
.mb-pick:hover { border-color: var(--line-strong); }
.mb-pick input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.mb-pick:has(input:checked) { background: var(--brand-tint); border-color: var(--brand); }
.mb-pick:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
/* "Sıfırlamayı geri al" takes focus from the reset it replaces, mostly after a tap, when :focus-visible does not match:
   it shows the dialog's focus ring whenever it is focused, so the way back is visible. */
.mb-picked__reset[data-mb="reset-undo"]:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.mb-pick__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.board-view .mb-pick { min-height: 64px; font-size: 21px; }
/* "Kazananları çıkar" (plan 114 D10): one .mb-pick row under the count, for every source. Its hint sits beside it, so
   the class list keeps the height (phones stack the two, see the 680 px block). */
.mb-winners-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 12px; flex: none; }
.mb-winners-row .mb-hint { margin: 0; font-size: 13px; line-height: 1.3; }
.mb-class__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px; color: var(--ink); font-size: 17px; font-weight: 650; line-height: 1.4; background: var(--surface-2); border: 2px dashed var(--line-strong); border-radius: 14px; }
.mb-class__empty[hidden] { display: none; }

.mb-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mb-picked__label { color: var(--ink-2); font-size: 15px; font-weight: 800; }
.mb-picked__chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 12px; font-size: 16px; font-weight: 750; background: var(--mb-gold); color: var(--mb-gold-ink); border-radius: 999px; }
.mb-picked__undo {
  min-height: 36px;
  padding: 0 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
}
.mb-picked__undo::before { content: "↶ "; }
.mb-picked__undo:hover { border-color: var(--brand); }
.mb-result .mb-picked { justify-content: center; }

.mb-panel--race { overflow: auto; }
/* The board's setup is one fixed screen: tighter rows keep Sonuç, Eleme and the three folds inside 1366×768 without scrolling. */
@media (min-width: 861px) and (min-height: 521px) {
  .mb-panel--race { gap: 4px; }
  .mb-panel--race .mb-code { margin-top: 0; }
  .mb-opt .mb-h { line-height: 1.2; }
  .mb-opts .mb-seg__btn { min-height: 46px; }
  .mb-track__title { line-height: 1.25; }
  .mb-track__time, .mb-track__length { line-height: 1.3; }
}
.mb-history__list { display: grid; gap: 6px; max-height: 180px; margin: 0; padding: 4px 2px 2px; overflow: auto; list-style: none; }
.mb-history__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; padding: 6px 8px 6px 12px; background: var(--surface-2); border-radius: 12px; }
.mb-history__what { min-width: 0; font-size: 15px; font-weight: 650; }
.mb-history__what b { letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.mb-history__when { color: var(--ink-3); }
.mb-history__top { grid-column: 1; min-width: 0; overflow: hidden; color: var(--ink-2); font-size: 15px; font-weight: 750; white-space: nowrap; text-overflow: ellipsis; }
.mb-history__item .mb-btn { grid-column: 2; grid-row: 1 / span 2; }

.mb-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 12px 16px; background: var(--brand-tint); border: 2px solid var(--brand); border-radius: 18px; }
.mb-done__text { font-size: clamp(20px, 3.4vh, 30px); font-weight: 750; }
.mb-done__text strong { font-weight: 800; }

/* Compact rows (plan 105 step 9): five tracks in three rows fit the 1366×768 board, each at least 64 px tall.
   Title on top, the length chip and "≈ N sn" below, the thumbnail on the right (longer tracks draw as thinner strips). */
/* Plan 117: the Pist heading shares its row with the Dikey/Yatay switch; only the pressed group's cards are listed below. */
.mb-pist { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.mb-pist__kind { flex: 0 1 240px; padding: 2px; border-radius: 14px; }
.mb-pist__kind .mb-seg__btn { min-height: 44px; font-size: 17px; }
.mb-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mb-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(90px, 40%);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  min-height: 64px;
  padding: 6px 10px 6px 12px;
  color: var(--ink);
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
}
.mb-track:hover { border-color: var(--brand); }
.mb-track[aria-pressed="true"] { background: var(--brand-tint); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.mb-track .mb-thumb { grid-column: 3; grid-row: 1 / span 2; width: 100%; height: 48px; }
.mb-track__title { grid-column: 1 / span 2; overflow: hidden; font-size: 18px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.mb-track__length { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); font-size: 14px; font-weight: 700; white-space: nowrap; }
.mb-track__bars { display: inline-flex; gap: 2px; }
/* Filled and empty bars differ in fill and outline, not only in colour. */
.mb-track__bar { width: 6px; height: 12px; border: 1.5px solid var(--brand); border-radius: 2px; }
.mb-track__bar[data-mb-bar="on"] { background: var(--brand); }
.mb-track__bar[data-mb-bar="off"] { border-color: var(--line-strong); background: transparent; }
.mb-track__time { grid-row: 2; grid-column: 2; color: var(--ink-3); font-size: 14px; font-weight: 700; white-space: nowrap; }
/* Narrow desktop windows (861–1150 px): the race panel is under 600 px, so a card is too narrow for the title, the length chip
   and the time side by side. The title takes the full width, the length chip and the time stack in the left column and the
   thumbnail sits beside them; the bars wrap under the length word when the column is too narrow. */
@media (min-width: 861px) and (max-width: 1150px) {
  .mb-track { grid-template-columns: minmax(0, 1fr) minmax(48px, 34%); grid-template-rows: auto auto auto; }
  .mb-track__title { grid-column: 1 / -1; }
  .mb-track__length { grid-column: 1; grid-row: 2; flex-wrap: wrap; row-gap: 2px; }
  .mb-track__time { grid-column: 1; grid-row: 3; }
  .mb-track .mb-thumb { grid-column: 2; grid-row: 2 / span 2; height: 40px; }
}
.mb-thumb__bg { fill: var(--sky-tint); }
/* A Yatay course shows its rendered picture, cropped to the strip; one without a picture yet keeps the place as a plain tile. */
.mb-thumb--none { display: block; background: var(--sky-tint); border-radius: 10px; }
img.mb-thumb { display: block; object-fit: cover; border-radius: 10px; background: var(--sky-tint); }
.mb-thumb path, .mb-thumb circle { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.mb-thumb__wall { stroke: var(--ink-2); stroke-width: 1.4; }
.mb-thumb__kick { stroke: var(--coral-base); stroke-width: 1.6; }
.mb-thumb__peg { stroke: var(--brand); stroke-width: 2.4; }
.mb-thumb__bumper { stroke: var(--coral-base); stroke-width: 4; }
.mb-thumb__rotor { stroke: #7048e8; stroke-width: 1.4; }
.mb-thumb__lift { stroke: var(--sky-base); stroke-width: 2; }
.mb-thumb__door { stroke: var(--gold-base); stroke-width: 2; }
.mb-thumb__boost { stroke: #2f9e44; stroke-width: 2.4; }
.mb-thumb__finish { stroke: var(--gold-base); stroke-width: 3; stroke-dasharray: 2 2; }

.mb-code { margin-top: 2px; border-top: 1px solid var(--line); }
.mb-code summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding-top: 6px; color: var(--ink); font-size: 16px; font-weight: 750; cursor: pointer; }
.mb-code summary small { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.mb-code__row { display: grid; grid-template-columns: auto minmax(0, 200px) minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 4px 0 2px; }
.mb-code__input { min-height: 46px; padding: 0 12px; color: var(--ink); font: 800 22px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 12px; }
.mb-code__input[aria-invalid="true"] { border-color: var(--coral-base); }
.mb-code__hint { color: var(--ink-3); font-size: 14px; }
.mb-quality .mb-seg { margin: 4px 0 6px; }
.mb-quality .mb-hint { margin: 0 0 4px; }
/* Plan 105 step 3: Görünüm (3B | 2B) above Kalite inside the Görüntü panel. */
.mb-quality__label { margin: 8px 0 0; color: var(--ink-2, var(--ink)); font-size: 14px; font-weight: 750; }
.mb-fallback-note { font-weight: 650; }
.mb-fair { grid-column: 1 / -1; color: var(--ink-3); font-size: 14px; line-height: 1.35; text-align: center; }

/* ---- Footer: summary, status line, Başlat ------------------------------------------------------------------- */
.mb-foot {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 10px 22px 12px;
  background: var(--glass-strong);
  border-top: 1px solid var(--glass-line);
}
.mb-summary { color: var(--ink); font-size: 18px; font-weight: 800; white-space: nowrap; }
.mb-status { min-width: 0; color: var(--ink-2); font-size: 16px; font-weight: 650; }
.mb-status.is-bad { color: var(--coral-ink); }
.mb-start { min-width: 210px; min-height: 60px; font-size: 24px; border-radius: 18px; }
.mb-start::after { content: "▶"; font-size: .7em; }
/* During the race the footer keeps only the polite status line, for screen readers. */
.mb-foot.is-quiet { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Stage: canvas, name pills, countdown, live ranking ----------------------------------------------------- */
/* The live leaderboard band sits above the view in its own grid row (plan 109 D7), so it never covers the track. Its
   height comes from the chip font (two lines of 1.15 and the chip padding), never from what the band shows, so the wait
   text, a ⚡ or a long name never resize the view mid-race. */
.mb-stage {
  --mb-field-mode: over;   /* the rest of the field: over the view, in the column or off (marbles.js reads it per layout change) */
  --mb-chip-font: clamp(24px, 3.1vh, 34px);
  --mb-chip-h: calc(1.15 * var(--mb-chip-font) + 1.15 * max(20px, .8 * var(--mb-chip-font)) + 6px);
  --mb-band-h: calc(var(--mb-chip-h) + 13px);   /* 6 px padding above and below, and the 1 px border */
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--mb-band-h) minmax(0, 1fr);
  min-height: 0;
}
.mb-view { grid-row: 2; grid-column: 1; position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--mb-out); outline: none; }
.mb-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Two canvases share the stage (2D and the 3D WebGL canvas); only the view in use is shown. */
.mb-canvas[hidden] { display: none; }
.mb-pills { position: absolute; inset: 0; overflow: hidden; contain: layout paint; pointer-events: none; }
/* The rest of the field (plan 113 D1–D4, D9): the places the band does not show, in a fixed frame on the right, from
   44 px (below the strip) to 54 % of the view, above the finish line and the leader. It comes before the pills in the
   DOM and has no z-index, so every pill and overlay paints above it; it takes no input and never moves. The list inside
   is as tall as its rows, which marbles.js fits to the frame. */
.mb-field {
  position: absolute;
  top: 44px;
  right: 8px;
  width: clamp(170px, 14vw, 250px);
  height: calc(54% - 44px);
  color: var(--ink);
  font-size: clamp(18px, 2.5vh, 22px);
  font-weight: 700;
  line-height: 1.25;
  contain: layout paint;
  pointer-events: none;
  transition: opacity .2s ease;
}
/* The duck (D5): the list fades while the leader or the followed marble passes under it (marbles.js duckField). Under
   reduced motion it changes at once, with no transition at all. */
.mb-field.is-ducked { opacity: .25; }
body.reduced-motion .mb-field { transition: none; }
.mb-field__list { margin: 0; padding: 4px 0; list-style: none; background: var(--mb-field-bg); border: 1px solid var(--mb-field-line); border-radius: 12px; }
.mb-field__row, .mb-field__more { height: calc(1.25em + 4px); padding: 0 8px; }
.mb-field__row { display: grid; grid-template-columns: 1.6em .78em minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.mb-field__place { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.mb-field__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* "+K bilye" lines up with the names, in --ink like them (--ink-2 falls under 4.5:1 over the scene). */
.mb-field__more { display: flex; align-items: center; padding-left: calc(8px + 1.6em + .78em + 12px); font-weight: 600; white-space: nowrap; }
body.high-contrast .mb-field__list { border-width: 2px; }
.mb-pill {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .14em .5em .16em .32em;
  color: var(--mb-pill-ink);
  font-size: clamp(20px, 2.8vh, 30px);
  font-weight: 800;
  line-height: 1.12;
  white-space: nowrap;
  background: var(--mb-pill-bg);
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(8, 16, 32, .18);
  will-change: transform;
}
.mb-pill[data-leader="true"] { color: var(--mb-gold-ink); font-size: clamp(26px, 3.6vh, 40px); background: var(--mb-gold); border-color: #7a5200; }
.mb-pill[data-leader="true"]::before { content: "★"; font-size: .8em; }
.mb-pill__dot, .mb-rank__dot, .mb-field__dot, .mb-swatch {
  display: inline-block;
  flex: none;
  width: .78em;
  height: .78em;
  background: var(--mb-dot);
  border: 2px solid var(--mb-edge);
  border-radius: 50%;
}
[data-pattern="band"].mb-pill__dot, [data-pattern="band"].mb-rank__dot, [data-pattern="band"].mb-field__dot, [data-pattern="band"].mb-swatch { background: linear-gradient(var(--mb-dot) 0 36%, #fff 36% 64%, var(--mb-dot) 64%); }
[data-pattern="two"].mb-pill__dot, [data-pattern="two"].mb-rank__dot, [data-pattern="two"].mb-field__dot, [data-pattern="two"].mb-swatch { background: linear-gradient(var(--mb-dot) 0 50%, #26334a 50%); }
.mb-pill[data-leader="true"] .mb-pill__dot { display: none; }
/* Takip: the followed marble's pill is ringed in the focus colour (the canvas adds a dashed ring). */
.mb-pill[data-followed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus), 0 2px 6px rgba(8, 16, 32, .18); }
/* Paused: a badge at the bottom of the view (the camera keeps the leader and the followed marble near the middle). */
.mb-paused {
  position: absolute;
  bottom: 14px;
  left: 50%;
  padding: 6px 22px;
  color: var(--mb-gold-ink);
  font-size: clamp(22px, 3.4vh, 34px);
  font-weight: 800;
  background: var(--mb-gold);
  border: 3px solid #7a5200;
  border-radius: 999px;
  transform: translateX(-50%);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

/* ?mbdiag=1 board readout: frame times, draw calls, triangles and GPU, small in the bottom-right corner. */
.mb-diag {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 2px 8px;
  overflow: hidden;
  color: #f1f5fb;
  font: 600 12px/1.4 ui-monospace, monospace;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: rgba(10, 16, 28, .72);
  border-radius: 6px;
  pointer-events: none;
}

/* Pist şeridi: the whole field along the track (drawn on its canvas), centred above the play. */
.mb-strip { position: absolute; top: 8px; left: 50%; z-index: 3; display: block; max-width: calc(100% - 32px); border-radius: 14px; transform: translateX(-50%); box-shadow: var(--shadow-md); contain: layout paint; pointer-events: none; }
.mb-intro {
  position: absolute;
  bottom: 24px;
  left: 50%;
  z-index: 2;
  max-width: calc(100% - 32px);
  padding: 10px 22px;
  overflow: hidden;
  color: var(--ink);
  font-size: clamp(20px, 2.9vh, 30px);
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--glass-strong);
  border: 2px solid var(--line-strong);
  border-radius: 18px;
  transform: translateX(-50%);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.mb-stir, .mb-chip {
  position: absolute;
  top: 46px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  color: var(--ink);
  font-size: clamp(18px, 2.6vh, 28px);
  font-weight: 800;
  white-space: nowrap;
  background: var(--glass-strong);
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  transform: translateX(-50%);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.mb-chip { color: var(--mb-gold-ink); background: var(--mb-gold); border-color: #7a5200; }
.mb-chip::before { content: ""; width: .8em; height: .8em; background: var(--mb-chip-dot, transparent); border-radius: 50%; }
/* KAZANAN: a full-width gold strip over the view for 1.2 s from the first crossing. */
.mb-banner {
  position: absolute;
  top: 24%;
  right: 0;
  left: 0;
  z-index: 3;
  margin: 0;
  padding: .12em 16px;
  color: var(--mb-gold-ink);
  font-size: clamp(40px, 8vh, 72px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
  background: var(--mb-gold);
  border-block: 3px solid #7a5200;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.mb-countdown { position: absolute; top: 50%; left: 84%; transform: translate(-50%, -50%); pointer-events: none; }
/* The numbers stand beside the hopper (the stir stays visible); BAŞLA! bursts over the gate. */
.mb-countdown.is-word { top: 66%; left: 50%; }
.mb-countdown__text {
  display: grid;
  place-items: center;
  width: clamp(120px, 20vh, 190px);
  height: clamp(120px, 20vh, 190px);
  color: var(--mb-gold-ink);
  font-size: clamp(80px, 14vh, 136px);
  font-weight: 800;
  line-height: 1;
  background: var(--mb-gold);
  border: 6px solid var(--inverse);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  font-variant-numeric: tabular-nums;
}
.mb-countdown.is-word .mb-countdown__text { width: auto; height: auto; padding: 14px 40px; color: #fff; font-size: clamp(60px, 11vh, 110px); letter-spacing: .02em; background: var(--mb-m1); border-radius: 30px; }

/* The band: a head column (clock and field, then the leader's section), then --mb-band-cap chips side by side.
   updateRanking keeps the top 10 (and a pinned 11th) in the list and hides the chips beyond the capacity; the followed
   marble is always the last chip shown. marbles.js reads the capacity once per resize or body-class change. */
.mb-rank {
  --mb-band-cap: 5;
  grid-row: 1;
  grid-column: 1;
  display: grid;
  grid-template-columns: clamp(170px, 15vw, 280px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 6px 10px;
  overflow: hidden;
  contain: layout paint;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.mb-rank__head { display: grid; grid-template-areas: "clock count" "sector sector"; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: baseline; gap: 2px 10px; min-width: 0; padding: 0 4px; }
.mb-rank__count { grid-area: count; color: var(--ink-2); font-size: 16px; font-weight: 700; text-align: right; white-space: nowrap; }
.mb-rank__clock { grid-area: clock; color: var(--ink); font-size: clamp(20px, 2.8vh, 28px); font-weight: 800; font-variant-numeric: tabular-nums; }
.mb-rank__sector { grid-area: sector; overflow: hidden; color: var(--ink-2); font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.mb-rank__list, .mb-rank__wait { grid-row: 1; grid-column: 2; }
.mb-rank__list { position: relative; display: grid; grid-template-columns: repeat(var(--mb-band-cap), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
/* A chip: the place over both lines, then the swatch and the name, and the gap and the place change below them. */
.mb-rank__row {
  position: relative;
  display: grid;
  grid-template-areas: "place dot name name" "place gap gap delta";
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  gap: 0 6px;
  min-width: 0;
  min-height: 44px;           /* a tap on a chip follows that marble */
  padding: 3px 8px;
  cursor: pointer;
  touch-action: manipulation;
  font-size: var(--mb-chip-font);
  font-weight: 800;
  line-height: 1.15;
  background: var(--surface-2);
  border-radius: 12px;
}
.mb-rank__flash { position: absolute; inset: 0; background: var(--mb-gold); border-radius: inherit; opacity: 0; pointer-events: none; }
.mb-rank__place { grid-area: place; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.mb-rank__dot { grid-area: dot; }
.mb-rank__name { grid-area: name; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* ⚡ (sector best) is a badge on the chip's top left corner, so it never takes room from the name. */
.mb-rank__best { position: absolute; top: -4px; left: -2px; font-size: 18px; line-height: 1; }
.mb-rank__gap { grid-area: gap; color: var(--ink); font-size: max(20px, .8em); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-rank__delta { grid-area: delta; font-size: max(16px, .62em); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mb-rank__row[data-delta^="-"] .mb-rank__delta { color: var(--red-ink); }
.mb-rank__row:not([data-delta^="-"]) .mb-rank__delta { color: var(--green-ink); }
.mb-rank__row.is-leader { color: var(--mb-gold-ink); background: var(--mb-gold); }
.mb-rank__row.is-leader :is(.mb-rank__place, .mb-rank__gap, .mb-rank__delta) { color: inherit; }
.mb-rank__row.is-done { background: var(--green-tint); }
.mb-rank__row.is-done.is-leader { background: var(--mb-gold); }
/* A marble out of the race (plan 114 §3.6): its chip and its side-list row are muted, with no strike-through; the word
   "çıktı" says why. The text takes a muted ink rather than row opacity, which would take it under 4.5:1: --ink-3 on the
   chip (5.3:1 light, 6.5:1 dark), --mb-field-out-ink in the list (4.7:1 over a black or a white scene); only the swatch
   is faded. */
.mb-rank__row.is-out, .mb-rank__row.is-out :is(.mb-rank__place, .mb-rank__gap) { color: var(--ink-3); }
.mb-field__row.is-out { color: var(--mb-field-out-ink); }
:is(.mb-rank__row, .mb-field__row).is-out :is(.mb-rank__dot, .mb-field__dot) { opacity: .6; }
.mb-rank__row.is-followed { box-shadow: inset 0 0 0 3px var(--focus); }
/* The focus blue is under 2:1 on the gold leader chip; its dark ink keeps the ring at 3:1 or more. */
.mb-rank__row.is-leader.is-followed { box-shadow: inset 0 0 0 3px var(--mb-gold-ink); }
.mb-rank__wait { align-self: center; margin: 0; color: var(--ink-3); font-size: 16px; }

/* ---- Result ------------------------------------------------------------------------------------------------- */
.mb-result { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 14px; overflow: auto; background: rgba(6, 14, 28, .42); }
.mb-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mb-confetti__piece { position: absolute; top: -14px; width: 11px; height: 16px; border-radius: 3px; will-change: transform, opacity; }
.mb-result__card {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(1180px, 100%);
  max-height: 100%;
  padding: 18px 24px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
}
.mb-result[data-mode="one"] .mb-result__card { width: min(940px, 100%); }
.mb-result__hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
.mb-result__panda .mw-mascot { width: clamp(110px, 21vh, 170px); }
.mb-result[data-mode="all"] .mb-result__panda .mw-mascot { width: clamp(80px, 12vh, 104px); }
.mb-result__kicker { color: var(--brand-ink); font-size: 18px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mb-result__winner { display: flex; align-items: center; gap: 16px; min-width: 0; font-size: clamp(64px, 12vh, 120px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.mb-result__winner strong { min-width: 0; overflow-wrap: anywhere; }
.mb-result__winner .mb-swatch { width: .62em; height: .62em; border-width: 4px; }
.mb-result__winner--compact { font-size: clamp(40px, 7vh, 64px); }
.mb-result__first { color: var(--ink-3); font-size: .6em; }
.mb-crown { flex: none; width: .6em; height: .45em; }
.mb-result__time { font-size: clamp(24px, 4vh, 36px); font-weight: 800; }
.mb-result__story { color: var(--green-ink); font-size: clamp(20px, 3vh, 28px); font-weight: 800; }
.mb-time, .mb-gap { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-gap { color: var(--ink-3); }
.mb-result__winner--compact .mb-time { color: var(--ink-3); font-size: .5em; font-weight: 750; letter-spacing: 0; }
.mb-runners { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; list-style: none; }
.mb-runners__item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 14px; font-size: clamp(20px, 3.6vh, 32px); font-weight: 800; background: var(--surface-2); border-radius: 14px; }
.mb-runners__place { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mb-runners__name { min-width: 0; overflow-wrap: anywhere; }
.mb-runners__item .mb-swatch { width: .7em; height: .7em; }
.mb-runners__item .mb-gap { font-size: .8em; }
.mb-awards { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.mb-award { padding: 3px 12px; color: var(--ink); font-size: clamp(16px, 2.1vh, 19px); font-weight: 750; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.mb-verify { color: var(--ink-3); font-size: 14px; font-weight: 650; text-align: center; }
.mb-result__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mb-result__actions .mb-btn { min-height: 54px; font-size: 19px; }

.mb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mb-podium__place { display: grid; justify-items: center; gap: 8px; min-width: 0; text-align: center; }
.mb-podium__place--1 { order: 2; }
.mb-podium__place--2 { order: 1; }
.mb-podium__place--3 { order: 3; }
.mb-podium__place .mb-swatch { width: 44px; height: 44px; border-width: 3px; }
.mb-podium__name { max-width: 100%; overflow-wrap: break-word; font-size: clamp(24px, 4vh, 36px); font-weight: 800; line-height: 1.1; }
.mb-podium__place--1 .mb-podium__name { font-size: clamp(36px, 6.4vh, 60px); }
.mb-podium__step { display: grid; place-items: center; width: 100%; color: var(--mb-gold-ink); font-size: 40px; font-weight: 800; background: var(--surface-3); border-radius: 16px 16px 6px 6px; }
.mb-podium__place--1 .mb-podium__step { height: clamp(90px, 15vh, 130px); background: var(--mb-gold); }
.mb-podium__place--2 .mb-podium__step { height: clamp(66px, 11vh, 96px); background: #ced4da; }
.mb-podium__place--3 .mb-podium__step { height: clamp(48px, 8vh, 72px); background: #e8a87c; }
.mb-podium__place :is(.mb-time, .mb-gap) { font-size: clamp(18px, 2.6vh, 24px); font-weight: 750; }

.mb-order {
  display: grid;
  grid-template-rows: repeat(var(--mb-rows, 10), auto);
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mb-order__item { display: grid; grid-template-columns: 1.7em auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px; min-width: 0; padding: 3px 8px; font-size: clamp(17px, 2.2vh, 20px); font-weight: 750; line-height: 1.2; background: var(--surface-2); border-radius: 10px; }
.mb-order__item:first-child { color: var(--mb-gold-ink); background: var(--mb-gold); }
.mb-order__place { color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.mb-order__item:first-child :is(.mb-order__place, .mb-gain, .mb-gap, .mb-time) { color: inherit; }
.mb-order__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mb-order__item :is(.mb-time, .mb-gap) { font-size: .8em; }
.mb-gain { color: var(--green-ink); font-size: max(15px, .7em); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-podium-view { display: none; }

/* ---- Large text: pills and the band's chips ×1.2, one chip fewer (the phone and short-landscape blocks repeat it) -- */
body.large-text .mb-pill { font-size: clamp(24px, 3.36vh, 36px); }
body.large-text .mb-pill[data-leader="true"] { font-size: clamp(31px, 4.3vh, 48px); }
body.large-text .mb-stage { --mb-chip-font: clamp(24px, 3.7vh, 40px); }
body.large-text .mb-rank { --mb-band-cap: 4; }
body.large-text .mb-field { width: clamp(190px, 16vw, 280px); font-size: clamp(22px, 3vh, 26px); }

/* ---- 3D result: the scene's podium on the left (above on phones), the card beside it ------------------------------ */
#marblesDialog[data-render="3d"][data-phase="result"] :is(.mb-rank, .mb-pills) { display: none; }
#marblesDialog[data-render="3d"][data-phase="result"] .mb-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
#marblesDialog[data-render="3d"][data-phase="result"] .mb-view { grid-area: 1 / 1; }
#marblesDialog[data-render="3d"] .mb-result {
  grid-template-columns: minmax(260px, 1fr) minmax(0, clamp(760px, 50vw, 1000px));   /* the card grows with the winner font on large boards */
  gap: 12px;
  place-items: center stretch;
  overflow: hidden;
  background: transparent;
}
#marblesDialog[data-render="3d"] .mb-podium-view { display: block; align-self: stretch; min-width: 0; min-height: 0; }
#marblesDialog[data-render="3d"] .mb-result[data-mode="one"] .mb-result__card { width: 100%; }
#marblesDialog[data-render="3d"] .mb-result[data-mode="all"] { grid-template-columns: clamp(200px, 16vw, 260px) minmax(0, 1fr); }
#marblesDialog[data-render="3d"] .mb-result[data-mode="all"] .mb-result__card { padding: 16px 18px; }
#marblesDialog[data-render="3d"] .mb-podium { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 8px; }
#marblesDialog[data-render="3d"] .mb-podium__place { order: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 12px; padding: 6px 14px; text-align: left; background: var(--surface-2); border-radius: 14px; }
#marblesDialog[data-render="3d"] .mb-podium__place--1 { color: var(--mb-gold-ink); background: var(--mb-gold); }
#marblesDialog[data-render="3d"] .mb-podium__place--1 .mb-time { color: inherit; }
#marblesDialog[data-render="3d"] .mb-podium__step { display: none; }

/* ---- Phones and narrow windows ------------------------------------------------------------------------------ */
@media (max-width: 1100px) and (min-width: 681px) {
  .mb-head { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .mb-meta { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .mb-rank { --mb-band-cap: 4; }
  body.large-text .mb-rank { --mb-band-cap: 3; }
}
/* Short landscape (phones on their side): a compact header, and the leaderboard as a 190 px top-5 column beside the
   view in both views (plan 109 D7: a band would take a sixth of the height here). */
@media (max-height: 520px) and (min-width: 681px) {
  .mb-head { padding: 4px 12px; }
  .mb-eyebrow { display: none; }
  .mb-titles h2 { font-size: 18px; }
  .mb-meta { display: none; }
  .mb-head__actions .mb-btn { min-height: 44px; padding: 0 12px; font-size: 15px; }
  .mb-stage { --mb-chip-font: 16px; grid-template-columns: minmax(0, 1fr) 190px; grid-template-rows: minmax(0, 1fr); }
  body.large-text .mb-stage { --mb-chip-font: 19px; }
  .mb-view { grid-row: 1; }
  .mb-rank { --mb-band-cap: 5; grid-column: 2; grid-template-columns: minmax(0, 1fr); padding: 6px 8px; border-bottom: 0; border-left: 1px solid var(--line); }
  body.large-text .mb-rank { --mb-band-cap: 4; }
  .mb-rank__head { display: none; }
  .mb-rank__list, .mb-rank__wait { grid-column: 1; }
  .mb-rank__list { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 44px; align-content: start; gap: 4px; }
  .mb-rank__row { grid-template-areas: "place dot name gap"; grid-template-columns: 1.4em auto minmax(0, 1fr) auto; padding: 2px 8px; }
  .mb-rank__gap { font-size: 14px; }
  .mb-rank__best, .mb-rank__delta { display: none; }
  .mb-strip { top: 4px; }
  .mb-stir, .mb-chip { top: 38px; }
  .mb-pill { font-size: 15px; }
  .mb-pill[data-leader="true"] { font-size: 18px; }
  body.large-text .mb-pill { font-size: 18px; }
  body.large-text .mb-pill[data-leader="true"] { font-size: 22px; }
  /* The rest of the field (plan 113 D6) under the column's chips: marbles.js moves the frame into the stage, in the
     band's grid area, and sets --mb-chips-end to the last chip's bottom. No panel: it lies on the column's background. */
  .mb-stage { --mb-field-mode: column; }
  .mb-field, body.large-text .mb-field { grid-column: 2; grid-row: 1; top: calc(var(--mb-chips-end, 0px) + 6px); right: 8px; bottom: 6px; left: 8px; width: auto; height: auto; font-size: 15px; }
  body.large-text .mb-field { font-size: 18px; }
  .mb-field__list, body.high-contrast .mb-field__list { padding: 0; background: transparent; border: 0; border-radius: 0; }
}
/* The rest of the field is off on phones and narrow tablets: there is no room for it beside the race. */
@media (max-width: 860px) and (min-height: 521px), (max-width: 680px) {
  .mb-stage { --mb-field-mode: off; }
}
/* Narrow or short screens (plan 109, the teacher's phone): the setup scrolls as one page. A panel that scrolled on its own
   was a grid item scroll container, so its minimum height was 0 and the Pist list only got what the names panel left
   (34 px on a 390×664 phone). */
@media (max-width: 860px), (max-height: 520px) {
  .mb-setup { grid-template-rows: none; align-content: start; }
  .mb-panel, .mb-pane { min-height: auto; }
  .mb-panel--race, .mb-panel--who { overflow: visible; }
}
@media (max-width: 860px) {
  .mb-setup { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 8px; }
  .mb-names { min-height: 140px; }
  .mb-foot { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 8px 12px 10px; }
  .mb-summary { grid-column: 1 / -1; font-size: 16px; white-space: normal; }
  .mb-start { min-width: 150px; }
}
/* Short landscape: the footer is one row (summary, status, Başlat), so the setup keeps most of the 390 px. */
@media (max-height: 520px) and (min-width: 681px) {
  .mb-foot { grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; gap: 4px 12px; padding: 6px 12px; }
  .mb-summary { grid-column: auto; overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
  .mb-status { font-size: 14px; }
  .mb-start { min-width: 130px; min-height: 48px; font-size: 20px; }
}
@media (max-width: 680px) {
  .mb-head { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 6px 10px; }
  .mb-meta { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; font-size: 13px; }
  .mb-meta span { padding: 2px 8px; }
  .mb-titles h2 { font-size: 19px; }
  .mb-head__actions .mb-btn { min-height: 44px; padding: 0 12px; font-size: 15px; }
  .mb-seg__btn { min-height: 46px; font-size: 16px; }
  .mb-opts { grid-template-columns: minmax(0, 1fr); }
  .mb-opt { flex-direction: row; align-items: center; }
  .mb-opt .mb-h { flex: 0 0 64px; }
  .mb-opt .mb-seg { flex: 1; }
  .mb-opt .mb-seg__btn { min-height: 44px; }
  .mb-tracks { grid-template-columns: minmax(0, 1fr); }
  .mb-track { min-height: 56px; padding: 6px 10px; }
  .mb-track__title { font-size: 16px; }
  .mb-code__row { grid-template-columns: minmax(0, 1fr); }
  .mb-class__open { width: 100%; }
  .mb-pick { font-size: 16px; }
  .mb-sheet__head, .mb-sheet__body, .mb-sheet__foot { padding-right: 12px; padding-left: 12px; }
  .mb-sheet__title { font-size: 21px; }
  .mb-sheet__actions { width: 100%; }
  .mb-sheet__actions .mb-btn { flex: 1 1 0; }
  .mb-sheet__count { font-size: 18px; }
  .mb-sheet__done { min-width: 120px; }
  .mb-winners-row { grid-template-columns: minmax(0, 1fr); }
  .mb-winners-row .mb-hint { font-size: 14px; }
  /* Phones: a 44 px band of three chips without the head: place, swatch and name, the gap below them. */
  .mb-stage { --mb-chip-font: 16px; --mb-band-h: 53px; }
  body.large-text .mb-stage { --mb-chip-font: 19px; }
  .mb-rank, body.large-text .mb-rank { --mb-band-cap: 3; }
  /* Each chip is a third of the band: a moved chip fades in at its place instead of sliding over its neighbour. */
  .mb-rank { --mb-band-motion: fade; grid-template-columns: minmax(0, 1fr); padding: 4px 8px; }
  .mb-rank__head, .mb-rank__wait { display: none; }
  .mb-rank__list { grid-column: 1; gap: 4px; }
  .mb-rank__row { grid-template-areas: "place dot name" "gap gap gap"; grid-template-columns: auto auto minmax(0, 1fr); gap: 0 4px; padding: 3px 6px; }
  .mb-rank__dot { width: 12px; height: 12px; }
  .mb-rank__gap { font-size: 13px; }
  .mb-rank__best, .mb-rank__delta { display: none; }
  .mb-strip { top: 4px; }
  .mb-intro { bottom: 10px; padding: 6px 12px; font-size: 15px; }
  .mb-countdown, .mb-countdown.is-word { top: 74%; left: 50%; }
  .mb-countdown__text { width: 110px; height: 110px; font-size: 76px; border-width: 4px; }
  .mb-countdown.is-word .mb-countdown__text { font-size: 54px; padding: 10px 26px; }
  .mb-pill { font-size: 15px; }
  .mb-pill[data-leader="true"] { font-size: 18px; }
  body.large-text .mb-pill { font-size: 18px; }
  body.large-text .mb-pill[data-leader="true"] { font-size: 22px; }
  .mb-stir, .mb-chip { top: 38px; font-size: 16px; }
  /* The event chip sits low in the view, ahead of the leader and above the paused badge, so it covers neither the strip
     nor the pack's pills. */
  .mb-chip { top: auto; bottom: 56px; }
  .mb-paused { bottom: 10px; padding: 4px 16px; font-size: 20px; }
  .mb-result { padding: 8px; }
  .mb-result__card { padding: 14px; border-radius: 20px; }
  .mb-result__hero { gap: 10px; }
  .mb-result__panda .mw-mascot { width: 88px; }
  .mb-result[data-mode="all"] .mb-result__panda .mw-mascot { width: 64px; }
  .mb-result__winner { font-size: clamp(40px, 11vw, 44px); gap: 6px; }
  .mb-result__winner--compact { font-size: 32px; }
  .mb-podium__name { font-size: 20px; }
  .mb-podium__place--1 .mb-podium__name { font-size: 26px; }
  .mb-podium__step { font-size: 30px; }
  .mb-runners__item { font-size: 18px; }
  .mb-award { padding: 3px 10px; font-size: 15px; }
  .mb-order { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
  /* Phones: place, swatch and name, then the climb and the time or gap below them. */
  .mb-order__item { grid-template-columns: 1.7em auto minmax(0, 1fr); gap: 0 6px; font-size: 16px; padding: 3px 6px; }
  .mb-order__item .mb-gain { grid-column: 1 / 3; justify-self: end; }
  .mb-order__item :is(.mb-time, .mb-gap) { grid-column: 3; justify-self: start; }
  .mb-banner { font-size: 28px; }
  #marblesDialog[data-render="3d"] .mb-result,
  #marblesDialog[data-render="3d"] .mb-result[data-mode="all"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: clamp(160px, 28vh, 260px) minmax(0, 1fr); gap: 8px; }
  #marblesDialog[data-render="3d"] .mb-result__card { align-self: stretch; max-height: 100%; }
  .mb-result__actions .mb-btn { flex: 1 1 100%; min-height: 50px; font-size: 17px; }
  /* The race controls become a bottom bar (still before Kapat in the Tab order); the stage leaves room for it. */
  /* One row in both views (plan 109 D8): Duraklat/Devam and Ses are 44 px icon buttons, the text buttons share the rest
     and Tüm pist and Sonuca atla show "Pist" and "Atla". The full words stay in the accessible names. */
  .mb-controls {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    display: flex;
    gap: 6px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--glass-strong);
    border-top: 1px solid var(--glass-line);
  }
  .mb-head__actions .mb-controls .mb-btn { position: relative; flex: 1 1 0; min-width: 0; min-height: 48px; padding: 0 4px; font-size: 15px; line-height: 1.1; white-space: nowrap; }
  .mb-head__actions .mb-controls :is(.mb-ctl--pause, .mb-ctl--sound) { flex: 0 0 44px; }
  .mb-ctl--pause::before { font-size: 20px; }
  .mb-ctl--sound .mb-ctl__icon { margin: 0; font-size: 22px; }
  .mb-ctl__text, .mb-ctl__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mb-ctl__short { display: inline; }
  /* The stage reserves the bar's real height: one row of 48 px buttons. */
  #marblesDialog[data-phase="countdown"] .mb-stage, #marblesDialog[data-phase="race"] .mb-stage { margin-bottom: calc(1px + 6px + 54px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .mb-pill { will-change: auto; }
  .mb-sheet[open] { animation: none; }
  .mb-classbtn { transition: none; }
  .mb-classbtn:active { transform: none; }
  .mb-field { transition: none; }
}