/* Backseat's shared shell: design tokens, the floating glass top bar and the phone tab bar, used by every
   section (Videos and Movies & TV in index.html, Arcade in games/, the vault) so they read as one product. */
@font-face { font-family: 'Inter'; src: url('/assets/fonts/Inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --sh-bg: #050507;
  --sh-text: #f5f3ef;
  --sh-dim: rgba(245, 243, 239, .64);
  --sh-faint: rgba(245, 243, 239, .42);
  --sh-line: rgba(255, 255, 255, .1);
  --sh-line2: rgba(255, 255, 255, .18);
  --sh-glass: rgba(16, 16, 22, .5);
  --sh-glass-solid: rgba(10, 10, 14, .9);
  --sh-accent: #8b7bff;
  --sh-rose: #ff6b8b;
  --sh-amber: #ffc24b;
  --sh-grad: linear-gradient(100deg, #8b7bff 0%, #b06cf0 48%, #ff6b8b 100%);
  --sh-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --tb-h: 64px;
  --tb-gap: 12px;
}

.topbar {
  position: fixed; z-index: 100; top: var(--tb-gap); left: 16px; right: 16px; height: var(--tb-h);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 0 10px 0 12px;
  border-radius: 20px; background: var(--sh-glass); border: 1px solid var(--sh-line);
  -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .55); font-family: var(--sh-font); color: var(--sh-text); transition: background .25s;
}
.topbar.solid { background: var(--sh-glass-solid); }
.tb-start { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tb-brand {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 6px; border-radius: 14px; color: #fff;
  font-size: 22px; font-weight: 800; letter-spacing: -.7px; white-space: nowrap; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.tb-brand svg { width: 32px; height: 32px; flex: none; }
.tb-brand.pressing { transform: scale(.96); transition: transform 1.2s ease-in; }
.tb-switch { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--sh-line); }
.tb-switch a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px; color: var(--sh-dim);
  font-size: 15px; font-weight: 600; white-space: nowrap; transition: color .15s, background .15s, box-shadow .15s;
}
.tb-switch a:hover { color: #fff; }
.tb-switch a.on { color: #fff; background: linear-gradient(rgba(139, 123, 255, .26), rgba(139, 123, 255, .12)); box-shadow: inset 0 0 0 1px rgba(160, 146, 255, .6), 0 6px 20px -6px rgba(139, 123, 255, .6); }
.tb-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.tb-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.tb-icon:hover { background: rgba(255, 255, 255, .08); }
.tb-icon svg { width: 24px; height: 24px; }
.tb-avatar {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; margin-left: 2px;
  background: linear-gradient(135deg, #b4a8ff, #7a68f0); color: #fff; font: 700 16px var(--sh-font); cursor: pointer;
}
body.touch .tb-switch a { height: 50px; padding: 0 26px; font-size: 16px; }
body.touch .tb-icon { width: 52px; height: 52px; }

.tabbar { display: none; }

@media (max-width: 1100px) {
  .tb-switch a { padding: 0 16px; }
  .tb-brand span { display: none; }
}

@media (max-width: 760px) {
  :root { --tb-h: 56px; --tb-gap: 8px; }
  .topbar { left: 8px; right: 8px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 0 6px 0 8px; border-radius: 18px; }
  .tb-brand { font-size: 20px; }
  .tb-brand span { display: inline; }
  .tb-switch { display: none; }
  .tb-icon { width: 44px; height: 44px; }
  .tb-avatar { width: 38px; height: 38px; }
  .tabbar {
    position: fixed; z-index: 150; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 66px;
    display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 24px; background: rgba(16, 16, 22, .74);
    -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5); border: 1px solid var(--sh-line);
    box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .7); font-family: var(--sh-font);
  }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--sh-dim); font-size: 11.5px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
  .tabbar svg { width: 26px; height: 26px; }
  .tabbar a.on { color: #fff; }
  .tabbar a.on svg { color: #b4a8ff; filter: drop-shadow(0 0 8px rgba(139, 123, 255, .55)); }
  .tabbar a.on::after { content: ''; position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--sh-accent); }
}