@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/noto-sans-400.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/noto-sans-700.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --grid: #dfe3e8;
  --grid-dark: #c9ced6;
  --toolbar: #f1f4f9;
  --header: #e9eaec;
  --text: #202124;
  --text-strong: #3c4043;
  --muted: #5f6368;
  --muted-light: #9aa0a6;
  --blue: #1a73e8;
  --blue-tint: #e8f0fe;
  --green: #69a882;
  --green-dark: #206836;
  --red: #ecc5c9;
  --red-dark: #9b3f48;
  --red-soft: #fff7f7;
  --success: #16a34a;
  --success-alt: #34a853;
  --success-soft: #edf8f1;
  --danger: #dc2626;
  --danger-soft: #fdf0f2;
  --warning-soft: #dfe9f9;
  /* Amber/warning cluster: the unnumbered-teams banner and fuzzy-match badge. */
  --amber-bg: #fde68a;
  --amber-border: #f59e0b;
  --amber-text-strong: #7c2d12;
  --amber-text: #b06a00;
  /* Diagnostic chip (download-log button): stays dark in every theme. */
  --diag-bg: rgba(30, 30, 30, 0.82);
  --diag-fg: #ffffff;
  --paper: #ffffff;
  --paper-transparent: rgba(255, 255, 255, 0);
  --structure: #eef1f4;
  --accent-soft: #eef3fa;
  --slate: #64748b;
  --slate-strong: #334155;
  --blue-strong: #174ea6;
  --blue-bright: #1d4ed8;
  --blue-soft: #d3ebff;
  --success-text: #166534;
  --danger-text: #9f1239;
  --cell-gap: 1.5px;
  --cell-radius: 4px;
  --theme-radius: var(--cell-radius);
  --team-col: 180px;
  --total-col: 38px;
  --place-col: 42px;
  --place-gap: 14px;
  --question-size: 28px;
  --question-col: 40px;
  --theme-score-col: 34px;
  --theme-gap-col: 20px;
  --shootout-control-col: 44px;
  --narrow-col: 30px;
  --sheet-corner-col: 56px;
  --sheet-corner-row: 32px;
  --od-detailed-number-digits: 3ch;
  --od-detailed-number-pad-left: var(--space-0-5);
  --od-detailed-number-pad-right: var(--space-1);
  --od-detailed-name-base-col: 180px;
  --od-detailed-name-base-col-compact: 90px;
  --od-detailed-name-extra-col: 3em;
  --results-place-col-mobile: 48px;
  --results-team-col-mobile: 101px;
  --results-team-pad-mobile: var(--space-1-5);
  --results-total-col-mobile: 42px;
  --results-num-col-mobile: 40px;
  --results-team-city-size-mobile: 9px;

  /* design system — non-EK pages */
  --page: #f6f7f9;
  --surface: var(--paper);
  --surface-tint: var(--action-bg);
  --hover-bg: #eef1f5;
  --border: var(--grid-dark);
  --border-soft: #edf0f4;
  --action-bg: #f8fafc;
  --action-fg: var(--text);
  --action-border: #cfd7e3;
  --action-disabled-bg: var(--structure);
  --action-disabled-fg: var(--muted-light);
  --action-disabled-border: var(--grid-dark);
  --action-disabled-opacity: 0.72;
  --cursor-action: pointer;
  --cursor-disabled: not-allowed;

  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 20px;
  --space-5: 24px;
  --space-5-5: 28px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;

  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-sm-plus: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 24px;
  --radius-pill-lg: 28px;
  --radius-full: 50%;

  --text-2xs: 10px;
  --text-xs-tight: 11px;
  --text-xs: 12px;
  --text-xs-plus: 13px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-lg-plus: 20px;
  --text-lg-xl: 21px;
  --text-xl: 22px;
  --text-xl-plus: 24px;
  --text-2xl: 30px;

  --leading-tight: 1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.55;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --shadow-popover: 0 8px 20px rgba(32, 33, 36, 0.18);
  --shadow-popover-up: 0 -8px 20px rgba(32, 33, 36, 0.18);
  --shadow-card: 0 8px 24px rgba(32, 33, 36, 0.18);
  --shadow-modal: 0 18px 48px rgba(32, 33, 36, 0.22);
  --shadow-focus-success: 0 0 0 3px rgba(22, 163, 74, 0.12);
  --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.12);
  --shadow-scroll-inset: inset -24px 0 18px -22px rgba(32, 33, 36, 0.45);
  --focus-ring-none: 0;
  --focus-outline-offset-tight: calc(var(--space-0-5) * -1);

  --backdrop: rgba(32, 33, 36, 0.35);

  --z-base: 1;
  --z-raised: 2;
  --z-sticky: 5;
  --z-dropdown: 30;
  --z-popover: 35;
  --z-modal: 80;
  --z-toast: 120;
  --z-tooltip: 999;

  /* page chrome padding tiers */
  --page-pad-x: 24px;
  --page-pad-x-tight: 16px;
  --page-pad-x-loose: 36px;
  --page-pad-y: 16px;
  --page-pad-y-tight: 8px;

  /* scroll-fade utility */
  --scroll-fade-size: 24px;
  --scroll-fade-color: rgba(32, 33, 36, 0.18);
  --inline-fade-width: 34px;
  --inline-fade-bg: linear-gradient(to right, var(--paper-transparent), var(--paper));

  --font-sans: "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── scroll-fade utility ──────────────────────────────────
   Pure-CSS scroll shadows (Lea Verou trick): a soft fade appears
   at the edge the user CAN scroll toward, and disappears when
   they've reached that end. Background covers move with content
   (background-attachment: local) so they reveal the static
   shadows underneath as scrolling progresses.

   Apply directly to the overflow:auto element. Override
   --scroll-fade-bg if the container's background isn't --surface.

   Variants:
     .scroll-fade      — both vertical edges (top + bottom)
     .scroll-fade-x    — both horizontal edges (left + right)
     .scroll-fade-xy   — all four edges */
.scroll-fade,
.scroll-fade-x,
.scroll-fade-xy,
.table-scroll,
.sheet-frame,
.tabs,
.scoreboard,
.viewer-sheet,
.toolbar,
.od-shootout-team-list,
.entry-suggest {
  --scroll-fade-bg: var(--surface);
}

.scroll-fade,
.entry-suggest {
  background-image:
    linear-gradient(var(--scroll-fade-bg) 30%, transparent),
    linear-gradient(transparent, var(--scroll-fade-bg) 70%),
    radial-gradient(farthest-side at 50% 0, var(--scroll-fade-color), transparent),
    radial-gradient(farthest-side at 50% 100%, var(--scroll-fade-color), transparent);
  background-position: center top, center bottom, center top, center bottom;
  background-repeat: no-repeat;
  background-size:
    100% var(--scroll-fade-size),
    100% var(--scroll-fade-size),
    100% calc(var(--scroll-fade-size) * 0.5),
    100% calc(var(--scroll-fade-size) * 0.5);
  background-attachment: local, local, scroll, scroll;
}

.scroll-fade-x,
.tabs,
.scoreboard,
.viewer-sheet,
.toolbar {
  background-image:
    linear-gradient(to right, var(--scroll-fade-bg) 30%, transparent),
    linear-gradient(to left, var(--scroll-fade-bg) 30%, transparent),
    radial-gradient(farthest-side at 0 50%, var(--scroll-fade-color), transparent),
    radial-gradient(farthest-side at 100% 50%, var(--scroll-fade-color), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size:
    var(--scroll-fade-size) 100%,
    var(--scroll-fade-size) 100%,
    calc(var(--scroll-fade-size) * 0.5) 100%,
    calc(var(--scroll-fade-size) * 0.5) 100%;
  background-attachment: local, local, scroll, scroll;
}

.scroll-fade-xy,
.table-scroll,
.sheet-frame,
.od-shootout-team-list {
  background-image:
    linear-gradient(var(--scroll-fade-bg) 30%, transparent),
    linear-gradient(transparent, var(--scroll-fade-bg) 70%),
    linear-gradient(to right, var(--scroll-fade-bg) 30%, transparent),
    linear-gradient(to left, var(--scroll-fade-bg) 30%, transparent),
    radial-gradient(farthest-side at 50% 0, var(--scroll-fade-color), transparent),
    radial-gradient(farthest-side at 50% 100%, var(--scroll-fade-color), transparent),
    radial-gradient(farthest-side at 0 50%, var(--scroll-fade-color), transparent),
    radial-gradient(farthest-side at 100% 50%, var(--scroll-fade-color), transparent);
  background-position:
    center top, center bottom,
    left center, right center,
    center top, center bottom,
    left center, right center;
  background-repeat: no-repeat;
  background-size:
    100% var(--scroll-fade-size),
    100% var(--scroll-fade-size),
    var(--scroll-fade-size) 100%,
    var(--scroll-fade-size) 100%,
    100% calc(var(--scroll-fade-size) * 0.5),
    100% calc(var(--scroll-fade-size) * 0.5),
    calc(var(--scroll-fade-size) * 0.5) 100%,
    calc(var(--scroll-fade-size) * 0.5) 100%;
  background-attachment: local, local, local, local, scroll, scroll, scroll, scroll;
}

/* per-container background tints to keep covers matching the bg */
.sheet-frame { --scroll-fade-bg: var(--structure); }
.tabs { --scroll-fade-bg: var(--surface-tint); }
.toolbar { --scroll-fade-bg: var(--toolbar); }

/* ── popovers ─────────────────────────────────────────────
   Shared base for all hover-revealed name/team popovers
   (player-select, grid-slot-team, results-team-name,
   od-detailed-team-name) and the JS-driven .floating-name-popover.
   Individual rules below only set positioning + display behavior. */
.player-select-popover,
.grid-slot-team-popover,
.results-team-name-popover,
.match-table.od-detailed .od-detailed-team-name-popover,
.match-table .ek-team-cell .od-detailed-team-name-popover,
.floating-name-popover {
  max-width: min(420px, calc(100vw - 32px));
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--grid-dark);
  border-radius: var(--radius-sm);
  background-color: var(--paper);
  color: var(--text);
  box-shadow: var(--shadow-popover);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  line-height: var(--leading-snug);
  white-space: normal;
  pointer-events: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-sans);
  color: var(--text);
  /* Don't let iOS bump font sizes on rotate, and don't rubber-band/zoom: the app
     is a fixed shell whose inner sections scroll, not the page (see menu.js for
     the matching gesture/double-tap zoom guards). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
}

button,
input,
select,
textarea {
  font: inherit;
}

[hidden] {
  display: none !important;
}

/* ── design system: layout primitives ─────────────────────── */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stack-sm { gap: var(--space-2); }
.stack-lg { gap: var(--space-5); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.section > h2 {
  margin: 0;
  font-size: var(--text-lg);
}

/* ── design system: surfaces ─────────────────────────────── */

.card {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.list-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}

a.list-row:hover { background: var(--hover-bg); }

.list-row-title { font-weight: var(--fw-semibold); }

.list-action-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.list-action-row .list-row {
  flex: 1 1 auto;
}

.list-action-row form {
  display: flex;
}

.list-action-row .btn {
  min-height: 100%;
}

.muted {
  color: var(--muted);
  font-size: var(--text-sm);
}

.empty {
  color: var(--muted);
  margin: 0;
}

.data-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.data-grid h3 {
  margin: 0;
  font-size: var(--text-base);
}

.table-scroll {
  overflow: auto;
}

.data-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--text-sm);
}

.data-table th,
.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--grid);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  color: var(--muted);
  font-weight: var(--fw-bold);
}

.data-table input:not([type="checkbox"]),
.data-table select {
  width: 100%;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
}

.access-table {
  min-width: 640px;
  table-layout: fixed;
}

.access-table th,
.access-table td {
  vertical-align: middle;
}

.access-name-col { width: 48%; }
.access-role-col { width: 220px; }
.access-action-col { width: 180px; }

.access-name-cell {
  font-size: var(--text-base);
}

.access-role-cell select,
.access-name-cell input {
  max-width: 280px;
}

.access-role-label {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
}

.access-action-cell {
  text-align: left;
  white-space: nowrap;
}

.access-action-cell .btn {
  min-width: 118px;
}

/* ── design system: form controls ────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.input,
.field > input,
.field > textarea,
.field > select {
  font-size: var(--text-base);
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  outline: 0;
}

.input:focus,
.field > input:focus,
.field > textarea:focus,
.field > select:focus {
  border-color: var(--blue);
}

.field > textarea {
  resize: vertical;
  min-height: 96px;
  font-family: inherit;
}

.game-type-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.number-form { gap: var(--space-3); }

.number-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.number-row {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  align-items: center;
  gap: var(--space-3);
}

.number-row-num,
.number-row-team {
  font-size: var(--text-base);
  min-height: 36px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  color: var(--text);
  outline: 0;
  font-family: inherit;
  display: flex;
  align-items: center;
}

.number-row-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  width: 100%;
  justify-content: flex-end;
}

.number-row-team {
  text-align: left;
}

/* Default view: number is passive (gray flat), team name looks like a white card. */
.number-form .number-row-num {
  background: var(--structure);
  border-color: transparent;
}
.number-form .number-row-team {
  background: var(--surface);
  border-color: var(--border);
}

/* Edit view (Замена номера): swap — number becomes the editable card, team name becomes the gray flat label. */
.number-form.editing .number-row-num {
  background: var(--surface);
  border-color: var(--border);
}
.number-form.editing .number-row-team {
  background: var(--structure);
  border-color: transparent;
}

.number-row-num:not([readonly]):focus { border-color: var(--blue); }

.numbers-help {
  margin: 0;
}

.numbers-actions { flex-wrap: wrap; }

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.modal-dialog {
  width: min(560px, calc(100vw - var(--space-6)));
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  color: var(--text);
}

.modal-dialog::backdrop {
  background: var(--backdrop);
}

.modal-dialog h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.code-display {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  letter-spacing: 2px;
  text-align: center;
}

/* ── design system: buttons & links ──────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 1px solid var(--action-border);
  border-radius: var(--radius-md);
  background: var(--action-bg);
  color: var(--text);
  font-weight: var(--fw-bold);
  cursor: var(--cursor-action);
  text-decoration: none;
}

.btn:hover { border-color: var(--text); }

.btn.danger {
  border-color: var(--red-dark);
  color: var(--red-dark);
  background: var(--red-soft);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  border-color: var(--action-disabled-border);
  background: var(--action-disabled-bg);
  color: var(--action-disabled-fg);
  cursor: var(--cursor-disabled);
  opacity: var(--action-disabled-opacity);
}

.btn-block { width: 100%; }

.action-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 var(--space-3);
  border: 1px solid var(--action-border);
  border-radius: var(--radius-md);
  background: var(--action-bg);
  color: var(--text);
  font-size: var(--text-xs-plus);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--action-border);
  border-radius: var(--radius-md);
  background: var(--action-bg);
  color: var(--text);
  font-size: 17px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  text-decoration: none;
}

.player-overrides-table {
  overflow: visible;
}

.player-overrides-table .override-action-cell {
  position: sticky;
  right: 0;
  z-index: 2;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  padding: 0;
  border-bottom: 1px solid var(--grid);
  background: var(--surface);
  text-align: center;
  vertical-align: middle;
}

.override-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: var(--text-md);
  line-height: var(--leading-tight);
}

.override-edit-button:hover {
  opacity: 0.75;
}

.override-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.override-summary div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.override-summary span {
  color: var(--muted);
  font-size: var(--text-xs);
}

.override-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-link {
  color: var(--text);
  text-decoration: underline;
  font-weight: var(--fw-semibold);
}

.disclosure > summary {
  width: max-content;
  list-style: none;
}

.disclosure > summary::-webkit-details-marker {
  display: none;
}

.disclosure > form {
  margin-top: var(--space-3);
}

/* ── public + host common page chrome ────────────────────── */

.public {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--text);
}

.public-top {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
}

.public-top h1 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
}

.public-back {
  font-size: var(--text-lg);
  text-decoration: none;
  color: inherit;
}

.public-main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.public-meta {
  color: var(--muted);
  font-size: var(--text-sm);
}

