/* ============================================================
   Design tokens — "A LOW BLOW" light kit (v3)
   Values pulled directly from the Claude Design export
   (Mini App v3.dc.html / TabBarLight.dc.html).
   Fixed brand palette (not driven by Telegram's theme colors),
   so the app looks the same and on-brand for every user.
   ============================================================ */
:root {
  --bg: #EFECE3;
  --bg-dark: #15141A;
  --card-bg: #FBFAF7;
  --tile-bg: #EFECE3;
  --tabs-bg: #E3DFD5;

  --border-soft: rgba(21, 20, 26, 0.09);
  --border-softer: rgba(21, 20, 26, 0.08);
  --border-dashed: rgba(10, 114, 216, 0.45);

  --text: #15141A;
  --text-on-dark: #FBFAF7;
  --hint: #57545F;
  --hint-on-dark: rgba(251, 250, 247, 0.55);
  --placeholder: #8E8B95;

  --accent: #0A72D8;
  --accent-tint: #8FD6FF;
  --accent-gradient: linear-gradient(100deg, #8FD6FF, #1E9BFF 55%, #0B63D6);
  --on-accent: #FBFAF7;
  --on-accent-tint: #08131F;

  --link: var(--accent);
  --button: var(--accent);
  --button-text: var(--on-accent);
  --secondary-bg: var(--card-bg);

  --danger: #C23B3B;
  --danger-tint: #FBEAE9;
  --danger-border: rgba(194, 59, 59, 0.3);

  --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Oswald', 'Onest', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-card: 24px;
  --r-card-lg: 26px;
  --r-tile: 14px;
  --r-field: 14px;
  --r-btn: 24px;
  --r-sm: 13px;
  --r-pill: 999px;

  /* legacy aliases still referenced in a few places */
  --r-lg: var(--r-card);
  --r-md: var(--r-field);

  /* Fallback until telegram.js measures the real Telegram viewport (see
     applyViewportHeight in js/telegram.js) — keeps things sane outside
     Telegram too, e.g. while developing in a plain desktop browser. */
  --tg-viewport-height: 100vh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Outside the centered app column (see #app below) this shows as plain
     background on wide screens — e.g. Telegram Desktop — instead of the
     app content stretching edge-to-edge. */
  background: var(--bg-dark);
  color: var(--text);
  font-family: var(--font-sans);
  overflow: hidden; /* only #view scrolls — keeps .bottom-nav correctly pinned */
}

#app {
  display: flex;
  flex-direction: column;
  height: var(--tg-viewport-height);
  /* Cap the app at a phone-sized column and center it. Without this, on a
     wide window (Telegram Desktop, a tablet, a browser window) the bottom
     nav's buttons (flex: 1 1 0) stretch out to fill the full width, which
     looks uneven/oversized — keeping a fixed max-width makes the layout
     identical (and evenly spaced) on every device. */
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  background: var(--bg);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 48px;
  background: var(--bg-dark);
  padding: 0 18px;
  padding-top: env(safe-area-inset-top, 0px);
}
.topbar h1 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}

.view {
  flex: 1;
  padding: 14px 14px 18px;
  overflow-y: auto;
  min-height: 0; /* let flex:1 actually shrink to fit within #app instead of overflowing it */
}

/* Deliberately NOT position:fixed. A fixed element anchors to the WebView's
   own layout viewport, which on Telegram's mobile clients is taller than
   the area actually visible on screen (the rest is hidden behind the
   system home-indicator / gesture area) — that mismatch is exactly what
   was clipping this bar on phones while looking fine on Telegram Desktop.
   Keeping it as a normal last flex child of #app (whose height is capped
   to the real visible height via --tg-viewport-height, see js/telegram.js)
   guarantees it always renders inside the visible area instead. */
