/* Follows the user's real Telegram client theme (light or dark), same as
   before - these tokens just centralize the --tg-theme-* fallback chain in
   one place instead of repeating it at every usage site. A proper
   in-app dark-mode override (independent Settings toggle) is deferred -
   dark needs more per-element tuning than just swapping these three
   tokens to look right, not worth doing half-finished right now. */
:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --text: var(--tg-theme-text-color, #111);
  --accent: var(--tg-theme-button-color, #2481cc);
  --accent-text: var(--tg-theme-button-text-color, #fff);
  /* Condensed sporty display face for names/headers, distinct code-style
     mono for numbers (prices/stats) - a deliberate scoreboard-ish pairing
     rather than leaning on the system UI font everywhere, which is what
     made the app read as generic. Both list the system stacks as fallback
     so nothing breaks if the Google Fonts request is ever blocked. */
  --font-display: "Oswald", -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
.hidden { display: none !important; }
/* Hard guarantee against a horizontal window scrollbar, site-wide: no
   single element (a long unbreakable string, a fixed-width row, whatever)
   should ever be able to widen the page itself. Individual components
   (e.g. .toolbar's flex-shrink rules) should still avoid relying on this as
   their primary fix - it's the backstop, not the plan - but if something
   new overflows anyway, it gets clipped here instead of adding a scrollbar. */
html, body { overflow-x: hidden; max-width: 100vw; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 5;
}
.home-btn {
  border: 1px solid #ccc;
  border-radius: 16px;
  background: none;
  color: inherit;
  padding: 6px 12px;
  font-size: 13px;
}
.tournament-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  flex: 1;
  text-align: center;
}
.budget { text-align: right; line-height: 1.2; }
.budget-remaining-value { display: block; font-family: var(--font-mono); font-size: 18px; font-weight: 700; }
.budget-label { font-size: 11px; color: #888; }

.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
}
.home-header h2 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
#settings-btn, #settings-back-btn {
  border: 1px solid #ccc;
  border-radius: 16px;
  background: none;
  color: inherit;
  padding: 6px 12px;
  font-size: 13px;
}
#settings-view, #privacy-view, #sportsru-view { padding: 0 16px 60px; max-width: 480px; margin: 0 auto; }
#settings-view h2, #privacy-view h2, #sportsru-view h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; margin: 4px 0 8px; }

.nickname-option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 0;
  font-size: 15px;
  border-bottom: 1px solid #eee;
}
.nickname-option input { width: auto; padding: 0; }
.nickname-option.disabled { color: #aaa; }

.tournament-card {
  margin: 0 12px 12px;
  padding: 14px;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tournament-card .t-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 4px; }
.tournament-card .t-status { font-size: 12px; color: #888; }
.tournament-card button {
  border: none;
  border-radius: 16px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-text);
}
.tournament-card button.secondary {
  background: none;
  border: 1px solid #ccc;
  color: inherit;
}

.toolbar {
  padding: 8px 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toolbar-spacer { flex: 1; min-width: 0; }
.view-btn {
  border: none;
  background: none;
  color: #888;
  font-size: 13px;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  flex-shrink: 0;
}
.view-btn.active {
  color: inherit;
  border-bottom-color: var(--accent);
  font-weight: 600;
}
/* Allowed to shrink/truncate under pressure - #autofill-btn/#save-btn never
   do (flex-shrink: 0 below), so this always loses the fight for space
   first and the Save button never gets pushed out of view. */
.transfers-remaining {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  cursor: help;
}
/* Icon-only cube button - "Автосборка" lives in the title tooltip, not as
   visible label text, so it doesn't compete with #save-btn for toolbar
   width on narrow screens (see the flex-shrink note above .transfers-remaining). */
#autofill-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: none;
  color: inherit;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
#save-btn {
  flex-shrink: 0;
  border: none;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-text);
}
#save-btn:disabled {
  background: #ccc;
  color: #888;
}

