/* The frame every tab shares: the tabs' boxes and the bottom bar (docs/santa.md section 1). Colours are the --santa-* tokens of
   public/theme.css. */
html, body { background: var(--santa-navy-deep); font-family: var(--santa-font); }

.santa-tab { position: fixed; inset: 0; box-sizing: border-box; overflow: hidden; }
.santa-tab[hidden] { display: none; }
/* Play keeps its own padding (game.css); the bar's room is left by the board. */
.santa-tab--play { height: auto; }

.santa-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  padding: 0 12px var(--santa-safe-bottom);
  background: linear-gradient(180deg, rgba(10, 19, 41, 0.72), rgba(10, 19, 41, 0.96));
  border-top: 1px solid var(--santa-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.santa-nav-bar { display: flex; height: var(--santa-nav-h); align-items: stretch; justify-content: space-around; max-width: 520px; margin: 0 auto; }
.santa-nav-btn {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; color: var(--santa-dim); font: 600 11px/1 var(--santa-font); letter-spacing: 0.04em;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s;
}
.santa-nav-btn::before {
  content: ""; position: absolute; top: 4px; left: 50%; width: 56px; height: 36px; transform: translateX(-50%);
  border: 1px solid rgba(255, 209, 107, 0.18); border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 209, 107, 0.15), rgba(255, 209, 107, 0.035));
  opacity: 0; transition: opacity .2s;
}
.santa-nav-btn::after {
  content: ""; position: absolute; top: -1px; left: 50%; width: 22px; height: 2px; transform: translateX(-50%);
  border-radius: 2px; background: var(--santa-gold); opacity: 0; transition: opacity .2s;
}
.santa-nav-btn[aria-selected="true"] { color: #ffe1a0; font-weight: 700; }
.santa-nav-btn[aria-selected="true"]::before, .santa-nav-btn[aria-selected="true"]::after { opacity: 1; }
.santa-nav-btn:focus-visible { outline: 2px solid var(--santa-gold); outline-offset: -4px; border-radius: 12px; }
.santa-nav-ic {
  position: relative; width: 34px; height: 34px;
  background: var(--santa-nav-icon) center / contain no-repeat;
  filter: saturate(.55) brightness(.8);
  transition: filter 0.25s, transform 0.2s;
}
.santa-nav-word { position: relative; }
.santa-nav-btn[aria-selected="true"] .santa-nav-ic { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); transform: translateY(-1px); }
.santa-nav-btn:active .santa-nav-ic { transform: scale(0.92); }

@media (prefers-reduced-motion: reduce) {
  .santa-nav-btn, .santa-nav-ic, .santa-nav-btn::before, .santa-nav-btn::after { transition: none; }
}