.bottom-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  /* The safe-area inset (the reserved space below the home-indicator bar on
     iPhone) is added ON TOP of the base content height instead of eating
     into it — otherwise on devices with a tall safe area there isn't
     enough room left for the icon + label, and the icon gets clipped
     against the .view above it. */
  height: calc(78px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-dark);
  padding: 10px 8px calc(14px + env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bottom-nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--accent-gradient);
  pointer-events: none;
}
.bottom-nav::-webkit-scrollbar { display: none; }
.nav-btn {
  flex: 1 1 0;
  min-width: 0;
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(251, 250, 247, 0.42);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, transform 0.12s ease;
}
/* Press animation — a quick, snappy scale-down while the button is held,
   springing back on release. */
.nav-btn:active {
  transform: scale(0.9);
}
.nav-btn.active { color: var(--text-on-dark); }
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 32px;
  border-radius: 12px;
  background: transparent;
  transition: background 0.15s ease;
}
.nav-btn.active .nav-icon { background: var(--accent-gradient); }
.nav-icon svg { width: 22px; height: 22px; }
.nav-btn span:last-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: -3px;
}

.card {
  background: var(--card-bg);
  border-radius: var(--r-card);
  padding: 18px;
  margin-bottom: 12px;
}
.card h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}
.card .meta { color: var(--hint); font-size: 13px; margin: 4px 0; display: flex; align-items: center; gap: 6px; }
.card p { color: var(--text); font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; }
.champion-line { color: var(--text) !important; font-weight: 700; }

.card h4 {
  margin: 14px 0 8px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--hint);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
}

/* Page banner — big uppercase display header used at the top of
   Турниры / Рейтинг / Новости / Результаты / Трансляции / Создать */
.page-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--card-bg);
  padding: 16px 16px 18px;
  margin-bottom: 14px;
}
.page-banner-corner {
  position: absolute;
  right: -46px;
  top: -56px;
  width: 190px;
  height: 190px;
  background: var(--accent-gradient);
  clip-path: polygon(34% 0, 100% 0, 100% 66%);
  pointer-events: none;
}
.page-banner-dots {
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 64px;
  background: repeating-linear-gradient(to right, transparent 0 21px, rgba(21, 20, 26, 0.07) 21px 22px);
  pointer-events: none;
}
.page-banner-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.page-banner-titles { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.page-banner-kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}
.page-banner-title {
  font-family: var(--font-sans);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--text);
}
.page-banner-side {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--hint);
  flex: none;
  text-transform: uppercase;
}
.page-banner-action {
  display: flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px;
  background: var(--bg-dark); border-radius: 18px; flex: none;
  border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: var(--text-on-dark);
}

/* Promo bar at the bottom of list pages (Турниры / Рейтинг) */
.promo-bar {
  display: flex; align-items: center; gap: 12px;
  height: 52px; border-radius: 26px; padding: 0 20px;
  margin-top: 10px; flex: none;
  background: var(--bg-dark);
}
.promo-bar.accent { background: var(--accent-gradient); }
.promo-bar-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--text-on-dark); flex: none; opacity: 0.9; }
.promo-bar span {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: var(--text-on-dark);
}

/* 2x2 / 3-col stat-tile grid used on tournament cards + the detail-page hero */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 14px;
}
.stats-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--tile-bg);
  border-radius: var(--r-tile);
  padding: 10px 12px;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: var(--hint);
  text-transform: uppercase;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}
.tournament-hero .stat-tile { background: rgba(251, 250, 247, 0.07); }
.tournament-hero .stat-label { color: var(--hint-on-dark); }
.tournament-hero .stat-value { color: var(--text-on-dark); }

