/* ==========================================================================
   Glowmigos — Mobile tab bar
   A native-style bottom bar: four destinations around one raised action.
   Only exists below the desktop breakpoint; the footer carries navigation
   everywhere else.
   ========================================================================== */

.tabbar { display: none; }

@media (max-width: 63.99rem) {
  .tabbar {
    position: fixed; inset-inline: 0; inset-block-end: 0;
    z-index: var(--z-nav);
    display: block;
    padding: 0.4rem clamp(0.5rem, 2vw, 1rem);
    /* Clears the iPhone home indicator and Android gesture bar. */
    padding-block-end: calc(0.4rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(4, 16, 46, 0.86), #04102E 62%);
    border-block-start: 1px solid rgba(137, 176, 255, 0.16);
    box-shadow: 0 -18px 40px -28px #000;
  }
  @supports (backdrop-filter: blur(6px)) {
    .tabbar { background: linear-gradient(180deg, rgba(4, 16, 46, 0.72), rgba(4, 16, 46, 0.94) 62%); backdrop-filter: blur(16px) saturate(1.2); }
  }

  .tabbar__row {
    display: grid; grid-template-columns: repeat(5, 1fr);
    align-items: end; gap: 0.1rem;
    max-inline-size: 34rem; margin-inline: auto;
  }

  /* --- A destination ---------------------------------------------------- */
  .tab {
    position: relative;
    display: grid; justify-items: center; gap: 0.22rem;
    padding: 0.45rem 0.2rem 0.3rem;
    min-block-size: 52px;                 /* comfortably over the 44px target */
    border-radius: var(--r-md);
    color: var(--t-dim); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
  }
  .tab:active { transform: scale(0.93); }
  .tab svg { inline-size: 23px; block-size: 23px; fill: none; stroke: currentColor;
             stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tab__label {
    font-family: var(--f-display); font-weight: 700;
    font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase;
    line-height: 1;
  }
  /* The active marker is a lit bulb, because of course it is. */
  .tab::after {
    content: ""; position: absolute; inset-block-start: 0.1rem;
    inline-size: 5px; block-size: 5px; border-radius: 50%;
    background: var(--c-sun);
    opacity: 0; scale: 0.3;
    transition: opacity var(--d-mid) var(--e-out), scale var(--d-mid) var(--e-pop);
  }
  .tab[aria-current="true"] { color: var(--c-sun); }
  .tab[aria-current="true"]::after { opacity: 1; scale: 1; box-shadow: 0 0 9px 1px rgba(255, 213, 42, 0.9); }

  /* --- The raised action ------------------------------------------------ */
  .tab--action {
    justify-items: center;
    margin-block-start: -1.5rem;
    color: #2A1A00;
  }
  .tab--action .tab__disc {
    display: grid; place-items: center;
    inline-size: 3.35rem; block-size: 3.35rem; border-radius: 50%;
    font-size: 1.4rem; line-height: 1;
    background: linear-gradient(180deg, var(--c-sun), var(--c-gold));
    border: 3px solid #04102E;
    box-shadow: 0 10px 24px -10px rgba(255, 181, 17, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform var(--d-fast) var(--e-pop), box-shadow var(--d-mid) var(--e-out);
  }
  .tab--action .tab__label { color: var(--c-gold); margin-block-start: 0.1rem; }
  .tab--action::after { display: none; }
  .tab--action:active .tab__disc { transform: scale(0.9); }

  /* Live: the disc cycles colour with the rest of party mode. */
  [data-show="on"] .tab--action .tab__disc {
    animation: tab-party 4.2s steps(1, end) infinite;
  }
  [data-show="on"] .tab--action .tab__label { color: var(--c-sun); }
  @keyframes tab-party {
    0%     { background: #FF3B30; box-shadow: 0 10px 26px -8px rgba(255,59,48,.95); }
    16.66% { background: #FFB511; box-shadow: 0 10px 26px -8px rgba(255,181,17,.95); }
    33.33% { background: #57D927; box-shadow: 0 10px 26px -8px rgba(87,217,39,.95); }
    50%    { background: #09BCEB; box-shadow: 0 10px 26px -8px rgba(9,188,235,.95); }
    66.66% { background: #F139B7; box-shadow: 0 10px 26px -8px rgba(241,57,183,.95); }
    83.33% { background: #FF6B16; box-shadow: 0 10px 26px -8px rgba(255,107,22,.95); }
  }

  /* --- Make room so the bar never covers the last of the page ----------- */
  body { padding-block-end: calc(4.9rem + env(safe-area-inset-bottom, 0px)); }

  /* The ambient dock rides above the bar and drops its CTA — the tab bar
     already has a Join destination, so two would be redundant. */
  .dock {
    inset-block-end: calc(5.3rem + env(safe-area-inset-bottom, 0px));
  }
  .dock .dock__cta, .dock .dock__rule { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tab:active, .tab--action:active .tab__disc { transform: none; }
}