.public-user {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.public-user:hover {
  text-decoration: underline;
}

.public-description {
  margin: 0;
  line-height: var(--leading-relaxed);
}

.public-description img {
  max-width: 100%;
  height: auto;
}

.host {
  overflow: hidden;
  background: var(--structure);
  /* Header height, kept in a variable so the board's fixed lower section and the
     modals that cover it stay in sync (see .board-main / .card-overlay). */
  --xy-header-h: 64px;
}

.host-top {
  position: relative;
  z-index: var(--z-dropdown);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 64px;
  padding: var(--page-pad-y-tight) var(--page-pad-x);
  border-bottom: 0;
  background: var(--structure);
}

.host h1 {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: 0;
}

.game-host-top {
  height: 44px;
  gap: var(--space-2-5);
  padding: var(--space-1-5) var(--page-pad-x-tight);
}

.game-header-main {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 0;
  gap: var(--space-3);
}

.game-header-main h1 {
  flex: 0 0 auto;
  font-size: var(--text-xl);
}

.od-header-progress {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs-plus);
  line-height: var(--leading-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-breadcrumbs {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  min-width: 120px;
  max-width: min(34vw, 420px);
  gap: 6px;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.game-breadcrumbs a,
.game-breadcrumbs span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-breadcrumbs a {
  flex: 0 1 auto;
  color: var(--muted);
  font-weight: var(--fw-regular);
  text-decoration: none;
}

.game-breadcrumbs a:hover {
  text-decoration: underline;
}

.game-breadcrumbs .game-breadcrumbs-game,
.game-breadcrumbs .game-breadcrumbs-current {
  color: var(--text);
  font-weight: var(--fw-bold);
}

.game-breadcrumbs-sep {
  flex: 0 0 auto;
  color: var(--grid-dark);
}

.od-page .match-main,
.si-page .match-main,
.ek-page .match-main {
  height: calc(100vh - 44px);
  padding-top: var(--space-2);
}

.host-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
}

.sheet-shell {
  height: 196px;
  border-bottom: 1px solid var(--grid);
  background: var(--surface-tint);
}

.doc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 86px;
  padding: 12px 24px 8px;
}

.sheet-icon {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  grid-template-rows: repeat(2, 7px);
  gap: 3px;
  width: 36px;
  height: 44px;
  padding: 14px 8px 8px;
  border-radius: var(--radius-sm);
  background: var(--success-alt);
  box-shadow: inset 0 -12px 0 rgba(0, 0, 0, 0.08);
}

.sheet-icon span {
  background: rgba(255, 255, 255, 0.85);
}

.doc-title {
  margin-bottom: 8px;
  font-size: var(--text-xl-plus);
  line-height: var(--leading-tight);
  letter-spacing: 0;
}

.menu-row {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: var(--text-base);
  color: var(--text-strong);
}

.active-menu {
  padding: 8px 11px;
  border-radius: var(--radius-md);
  background: var(--header);
}

.doc-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.ghost-button,
.share-button {
  min-height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--blue-strong);
  background: var(--blue-soft);
  text-decoration: none;
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
}

.ghost-button {
  color: var(--text-strong);
  background: var(--structure);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 58px;
  margin: 0 var(--space-4);
  padding: 0 18px;
  border-radius: var(--radius-pill-lg);
  background-color: var(--toolbar);
  color: var(--text-strong);
}

.toolbar button {
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm-plus);
  background: transparent;
  color: inherit;
}

.toolbar button:hover {
  background: var(--grid);
}

.divider {
  width: 1px;
  height: var(--space-5-5);
  background: var(--grid-dark);
}

.sync-stack {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.viewers-count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs-plus);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
  user-select: none;
}

.viewers-count[hidden] {
  display: none;
}

.sync-status {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--blue);
}

.sync-status::before {
  content: "";
  display: block;
  box-sizing: border-box;
}

.sync-status:not([data-state="saved"])::before {
  width: 16px;
  height: 16px;
  border: 2px solid var(--action-border);
  border-top-color: currentColor;
  border-radius: var(--radius-full);
  animation: sync-spin 700ms linear infinite;
}

.sync-status[data-state="error"] {
  color: var(--red-dark);
}

.sync-status[data-state="saved"]::before {
  width: 14px;
  height: 8px;
  border-left: 2.5px solid var(--green-dark);
  border-bottom: 2.5px solid var(--green-dark);
  transform: translateY(-2px) rotate(-45deg);
}

/* Offline (no connection) and pending (queued offline edits) are steady states,
   not spinners — override the generic non-saved spinner. */
.sync-status[data-state="offline"]::before,
.sync-status[data-state="pending"]::before {
  width: 12px;
  height: 12px;
  border: 2px solid var(--action-border);
  border-radius: var(--radius-full);
  animation: none;
  transform: none;
}
.sync-status[data-state="offline"] {
  color: var(--text-muted, #888);
}
.sync-status[data-state="pending"] {
  color: var(--orange-dark, #c47f00);
}
.sync-status[data-state="pending"]::before {
  background: currentColor;
  border-color: currentColor;
}

@keyframes sync-spin {
  to {
    transform: rotate(360deg);
  }
}

.formula-bar {
  display: grid;
  grid-template-columns: 120px 48px 1fr;
  align-items: center;
  height: 52px;
  background: var(--paper);
  border-top: 1px solid var(--border-soft);
}

.name-box,
.fx,
.formula-value {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-right: 1px solid var(--grid);
}

.fx {
  color: var(--muted-light);
  font-size: var(--text-xl-plus);
  font-style: italic;
}

.formula-value {
  font-size: var(--text-base);
}

.sheet-main {
  height: calc(100vh - 244px);
  min-height: 360px;
  overflow: hidden;
  background: var(--paper);
}

.match-main {
  height: calc(100vh - 64px);
  min-height: 360px;
  padding: var(--space-3-5);
  overflow: hidden;
  background: var(--structure);
}

.sheet-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  border-top: 0;
  background-color: var(--structure);
}

.fight-frame {
  border: 0;
  background-color: var(--structure);
}

.corner-cell {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 8;
  width: var(--sheet-corner-col);
  height: var(--sheet-corner-row);
  background: var(--surface-tint);
  border-right: 1px solid var(--grid-dark);
  border-bottom: 1px solid var(--grid-dark);
}

.table-host {
  min-width: max-content;
  background: var(--structure);
}

.table-host.grid-host {
  width: 100%;
  min-width: 0;
}

.match-table {
  border-collapse: separate;
  border-spacing: 0;
  margin-left: var(--sheet-corner-col);
  margin-top: calc(var(--sheet-corner-row) * -1);
  table-layout: fixed;
  background: var(--structure);
  font-size: var(--text-sm);
  line-height: 1.15;
}

.fight-frame .match-table {
  margin: var(--space-0);
}

.match-table th,
.match-table td {
  --cell-fill: var(--paper);
  height: var(--question-size);
  min-width: var(--question-size);
  padding: 2px 4px;
  border: var(--cell-gap) solid transparent;
  border-radius: var(--cell-radius);
  background:
    linear-gradient(var(--cell-fill), var(--cell-fill)) padding-box,
    linear-gradient(var(--structure), var(--structure)) border-box;
  white-space: nowrap;
  vertical-align: middle;
}

.match-table thead th {
  --cell-fill: var(--structure);
  position: sticky;
  top: 0;
  z-index: 4;
  height: var(--question-size);
  border-color: var(--structure);
  font-weight: var(--fw-regular);
  text-align: center;
}

.match-table .battle {
  overflow: hidden;
  padding-left: 8px;
  text-align: left;
}

.battle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.battle-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.venue-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--action-border);
  border-radius: var(--radius-sm-plus);
  background: var(--action-bg);
  color: var(--text);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  cursor: pointer;
}

.venue-edit-button:hover,
.venue-edit-button:focus {
  border-color: var(--blue);
  outline: 0;
}

.venue-dialog {
  width: min(340px, calc(100vw - var(--space-6)));
  padding: 0;
  border: 1px solid var(--grid-dark);
  border-radius: var(--radius-md);
  background-color: var(--paper);
  color: var(--text);
  box-shadow: var(--shadow-modal);
}

.venue-dialog::backdrop {
  background: var(--backdrop);
}

.venue-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.venue-dialog-form h2 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
}

.venue-dialog-select {
  width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--action-border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text);
  font: inherit;
}

.venue-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.finish-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-strong);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  white-space: nowrap;
  cursor: pointer;
}

.finish-toggle {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--blue);
}

.shootout-add-button,
.theme-delete-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--action-border);
  border-radius: var(--radius-sm-plus);
  background: var(--action-bg);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  line-height: var(--leading-tight);
  white-space: nowrap;
  cursor: pointer;
}

.shootout-add-button:disabled,
.theme-delete-button:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.sticky {
  position: sticky;
  z-index: 5;
}

.match-table thead .sticky {
  z-index: 9;
}

.match-table tbody .sticky {
  z-index: 3;
}

/* Frozen cells sit above scrolling content, so the transparency around their
   rounded-corner cards (the corner pockets and inter-cell seams) lets colored
   answer cells show through as they scroll underneath. A structure-colored
   box-shadow fills those gaps with solid gray. The sticky header row gets the
   same treatment so its bottom edge stays a clean gray line instead of going
   jagged where body cells scroll under the rounded corners. */
.match-table thead th,
.match-table tbody .sticky {
  box-shadow: 0 0 0 var(--cell-gap) var(--structure);
}

/* The sticky header's rounded bottom corners leave transparent pockets that
   reveal body rows scrolling underneath, so its bottom edge reads as a jagged,
   scalloped line. Squaring just the bottom corners turns it into one clean gray
   rule while keeping the rounded top. */
.match-table thead th {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.sticky-name {
  left: var(--sheet-corner-col);
  width: var(--team-col);
  min-width: var(--team-col);
  max-width: var(--team-col);
}

.fight-frame .sticky-name {
  left: 0;
}

.sticky-total {
  left: calc(var(--sheet-corner-col) + var(--team-col));
  width: var(--total-col);
  min-width: var(--total-col);
  max-width: var(--total-col);
}

.fight-frame .sticky-total {
  left: var(--team-col);
}

.sticky-place {
  left: calc(var(--sheet-corner-col) + var(--team-col) + var(--total-col));
  width: var(--place-col);
  min-width: var(--place-col);
  max-width: var(--place-col);
}

.fight-frame .sticky-place {
  left: calc(var(--team-col) + var(--total-col));
}

.sticky-place-gap {
  left: calc(var(--sheet-corner-col) + var(--team-col) + var(--total-col) + var(--place-col));
}

.fight-frame .sticky-place-gap {
  left: calc(var(--team-col) + var(--total-col) + var(--place-col));
}

.match-table .place-gap,
.match-table .place-gap-head {
  --cell-fill: var(--structure);
  width: var(--place-gap);
  min-width: var(--place-gap);
  max-width: var(--place-gap);
  padding: 0;
  border-color: var(--structure);
  border-radius: 0;
}

.match-table .team-name {
  padding-left: 8px;
  font-size: var(--text-sm);
  white-space: normal;
}

.number {
  text-align: center;
}

.question-head {
  width: var(--question-col);
  min-width: var(--question-col);
}

/* Подробно question header: count of teams that took the question, muted and
   smaller, stacked in the free space above the question number. */
.match-table.od-detailed thead th.question-head:has(.od-detailed-qhead) {
  vertical-align: bottom;
  height: calc(var(--question-size) + 11px);
}

.od-detailed-qhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.od-detailed-qcount {
  font-size: 0.62em;
  color: var(--muted);
  min-height: 1em;
}

.theme-head,
.theme-score {
  width: var(--theme-score-col);
  min-width: var(--theme-score-col);
  max-width: var(--theme-score-col);
  text-align: center;
}

.shootout-controls-head,
.shootout-controls-cell {
  width: var(--shootout-control-col);
  min-width: var(--shootout-control-col);
  max-width: var(--shootout-control-col);
  text-align: center;
}

.match-table .shootout-controls-head {
  overflow: visible;
  padding: 2px;
  vertical-align: middle;
}

.match-table .shootout-controls-cell {
  --cell-fill: var(--structure);
  border-color: var(--structure);
  border-radius: 0;
}

.match-table .shootout-adjacent-gap,
.match-table .shootout-adjacent-gap-head {
  width: 2px;
  min-width: 2px;
  max-width: 2px;
  padding: 0;
  border: 0;
}

.shootout-controls-head .shootout-add-button,
.shootout-controls-head .theme-delete-button {
  display: flex;
  margin: 0 auto;
}

.shootout-controls-head .theme-delete-button {
  position: absolute;
  top: calc(50% + 12px);
  left: 50%;
  z-index: 8;
  margin: 0;
  transform: translateX(-50%);
}

.match-table .theme-block {
  border-color: var(--structure);
  border-width: 1px;
  border-radius: 0;
}

.match-table .theme-block-top-left {
  border-top-left-radius: var(--theme-radius);
}

.match-table .theme-block-bottom-left {
  border-bottom-left-radius: var(--theme-radius);
}

.match-table .theme-block-score {
  border-top-right-radius: var(--theme-radius);
  border-bottom-right-radius: var(--theme-radius);
}

.gap,
.gap-head {
  width: var(--theme-gap-col);
  min-width: var(--theme-gap-col);
  border-right: 0;
}

.match-table .gap,
.match-table .gap-head {
  --cell-fill: var(--structure);
  border-radius: 0;
  border-color: var(--structure);
}

.match-table .player-cell {
  position: relative;
  width: calc(var(--question-col) * 5);
  min-width: calc(var(--question-col) * 5);
  padding: 0;
}

.player-editor {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.player-select-wrap {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}

.player-select-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  bottom: 0;
  z-index: 1;
  display: none;
  width: 32px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--paper));
  pointer-events: none;
}

.player-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 2;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text);
  border-bottom: 1.5px solid var(--text);
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.player-select-wrap.player-select-truncated::before {
  display: block;
}

.player-select-popover {
  position: absolute;
  top: calc(100% - 2px);
  left: var(--space-1-5);
  z-index: var(--z-dropdown);
  display: none;
}

.player-cell:hover,
.player-cell:focus-within {
  z-index: var(--z-popover);
}

.player-select-truncated:hover .player-select-popover,
.player-select-truncated:focus-within .player-select-popover {
  display: block;
}

.floating-popovers-enabled .player-select-truncated:hover .player-select-popover,
.floating-popovers-enabled .player-select-truncated:focus-within .player-select-popover {
  display: none;
}

.player-cell select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: calc(var(--question-size) - 2 * var(--cell-gap));
  padding-left: 8px;
  padding-right: 26px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--text-sm);
}

.player-cell select:focus {
  box-shadow: inset 0 0 0 2px var(--blue);
}

.shootout-add-button:hover,
.shootout-add-button:focus,
.theme-delete-button:hover,
.theme-delete-button:focus {
  outline: 2px solid rgba(95, 99, 104, 0.2);
  outline-offset: -2px;
}

.match-table .readonly-player {
  width: calc(var(--question-col) * 5);
  min-width: calc(var(--question-col) * 5);
  padding-left: 8px;
  color: var(--text);
  font-size: var(--text-sm);
}

.answer-cell {
  width: var(--question-col);
  min-width: var(--question-col);
  cursor: pointer;
}

.match-finished .answer-cell {
  cursor: default;
}

.answer-cell:hover:not(.active),
.answer-cell:focus:not(.active) {
  outline: 2px dashed rgba(26, 115, 232, 0.4);
  outline-offset: -3px;
}

.match-finished .answer-cell:hover:not(.active),
.match-finished .answer-cell:focus:not(.active) {
  outline: 0;
}

.answer-cell.active {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
}

.answer-cell.active {
  box-shadow:
    inset 0 0 0 2px var(--blue),
    inset 0 0 0 3px var(--paper);
}

.collab-cursor-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
}

.collab-cursor {
  position: fixed;
  box-sizing: border-box;
  border: 2px solid var(--cursor-color);
  box-shadow: inset 0 0 0 1px var(--paper);
  pointer-events: none;
}

.collab-cursor-marker {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--cursor-color);
  box-shadow: 0 0 0 2px var(--paper);
  pointer-events: auto;
}

.collab-cursor-label {
  position: absolute;
  left: -2px;
  bottom: 14px;
  display: none;
  max-width: 160px;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  background: var(--cursor-color);
  color: var(--paper);
  font-size: var(--text-xs);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow);
}

.collab-cursor-marker:hover .collab-cursor-label,
.collab-cursor-marker:focus .collab-cursor-label {
  display: block;
}

.answer-cell.right {
  --cell-fill: var(--green);
}

.answer-cell.wrong {
  --cell-fill: var(--red);
}

/* Pending edit: a small spinner in the cell's lower-right corner while the
   edit is in flight, cleared once the server confirms it (refreshPendingMarkers).
   Covers KSI/EK answer cells and OD entry cells (OD shootout cells also carry
   .answer-cell). */
