/* Championship navigation. Geometry is shared by links, icon masks and gestures. */
#app > .game-dock {
  --glass-index: 2;
  --glass-step: calc((100% - 16px) / 5);
  --dock-height: 96px;
  --dock-crest: 128px;
  --dock-bottom: max(22px, env(safe-area-inset-bottom, 0px));
  position: fixed;
  z-index: 100;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  box-sizing: border-box;
  width: min(780px, calc(100% - 32px));
  height: var(--dock-height);
  padding: 6px 8px;
  margin: 0;
  inset: auto auto var(--dock-bottom) 50%;
  transform: translateX(-50%);
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* A machined outer rim, inset hairline and understated perforated blue glass. */
.game-dock > .dock-rail {
  position: absolute;
  z-index: -1;
  inset: 7px 0;
  pointer-events: none;
  border: 1.5px solid #a5d5ff;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 0, #387fe63b, transparent 65%),
    radial-gradient(circle, #6aafff08 .7px, transparent 1px) 0 0 / 4px 4px,
    linear-gradient(180deg, #102a50f5, #07172ef5 65%, #10284af5);
  box-shadow:
    0 0 0 1px #173f73,
    0 0 0 3px #061327b3,
    0 0 0 4px #77bfff70,
    0 0 22px #1878ff28,
    0 12px 16px -3px #000e,
    0 24px 34px -5px #000d,
    inset 0 1px 2px #e1f4ffb3,
    inset 0 -2px 5px #438fff52;
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);

}

.game-dock > .dock-rail::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid #70b2ff59;
  border-top-color: #8fc9ff80;
  border-radius: inherit;
  box-shadow: inset 0 0 14px #275cac24;
}
.game-dock > .dock-rail::after {
  content: "";
  position: absolute;
  inset: -2px 13%;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 0, #d3f6ff 0, #53c2ffb3 8%, transparent 37%) top / 100% 2px no-repeat,
    radial-gradient(ellipse at 50% 100%, #d3f6ff 0, #53c2ffb3 8%, transparent 37%) bottom / 100% 2px no-repeat;
}

.game-dock .dock-item {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: #dcecff;
  /* These links remain usable for guests and open the existing sign-in gate. */
  opacity: 1;
  text-decoration: none;
  text-shadow: 0 2px 5px #020816;
  -webkit-tap-highlight-color: transparent;
}
.game-dock .dock-item + .dock-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24%;
  bottom: 24%;
  width: 1px;
  background: linear-gradient(transparent, #63b5ff80 20%, #63b5ff80 80%, transparent);
  box-shadow: 1px 0 #020d2673;
  pointer-events: none;
}
.game-dock .dock-center::before,
.game-dock .dock-center + .dock-item::before { opacity: .45; }
.game-dock .dock-item.selected,
.game-dock .dock-center.selected {
  color: #fff;
  background: transparent;
  box-shadow: none;
}
.game-dock .dock-item:focus-visible {
  outline: 2px solid #f9d58a;
  outline-offset: 3px;
  background-color: #1d579333;
}
.game-dock .dock-label {
  position: relative;
  z-index: 1;
  font: 650 14px/1.2 var(--font-ui, Inter, "Segoe UI", sans-serif);
  letter-spacing: .01em;
  white-space: nowrap;
}
.game-dock .dock-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 38px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
}
.game-dock .dock-icon svg {
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 0 4px #79bbff70);
}
.game-dock .dock-item > .dock-icon svg { visibility: hidden; }

