/*
 * Shared game bottom bar — one identical two-button bar (🏠 Home + 🚪 Log out,
 * or 🔑 Sign in for guests) on every game page; the village map opts in to a
 * third 🏦 Bank button in the middle (data-game-bar="bank" → .game-bar--3). Markup is filled by
 * /js/game-bar.js into any <nav data-game-bar>. The doubled class beats each
 * page's legacy nav rules (.bottom-nav, .tm-bottomnav, .city-nav) so the bar
 * looks the same everywhere; pages keep their own show/hide (display) rules.
 */
:root{ --game-bar-h:64px; }
@media (max-height:600px) and (orientation:landscape){ :root{ --game-bar-h:52px; } }

nav.game-bar.game-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:600;
  grid-template-columns:repeat(2, minmax(0, 170px));
  justify-content:center; align-content:center; gap:14px;
  height:calc(var(--game-bar-h) + env(safe-area-inset-bottom, 0px));
  padding:6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
  background:linear-gradient(180deg,#1d6dc0,#185fb0);
  border-top:3px solid #f7c948; box-shadow:0 -4px 0 rgba(0,0,0,0.22);
  zoom:normal;
}
nav.game-bar.game-bar .gb-item{
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px;
  min-height:0; height:calc(var(--game-bar-h) - 16px); padding:0 14px;
  border:3px solid #7a3a00; border-radius:999px; box-sizing:border-box;
  background:linear-gradient(180deg,#fff8d6,#f3d57a);
  box-shadow:0 3px 0 rgba(0,0,0,0.3);
  color:#7a3a00; text-decoration:none; cursor:pointer;
  font:900 0.95rem/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing:0.03em;
  -webkit-tap-highlight-color:transparent; transition:transform .08s;
}
nav.game-bar.game-bar .gb-item:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,0.3); }
nav.game-bar.game-bar .gb-item:focus-visible{ outline:4px solid #fff; outline-offset:3px; }
nav.game-bar.game-bar .gb-icon{ font-size:1.35rem; line-height:1; }
nav.game-bar.game-bar .gb-out{ background:linear-gradient(180deg,#ffe1dc,#f6a99c); border-color:#8a1f12; color:#8a1f12; }
nav.game-bar.game-bar.game-bar--3{ grid-template-columns:repeat(3, minmax(0, 150px)); gap:10px; padding-left:10px; padding-right:10px; }
nav.game-bar.game-bar.game-bar--3 .gb-item{ padding:0 8px; gap:6px; white-space:nowrap; }
nav.game-bar.game-bar .gb-bank{ background:linear-gradient(180deg,#e2f7d9,#9fd98a); border-color:#1f5e14; color:#1f5e14; }
@media (max-width:360px){
  nav.game-bar.game-bar.game-bar--3{ gap:6px; padding-left:6px; padding-right:6px; }
  nav.game-bar.game-bar.game-bar--3 .gb-item{ font-size:0.85rem; padding:0 6px; }
}