/* Shared by Dota, Mobile Legends and League of Legends (linked after site-shell.css): the phone menu, the profile
   page and the places where explanatory text gave way to the "Как это работает" page. */

/* ---- phone menu: one quiet bar in the corner, a side panel that also opens with a swipe (site-mobile.js) ---- */
@media (max-width: 700px) {
  #menuBtn {
    position: fixed !important;
    top: 8px;
    right: 8px;
    z-index: 120;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: .6;
  }
  #menuBtn span { display: none !important; }
  #menuBtn::before { content: ""; width: 20px; height: 3px; border-radius: 2px; background: var(--muted); }
  #menuBtn:active { opacity: 1; }

  #drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(330px, 86vw);
    height: 100%;
    padding: 46px 14px 14px;
    overflow: hidden;
    border: 0;
    border-left: 1px solid var(--border);
    color: var(--text);
    background:
      radial-gradient(circle at 92% 3%, rgb(var(--game-rgb, 137 83 229) / .32), transparent 52%),
      radial-gradient(circle at 4% 100%, rgba(137, 83, 229, .32), transparent 58%),
      var(--bg);
    box-shadow: -8px 0 26px rgba(0, 0, 0, .35);
    transform: translateX(100%);
    transition: transform .25s ease;
  }
  #drawer.drawer--open { transform: translateX(0); }
  #drawer .drawerClose { top: 6px; right: 8px; color: var(--muted); }
  #drawer .drawerBottomGroup, #drawer #howItWorksToggle { display: none !important; }

  /* the tabs fill the whole panel */
  #drawer .authBar { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; }
  #drawer .authBar > button { width: 100%; margin: 0; }
  #drawer .authBar .drawerMenuBtn {
    flex: 1 1 0;
    min-height: 44px;
    padding: 6px 14px;
    border: 1px solid rgb(203 178 245 / .3);
    border-radius: 12px;
    background:
      linear-gradient(135deg, rgba(137, 83, 229, .34), rgba(137, 83, 229, .07) 72%),
      var(--panel);
    box-shadow: inset 3px 0 0 rgb(var(--game-rgb, 137 83 229) / .75);
    color: var(--accent-text);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
  }
  #drawer .authBar .drawerMenuBtn:active { background: linear-gradient(135deg, rgba(137, 83, 229, .55), rgba(137, 83, 229, .2)), var(--panel); }
  #drawer .authBar #toggleAuthBtn { flex: 0 0 56px; border-color: var(--accent-purple); background: linear-gradient(135deg, var(--accent-purple), var(--accent-purple-deep)); box-shadow: none; color: #fff; }

  /* the signed-in name looks the same on all three sites */
  #drawer .authBar .authUserName {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 8px 12px;
    border: 1px solid rgb(203 178 245 / .35);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(137, 83, 229, .5), rgba(137, 83, 229, .16));
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
    word-break: break-word;
  }
}