.answer-cell.pending,
.entry-cell.pending {
  position: relative;
}

.answer-cell.pending::before,
.entry-cell.pending::before {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--blue);
  animation: sync-spin 700ms linear infinite;
  pointer-events: none;
  z-index: 2;
}

.answer-cell.cell-selected {
  position: relative;
}

.answer-cell.cell-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(26, 115, 232, 0.18);
  box-shadow:
    var(--cell-selection-top, 0 0 0 0 transparent),
    var(--cell-selection-bottom, 0 0 0 0 transparent),
    var(--cell-selection-left, 0 0 0 0 transparent),
    var(--cell-selection-right, 0 0 0 0 transparent);
  z-index: 1;
}

.answer-cell.cell-selected.active::after {
  background: transparent;
}

.answer-cell.cell-selection-top {
  --cell-selection-top: inset 0 2px 0 var(--blue);
}

.answer-cell.cell-selection-bottom {
  --cell-selection-bottom: inset 0 -2px 0 var(--blue);
}

.answer-cell.cell-selection-left {
  --cell-selection-left: inset 2px 0 0 var(--blue);
}

.answer-cell.cell-selection-right {
  --cell-selection-right: inset -2px 0 0 var(--blue);
}

.answer-row td {
  height: var(--question-size);
}

.match-table .team-gap {
  height: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--structure);
  line-height: 0;
}

.total-cell,
.place-cell,
.plus-cell {
  font-variant-numeric: tabular-nums;
}

.tiebreak-cell {
  width: var(--place-col);
  min-width: var(--place-col);
}

.tiebreak-input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
}

.place-input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.match-finished input:not(.finish-toggle),
.match-finished select {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 1;
}

.place-cell:focus-within {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
}

.viewer-readonly .answer-cell {
  cursor: default;
}

.viewer-readonly .answer-cell:hover,
.viewer-readonly .answer-cell:focus {
  outline: 0;
}

.narrow {
  width: var(--narrow-col);
  min-width: var(--narrow-col);
}

.subnav {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin-bottom: 8px;
}

.match-link {
  color: var(--text);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.fest-table {
  width: 100%;
  min-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--paper);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.fest-table th,
.fest-table td {
  padding: 9px 10px;
  border-right: 1px solid var(--grid);
  border-bottom: 1px solid var(--grid);
  background: var(--paper);
  vertical-align: top;
}

.fest-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--header);
  color: var(--text-strong);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-align: left;
  text-transform: uppercase;
}

.fest-table .stage-name {
  width: 150px;
  color: var(--text-strong);
  font-weight: var(--fw-bold);
}

.fest-table .code-cell,
.fest-table .venue-number {
  width: 58px;
}

.fest-table .venue-cell {
  width: 150px;
  color: var(--text-strong);
}

.teams-cell span {
  display: block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.number-list {
  min-width: 120px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.status-cell {
  width: 92px;
  color: var(--text-strong);
  white-space: nowrap;
}

.status-cell.finished {
  color: var(--green-dark);
  font-weight: var(--fw-bold);
}

.status-cell.pending,
.muted-cell {
  color: var(--muted);
}

.seed-import-panel {
  align-items: flex-start;
}

.seed-import-table {
  --results-place-col: 76px;
  --results-team-col: 420px;
  width: max-content;
  min-width: 560px;
}

.results-table.seed-import-table thead th.results-team-head,
.results-table.seed-import-table .results-team {
  width: var(--results-team-col);
  min-width: var(--results-team-col);
  max-width: var(--results-team-col);
}

.seed-import-table .seed-number-head,
.seed-import-table .seed-number-cell {
  width: var(--results-place-col);
  min-width: var(--results-place-col);
  max-width: var(--results-place-col);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.seed-import-table .seed-declined-head,
.seed-import-table .seed-declined-cell {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  text-align: center;
}

.seed-import-table .seed-declined-row td {
  color: var(--muted);
  background: var(--surface-tint);
}

.seed-import-table .seed-declined-row .results-team-truncated .results-team-name::after {
  background: linear-gradient(to right, transparent, var(--surface-tint));
}

.seed-import-table .seed-waitlist-cell {
  color: var(--text);
  font-size: var(--text-xs-plus);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  background: var(--structure);
}

.venue-input {
  width: 100%;
  min-height: 28px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm-plus);
  background: transparent;
  outline: 0;
}

.venue-input:focus {
  border-color: var(--blue);
  background: var(--paper);
}

.fest-grid {
  width: 100%;
  min-width: 1140px;
  padding-bottom: 24px;
}

.fest-columns {
  display: grid;
  grid-template-columns:
    minmax(190px, 1fr)
    minmax(190px, 1fr)
    minmax(190px, 1fr)
    minmax(190px, 1fr)
    minmax(190px, 1fr)
    minmax(190px, 1fr);
  grid-template-rows: auto 1fr;
  gap: 8px;
  align-items: start;
}

.grid-stage {
  display: contents;
}

.grid-stage-head {
  grid-row: 1;
  min-width: 0;
}

.grid-matches {
  grid-row: 2;
}

.grid-stage-head {
  display: block;
  min-height: 42px;
  margin-bottom: 4px;
  padding: 6px 8px;
  border: var(--cell-gap) solid transparent;
  border-radius: var(--cell-radius);
  background:
    linear-gradient(var(--structure), var(--structure)) padding-box,
    linear-gradient(var(--structure), var(--structure)) border-box;
}

.grid-stage-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.grid-stage h2 {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.1;
}

.stage-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--text-xs-tight);
  line-height: 1.2;
}

.grid-matches {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.grid-match {
  border: var(--cell-gap) solid var(--structure);
  border-radius: var(--radius-md);
  background: var(--structure);
  overflow: hidden;
}

body:not(.embedded-match) .grid-match {
  content-visibility: auto;
  contain-intrinsic-size: auto 160px;
}

.grid-match-title,
.grid-match-venue {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-match-title {
  color: var(--text);
  font-size: var(--text-xs-plus);
  font-weight: var(--fw-regular);
  line-height: 1.15;
}

.grid-match-title-link {
  text-decoration: none;
}

.grid-match-title-link:hover,
.grid-match-title-link:focus {
  color: var(--blue);
  outline: 0;
}

.grid-match-venue {
  color: var(--muted);
  font-size: var(--text-xs-tight);
}

.grid-slot-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px 32px;
  grid-auto-rows: 24px;
  border-radius: inherit;
  overflow: hidden;
}

.grid-reseed-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: inherit;
  overflow: hidden;
  table-layout: fixed;
}

.grid-slot-cell {
  height: 24px;
  min-width: 0;
  box-sizing: border-box;
  padding: 3px 6px;
  border-bottom: var(--cell-gap) solid var(--structure);
  background: var(--paper);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  line-height: 16px;
  display: flex;
  align-items: center;
}

.grid-slot-head {
  background: var(--structure);
  color: var(--text);
  font-size: var(--text-xs-plus);
  line-height: 15px;
}

.grid-match-head-cell {
  justify-content: flex-start;
}

.grid-match-head-layout {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  min-width: 0;
  line-height: 15px;
}

.grid-match-head-layout .grid-match-title {
  flex: 0 0 auto;
}

.grid-match-head-layout .grid-match-venue {
  flex: 1 1 auto;
  min-width: 0;
}

.grid-head-metric {
  display: block;
  line-height: 15px;
}

.grid-slot-grid .slot-total-head,
.grid-slot-grid .slot-place-head,
.grid-slot-grid .slot-total,
.grid-slot-grid .slot-place {
  justify-content: flex-end;
  text-align: right;
}

.grid-reseed-table td {
  height: 24px;
  padding: 3px 6px;
  border-bottom: var(--cell-gap) solid var(--structure);
  background: var(--paper);
  font-size: var(--text-xs);
  vertical-align: middle;
}

.grid-reseed-table tr:last-child td {
  border-bottom: 0;
}

.grid-slot-row-last,
.grid-slot-phantom-cell {
  border-bottom: 0;
}

.grid-slot-phantom-cell {
  background: var(--structure);
}

.grid-slot-top-left { border-top-left-radius: var(--radius-md); }
.grid-slot-top-right { border-top-right-radius: var(--radius-md); }
.grid-slot-bottom-left { border-bottom-left-radius: var(--radius-md); }
.grid-slot-bottom-right { border-bottom-right-radius: var(--radius-md); }

.slot-source {
  position: relative;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.grid-slot-team:hover,
.grid-slot-team:focus-within {
  overflow: visible;
  z-index: 10;
}

.grid-slot-team-name {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  outline-offset: -2px;
}

.grid-slot-team-truncated .grid-slot-team-name::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 34px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--paper));
  pointer-events: none;
}

.grid-slot-team-popover {
  position: absolute;
  top: calc(100% - 2px);
  left: var(--space-1-5);
  z-index: var(--z-dropdown);
  display: none;
}

.grid-slot-team-truncated:hover .grid-slot-team-popover,
.grid-slot-team-truncated:focus-within .grid-slot-team-popover {
  display: block;
}

.floating-popovers-enabled .grid-slot-team-truncated:hover .grid-slot-team-popover,
.floating-popovers-enabled .grid-slot-team-truncated:focus-within .grid-slot-team-popover {
  display: none;
}

.slot-total,
.slot-place {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.grid-reseed-table {
  width: 100%;
  border: var(--cell-gap) solid transparent;
  border-radius: var(--radius-md);
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(var(--structure), var(--structure)) border-box;
  overflow: hidden;
}

.stage-table-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: max-content;
}

.stage-match-frame {
  width: max-content;
  content-visibility: auto;
  contain-intrinsic-size: 1180px 220px;
}

.stage-match-placeholder {
  display: flex;
  align-items: center;
  width: min(960px, calc(100vw - 48px));
  min-width: 520px;
  min-height: 132px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--muted);
  font-size: var(--text-sm);
}

.embedded-match {
  min-height: 0;
  overflow: visible;
}

.embedded-match .host-top {
  display: none;
}

.embedded-match .match-main,
.embedded-match .sheet-frame {
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.embedded-match .fight-frame {
  background-color: var(--structure);
}

.import-frame {
  padding: var(--space-4);
}

.import-message {
  min-height: 24px;
  margin: 0;
  color: var(--muted);
  white-space: pre-wrap;
}

/* auth + register layout (used by login.html and /register stages).
   Inputs use .input, submit buttons use .btn — see design system above. */

.auth-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 420px;
}

.auth-step[hidden] {
  display: none;
}

.auth-hint {
  margin: 0;
  color: var(--text);
}

.auth-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

.auth-form.auth-form-stack {
  grid-template-columns: 1fr;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.auth-hint-divider {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.tabs {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 48px;
  padding: 0 64px;
  overflow-x: auto;
  border-top: 1px solid var(--grid);
  background-color: var(--surface-tint);
  color: var(--text-strong);
  white-space: nowrap;
}

.tabs button {
  border: 0;
  background: transparent;
  font-size: var(--text-xl);
}

.tab-active {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  color: var(--text);
  background: var(--warning-soft);
  font-weight: var(--fw-bold);
}

.viewer {
  min-height: 100vh;
  background: var(--page);
  color: var(--text);
}

.viewer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5-5) var(--page-pad-x-loose) var(--space-4-5);
  background-color: var(--paper);
  border-bottom: 1px solid var(--border);
}