/* Главная / operator homepage */
.hero-card { position: relative; overflow: hidden; padding: 34px 22px 22px; text-align: center; border-radius: var(--r-card-lg); }
.hero-decor {
  position: absolute;
  right: -70px;
  top: -70px;
  width: 260px;
  height: 260px;
  background: var(--accent-gradient);
  clip-path: polygon(34% 0, 100% 0, 100% 66%);
  pointer-events: none;
}
.hero-top { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hero-logo, .hero-logo-fallback { width: 88px; height: 88px; border-radius: var(--r-tile); object-fit: cover; display: block; }
.hero-logo-fallback { display: flex; align-items: center; justify-content: center; background: var(--tile-bg); color: var(--accent); }
.hero-logo-fallback .icon { width: 34px; height: 34px; }
.hero-titles { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-title { font-size: 32px; font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; text-transform: uppercase; color: var(--text); }
.hero-subtitle { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: var(--accent); }
.hero-desc { position: relative; margin: 20px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--hint); text-align: center; }
.hero-actions { position: relative; margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.hero-handle { text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--hint); }

.social-row { position: relative; display: flex; gap: 8px; margin-top: 22px; }
.social-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  height: 66px;
  background: var(--tile-bg);
  border-radius: var(--r-tile);
  color: var(--text);
  text-decoration: none;
}
.social-tile .icon { width: 19px; height: 19px; }
.social-tile span { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent-gradient);
}
.badge.closed { background: var(--bg-dark); color: var(--text-on-dark); }
.badge.in_progress { background: var(--accent-gradient); color: var(--on-accent); }
.badge.completed { background: var(--bg-dark); color: var(--text-on-dark); }
.badge.cancelled { background: var(--danger-tint); color: var(--danger); }
.tournament-hero .badge.registration { background: var(--accent-tint); color: var(--on-accent-tint); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--r-btn);
  background: var(--accent-gradient);
  color: var(--button-text);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  padding: 17px 16px;
  width: 100%;
  cursor: pointer;
  margin-top: 10px;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: scale(0.98); opacity: 0.9; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.secondary { background: var(--card-bg); color: var(--text); font-weight: 800; box-shadow: inset 0 0 0 1px var(--border-soft); }
.btn.danger { background: var(--danger-tint); color: var(--danger); }
.btn.small { width: auto; padding: 10px 14px; font-size: 12px; margin-top: 0; border-radius: var(--r-sm); }
.btn.dashed {
  background: transparent;
  color: var(--accent);
  border: 1px dashed var(--border-dashed);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  height: 42px;
  padding: 0 14px;
}

/* Small pill button — "+ НОВАЯ" on the Новости/Результаты/Трансляции banners */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  background: var(--bg-dark);
  border: none;
  border-radius: var(--r-pill);
  color: var(--text-on-dark);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  margin-bottom: 14px;
}
.pill-btn .icon { width: 13px; height: 13px; }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hint);
  margin-bottom: 7px;
  font-weight: 700;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-field);
  border: none;
  background: var(--tile-bg);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 600;
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); font-weight: 400; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1.5px var(--accent);
}
.field textarea { resize: vertical; min-height: 86px; }

.empty-state { text-align: center; color: var(--hint); padding: 44px 20px; font-size: 14px; }
.loading { text-align: center; color: var(--hint); padding: 44px 20px; font-size: 14px; }
.error-banner {
  background: var(--danger-tint);
  color: var(--danger);
  border: 1px solid var(--danger-border);
  padding: 11px 13px;
  border-radius: var(--r-field);
  font-size: 13px;
  margin-bottom: 12px;
}

/* Leaderboard */
.lb-columns {
  display: flex; align-items: center; padding: 0 10px 8px; flex: none;
}
.lb-columns span {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.16em; color: var(--hint); text-transform: uppercase;
}
.lb-columns .col-rank { flex: 1; }
.lb-columns .col-mp { width: 34px; text-align: right; }
.lb-columns .col-rating { width: 54px; text-align: center; }

