:root {
  /* Blue Eye: white surfaces on a very pale sky-blue page, soft blue borders and a navy text colour.
     --accent is the solid fill (buttons, active tabs, white text on top), --accent-text the same hue
     darkened for links/labels on white, --accent-deep the pressed/hover fill. */
  --bg: #f2f8ff;
  --panel: #ffffff;
  --border: #c3d9f3;
  --text: #0f2544;
  --muted: #5b7290;
  --accent: #2a7de1;
  --accent-text: #1a5fb8;
  --accent-deep: #164a94;
  --accent-tint: #e6f1ff;
  --accent-green: #0d9aa8;
  --accent-green-tint: #dff5f7;
  --accent-sky: #3fb5f0;
  --scroll-thumb: #a9c6ec;
  --scroll-thumb-hover: #8db3e3;
  --glow-1: rgba(63, 181, 240, 0.22);
  --glow-2: rgba(42, 125, 225, 0.14);
  --font-mono: "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

/* Only when the system itself is set to dark: the same blue, on navy. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1b30;
    --panel: #132540;
    --border: #2a4a75;
    --text: #e4efff;
    --muted: #93aed1;
    --accent: #2a7de1;
    --accent-text: #8ec3ff;
    --accent-deep: #1a5fb8;
    --accent-tint: #173056;
    --accent-green: #3ec5d3;
    --accent-green-tint: #12333f;
    --accent-sky: #58c4f7;
    --scroll-thumb: #35598a;
    --scroll-thumb-hover: #4a75ad;
    --glow-1: rgba(63, 181, 240, 0.16);
    --glow-2: rgba(42, 125, 225, 0.14);
    color-scheme: dark;
  }
}

/* A thin, soft-blue scrollbar; Firefox uses the two-value shorthand,
   WebKit/Chromium needs the pseudo-elements since it ignores that shorthand. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--bg);
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--bg);
}

*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 6px;
  border: 3px solid var(--bg);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}
* {
  box-sizing: border-box;
  /* Belt-and-braces against horizontal scroll: a long unbroken token (a real
     player/team name, an account_id, a URL in an error message) can force a
     box wider than its grid track even when the track itself can shrink. */
  overflow-wrap: anywhere;
}

html {
  overflow-x: hidden;
  /* Fallback so any residual sub-pixel gap below body's box shows this
     instead of the browser's stark default white -- body's own
     min-height below is what actually keeps the gradient reaching the
     bottom of the screen (relying on the browser's html/body background
     -propagation spec behavior to do that instead turned out unreliable
     combined with the non-standard "zoom" property below -- the canvas
     paint didn't extend the way the spec describes, leaving the exact
     gap this was meant to prevent whenever body was shorter than the
     viewport). */
  background: var(--bg);
}