.viewer-kicker {
  color: var(--slate);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.viewer h1 {
  margin: var(--space-1) 0 0;
  font-size: clamp(32px, 6vw, 64px);
  line-height: var(--leading-tight);
  letter-spacing: 0;
}

.viewer-layout {
  display: grid;
  gap: var(--space-4-5);
  padding: var(--space-4-5) var(--page-pad-x-loose) var(--page-pad-x-loose);
}

.scoreboard,
.viewer-sheet {
  overflow-x: auto;
  background-color: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.viewer-score-table,
.viewer-grid-table {
  width: 100%;
  border-collapse: collapse;
}

.viewer-score-table th,
.viewer-score-table td,
.viewer-grid-table th,
.viewer-grid-table td {
  padding: var(--space-3) var(--space-3-5);
  border-bottom: 1px solid var(--grid);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.viewer-score-table th,
.viewer-grid-table th {
  color: var(--slate);
  background: var(--action-bg);
  font-size: var(--text-xs-plus);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

.viewer-score-table .team,
.viewer-grid-table .team,
.viewer-score-table th:nth-child(2),
.viewer-grid-table th:first-child {
  text-align: left;
}

.viewer-score-table .rank {
  width: 56px;
  color: var(--blue-bright);
  font-size: var(--text-xl-plus);
  font-weight: var(--fw-extrabold);
}

.viewer-score-table .team {
  font-size: var(--text-xl-plus);
  font-weight: var(--fw-extrabold);
}

.viewer-score-table .num {
  font-size: var(--text-xl-plus);
  font-weight: var(--fw-extrabold);
}

.viewer-grid-table {
  min-width: 1120px;
}

.viewer-grid-table td {
  min-width: 78px;
  vertical-align: top;
}

.viewer-grid-table td span {
  display: block;
  font-size: var(--text-lg-plus);
  font-weight: var(--fw-extrabold);
}

.viewer-grid-table td small {
  display: block;
  max-width: 90px;
  margin-top: 3px;
  color: var(--slate);
  font-size: var(--text-xs-tight);
  line-height: 1.2;
  white-space: normal;
}

.viewer-grid-table .theme-positive {
  background: var(--success-soft);
  color: var(--success-text);
}

.viewer-grid-table .theme-negative {
  background: var(--danger-soft);
  color: var(--danger-text);
}

.viewer-grid-table .theme-zero {
  background: var(--paper);
  color: var(--slate-strong);
}

.viewer-grid-table .total {
  font-weight: var(--fw-black);
}

@media (max-width: 760px) {
  .host {
    --xy-header-h: 56px;
  }

  .host-top {
    height: 56px;
    gap: 8px;
    padding: 7px 10px;
  }

  .host h1 {
    font-size: var(--text-lg-xl);
  }

  .match-main {
    height: calc(100vh - 56px);
    min-height: 0;
    padding: 4px;
  }

  .match-table {
    --team-col: 90px;
    --total-col: 28px;
    --place-col: 32px;
    --place-gap: 6px;
    font-size: var(--text-xs-plus);
    line-height: 1.1;
  }
  .match-table.ek-stage-table {
    --total-col: 46px;
    --theme-score-col: 46px;
  }

  .match-table th,
  .match-table td {
    height: 24px;
    min-width: 24px;
    padding: 2px 3px;
  }

  .match-table thead th {
    height: 24px;
  }

  .match-table .sticky-name {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
  }

  .match-table .battle {
    padding-left: 6px;
  }

  .battle-layout {
    gap: 4px;
  }

  .venue-edit-button {
    width: 21px;
    height: 20px;
    font-size: var(--text-xs-tight);
  }

  .finish-control {
    gap: 0;
  }

  .shootout-add-button,
  .theme-delete-button {
    min-width: 30px;
    height: 18px;
    padding: 0 4px;
    font-size: var(--text-xs-tight);
  }

  .fight-frame .sticky-name {
    left: 0;
  }

  .match-table .sticky-total {
    left: var(--team-col);
    width: var(--total-col);
    min-width: var(--total-col);
    max-width: var(--total-col);
  }

  .fight-frame .sticky-total {
    left: var(--team-col);
  }

  .match-table .sticky-place {
    left: calc(var(--team-col) + var(--total-col));
    width: var(--place-col);
    min-width: var(--place-col);
    max-width: var(--place-col);
  }

  .fight-frame .sticky-place {
    left: calc(var(--team-col) + var(--total-col));
  }

  .match-table .sticky-place-gap {
    left: calc(var(--team-col) + var(--total-col) + var(--place-col));
  }

  .match-table .team-name {
    font-size: var(--text-xs-tight);
    line-height: 1.15;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .match-table .question-head,
  .match-table .answer-cell {
    width: 22px;
    min-width: 22px;
  }

  .match-table .theme-head,
  .match-table .theme-score {
    width: 30px;
    min-width: 30px;
  }
  .match-table.ek-stage-table .theme-head,
  .match-table.ek-stage-table .theme-score {
    width: var(--theme-score-col);
    min-width: var(--theme-score-col);
    max-width: var(--theme-score-col);
  }

  .match-table .shootout-controls-head,
  .match-table .shootout-controls-cell {
    width: 36px;
    min-width: 36px;
    max-width: 36px;
  }

  .match-table .gap,
  .match-table .gap-head {
    width: 10px;
    min-width: 10px;
    max-width: 10px;
    padding: 0;
    border: 0;
  }

  .match-table .player-cell,
  .match-table .readonly-player {
    width: 110px;
    min-width: 110px;
    font-size: var(--text-xs-tight);
  }

  .player-select-wrap::after {
    right: 6px;
  }
  .player-select-wrap::before {
    right: 16px;
    width: 26px;
  }

  .player-cell select {
    height: 22px;
    padding-left: 5px;
    padding-right: 18px;
    font-size: var(--text-xs);
  }

  .answer-row td {
    height: 21px;
  }

  .match-table .tiebreak-cell {
    width: 24px;
    min-width: 24px;
  }

  .tiebreak-input {
    width: 28px;
    font-size: var(--text-xs);
  }

  .place-input {
    width: 100%;
    font-size: var(--text-xs);
  }

  .match-table .narrow {
    width: 20px;
    min-width: 20px;
  }

  .subnav {
    min-height: 30px;
    margin-bottom: 5px;
  }

  .subnav a {
    min-height: 26px;
    padding: 0 8px;
    font-size: var(--text-xs);
  }

  .fest-table {
    min-width: 680px;
    font-size: var(--text-xs);
  }

  .fest-table th,
  .fest-table td {
    padding: 7px 8px;
  }

  .fest-table .stage-name {
    width: 110px;
  }

  .fest-table .venue-cell {
    width: 120px;
  }

  .teams-cell span {
    max-width: 220px;
  }

  .fest-grid {
    min-width: 1020px;
  }

  .fest-columns {
    grid-template-columns:
      minmax(170px, 1fr)
      minmax(170px, 1fr)
      minmax(170px, 1fr)
      minmax(170px, 1fr)
      minmax(170px, 1fr)
      minmax(170px, 1fr);
  }

  .grid-matches {
    gap: 5px;
  }

  .grid-stage h2 {
    font-size: var(--text-base);
  }

  .grid-match-head {
    padding: 6px;
  }

  .grid-slot-cell,
  .grid-reseed-table td {
    height: 24px;
    padding: 3px 4px;
    font-size: var(--text-xs-tight);
  }

  .grid-slot-grid {
    grid-template-columns: minmax(0, 1fr) 30px 30px;
  }

  .import-frame {
    padding: 6px;
  }

  .answer-cell:hover:not(.active),
  .answer-cell:focus:not(.active),
  .answer-cell.active {
    outline-width: 1px;
  }

  .viewer-top {
    align-items: flex-start;
    padding: var(--space-4-5) 18px 18px;
  }

  .viewer-layout {
    padding: var(--page-pad-x-tight);
  }

  .viewer-score-table .team,
  .viewer-score-table .num {
    font-size: var(--text-lg);
  }

  .sheet-shell {
    height: 176px;
  }

  .doc-row {
    height: 76px;
    padding: 10px 14px;
  }

  .menu-row {
    display: none;
  }

  .doc-title {
    font-size: var(--text-lg);
  }

  .toolbar {
    overflow-x: auto;
    margin: 0 8px;
  }

  .formula-bar {
    grid-template-columns: 78px 42px 1fr;
  }

  .sheet-main {
    height: calc(100vh - 224px);
  }

  .tabs {
    padding: 0 16px;
  }
}

/* Match tabs + OD entry grid + results */
.match-main:has(.match-tabs:not([hidden])) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.match-main:has(.match-tabs:not([hidden])) .sheet-frame {
  flex: 1 1 auto;
  min-height: 0;
}

.match-tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
}

.match-tab {
  padding: 6px 14px;
  border: 1px solid var(--action-border);
  border-radius: var(--radius-md);
  background: var(--action-bg);
  color: var(--text);
  font-size: var(--text-xs-plus);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

.match-tab:hover {
  background: var(--accent-soft);
}

.match-tab.active {
  background: var(--paper);
  border-color: var(--blue);
  color: var(--blue);
}

.game-host-top .match-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.game-host-top .match-tab {
  position: relative;
  height: 24px;
  padding: 0 8px;
  margin-left: -1px;
  border: 1px solid var(--structure);
  border-radius: 0;
  background: var(--paper);
  color: var(--muted);
  font-size: var(--text-xs-plus);
  line-height: 22px;
}

.game-host-top a.match-tab {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.game-host-top .match-tab:first-child {
  margin-left: 0;
  border-top-left-radius: var(--cell-radius);
  border-bottom-left-radius: var(--cell-radius);
}

.game-host-top .match-tab:last-child {
  border-top-right-radius: var(--cell-radius);
  border-bottom-right-radius: var(--cell-radius);
}

.game-host-top .match-tab + .match-tab {
  border-left-color: var(--structure);
}

.game-host-top .match-tab:hover {
  background: var(--accent-soft);
}

.game-host-top .match-tab.active {
  z-index: 1;
  border-color: var(--text);
  background: var(--paper);
  color: var(--text);
  box-shadow: none;
}

@media (max-width: 760px) {
  .ek-page .ek-tabs {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ek-page .ek-tabs::-webkit-scrollbar {
    display: none;
  }

  .ek-page .ek-tabs .match-tab {
    flex: 0 0 auto;
  }

  .ek-page .ek-tabs.tabs-scroll-left {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px);
    mask-image: linear-gradient(to right, transparent, #000 28px);
  }

  .ek-page .ek-tabs.tabs-scroll-right {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .ek-page .ek-tabs.tabs-scroll-left.tabs-scroll-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }
}

.od-pane {
  display: contents;
}

.od-pane[hidden] {
  display: none;
}

.od-input-gate {
  margin: 24px;
  font-size: var(--text-base);
  color: var(--text);
}

.od-input-gate a {
  color: var(--blue);
  text-decoration: underline;
}

.team-number-badge {
  display: inline-block;
  min-width: 1.5em;
  margin-right: 6px;
  padding: 0 4px;
  border-radius: var(--radius-xs);
  background: var(--structure);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  text-align: center;
}

.entry-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: var(--structure);
  contain: paint;
  font-size: var(--text-xs-plus);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.col-entry-marker { width: 12px; }
.col-entry-q { width: 38px; }
.col-entry-tour-end { width: calc(38px + 14px - var(--cell-gap)); }
.col-entry-shootout-team { width: 230px; }
.col-entry-shootout-check { width: 38px; }
.col-entry-shootout-check.col-entry-tour-end { width: calc(38px + 14px - var(--cell-gap)); }

.entry-table th,
.entry-table td {
  height: 26px;
  padding: 0;
  border-top: 0;
  border-bottom: 0;
  border-left: var(--cell-gap) solid transparent;
  border-right: var(--cell-gap) solid transparent;
  background-clip: padding-box;
  background-color: var(--paper);
  text-align: center;
  vertical-align: middle;
}

.entry-table thead th {
  position: sticky;
  z-index: 4;
  background-color: var(--structure);
  font-weight: var(--fw-regular);
  color: var(--text-strong);
}

.entry-table thead tr:first-child th { top: 0; height: 28px; }
.entry-table thead tr:nth-child(2) th { top: 28px; height: 22px; }

.entry-q-head { font-size: var(--text-xs); }

/* Floating "Инвертировать" button: a small yin-yang parked in the gap above the
   active column's number. Fixed-positioned (placed by positionInvertOverlay) so
   the entry table's `contain: paint` doesn't clip it. */
.entry-invert {
  position: fixed;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: var(--cursor-action);
  line-height: 0;
  z-index: var(--z-dropdown);
}
.entry-invert[hidden] { display: none; }
.entry-invert:hover { color: var(--blue); }
.entry-invert svg { display: block; width: 16px; height: 16px; }
.entry-invert .yy-light { fill: var(--surface); }
.entry-invert .yy-dark { fill: currentColor; }
.entry-invert .yy-ring { stroke: currentColor; stroke-width: 4; }
.entry-invert.spinning { animation: yinyang-spin 0.45s ease; }

/* Floating ↑/↓ cell-navigation bar (installCellNavBar). Pinned just above the
   on-screen keyboard via visualViewport (top set in JS) because mobile numeric
   keypads have no Return key on iOS — this is the only way to step between
   cells without dismissing the keypad. Touch devices only. */
.entry-nav-bar {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  gap: 1px;
  padding: 0;
  background: var(--border);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
  z-index: var(--z-toast);
}
.entry-nav-bar[hidden] { display: none; }
.entry-nav-bar button {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0;
  font-size: var(--text-lg);
  line-height: 1;
  border: 0;
  background: var(--surface-tint);
  color: var(--text);
  cursor: var(--cursor-action);
}
.entry-nav-bar button:active { background: var(--blue-tint); }

/* Virtual numeric keypad (installVirtualKeypad). Replaces the OS keyboard for
   digit-only cell entry on touch devices: the host input sets inputmode="none"
   to suppress the native keypad, and these keys drive it via callbacks. Pinned
   to the bottom of the visual viewport (top set in JS). Touch devices only. A
   nav row (← ↑ ↓ →) sits above a 3-column digit pad; 1px gaps over the --border
   backdrop draw the key seams, so every key stays equal-width via the grid. */
.entry-keypad {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 1px;
  background: var(--border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
  z-index: var(--z-toast);
  user-select: none;
  -webkit-user-select: none;
}
.entry-keypad[hidden] { display: none; }
.entry-keypad-nav,
.entry-keypad-digits {
  display: grid;
  gap: 1px;
}
.entry-keypad-nav { grid-template-columns: repeat(4, 1fr); }
.entry-keypad-digits { grid-template-columns: repeat(3, 1fr); }
.entry-keypad-zero { grid-column: span 2; }
.entry-keypad-key {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 52px;
  padding: 0;
  border: 0;
  background: var(--paper);
  color: var(--text);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: var(--cursor-action);
  touch-action: manipulation;
}
.entry-keypad-arrow {
  height: 44px;
  background: var(--surface-tint);
  font-size: var(--text-lg);
}
.entry-keypad-back { font-size: var(--text-lg); }
.entry-keypad-key:active { background: var(--blue-tint); }

@keyframes yinyang-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.entry-table .entry-row-marker {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 12px;
  min-width: 12px;
  max-width: 12px;
  padding: 0;
  border: 0;
  background: var(--structure);
}

.entry-table thead .entry-row-marker {
  z-index: 5;
}

.host:not(.viewer-readonly) .fight-frame .entry-table tbody tr.active-entry-row > .active-row-marker {
  background:
    radial-gradient(circle at 50% 50%, var(--blue) 0 3px, transparent 3.5px),
    var(--structure);
}

.entry-table .entry-tour-end {
  border-right-width: 14px;
}

.entry-lock-cell { padding: 0; }

.entry-lock-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.entry-lock-checkbox {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.entry-cell {
  padding: 0;
  color: var(--text);
  cursor: cell;
  user-select: none;
}

.entry-cell.entry-selected {
  position: relative;
  background-color: var(--blue-tint);
}

/* Draw the selection frame on a pseudo-element rather than as a box-shadow on
   the cell itself. End-of-tour cells carry a wide (14px) transparent right
   border for the inter-tour gap; an inset box-shadow on the cell is measured
   from the border box and would bleed the frame across that whole gap into the
   free space. The pseudo is clamped to the normal --cell-gap on every side, so
   the frame hugs the visible cell and never spills into the gap. Mirrors the
   .answer-cell selection. */
.entry-cell.entry-selected::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--cell-gap));
  right: calc(-1 * var(--cell-gap));
  pointer-events: none;
  box-shadow:
    var(--entry-selection-top, 0 0 0 0 transparent),
    var(--entry-selection-bottom, 0 0 0 0 transparent),
    var(--entry-selection-left, 0 0 0 0 transparent),
    var(--entry-selection-right, 0 0 0 0 transparent);
}

.entry-cell.entry-selection-top {
  --entry-selection-top: inset 0 2px 0 var(--blue);
}

.entry-cell.entry-selection-bottom {
  --entry-selection-bottom: inset 0 -2px 0 var(--blue);
}

.entry-cell.entry-selection-left {
  --entry-selection-left: inset 2px 0 0 var(--blue);
}

.entry-cell.entry-selection-right {
  --entry-selection-right: inset -2px 0 0 var(--blue);
}

.entry-cell.entry-selected:focus {
  outline: 0;
  background-color: var(--blue-tint);
}

.entry-cell:focus {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  background-color: var(--paper);
}

.entry-cell.entry-editing:focus {
  outline: 0;
}

.entry-input {
  display: block;
  width: 100%;
  height: 26px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.entry-input:focus {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  background: var(--paper);
}

.shootout-entry-check-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 26px;
  cursor: pointer;
}

.shootout-entry-checkbox {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

.shootout-entry-checkbox:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.entry-suggest {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  max-height: 260px;
  overflow: auto;
  padding: var(--space-1);
  border: 1px solid var(--grid-dark);
  border-radius: var(--radius-md);
  background-color: var(--paper);
  box-shadow: var(--shadow-card);
}

.entry-suggest-option {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.entry-suggest-option.active,
.entry-suggest-option:hover {
  background: var(--accent-soft);
}

.entry-suggest-option .team-number-badge {
  flex: 0 0 auto;
  margin-right: 0;
}

.entry-table .entry-input-bad,
.entry-table .entry-input-dup {
  background-color: var(--danger-soft);
  color: var(--red-dark);
}

.entry-readonly .entry-cell {
  color: var(--muted);
  cursor: not-allowed;
}

.entry-readonly .entry-lock-label,
.entry-readonly .entry-lock-checkbox,
.entry-readonly .shootout-entry-check-label,
.entry-readonly .shootout-entry-checkbox {
  cursor: default;
}

.match-table .answer-cell.readonly { cursor: default; }
.match-table .answer-cell.readonly:hover,
.match-table .answer-cell.readonly:focus { outline: 0; }

.od-detailed-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: max-content;
}

.od-input-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: max-content;
}

.od-input-tables {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: max-content;
}

.od-shootout-entry-wrap {
  position: sticky;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-width: max-content;
  align-self: flex-start;
}

.od-shootout-entry-block {
  display: flex;
  align-items: flex-start;
  min-width: max-content;
}

.entry-table .od-shootout-meta-round-cell,
.entry-table .od-shootout-meta-cell,
.entry-table .od-shootout-meta-lock-cell {
  width: 230px;
  min-width: 230px;
  max-width: 230px;
}

.entry-table .od-shootout-meta-cell {
  padding: 0 8px;
  text-align: left;
  vertical-align: middle;
}

.od-shootout-meta-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 46px;
  overflow: hidden;
  white-space: normal;
}

.od-shootout-entry-title {
  font-size: var(--text-xs-plus);
  font-weight: var(--fw-bold);
}

.od-shootout-entry-table thead tr:first-child th { top: 0; height: 28px; }
.od-shootout-entry-table thead tr:nth-child(2) th { top: 28px; height: 28px; }
.od-shootout-entry-table thead tr:nth-child(3) th { top: 56px; height: 22px; }

.entry-table .od-shootout-controls-head {
  top: 0;
}

.od-shootout-entry-table .od-shootout-round-head {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
}

.entry-table .od-shootout-team-cell {
  background-color: var(--structure);
  padding: 0 8px;
  text-align: left;
  white-space: nowrap;
}

.entry-table .od-shootout-excluded {
  background-color: var(--structure);
}

.od-shootout-check-cell {
  cursor: pointer;
}

.col-entry-shootout-controls {
  width: 280px;
}

.entry-table .od-shootout-controls-head,
.entry-table .od-shootout-controls-cell,
.match-table .od-shootout-controls-head,
.match-table .od-shootout-controls-cell {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
}

.entry-table .od-shootout-controls-head,
.match-table .od-shootout-controls-head {
  --cell-fill: var(--structure);
  padding: 2px;
  vertical-align: top;
}

.entry-table .od-shootout-controls-head {
  overflow: visible;
}

.entry-table .od-shootout-controls-head .od-shootout-controls-panel {
  position: absolute;
  top: 2px;
  right: 2px;
  left: 2px;
  z-index: 6;
}

.entry-table .od-shootout-controls-cell,
.match-table .od-shootout-controls-cell {
  --cell-fill: var(--structure);
  background-color: var(--structure);
  border-color: var(--structure);
  border-radius: 0;
}

.od-shootout-controls-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  width: 100%;
}

.od-shootout-controls-panel .btn {
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-sm-plus);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

.od-shootout-controls-panel .btn:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.od-shootout-round-controls {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--grid-dark);
  border-radius: var(--radius-md);
  background: var(--paper);
}

.od-shootout-round-label {
  min-width: 0;
  padding: 0 4px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-align: center;
}

.od-shootout-round-controls .btn {
  min-width: 0;
}

.match-table.od-detailed .shootout-head,
.match-table.od-shootout-input .shootout-head {
  --cell-fill: var(--accent-soft);
}

.fight-frame .match-table.od-shootout-input .sticky {
  position: static;
  left: auto;
}

.match-table.od-detailed .od-shootout-cell,
.match-table.od-shootout-input .od-shootout-cell {
  color: transparent;
}

.match-table.od-detailed .od-shootout-excluded,
.match-table.od-shootout-input .od-shootout-excluded {
  --cell-fill: var(--structure);
  cursor: default;
}

.od-shootout-dialog {
  width: min(520px, calc(100vw - var(--space-6)));
  max-height: calc(100vh - var(--space-8));
  padding: 0;
  border: 1px solid var(--grid-dark);
  border-radius: var(--radius-lg);
  background-color: var(--paper);
  color: var(--text);
  box-shadow: var(--shadow-modal);
}

.od-shootout-dialog::backdrop {
  background: var(--backdrop);
}

.od-shootout-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.od-shootout-dialog h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.od-shootout-team-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  max-height: min(420px, calc(100vh - 190px));
  overflow: auto;
}

.od-shootout-team-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.od-shootout-team-option:hover {
  background: var(--hover-bg);
}

.od-shootout-team-option input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--blue);
}

