/*
 * RAIENS — shared application dock
 * Markup: nav.app-bottom-nav[data-app-section] >
 *         a.app-nav-item[data-app-target] >
 *         .app-nav-icon + .app-nav-label (+ .app-nav-badge)
 */

:root {
  --app-nav-height: 76px;
  --app-nav-bottom: 18px;
  --app-nav-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  scroll-padding-bottom: calc(var(--app-nav-height) + var(--app-nav-bottom) + 24px);
}

#rezultati,
#draugi {
  scroll-margin-top: 108px;
}

body.has-app-bottom-nav {
  padding-bottom: calc(var(--app-nav-height) + var(--app-nav-bottom) + 24px);
}

@supports selector(body:has(nav.app-bottom-nav)) {
  body:has(nav.app-bottom-nav) {
    padding-bottom: calc(var(--app-nav-height) + var(--app-nav-bottom) + 24px);
  }
}

nav.app-bottom-nav {
  position: fixed;
  z-index: 70;
  right: auto;
  bottom: max(var(--app-nav-bottom), var(--app-nav-safe-bottom));
  left: 50%;
  width: min(calc(100% - 32px), 700px);
  min-height: var(--app-nav-height);
  margin: 0;
  padding: 7px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 4px;
  border: 1px solid rgba(218, 255, 227, .17);
  border-radius: 24px;
  color: #aab9af;
  background:
    linear-gradient(180deg, rgba(13, 32, 23, .91), rgba(3, 13, 8, .94)),
    rgba(3, 13, 8, .92);
  box-shadow:
    0 20px 55px rgba(0, 0, 0, .46),
    0 1px 0 rgba(255, 255, 255, .08) inset,
    0 -1px 0 rgba(141, 255, 31, .035) inset;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  transform: translateX(-50%);
  isolation: isolate;
  font-size: initial;
  letter-spacing: normal;
  text-transform: none;
}

nav.app-bottom-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 0, rgba(141, 255, 31, .12), transparent 46%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .04), transparent);
  pointer-events: none;
}

nav.app-bottom-nav .app-nav-item {
  position: relative;
  min-width: 0;
  min-height: 60px;
  padding: 8px 5px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 17px;
  outline: none;
  color: #aab9af;
  background: transparent;
  opacity: 1;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    color .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

nav.app-bottom-nav .app-nav-item::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 24px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: #8dff1f;
  box-shadow: 0 0 15px rgba(141, 255, 31, .76);
  opacity: 0;
  transform: translateX(-50%) scaleX(.35);
  transition: opacity .2s ease, transform .2s ease;
}

nav.app-bottom-nav .app-nav-icon {
  position: relative;
  width: 28px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: currentColor;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  filter: grayscale(.15);
  transition: filter .2s ease, transform .2s ease;
}

