/* 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, var(--app-safe-bottom, 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: auto;
  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 480ms cubic-bezier(.22,.61,.36,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: 10;
  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 + var(--app-safe-bottom, 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(var(--app-safe-bottom, 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 + var(--app-safe-bottom, 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(var(--app-safe-bottom, env(safe-area-inset-bottom, 0px)) - 12px));
  }
}

/* Notification dots must escape the link layer and stay above moving glass. */
#app > .game-dock .dock-item:not(.dock-center) { z-index:auto; }
#app > .game-dock :is(.dock-count,.event-count,.private-message-dot,.online-friends-count,.network-count) { z-index:10; }

@property --dock-accent { syntax:'<color>'; inherits:true; initial-value:#36baff; }
#app>.game-dock { transition:--dock-accent 600ms ease; }
.game-dock>.dock-rail {
  border-color:color-mix(in srgb,var(--dock-accent) 55%,#f3fbff);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--dock-accent) 35%,#061327),0 0 0 3px #061327b3,0 0 0 4px color-mix(in srgb,var(--dock-accent) 45%,transparent),0 0 24px color-mix(in srgb,var(--dock-accent) 30%,transparent),0 12px 16px -3px #000e,0 24px 34px -5px #000d,inset 0 1px 2px #e1f4ff99,inset 0 -2px 5px color-mix(in srgb,var(--dock-accent) 40%,transparent);
}
.game-dock>.dock-rail::before { border-color:color-mix(in srgb,var(--dock-accent) 40%,transparent); border-top-color:color-mix(in srgb,var(--dock-accent) 65%,#fff); }
.game-dock>.dock-rail::after { background:radial-gradient(ellipse at 50% 0,#fff 0,var(--dock-accent) 8%,transparent 37%) top/100% 2px no-repeat,radial-gradient(ellipse at 50% 100%,#fff 0,var(--dock-accent) 8%,transparent 37%) bottom/100% 2px no-repeat; }
.game-dock .dock-glass-surface { filter:drop-shadow(0 0 4px var(--dock-accent)); }
.game-dock .dock-glass-halo { stroke:var(--dock-accent); }
.game-dock .dock-glass-edge { filter:drop-shadow(0 0 1px var(--dock-accent)); }
.game-dock .dock-glass-surface linearGradient[id$="-edge"] stop:is(:nth-child(2),:nth-child(3)) { stop-color:var(--dock-accent); }
.game-dock .dock-glass-surface radialGradient stop { stop-color:var(--dock-accent); }
.game-dock .dock-glass-surface linearGradient[id$="-tint"] stop:is(:first-child,:last-child) { stop-color:var(--dock-accent); }
.game-dock .dock-item+.dock-item::before { background:linear-gradient(transparent,color-mix(in srgb,var(--dock-accent) 50%,transparent) 20%,color-mix(in srgb,var(--dock-accent) 50%,transparent) 80%,transparent); }
@media(prefers-reduced-motion:reduce) { #app>.game-dock { transition:none; } }
/* While dragging, tint follows finger position without transition lag. */
#app>.game-dock.glass-dragging { transition:none; }

/* Main menu opens by holding the central crest. */
#app .menu-trigger { display:none!important; }
.nexus-menu { z-index:300; overflow-y:auto; }

/* Long press belongs to the dock, not Safari's link/image preview. */
#app>.game-dock,
#app>.game-dock a,
#app>.game-dock img {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}