/* Complementary masks keep outline and selected silhouettes perfectly aligned. */
.game-dock .dock-outline-content,
.game-dock .dock-glass-content {
  position: absolute;
  inset: 6px 8px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  pointer-events: none;
  color: #dcecff;
  transition: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.game-dock .dock-outline-content { clip-path: none; }
.game-dock .dock-glass-content { color: #f0f9ff; clip-path: inset(50%); }
.game-dock .dock-glass-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.game-dock .dock-glass-item .dock-label { height: 16.8px; }
.game-dock .dock-glass-content svg { filter: drop-shadow(0 0 7px #58b7ffb3); }

/* The moving glass sits above the regular icons, behind the central crest. */
.game-dock > .dock-lens {
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: var(--glass-step);
  box-sizing: border-box;
  border-radius: 999px;
  pointer-events: none;
  transform: translateX(calc(var(--glass-index) * 100%));
  transition: transform 280ms cubic-bezier(.22,.7,.25,1);
}
.game-dock > .dock-lens {
  z-index: 6;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.game-dock .dock-glass-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 4px #228dff80);
}
.game-dock .dock-glass-halo { filter: blur(3px); opacity: .55; }
.game-dock .dock-glass-edge { filter: drop-shadow(0 0 1px #9bdeff); }
.game-dock.glass-dragging > .dock-lens { transition: none; }
.game-dock.glass-restoring > .dock-lens { transition: none; }


/* The crest stays crisp above the glass as the luminous contour follows it. */
.game-dock .dock-center { z-index: 7; overflow: visible; gap: 0; }
.game-dock .dock-center > .dock-label,
.game-dock .dock-glass-item:nth-child(3) > .dock-label { display: none; }
.game-dock .dock-center > .dock-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.game-dock .dock-center > .dock-icon .boostliga-dock-crest {
  position: static;
  display: block;
  width: var(--dock-crest);
  height: var(--dock-crest);
  max-width: none;
  flex: none;
  margin: 0;
  opacity: 1;
  object-fit: contain;
  filter: drop-shadow(0 4px 3px #010817b3) drop-shadow(0 0 5px #3aaaff40);
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: filter 200ms ease;
}
.game-dock .dock-center.selected > .dock-icon .boostliga-dock-crest {
  filter: drop-shadow(0 4px 3px #010817b3) drop-shadow(0 0 9px #46baff80);
}
.game-dock .dock-outline-content .boostliga-dock-crest,
.game-dock .dock-glass-content .boostliga-dock-crest { display: none; }

/* Counts stay readable without covering the crest or neighboring labels. */
#app > .game-dock .dock-count,
#app > .game-dock .event-count,
#app > .game-dock .private-message-dot,
#app > .game-dock .online-friends-count {
  z-index: 7;
  top: -4px;
  right: 8px;
  bottom: auto;
  left: auto;
  min-width: 23px;
  height: 23px;
  padding: 0 5px;
  border-width: 1.5px;
  font: 750 11px/1 "Segoe UI", sans-serif;
  box-shadow: 0 2px 6px #020b2080;
}
#app > .game-dock .dock-center .dock-count { right: 12px; top: -7px; }
#app > .game-dock a:has(.dock-count) .event-count { right: auto; left: 8px; }
#app > .game-dock a:has(.event-count) .online-friends-count { top: auto; bottom: -4px; }

#app .game-shell { padding-bottom: calc(158px + env(safe-area-inset-bottom, 0px)); }
html.swipe-buffer-page #app > .game-dock { visibility: hidden; pointer-events: none; }

@media (max-width: 700px) {
  #app > .game-dock {
    --dock-height: 76px;
    --dock-crest: 76px;
    --dock-bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) - 6px));
    width: calc(100% - 24px);
  }
  .game-dock .dock-center > .dock-icon .boostliga-dock-crest { max-width: none; height: var(--dock-crest); aspect-ratio: 1; }
  .game-dock .dock-item, .game-dock .dock-glass-item { gap: 4px; }
  .game-dock .dock-icon { width: 32px; height: 29px; }
  .game-dock .dock-icon svg { width: 27px; height: 27px; }
  .game-dock .dock-label { font-size: 10.5px; letter-spacing: 0; }
  .game-dock .dock-glass-item .dock-label { height: 12.6px; }
  #app > .game-dock .dock-center .dock-count { right: -2px; top: -5px; }
  #app > .game-dock .event-count,
  #app > .game-dock .private-message-dot,
  #app > .game-dock .online-friends-count { right: 2px; }
  #app .game-shell { padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 360px) {
  #app > .game-dock { --dock-crest: 70px; width: calc(100% - 20px); }
  .game-dock .dock-label { font-size: 9px; }
  .game-dock .dock-glass-item .dock-label { height: 10.8px; }
  .game-dock .dock-icon svg { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-dock *, .game-dock::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .game-dock > .dock-rail { background: Canvas; border: 2px solid CanvasText; }
  .game-dock .dock-outline-content, .game-dock .dock-glass-content,
  .game-dock > .dock-lens, .game-dock::after { display: none; }
  .game-dock .dock-item > .dock-icon svg { visibility: visible; }
  .game-dock .dock-item.selected { outline: 2px solid Highlight; color: Highlight; }
}

/* Slightly lower dock in the installed iPhone app. */
@media (max-width: 700px) {
  html.ios-installed-display #app > .game-dock {
    --dock-bottom: max(2px, calc(env(safe-area-inset-bottom, 0px) - 12px));
  }
}