/* ══════════════════════════════════════════════════════════════════════════
   GLASS LAGOON — mobile bottom dock (mdxs/ only)
   ──────────────────────────────────────────────────────────────────────────
   PURE ADDITIVE. Loaded after times-tables.css / aquarium.css / rewards.css /
   glass-skin.css. Styles ONLY the new #glassDock nav (see mobile-nav.js) and
   reserves room for it at the app's own ≤768px mobile breakpoint. No existing
   selector's behaviour is redefined except the three clearance rules in the
   media block below, which only add bottom space so content clears the dock.

   Material recipes reused from glass-skin.css:
     frosted glass  → dock chrome (same gradient/blur as .menu-container)
     sun candy      → active item (same pill as .tab-buttons .active-tab)
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* dock row height + total space it occupies incl. iOS home-bar inset.
     Raised from 60px → 72px (+20%) to give the icons + voice avatars more room. */
  --mc-dock-h: 72px;
  --mc-dock-space: calc(var(--mc-dock-h) + env(safe-area-inset-bottom, 0px));
}

/* ── the dock bar ─────────────────────────────────────────────────────────
   Hidden by default; only phones/small tablets (≤768px — the same breakpoint
   where times-tables.css hides .tab-buttons.desktop-tabs) show it. */
#glassDock {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1700; /* ABOVE the options/settings bottom sheets (1600) so the dock
                    stays visible + tappable and the sheet pops up from BEHIND
                    it — you can tab-hop without dismissing. Still below full
                    modals (2000) and the fullscreen aquarium fallback (9999). */
  height: var(--mc-dock-h);
  box-sizing: content-box; /* safe-area padding adds below the 60px row */
  align-items: stretch;
  padding: 0
    max(8px, env(safe-area-inset-right, 0px))
    env(safe-area-inset-bottom, 0px)
    max(8px, env(safe-area-inset-left, 0px));
  /* UI refresh: white/near-white labelled tab bar with a hairline top border.
     Near-opaque so the options sheet (z1600) rising behind it doesn't bleed
     through; a light blur keeps parity with the top nav's frosted white. */
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(30, 111, 217, 0.15);
  box-shadow: 0 -6px 18px rgba(5, 18, 58, 0.08);
  overflow: visible; /* let the raised Play button rise above the bar */
}

/* ── dock items (each one just .click()s its real tab button) ── */
.gl-dock-item {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0 3px;
  padding: 2px 4px;
  min-height: 44px; /* tap target */
  background: transparent;
  border: none;
  color: #888780; /* inactive icon + label */
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 0.18s ease, transform 0.18s ease;
}

.gl-dock-icon {
  line-height: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gl-dock-icon svg {
  width: 27px;
  height: 27px;
}

/* labelled tab bar: label under each icon */
.gl-dock-label {
  font-size: 11.5px;
  line-height: 1.1;
  pointer-events: none;
}

.gl-dock-item:not(.gl-active):active {
  transform: scale(0.94);
}

.gl-dock-item:focus-visible {
  outline: 2px solid #1E6FD9;
  outline-offset: -2px;
  border-radius: 12px;
}

/* active item → brand deep-blue icon + label (no pill) */
.gl-dock-item.gl-active {
  color: #185FA5;
}
.gl-dock-item.gl-active .gl-dock-label {
  font-weight: 600;
}

/* ── raised primary Play button ── */
.gl-dock-play {
  margin-top: -24px; /* lift the circle above the bar */
  justify-content: center;
  gap: 3px;
}
.gl-play-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* neutral grey until Play is the selected tab (see .gl-active below) — the
     button shouldn't read as "active" while another tab is chosen */
  background: #888780;
  border: 3px solid #FFFFFF;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(6, 18, 58, 0.22);
}
/* selected → brand blue */
.gl-dock-play.gl-active .gl-play-circle {
  background: #1E6FD9;
  box-shadow: 0 6px 14px rgba(30, 111, 217, 0.4);
}
.gl-play-circle svg {
  width: 28px;
  height: 28px;
}
/* label removed — a play glyph is self-explanatory */
.gl-dock-play .gl-dock-label {
  display: none;
}
.gl-dock-play:active {
  transform: none;
}
.gl-dock-play:active .gl-play-circle {
  transform: scale(0.94);
}

/* ── mobile: show the dock + reserve room below the app's content ── */
@media (max-width: 768px) {
  #glassDock {
    display: flex;
  }

  /* the app fills the viewport (html/body are overflow:hidden) and the grid
     flex-grows, so bottom padding here shrinks the card area above the dock */
  .times-tables-app-container {
    padding-bottom: var(--mc-dock-space);
  }

  /* Tuck the tank flush under the top nav and above the dock — no gaps.
     • Top: the app container pads content down 75px (desktop nav 65 + 10), but
       the mobile nav is only 60px tall, so pull the 15px difference back up to
       meet the nav. margin is set inline by aquarium.js (margin:0 auto), so
       !important is required to win.
     • Height: fill exactly from the mobile nav down to the dock's reserved
       space (incl. the iOS home-bar inset), so the tank bottom meets the dock.
     Fullscreen rules in aquarium.css are all !important and stay in charge. */
  #aquarium {
    margin-top: -15px !important;
    height: calc(100vh - var(--mobile-menu-bar-height, 60px) - var(--mc-dock-space));
    height: calc(100dvh - var(--mobile-menu-bar-height, 60px) - var(--mc-dock-space));
  }

  /* rewards shop scrolls inside #rewardsTabContent — let the last row of
     items scroll fully clear of the dock */
  .rewards-container {
    padding-bottom: calc(20px + var(--mc-dock-space));
  }
}

/* ── desktop (≥769px): the options sheet never belongs here ──────────────────
   #slideMenu is the app's old slide-out drawer, reused ONLY as the ≤768px
   bottom sheet (its mobile-sheet styling lives inside a max-width:768px block).
   Desktop navigates with the top tabs + their dropdown (#menuPanelContainer),
   so the drawer must never appear here. If the sheet is left open when the
   window is widened past the breakpoint, mobile-nav.js closes it — but guard
   visually too so the drawer's original desktop styling and its scrim can't
   flash through for a frame during the resize. */
@media (min-width: 769px) {
  #slideMenu.slide-menu,
  #slideMenu.slide-menu.active,
  #menuOverlay.menu-overlay,
  #menuOverlay.menu-overlay.active {
    display: none !important;
  }
}

/* ── reduced motion: no dock animation ── */
@media (prefers-reduced-motion: reduce) {
  .gl-dock-item {
    transition: none;
  }

  .gl-dock-item.gl-active,
  .gl-dock-item:not(.gl-active):active {
    transform: none;
  }
}