body {
  overflow-x: hidden;
  margin: 0;
  padding: 16px 16px 24px;
  /* The user found the page noticeably more comfortable at the browser's own
     110% zoom step (bigger text, more breathing room) than at 100% -- rather
     than re-guess every font-size/padding by hand, scale the whole page by
     the same factor so 100% already looks like that. The history list's
     JS-measured sizing (sizeHistoryList in app.js) reads real on-screen
     pixel positions, so it keeps fitting the viewport correctly at this
     scale with no separate adjustment needed. */
  zoom: 1.1;
  /* Guarantees the gradient below always reaches the bottom of the
     screen, at any content length/viewport size -- a 100vh box zoomed by
     1.1 would render 10% taller than the viewport (a guaranteed
     scrollbar regardless of content, which is exactly the bug this
     caused when it was tried unscoped before), so divide the zoom back
     out here to land on exactly 100vh rendered. */
  min-height: calc(100vh / 1.1);
  background:
    radial-gradient(circle at 8% 0%, var(--glow-1), transparent 45%),
    radial-gradient(circle at 95% 100%, var(--glow-2), transparent 45%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  min-width: 0;
}

header {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto 12px;
  padding-right: 56px;
}

h1 {
  margin: 0;
  font-size: 2.5rem;
  background: linear-gradient(90deg, var(--accent) 70%, var(--accent-sky) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  cursor: pointer;
}

@media (max-width: 480px) {
  h1 { font-size: 1.9rem; }
}

/* Desktop top nav: replaces the mobile hamburger+drawer with an always-
   visible header bar (title left, section links centered, profile/auth
   right) above a min-width breakpoint -- the drawer/hamburger stay exactly
   as they were below it, per "мобильная версия остаётся как есть". The
   actual rules are appended at the very end of this file, not here --
   #mobileHeader/.menuBtn have unconditional base rules defined later in
   the file, and same-specificity rules resolve by source order regardless
   of which is wrapped in a media query (a bug this file's already hit
   twice this session), so an override here would just lose. */
.topNav {
  display: none;
}

main {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  min-width: 0;
}

/* Mobile team switcher -- hidden on wider screens where both sides already
   sit next to each other; below the breakpoint it replaces stacking (which
   forced scrolling through both teams) with a tab toggle showing one side
   at a time, driven by the container's data-mobile-team attribute. */
.teamSwitcher {
  display: none;
}

@media (max-width: 700px) {
  .teams,
  .draftTeams {
    grid-template-columns: 1fr;
  }

  .teamSwitcher {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
  }

  .teamSwitcherBtn {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 0.85rem;
    /* the tab shows the typed team name, which can be long */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .teamSwitcherBtn--active {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
  }

  .teams[data-mobile-team="A"] > [data-team="B"],
  .draftTeams[data-mobile-team="A"] > [data-team="B"] {
    display: none;
  }

  .teams[data-mobile-team="B"] > [data-team="A"],
  .draftTeams[data-mobile-team="B"] > [data-team="A"] {
    display: none;
  }

  /* The switcher tab already says which side is showing -- repeating it as
     a heading inside the panel (Команда 1 / Мои герои) is redundant there. */
  .team h2,
  .draftTeam h3 {
    display: none;
  }
}

.team {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 6px;
  padding: 16px;
}

.team h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.slot {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 8px;
  min-width: 0;
}

@media (max-width: 480px) {
  /* Stacked single-column layout -- without a visible boundary per slot,
     "hero" for player 1 sits right above "player 2" with the same gap as
     everything else, reading as if it belonged to player 2. Box each slot
     so position+player+hero visually read as one unit. */
  .slot {
    grid-template-columns: 1fr;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 14px;
  }
}

.ac-wrap {
  position: relative;
  min-width: 0;
}

.slot input,
.position-select {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.98rem;
  width: 100%;
  min-width: 0;
  height: 40px;
}

.slot input::placeholder { color: var(--muted); }

input:focus,
select:focus,
button:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ac-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.ac-item {
  padding: 6px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.ac-item:last-child { border-bottom: none; }

.ac-item:hover,
.ac-item--active {
  background: var(--accent);
  color: #ffffff;
}

.ac-item:hover .ac-sub,
.ac-item--active .ac-sub {
  color: #dbeaff;
}

.ac-sub {
  color: var(--muted);
  font-size: 0.78rem;
}

.player-preview {
  min-height: 1.1em;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--accent-green);
  font-weight: 600;
}

button {
  background: var(--panel);
  color: var(--accent-text);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

button:hover:not(:disabled) {
  background: var(--accent);
  color: #ffffff;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

button[type="submit"] {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

button[type="submit"]:hover:not(:disabled) {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.analyzeBtnWrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}

/* Matches the outlined look used on the mistake-analysis/draft-assistant
   action buttons (#mistakeAnalyzeBtn/#draftSuggestBtn, both plain
   type="button" so they get the base outlined style below) instead of the
   solid always-filled look the browser default type="submit" rule gives
   this button -- an ID beats the type-attribute rule regardless of order. */
#analyzeBtn {
  padding: 12px 44px;
  font-size: 1.15rem;
  background: var(--panel);
  color: var(--accent-text);
  border: 1px solid var(--accent);
}

#analyzeBtn:hover:not(:disabled) {
  background: var(--accent);
  color: #ffffff;
}

.error {
  margin-top: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  color: var(--text);
  padding: 12px 14px;
  border-radius: 4px;
}

.hidden { display: none !important; }

.result {
  margin-top: 32px;
}

.resultTopBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.resultBackBtn {
  margin-bottom: 10px;
  background: transparent;
  border: none;
  color: var(--accent-text);
  font-weight: 600;
  padding: 4px 0;
}

.resultTopBar .resultBackBtn {
  margin-bottom: 0;
}

.resultBackBtn:hover:not(:disabled) {
  background: transparent;
  color: var(--accent);
  text-decoration: underline;
}

.editLineupBtn {
  background: var(--panel);
  border: 1px solid var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.editLineupBtn:hover:not(:disabled) {
  background: var(--accent);
  color: #ffffff;
}

.probBar {
  display: flex;
  height: 36px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.probBar__fillA,
.probBar__fillB {
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.probBar__fillA { border-right: 1px solid var(--border); }

.probLabels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Team 1 and Team 2 stack instead of sitting side by side: with 8 columns,
   splitting the page width in half left each table too cramped to show its
   own columns (forcing heavy horizontal scrolling and, combined with each
   independently-sized table, visibly mismatched layouts between the two).
   Stacked, each table gets the full page width instead of half of it. */
.breakdown {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.breakdownTeam {
  min-width: 0;
}

.breakdownTeamTitle {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.tableScroll {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.82rem;
}

table th, table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

table th {
  background: var(--accent-tint);
  color: var(--text);
  font-weight: 600;
}

/* The two breakdown tables (Team 1 / Team 2) are independent <table>
   elements, so browser auto-layout sized each one's columns from only its
   own content -- one team's longer note text could make its whole table
   render with very different (and much taller) rows than the other team's,
   even though they're meant to look like a matched pair. Fixed, identical
   percentage widths make both tables always line up the same way regardless
   of which team happens to have longer text in a given column. */
.breakdown table {
  table-layout: fixed;
}
.breakdown th:nth-child(1), .breakdown td:nth-child(1) { width: 8%; }
.breakdown th:nth-child(2), .breakdown td:nth-child(2) { width: 20%; }
.breakdown th:nth-child(3), .breakdown td:nth-child(3) { width: 9%; }
.breakdown th:nth-child(4), .breakdown td:nth-child(4) { width: 11%; }
.breakdown th:nth-child(5), .breakdown td:nth-child(5) { width: 13%; }
.breakdown th:nth-child(6), .breakdown td:nth-child(6) { width: 12%; }
.breakdown th:nth-child(7), .breakdown td:nth-child(7) { width: 9%; }
.breakdown th:nth-child(8), .breakdown td:nth-child(8) { width: 9%; }
.breakdown th:nth-child(9), .breakdown td:nth-child(9) { width: 9%; }

.keyPlayer {
  margin-top: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 0.9rem;
}

.keyPlayer b { font-weight: 700; }

.durationSpikes {
  margin-top: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-green);
  border-radius: 4px;
  padding: 12px 14px;
}

.durationSpikes:empty { display: none; }

.durationSpikes h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.durationHint {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--muted);
}

.durationTable {
  min-width: 0;
  font-size: 0.85rem;
}

.durationDelta--up { color: var(--accent-text); font-weight: 600; }
.durationDelta--down { color: #b45309; font-weight: 600; }
.durationDelta--flat { color: var(--muted); }

.drawerMenuBtn {
  width: 100%;
}

.howItWorksSection {
  margin-top: 8px;
  max-width: 760px;
}

.howItWorksSection h2 {
  margin: 0 0 16px;
  font-size: 1.6rem;
}

.howItWorksSection p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.howItWorksSection p:last-child { margin-bottom: 0; }

code {
  font-family: var(--font-mono);
}

.howItWorksSection code {
  background: var(--accent-tint);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Percentages/scores read as "editor numbers" -- a small, deliberate
   monospace touch on result cards, matching the same treatment as the
   win-probability bar, without switching body copy to monospace. */
.historyRow b,
.draftHeroCard b,
.draftBanNote,
#mistakeMatchIdInput {
  font-family: var(--font-mono);
}

/* ---- hamburger menu + side drawer ---- */
.menuBtn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  width: 42px;
  height: 42px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}

.menuBtn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--accent);
}

.drawerOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 37, 68, 0.35);
  z-index: 150;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(340px, 88vw);
  background: linear-gradient(165deg, var(--accent-deep), var(--accent));
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: -6px 0 20px rgba(20, 60, 120, 0.25);
  z-index: 200;
  padding: 56px 20px 20px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}

.drawer--open {
  transform: translateX(0);
}

/* Scales with the phone's own screen instead of the 340px desktop cap
   (a true 100vw takeover read as oversized/empty rather than a drawer --
   this stays proportional without a low px ceiling). */
@media (max-width: 480px) {
  .drawer {
    width: 92vw;
  }
}

.drawerClose {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.drawerClose:hover { background: transparent; color: var(--accent-tint); }

.authBar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
}

.authBar button { width: 100%; }

.authUserName {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  word-break: break-word;
}

.authForms {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.authModalOverlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: #0009; }
.authModal { position: relative; width: min(400px, 100%); max-height: 90vh; overflow-y: auto; padding: 25px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: 0 22px 70px #0008; }
.authModalClose { position: absolute; top: 9px; right: 12px; background: transparent; border: 0; color: var(--text); font-size: 26px; cursor: pointer; }
.authModeTabs { display: flex; gap: 8px; padding-right: 25px; }
.authModeTabs button { flex: 1; }
.authModeTabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.authModal .authForms { margin: 12px 0 0; }
.authModal .authForm { background: transparent; border-color: var(--border); }
.authModal .authForm h2 { color: var(--text); }
.captchaBox { display: grid; gap: 7px; }
.captchaBox img { max-width: 100%; border-radius: 5px; }
.authModalOpen { overflow: hidden; }
@media (min-width: 701px) { #drawer, #drawerOverlay, #menuBtn { display: none !important; } }

.authForm {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.authForm h2 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #ffffff;
}

.authForm form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.authForm input {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.9rem;
  background: var(--panel);
  color: var(--text);
}

.drawerBottomGroup {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* "Выйти" sits at the very bottom of the profile page, set apart from the
   account/Telegram settings above it by a dashed rule. */
.profileLogoutWrap {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: flex;
  justify-content: center;
}

.logoutBtn {
  padding: 8px 32px;
  color: #c0392b;
  border-color: #c0392b;
  background: transparent;
  font-weight: 600;
}

.logoutBtn:hover:not(:disabled) {
  background: #c0392b;
  border-color: #c0392b;
  color: #ffffff;
}

.statsSection {
  margin-top: 8px;
}

.statsSection h2 {
  margin: 0 0 8px;
  font-size: 1.3rem;
}

.statsSection h3 {
  margin: 12px 0 4px;
  font-size: 0.95rem;
}

.statsSection p {
  margin: 0 0 4px;
  font-size: 0.85rem;
}

.historyHint {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.76rem;
}

.statsModeToggle {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}

.statsModeBtn {
  flex: 1;
  padding: 6px 10px;
  font-size: 0.85rem;
}

.statsModeBtn--active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.statsModeBtn--active:hover:not(:disabled) {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

#historyList,
#tournamentList,
#liveList,
.fitBox {
  max-height: 50vh; /* fallback until JS measures the exact available space */
  overflow-y: auto;
  padding-right: 4px;
}

/* In-page links (e.g. the patch page's link to the pro-scene stats): the
   browser-default blue is hard to read on both themes. */
.statsSection a {
  color: var(--accent-text);
  font-weight: 600;
}

.statsSection a:hover {
  color: var(--accent);
}

/* "По турнирам": the tournaments are cards that sit centred on the page --
   one or two stay in the middle, more wrap into further centred lines. */
#tournamentList {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 0 10px;
}

#tournamentList .tournamentRow {
  flex: 0 1 min(340px, 100%);
  justify-content: center;
  gap: 3px;
  text-align: center;
}

#tournamentList > p {
  flex: 1 1 100%;
  text-align: center;
}
.liveToggleRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 6px;
}

.liveToggleLabel {
  margin: 0;
  font-size: 0.85rem;
}

.liveRoleHint {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

@media (max-width: 700px) {
  .liveRoleHint {
    font-size: 0.74rem;
  }
}

.liveMatchesHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 12px 0 4px;
}

.liveMatchesHead h3 {
  margin: 0;
}

.liveLeagueLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.liveLeagueLabel select {
  height: 28px;
  max-width: 240px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.8rem;
}

.liveTierBadge {
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--accent-green);
  border-radius: 9px;
  color: var(--accent-green);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  vertical-align: middle;
}

/* ---- team line-ups + tournament (prediction form, signed-in users) ---- */
.teamHead {
  display: flex;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 10px;
}

.teamHead h2 {
  margin: 0;
  flex: none;
}

/* For a signed-in user the heading is replaced by the team-name field. */
.teams--user .teamTitle {
  display: none;
}

.teamNameWrap {
  flex: 1 1 auto;
  min-width: 0;
}


.team-name-input,
.tournament-input {
  width: 100%;
  height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.88rem;
}

.team-name-input::placeholder,
.tournament-input::placeholder {
  color: var(--muted);
}

/* Reads like the heading it replaces ("Команда 1"), but is a field -- and the
   tournament field looks the same, with "Турнир" as its text. */
.teamHead .team-name-input,
.tournamentPicker .tournament-input {
  height: 38px;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 800;
}

/* One field for the tournament, centred over the two teams. */
.tournamentPicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto 12px;
}

.tournamentWrap {
  flex: 1 1 auto;
  min-width: 0;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 400;
  max-width: min(90vw, 460px);
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--accent-deep);
  color: #ffffff;
  font-size: 0.85rem;
  box-shadow: 0 6px 20px rgba(20, 60, 120, 0.22);
}

/* Narrower desktop windows: the team header (title + picker + save tick)
   shrinks to stay on one line, and short windows get tighter panels so the
   prediction page still fits without scrolling. */
@media (min-width: 701px) and (max-width: 1100px) {
  .teamHead {
    margin-bottom: 8px;
  }

  .teamHead .team-name-input,
  .tournamentPicker .tournament-input {
    height: 34px;
    font-size: 1.05rem;
  }
}

@media (min-width: 701px) and (max-height: 760px) {
  .team {
    padding: 10px 12px;
  }

  .slot {
    margin-bottom: 5px;
  }

  .slot input,
  .slot .position-select {
    height: 34px;
  }

  .tournamentPicker {
    margin-bottom: 8px;
  }
}

@media (max-width: 700px) {
  /* the live tab's controls are the tallest thing on a small phone */
  .liveRoleHint {
    line-height: 1.25;
  }

  #livePanel h3 {
    margin: 8px 0 3px;
  }

  .statsModeToggle {
    margin-bottom: 8px;
  }

  .liveToggleRow {
    margin-bottom: 4px;
  }

  .liveMatchesHead {
    margin-top: 4px;
  }

  .liveLeagueLabel select {
    height: 26px;
  }

  #livePanel h3 {
    margin-top: 6px;
  }

  .tier1Controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
  }

  .tier1Controls .draftControlLabel select {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

.tier1Pos {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border: 1px solid var(--accent);
  border-radius: 9px;
  color: var(--accent-text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  vertical-align: middle;
}

/* ---- saved / live mistake analyses ---- */
.historyRow.mistakeHead {
  cursor: default;
}

.mistakeSummary {
  margin: 8px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-green);
  border-radius: 4px;
  background: var(--accent-green-tint);
  font-size: 0.88rem;
  line-height: 1.45;
}

.mistakeActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.mistakeSavedNote {
  margin: 0 0 8px;
}

/* Only useful on a phone, where the form is tucked away while a result is
   on screen (see the mobile block below). */
.mistakeNewBtn {
  display: none;
}

@media (max-width: 700px) {
  /* One saved analysis open on a phone: the tab row and a long summary would
     leave no room for the analysis text itself. */
  #mistakeSection.mistakeSection--detail #mistakeModeToggle {
    display: none;
  }

  .mistakeSummary {
    max-height: 6.4em;
    overflow-y: auto;
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  .mistakeHead b {
    font-size: 0.8rem;
  }

  .mistakeSection--showingResult #mistakeForm {
    display: none;
  }

  .mistakeSection--showingResult .mistakeNewBtn {
    display: inline-block;
    margin-bottom: 6px;
  }
}

