:root,
html[data-theme="dark"] {
  --bg: #17120f;
  --bg-soft: #211a16;
  --surface: rgba(48,38,31,.95);
  --surface-2: #342920;
  --surface-3: #3b2f26;
  --surface-solid: #2a211b;
  --surface-elevated: #3a2e25;
  --input: rgba(255,244,227,.055);
  --glass: rgba(31,24,20,.9);
  --line: rgba(236,217,192,.13);
  --line-strong: rgba(236,217,192,.22);
  --text: #f7eedf;
  --muted: #c9b9a3;
  --soft: #998875;
  --track: rgba(245,226,200,.08);
  --accent: #5f95c2;
  --accent-2: #8bb9dc;
  --accent-3: #bd8b62;
  --accent-soft: rgba(95,149,194,.15);
  --theme-color: #17120f;
}

html[data-theme="light"] {
  --bg: #f3ebdd;
  --bg-soft: #e8dcc9;
  --surface: rgba(255,250,241,.97);
  --surface-2: #fffaf2;
  --surface-3: #eadbc7;
  --surface-solid: #fffaf2;
  --surface-elevated: #fffdf8;
  --input: rgba(79,56,38,.055);
  --glass: rgba(247,238,225,.92);
  --line: rgba(82,61,44,.14);
  --line-strong: rgba(82,61,44,.24);
  --text: #2b211b;
  --muted: #66584c;
  --soft: #82705f;
  --track: rgba(80,58,40,.09);
  --accent: #2f6f9d;
  --accent-2: #4e8cb9;
  --accent-3: #976b49;
  --accent-soft: rgba(47,111,157,.12);
  --theme-color: #f3ebdd;
}

/* Final EyesPie visual directive: warm pastry neutrals with logo-eye blue accents. */
.ambient-waves {
  display: block !important;
  opacity: .30 !important;
  filter: saturate(.68) !important;
}
.auth-card::before,
.hero-card::before,
.hero-card::after,
.summary-card::before,
.summary-card::after,
.payment-gate.prize-glow::after {
  display: block !important;
  opacity: .48 !important;
}

.auth-card,
.hero-card,
.summary-card,
.action-card,
.host-card,
.category,
.leader-row,
.payment-gate,
.pool-strip,
.peer-vote-card,
.payout-card,
.wager-box,
.public-rule,
.public-mode {
  background-color: var(--surface-solid) !important;
}

.btn-primary {
  background: linear-gradient(125deg, var(--accent-3), color-mix(in srgb, var(--accent-3), var(--accent) 35%), var(--accent)) !important;
  color: #fff !important;
}
.peer-vote-choose { color: var(--accent) !important; }
.bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  background: var(--glass) !important;
  border-color: var(--line-strong) !important;
}

/* The app keeps a hidden sentinel so its render architecture stays stable. The
   interactive nav is cloned directly under body, outside every scroll/transform
   containing block, which keeps iOS Safari pinned to the visual viewport. */
#app > .bottom-nav.viewport-bottom-nav.viewport-nav-placeholder {
  display: none !important;
}
body > .bottom-nav.viewport-bottom-nav.body-viewport-nav {
  position: fixed !important;
  z-index: 1000 !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  transform: translateX(-50%) !important;
  width: min(520px, calc(100vw - 24px));
  margin: 0 !important;
}
body > .bottom-nav.viewport-bottom-nav.body-viewport-nav .host-only-disabled,
body > .bottom-nav.viewport-bottom-nav.body-viewport-nav [data-tab="host"]:disabled {
  opacity: .28 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: saturate(.25);
}
.game-shell .main { padding-bottom: calc(108px + env(safe-area-inset-bottom)) !important; }
body.game-active .global-legal { display: none !important; }

/* Skip layout/paint work for rows that are well below the viewport. */
.category,
.home-game-card,
.leader-row,
.album-item {
  content-visibility: auto;
}
.category { contain-intrinsic-size: auto 76px; }
.home-game-card { contain-intrinsic-size: auto 92px; }
.leader-row { contain-intrinsic-size: auto 76px; }
.album-item { contain-intrinsic-size: auto 240px; }

/* The landing/lobby keeps the ambient motion. During a long hunt, freeze the
   expensive full-screen blurred waves so scrolling stays on the compositor. */
body.game-active .ambient-wave {
  animation-play-state: paused !important;
}
body.game-active .ambient-waves {
  opacity: .14 !important;
}

@media (max-width: 760px) {
  body.game-active .game-top,
  body.game-active > .bottom-nav.viewport-bottom-nav.body-viewport-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.game-active .game-top { background: color-mix(in srgb, var(--surface-solid), transparent 2%) !important; }
  body.game-active > .bottom-nav.viewport-bottom-nav.body-viewport-nav { background: color-mix(in srgb, var(--surface-solid), transparent 4%) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-waves { opacity: .16 !important; }
}