.od-shootout-team-option .team-number-badge {
  margin-right: 0;
}

.od-shootout-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.od-shootout-dialog-actions .btn:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

/* Итог */
/* Экран: projector scoreboard. Reuses the Итог (.results-table) styling; the
   columns are laid out side by side and the whole board is scaled with `zoom`
   by layoutScreen() so every team fits the screen. */
.screen-wrapper {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-2);
  background: var(--structure);
}

.screen-cols {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
}

/* The board doesn't scroll, so the Итог frozen-column offsets are pointless —
   drop them. Team names keep Итог's truncate/fade, but the column is narrower
   than Итог's so short names don't waste width — that lets the font grow. Long
   names fade out (acceptable for projection). */
.screen-table.results-table .results-place,
.screen-table.results-table .results-team,
.screen-table.results-table .results-total,
.screen-table.results-table thead th {
  position: static;
}

.screen-table.od-results-table {
  --results-team-col: 160px;
}

.screen-empty {
  color: var(--muted);
  font-size: var(--text-lg);
}

/* Fullscreen (projector) mode: drop the site chrome so only the board shows. */
body.is-fullscreen .host-top {
  display: none;
}

body.is-fullscreen.od-page .match-main {
  height: 100vh;
}

.results-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.results-meta {
  position: sticky;
  left: 0;
  z-index: 6;
  align-self: flex-start;
  padding-right: 8px;
  background: var(--structure);
  color: var(--muted);
  font-size: var(--text-xs-plus);
}

.results-table {
  --results-place-col: 60px;
  --results-team-col: 232px;
  --results-team-pad: 10px;
  --results-total-col: 54px;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  font-variant-numeric: tabular-nums;
}

.od-results-table,
.ksi-results-table {
  width: max-content;
}

.venues-results-wrapper {
  align-items: flex-start;
}

.venues-results-table {
  --results-place-col: 64px;
  --results-team-col: 420px;
  width: max-content;
  min-width: 420px;
}

.reseed-results-wrapper {
  align-items: flex-start;
}

.reseed-results-table {
  --results-place-col: 72px;
  --results-team-col: 320px;
  width: max-content;
  min-width: 720px;
}

.ek-stats-wrapper {
  align-items: flex-start;
}

.ek-stats-table {
  /* Cap on the two name columns. They size to their content (so short names sit
     tight and the whole table stays compact), and only names past this cap
     truncate with the fade + popover. Generous on desktop where there's room. */
  --ek-stats-name-col: 320px;
  width: max-content;
}

.ek-stats-table thead th.ek-stats-name-head,
.ek-stats-table .ek-stats-name {
  text-align: left;
  padding-left: var(--results-team-pad);
}

/* The name cells borrow the .results-team(-head) classes only for the truncate
   + fade + popover primitive — NOT the OD/KSI frozen-column layout. Cancel the
   inherited place-column offset (those rules set position:sticky; left:place-col,
   which on this table just shoves the first column 60px in and overlaps the two
   name columns). Higher specificity than the .results-table sticky rules, so
   this holds regardless of source order. Mobile re-pins just the player column. */
.ek-stats-table td.ek-stats-name {
  position: static;
}
.ek-stats-table thead th.ek-stats-name-head,
.ek-stats-table td.ek-stats-name {
  left: auto;
}

/* Size each name column to its content, capped at --ek-stats-name-col. The cell
   follows its inner wrap, so the column is exactly as wide as the longest name
   (up to the cap) — no dead space, no premature clipping. */
.ek-stats-table .ek-stats-name .results-team-name-wrap {
  max-width: var(--ek-stats-name-col);
}

.ek-stats-table .number {
  text-align: center;
}

/* Many numeric columns — keep them compact so more fits before scrolling. */
.ek-stats-table thead th.number,
.ek-stats-table td.number {
  padding-left: var(--space-1);
  padding-right: var(--space-1);
}

.ek-stats-table .narrow {
  width: 30px;
  min-width: 30px;
}

.ek-stats-table thead th.ek-stats-sum-head,
.ek-stats-table .ek-stats-sum {
  font-weight: var(--fw-semibold);
}

.ek-stats-table thead th.ek-stats-wrong-head,
.ek-stats-table .ek-stats-wrong,
.ek-stats-table .ek-stats-share,
.ek-stats-table thead th.ek-stats-share-head {
  color: var(--muted);
}

.results-table th,
.results-table td {
  padding: 8px 10px;
  background: var(--paper);
  vertical-align: middle;
  white-space: nowrap;
}

.results-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--structure);
  padding: 6px 10px;
  color: var(--text);
  font-size: var(--text-xs-plus);
  font-weight: var(--fw-regular);
  text-align: center;
}

.results-place-head,
.results-num-head,
.results-tour-head {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
}

.results-place-head,
.results-place {
  width: var(--results-place-col);
  min-width: var(--results-place-col);
  max-width: var(--results-place-col);
}

.results-table thead th.results-team-head {
  text-align: left;
  padding-left: var(--results-team-pad);
}

.od-results-table thead th.results-team-head,
.od-results-table .results-team,
.ksi-results-table thead th.results-team-head,
.ksi-results-table .results-team,
.venues-results-table thead th.results-team-head,
.venues-results-table .results-team,
.reseed-results-table thead th.results-team-head,
.reseed-results-table .results-team {
  width: var(--results-team-col);
  min-width: var(--results-team-col);
  max-width: var(--results-team-col);
}

.results-table thead th.results-total-head,
.results-table .results-total {
  width: var(--results-total-col);
  min-width: var(--results-total-col);
  max-width: var(--results-total-col);
  font-weight: var(--fw-bold);
}

.od-results-table thead th.results-team-head,
.ksi-results-table thead th.results-team-head {
  --results-sticky-fade-from: var(--structure);
}

.od-results-table thead th.results-total-head,
.ksi-results-table thead th.results-total-head {
  --results-sticky-fade-from: var(--structure);
}

.od-results-table .results-total,
.ksi-results-table .results-total {
  --results-sticky-fade-from: var(--paper);
}

.results-scroll-left .od-results-table thead th.results-total-head::after,
.results-scroll-left .od-results-table .results-total::after,
.results-scroll-left .ksi-results-table thead th.results-total-head::after,
.results-scroll-left .ksi-results-table .results-total::after {
  content: "";
  position: absolute;
  top: 0;
  right: -28px;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(to right, var(--results-sticky-fade-from), rgba(238, 241, 244, 0));
}

.detailed-scroll-left .match-table.od-detailed .sticky-total::after {
  content: "";
  position: absolute;
  top: 0;
  right: -28px;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(to right, var(--structure), rgba(238, 241, 244, 0));
}

/* EK stage tables get the same scrolled-under fade as OD/KSI, drawn off the
   right edge of the place-gap (the rightmost frozen column) once the score
   columns have been scrolled. .stage-scroll-left is toggled on the scroll
   frame by host.js / viewer.js. */
.sheet-frame.stage-scroll-left .match-table.ek-stage-table .sticky-place-gap::after {
  content: "";
  position: absolute;
  top: 0;
  right: -28px;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  background: linear-gradient(to right, var(--structure), rgba(238, 241, 244, 0));
}

.results-table .results-place,
.results-table .results-team,
.results-table .results-total {
  position: sticky;
  z-index: 1;
  background: var(--paper);
}

.results-table .results-place,
.results-table thead .results-place-head {
  left: 0;
}

.results-table .results-team,
.results-table thead .results-team-head {
  left: var(--results-place-col);
}

.results-table .results-total,
.results-table thead .results-total-head {
  left: calc(var(--results-place-col) + var(--results-team-col));
}

.results-table thead .results-place-head,
.results-table thead .results-team-head,
.results-table thead .results-total-head {
  z-index: 3;
}

.results-place {
  text-align: center;
  font-weight: var(--fw-regular);
}

.results-table .results-team {
  text-align: left;
  padding-left: var(--results-team-pad);
  overflow: visible;
}

.results-team:hover,
.results-team:focus-within {
  z-index: var(--z-popover);
}

.results-team-name-wrap {
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
}

.results-team-name,
.results-team-city {
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.results-team-name {
  outline-offset: var(--focus-outline-offset-tight);
}

.results-team-truncated .results-team-name::after,
.results-team-city-truncated::after {
  content: "";
  position: absolute;
  top: var(--space-0);
  right: var(--space-0);
  bottom: var(--space-0);
  width: var(--inline-fade-width);
  background: var(--inline-fade-bg);
  pointer-events: none;
}

.results-team-name:focus {
  outline: var(--focus-ring-none);
}

.results-team-city {
  color: var(--muted);
  font-size: var(--text-xs);
}

.results-team-name-popover {
  position: absolute;
  top: calc(100% - 2px);
  left: var(--space-3);
  z-index: var(--z-dropdown);
  display: none;
}

.results-team-truncated:hover .results-team-name-popover,
.results-team-truncated:focus-within .results-team-name-popover {
  display: block;
}

.floating-popovers-enabled .results-team-truncated:hover .results-team-name-popover,
.floating-popovers-enabled .results-team-truncated:focus-within .results-team-name-popover,
.ek-page .results-team-truncated:hover .results-team-name-popover,
.ek-page .results-team-truncated:focus-within .results-team-name-popover {
  display: none;
}

.results-num,
.results-tour { text-align: center; }

.results-tour-toggle {
  display: inline-grid;
  place-items: center;
  width: 100%;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.results-tour-toggle:hover,
.results-tour-toggle:focus-visible {
  background: rgba(26, 115, 232, 0.08);
  outline: 0;
}

.results-tour-toggle-head.expanded .results-tour-toggle {
  color: var(--blue);
  font-weight: var(--fw-bold);
}

.results-tour-pending {
  color: var(--muted-light);
}

.results-table thead th.results-answer-head {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  padding: 0;
  color: var(--muted);
  font-size: var(--text-xs-plus);
  line-height: var(--leading-tight);
  text-align: center;
}

.results-table td.results-answer {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  padding: 0;
  font-size: 0;
  line-height: 0;
  text-align: center;
}

.results-answer-mark {
  --cell-fill: var(--paper);
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--structure);
  border-radius: 0;
  background: var(--cell-fill);
  color: var(--green-dark);
  font-size: var(--text-2xs);
  line-height: var(--leading-tight);
  vertical-align: middle;
}

.results-answer-left .results-answer-mark {
  border-top-left-radius: var(--cell-radius);
  border-bottom-left-radius: var(--cell-radius);
}

.results-answer-right .results-answer-mark {
  border-top-right-radius: var(--cell-radius);
  border-bottom-right-radius: var(--cell-radius);
}

.results-answer.right .results-answer-mark {
  --cell-fill: var(--green);
}

.results-group-gap td {
  height: 8px;
  padding: 0;
  background: var(--structure);
  border: 0;
  line-height: 0;
}

.results-row:not(.results-group-first) td {
  border-top: 1px solid var(--structure);
}

.ksi-results-table tbody tr + tr td {
  border-top: 1px solid var(--structure);
}

.venues-results-table tbody tr + tr td {
  border-top: 1px solid var(--structure);
}

.venues-results-table .venue-input {
  width: 100%;
  min-height: 26px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  outline: 0;
}

.venues-results-table .venue-input:focus {
  border-color: var(--blue);
  background: var(--paper);
}

.results-row.results-group-first td:first-child { border-top-left-radius: var(--radius-md); }
.results-row.results-group-first td:last-child { border-top-right-radius: var(--radius-md); }
.results-row.results-group-last td:first-child { border-bottom-left-radius: var(--radius-md); }
.results-row.results-group-last td:last-child { border-bottom-right-radius: var(--radius-md); }


/* Compact score tables for large OD/KSI grids. */
.match-table.compact-score-table {
  --question-size: 24px;
  contain: paint;
}

.match-table.ek-stage-table {
  --total-col: 50px;
  --theme-score-col: 50px;
}

.match-table.od-detailed {
  --od-detailed-number-col: calc(var(--od-detailed-number-digits) + var(--od-detailed-number-pad-left) + var(--od-detailed-number-pad-right));
  --od-detailed-name-col: calc(var(--od-detailed-name-base-col) + var(--od-detailed-name-extra-col));
  --team-col: calc(var(--od-detailed-number-col) + var(--od-detailed-name-col));
  --place-col: 58px;
  margin-left: var(--space-0);
  margin-top: var(--space-0);
}
.match-table.ksi-detailed {
  --od-detailed-name-col: 190px;
  --team-col: var(--od-detailed-name-col);
  --total-col: 58px;
  --theme-score-col: 40px;
}
.match-table.od-detailed .sticky-name {
  width: var(--team-col);
  min-width: var(--team-col);
  max-width: var(--team-col);
}
.match-table.od-detailed:not(.ksi-detailed) .sticky-place,
.match-table.od-detailed:not(.ksi-detailed) .sticky-place-gap {
  position: static;
  z-index: auto;
}

.match-table.compact-score-table,
.match-table.compact-score-table th,
.match-table.compact-score-table td {
  height: 24px;
  line-height: var(--leading-tight);
}
.match-table.compact-score-table th,
.match-table.compact-score-table td {
  border-color: var(--structure);
  background: var(--cell-fill);
  background-clip: border-box;
}
.match-table.compact-score-table .gap,
.match-table.compact-score-table .gap-head,
.match-table.compact-score-table .place-gap,
.match-table.compact-score-table .place-gap-head,
.match-table.compact-score-table .team-gap {
  background: var(--structure);
  border-color: var(--structure);
}
.match-table.compact-score-table .team-gap { height: 4px; }
.match-table .row-marker {
  --cell-fill: var(--structure);
  left: 0;
  width: 12px;
  min-width: 12px;
  max-width: 12px;
  padding: 0;
  border-color: var(--structure);
  border-radius: 0;
  background: var(--structure);
}
.fight-frame .match-table .row-marker + .sticky-name {
  left: 12px;
}
.fight-frame .match-table .row-marker ~ .sticky-total {
  left: calc(12px + var(--team-col));
}
.fight-frame .match-table .row-marker ~ .sticky-place {
  left: calc(12px + var(--team-col) + var(--total-col));
}
.fight-frame .match-table .row-marker ~ .sticky-place-gap {
  left: calc(12px + var(--team-col) + var(--total-col) + var(--place-col));
}
.host:not(.viewer-readonly) .fight-frame .match-table tbody tr.active-team-row > .active-row-marker {
  background:
    radial-gradient(circle at 50% 50%, var(--blue) 0 3px, transparent 3.5px),
    var(--structure);
}
.match-table.compact-score-table .team-name {
  padding: 0 4px 0 6px;
  font-size: var(--text-xs-plus);
}
.match-table.ek-stage-table .ek-team-cell.team-name {
  padding-left: 0;
}
.viewer-readonly .match-table.ek-stage-table.readonly-table .team-name {
  padding-right: 8px;
  padding-left: 8px;
}
.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-battle-head {
  padding-right: 8px;
  padding-left: 8px;
}
.readonly-battle-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.readonly-battle-venue {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.match-table.od-detailed .od-detailed-team-cell,
.match-table .ek-team-cell {
  --cell-fill: var(--structure);
  padding: 0;
  border-radius: 0;
  overflow: visible;
  white-space: nowrap;
}
.match-table.od-detailed .od-detailed-team-cell:hover,
.match-table.od-detailed .od-detailed-team-cell:focus-within,
.match-table .ek-team-cell:hover,
.match-table .ek-team-cell:focus-within {
  z-index: var(--z-popover);
}
.match-table.od-detailed .od-detailed-team-layout,
.match-table .ek-team-cell .od-detailed-team-layout {
  display: grid;
  grid-template-columns: var(--od-detailed-number-col) minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.match-table .ek-team-cell .od-detailed-team-layout {
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(var(--question-size) * 2 + var(--cell-gap) * 2);
}
.match-table.ek-stage-table .ek-team-cell .od-detailed-team-layout {
  min-height: calc(var(--question-size) * 2 - var(--cell-gap) * 2);
  max-height: calc(var(--question-size) * 2 - var(--cell-gap) * 2);
  overflow: hidden;
}
.match-table .ek-team-cell .od-detailed-team-name-popover {
  left: 4px;
}
.match-table.od-detailed .od-detailed-team-number {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding: 0 var(--od-detailed-number-pad-right) 0 var(--od-detailed-number-pad-left);
  background: var(--structure);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
}
.match-table.od-detailed .od-detailed-team-name-wrap,
.match-table .ek-team-cell .od-detailed-team-name-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: inherit;
  padding: 0 6px;
  border-radius: var(--cell-radius);
  background: var(--paper);
}
.match-table.od-detailed .od-detailed-team-name,
.match-table .ek-team-cell .od-detailed-team-name {
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  line-height: var(--leading-snug);
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  outline-offset: var(--focus-outline-offset-tight);
}
.match-table.ek-stage-table .ek-team-cell .od-detailed-team-name {
  display: block;
  width: 100%;
  min-width: 0;
  max-height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}
.match-table.ek-stage-table .ek-team-cell .od-detailed-team-name::-webkit-scrollbar {
  display: none;
}
.match-table.ek-stage-table .ek-team-cell.od-detailed-team-cell-truncated .od-detailed-team-name::after {
  content: none;
}
.match-table.ek-stage-table .ek-team-cell.od-detailed-team-cell-truncated .od-detailed-team-name-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--paper));
  pointer-events: none;
}
.match-table.od-detailed .od-detailed-team-cell-truncated .od-detailed-team-name::after,
.match-table .ek-team-cell.od-detailed-team-cell-truncated .od-detailed-team-name::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 34px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--paper));
  pointer-events: none;
}
.match-table.od-detailed .od-detailed-team-name:focus,
.match-table .ek-team-cell .od-detailed-team-name:focus {
  outline: var(--focus-ring-none);
}
.match-table.od-detailed .od-detailed-team-name-popover,
.match-table .ek-team-cell .od-detailed-team-name-popover {
  position: absolute;
  top: calc(100% - 2px);
  left: calc(var(--od-detailed-number-col) + var(--space-1));
  z-index: var(--z-dropdown);
  display: none;
}
.match-table .ek-team-cell .od-detailed-team-name-popover {
  left: var(--space-1);
}
.match-table.od-detailed .od-detailed-team-cell-truncated:hover .od-detailed-team-name-popover,
.match-table.od-detailed .od-detailed-team-cell-truncated:focus-within .od-detailed-team-name-popover,
.match-table .ek-team-cell.od-detailed-team-cell-truncated:hover .od-detailed-team-name-popover,
.match-table .ek-team-cell.od-detailed-team-cell-truncated:focus-within .od-detailed-team-name-popover {
  display: block;
}
.floating-popovers-enabled .match-table.od-detailed .od-detailed-team-cell-truncated:hover .od-detailed-team-name-popover,
.floating-popovers-enabled .match-table.od-detailed .od-detailed-team-cell-truncated:focus-within .od-detailed-team-name-popover,
.floating-popovers-enabled .match-table .ek-team-cell.od-detailed-team-cell-truncated:hover .od-detailed-team-name-popover,
.floating-popovers-enabled .match-table .ek-team-cell.od-detailed-team-cell-truncated:focus-within .od-detailed-team-name-popover,
.ek-page .match-table.od-detailed .od-detailed-team-cell-truncated:hover .od-detailed-team-name-popover,
.ek-page .match-table.od-detailed .od-detailed-team-cell-truncated:focus-within .od-detailed-team-name-popover,
.ek-page .match-table .ek-team-cell.od-detailed-team-cell-truncated:hover .od-detailed-team-name-popover,
.ek-page .match-table .ek-team-cell.od-detailed-team-cell-truncated:focus-within .od-detailed-team-name-popover {
  display: none;
}