.lb-row {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border-radius: 19px;
  padding: 9px 10px;
  margin-bottom: 8px;
}
.lb-row:last-child { margin-bottom: 0; }
.lb-row.top1 { background: var(--bg-dark); padding: 11px 10px; }
.lb-row.top1 .lb-row-corner {
  position: absolute; right: -30px; top: -40px; width: 130px; height: 130px;
  background: var(--accent-gradient); clip-path: polygon(34% 0, 100% 0, 100% 66%); pointer-events: none;
}
.lb-rank {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 32px; border-radius: 11px; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 13px; font-weight: 800;
  background: var(--bg-dark); color: var(--text-on-dark);
}
.lb-row.top1 .lb-rank { height: 34px; background: var(--accent-tint); color: var(--on-accent-tint); font-size: 14px; }
.lb-row.top2 .lb-rank, .lb-row.top3 .lb-rank { background: var(--accent-gradient); color: var(--on-accent); }
.lb-name { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.lb-nickname { font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; color: var(--text); }
.lb-row.top1 .lb-nickname { font-size: 16px; letter-spacing: -0.02em; color: var(--text-on-dark); }
.lb-team-name {
  color: var(--hint);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lb-row.top1 .lb-team-name { color: var(--hint-on-dark); }
.lb-avatar { position: relative; width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--tile-bg); }
.lb-avatar.squarish { object-fit: contain; }
.lb-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--tile-bg); color: var(--accent); font-weight: 700; font-size: 13px;
}
.lb-matches { position: relative; font-family: var(--font-mono); color: var(--hint); font-size: 12px; width: 34px; text-align: right; flex: none; }
.lb-row.top1 .lb-matches { color: var(--hint-on-dark); }
.lb-rating {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 32px; border-radius: 11px; flex: none;
  font-family: var(--font-mono); font-size: 13px; font-weight: 800;
  background: var(--bg-dark); color: var(--text-on-dark);
}
.lb-row.top1 .lb-rating { height: 34px; background: var(--card-bg); color: var(--text); font-size: 13px; }
.lb-row.top2 .lb-rating, .lb-row.top3 .lb-rating { background: var(--accent-gradient); color: var(--on-accent); }
.lb-delete-btn {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: none; border-radius: 8px;
  background: var(--danger-tint); color: var(--danger); cursor: pointer;
}
.lb-delete-btn .icon { width: 13px; height: 13px; vertical-align: 0; }

/* Tournament card / detail: icon thumbnail + brief info */
.tournament-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-id { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--text); }
.tournament-card-head { display: flex; align-items: center; gap: 13px; }
.tournament-card-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tournament-card-head-text h3 {
  margin: 0; font-family: var(--font-sans); font-size: 19px; font-weight: 900;
  letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; color: var(--text);
}
.game-label { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; }
.tournament-icon, .tournament-icon-fallback { width: 54px; height: 54px; border-radius: 15px; object-fit: cover; flex-shrink: 0; }
.tournament-icon-fallback { display: flex; align-items: center; justify-content: center; background: var(--tile-bg); color: var(--accent); }
.tournament-icon-fallback .icon { width: 22px; height: 22px; }

/* Winner strip on a completed tournament's card */
.winner-strip {
  display: flex; align-items: center; gap: 10px;
  background: var(--tile-bg); border-radius: 14px; padding: 10px 12px; margin-top: 14px;
}
.winner-strip .tournament-icon-fallback, .winner-strip img { width: 30px; height: 30px; border-radius: 8px; }
.winner-strip-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.winner-strip-text .label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; color: var(--hint); text-transform: uppercase; }
.winner-strip-text .name { font-family: var(--font-sans); font-size: 14px; font-weight: 800; text-transform: uppercase; color: var(--text); }
.winner-strip-prize { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent); flex: none; }

