/*!
 * Slot Demo Engine — base styles.
 * Uses CSS custom properties from the host theme so each brand re-skins automatically.
 * Themes only need to expose: --brand, --brand-light, --brand-deep, --accent,
 * --bg-deep, --elev1, --elev2, --border, --ink, --ink-muted, --success, --r-sm, --r-md.
 *
 * If host theme doesn't set them, fallbacks below keep the widget legible.
 */

.slot-demo {
  --de-bg:       var(--bg-deep, #0c0518);
  --de-surface: var(--elev1, #1a1428);
  --de-surface-2: var(--elev2, #271542);
  --de-border:  var(--border, #38284f);
  --de-ink:     var(--ink, #f5f3ff);
  --de-ink-2:   var(--ink-muted, #877dab);
  --de-brand:   var(--brand, #7c3aed);
  --de-brand-light: var(--brand-light, #c4b5fd);
  --de-brand-deep:  var(--brand-deep, #4c1d95);
  --de-accent:  var(--accent, #f59e0b);
  --de-success: var(--success, #22c55e);
  --de-r-sm:    var(--r-sm, 6px);
  --de-r-md:    var(--r-md, 10px);
  --de-r-lg:    var(--r-lg, 14px);

  background: linear-gradient(180deg, var(--de-surface), var(--de-bg));
  border: 1px solid var(--de-border);
  border-radius: var(--de-r-lg);
  padding: 18px;
  margin: 16px 0 24px;
  position: relative;
}
.slot-demo .slot-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.slot-demo .slot-balance, .slot-demo .slot-stake, .slot-demo .slot-win {
  background: var(--de-bg);
  border: 1px solid var(--de-border);
  border-radius: var(--de-r-sm);
  padding: 8px 14px;
  font-size: .82rem;
  color: var(--de-ink);
}
.slot-demo .slot-balance .label, .slot-demo .slot-stake .label, .slot-demo .slot-win .label {
  display: block; font-size: .62rem;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--de-ink-2);
  margin-bottom: 2px;
}
.slot-demo .slot-balance .value { color: var(--de-success); font-weight: 800; font-size: 1.05rem; }
.slot-demo .slot-stake .value { color: var(--de-brand-light); font-weight: 800; font-size: 1.05rem; }
.slot-demo .slot-win .value { color: var(--de-brand-light); font-weight: 800; font-size: 1.05rem; }
.slot-demo .slot-win.win .value {
  color: var(--de-success);
  animation: cozy-pulse 600ms ease 2;
}
@keyframes cozy-pulse { 50% { transform: scale(1.15); } }

.slot-demo .reels {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  background: var(--de-bg);
  padding: 8px;
  border-radius: var(--de-r-md);
  border: 1px solid var(--de-border);
  margin-bottom: 14px;
}
.slot-demo .reel { display: grid; grid-template-rows: repeat(3, 1fr); gap: 4px; min-height: 240px; }
.slot-demo .symbol {
  display: flex; align-items: center; justify-content: center;
  background: var(--de-surface-2);
  border-radius: var(--de-r-sm);
  font-size: 1.6rem; font-weight: 900;
  color: var(--de-brand-light);
  aspect-ratio: 1;
  transition: transform 200ms, background 200ms;
}

/* ── Mobile responsive — tighter spacing, shorter reels, smaller symbols ── */
@media (max-width: 559px) {
  .slot-demo { padding: 12px; margin: 12px 0 18px; }
  .slot-demo .slot-header { gap: 6px; margin-bottom: 10px; }
  .slot-demo .slot-balance, .slot-demo .slot-stake, .slot-demo .slot-win {
    padding: 6px 10px; font-size: .74rem;
  }
  .slot-demo .slot-balance .label, .slot-demo .slot-stake .label, .slot-demo .slot-win .label { font-size: .56rem; }
  .slot-demo .slot-balance .value, .slot-demo .slot-stake .value, .slot-demo .slot-win .value { font-size: .92rem; }
  .slot-demo .reels { padding: 6px; gap: 3px; margin-bottom: 10px; }
  .slot-demo .reel { gap: 3px; min-height: 180px; }
  .slot-demo .symbol { font-size: 1.15rem; }
  .slot-demo .btn-spin { padding: 12px 14px; font-size: .92rem; min-width: 120px; }
  .slot-demo .stake-adj button { width: 32px; height: 32px; font-size: 1rem; }
  .slot-demo .slot-disclaimer { font-size: .66rem; }
}
@media (max-width: 379px) {
  .slot-demo { padding: 10px; }
  .slot-demo .reel { min-height: 150px; }
  .slot-demo .symbol { font-size: 1rem; }
  .slot-demo .reels { padding: 5px; gap: 2px; }
  .slot-demo .reel { gap: 2px; }
}
.slot-demo .symbol.win {
  background: linear-gradient(135deg, var(--de-brand-light), var(--de-brand));
  color: #0c0518;
  box-shadow: 0 0 12px var(--de-brand);
}

.slot-demo .spin-controls {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.slot-demo .btn-spin {
  flex: 1; min-width: 140px;
  padding: 14px 18px;
  background: linear-gradient(180deg, var(--de-brand-light), var(--de-brand));
  color: #0c0518;
  border: 0;
  border-radius: 999px;
  font-size: 1rem; font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--de-brand) 35%, transparent);
  cursor: pointer;
}
.slot-demo .btn-spin:disabled { opacity: .5; cursor: wait; }
.slot-demo .stake-adj { display: flex; gap: 6px; align-items: center; }
.slot-demo .stake-adj button {
  width: 36px; height: 36px;
  background: var(--de-surface);
  border: 1px solid var(--de-border);
  border-radius: var(--de-r-md);
  color: var(--de-brand-light);
  font-size: 1.2rem; font-weight: 900;
  cursor: pointer;
}

.slot-demo .slot-disclaimer {
  margin-top: 12px;
  font-size: .72rem; color: var(--de-ink-2); text-align: center;
}

.slot-demo .slot-real-link {
  display: block;
  margin-top: 12px;
  padding: 14px 18px;
  background: var(--de-accent);
  color: #0c0518;
  border-radius: var(--de-r-md);
  font-size: .94rem; font-weight: 900;
  text-align: center; text-decoration: none;
  letter-spacing: .02em;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--de-accent) 35%, transparent);
  transition: transform 140ms, box-shadow 140ms;
}
.slot-demo .slot-real-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--de-accent) 45%, transparent);
}

.slot-demo .slot-no-demo {
  margin-top: 12px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--de-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--de-accent) 40%, transparent);
  border-radius: var(--de-r-md);
  font-size: .88rem; color: var(--de-ink);
  text-align: center;
  line-height: 1.55;
}

/* ── Try-embed trigger button (small, dashed, below the real-play CTA) ── */
.slot-demo .slot-embed-trigger {
  display: block; width: 100%;
  margin-top: 8px; padding: 10px 14px;
  background: transparent;
  border: 1.5px dashed var(--de-border);
  border-radius: var(--de-r-md);
  font-size: .8rem; font-weight: 700;
  color: var(--de-ink-2); cursor: pointer;
  transition: border-color 140ms, color 140ms, background 140ms;
}
.slot-demo .slot-embed-trigger:hover {
  border-color: var(--de-brand);
  color: var(--de-brand-light);
  background: var(--de-surface);
}

/* Embed area (iframe lives here when user clicks try-embed) */
.slot-demo .slot-embed-area {
  margin-top: 14px;
  border: 1px solid var(--de-border);
  border-radius: var(--de-r-md);
  overflow: hidden;
  background: var(--de-bg);
  position: relative;
}
.slot-demo .slot-embed-status {
  padding: 14px 18px;
  font-size: .88rem; color: var(--de-ink-2);
  background: var(--de-surface);
  border-bottom: 1px solid var(--de-border);
  line-height: 1.55;
}
.slot-demo .slot-embed-status.blocked {
  color: var(--de-ink);
  background: color-mix(in srgb, var(--de-accent) 15%, var(--de-surface));
}
.slot-demo .slot-embed-status.blocked strong { color: var(--de-accent); display: block; margin-bottom: 4px; }
.slot-demo .slot-embed-status code {
  background: var(--de-bg);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: .82rem;
  color: var(--de-brand-light);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.slot-demo .slot-embed-iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  border: 0;
  background: var(--de-bg);
}
.slot-demo .slot-embed-close {
  display: block; width: 100%;
  padding: 11px 14px;
  background: var(--de-surface);
  border: 0;
  border-top: 1px solid var(--de-border);
  font-size: .82rem; font-weight: 700;
  color: var(--de-ink-2);
  cursor: pointer;
}
.slot-demo .slot-embed-close:hover { color: var(--de-brand-light); background: var(--de-surface-2); }