.floating-name-popover {
  position: fixed;
  z-index: var(--z-tooltip);
  display: none;
  max-width: min(420px, calc(100vw - var(--space-4)));
}

.floating-name-popover.visible {
  display: block;
}

.floating-name-popover.above {
  box-shadow: var(--shadow-popover-up);
}

.match-table.od-detailed .od-detailed-team-head {
  padding: 0;
  overflow: hidden;
}
.match-table.od-detailed .od-detailed-team-head-layout {
  height: 100%;
}
.match-table.od-detailed .od-detailed-team-head-label {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 6px;
  text-align: left;
}
/* KSI «Подробно» sortable headers: the № column and the Команда label are
   buttons that pick the local row order. Reset native button chrome but keep
   each one's column styling (.od-detailed-team-number / -head-label). */
.match-table.od-detailed .ksi-sort-head {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  /* <button> defaults to the UA text colour (black) rather than inheriting, so
     the inactive sort header vanished on dark themes. Inherit the themed header
     colour instead. */
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}
.match-table.od-detailed .od-detailed-team-head-label.ksi-sort-head {
  background: none;
}
.match-table.od-detailed .ksi-sort-head:hover {
  text-decoration: underline;
}
.match-table.od-detailed .ksi-sort-head.ksi-sort-active {
  color: var(--text);
  text-decoration: underline;
}
.match-table.ksi-detailed .sticky-total {
  padding-right: 4px;
  padding-left: 4px;
}
.match-table.compact-score-table .team-name .venue-input {
  min-height: 0;
  height: 21px;
  padding: 0 4px;
  line-height: 19px;
  font-size: var(--text-xs-plus);
  color: var(--text);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.match-table.compact-score-table .answer-cell,
.match-table.compact-score-table .question-head {
  width: var(--question-size);
  min-width: var(--question-size);
  max-width: var(--question-size);
  height: var(--question-size);
  padding: 0;
}
.match-table.od-detailed .answer-cell {
  font-size: var(--text-2xs);
  font-weight: var(--fw-regular);
  color: var(--green-dark);
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 760px) {
  .match-tabs { padding: 2px 0; }
  .match-tab { padding: 4px 10px; font-size: var(--text-xs); }

  .results-table {
    --results-place-col: var(--results-place-col-mobile);
    --results-team-col: var(--results-team-col-mobile);
    --results-team-pad: var(--results-team-pad-mobile);
    --results-total-col: var(--results-total-col-mobile);
  }

  .match-table.od-detailed {
    --od-detailed-name-col: calc(var(--od-detailed-name-base-col-compact) + var(--od-detailed-name-extra-col));
  }
  .match-table.ksi-detailed {
    --od-detailed-name-col: 140px;
    --team-col: var(--od-detailed-name-col);
    --total-col: 54px;
    --theme-score-col: 40px;
  }

  .match-table.od-detailed .od-detailed-team-name,
  .match-table .ek-team-cell .od-detailed-team-name {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .match-table.od-detailed .od-detailed-team-name::-webkit-scrollbar,
  .match-table .ek-team-cell .od-detailed-team-name::-webkit-scrollbar {
    display: none;
  }
  .match-table.od-detailed .od-detailed-team-cell-truncated .od-detailed-team-name::after,
  .match-table .ek-team-cell.od-detailed-team-cell-truncated .od-detailed-team-name::after {
    content: none;
  }
  .match-table.od-detailed .od-detailed-team-cell-truncated .od-detailed-team-name-wrap::after,
  .match-table .ek-team-cell.od-detailed-team-cell-truncated .od-detailed-team-name-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--paper));
    pointer-events: none;
  }

  .grid-slot-team-name {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .grid-slot-team-name::-webkit-scrollbar {
    display: none;
  }
  .grid-slot-team-truncated .grid-slot-team-name::after {
    content: none;
  }
  .grid-slot-team-truncated::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--paper));
    pointer-events: none;
  }

  .results-team-name {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .results-team-name::-webkit-scrollbar {
    display: none;
  }
  .results-team-truncated .results-team-name::after {
    content: none;
  }
  .results-team-truncated .results-team-name-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--inline-fade-width);
    background: var(--inline-fade-bg);
    pointer-events: none;
  }

  .results-table th,
  .results-table td { padding: 4px 6px; font-size: var(--text-xs); }
  .results-table .results-team-head,
  .results-table .results-team { padding-left: var(--results-team-pad); min-width: 0; }
  .results-team-city { font-size: var(--results-team-city-size-mobile); }
  /* Phone: tighten the name cap and the count columns so the wide stats table
     stays usable. Long names truncate (fade + popover); the numeric grid scrolls
     horizontally. The player column (Игрок) freezes at the left edge — same
     frozen-first-column pattern as the OD/KSI results tables — so it stays put
     while Команда and the counts scroll under it. */
  .ek-stats-table { --ek-stats-name-col: 132px; }
  .ek-stats-table thead th.ek-stats-player-head,
  .ek-stats-table td.ek-stats-player {
    position: sticky;
    left: 0;
  }
  .ek-stats-table td.ek-stats-player { z-index: 1; --ek-stats-fade-from: var(--paper); }
  .ek-stats-table thead th.ek-stats-player-head { z-index: 4; --ek-stats-fade-from: var(--structure); }
  /* Scrolled-under fade off the frozen player column's right edge, drawn once
     the rest has scrolled — same cue as the OD/KSI results tables. The scroll
     frame toggles .stage-scroll-left (viewer.js / host.js). */
  .sheet-frame.stage-scroll-left .ek-stats-table td.ek-stats-player::after,
  .sheet-frame.stage-scroll-left .ek-stats-table thead th.ek-stats-player-head::after {
    content: "";
    position: absolute;
    top: 0;
    right: -28px;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, var(--ek-stats-fade-from), rgba(238, 241, 244, 0));
  }
  .ek-stats-table .narrow { width: 26px; min-width: 26px; }
  .results-place-head,
  .results-place {
    width: var(--results-place-col);
    min-width: var(--results-place-col);
    max-width: var(--results-place-col);
    padding-right: 0;
    padding-left: 0;
    font-size: var(--text-xs-tight);
  }
  .results-table thead th.results-place-head {
    font-size: 0;
  }
  .results-table thead th.results-place-head::after {
    content: "М";
    font-size: var(--text-xs-tight);
  }
  .seed-import-table thead th.seed-number-head {
    font-size: var(--text-xs-tight);
  }
  .seed-import-table thead th.seed-number-head::after {
    content: none;
  }
  .results-num-head,
  .results-tour-head {
    width: var(--results-num-col-mobile);
    min-width: var(--results-num-col-mobile);
    max-width: var(--results-num-col-mobile);
  }
  .results-table .results-team,
  .results-table thead .results-team-head { left: var(--results-place-col); }
  .results-table .results-total,
  .results-table thead .results-total-head {
    left: calc(var(--results-place-col) + var(--results-team-col));
  }
  .od-results-table .results-team,
  .od-results-table thead .results-team-head,
  .ksi-results-table .results-team,
  .ksi-results-table thead .results-team-head,
  .venues-results-table .results-team,
  .venues-results-table thead .results-team-head {
    width: var(--results-team-col);
    min-width: var(--results-team-col);
    max-width: var(--results-team-col);
  }
  .results-table thead th.results-total-head,
  .results-table .results-total {
    width: var(--results-total-col);
    min-width: var(--results-total-col);
    max-width: var(--results-total-col);
  }
}

/* Public EK viewer tuning. */
.readonly-battle-popover {
  display: none;
}

.viewer-readonly .match-main:has(.fight-host) .fight-frame {
  box-shadow: var(--shadow-scroll-inset);
}

