:root {
  --menu-ink: #061a24;
  --menu-muted: #61747a;
  --menu-line: #d8e1df;
  --menu-acid: #dff44a;
  --menu-paper: #f8fbfa;
}

.topbar {
  min-height: 78px;
}

.main-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(6, 26, 36, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 30px rgba(5, 32, 43, .08);
  backdrop-filter: blur(14px);
}

.main-menu a,
.auth-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent !important;
  border-radius: 999px;
  background: transparent !important;
  color: #31545a !important;
  padding: 9px 14px !important;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.main-menu a:hover,
.auth-link:hover {
  border-color: rgba(6, 26, 36, .1) !important;
  background: rgba(6, 26, 36, .06) !important;
  color: var(--menu-ink) !important;
}

.main-menu a.active,
.auth-link.active {
  border-color: rgba(6, 26, 36, .92) !important;
  background: var(--menu-ink) !important;
  color: var(--menu-acid) !important;
  box-shadow: 0 8px 22px rgba(6, 26, 36, .18);
}

.auth-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(6, 26, 36, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 30px rgba(5, 32, 43, .08);
  backdrop-filter: blur(14px);
}

.auth-actions .auth-link[href="/logout.php"] {
  color: #7a3f38 !important;
}

.auth-actions .auth-link[href="/logout.php"]:hover {
  background: #fff1ef !important;
  border-color: #efc2bc !important;
  color: #8f2f25 !important;
}

.live-chip {
  box-shadow: 0 8px 24px rgba(5, 32, 43, .07);
}

@media (max-width: 1180px) {
  .main-menu a,
  .auth-link {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
}

@media (max-width: 1000px) {
  .topbar {
    display: none !important;
  }

  body {
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  .bottom-menu {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 1200;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
    border: 1px solid rgba(6, 26, 36, .14);
    border-radius: 18px;
    background: rgba(248, 251, 250, .94);
    box-shadow: 0 18px 54px rgba(5, 32, 43, .24);
    backdrop-filter: blur(18px);
  }

  .bottom-menu a {
    min-width: 0;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 4px 6px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--menu-muted);
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0;
  }

  .bottom-menu a::before {
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    background: currentColor;
    mask: var(--menu-icon) center / 22px 22px no-repeat;
    -webkit-mask: var(--menu-icon) center / 22px 22px no-repeat;
  }

  .bottom-menu a[href="/"],
  .bottom-menu a[href="/index.html"] {
    --menu-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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16c3.5-4.5 8.5-6.5 15-6'/%3E%3Cpath d='M15 7l5 3-5 3'/%3E%3Cpath d='M4 18h16'/%3E%3Cpath d='M7 14l2 4'/%3E%3C/svg%3E");
  }

  .bottom-menu a[href="/buoys.html"] {
    --menu-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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M7 11h10'/%3E%3Cpath d='M9 15h6'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E");
  }

  .bottom-menu a[href="/fish.html"] {
    --menu-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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7c2.6 0 4.6 1.8 6 5-1.4 3.2-3.4 5-6 5H8l-5 3 2-5-2-3 2-3-2-5 5 3h8Z'/%3E%3Ccircle cx='17' cy='12' r='1'/%3E%3C/svg%3E");
  }

  .bottom-menu a[href="/profile.php"],
  .bottom-menu a[href="/login.php"] {
    --menu-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='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M5 21c1.4-4 4-6 7-6s5.6 2 7 6'/%3E%3C/svg%3E");
  }

  .bottom-menu a.active {
    border-color: rgba(6, 26, 36, .9);
    background: var(--menu-ink);
    color: var(--menu-acid);
    box-shadow: 0 8px 20px rgba(6, 26, 36, .22);
  }
}

@media (max-width: 420px) {
  .bottom-menu {
    left: 8px;
    right: 8px;
    gap: 4px;
    padding: 6px;
  }

  .bottom-menu a {
    min-height: 56px;
    font-size: 9px;
  }
}