.historyRowTop b {
  flex: 1;
  min-width: 0;
}

.historySummary {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- tier-1 meta ---- */
.tier1Controls .draftControlLabel select {
  max-width: 280px;
}

.historyRow.tier1Row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.historyRow.tier1PlayerRow {
  cursor: default;
}

.historyRow.tier1PlayerRow:hover {
  background: var(--panel);
}

.historyRow.tier1Row--selected {
  border-left-color: var(--accent);
  background: var(--accent-tint);
}

.tier1Name {
  flex: 1;
  text-align: left;
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tier1Sub {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.76rem;
}

.tier1Num {
  flex: none;
  min-width: 96px;
  text-align: right;
  color: var(--muted);
  font-size: 0.78rem;
  font-family: var(--font-mono);
}

.tier1Bar {
  flex: none;
  width: 90px;
  height: 6px;
  border-radius: 3px;
  background: #dbe8f8;
  overflow: hidden;
}

.tier1Bar i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.tier1Bar.tier1Wr--good i {
  background: var(--accent-green);
}

.tier1Bar.tier1Wr--bad i {
  background: #c0392b;
}

.tier1Bar.tier1Wr--low i {
  background: var(--muted);
}

.tier1Wr {
  flex: none;
  min-width: 56px;
  text-align: right;
  font-weight: 700;
  font-family: var(--font-mono);
}

.tier1Wr--good {
  color: var(--accent-green);
}

.tier1Wr--bad {
  color: #c0392b;
}

.tier1Wr--low {
  opacity: 0.7;
}

.tier1DetailHead {
  margin: 4px 0 8px;
  font-size: 0.92rem;
}

.tier1Tabs {
  margin-bottom: 8px;
}

/* ---- patches ---- */
.patchHeader {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
}

.patchHeader .historyHint {
  margin: 0;
}

.patchPickerBtn {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 16px;
  font-size: 1.1rem;
  border-color: var(--accent);
}

.patchPickerBtn b {
  font-size: 1.5rem;
  font-family: var(--font-mono);
  color: var(--accent-text);
}

.patchPickerLabel,
.patchPickerCaret {
  color: var(--muted);
  font-size: 0.85rem;
}

.patchPickerMenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 240px;
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(20, 60, 120, 0.18);
  display: flex;
  flex-direction: column;
}

.patchPickerItem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 8px 14px;
  text-align: left;
  background: transparent;
  color: var(--text);
}

