/* Static CSS/JS re-implementation of dotacounter-web-react's Topbar.jsx for
   the two vanilla pages that still ship a real <header> (galaxy.html,
   skill-challenge.html). Kept visually identical (same colors, pill shape,
   icon set, mobile dropdown breakpoint) so switching between the React
   pages and these two doesn't look like a different site. Source of truth
   for the design is dotacounter-web-react/src/components/Topbar.jsx --
   if that changes, update this file too. */

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px !important;
  flex: 1;
  margin-left: 0 !important;
}

.topbar .topbar-nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  border: 0;
  font-size: 13px !important;
  font-family: Onest, "Segoe UI", sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  color: rgb(139, 152, 167) !important;
  text-decoration: none;
  text-transform: none !important;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  white-space: nowrap;
}

.topbar .topbar-nav a:hover {
  color: rgb(234, 237, 240) !important;
  border-color: rgba(141, 182, 201, .16);
  background: rgba(39, 51, 67, .7);
}

.topbar .topbar-nav a.active {
  color: #c8dce5 !important;
  background: linear-gradient(112deg, rgba(141, 182, 201, .15), rgba(143, 194, 166, .08)) !important;
  box-shadow: none;
}

.topbar .topbar-nav a.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -13px;
  height: 1px;
  background: #8db6c9;
  box-shadow: 0 0 10px rgba(141, 182, 201, .45);
}

.topbar-nav a svg {
  display: none;
}

.topbar-nav a::before,
.topbar-mobile-menu a::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  -webkit-mask: var(--topbar-icon) center / contain no-repeat;
  mask: var(--topbar-icon) center / contain no-repeat;
  opacity: .72;
}

.topbar-nav a:hover::before,
.topbar-nav a.active::before,
.topbar-mobile-menu a.active::before { opacity: 1; }