/* ---- profile: Telegram on one line, the accounts list gets the room ---- */
.telegramLine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 12px 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}
.telegramLine h3 { margin: 0; }
.telegramLine .telegramBox { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; margin: 0; padding: 0; border: 0; background: transparent; }
.telegramLine .telegramBox.hidden { display: none; }
.telegramLine .telegramBox p { margin: 0; }
.telegramLine button { padding: 4px 12px; min-height: 0; font-size: .85rem; }
.telegramLine code { word-break: break-all; }
.telegramCheck { color: var(--accent-green, #3ec5a0); font-size: 1.2rem; font-weight: 800; line-height: 1; }

.linkedAccountRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 10px; margin-bottom: 6px; }
.linkedAccountRow b { font-size: .95rem; }
.linkedAccountRow .liveModeToggleRow { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.linkedAccountRow button { padding: 3px 10px; min-height: 0; font-size: .8rem; }

/* ---- explanations moved to "Как это работает" ---- */
#prepareModeHint, #tier1Note, .homeIntro p, .profileHint, .liveRoleHint, #patchSection > p.historyHint { display: none !important; }
.howNotes ul { margin: 6px 0 0; padding-left: 20px; }
.howNotes li { margin: 4px 0; }

/* ---- results first: hero icons on top, the answer below, no small scroll boxes on a phone ---- */
.heroIcon { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; vertical-align: middle; flex: none; }
.reviewIcons { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.reviewIcons .heroIcon { width: 28px; height: 28px; border-radius: 6px; }
.reviewVs { margin: 0 6px; color: var(--muted); font-size: .78rem; }
.reviewHead { padding: 8px 10px; }
.reviewVerdict { margin: 0 0 6px; font-size: 1.08rem; font-weight: 700; line-height: 1.35; }
.reviewMeta { margin-bottom: 12px; }
.draftEditBar { display: none; }
.draftSection--results .draftEditBar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.draftSection--results .draftProfileSummary,
.draftSection--results .teamSwitcher,
.draftSection--results .draftTeams,
.draftSection--results #draftMore,
.draftSection--results > .analyzeBtnWrap { display: none !important; }
@media (max-width: 700px) {
  .reviewBody.fitBox, .mistakeAnalysisText.fitBox, #draftResults.fitBox, #prepareResult.fitBox, #patchBody.fitBox, #mistakeResults .fitBox, .mistakeSummary {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0;
  }
  .mistakeSummary { padding: 10px 12px !important; font-size: .92rem !important; }
  .mistakeAnalysisText { font-size: .95rem; line-height: 1.5; }
}

/* ---- phone: ten hero icons on one line, saved accounts as compact rows ---- */
@media (max-width: 700px) {
  .reviewIcons { gap: 3px; }
  .reviewIcons .heroIcon { width: 24px; height: 24px; }
  .reviewVs { margin: 0 3px; }
  .linkedAccountRow { gap: 5px; padding: 6px 8px; text-align: left; }
  .linkedAccountRow b { flex: 1 1 100%; text-align: left; font-size: .9rem; }
  .linkedAccountRow .liveModeToggleRow { flex: 1 1 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
  .linkedAccountRow button { padding: 4px 4px; font-size: .74rem; white-space: nowrap; }
}

/* ---- a slimmer top bar (desktop): brand, sections and the account button share one
   row instead of two, with just enough gap between the labels to tell them apart ---- */
@media (min-width: 701px) {
  /* The bar's own bottom margin is the only room the sub-tab dropdown has to open into (see
     .topNavModeToggle below) -- 48px clears its tallest case (3 stacked buttons, logged in) with a
     little to spare, so nothing under the bar ever needs its own separate offset for this. Making
     main a flex column (below) stops it from collapsing margins with whichever section is visible,
     so this gap stays the same size on every page instead of drifting with that section's own
     top margin. */
  /* A plain flex row with justify-content:space-between centers the middle group only within
     whatever space is left after the brand and account areas -- since those two are rarely the
     same width (a username, a "тир-1" badge, however many nav labels...), the nav labels drifted
     off the bar's true centre, more noticeably once "Аналитика ошибок" left the group and made it
     narrower. A 1fr/auto/1fr grid keeps the middle column genuinely centred on the bar regardless
     of how wide the two side columns end up. */
  .topNav, .siteHeader {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 3px 12px;
    margin: 0 auto 37px;
  }
  body {
    display: flex;
    flex-direction: column;
  }
  main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    /* Centering short content vertically (an error line, an empty form) made the gap under the bar
       balloon on exactly those pages -- it grew with how short the content was instead of staying
       the fixed, dropdown-sized gap every other page has. Anchoring at the top keeps that gap the
       same 37px everywhere; a page with little content just leaves its own spare room at the
       bottom, the same way it always did before the bar was shrunk. */
    justify-content: flex-start;
  }
  .topNavCenter, .siteHeader nav {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    gap: 8px;
    width: auto;
  }
  .topNavBrand, .siteHeader .brandRow { grid-column: 1; grid-row: 1; justify-self: start; }
  .topNavRight, #accountArea { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; }
  .topNavBtn, .siteHeader nav button, #accountArea button {
    min-height: 0;
    padding: 2px 8px;
    font-size: .7rem;
  }
  .topNavTitle, .siteHeader .brand { font-size: .92rem; }
  .gameTag { height: 15px; min-width: 40px; padding: 0 6px; font-size: .56rem; }

  /* A section's own mode tabs (Разобрать драфт/Общая статистика/…) open as a small dropdown under that nav
     label on hover, instead of a row that was either always below the bar (pushing the bar's own height around
     whenever it appeared) or always inline in it (widening/narrowing the bar as sections changed). Absolute
     positioning takes it out of the bar's flow entirely, so nothing ever jumps. The original element stays
     exactly where it was for mobile ("мобильная версия остаётся как есть"), only hidden here; app.js clones its
     buttons into the …Bar copy, forwards clicks both ways and shows/hides it on mouseenter/mouseleave of the
     nav label (mirrorModeToggleToBar + wireNavDropdown). */
  #statsModeToggle, #mistakeModeToggle { display: none !important; }
  #topNav, .siteHeader { position: relative; }
  .topNavModeToggle {
    position: absolute;
    left: 50%;
    top: calc(100% + 3px);
    transform: translateX(-50%);
    z-index: 90;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
  }
  .topNavModeToggle .statsModeBtn { white-space: nowrap; }
}

/* ---- slimmer tabs within a section (Разобрать драфт/Общая статистика/…, patch tabs, tier-1 tabs, etc. --
   all of them are .statsModeBtn buttons inside a .statsModeToggle/.patchTabs/.tier1Tabs row) ---- */
.statsModeToggle { gap: 4px; margin: 0 0 6px; }
.statsModeBtn { padding: 1px 8px !important; font-size: .72rem !important; line-height: 1.15 !important; }
.patchTabs { gap: 3px; margin: 0 0 4px; }
.patchTabs .statsModeBtn { padding: 0 6px !important; font-size: .66rem !important; }
.tier1Tabs { margin-bottom: 4px; }

/* ---- "Поделиться" next to "Изменить состав" on the result screen ---- */
.resultActions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .resultTopBar { flex-direction: column; align-items: stretch; }
  .resultActions { justify-content: stretch; }
  .resultActions button { flex: 1; }
}