/**
 * RC6.1 — Optional premium site/ecosystem UI skin (meta modals only).
 * Enable: VITE_PREMIUM_UI_SKIN=true — does not alter slot stage/reels.
 */
body.premium-ui-skin {
  --premium-panel-bg: linear-gradient(165deg, rgba(12, 18, 36, 0.96), rgba(24, 12, 48, 0.94));
  --premium-panel-border: rgba(120, 200, 255, 0.35);
  --premium-glow: 0 0 24px rgba(56, 189, 248, 0.22);
}

body.premium-ui-skin .showcase-topbar {
  background: linear-gradient(90deg, rgba(8, 12, 28, 0.92), rgba(18, 8, 32, 0.88));
  border-bottom: 1px solid var(--premium-panel-border);
  box-shadow: var(--premium-glow);
}

body.premium-ui-skin .showcase-sidebar {
  background: linear-gradient(180deg, rgba(10, 14, 32, 0.95), rgba(20, 10, 36, 0.92));
  border-right: 1px solid var(--premium-panel-border);
}

body.premium-ui-skin .slot-modal-card,
body.premium-ui-skin .beta-profile-card,
body.premium-ui-skin .beta-auth-card,
body.premium-ui-skin .player-settings-modal .slot-modal-card,
body.premium-ui-skin .slot-info-modal-card {
  background: var(--premium-panel-bg);
  border: 1px solid var(--premium-panel-border);
  box-shadow: var(--premium-glow), 0 20px 48px rgba(0, 0, 0, 0.55);
}

body.premium-ui-skin .showcase-wallet-btn,
body.premium-ui-skin .showcase-account-btn {
  border-color: rgba(56, 189, 248, 0.45);
}

body.premium-ui-skin .cat-room-modal-card {
  border: 1px solid var(--premium-panel-border);
  box-shadow: var(--premium-glow);
}

body.premium-ui-skin .beta-frame-swatch.is-active {
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.65);
}

/* Site mock preview route helper */
.premium-site-mock {
  min-height: 100vh;
  padding: 2rem;
  background: radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.08), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(168, 85, 247, 0.1), transparent 45%),
    #0a0e1a;
  color: #e2e8f0;
}

.premium-site-mock__panel {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid rgba(120, 200, 255, 0.35);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(12, 18, 36, 0.96), rgba(24, 12, 48, 0.94));
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.22);
}

.premium-site-mock__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.premium-site-mock__tile {
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  text-align: center;
}