.patchPickerItem:last-child {
  border-bottom: none;
}

.patchPickerItem--active {
  background: var(--accent-tint);
}

.patchTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.patchTabs .statsModeBtn {
  flex: 1 1 auto;
  padding: 5px 8px;
  font-size: 0.8rem;
}

.patchProse p {
  margin: 0 0 10px;
  font-size: 0.88rem;
  line-height: 1.55;
}

.patchProse .patchSummary {
  font-size: 0.95rem;
}

.patchEntry {
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  background: var(--panel);
  font-size: 0.85rem;
}

.patchEntry--buffed {
  border-left-color: var(--accent-green);
}

.patchEntry--nerfed {
  border-left-color: #c0392b;
}

.patchEntry--items {
  border-left-color: var(--muted);
}

.patchEntryHead {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.patchEntryChange {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.patchEntryWhy {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

.patchBadge {
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--muted);
  color: var(--muted);
}

.patchBadge--impact-high,
.patchBadge--buff {
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.patchBadge--nerf {
  border-color: #c0392b;
  color: #c0392b;
}

.patchChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
}

.patchChip {
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1px solid;
}

.patchChip--up {
  border-color: var(--accent-green);
  color: var(--accent-green);
  background: var(--accent-green-tint);
}

.patchChip--down {
  border-color: #c0392b;
  color: #c0392b;
  background: rgba(192, 57, 43, 0.08);
}

.patchStatsLink {
  margin-top: 10px;
}

@media (max-width: 700px) {
  .tier1Num {
    min-width: 0;
    font-size: 0.72rem;
  }

  .tier1Bar {
    display: none;
  }

  /* Ban rate is the one stat Dota's own tier-1 list never shows (Dota's whole
     .tier1Num is shorter to begin with) -- on a phone-width row .tier1Num's own
     flex-shrink:0 refused to give it up, squeezing .tier1Name (flex:1) down to
     almost nothing instead, so the hero name read as just "…". Dropping it here
     matches the row width Dota already works at. */
  .tier1Ban {
    display: none;
  }

  /* Inside one hero's card a phone screen has no room for the filters,
     summary and explanations above it -- the card's own header already says
     which patch/tournament it is about. */
  #tier1Section.tier1Section--detail #tier1Note,
  #tier1Section.tier1Section--detail #tier1Controls,
  #tier1Section.tier1Section--detail #tier1Summary,
  #tier1Section.tier1Section--detail .tier1Tabs + .historyHint {
    display: none;
  }

  .statsModeBtn {
    padding: 6px 6px;
    font-size: 0.8rem;
  }
}

.telegramBox {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  background: var(--panel);
  font-size: 0.85rem;
}

.telegramBox p {
  margin: 0 0 6px;
}

.telegramSteps {
  margin: 0 0 8px;
  padding-left: 20px;
}

.telegramSteps li {
  margin-bottom: 4px;
}

.liveModeToggleRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.telegramUnlinkBtn {
  color: #c0392b;
  border-color: #c0392b;
}

.telegramUnlinkBtn:hover:not(:disabled) {
  background: #c0392b;
  color: #ffffff;
}

.draftControls {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0 0 8px;
}

.draftControlLabel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.8rem;
  color: var(--muted);
}

