/* Шапка сайта (index, champions, tierlist, patchnotes): слева логотип и меню, в центре поиск (только index), справа поддержка и язык.
   Все элементы высотой 40px и скруглением 10px. Подключается после style.css. */
.top.gh {
  --h: 40px; --rad: 10px;
  display: grid; align-items: center; column-gap: 8px; row-gap: 0;
  grid-template-columns: auto auto 1fr auto auto auto auto;
  grid-template-areas: "brand nav . search donate lang burger";
  position: sticky; top: 0; padding: 10px clamp(14px, 4vw, 40px);
}
.gh .brand { grid-area: brand; margin-right: 14px; min-width: 0; flex: none; }
.gh-right { display: contents; }
.gh .donate-btn { grid-area: donate; width: 128px; justify-content: center; flex: none; box-sizing: border-box; }
.gh .langsw { grid-area: lang; justify-self: end; height: var(--h); border-radius: var(--rad); margin-left: 4px; }
.gh .lsthumb { border-radius: 8px; }
.gh-burger { grid-area: burger; display: none; }

/* меню: серое, белое при наведении, активный пункт — акцентом логотипа (голубой) */
.gh-nav { grid-area: nav; display: flex; gap: 2px; align-items: center; }
.gh-nav a {
  flex: none; display: inline-flex; align-items: center; height: var(--h); padding: 0 11px; border-radius: var(--rad);
  color: var(--muted); text-decoration: none; font-size: 15px; white-space: nowrap; position: relative; transition: color .15s, background .15s;
}
.gh-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.gh-nav a[aria-current="page"] { color: #fff; }
.gh-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--cyan); }