/* Detail-page hero variant of the card above */
.tournament-hero { position: relative; overflow: hidden; border-radius: var(--r-card-lg); padding: 18px 18px 20px; background: var(--bg-dark); }
.tournament-hero .page-banner-corner { right: -60px; top: -60px; width: 230px; height: 230px; }
.tournament-hero .tournament-card-top { position: relative; }
.tournament-hero .tournament-card-head { position: relative; }
.tournament-hero .tournament-card-head-text h3 { font-size: 27px; letter-spacing: -0.045em; line-height: 0.9; color: var(--text-on-dark); }
.tournament-hero .game-label { color: var(--accent-tint); }
.tournament-hero .card-id { color: var(--text-on-dark); }
.tournament-hero .tournament-icon, .tournament-hero .tournament-icon-fallback { width: 66px; height: 66px; border-radius: 18px; }
.tournament-hero .tournament-icon-fallback { background: rgba(251, 250, 247, 0.1); color: var(--text-on-dark); }
.prize-highlight {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--accent-gradient); border-radius: 18px; padding: 14px 16px; margin-top: 16px;
}
.prize-highlight span:first-child { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.85); text-transform: uppercase; }
.prize-highlight span:last-child { font-family: var(--font-sans); font-size: 24px; font-weight: 900; letter-spacing: -0.03em; color: var(--text-on-dark); }

/* Help Center / Report player mini icon buttons */
.icon-btn-row { display: flex; align-items: stretch; gap: 10px; margin: 10px 0 14px; }
.icon-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 46px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--card-bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  padding: 8px 10px;
  cursor: pointer;
}

/* Приглашённые команды: полуфинал / финал lists */
.invited-team-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.invited-team-row { display: flex; align-items: center; gap: 11px; background: var(--tile-bg); border-radius: var(--r-tile); padding: 8px 12px; }
.invited-team-row span { font-family: var(--font-sans); font-size: 14px; font-weight: 800; text-transform: uppercase; color: var(--text); }
.invited-team-logo { width: 30px; height: 30px; border-radius: 8px; object-fit: contain; flex-shrink: 0; background: var(--card-bg); }
.invited-team-logo-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--card-bg); color: var(--accent); font-weight: 700; font-size: 13px;
}

/* Rules accordion-style boxes */
.rules-item { display: flex; flex-direction: column; gap: 9px; background: var(--tile-bg); border-radius: 16px; padding: 14px; margin-bottom: 10px; }
.rules-item:last-child { margin-bottom: 0; }
.rules-item-head { display: flex; align-items: center; justify-content: space-between; }
.rules-item-head span { font-family: var(--font-sans); font-size: 14px; font-weight: 800; text-transform: uppercase; color: var(--text); }
.rules-item-chevron { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.rules-item p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--hint); white-space: pre-wrap; }

/* Prize distribution list */
.prize-list { display: flex; flex-direction: column; gap: 8px; }
.prize-row { display: flex; align-items: center; gap: 12px; background: var(--tile-bg); border-radius: 15px; padding: 9px 12px; }
.prize-rank {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 30px; border-radius: 10px; flex: none;
  font-family: var(--font-mono); font-size: 12px; font-weight: 800; color: var(--on-accent);
  background: var(--accent-gradient);
}
.prize-rank.other { background: var(--bg-dark); font-size: 11px; }
.prize-row .prize-place-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--hint); text-transform: uppercase; }
.prize-row .prize-amount { margin-left: auto; font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text); }

/* Create-form repeatable "invited team" / "partner" row inputs */
.invited-team-input-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.invited-team-input-row input { flex: 1; padding: 10px 12px; border-radius: var(--r-sm); border: none; background: var(--tile-bg); color: var(--text); font-size: 13px; font-family: var(--font-sans); }

/* File/gallery image picker — replaces "paste an image URL" text fields.
   The visible control is just a clickable preview thumbnail; the actual
   value lives in a same-id/class hidden input holding a base64 data: URL,
   so existing "read .value" code elsewhere needs no changes. */