.viewer-readonly .match-table.ek-stage-table.readonly-table {
  --question-size: 26px;
  --team-col: 158px;
  --total-col: 46px;
  --place-col: 30px;
  --place-gap: 8px;
  --theme-score-col: 42px;
  --theme-gap-col: 16px;
  --narrow-col: 24px;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .sticky-name {
  width: var(--team-col);
  min-width: var(--team-col);
  max-width: var(--team-col);
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .sticky-total {
  left: var(--team-col);
  width: var(--total-col);
  min-width: var(--total-col);
  max-width: var(--total-col);
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .sticky-place {
  width: var(--place-col);
  min-width: var(--place-col);
  max-width: var(--place-col);
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .place-gap,
.viewer-readonly .match-table.ek-stage-table.readonly-table .place-gap-head {
  width: var(--place-gap);
  min-width: var(--place-gap);
  max-width: var(--place-gap);
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .theme-head,
.viewer-readonly .match-table.ek-stage-table.readonly-table .theme-score {
  width: var(--theme-score-col);
  min-width: var(--theme-score-col);
  max-width: var(--theme-score-col);
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .gap,
.viewer-readonly .match-table.ek-stage-table.readonly-table .gap-head {
  width: var(--theme-gap-col);
  min-width: var(--theme-gap-col);
  max-width: var(--theme-gap-col);
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .narrow {
  width: var(--narrow-col);
  min-width: var(--narrow-col);
  max-width: var(--narrow-col);
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-battle-head {
  padding-right: 6px;
  padding-left: 6px;
  font-size: var(--text-xs);
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-battle-title {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-battle-title:focus {
  outline: var(--focus-ring-none);
  outline-offset: var(--focus-outline-offset-tight);
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-battle-name {
  flex: 0 0 auto;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-battle-venue {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-player {
  position: relative;
  overflow: hidden;
  padding-right: 8px;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-player-text-wrap {
  position: absolute;
  top: 0;
  right: 8px;
  bottom: 0;
  left: 8px;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-player-text {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  white-space: nowrap;
  text-overflow: clip;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-player-text::-webkit-scrollbar {
  display: none;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-player.readonly-player-cell-truncated .readonly-player-text-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--inline-fade-width);
  background: var(--inline-fade-bg);
  pointer-events: none;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-player-popover {
  position: absolute;
  top: calc(100% - 2px);
  left: var(--space-1);
  z-index: var(--z-dropdown);
  display: none;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-player.readonly-player-cell-truncated:hover .readonly-player-popover,
.viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-player.readonly-player-cell-truncated:focus-within .readonly-player-popover {
  display: block;
}

.floating-popovers-enabled .viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-player.readonly-player-cell-truncated:hover .readonly-player-popover,
.floating-popovers-enabled .viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-player.readonly-player-cell-truncated:focus-within .readonly-player-popover,
.ek-page .viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-player.readonly-player-cell-truncated:hover .readonly-player-popover,
.ek-page .viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-player.readonly-player-cell-truncated:focus-within .readonly-player-popover {
  display: none;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .ek-team-cell .od-detailed-team-name-wrap {
  align-items: center;
  overflow: hidden;
  padding-right: 7px;
  padding-left: 7px;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .ek-team-cell .od-detailed-team-name {
  display: block;
  max-height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  line-height: 1.15;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
}
.viewer-readonly .match-table.ek-stage-table.readonly-table .ek-team-cell .od-detailed-team-name::-webkit-scrollbar {
  display: none;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .ek-team-cell.od-detailed-team-cell-truncated .od-detailed-team-name::after {
  content: none;
}

.viewer-readonly .match-table.ek-stage-table.readonly-table .ek-team-cell.od-detailed-team-cell-truncated .od-detailed-team-name-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--paper));
  pointer-events: none;
}

@media (max-width: 760px) {
  .game-host-top {
    display: grid;
    grid-template-columns: minmax(0, auto) 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: var(--space-1);
    height: auto;
    padding: var(--space-1-5) var(--space-2-5);
  }

  .game-host-top:has(.match-tabs:not([hidden]):not(:empty)) {
    grid-template-rows: auto auto;
  }

  .game-host-top .game-header-main {
    display: contents;
  }

  .game-host-top .game-breadcrumbs {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
    font-size: var(--text-xs);
  }

  .game-host-top .od-header-progress {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    font-size: var(--text-xs);
  }

  .game-host-top .match-tabs {
    grid-column: 1 / span 2;
    grid-row: 2;
    width: 100%;
  }

  .game-host-top .host-actions {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;
    justify-self: end;
  }

  /* Stack the viewer count above the sync tick, shrinking both so the pair
     stays the same height as the viewer-mode button instead of widening. */
  .host-actions .sync-stack {
    flex-direction: column;
    gap: var(--space-0-5);
  }

  .host-actions .sync-stack .viewers-count {
    font-size: var(--text-xs);
  }

  .host-actions .sync-stack .sync-status {
    width: auto;
    height: 16px;
  }

  .ek-page .ek-tabs .match-tab {
    height: 24px;
    padding: 0 var(--space-2-5);
    font-size: var(--text-xs-plus);
    line-height: 22px;
  }

  .od-page .match-main,
  .si-page .match-main {
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
  }

  .ek-page .match-main {
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px);
    padding: 3px 4px 4px;
  }

  .viewer-readonly .match-table.ek-stage-table.readonly-table {
    --question-size: 26px;
    --team-col: 112px;
    --total-col: 42px;
    --place-col: 24px;
    --place-gap: 4px;
    --theme-score-col: 40px;
    --theme-gap-col: 12px;
    --narrow-col: 22px;
    font-size: var(--text-xs);
  }

  .viewer-readonly .match-table.ek-stage-table.readonly-table .team-name {
    font-size: var(--text-xs);
  }

  .viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-battle-head {
    font-size: var(--text-xs);
  }

  .viewer-readonly .match-table.ek-stage-table.readonly-table .readonly-player {
    font-size: var(--text-xs);
  }

  .venues-results-table {
    width: 100%;
    min-width: 0;
  }
}

/* Mass number import (Импорт номеров) — paste modal + confirmation modal. */
.numbers-import-dialog {
  width: min(640px, calc(100vw - var(--space-6)));
  padding: 0;
  border: 1px solid var(--grid-dark);
  border-radius: var(--radius-md);
  background-color: var(--paper);
  color: var(--text);
  box-shadow: var(--shadow-modal);
}

.numbers-import-dialog::backdrop {
  background: var(--backdrop);
}

.numbers-import-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4, 16px);
  max-height: calc(100vh - var(--space-6));
}

.numbers-import-form h2 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
}

.numbers-import-textarea {
  width: 100%;
  resize: vertical;
  padding: var(--space-2) var(--space-2-5);
  border: 1px solid var(--action-border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
}

.numbers-import-errors {
  margin: 0;
  padding-left: 1.2em;
  color: var(--muted);
  font-size: var(--text-sm);
}

.numbers-import-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.numbers-import-row {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr) auto minmax(0, 1.4fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1, 4px) 0;
}

.numbers-import-num {
  font-weight: var(--fw-bold);
  text-align: right;
}

.numbers-import-raw {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.numbers-import-arrow {
  color: var(--muted-light);
}

.numbers-import-select {
  width: 100%;
  min-height: 32px;
  padding: 4px 6px;
  border: 1px solid var(--action-border);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text);
  font: inherit;
}

.numbers-import-badge {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
}

.numbers-import-row.is-fuzzy .numbers-import-badge { color: var(--amber-text); }
.numbers-import-row.is-unmatched .numbers-import-badge { color: var(--muted-light); }

.numbers-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* ════════════════════════════════════════════════════════════════════════
   APPEARANCE: dark theme + high-contrast mode
   Two independent axes set by menu.js on <html>:
     data-theme    = light | dark
     data-contrast = regular | high
   Default (no overrides) is the light/regular palette in :root above. Each
   block below only re-points existing color variables, so the whole app
   re-themes through the variables it already uses. The high-contrast blocks
   are scoped per theme ([data-theme=light/dark][data-contrast=high]) so they
   layer on top of the active theme with higher specificity than the bare
   dark block — order-independent.
   Palette rationale (Material dark theme + WCAG): no pure black; depth via
   lighter surfaces ~3-4 L apart, not shadows; off-white (not #fff) text;
   lightened/desaturated accents; high-contrast separates adjacent surfaces
   with stronger, text-colored borders and darker grays.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Dark theme ─────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  /* let native controls (select dropdown arrows, scrollbars, the date picker)
     render with the dark UA palette — otherwise the <select> arrows stay black
     and vanish against dark fills */
  color-scheme: dark;
  /* neutral surfaces — base (page) darkest, paper/cards lifted, structure/
     header/hover progressively lighter to read as elevation */
  --page: #14161b;
  --paper: #1e2128;
  --paper-transparent: rgba(30, 33, 40, 0);
  --surface: var(--paper);
  --structure: #262a31;
  --header: #22262d;
  --toolbar: #20242b;
  --hover-bg: #2c313a;
  --accent-soft: #1d2532;
  --grid: #353b45;
  --grid-dark: #474e5a;
  --border: var(--grid-dark);
  --border-soft: #2d323b;
  --action-bg: #262a31;
  --action-border: #3a414c;
  --action-disabled-bg: #20242b;

  /* text — off-white high-emphasis, dimmer for muted (avoids halation) */
  --text: #e4e6ea;
  --text-strong: #f2f4f6;
  --muted: #a6acb5;
  --muted-light: #7a818b;
  --slate: #94a3b8;
  --slate-strong: #cbd5e1;

  /* accents — lighter + a touch desaturated so they don't vibrate on dark */
  --blue: #5b9bf5;
  --blue-tint: #1b2942;
  --blue-soft: #213450;
  --blue-strong: #8fbaf8;
  --blue-bright: #5e8ff2;
  --warning-soft: #243349;

  /* status — re-picked for dark, not desaturated light values */
  --green: #33814b;
  /* --green-dark is a *foreground* on dark: green text on dark paper, and the
     question-number digit over the --green cell fill. #2b8446 sat too close to
     both surfaces in luminance to read — lift it to a legible light green. */
  --green-dark: #7fd29b;
  --red: #9a353c;
  --red-dark: #f0a0aa;
  --red-soft: #2a1c1e;
  --success: #2ecc6f;
  --success-alt: #3ed47e;
  --success-soft: #15291d;
  --success-text: #86e6a8;
  --danger: #f25555;
  --danger-soft: #2c1518;
  --danger-text: #f7a6b4;

  /* amber/warning — shifted warm so it stays visible on dark */
  --amber-bg: #463713;
  --amber-border: #c4881d;
  --amber-text-strong: #f6ddc0;
  --amber-text: #e3aa55;

  /* overlays — deepen black-based scrims; shadows are a weak cue on dark */
  --backdrop: rgba(0, 0, 0, 0.6);
  --scroll-fade-color: rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] body {
  background: var(--page);
}

/* The detailed team number is muted (secondary) in light, but on dark a muted
   gray drops below the names/scores and disappears on poor displays — the very
   monitors this feature targets. Promote it to the primary text color. */
:root[data-theme="dark"] .match-table.od-detailed .od-detailed-team-number {
  color: var(--text);
}

/* ── High contrast, light theme ─────────────────────────────────────────────
   Motivating case: a monitor that can't separate white from light gray.
   Darken the structural grays well clear of white and strengthen borders so
   cell/row boundaries carry separation regardless of fill. Push text toward
   AAA. */
:root[data-theme="light"][data-contrast="high"] {
  --grid: #9aa1ab;
  --grid-dark: #5f6772;
  --border: var(--grid-dark);
  --border-soft: #b5bcc6;
  --structure: #d2d8e0;
  --header: #cbd0d7;
  --toolbar: #dbe1ea;
  --page: #e6e9ee;
  --hover-bg: #ccd2da;
  --accent-soft: #dbe5f4;
  --action-bg: #e9edf2;
  --action-border: #8b929c;

  --text: #16181b;
  --text-strong: #000000;
  --muted: #3c4043;
  --muted-light: #5f6368;

  --blue-strong: #103d86;
  --green-dark: #1f6e44;
  --red-dark: #8a2e37;
  --success-text: #0f5132;
  --danger-text: #7a0c2e;

  /* answer-cell fills (right/wrong). The default pastel 'wrong' reads as gray
     on the high-contrast gray page. Saturate both, and separate them in
     LUMINANCE as well as hue (dark green vs light coral) so they stay
     distinguishable for red-green colour-blindness, not by hue alone. */
  --green: #3d8f5b;
  --red: #ec8585;
}

/* ── High contrast, dark theme ─────────────────────────────────────────────
   Brighten borders and text, and widen the surface lightness gaps so adjacent
   panels stay distinct on a poor display. */
:root[data-theme="dark"][data-contrast="high"] {
  --page: #0e1014;
  --paper: #1f232b;
  --structure: #2f3540;
  --header: #2b313b;
  --toolbar: #282d36;
  --hover-bg: #363d49;
  --grid: #5a626e;
  --grid-dark: #828b98;
  --border: var(--grid-dark);
  --border-soft: #4a515c;
  --action-border: #5a626e;

  --text: #f6f8fa;
  --text-strong: #ffffff;
  --muted: #c4cad2;
  --muted-light: #9aa1ab;

  --blue: #7fb0f8;
  --green-dark: #9be0b3;
  --red-dark: #f6bcc3;
}

/* ── ☰ menu (Appearance item, edit/view jump, downloads, account) ───────── */
.menu {
  position: relative;
  display: inline-flex;
}

.menu-floating {
  position: fixed;
  top: var(--space-2);
  right: var(--space-2);
  z-index: var(--z-dropdown);
}

.menu-trigger svg {
  display: block;
}

/* In a .public-top bar (which baseline-aligns its title), pin the menu to the
   right and centre it vertically against the bar instead of riding the baseline. */
.menu-public {
  margin-left: auto;
  align-self: center;
}

.menu-floating .menu-trigger {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-popover);
}

.menu-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 184px;
  display: flex;
  flex-direction: column;
  padding: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  z-index: var(--z-dropdown);
}

.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-2-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: var(--cursor-action);
}

.menu-item:hover,
.menu-item:focus-visible {
  background: var(--hover-bg);
}

/* ── Appearance modal ───────────────────────────────────────────────────── */
.appearance-modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--backdrop);
  z-index: var(--z-modal);
}

.appearance-modal {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
}

.appearance-modal-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
}

.appearance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.appearance-row-label {
  font-size: var(--text-sm);
  color: var(--muted);
}

.appearance-segment {
  display: inline-flex;
  padding: var(--space-0-5);
  background: var(--structure);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.appearance-segment-btn {
  padding: var(--space-1-5) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: var(--cursor-action);
}

.appearance-segment-btn.is-active {
  background: var(--surface);
  color: var(--text-strong);
  box-shadow: var(--shadow-popover);
  font-weight: var(--fw-semibold);
}

.appearance-modal-done {
  align-self: flex-end;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--action-border);
  border-radius: var(--radius-md);
  background: var(--action-bg);
  color: var(--action-fg);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: var(--cursor-action);
}

/* ============================================================
   xy — board / card / kanban (built on the shared design tokens)
   ============================================================ */

/* Kanban depth is carried by fill, not borders: a column is a panel lifted off
   the canvas, and a card is lifted again off the column. The two surface tokens
   sit in opposite luminance order per theme (light: surface=white is brightest;
   dark: structure is brighter than surface), so map them per theme to keep the
   card reading brighter (= raised) than its column in both. */
:root { --kanban-col: var(--structure); --kanban-card: var(--surface); }
:root[data-theme="dark"] { --kanban-col: var(--surface); --kanban-card: var(--structure); }

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
  font-weight: var(--fw-semibold);
}
.btn-ghost:hover { border-color: var(--text); color: var(--text); }
.btn-small { min-height: 30px; padding: 0 var(--space-3); }

/* board list */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) 0;
}
.board-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 90px;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--text);
}
.board-card:hover { background: var(--hover-bg); }
.board-card-name { font-weight: var(--fw-bold); font-size: var(--text-lg); }
.board-card-role { font-size: var(--text-xs); color: var(--muted); }

/* trello import */
.import-form { max-width: 760px; margin: 0 auto; }
.import-form .card-desc { min-height: 320px; }

/* kanban — the board is an SPA: the header is fixed and never scrolls, the
   lower section (.board-main) fills the rest of the viewport and only scrolls
   *inside* itself (the kanban scrolls horizontally, each list vertically), so
   the page as a whole never scrolls or rubber-bands. */
.board-page .board-main {
  height: calc(100dvh - var(--xy-header-h));
  overflow: hidden;
  padding: var(--space-4) var(--page-pad-x);
}
/* The card modal (z 50) covers the lower section, but the fixed header — and its
   ☰ dropdown — must stay above it (the settings/unlock modals at z-modal still
   win over both). */
.board-page .host-top { z-index: 60; }
/* import & other .board-main pages keep their natural padding + page scroll */
.board-main { padding: var(--space-4) var(--page-pad-x) var(--space-6); }
.kanban {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  height: 100%;
  overflow-x: auto;
  padding-bottom: var(--space-2);
}
.klist {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 100%;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--kanban-col);
}
.klist.dragging { opacity: 0.5; }
.klist-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); }
.klist-title { font-weight: var(--fw-bold); }
.kadd {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: var(--cursor-action);
}
.kadd:hover { color: var(--text); }
.kcards { display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; min-height: var(--space-6); padding: var(--space-1); }
.kcard {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--kanban-card);
  cursor: pointer;
}
.kcard:hover { background: var(--hover-bg); }
.kcard.dragging { opacity: 0.4; }
.kcard-title { font-size: var(--text-sm); white-space: pre-wrap; word-break: break-word; }
/* auto/directive question number reads as scaffolding, not content */
.kcard-num { color: var(--muted); }
.kcard-labels { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-1); }
/* heading cards read as list dividers (no tile), meta cards as muted notes */
.kcard-heading { background: transparent; padding-bottom: var(--space-1); }
.kcard-heading:hover { background: transparent; }
.kcard-heading .kcard-title { font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); }
.kcard-meta .kcard-title { color: var(--muted); font-style: italic; }
.klist-add { background: transparent; }
.klist-add .kadd-form { color: var(--muted); }
.klist-add:hover .kadd-form { color: var(--text); }
.kadd-form { width: 100%; }

/* list group (list_of_lists): a bordered region whose single header spans its
   member lists, so it reads as one unit on the board. */
.kgroup {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-self: stretch;
  max-height: 100%;
  padding: var(--space-2);
  border: 2px solid var(--blue-strong);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
}
.kgroup-head {
  padding: var(--space-1) var(--space-2);
  font-weight: var(--fw-bold);
  color: var(--blue-strong);
}
.kgroup-title { white-space: nowrap; }
.kgroup-lists { display: flex; gap: var(--space-3); align-items: flex-start; overflow: hidden; min-height: 0; }
.kgroup-lists .klist { background: var(--kanban-col); }

/* labels */
.label-chip {
  display: inline-block;
  width: 34px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--muted);
}

/* card detail overlay — occupies the whole lower section (below the fixed
   header), fully obscuring the kanban; the panel itself scrolls internally so
   the page never scrolls. */
.card-overlay {
  position: fixed;
  top: var(--xy-header-h);
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--backdrop);
  overflow: hidden;
  z-index: 50;
}
.card-detail {
  width: min(680px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  overflow-y: auto;
  background: var(--surface);
  box-shadow: var(--shadow-modal);
}
/* The detail is a fixed-height scrolling flex column; pin every child at its
   natural size (flex: none) so nothing is compressed — iOS WebKit otherwise
   shrinks native <select>s below their min-height and clips the value text. */
.card-detail > * { flex: none; }
/* type selector, copy button and close × share one line */
.card-detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.card-kind-select { flex: 0 1 auto; width: auto; min-width: 0; }
/* Test-card session heading (shown instead of the kind selector). */
.card-detail-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-head-actions { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; margin-left: auto; }
/* Copy-for-test feedback sits right under the button (top-right of the panel). */
.card-copy-msg { align-self: flex-end; margin-top: calc(var(--space-1) * -1); font-size: var(--text-xs); color: var(--green, var(--accent)); }
.card-copy-msg[data-err] { color: var(--red, var(--danger)); }
/* Flat card view: the only borders are on buttons. Inputs/selects, the editor,
   timeline events and the colour swatch read as fills, not boxed fields. */
.card-detail .input,
.card-detail .card-desc,
.card-detail .label-color-input { border-color: transparent; background: var(--page); }
.card-detail .input:focus,
.card-detail .card-desc:focus { border-color: var(--blue); }
.card-detail .tl-event { border-color: transparent; }
.card-section-label { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; margin-top: var(--space-3); }
.card-desc {
  width: 100%;
  min-height: 260px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--page);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  resize: vertical;
}
.comment-input { min-height: 52px; }
.comment-form { display: flex; flex-direction: column; gap: var(--space-2); }