.draftControlLabel select,
.draftControlLabel input {
  height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.92rem;
  min-width: 150px;
}

/* Profile page: account_id and rank sit in the same row (draftControls'
   flex layout already does that); the account field just needs to claim
   more of the row than the rank dropdown. */
.profileRow {
  margin: 0 0 4px;
}

.profileField--account {
  flex: 1 1 260px;
}

.profileField--account input {
  width: 100%;
}

/* Read-only player/rank line on the draft page itself, with a quick inline
   rank editor and the "ignore pool" checkbox next to it -- both exist for
   watching a live match and wanting a last-pick suggestion at a different
   rank / without personal-pool bias, without leaving the page. */
.draftProfileSummary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--muted);
}

.draftChangeRankBtn {
  padding: 3px 10px;
  font-size: 0.76rem;
}

.draftRankQuickEdit {
  display: flex;
  align-items: center;
  gap: 6px;
}

.draftRankQuickEdit select {
  height: 28px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.78rem;
}

.draftRankQuickEdit button {
  padding: 3px 10px;
  font-size: 0.78rem;
}

.draftTargetPositionLabel {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--text);
}

.draftTargetPositionLabel select {
  height: 28px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.78rem;
}

.draftCheckboxLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text);
  cursor: pointer;
}

/* Section heading with an inline enable-toggle to its left, instead of a
   separate checkbox row below the heading -- one line saved, and the
   checkbox already reads left-to-right before the title it controls. */
.sectionHeaderRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sectionHeaderRow h2 {
  margin: 0;
}

/* Round radio-look checkbox: an outlined circle idle, a solid purple dot
   (the outer ring created by an inset shadow matching the page background)
   once checked, instead of the browser's default square box. */
.draftCheckboxLabel input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  background: var(--panel);
  margin: 0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.draftCheckboxLabel input:checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--panel);
}

.draftSubscriptionNote {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 400;
}

.draftTeams {
  display: grid;
  gap: 20px;
  margin-bottom: 6px;
}

/* The mobile single-column override lives in the shared teamSwitcher media
   query above -- this two-column layout only applies once that stops
   overriding it, and has to be gated the same way (min-width, not just an
   unconditional default) since a later same-specificity rule always beats
   an earlier one regardless of which is wrapped in a media query. */
@media (min-width: 701px) {
  .draftTeams {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Same-size boxes, just nudged down so the page doesn't read as
       top-heavy when there's no result below yet -- a bit more than before
       now that the removed "Назад" button left extra room up top. */
    margin-top: 56px;
  }
}

.draftTeam h3 {
  margin: 0 0 6px;
  font-size: 0.9rem;
}