.image-picker { display: flex; align-items: center; gap: 12px; }
.image-picker-preview {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--r-tile); flex: none;
  background: var(--tile-bg); color: var(--hint); overflow: hidden; cursor: pointer;
}
.image-picker-preview-inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.image-picker-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-picker-preview .icon { width: 22px; height: 22px; }
.image-picker-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; min-width: 0; }
.image-picker-hint { font-size: 11.5px; color: var(--hint); }
.image-picker-clear {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; background: none; padding: 0;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--danger); text-transform: uppercase; cursor: pointer;
}
.image-picker-clear[hidden] { display: none; }
.image-picker-clear .icon { width: 11px; height: 11px; }
.image-picker.compact { flex: none; gap: 0; }
.image-picker.compact .image-picker-preview { width: 42px; height: 42px; border-radius: var(--r-sm); }

/* Новости / Результаты / Прямые трансляции — social-post-style cards */
.post-card { position: relative; padding: 0; overflow: hidden; }
.post-title {
  font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 16px 16px 0; color: var(--accent);
}
.post-image { width: 100%; display: block; max-height: 320px; object-fit: cover; background: var(--tile-bg); }
.post-title + .post-image { margin-top: 12px; }
.post-caption { padding: 15px 16px 0; font-size: 13.5px; line-height: 1.55; color: var(--text); white-space: pre-wrap; }
.post-date { padding: 11px 16px 16px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--hint); }
.post-card .btn.small { margin: 4px 16px 16px; width: calc(100% - 32px); height: 48px; border-radius: var(--r-tile); font-size: 14px; }
.post-delete-btn {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--r-sm); background: rgba(21, 20, 26, 0.75); color: var(--text-on-dark);
  width: 32px; height: 32px; cursor: pointer;
}
.post-delete-btn .icon { vertical-align: 0; }
.post-live-badge {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-dark); border-radius: var(--r-pill); padding: 6px 11px;
}
.post-live-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #1E9BFF; }
.post-live-badge span { font-family: var(--font-mono); font-size: 9px; font-weight: 800; letter-spacing: 0.16em; color: var(--text-on-dark); }

/* Bracket */
.bracket-scroll { overflow-x: auto; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
.bracket {
  display: flex;
  gap: 28px;
  min-width: max-content;
  padding: 4px 2px;
}
.bracket-round { display: flex; flex-direction: column; justify-content: space-around; gap: 16px; min-width: 190px; }
.round-title { text-align: center; font-size: 12px; color: var(--hint); font-weight: 600; margin-bottom: 4px; text-transform: uppercase; }
.match-card {
  background: var(--tile-bg);
  border-radius: var(--r-sm);
  overflow: hidden;
  font-size: 13px;
}
.match-slot {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
}
.match-slot:last-child { border-bottom: none; }
.match-slot.winner { font-weight: 700; background: var(--accent-tint); }
.match-slot .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.match-slot .score { font-family: var(--font-mono); color: var(--hint); font-weight: 600; }
.match-status { text-align: center; font-size: 10px; color: var(--hint); padding: 2px 0 4px; }

.participant-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.participant-row:last-child { border-bottom: none; }

.tabs { display: flex; gap: 4px; margin-bottom: 14px; background: var(--tabs-bg); padding: 4px; border-radius: 18px; }
.tab-btn {
  flex: 1; height: 40px; padding: 0; border-radius: 14px; border: none;
  background: transparent; color: var(--hint); font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab-btn.active { background: var(--accent-gradient); color: var(--on-accent); font-weight: 800; }

.result-modal-backdrop {
  position: fixed; inset: 0; background: rgba(21, 20, 26, 0.55); display: flex; align-items: flex-end; z-index: 50;
}
.result-modal {
  background: var(--bg); border-bottom: none;
  width: 100%; border-radius: 24px 24px 0 0; padding: 22px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 85vh; overflow-y: auto;
}
.result-modal h3 { margin-top: 0; }

/* Quick links / access-denied notices */
.access-denied { text-align: center; color: var(--hint); padding: 44px 20px; font-size: 14px; }