/* ══════════════════════════════════════════════════════════════════════
   DEMO — the always-on "this is a mock" banner, plus the offsets it forces
   on the dashboard chrome it sits above. Everything else on this page is
   the real dashboard.css, so the展示 stays honest to the product.
   ══════════════════════════════════════════════════════════════════════ */

:root { --demo-banner-h: 46px; }

.demo-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200;                       /* above the sidebar (999) and topbar (50) */
  display: flex;
  align-items: center;
  gap: 12px;
  height: calc(var(--demo-banner-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 1rem 0;
  background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--accent-line);
  font-size: 13px;
  color: var(--text-dim);
}
.demo-banner strong { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.demo-banner-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  flex-shrink: 0;
}
.demo-banner-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-banner-cta {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}
.demo-banner-cta:hover { color: var(--text-main); }
.demo-banner-back {
  display: none;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  color: var(--text-dim);
  flex-shrink: 0;
}

/* Shift the dashboard chrome down so the banner never covers it. */
.glass-sidebar {
  top: calc(var(--demo-banner-h) + env(safe-area-inset-top));
  height: calc(100vh - var(--demo-banner-h) - env(safe-area-inset-top));
}
.glass-main { padding-top: calc(2.5rem + var(--demo-banner-h) + env(safe-area-inset-top)); }
.dashboard-topbar { top: calc(var(--demo-banner-h) + env(safe-area-inset-top)); }
.sidebar-overlay { top: calc(var(--demo-banner-h) + env(safe-area-inset-top)); }

@media (max-width: 1024px) {
  .demo-banner-text { display: none; }
  .demo-banner-back { display: inline-flex; }
  .glass-main { padding-top: calc(1rem + var(--demo-banner-h) + env(safe-area-inset-top)); }
}

@media (max-width: 480px) {
  .demo-banner { font-size: 12px; gap: 9px; }
  .demo-banner-cta { font-size: 12px; }
}

/* Static arcade cards on this page — no bets, so the CTA replaces 開始. */
.demo-arcade-note {
  margin-top: auto;
  padding-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}