.draftHeroSlots {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.draftHeroSlot {
  min-width: 0;
}

.draftHeroSlot--withPosition {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 8px;
}

.draftHeroSlot .position-select,
.draftHeroSlot input {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 0.9rem;
  width: 100%;
  min-width: 0;
  height: 36px;
}

.draftHeroSlot input::placeholder { color: var(--muted); }

.draftHeroCard {
  cursor: default;
}

/* The match-id field is the only control on this page -- centered (like the
   button below it already was) and sized up along with the button so the
   page reads as deliberate rather than left-aligned and sparse in an
   otherwise mostly-empty view. */
#mistakeForm .draftControls {
  justify-content: center;
}

#mistakeForm .draftControlLabel {
  font-size: 0.95rem;
}

#mistakeMatchIdInput {
  height: 40px;
  min-width: 240px;
  padding: 6px 12px;
  font-size: 0.98rem;
}

#mistakeAnalyzeBtn {
  padding: 10px 32px;
  font-size: 1rem;
}

#mistakeResults {
  margin-top: 20px;
}

/* Vertically centered on the page until the user actually asks for
   something -- once they do (mistakeSection--hasResult, set on submit, not
   just once a result lands, so this is already in place while waiting), it
   settles to the top like the rest of the site, staying fully usable for
   the next search instead of reverting. The field/button themselves stay
   standard-sized throughout (see the base #mistakeMatchIdInput/
   #mistakeAnalyzeBtn rules above) -- only the wrapper's position moves. */
#mistakeSection:not(.mistakeSection--hasResult) #mistakeForm {
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#mistakeForm {
  transition: min-height 0.25s ease;
}

.mistakeWaiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
  padding: 20px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--accent-tint);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.mistakeAnalysisText {
  margin: 8px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  font-size: 0.85rem;
  line-height: 1.55;
}

#draftResults h3 {
  margin: 14px 0 6px;
  font-size: 0.9rem;
}

.tournamentRow {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.statsSection table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.statsSection th,
.statsSection td {
  padding: 2px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.historyRow {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-left: 4px solid #8db3e3;
  border-radius: 4px;
  font-size: 0.85rem;
  background: var(--panel);
  cursor: pointer;
}

.historyRow:hover {
  background: var(--accent-tint);
}

.historyRow--win {
  border-left-color: var(--accent-green);
  background: var(--accent-green-tint);
}

.historyRow--loss {
  border-left-color: var(--accent);
  background: var(--accent-tint);
}

.historyRowTop {
  display: flex;
  align-items: center;
  gap: 8px;
}

.historyTitleInput {
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 2px 0;
  cursor: text;
  width: 100%;
  min-width: 0;
}

.historyTitleInput:hover,
.historyTitleInput:focus {
  outline: none;
  text-decoration: underline dotted;
}

.historyDeleteBtn {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  border-color: var(--muted);
}

.historyDeleteBtn:hover:not(:disabled) {
  background: #c0392b;
  border-color: #c0392b;
  color: #ffffff;
}

.historyTagRow {
  margin-top: -2px;
}

.historyTournamentInput {
  font-size: 0.72rem;
  padding: 1px 8px;
  border: 1px dashed var(--muted);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  width: auto;
  max-width: 100%;
  height: auto;
}

.historyTournamentInput:hover,
.historyTournamentInput:focus {
  border-color: var(--accent);
}

.historyTournamentInput:not(:placeholder-shown) {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  background: var(--accent-tint);
}

.historyMeta {
  color: var(--muted);
  font-size: 0.78rem;
}

.draftBanNote {
  margin-top: 3px;
  color: var(--accent-text);
  font-size: 0.78rem;
  font-weight: 600;
}

.historyTeams {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.outcomePrompt {
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-green);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.88rem;
}

#outcomeSaved {
  color: var(--accent-green);
  font-weight: 600;
}

/* "Добавить аккаунт" modal trigger -- the compact list + modal is now the
   only way to add an account on any screen size, matching the mobile
   layout everywhere instead of showing an always-open form on desktop. */
.addAccountBtn {
  display: inline-flex;
}

#profileInlineForm {
  display: none;
}

#linkedAccountsList {
  /* max-height is set from JS (sizeScrollBox, same as the match-history
     list) to the space actually available on screen -- a fixed 40vh
     didn't account for how much room the rest of the page needed and
     could still overflow the viewport on shorter screens. This fallback
     only matters for the instant before that JS runs. */
  max-height: 40vh;
  overflow-y: auto;
  padding-right: 4px;
}