/* поиск одной «таблеткой»: ник # тег | регион | Найти. Только на index.html. */
.gh-search { grid-area: search; margin: 0; padding: 0; justify-self: end; flex: none; width: 460px; }
.gh-pill { width: 100%; }
body:not(.index-page) .gh-search { display: none; }
.gh-pill { display: flex; align-items: stretch; height: var(--h); max-width: 520px; border: 1px solid var(--line); border-radius: var(--rad); background: var(--panel2); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.gh-pill:focus-within { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.gh-pill input, .gh-pill select { border: 0; border-radius: 0; background: transparent; height: 100%; padding-top: 0; padding-bottom: 0; color: #F8FAFC; }
.gh-pill input:focus, .gh-pill select:focus { border: 0; }
.gh-pill #name { flex: 1 1 140px; min-width: 0; padding-right: 4px; }
.gh-pill .hash { align-self: center; color: var(--muted); font-family: var(--mono); }
.gh-pill #tag { flex: 0 0 68px; width: 68px; padding-left: 4px; text-transform: uppercase; }
.gh-pill .icon-btn { align-self: center; flex: none; margin-right: 4px; }
.gh-pill #region {
  flex: none; border-left: 1px solid var(--line);
  padding-left: 10px; padding-right: 20px; cursor: pointer; font-size: 13px;
  appearance: none;
  background: #1C1C21;
  color: #F8FAFC;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path fill="%23F8FAFC" d="M1 1l5 5 5-5"/></svg>');
  background-repeat: no-repeat;
  background-position: right 4px center;
}
.gh-pill select { background: #1C1C21; color: #F8FAFC; }
.gh-pill select option { background: #1C1C21; color: #F8FAFC; }
.gh-pill button.primary { flex: none; height: 100%; border-radius: 0; border: 0; padding: 0 20px; font-size: 13px; }
.gh-pill button.primary:hover { transform: none; box-shadow: inset 0 -3px 0 var(--cyan); }

/* «Поддержать»: тихая контурная кнопка; градиент, подъём и сердечки — только при наведении */
.donate-btn {
  position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 7px; height: var(--h, 40px); padding: 0 14px;
  border: 1px solid #4a4a55; border-radius: var(--rad, 10px); background: transparent; color: #c8c8d0 !important;
  font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; margin: 0;
  transition: transform .15s, box-shadow .15s, color .15s, border-color .15s;
}
.donate-btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, #ff5d73, #ff9f43); opacity: 0; transition: opacity .2s; }
.donate-btn .dn-i { font-size: 13px; line-height: 1; color: #ff5d73; transition: color .15s; }
.donate-btn:hover, .donate-btn:focus-visible { color: #111 !important; border-color: transparent; transform: translateY(-2px); box-shadow: 0 2px 0 var(--cyan), 0 4px 0 var(--magenta), 0 6px 0 var(--yellow); }
.donate-btn:hover::before, .donate-btn:focus-visible::before { opacity: 1; }
.donate-btn:hover .dn-i, .donate-btn:focus-visible .dn-i { color: #111; }
.donate-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* сердечки выезжают из-под кнопки: пачка сразу при наведении и затем каждые 2 секунды */
.donate-btn .hh { position: absolute; left: 50%; top: 60%; z-index: -2; font-style: normal; line-height: 1; opacity: 0; pointer-events: none; color: #ff5d73; }
.donate-btn:hover .hh, .donate-btn:focus-visible .hh { animation: hh-out 2s ease-out infinite; }
.donate-btn .hh:nth-of-type(1) { --x: -26px; --d: 0s; font-size: 14px; }
.donate-btn .hh:nth-of-type(2) { --x: 4px; --d: .18s; font-size: 18px; color: #ff9f43; }
.donate-btn .hh:nth-of-type(3) { --x: 30px; --d: .36s; font-size: 12px; }
@keyframes hh-out {
  0% { opacity: 0; transform: translate(calc(var(--x) * .2), -4px) scale(.5); }
  12% { opacity: 1; }
  60% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--x), 38px) scale(1.1) rotate(calc(var(--x) * .5deg)); }
}
.donate-btn .hh { animation-delay: var(--d); }

/* фильтры игрока — над результатами, а не в шапке */
.gh-filters { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 14px clamp(14px, 4vw, 40px) 0; }
.gh-filters[hidden] { display: none; }
.gh-fbtn { display: none; height: var(--h, 40px); padding: 0 14px; border-radius: 10px; }
.gh-fbody { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.gh-f { display: inline-flex; align-items: center; gap: 8px; font: 11px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }
.gh-f select { height: 40px; border-radius: 10px; padding: 0 12px; font: 13px var(--mono, monospace); text-transform: none; letter-spacing: 0; }

/* телефон: поиск на виду и центрирован, меню в бургере, фильтры — по кнопке, шапка при прокрутке в одну строку */
@media (max-width: 900px) {
  .top.gh { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "brand donate lang burger" "search search search search"; column-gap: 6px; padding: 8px 12px 10px; }
  .gh-search { padding-top: 10px; justify-self: stretch; width: auto; min-width: 0; max-width: none; }
  .gh-pill { max-width: none; }
  .gh .brand { margin-right: 0; font-size: 18px; }
  .gh-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 10px; font-size: 20px; line-height: 1; }
  .gh-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 12px 12px; background: rgba(11,11,13,.98); border-bottom: 1px solid var(--line); }
  .gh.menu-open .gh-nav { display: flex; }
  .gh-nav a { height: 46px; font-size: 16px; }
  .gh-nav a[aria-current="page"]::after { left: 14px; right: auto; width: 24px; }
  .gh .donate-btn { width: 40px; padding: 0; }
  .donate-btn .dn-t { display: none; }
  .gh-pill .icon-btn { display: none; }
  .gh-pill #tag { flex-basis: 58px; width: 58px; }
  .gh-pill #region { padding-left: 8px; padding-right: 6px; font-size: 14px; }
  .gh-pill button.primary { padding: 0 16px; }
  .gh-pill input, .gh-pill select { font-size: 16px; }
  .gh-pill select option { font-size: 16px; }
  /* компактная шапка: логотип, поиск, бургер */
  .gh.gh-compact { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand search burger"; padding-top: 6px; padding-bottom: 6px; }
  .gh.gh-compact .brand span { display: none; }
  .gh.gh-compact .donate-btn, .gh.gh-compact .langsw { display: none; }
  .gh.gh-compact .gh-search { padding-top: 0; justify-self: stretch; margin-left: 0; width: auto; }
  .gh.gh-compact .gh-pill #region, .gh.gh-compact .gh-pill .hash { display: none; }
  .gh-fbtn { display: inline-flex; align-items: center; gap: 8px; }
  .gh-fbtn::after { content: "▾"; }
  .gh-fbtn[aria-expanded="true"]::after { content: "▴"; }
  .gh-fbody { display: none; margin-top: 10px; display: none; grid-template-columns: 1fr 1fr; }
  .gh-fbody.open { display: grid; }
  .gh-f { flex-direction: column; align-items: stretch; gap: 4px; }
  .gh-f select { width: 100%; font-size: 16px; }
}
/* окно уже ~1360px: поиск полного размера не помещается в первую строку — он переносится на вторую, не сжимаясь */
@media (min-width: 901px) and (max-width: 1360px) {
  .top.gh { grid-template-areas: "brand nav . . donate lang burger" "search search search search search search search"; }
  .gh-search { justify-self: start; margin-top: 10px; }
  .gh.gh-compact .gh-search { display: none; }
}
/* на десктопе при прокрутке прячем строку поиска: шапка в одну строку */
@media (min-width: 901px) {
  .gh.gh-compact .gh-search { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .donate-btn, .donate-btn::before { transition: none; }
  .donate-btn:hover .hh, .donate-btn:focus-visible .hh { animation: none; }
}