.topbar-nav a[href="galaxy.html"],.topbar-mobile-menu a[href="galaxy.html"]{--topbar-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.341 6.484A10 10 0 0 1 10.266 21.85'/%3E%3Cpath d='M3.659 17.516A10 10 0 0 1 13.74 2.152'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3C/svg%3E")}
.topbar-nav a[href="matches.html"],.topbar-mobile-menu a[href="matches.html"]{--topbar-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E")}
.topbar-nav a[href="index.html"],.topbar-mobile-menu a[href="index.html"]{--topbar-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E")}
.topbar-nav a[href="heroes.html"],.topbar-mobile-menu a[href="heroes.html"]{--topbar-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E")}
.topbar-nav a[href="patches.html"],.topbar-mobile-menu a[href="patches.html"]{--topbar-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z'/%3E%3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/%3E%3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/%3E%3C/svg%3E")}
.topbar-nav a[href="profile.html"],.topbar-mobile-menu a[href="profile.html"]{--topbar-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.925 20.056a6 6 0 0 0-11.851.001'/%3E%3Ccircle cx='12' cy='11' r='4'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E")}
.topbar-nav a[href="skill-challenge.html"],.topbar-mobile-menu a[href="skill-challenge.html"]{--topbar-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M22 12h-4M6 12H2M12 6V2M12 22v-4'/%3E%3C/svg%3E")}
.topbar-nav a[href="draft.html"],.topbar-mobile-menu a[href="draft.html"]{--topbar-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='14.5 17.5 3 6 3 3 6 3 17.5 14.5'/%3E%3Cline x1='13' y1='19' x2='19' y2='13'/%3E%3Cline x1='16' y1='16' x2='20' y2='20'/%3E%3Cline x1='19' y1='21' x2='21' y2='19'/%3E%3Cpolyline points='14.5 6.5 18 3 21 3 21 6 17.5 9.5'/%3E%3Cline x1='5' y1='14' x2='9' y2='18'/%3E%3Cline x1='7' y1='17' x2='4' y2='20'/%3E%3Cline x1='3' y1='19' x2='5' y2='21'/%3E%3C/svg%3E")}

.topbar .brand {
  position: relative;
  align-self: auto !important;
  min-width: max-content !important;
  min-height: 44px;
  flex-shrink: 0;
  gap: 10px;
  margin-right: 33px;
  padding-right: 8px;
  border-right: 0 !important;
  border-radius: 12px;
  font-size: 13px;
  font-family: Onest, "Segoe UI", sans-serif !important;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .14em;
  color: rgb(234, 237, 240);
  white-space: nowrap;
}

.topbar .brand::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 16px);
  width: 1px;
  height: 24px;
  background: rgba(138, 166, 255, .17);
  transform: translateY(-50%);
}

.topbar .brand .brand-mark,
.product-page .topbar .brand .brand-mark {
  display: grid;
  place-items: center;
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid rgba(142, 182, 199, .2);
  border-radius: 12px;
  background: rgba(142, 182, 199, .07);
  box-shadow: none;
  filter: none;
}

.topbar .brand:hover .brand-mark,
.product-page .topbar .brand:hover .brand-mark {
  transform: none;
  filter: none;
}

.topbar .brand .brand-mark::before {
  content: "";
  width: 18px;
  height: 18px;
  background: #8db6c9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.341 6.484A10 10 0 0 1 10.266 21.85'/%3E%3Cpath d='M3.659 17.516A10 10 0 0 1 13.74 2.152'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.341 6.484A10 10 0 0 1 10.266 21.85'/%3E%3Cpath d='M3.659 17.516A10 10 0 0 1 13.74 2.152'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.topbar .brand .brand-mark::after,
.product-page .topbar .brand .brand-mark::after {
  content: "";
  display: block;
  position: absolute;
  right: 4px;
  top: 4px;
  left: auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a8b4c1;
  box-shadow: 0 0 8px rgba(168, 180, 193, .72);
}

.topbar .brand b {
  font-weight: inherit;
  background: linear-gradient(92deg, #eaedf0, #8db6c9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.topbar-account-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

/* The React topbar has no patch-status label. Keeping the legacy label in
   the static header steals the width reserved for navigation and account
   controls, so it is intentionally hidden here. */
.topbar > .live {
  display: none !important;
}

.topbar-account {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 10px 6px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  transition: border-color .15s ease;
}

.topbar-account:hover {
  border-color: rgba(141, 182, 201, .35);
}

.topbar-account img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.topbar-account span {
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .topbar-account span { display: none; }
}

.topbar-logout {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: rgb(139, 152, 167);
  cursor: pointer;
  flex-shrink: 0;
}

.topbar-logout:hover {
  color: #d18b96;
}

@media (min-width: 1280px) {
  .topbar-logout { display: flex; }
}

.topbar-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgb(40, 50, 62);
  background: rgba(23, 34, 51, .7);
  color: rgb(234, 237, 240);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}

.topbar-burger:hover {
  border-color: rgba(141, 182, 201, .35);
  color: #8db6c9;
}

.topbar-mobile-backdrop,
.topbar-mobile-menu {
  display: none;
}

.topbar-mobile-menu {
  position: fixed;
  left: 12px;
  right: 12px;
  top: 73px;
  z-index: 49;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(40, 50, 62, .82);
  background: rgba(17, 25, 39, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.topbar-mobile-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgb(139, 152, 167);
  font-family: Onest, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}

.topbar-mobile-menu a:hover {
  color: rgb(234, 237, 240);
  background: rgba(39, 51, 67, .7);
}

.topbar-mobile-menu a.active {
  color: #c8dce5;
  background: linear-gradient(112deg, rgba(141, 182, 201, .15), rgba(143, 194, 166, .08));
}

body.topbar-menu-open .topbar-mobile-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  top: 65px;
  z-index: 40;
  background: rgba(0, 0, 0, .5);
}

body.topbar-menu-open .topbar-mobile-menu {
  display: grid;
}

body.topbar-menu-open .topbar {
  z-index: 50;
}

body.topbar-menu-open .topbar-burger {
  position: relative;
  z-index: 51;
  border-color: rgba(141, 182, 201, .42);
  color: #8db6c9;
}

body.topbar-menu-open .topbar-burger svg {
  display: none;
}

body.topbar-menu-open .topbar-burger::before {
  content: "×";
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

/* The React header has a 64px inner row plus its 1px bottom border. */
.topbar {
  box-sizing: border-box;
  height: 65px !important;
  min-height: 65px !important;
  padding: 0 16px !important;
  justify-content: flex-start !important;
  border-bottom: 1px solid rgba(34, 43, 57, .8) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

.galaxy-page > main {
  height: calc(100% - 65px) !important;
}

@media (min-width: 640px) {
  .topbar {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Eight labelled destinations plus the account controls do not fit safely
   at laptop widths. Collapse before the brand can ever be compressed. */
@media (max-width: 1535px) {
  /* !important: the shared base stylesheets each page already loads
     (style.css/shell.css/etc, different combos per page) define a
     ".topbar nav" descendant rule -- class+element beats our plain
     ".topbar-nav" class selector on specificity, so without !important
     this override silently loses and the full-width nav overflows the
     viewport instead of collapsing behind the burger button. */
  .topbar-nav { display: none !important; margin-left: 0 !important; }
  .topbar-burger { display: flex !important; }
  .topbar .brand { margin-right: 0; }
  .topbar .brand::after,
  .topbar > .live { display: none !important; }
}

@media (max-width: 800px) {
  body.galaxy-page {
    padding-bottom: 0;
  }

  .galaxy-page > main {
    height: calc(100dvh - 65px) !important;
  }
}

/* On desktop the header background is full width while its content follows
   the same centered 1440px rail as Topbar.jsx. */
@media (min-width: 1536px) {
  .topbar {
    padding-left: max(24px, calc((100vw - 1440px) / 2 + 24px)) !important;
    padding-right: max(24px, calc((100vw - 1440px) / 2 + 24px)) !important;
  }
}

@media (min-width: 640px) {
  .topbar-mobile-menu { grid-template-columns: repeat(3, 1fr); }
}

/* React raises its root rem scale from 16px to 18px on native 2K screens.
   Mirror every rem-derived topbar measurement on the two static pages. */
@media (min-width: 1800px) {
  .topbar {
    height: 73px !important;
    min-height: 73px !important;
    padding-left: max(27px, calc((100vw - 1440px) / 2 + 27px)) !important;
    padding-right: max(27px, calc((100vw - 1440px) / 2 + 27px)) !important;
  }

  .galaxy-page > main {
    height: calc(100% - 73px) !important;
  }

  .topbar .brand {
    min-height: 49.5px;
    gap: 11.25px;
    margin-right: 37px;
    padding-right: 9px;
    border-radius: 13.5px;
    font-size: 14px;
  }

  .topbar .brand::after {
    left: calc(100% + 18px);
    height: 27px;
  }

  .topbar .brand .brand-mark,
  .product-page .topbar .brand .brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 13.5px;
  }

  .topbar .brand .brand-mark::before {
    width: 18px;
    height: 18px;
  }

  .topbar .brand .brand-mark::after,
  .product-page .topbar .brand .brand-mark::after {
    right: 4.5px;
    top: 4.5px;
    width: 4.5px;
    height: 4.5px;
  }

  .topbar-nav {
    gap: 2.25px !important;
  }

  .topbar .topbar-nav a {
    height: 45px !important;
    gap: 9px !important;
    padding: 9px 13.5px !important;
    border-radius: 13.5px !important;
    font-size: 14px !important;
  }

  .topbar-nav a::before {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .topbar .topbar-nav a.active::after {
    left: 13.5px;
    right: 13.5px;
    bottom: -13px;
  }
}