.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 37, 68, 0.45);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modalBox {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modalBox h3 {
  margin: 0 0 4px;
}

.modalCloseBtn {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  padding: 4px 8px;
}

.modalCloseBtn:hover:not(:disabled) {
  background: transparent;
  color: var(--accent);
}

.modalBox .draftControlLabel select,
.modalBox .draftControlLabel input {
  width: 100%;
}

/* Desktop top nav rules -- placed here (not next to .topNav's display:none
   default near the top) because #mobileHeader and .menuBtn each have their
   own unconditional base rule later in the cascade than that would have
   been; putting the override last guarantees it wins regardless. */
@media (min-width: 701px) {
  #mobileHeader,
  .menuBtn {
    display: none;
  }

  /* Boxed toolbar (matching the rest of the site's bordered-panel language,
     rather than an edge-to-edge bleed) with flat tab-style links inside --
     the Dotabuff/ProTracker look: a solid bar, no per-link button chips,
     a filled rounded-rect on the active/hovered tab instead of an
     underline. Every zone centers its own content on the cross-axis with
     plain align-items (no height:100%/stretch tricks, which needs the
     parent to have a resolved height to stretch against and was why the
     center links sat higher than the title/profile buttons). */
  /* Three columns, the middle one auto-sized between two equal 1fr sides:
     the section tabs therefore sit exactly in the middle of the bar no
     matter how wide the logo and the profile button happen to be (with
     space-between they drifted right of centre). */
  .topNav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 16px;
    max-width: 1180px;
    margin: 0 auto 24px;
    padding: 10px 20px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
  }

  /* nowrap matters: with the global overflow-wrap:anywhere the logo's min-content
     width collapses to one letter, and the grid column then squeezes it. */
  .topNavTitle {
    flex: none;
    white-space: nowrap;
    font-size: 1.4rem;
    font-weight: 800;
    background: linear-gradient(90deg, var(--accent) 70%, var(--accent-sky) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .topNavTitle:hover:not(:disabled) {
    background: linear-gradient(90deg, var(--accent) 70%, var(--accent-sky) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0.85;
  }

  /* It's a plain "go home" click, not a form control -- no focus ring. */
  .topNavTitle:focus {
    outline: none;
  }

  /* Logo + a small round "?" (opens "Как это работает") perched at the
     logo's top-right corner like a superscript. */
  .topNavBrand {
    display: flex;
    align-items: flex-start;
    gap: 3px;
    justify-self: start;
  }

  .topNavHelp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    padding: 0;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    background: transparent;
    color: var(--accent-text);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
  }

  .topNavHelp:focus {
    outline: none;
  }

  .topNavHelp:hover:not(:disabled),
  .topNavHelp--active,
  .topNavHelp--active:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
  }

  /* Equal-width columns (1fr tracks in a shrink-to-fit grid all take the
     widest label's size), each tab centred in its own cell: with five
     sections the third one is at the bar's exact centre and the rest are
     spaced evenly around it. */
  .topNavCenter {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    justify-items: center;
    align-items: center;
    column-gap: 4px;
  }

  .topNavRight {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
  }

  .topNavBtn {
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 8px 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .topNavBtn:focus {
    outline: none;
  }

  .topNavBtn:hover:not(:disabled) {
    background: var(--accent-tint);
    color: var(--accent-text);
  }

  .topNavBtn--active,
  .topNavBtn--active:hover:not(:disabled) {
    background: var(--accent);
    color: #ffffff;
  }

  .topNavRight .topNavBtn {
    border: 1px solid var(--accent);
    padding: 6px 12px;
  }

  .topNavRight .topNavBtn:hover:not(:disabled) {
    background: var(--accent);
    color: #ffffff;
  }

  .topNavUserBtn {
    font-weight: 700;
  }

  /* The top nav already highlights which page you're on -- repeating its
     name as an <h2> inside the page too is redundant there (mobile keeps
     it, since it has no persistent nav to lean on instead). */
  .statsSection h2,
  .howItWorksSection h2 {
    display: none;
  }

  /* Profile sits just slightly in from the right edge (it used to have
     "Выйти" next to it, which moved to the profile page itself). */
  .topNavRight {
    margin-right: 6px;
  }
}

/* Five sections + logo/help + profile stop fitting one row on a narrower
   desktop window: tighten the tabs in two steps, and below ~820px put the
   tabs on a row of their own under the logo/profile line. */
@media (min-width: 701px) and (max-width: 1275px) {
  .topNav {
    column-gap: 10px;
    padding: 10px 14px;
  }

  .topNavTitle {
    font-size: 1.2rem;
  }

  .topNavCenter {
    column-gap: 2px;
  }

  .topNavBtn {
    font-size: 0.8rem;
    padding: 7px 9px;
  }

  .topNavRight {
    margin-right: 4px;
  }
}

@media (min-width: 701px) and (max-width: 1095px) {
  .topNav {
    column-gap: 6px;
    padding: 8px 10px;
  }

  .topNavTitle {
    font-size: 1.1rem;
  }

  .topNavCenter {
    column-gap: 0;
  }

  .topNavBtn {
    font-size: 0.76rem;
    padding: 6px 6px;
  }

  .topNavRight {
    margin-right: 2px;
  }

  .topNavRight .topNavBtn {
    padding: 5px 9px;
  }
}

@media (min-width: 701px) and (max-width: 985px) {
  .topNav {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
    margin-bottom: 12px;
  }

  /* Tabs on their own full-width row (still equal columns, third in the middle). */
  .topNavCenter {
    grid-column: 1 / -1;
    grid-row: 2;
    column-gap: 0;
  }

  .topNavCenter .topNavBtn {
    padding: 6px 4px;
    font-size: 0.74rem;
  }
}

/* background-attachment: fixed is known to repaint/jump on mobile browsers
   (the fixed layer has to be recomposited against the visual viewport on
   every scroll frame, worse still while the address bar collapses/expands
   mid-scroll) -- this is very likely the "gradient flies off, content looks
   like it scrolls" glitch reported on phones. Scoped to mobile only since
   the fixed attachment is fine (and intentional) on desktop. */
@media (max-width: 700px) {
  html {
    /* Disables the elastic bounce past the top/bottom edge on browsers
       that respect it (modern Safari/Chrome on mobile) -- that bounce is
       what makes content look like it "уезжает" (drifts) briefly and,
       combined with any background seam, what made the gradient look
       broken at the bottom of the page. */
    overscroll-behavior-y: none;
  }

  body {
    background-attachment: scroll;
  }

  /* Full "Игрок (Герой), Игрок (Герой), ..." x5 per team easily overflows a
     phone width -- truncate to one line with an ellipsis (the full roster
     is still one tap away in the match's own detail view) instead of
     wrapping across several lines and pushing the row much taller. */
  .historyTeams div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Same-size boxes as always, just nudged down -- on a phone the empty
     tail below a short, result-less draft page reads as broken, so split
     that leftover space above the grid instead of leaving it all below --
     a bit more than before now that the removed "Назад" button left extra
     room up top. */
  .draftTeams {
    margin-top: 40px;
  }
}

/* ================= Blue Eye additions ================= */

/* Level (rank / pro scene) + tournament, above the two teams. */
.formTopRow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0 0 12px;
}

.formTopRow .tournamentPicker {
  flex: 1 1 260px;
  max-width: 380px;
  margin: 0;
}

.rankPicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.85rem;
}

.rankPicker select,
.reviewControls select,
.draftControlLabel select {
  height: 38px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.92rem;
}

