/* ============================================================================
   tryit-real.css — softbet.io wrapper for the embedded Baited.gg demo.
   Provides the dark shell that frames `.bsg-demo` (the scoped Baited zone)
   plus the inner game-chip strip and boot state styling.
   The actual game/admin/theme styling lives inside styles-scoped.css.
   ============================================================================ */

/* Hide any panel whose [hidden] attribute is set. Markup ships admin + theme
   with [hidden] so they don't flash stacked before JS runs; JS toggles hidden
   to switch panels — this rule must NOT key on data-panel or it will keep
   panels hidden even after JS un-hides them. */
#tryit-section .tryit-panel[hidden] { display: none !important; }

.bsg-shell {
  margin-top: 18px;
  background: #0a0d12;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-module);
  overflow: hidden;
  position: relative;
}
.bsg-shell::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, #22e58a, transparent);
  animation: bsgSweep 5s linear infinite;
}
@keyframes bsgSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.bsg-shellbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
.bsg-stamp {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
}

/* Inner game-chip strip (Dice / Plinko / Mines / Blackjack / Keno) */
.bsg-gamechips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bsg-gamechip {
  appearance: none; cursor: pointer;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s var(--ease-out-back);
}
.bsg-gamechip:hover { color: #fff; transform: translateY(-1px); }
.bsg-gamechip[aria-pressed="true"] {
  background: #22e58a; color: #06080b; border-color: #22e58a;
}

/* The actual mount target — host the scoped Baited zone. The .bsg-demo class
   triggers all the scoped CSS rules; we add a min-height so games have room
   to render before their useEffect callbacks measure the wrapper. */
.bsg-game-host,
.bsg-admin-host,
.bsg-theme-host {
  background: #0d1015;
  color: #fff;
  min-height: 540px;
  padding: 14px;
  font-family: 'Sora', system-ui, sans-serif;
}
.bsg-game-host { padding: 0; min-height: 720px; }
.bsg-admin-host { padding: 22px; }
.bsg-theme-host { padding: 18px; }

.bsg-boot {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.5);
}
.bsg-boot::before {
  content: ''; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22e58a;
  margin-right: 10px;
  animation: bsgBootPulse 1.2s ease-in-out infinite;
}
@keyframes bsgBootPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* On narrow viewports, stack the chip strip below the stamp */
@media (max-width: 720px) {
  .bsg-shellbar { flex-direction: column; align-items: flex-start; }
  .bsg-game-host { min-height: 880px; }
}