/* appnav.css — bottom section-navigation bar shared by the burgundy "section" screens
   (WINE ME GAMES entry / WINE ME COMMUNITY / DAILY QUIZ / WINE ACADEMY). Lets the player
   jump straight between sections without going back to the dashboard first.

   z-index 324 sits ABOVE the four section overlays (community 308 / entry 310 / quiz 322)
   but BELOW every modal/dialog (legal 326, settings 328, age-gate 330, community modals 340,
   wine modal 400, level-up 500+) so those still cover the bar when they open. */
/* A floating, rounded "pill" bar (Instagram-style), icon-only, detached from the screen edges.
   #appNav is a transparent full-width wrapper that centres the pill; the pill itself (.appnav-row)
   carries the background, gold border and rounding. pointer-events let taps fall through the
   transparent side gutters to the screen behind. */
#appNav{
  position:fixed; left:0; right:0; z-index:324;
  bottom:calc(12px + env(safe-area-inset-bottom,0px));
  display:none; justify-content:center;      /* revealed with .show; centres the pill */
  padding:0 14px; pointer-events:none;
}
#appNav.show{display:flex}
/* While the on-screen keyboard is open the resized viewport would park the bar right on top of
   it — hide it for the duration (class toggled by the keyboard watcher in appnav.js). */
#appNav.kb-hidden{display:none!important}

.appnav-row{
  pointer-events:auto;
  display:flex; width:100%; max-width:440px;
  justify-content:space-around; align-items:center; gap:2px;
  background:rgba(58,7,22,0.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:2px solid #e8d5a0; border-radius:34px;   /* rounded pill; border colour = WINE ME GAMES frame */
  box-shadow:0 8px 26px rgba(0,0,0,0.45);
  padding:5px 8px;
}
.appnav-btn{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:center;
  padding:0; background:none; border:none; cursor:pointer;
  color:#f3e9d2; -webkit-tap-highlight-color:transparent;
  transition:opacity .15s;
}
/* Icons sit straight on the bar — no chip/background. The star and grape art is muted, so those
   two render as clean white glyphs; the red jeton keeps its own colour (a casino chip reads well
   on the burgundy); the mystère icon is already white art with a burgundy "?", so it is NOT
   whitened (that would erase the "?"). */
/* Fixed round box for every icon so the active-state ring is a clean circle and switching tabs
   doesn't shift layout. Sized (52px) to fit the tallest icon — the 44px mystère bottle — with a
   little margin, so the ring never forces the bottle to shrink. */
.appnav-ic{
  position:relative;                       /* anchor for the .appnav-badge counter */
  width:52px; height:52px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  border:2px solid transparent; border-radius:50%;
  transition:background .15s, border-color .15s, transform .12s;
}
/* "New activity" counter on the Community bottle — white number in a red circle (messenger-style).
   Created/updated by wmNavSetBadge(); cream ring separates it from the dark bar. */
.appnav-badge{
  position:absolute; top:-1px; right:-3px;
  min-width:18px; height:18px; box-sizing:border-box; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  background:#c62828; color:#fff;
  font-size:10px; font-weight:700; line-height:1; letter-spacing:0;
  border-radius:9px; border:1.5px solid #f3e9d2;
  pointer-events:none;
}
.appnav-ic img{ height:28px; width:auto; max-width:34px; object-fit:contain; display:block }
.appnav-btn[data-section="quiz"] .appnav-ic img{ height:26px }        /* star reads better a touch smaller */
/* mystère is a tall, narrow bottle — its width is small, so height carries the visible size. */
.appnav-btn[data-section="community"] .appnav-ic img{ height:44px; max-width:34px }
.appnav-btn[data-section="academy"] .appnav-ic img{ height:34px }     /* grape — 20% larger */
.appnav-btn[data-section="quiz"] .appnav-ic img,
.appnav-btn[data-section="academy"] .appnav-ic img{ filter:brightness(0) invert(1) }
.appnav-ic svg{ width:26px; height:26px; display:block; stroke:currentColor } /* Profile line icon */
.appnav-btn:active .appnav-ic{ transform:scale(0.90) }
.appnav-btn:not(.active){ opacity:.5 }                               /* dim inactive tabs */
.appnav-btn.active{ opacity:1; color:#f0d492 }
/* Active icon gets a round gold frame (matches the pill border). */
.appnav-btn.active .appnav-ic{ border-color:#e8d5a0; background:rgba(232,213,160,0.14) }

/* Dashboard ("home") state: the bar is present but faded to ~50%; only the active section's
   icon stays prominent (~90%). Faded per-part (not a parent opacity) so the active circle
   can sit ABOVE the panel's own translucency. `.faded` reuses the same translucent look on
   content-heavy sub-screens (e.g. the vins-mystères list) so the solid bar stops distracting. */
#appNav.home .appnav-row,
#appNav.faded .appnav-row{
  background:rgba(58,7,22,0.5);          /* panel translucent, but the gold border keeps full density */
  box-shadow:0 8px 22px rgba(0,0,0,0.20);
}
#appNav.home .appnav-btn,
#appNav.faded .appnav-btn{ opacity:0.5 }
#appNav.home .appnav-btn.active,
#appNav.faded .appnav-btn.active{ opacity:0.9 }
#appNav.home .appnav-btn.active .appnav-ic svg{ stroke:#fff }   /* Profile icon white; its cream ring stays */

/* Give the scrollable screens room at the bottom so their content clears the fixed bar — the bar
   itself floats above the home-indicator inset, so the clearance grows by the same inset.
   (entry-overlay already reserves padding-bottom:100px.) */
.community-overlay,
.community-overlay.community-hub-overlay,
.quiz-overlay{ padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)) }
/* (.dash-overlay carries this clearance on its inner scroller .dash-scroll — screens.css.) */