.heroIcon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  background: var(--accent-tint);
  border: 1px solid var(--border);
  flex: none;
}

.ac-item .heroIcon { margin-right: 4px; }

/* Removable hero chips (bans, hero pool) */
.heroChips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.chipList {
  display: contents;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 6px;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: var(--accent-tint);
  color: var(--accent-text);
  font-size: 0.8rem;
  font-weight: 600;
}

.chip .heroIcon { width: 18px; height: 18px; }

.chip .chipX {
  border: none;
  background: transparent;
  color: var(--accent-text);
  padding: 0 5px;
  font-size: 1rem;
  line-height: 1;
}

.chip .chipX:hover:not(:disabled) {
  background: transparent;
  color: #c0392b;
}

.chipInputWrap {
  flex: 1 1 170px;
  max-width: 260px;
}

.chipInput {
  width: 100%;
  height: 30px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.85rem;
}

.chipsBlock {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0 0;
}

.chipsLabel {
  color: var(--muted);
  font-size: 0.78rem;
}

.result .resultMeta {
  margin: 10px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.resultMeta b { color: var(--text); }

.resultWarnings:empty { display: none; }

.resultWarnings {
  margin-top: 14px;
  font-size: 0.82rem;
}

.resultWarnings h3 {
  margin: 0 0 4px;
  font-size: 0.9rem;
}

.resultWarnings ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.result td .heroIcon,
.result td { vertical-align: middle; }

/* Pro matches */
.matchRow { cursor: pointer; }

.matchTop {
  display: flex;
  align-items: center;
  gap: 8px;
}

.matchProb {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.76rem;
}

.matchProb i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: #dbe8f8;
  overflow: hidden;
}

.matchProb i b {
  display: block;
  height: 100%;
  background: var(--accent);
}

#matchesList {
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 4px;
}

/* Draft review */
.reviewControls {
  justify-content: center;
  margin: 12px 0 8px;
}

.reviewNotes {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  height: 38px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.9rem;
}

.reviewNotes::placeholder { color: var(--muted); }

.reviewTeams2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 400;
}

@media (max-width: 700px) {
  .reviewTeams2 { grid-template-columns: 1fr; }
}

.reviewBody {
  margin-top: 8px;
}

.reviewBody ul {
  margin: 0 0 6px;
  padding-left: 20px;
  font-size: 0.85rem;
}

.reviewBody h3 {
  margin: 12px 0 4px;
  font-size: 0.95rem;
}

#reviewResults {
  margin-top: 16px;
}

/* Link to the sister site */
.siblingLink {
  display: inline-block;
  padding: 8px 20px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--accent-text);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.siblingLink:hover {
  background: var(--accent);
  color: #ffffff;
}

/* Optional blocks folded away on small screens */
.moreBox {
  margin: 8px 0 0;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}

.moreBox > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  color: var(--accent-text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.moreBox > summary::-webkit-details-marker { display: none; }
.moreBox > summary::before { content: "▸"; font-size: 0.8rem; }
.moreBox[open] > summary::before { content: "▾"; }
.moreBox[open] { padding-bottom: 10px; }

.reviewMoreGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}

#reviewSection .reviewControls { margin: 8px 0; }

@media (min-width: 701px) {
  #reviewSection .draftTeams { margin-top: 8px; }
}

@media (max-width: 700px) {
  .reviewMoreGrid { grid-template-columns: 1fr; }
  #draftSection .draftTeams,
  #reviewSection .draftTeams { margin-top: 0; }
  .profileHint { display: none; }
}

@media (max-width: 700px) {
  /* level + role side by side, the two ticks side by side, the pool line dropped */
  #draftSection .draftProfileSummary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
  }
  #draftSection .draftProfileSummary #draftProfileSummaryText { display: none; }
  #draftSection .draftTargetPositionLabel { min-width: 0; }
  #draftSection .draftTargetPositionLabel select { flex: 1; min-width: 0; }
}

/* The signed-in name at the top of the drawer: plain white text on the blue panel, not a white button. */
.authBar .authUserName {
  background: transparent;
  border: none;
  color: #ffffff;
  text-align: left;
  padding: 2px 0;
}

.authBar .authUserName:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.gameSwitcher { position: relative; display: inline-flex; align-items: center; }
.gameSwitcherBtn { border: 1px solid var(--border); border-radius: 9px; background: var(--accent-tint); color: var(--accent-text); padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.gameSwitcherMenu { position: absolute; top: calc(100% + 7px); left: 0; min-width: 170px; z-index: 30; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); box-shadow: 0 12px 28px rgba(0,0,0,.22); padding: 5px; }
.gameSwitcherMenu a, .gameSwitcher--mobile a { display: block; color: var(--text); text-decoration: none; border-radius: 6px; padding: 7px 10px; }
.gameSwitcherMenu a:hover, .gameSwitcher--mobile a:hover, .gameSwitcherActive { background: var(--accent-tint); color: var(--accent-text) !important; }
.gameSwitcher--mobile { display: none; }
.prepareControls { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; }
.prepareControls label { flex: 1 1 160px; }
.prepareControls select { width: 100%; }
.prepareCard { margin-top: 20px; padding: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.prepareCard h4 { margin: 22px 0 8px; color: var(--accent-text); }
.prepareCard li { margin: 7px 0; }
.prepareChips { display: flex; flex-wrap: wrap; gap: 7px; }
.prepareChips span { border: 1px solid var(--border); background: var(--accent-tint); padding: 6px 9px; border-radius: 7px; }
@media (max-width: 700px) {
  .gameSwitcher--mobile { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin: 8px 0; }
  .gameSwitcher--mobile span { grid-column: 1 / -1; padding: 0 10px; color: var(--muted); }
  .gameSwitcher--mobile a { font-size: .81rem; text-align: center; padding: 7px 4px; }
}