main { padding: 10px 12px 80px; }
.line {
  margin-bottom: 14px;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 8px;
}
.line-title { font-size: 12px; color: #888; margin-bottom: 6px; }
.slot {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 6px;
  border-bottom: 1px solid #f0f0f0;
}
.slot:last-child { border-bottom: none; }
.slot-position {
  font-size: 15px;
  font-weight: 700;
  color: inherit;
  width: 30px;
  flex-shrink: 0;
}
.slot-main { flex: 1; min-width: 0; }
.slot-player.empty { color: #aaa; font-style: italic; padding: 0 8px; font-size: 14px; cursor: pointer; }
.slot-price { font-size: 13px; font-weight: 600; margin-right: 8px; }
/* Corner badge, not an inline flex item - out of flow entirely now, so its
   presence/absence never shifts .slot-main's width (the earlier cause of
   the club/stats column misalignment between locked and unlocked rows). */
.slot-remove {
  position: absolute;
  /* Nudged down from the row's very top edge (was top:2px) - that sat
     right on the border between two stacked player rows and read as
     ambiguous about which row's "x" it was. */
  top: 8px;
  right: 2px;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(204, 51, 51, 0.12);
  color: #c33;
  font-size: 11px;
  line-height: 18px;
  padding: 0;
}

/* Shared player-card row layout, two grid ROWS:
     row 1: [stripe] [skills] [surname, left-aligned]   [stats] [   ]
     row 2: [stripe] [skills] [time + club, centered]   [stats] [price]
   stripe/skills/stats span both rows (grid-row: 1 / 3); price sits in row 2
   only, under where the (squad-slot-only) remove "x" button occupies the
   top-right corner via its own absolute positioning (see .slot-remove) -
   so visually: x up top, price down below, matching row 1/row 2.
   Used by both a filled squad slot (.slot-main) and a picker row (.player-row).

   Each row-element here is its OWN independent grid (there's no shared
   parent grid across the whole list), so every column after name MUST be a
   fixed pixel width, not auto - auto sizes to that one row's own content,
   which drifts row to row (e.g. "СКА" vs "ЦСКА", "19:30" vs "–") and breaks
   the visual column even though every row starts at the same x=0. Fixed
   widths make every row's column boundaries identical regardless of
   content, which is what actually produces a straight column.

   .mono (time+club/stats/price - see .p-*.mono below) keeps those columns
   as narrow as their content actually needs, which is what leaves the
   surname's 1fr column enough real width to not need ellipsis-truncating
   on a phone. */
.slot-main,
.player-row {
  display: grid;
  grid-template-columns: 8px 28px 1fr 56px 42px;
  grid-template-rows: auto auto;
  align-items: center;
  /* Without this, an empty row 2 (no match today - see matchMetaHtml)
     leaves the grid's two "auto" row tracks summing to less than
     min-height, and the default align-content ("normal", which stretches
     auto tracks) spreads that leftover space into both tracks - row 1
     grows and the surname drifts down out of place. Pinning content to
     the top keeps row 1 exactly where it is regardless of row 2. */
  align-content: start;
  gap: 2px 8px;
  min-height: 46px;
  cursor: pointer;
}
.slot-main.no-skills,
.player-row.no-skills {
  grid-template-columns: 8px 1fr 56px 42px;
}
.mono {
  font-family: var(--font-mono);
  /* JetBrains Mono's slashed-zero alternate (the CSS "slashed-zero"
     keyword) reads worse than its plain default zero at this size - the
     slash gets mistaken for a stray mark. Plain tabular-nums is enough:
     JetBrains Mono's own 0/8 are already distinct (narrow oval vs
     waisted), no forced glyph swap needed. */
  font-variant-numeric: tabular-nums;
}
/* Three solid bands - edge/middle/edge (see club_colors.stripe_colors_for_
   official_abbr) - deliberately plain elements with their own
   background-color each, not a CSS gradient function, so there's no room
   for any of it to read as a blend. The two edge bands repeat the same
   primary color; only the middle band is the secondary color. */
.p-stripe {
  grid-row: 1 / 3;
  align-self: stretch;
  width: 8px;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.p-stripe-edge,
.p-stripe-middle {
  flex: 1 1 33.333%;
}
.p-skills {
  grid-row: 1 / 3;
  font-size: 10px;
  color: #888;
  line-height: 1.3;
}
.p-name {
  grid-row: 1;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 18px;
  line-height: 1.3;
}
.p-meta {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  line-height: 1.3;
}
.p-time-value { font-size: 14px; }
.p-time-value.soon { color: #a86400; }
.p-time-value.locked { color: #c33; }
.p-time-value.upcoming { color: #888; }
/* Desktop Telegram already reads comfortably at the base sizes above -
   this only targets actual touchscreens (phones/tablets), not a resized
   desktop window, so it can't misfire based on viewport width alone. */
@media (hover: none) and (pointer: coarse) {
  .p-name { font-size: 21px; }
  .p-time-value { font-size: 16px; }
}
.p-stats {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  text-align: right;
  line-height: 1.3;
  cursor: pointer;
}
.p-stat { font-variant-numeric: tabular-nums; }
.p-stat-dash { font-size: 12px; color: #aaa; }
.p-price { grid-row: 2; font-weight: 700; font-size: 18px; line-height: 1.3; text-align: right; }
/* Own-squad view (.slot-main, as opposed to the picker's .player-row) is
   where the price actually matters most - it's what you're comparing
   against the budget bar above - so it gets the biggest size of anywhere
   the price appears. */
.slot-main .p-price { font-size: 22px; }
.picker-empty { padding: 24px 12px; text-align: center; color: #888; font-size: 14px; }

.slot.locked { opacity: 0.75; }
.player-row.locked { opacity: 0.5; pointer-events: none; }

#picker {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  z-index: 10;
}
#picker.hidden { display: none; }
.picker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
}
.picker-header input {
  flex: 1;
  padding: 8px;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
#picker-close {
  flex-shrink: 0;
  border: none;
  background: none;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 4px;
}
.picker-budget {
  padding: 0 10px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #1a9e4a;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
/* Deliberate gap from the search row above (was flush against it, which
   read as the filters visually "sticking" to the search box). */
.picker-filters {
  display: flex;
  gap: 6px;
  padding: 8px 10px 10px;
  flex-wrap: wrap;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #ddd;
}
.picker-filters select {
  padding: 6px;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
}
.price-range {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 16px 10px;
  border-bottom: 1px solid #ddd;
}
.price-range-label {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.price-range-track {
  position: relative;
  width: 100%;
  height: 24px;
}
.price-range-track-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: #ddd;
  border-radius: 2px;
}
/* Two overlapping range inputs sharing one track is the usual no-library
   way to fake a dual-thumb slider - the container/inputs are transparent
   and only the thumb itself is interactive (pointer-events), so a click
   anywhere on the track's empty space doesn't accidentally drag whichever
   input happens to be on top. */
.price-range-track input[type="range"] {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.price-range-track input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
}
.price-range-track input[type="range"]::-moz-range-track {
  background: transparent;
}
.price-range-track input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
}
.price-range-track input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  cursor: pointer;
}
#picker-list { flex: 1; overflow-y: auto; }
.player-row { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; }
/* Picker rows have no remove ("x") button competing for the top-right
   corner (that's squad-only, see .slot-remove) - give price the full row
   height and a bigger size instead of confining it to the bottom half. */
.player-row .p-price { grid-row: 1 / 3; font-size: 20px; }

#onboarding {
  padding: 20px 16px 60px;
  max-width: 480px;
  margin: 0 auto;
}
#onboarding.hidden { display: none; }
#onboarding h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 16px; }
#onboarding label,
#settings-view label,
#privacy-view label,
#sportsru-view label {
  display: block;
  font-size: 13px;
  color: #666;
  margin: 14px 0 4px;
}
#onboarding input,
#onboarding select,
#settings-view input,
#settings-view select,
#privacy-view input,
#privacy-view select,
#sportsru-view input,
#sportsru-view select {
  width: 100%;
  padding: 9px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
#onboarding hr,
#settings-view hr,
#privacy-view hr,
#sportsru-view hr { margin: 18px 0; border: none; border-top: 1px solid #eee; }
.ob-hint { font-size: 13px; color: #888; line-height: 1.5; }
.ob-hint a { color: var(--accent); }
#ob-submit,
#st-submit {
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-text);
}

.verified-badge {
  color: #1a9e4a;
  font-weight: 700;
}
.pending-badge {
  color: #999;
  font-size: 11px;
}
.readonly-value {
  margin: 2px 0 0;
  padding: 9px 0;
  font-size: 15px;
}

#join-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
  z-index: 15;
}
#join-modal.hidden { display: none; }
.join-modal-content {
  background: var(--bg);
  width: 100%;
  padding: 20px 16px 24px;
  border-radius: 16px 16px 0 0;
}
.join-modal-content h3 { font-family: var(--font-display); margin: 0 0 10px; font-size: 19px; font-weight: 600; letter-spacing: 0.01em; }
.join-modal-content label {
  display: block;
  font-size: 13px;
  color: #666;
  margin: 12px 0 4px;
}
.join-modal-content input,
.join-modal-content select {
  width: 100%;
  padding: 9px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
#jm-join-btn {
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-text);
}
.secondary-btn {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 14px;
  background: none;
  color: inherit;
}

#leaderboard-view { padding: 10px 12px 80px; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid #f0f0f0;
}
.lb-row.me { background: rgba(36, 129, 204, 0.08); border-radius: 8px; }
.lb-rank { width: 24px; font-weight: 700; color: #888; }
.lb-name { flex: 1; font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: 0.01em; }
.lb-points { font-weight: 700; }
.lb-slots { font-size: 11px; color: #888; }

/* top (not bottom) and a high z-index - a bottom-fixed banner was getting
   hidden behind Telegram mobile's own bottom chrome/main-button area on at
   least one real device, so pin it to the top where nothing else can cover it. */
#error-banner {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  background: #c33;
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 30;
}
#error-banner.hidden { display: none; }

/* Small popup anchored under whatever stat was tapped (app.js's
   showStatPopup) - sized to its content and positioned near the tap,
   deliberately not a full-width top banner like #error-banner (that one's
   meant to be impossible to miss, which is wrong for a casual explanation -
   it ended up covering the toolbar's own buttons). */
#stat-popup {
  position: fixed;
  max-width: 220px;
  background: var(--accent);
  color: var(--accent-text);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-line;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  z-index: 30;
}
#stat-popup.hidden { display: none; }