/* label picker */
.label-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Assigned labels render as filled colour pills (the colour is set via the CSSOM
   in paintLabels); the trailing "×" stays as the remove affordance. */
.label-pick {
  padding: var(--space-0-5) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--muted);
  color: #fff;
  font-size: var(--text-xs);
  cursor: var(--cursor-action);
}
.label-pick.is-on { font-weight: var(--fw-bold); }
.label-empty { font-size: var(--text-xs); color: var(--muted); padding: var(--space-1) var(--space-2); }
/* position:relative anchors the custom add-label popup (.menu-dropdown) below
   the trigger button. */
.label-add-row { position: relative; display: flex; gap: var(--space-2); align-items: center; }
.label-add-row .input { flex: 1; min-width: 0; }
/* trigger looks like the old <select> but is a plain button (it opens a custom
   filterable list rather than a native dropdown). */
.label-add-btn { text-align: left; color: var(--muted); cursor: var(--cursor-action); }

/* custom add-label popup: filter field over a scrollable, sorted label list */
.label-add-popup { left: 0; right: 0; min-width: 0; gap: var(--space-1); }
.label-add-filter { margin-bottom: var(--space-1); }
.label-add-list { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; }
.label-add-item { display: flex; align-items: center; gap: var(--space-2); }
.label-swatch { flex: none; width: 12px; height: 12px; border-radius: var(--radius-sm); background: var(--muted); }
.label-add-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-create { display: flex; gap: var(--space-2); align-items: center; }
.label-color-input { width: 38px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }

/* timeline */
.timeline { display: flex; flex-direction: column; gap: var(--space-2); max-height: 320px; overflow-y: auto; }
.tl-event { padding: var(--space-2) var(--space-3); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--page); }
.tl-meta { font-size: var(--text-2xs); color: var(--muted); }
.tl-comment { white-space: pre-wrap; font-size: var(--text-sm); margin-top: var(--space-1); }

/* members / sharing modal */
.members-list { display: flex; flex-direction: column; gap: var(--space-1); max-height: 320px; overflow-y: auto; }
.member-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.member-name { flex: 1; min-width: 0; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-role { font-size: var(--text-2xs); color: var(--muted); }
.member-del { font-size: var(--text-lg); }
.member-add { display: flex; gap: var(--space-2); align-items: center; }
.member-add .input { flex: 1; min-width: 0; }

/* register code */
.register-code { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-align: center; padding: var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius-md); }

/* attachments (card detail) */
.attachments { display: flex; flex-direction: column; gap: var(--space-1); }
.attach-row { display: flex; align-items: center; gap: var(--space-2); }
.attach-name { flex: 1; text-align: left; border: none; background: transparent; color: var(--blue, var(--text)); cursor: var(--cursor-action); font-size: var(--text-sm); }
.attach-name:hover { text-decoration: underline; }
.attach-size { font-size: var(--text-2xs); color: var(--muted); }
.attach-del { border: none; background: transparent; color: var(--muted); cursor: var(--cursor-action); font-size: var(--text-lg); line-height: 1; }
.attach-del:hover { color: var(--red-dark, var(--danger)); }
.attach-add { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.attach-lossless { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--muted); }
.card-move { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.card-move .input { flex: 1 1 110px; min-width: 0; }
/* selects must never push past their container on narrow screens */
.card-detail select.input { max-width: 100%; }
.card-move-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
/* stacked variant for the move-list modal: each label sits above its select */
.card-move-stack { flex-direction: column; align-items: stretch; }
.card-move-stack .input { flex: none; width: 100%; }
.card-move-stack .card-section-label { margin-top: var(--space-2); }

/* per-list "⋯" menu: anchor the shared .menu-dropdown under the trigger */
.klist-menu-wrap { position: relative; display: inline-flex; }

/* two-pane before/after diff (timeline desc_edit), with the word-level changes
   highlighted inside each pane */
.tl-diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--text-2xs); }
.tl-before, .tl-after { padding: var(--space-2); border-radius: var(--radius-xs); white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.tl-before { background: var(--red-soft); }
.tl-after { background: var(--green-soft, var(--accent-soft)); }
.tl-chg { border-radius: var(--radius-xs); color: #fff; padding: 0 1px; }
.tl-before .tl-chg { background: var(--red); text-decoration: line-through; }
.tl-after .tl-chg { background: var(--green); text-decoration: none; }


/* card create mode: show only the type chooser + description editor */
.card-detail.creating [data-edit-only] { display: none !important; }
.card-detail:not(.creating) [data-create-only] { display: none !important; }

/* list preview ("à la docx export", rendered client-side) — a wide, scrollable
   reading view layered over the board like the card detail. */
.preview-doc {
  width: min(820px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-modal);
}
.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex: none;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.preview-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-head-actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.preview-screen-toggle { white-space: nowrap; cursor: var(--cursor-action); }
.preview-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text);
}
/* Cap the reading column to a comfortable measure (~66 characters) and centre it
   — full-width lines on a wide modal are tiring to read. */
.preview-body > * { margin: 0 auto var(--space-3); max-width: 66ch; }
/* docx-like rhythm: a larger gap before each question, a small gap between the
   question text and its answer block, and no gap between the answer/zachet/
   comment/source/author lines (they read as one tight block). */
.pv-q { margin-bottom: var(--space-6); }
/* preserve authored line breaks inside multi-line question/answer/meta text */
.pv-q-text, .pv-field, .pv-meta, .pv-list-item { white-space: pre-wrap; }
.pv-q-text { margin-bottom: var(--space-2); }
.pv-field { margin-bottom: 0; }
.pv-label { font-weight: var(--fw-bold); }
/* numbered list (sources, blitz/duplet questions & answers): hanging "N." — the
   numbers are plain weight (only field labels are bold). */
.pv-list { margin-top: var(--space-1); }
.pv-list-item { padding-left: 1.6em; text-indent: -1.6em; margin-bottom: var(--space-0-5); }
.pv-list-num { font-weight: var(--fw-normal); }
.pv-handout { color: var(--muted); }
.pv-heading { font-size: var(--text-xl); font-weight: var(--fw-bold); margin: var(--space-5) 0 var(--space-3); }
.pv-section { font-size: var(--text-lg); font-weight: var(--fw-semibold); margin: var(--space-4) 0 var(--space-2); }
.pv-test { color: var(--muted); font-style: italic; }
.pv-testers { white-space: pre-wrap; line-height: 1.7; font-size: var(--text-base); }
.pv-empty { color: var(--muted); }
/* break long URLs at any character so they never force horizontal scroll on
   narrow screens (links are often unbreakable runs with no spaces). */
.pv-link { color: var(--blue, var(--text)); overflow-wrap: anywhere; word-break: break-word; }
.pv-sc { font-variant: small-caps; }
.pv-pagebreak { border: 0; border-top: 1px dashed var(--border); margin: var(--space-4) 0; }
.pv-img {
  display: block;
  max-width: min(100%, 480px);
  max-height: 5em;
  width: auto;
  height: auto;
  margin: var(--space-2) 0;
  border-radius: var(--radius-sm);
}
.pv-img-missing { color: var(--muted); font-style: italic; }

/* Touch / small screens: shrink the type to fit more questions on screen (the
   same densification ~/dope applies on mobile). */
@media (max-width: 760px) {
  /* tighter board header so more of the board is visible on phones */
  .board-page { --xy-header-h: 48px; }
  .board-page .host-top { height: 48px; padding: 6px 10px; gap: 6px; }
  .board-page h1 { font-size: var(--text-lg); }
  .board-page .action-icon { width: 30px; height: 30px; font-size: 15px; }

  .board-main { padding: var(--space-2) var(--space-2); }
  .klist { flex-basis: 86vw; max-width: 320px; }
  .klist-title { font-size: var(--text-sm); }
  .kcard { padding: var(--space-1) var(--space-2); }
  .kcard-title { font-size: var(--text-xs); }
  /* keep the label pills off the card's top edge */
  .kcard-labels { margin-top: var(--space-1); }
  .card-detail { padding: var(--space-4) var(--space-3); }
  .preview-head { padding: var(--space-3) var(--space-4); }
  .preview-body { padding: var(--space-4) var(--space-4); font-size: var(--text-sm); }
  .card-desc { font-size: var(--text-xs-plus); min-height: 200px; }
  .card-section-label { margin-top: var(--space-2); }
  .tl-comment { font-size: var(--text-xs-plus); }
  .label-pick { font-size: var(--text-2xs); }
}

/* ЧГК play timer — floats bottom-right, above the kanban/card modal (z 50) but
   below the fixed header (z 60). Toggled by the ⏰ header button (timer.js). */
.timer-overlay {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 240px;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.timer-overlay[hidden] { display: none; }
.timer-row, .timer-custom { display: flex; }
.timer-preset, .timer-custom-input { width: 100%; }
.timer-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}
.timer-time {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  font-size: 56px;
  line-height: 1;
  color: var(--text-strong);
}
.timer-time.timer-urgent { color: var(--danger); }
.timer-time.timer-answer { color: var(--accent); }
.timer-label {
  font-size: var(--text-xs);
  color: var(--muted);
  min-height: 1em;
}
.timer-actions { display: flex; gap: var(--space-2); justify-content: center; }
.timer-actions .btn { flex: 1; }

@media (max-width: 760px) {
  .timer-overlay { right: var(--space-2); bottom: var(--space-2); width: min(220px, calc(100vw - 2 * var(--space-2))); padding: var(--space-2); }
  .timer-time { font-size: 44px; }
  .timer-display { padding: var(--space-1) 0; }
  /* let the three control buttons shrink to share the row instead of overflowing
     the box (flex items default to min-width:auto = their text width) */
  .timer-actions { gap: var(--space-1); }
  .timer-actions .btn { min-width: 0; padding-left: var(--space-2); padding-right: var(--space-2); }
}

/* API tokens page (tokens.html) — built on the auth/sheet layout above. */
.auth-subhead {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.token-reveal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.token-value {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  word-break: break-all;
  user-select: all;
}
.token-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.token-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.token-row-inactive { opacity: 0.55; }
.token-row-main {
  grid-column: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.token-row-label { font-weight: var(--fw-bold); color: var(--text-strong); }
.token-row-status { font-size: var(--text-xs); color: var(--muted); }
.token-row-meta {
  grid-column: 1;
  font-size: var(--text-xs);
  color: var(--muted);
}
.token-revoke {
  grid-column: 2;
  grid-row: 1 / span 2;
  white-space: nowrap;
}

/* ── card detail: 3-view switch (Просмотр / Поля / Текст) ─────────────────── */
.card-view-tabs {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  background: var(--page);
  border-radius: var(--radius-md);
  padding: 3px;
}
.card-view-tab {
  flex: 1 1 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: var(--cursor-action);
}
.card-view-tab:hover { color: var(--text); }
.card-view-tab.active { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-sm); }
.card-view { margin-top: var(--space-2); }
/* preview view inside the card: a bounded, scrollable docx-style render */
.card-preview-screen { display: inline-flex; align-items: center; gap: var(--space-1); cursor: var(--cursor-action); margin-bottom: var(--space-2); }
.card-preview-body {
  padding: var(--space-3) var(--space-4);
  background: var(--page);
  border-radius: var(--radius-md);
  max-height: 52vh;
  overflow-y: auto;
  cursor: text;
}
.card-preview-body > * { max-width: none; }

/* ── structured fields (Поля) ─────────────────────────────────────────────── */
.card-fields { display: flex; flex-direction: column; gap: var(--space-2); }
.fld { display: flex; flex-direction: column; }
.fld-add {
  align-self: flex-start;
  border: 1px dashed var(--border);
  background: var(--page);
  color: var(--muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  cursor: var(--cursor-action);
}
.fld-add:hover { color: var(--text); border-color: var(--muted); }
.fld-muted .fld-add { opacity: 0.75; }
.fld-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.fld-label { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.fld-rm, .fld-row-rm, .fld-tag-rm {
  border: none; background: transparent; color: var(--muted);
  font-size: var(--text-base); line-height: 1; cursor: var(--cursor-action);
  padding: 0 var(--space-1);
}
.fld-rm:hover, .fld-row-rm:hover, .fld-tag-rm:hover { color: var(--red); }
.fld-body { margin-top: var(--space-1); }
.fld-input { width: 100%; }
textarea.fld-input { min-height: 3em; }
.fld-rows { display: flex; flex-direction: column; gap: var(--space-1); }
.fld-row { display: flex; align-items: center; gap: var(--space-1); }
.fld-row-input { flex: 1; }
.fld-add-row { align-self: flex-start; font-size: var(--text-sm); margin-top: var(--space-1); cursor: var(--cursor-action); padding: var(--space-1) var(--space-2); width: auto; }
/* handout text/image toggle */
.seg-toggle { display: inline-flex; gap: 2px; background: var(--page); border-radius: var(--radius-sm); padding: 2px; margin-bottom: var(--space-1); }
.seg-btn {
  border: none; background: transparent; color: var(--muted); font: inherit;
  font-size: var(--text-sm); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm); cursor: var(--cursor-action);
}
.seg-btn.active { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-sm); }
/* test-card tester rows: игрок/команда toggle sits inline with the name input */
.tester-seg { margin-bottom: 0; flex: none; }
/* author tags */
.fld-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-1); }
.fld-tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--page); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px var(--space-2); font-size: var(--text-sm);
}

/* ── handouts generation modal ────────────────────────────────────────────── */
.handouts-doc { width: min(1100px, 100%); }
.handouts-body { flex: 1; display: flex; min-height: 0; }
.handouts-pane { flex: 1 1 50%; display: flex; flex-direction: column; min-width: 0; padding: var(--space-4) var(--space-5); overflow-y: auto; }
.handouts-src { border-right: 1px solid var(--border); }
.handouts-textarea { flex: 1; min-height: 320px; width: 100%; }
.handouts-preview-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.handouts-pdf { flex: 1; margin-top: var(--space-2); background: var(--page); border-radius: var(--radius-md); min-height: 320px; display: flex; }
.handouts-pdf-frame { flex: 1; width: 100%; height: 100%; border: none; border-radius: var(--radius-md); }

@media (max-width: 720px) {
  .handouts-body { flex-direction: column; }
  .handouts-src { border-right: none; border-bottom: 1px solid var(--border); }
  .card-preview-body { max-height: 40vh; }
}

/* ── lists management modal ────────────────────────────────────────────────── */
.lists-manage { width: min(560px, 100%); text-align: left; }
.lists-manage-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-3);
}
.lists-manage-moverow { display: flex; align-items: center; gap: var(--space-2); }
.lists-move-pos { width: 4.5rem; }
.lists-manage-rows {
  display: flex; flex-direction: column; gap: var(--space-2);
  max-height: 55vh; overflow-y: auto; padding: var(--space-1);
}
.lm-unit { border-radius: var(--radius-md); background: var(--structure); }
.lm-unit.dragging { opacity: 0.5; }
.lm-group { border: 2px solid var(--blue-strong); background: var(--accent-soft); padding: var(--space-1); }
.lm-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); }
.lm-check { display: inline-flex; align-items: center; }
.lm-pos { color: var(--muted); font-size: var(--text-sm); min-width: 2.2rem; }
.lm-handle { color: var(--muted); cursor: grab; font-size: var(--text-lg); line-height: 1; }
.lm-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-group-title { font-weight: var(--fw-bold); color: var(--blue-strong); white-space: normal; }
.lm-icon {
  border: none; background: transparent; color: var(--muted);
  cursor: var(--cursor-action); font-size: var(--text-sm); padding: 0 var(--space-1);
}
.lm-icon:hover { color: var(--text); }
.lm-move { display: flex; align-items: center; gap: var(--space-1); }
.lm-move-pos { width: 3.5rem; }
.lm-members {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: 0 var(--space-2) var(--space-2) calc(var(--space-5) + var(--space-2));
}
.lm-member { display: flex; align-items: center; padding: var(--space-0-5) var(--space-2); border-left: 2px solid var(--blue-strong); }