nav.app-bottom-nav .app-nav-icon svg {
  width: 23px;
  height: 23px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

nav.app-bottom-nav .app-nav-label {
  width: 100%;
  overflow: hidden;
  font: 850 9px/1.1 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .035em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

nav.app-bottom-nav .app-nav-badge {
  position: absolute;
  top: 3px;
  left: calc(50% + 8px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid #07130d;
  border-radius: 999px;
  color: #fff;
  background: #f23c63;
  box-shadow: 0 3px 12px rgba(242, 60, 99, .42);
  font: normal 950 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0;
}

nav.app-bottom-nav .app-nav-badge:empty,
nav.app-bottom-nav .app-nav-badge[hidden] {
  display: none;
}

nav.app-bottom-nav .app-nav-item:is(.is-active, [aria-current="page"]),
nav.app-bottom-nav[data-app-section="home"] .app-nav-item[data-app-target="home"],
nav.app-bottom-nav[data-app-section="games"] .app-nav-item[data-app-target="games"],
nav.app-bottom-nav[data-app-section="results"] .app-nav-item[data-app-target="results"],
nav.app-bottom-nav[data-app-section="friends"] .app-nav-item[data-app-target="friends"],
nav.app-bottom-nav[data-app-section="profile"] .app-nav-item[data-app-target="profile"] {
  color: #8dff1f;
  border-color: rgba(141, 255, 31, .14);
  background: linear-gradient(180deg, rgba(141, 255, 31, .12), rgba(141, 255, 31, .045));
}

nav.app-bottom-nav .app-nav-item:is(.is-active, [aria-current="page"])::after,
nav.app-bottom-nav[data-app-section="home"] .app-nav-item[data-app-target="home"]::after,
nav.app-bottom-nav[data-app-section="games"] .app-nav-item[data-app-target="games"]::after,
nav.app-bottom-nav[data-app-section="results"] .app-nav-item[data-app-target="results"]::after,
nav.app-bottom-nav[data-app-section="friends"] .app-nav-item[data-app-target="friends"]::after,
nav.app-bottom-nav[data-app-section="profile"] .app-nav-item[data-app-target="profile"]::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

nav.app-bottom-nav .app-nav-item:is(.is-active, [aria-current="page"]) .app-nav-icon,
nav.app-bottom-nav[data-app-section="home"] .app-nav-item[data-app-target="home"] .app-nav-icon,
nav.app-bottom-nav[data-app-section="games"] .app-nav-item[data-app-target="games"] .app-nav-icon,
nav.app-bottom-nav[data-app-section="results"] .app-nav-item[data-app-target="results"] .app-nav-icon,
nav.app-bottom-nav[data-app-section="friends"] .app-nav-item[data-app-target="friends"] .app-nav-icon,
nav.app-bottom-nav[data-app-section="profile"] .app-nav-item[data-app-target="profile"] .app-nav-icon {
  filter: drop-shadow(0 0 8px rgba(141, 255, 31, .38));
  transform: translateY(-1px);
}

nav.app-bottom-nav .app-nav-item:focus-visible {
  color: #f4fff6;
  border-color: #8dff1f;
  outline: 3px solid rgba(141, 255, 31, .42);
  outline-offset: 2px;
  background: rgba(141, 255, 31, .09);
}

.games-page .toast,
.scoreboard-page .score-toast {
  bottom: calc(var(--app-nav-height) + var(--app-nav-bottom) + 34px);
}

@media (hover: hover) and (pointer: fine) {
  nav.app-bottom-nav .app-nav-item:hover {
    color: #f2fff4;
    border-color: rgba(141, 255, 31, .18);
    background: rgba(141, 255, 31, .075);
    transform: translateY(-2px);
  }

  nav.app-bottom-nav .app-nav-item:hover .app-nav-icon {
    filter: drop-shadow(0 0 8px rgba(141, 255, 31, .28));
  }
}

/* Full-screen game and account dialogs stay above the persistent dock. */
.game-modal,
.recovery-modal,
dialog[open],
[role="dialog"][aria-modal="true"] {
  z-index: 100;
}

@media (max-width: 760px) {
  :root {
    --app-nav-height: 70px;
    --app-nav-bottom: 0px;
  }

  html {
    scroll-padding-bottom: calc(var(--app-nav-height) + var(--app-nav-safe-bottom) + 18px);
  }

  body.has-app-bottom-nav {
    padding-bottom: calc(var(--app-nav-height) + var(--app-nav-safe-bottom) + 18px);
  }

  @supports selector(body:has(nav.app-bottom-nav)) {
    body:has(nav.app-bottom-nav) {
      padding-bottom: calc(var(--app-nav-height) + var(--app-nav-safe-bottom) + 18px);
    }
  }

  nav.app-bottom-nav {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: calc(var(--app-nav-height) + var(--app-nav-safe-bottom));
    padding:
      6px
      max(5px, env(safe-area-inset-right, 0px))
      max(6px, var(--app-nav-safe-bottom))
      max(5px, env(safe-area-inset-left, 0px));
    gap: 1px;
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
    background: rgba(3, 13, 8, .965);
    box-shadow:
      0 -13px 35px rgba(0, 0, 0, .4),
      0 1px 0 rgba(255, 255, 255, .06) inset;
    transform: none;
  }

  nav.app-bottom-nav .app-nav-item {
    min-height: 58px;
    padding: 7px 2px 5px;
    gap: 4px;
    border-radius: 13px;
  }

  nav.app-bottom-nav .app-nav-item::after {
    top: -7px;
    width: 31px;
    height: 4px;
    border-radius: 0 0 5px 5px;
  }

  nav.app-bottom-nav .app-nav-icon {
    width: 29px;
    height: 27px;
    font-size: 22px;
  }

  nav.app-bottom-nav .app-nav-icon svg {
    width: 24px;
    height: 24px;
  }

  nav.app-bottom-nav .app-nav-label {
    font-size: clamp(8px, 2.35vw, 10px);
    letter-spacing: 0;
  }

  nav.app-bottom-nav .app-nav-badge {
    top: 1px;
    left: calc(50% + 7px);
  }

  .games-page .toast,
  .scoreboard-page .score-toast {
    bottom: calc(var(--app-nav-height) + var(--app-nav-safe-bottom) + 16px);
  }
}

@media (max-width: 370px) {
  nav.app-bottom-nav .app-nav-item {
    padding-inline: 0;
  }

  nav.app-bottom-nav .app-nav-label {
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  nav.app-bottom-nav .app-nav-item,
  nav.app-bottom-nav .app-nav-item::after,
  nav.app-bottom-nav .app-nav-icon {
    transition: none;
  }

  nav.app-bottom-nav .app-nav-item:hover,
  nav.app-bottom-nav .app-nav-item:is(.is-active, [aria-current="page"]) .app-nav-icon {
    transform: none;
  }
}

@media (forced-colors: active) {
  nav.app-bottom-nav {
    border: 1px solid CanvasText;
    background: Canvas;
  }

  nav.app-bottom-nav .app-nav-item:is(.is-active, [aria-current="page"]) {
    border-color: Highlight;
    color: Highlight;
  }

  nav.app-bottom-nav .app-nav-item:focus-visible {
    outline-color: Highlight;
  }
}