/*
 * ALVIRAN Interactive Demo — Plugin CSS v3.2.0
 *
 * Architecture:
 *  - Design tokens defined on #alv-demo-app
 *  - Panel/overlay selectors scoped to #alvd-panel, #alvd-backdrop
 *  - All component selectors scoped to #alv-demo-app to prevent theme conflicts
 *  - No !important except where overriding theme styles is unavoidable
 *
 * Table of contents:
 *  1. Design tokens
 *  2. Backdrop overlay
 *  3. Panel shell
 *  4. Panel header
 *  5. Panel body (scroll container)
 *  6. Floating trigger button
 *  7. Step progress bar
 *  8. Demo card & scenes
 *  9. Step 1 — Game cards
 * 10. Step 1 — Config, skin preview, notes
 * 11. Step 2 — Chat
 * 12. Step 2 — Showcase / account preview
 * 13. Step 3 — Payment
 * 14. Step 4 — Delivered / credentials
 * 15. Confetti
 * 16. Navigation bar
 * 17. Final CTA link
 * 18. Shared utilities (badges, tags, animations)
 * 19. Responsive
 * 20. Reduced-motion
 */


/* ══════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   All component styles reference these variables.
══════════════════════════════════════════════════════════ */

#alv-demo-app {
  /* Backgrounds — aligned to homepage #0A0A0F dark scale */
  --bg-1:      #050508;
  --bg-2:      #0A0A0F;
  --bg-3:      #10100F;
  --bg-card:   rgba(255,255,255,.03);

  /* Borders */
  --border:       rgba(255,255,255,.06);
  --border-hover: rgba(255,255,255,.12);

  /* Brand colours — hardcoded with comments for theme sync.
     To override: set these on :root BEFORE this stylesheet loads. */
  --gold:         #F9C86C;
  --gold-dark:    #e5a63a;
  --purple:       #8B5CF6;
  --purple-light: #a78bfa;
  --green:        #34D399;
  --red:          #f87171;
  --blue:         #60A5FA;

  /* Text */
  --text:       #F3F1FA;
  --text-muted: #9CA3AF;
  --text-dim:   #6B6779;

  /* Shape */
  --radius:    16px;
  --radius-sm: 10px;

  /* Glass */
  --glass:        rgba(255,255,255,.03);
  --glass-border: rgba(255,255,255,.07);

  /* Easing */
  --ease: cubic-bezier(.4,0,.2,1);

  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  position: relative;
}


/* ══════════════════════════════════════════════════════════
   2. BACKDROP OVERLAY
══════════════════════════════════════════════════════════ */

#alvd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  /* Solid dark overlay — backdrop-filter:blur is the most expensive CSS property.
     Removed: saves ~3ms per frame on mid-range phones. */
  background: rgba(0,0,0,.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  display: none;
}

#alvd-backdrop.open {
  opacity: 1;
  pointer-events: auto;
  display: block;
}


/* ══════════════════════════════════════════════════════════
   3. PANEL SHELL
   Critical rules use !important to win the specificity war
   against WordPress theme CSS.
══════════════════════════════════════════════════════════ */

#alvd-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 580px;
  max-width: 100vw;
  z-index: 9999 !important;

  background: #0A0A0F !important;
  border-radius: 0 !important;
  clip-path: inset(0);
  overflow: hidden !important;
  box-shadow: -8px 0 60px rgba(0,0,0,.9) !important;
  border: none !important;
  border-left: 1px solid rgba(255,255,255,.07) !important;
  outline: none !important;

  display: none;
  flex-direction: column;

  transform: translateX(105%);
  transition: transform .42s cubic-bezier(.32,0,.2,1);

  /* GPU layer promotion — prevents panel animation from repainting page content */
  will-change: transform;
  /* Paint isolation — changes inside panel don't trigger page repaints */
  contain: layout style;

  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #F3F1FA;
  -webkit-font-smoothing: antialiased;
}

#alvd-panel.open {
  display: flex;
  transform: translateX(0);
}

/* Flex chain: panel → app root → body must all stretch */
#alvd-panel #alv-demo-app {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Remove standalone-page wrapper padding inside panel */
#alvd-panel .demo-wrap {
  padding: 0;
  margin: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Hide standalone-only elements inside panel */
#alvd-panel .demo-header,
#alvd-panel .demo-footer,
#alvd-panel .demo-bg {
  display: none;
}


/* ══════════════════════════════════════════════════════════
   4. PANEL HEADER
══════════════════════════════════════════════════════════ */

.alvd-ph {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  flex-shrink: 0;
}

.alvd-logo {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #F9C86C;
  text-transform: uppercase;
}

.alvd-logo small {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  opacity: .55;
  margin-left: 6px;
  color: #F3F1FA;
}

.alvd-example-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(249,200,108,.12);
  color: #F9C86C;
  border: 1px solid rgba(249,200,108,.25);
  margin-left: auto;
  margin-right: 10px;
  flex-shrink: 0;
}

.alvd-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: #9CA3AF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  flex-shrink: 0;
}

.alvd-close:hover {
  background: rgba(249,200,108,.12);
  color: #F9C86C;
  border-color: rgba(249,200,108,.4);
  transform: rotate(90deg);
}

.alvd-close:focus-visible {
  outline: 2px solid #F9C86C;
  outline-offset: 2px;
}

.alvd-close svg {
  width: 15px;
  height: 15px;
  pointer-events: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
}


/* ══════════════════════════════════════════════════════════
   5. PANEL BODY (scroll container)
══════════════════════════════════════════════════════════ */

.alvd-body {
  flex: 1;
  min-height: 0;           /* critical: allows flex child to scroll */
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

.alvd-body::-webkit-scrollbar        { width: 4px; }
.alvd-body::-webkit-scrollbar-track  { background: transparent; }
.alvd-body::-webkit-scrollbar-thumb  { background: rgba(249,200,108,.25); border-radius: 4px; }

/* Panel overrides for card & scenes */
.alvd-body .demo-card {
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(255,255,255,.05);
  box-shadow: none;
  background: transparent;
  min-height: auto;
  flex: none;
  animation: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.alvd-body .demo-scene { padding: 18px 22px; }
.alvd-body .demo-nav   { padding: 12px 22px; flex-shrink: 0; }

.alvd-body .scene-title { font-size: 18px; margin-bottom: 5px; }
.alvd-body .scene-desc  { font-size: 13px; margin-bottom: 12px; line-height: 1.5; }

.alvd-body .game-cards     { gap: 10px; margin-bottom: 12px; }
.alvd-body .game-card      { padding: 12px 8px; }
.alvd-body .game-card-icon { width: 38px; height: 38px; font-size: 13px; margin-bottom: 6px; }
.alvd-body .game-card-name { font-size: 12px; }
.alvd-body .game-card-tag  { font-size: 10px; }

/* Step 2: side-by-side in panel — chat fills its column, showcase fills its column */
.alvd-body .s2-layout { grid-template-columns: 1fr 1fr; gap: 10px; }
.alvd-body .chat-window { max-height: none; }
.alvd-body .chat-body   { min-height: 120px; max-height: 200px; }

/* Step bar — panel override */
.alvd-body .demo-steps-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  margin-bottom: 0;
  gap: 0;
  animation: none;
  flex-shrink: 0;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

.alvd-body .demo-step-pill { padding: 6px 10px; font-size: 11px; gap: 5px; flex-shrink: 1; min-width: 0; }
.alvd-body .demo-step-num  { width: 24px; height: 24px; font-size: 11px; }
.alvd-body .step-label-text { font-size: 11px; }
.alvd-body .demo-step-line { width: 20px; flex-shrink: 0; }

/* Per-scene scroll */
#alvd-panel .demo-scene {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#alvd-panel .demo-scene.active { display: flex; flex-direction: column; }
#alvd-panel .demo-scene::-webkit-scrollbar        { width: 3px; }
#alvd-panel .demo-scene::-webkit-scrollbar-track  { background: transparent; }
#alvd-panel .demo-scene::-webkit-scrollbar-thumb  { background: rgba(249,200,108,.2); border-radius: 3px; }

/* Panel compact overrides */
#alvd-panel .scene-label         { margin-bottom: 8px; font-size: 10px; padding: 3px 10px; }
#alvd-panel .chat-window         { margin-bottom: 10px; }
#alvd-panel .chat-body           { min-height: 0; max-height: 130px; overflow-y: auto; }
#alvd-panel .chat-msg-user       { display: none; } /* hide user bubbles to save space */
#alvd-panel .showcase-card       { margin-bottom: 6px; }
#alvd-panel .showcase-body       { padding: 10px 14px; }
#alvd-panel .showcase-row        { padding: 6px 0; font-size: 12px; }
#alvd-panel .showcase-skins      { padding: 8px 14px; gap: 5px; }
#alvd-panel .showcase-peek-btn   { margin-top: 8px; padding: 10px; font-size: 13px; }


/* ══════════════════════════════════════════════════════════
   6. FLOATING TRIGGER BUTTON  (v3.1 redesign)
   all: unset — kills every inherited theme property.
   transform locked with !important on EVERY state so
   WordPress button:hover { transform: translateY(-2px) }
   can never move this element.
══════════════════════════════════════════════════════════ */

/* Keyframes for the floating button */
@keyframes alvFloatY {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 4px)); }
}

/* alvGlowBorder removed — was cycling purple↔gold, now float btn uses gold only */

/* alvShimmer removed — saved 1 background-position Paint thread */

@keyframes alvIconPulseBtn {
  /* opacity-only: Compositor-safe — no Paint, no Layout */
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

/* ID selector — beats theme class-selectors without !important */
#alvd-float-btn {
  all: unset;

  position: fixed !important;
  right: 0 !important;
  top: 50% !important;
  z-index: 99998 !important;

  /* Float only — no color-cycling animation (performance) */
  animation: alvFloatY 3.5s ease-in-out infinite !important;

  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;

  padding: 12px 20px 12px 12px;
  border-radius: 16px 0 0 16px;
  background: linear-gradient(135deg, #0f0d12 0%, #1a1620 100%);
  border: 1.5px solid rgba(249,200,108,.28);
  border-right: none;

  cursor: pointer;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;

  will-change: transform;
  opacity: 1;
  box-sizing: border-box;
  overflow: hidden;

  transition: background .25s ease, opacity .3s ease;
}

/* ALL interactive states */
#alvd-float-btn:hover,
#alvd-float-btn:active,
#alvd-float-btn:focus,
#alvd-float-btn:focus-visible,
#alvd-float-btn:focus-within {
  text-decoration: none;
  outline: none;
}

#alvd-float-btn:hover {
  background: linear-gradient(135deg, #141214 0%, #1e1b20 100%);
}

#alvd-float-btn:active {
  background: linear-gradient(135deg, #0c0b0d 0%, #161316 100%);
}

#alvd-float-btn:focus-visible {
  outline: 2px solid rgba(249,200,108,.8) !important;
  outline-offset: 3px !important;
}

/* Icon block — gradient square with play symbol */
.alvd-float-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #C8A84B, #F9C86C) !important;
  animation: alvIconPulseBtn 3s ease-in-out infinite !important;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.alvd-float-icon svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

/* Text stack — main label + subtitle */
/* Text stack */
.alvd-float-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.alvd-float-label {
  display: block;
  white-space: nowrap;
  color: #F3F1FA;
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  letter-spacing: 0.1px;
  line-height: 1.1;
  text-transform: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

.alvd-float-sub {
  display: block;
  white-space: nowrap;
  color: rgba(249,200,108,.7);
  font-size: clamp(8px, 1.5vw, 9px);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

/* Shimmer element hidden — decoration not worth the Paint cost */
.alvd-float-shimmer {
  display: none !important;
}

/* Left-edge variant */
#alvd-float-btn.alvd-float-btn--left {
  right: auto !important;
  left: 0 !important;
  border-radius: 0 16px 16px 0;
  border: 1.5px solid rgba(249,200,108,.28);
  border-left: none;
  padding: 12px 12px 12px 20px;
}

#alvd-float-btn.alvd-float-btn--left:hover,
#alvd-float-btn.alvd-float-btn--left:active,
#alvd-float-btn.alvd-float-btn--left:focus,
#alvd-float-btn.alvd-float-btn--left:focus-visible {
  outline: none;
}


/* ── Nudge: Achievement Card (C Lite) ─────────────────── */

/* Button shake — triggered before nudge appears */
@keyframes alvBtnShake {
  0%, 100% { transform: translateY(-50%); }
  15%      { transform: translateY(-50%) translateX(-2px); }
  30%      { transform: translateY(-50%) translateX(2px); }
  45%      { transform: translateY(-50%) translateX(-1px); }
  60%      { transform: translateY(-50%); }
}

.alvd-float-btn--shake {
  animation: alvBtnShake .5s ease !important;
}

/* Card slide-up */
@keyframes alvNudgeSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Badge pop */
@keyframes alvNudgeBadgePop {
  0%   { transform: scale(.85); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Progress bar fill */
@keyframes alvNudgeFill {
  /* scaleX instead of width — Compositor-only, no Layout pass */
  from { transform: scaleX(0); }
  to   { transform: scaleX(.25); }
}

#alvd-nudge {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  z-index: 99997;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.32,0,.2,1);
  width: 300px;
  max-width: calc(100vw - 32px);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#alvd-nudge.alvd-nudge--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Card container */
.alvd-nudge-card {
  background: linear-gradient(160deg, #0f0e10 0%, #141314 100%);
  border: 1px solid rgba(249,200,108,.15);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 12px 40px rgba(0,0,0,.6),
    0 0 0 0.5px rgba(249,200,108,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Top row: badge + info */
.alvd-nudge-top {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px 12px;
}

/* Purple badge with play icon */
.alvd-nudge-badge {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #C8A84B, #F9C86C);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .4s cubic-bezier(.17,.67,.27,1.15);
}

.alvd-nudge-badge svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.alvd-nudge-badge--pop {
  animation: alvNudgeBadgePop .4s cubic-bezier(.17,.67,.27,1.15) both;
}

/* Info area */
.alvd-nudge-info {
  flex: 1;
  min-width: 0;
}

.alvd-nudge-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(249,200,108,.55);
  margin-bottom: 1px;
}

.alvd-nudge-title {
  font-size: 14px;
  font-weight: 800;
  color: #F3F1FA;
  line-height: 1.2;
}

.alvd-nudge-sub {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  margin-top: 1px;
}

/* Progress row */
.alvd-nudge-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 10px;
}

.alvd-nudge-prog-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.05);
  border-radius: 2px;
  overflow: hidden;
}

.alvd-nudge-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, #C8A84B, #F9C86C);
  border-radius: 2px;
  /* Full track width — scaleX controls visible portion */
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.4,0,.2,1);
}

.alvd-nudge-prog-fill--run {
  animation: alvNudgeFill 1s cubic-bezier(.4,0,.2,1) forwards;
}

.alvd-nudge-prog-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(249,200,108,.5);
  white-space: nowrap;
}

/* Steps grid */
.alvd-nudge-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(249,200,108,.08);
}

.alvd-nudge-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px 8px;
  background: #0f0e10;
}

.alvd-nudge-step--active {
  background: rgba(249,200,108,.05);
}

.alvd-nudge-step-num {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.3);
}

.alvd-nudge-step--active .alvd-nudge-step-num {
  background: linear-gradient(135deg, #C8A84B, #F9C86C);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.alvd-nudge-step-name {
  font-size: 8px;
  font-weight: 600;
  color: rgba(255,255,255,.25);
}

.alvd-nudge-step--active .alvd-nudge-step-name {
  color: rgba(249,200,108,.7);
}

/* Gold CTA button at bottom */
.alvd-nudge-cta {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px;
  background: linear-gradient(135deg, #F9C86C, #e5a63a);
  color: #0A0A0F;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
  letter-spacing: .3px;
  text-align: center;
  box-sizing: border-box;
  transition: filter .2s ease;
}

.alvd-nudge-cta:hover {
  filter: brightness(1.08);
}

.alvd-nudge-cta svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Close X on nudge card — minimal, no background */
.alvd-nudge-close {
  all: unset;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  color: rgba(255,255,255,.2);
  transition: color .2s ease;
}

.alvd-nudge-close:hover {
  color: rgba(255,255,255,.5);
}

.alvd-nudge-close svg {
  width: 10px;
  height: 10px;
  pointer-events: none;
}

/* No arrow needed — card is bottom-center, not beside button */
#alvd-nudge::after { display: none; }

/* Left/right nudge position classes unused — always bottom-center */

/* Button hidden state — class-based, not inline style */
.alvd-float-btn--hidden {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════
   7. STEP PROGRESS BAR
══════════════════════════════════════════════════════════ */

#alv-demo-app .demo-steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 0;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

#alv-demo-app .demo-step-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  transition: all .4s var(--ease);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  font-family: inherit;
}

#alv-demo-app .demo-step-pill:hover        { color: var(--text-muted); }
#alv-demo-app .demo-step-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 999px; }

#alv-demo-app .demo-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  transition: all .4s var(--ease);
  flex-shrink: 0;
}

#alv-demo-app .demo-step-pill.active {
  color: var(--gold);
  background: rgba(249,200,108,.06);
}

#alv-demo-app .demo-step-pill.active .demo-step-num {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-color: var(--gold);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  box-shadow: 0 0 14px rgba(249,200,108,.3);
}

#alv-demo-app .demo-step-pill.done { color: var(--green); }

#alv-demo-app .demo-step-pill.done .demo-step-num {
  background: rgba(52,211,153,.15);
  border-color: rgba(52,211,153,.3);
  color: var(--green);
}

#alv-demo-app .demo-step-line {
  width: 28px;
  height: 2px;
  background: rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

#alv-demo-app .demo-step-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green), var(--gold));
  border-radius: 2px;
  transition: width .5s ease;
}

#alv-demo-app .demo-step-line.filled::after { width: 100%; }


/* ══════════════════════════════════════════════════════════
   8. DEMO CARD & SCENES
══════════════════════════════════════════════════════════ */

#alv-demo-app .demo-card {
  background: linear-gradient(160deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.008) 100%);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 12px 48px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
  min-height: 460px;
  animation: alvFadeUp .6s var(--ease) .2s both;
}

/* Gold-only top edge — no purple */
#alv-demo-app .demo-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249,200,108,.18), transparent);
}

#alv-demo-app .demo-scene {
  display: none;
  padding: 36px;
  opacity: 0;
}

#alv-demo-app .demo-scene.active {
  display: block;
  animation: alvSceneIn .38s var(--ease) both;
}

@keyframes alvSceneIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

#alv-demo-app .scene-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* Colored dot inside scene-label */
#alv-demo-app .scene-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

#alv-demo-app .scene-label-purple .scene-dot { background: var(--purple-light); }
#alv-demo-app .scene-label-gold   .scene-dot { background: var(--gold); }
#alv-demo-app .scene-label-green  .scene-dot { background: var(--green); }
#alv-demo-app .scene-label-blue   .scene-dot { background: var(--blue); }

#alv-demo-app .scene-label-purple { background: rgba(139,92,246,.12); color: var(--purple-light); }
#alv-demo-app .scene-label-gold   { background: rgba(249,200,108,.12); color: var(--gold); }
#alv-demo-app .scene-label-green  { background: rgba(52,211,153,.12);  color: var(--green); }
#alv-demo-app .scene-label-blue   { background: rgba(96,165,250,.12);  color: var(--blue); }

#alv-demo-app .scene-title { font-size: clamp(16px, 3vw, 22px); font-weight: 800; margin-bottom: 6px; letter-spacing: -.3px; }
#alv-demo-app .scene-desc  { font-size: clamp(12px, 2vw, 14px); color: var(--text-muted); margin-bottom: 24px; line-height: 1.6; }


/* ══════════════════════════════════════════════════════════
   9. STEP 1 — GAME CARDS
══════════════════════════════════════════════════════════ */

#alv-demo-app .game-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

#alv-demo-app .game-card {
  position: relative;
  background: rgba(255,255,255,.02);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 14px;
  text-align: center;
  cursor: pointer;
  transition: all .4s var(--ease);
  overflow: hidden;
}

#alv-demo-app .game-card:hover        { border-color: var(--border-hover); transform: translateY(-2px); }
#alv-demo-app .game-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

#alv-demo-app .game-card.active {
  border-color: var(--gold);
  background: rgba(200,168,75,.04);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(200,168,75,.15);
}

#alv-demo-app .game-card-glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}

#alv-demo-app .game-card.active .game-card-glow { opacity: 1; }

#alv-demo-app .val-glow { background: radial-gradient(circle at 50% 20%, rgba(255,70,85,.18) 0%, transparent 65%); }
#alv-demo-app .r6-glow  { background: radial-gradient(circle at 50% 20%, rgba(74,158,218,.18) 0%, transparent 65%); }
#alv-demo-app .fn-glow  { background: radial-gradient(circle at 50% 20%, rgba(157,77,187,.18) 0%, transparent 65%); }

#alv-demo-app .game-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  position: relative;
  z-index: 1;
  transition: transform .3s var(--ease);
}

#alv-demo-app .game-card:hover .game-card-icon { transform: scale(1.08); }
#alv-demo-app .game-card.active .game-card-icon { transform: scale(1.04); }

#alv-demo-app .game-card-icon.val { background: linear-gradient(145deg, #1a0810, #2d0e18); box-shadow: 0 4px 20px rgba(255,70,85,.3), inset 0 1px 0 rgba(255,100,110,.2); }
#alv-demo-app .game-card-icon.r6  { background: linear-gradient(145deg, #081018, #0e1e2d); box-shadow: 0 4px 20px rgba(74,158,218,.3), inset 0 1px 0 rgba(100,170,220,.2); }
#alv-demo-app .game-card-icon.fn  { background: linear-gradient(145deg, #130a1c, #0a141c); box-shadow: 0 4px 20px rgba(157,77,187,.3), inset 0 1px 0 rgba(180,100,220,.2); }

#alv-demo-app .game-card-icon svg { display: block; }

#alv-demo-app .game-card-name { font-size: 14px; font-weight: 700; position: relative; z-index: 1; margin-bottom: 2px; }
#alv-demo-app .game-card-tag  { font-size: 11px; color: var(--text-dim); position: relative; z-index: 1; }

#alv-demo-app .game-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.5);
  transition: all .3s var(--ease);
}

#alv-demo-app .game-card-check svg { width: 12px; height: 12px; stroke: #0A0A0F; fill: none; stroke-width: 3; }
#alv-demo-app .game-card.active .game-card-check { opacity: 1; transform: scale(1); }


/* ══════════════════════════════════════════════════════════
   10. STEP 1 — CONFIG, SKIN PREVIEW, NOTES
══════════════════════════════════════════════════════════ */

#alv-demo-app .config-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

#alv-demo-app .config-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

#alv-demo-app .config-field select {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 32px 12px 14px;
  outline: none;
  transition: border-color .3s, box-shadow .3s, background .3s;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  /* Custom chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

#alv-demo-app .config-field select option { background: #1a1825; color: var(--text); }
#alv-demo-app .config-field select:focus  { border-color: var(--gold); background-color: rgba(249,200,108,.04); box-shadow: 0 0 0 3px rgba(249,200,108,.1); }

#alv-demo-app .skin-preview        { margin-bottom: 12px; }
#alv-demo-app .skin-preview-label  { font-size: 11px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
#alv-demo-app .skin-preview-tags   { display: flex; gap: 6px; flex-wrap: wrap; }

/* Staggered tag entrance */
#alv-demo-app .skin-preview-tags .skin-tag                  { animation: alvTagPop .3s var(--ease) both; }
#alv-demo-app .skin-preview-tags .skin-tag:nth-child(2)     { animation-delay: .05s; }
#alv-demo-app .skin-preview-tags .skin-tag:nth-child(3)     { animation-delay: .10s; }
#alv-demo-app .skin-preview-tags .skin-tag:nth-child(4)     { animation-delay: .15s; }
#alv-demo-app .skin-preview-tags .skin-tag:nth-child(5)     { animation-delay: .20s; }

#alv-demo-app .builder-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

#alv-demo-app .builder-field textarea {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 14px;
  outline: none;
  transition: border-color .3s, box-shadow .3s, background .3s;
  resize: none;
  min-height: 56px;
  line-height: 1.5;
  box-sizing: border-box;
}

#alv-demo-app .builder-full { grid-column: 1 / -1; }

#alv-demo-app .step1-bottom {
  margin-top: 14px;
}

/* Combined trust banner */
#alv-demo-app .trust-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  flex-wrap: wrap;
}

#alv-demo-app .trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

#alv-demo-app .trust-item--green { color: var(--green); }
#alv-demo-app .trust-item--gold  { color: var(--gold); }

#alv-demo-app .trust-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

#alv-demo-app .trust-dot--pulse {
  background: var(--green);
  animation: alvBlink 1.5s ease-in-out infinite;
}

#alv-demo-app .trust-sep {
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}

#alv-demo-app .no-pay-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(52,211,153,.06);
  border: 1px solid rgba(52,211,153,.12);
}


/* ══════════════════════════════════════════════════════════
   11. STEP 2 — CHAT
══════════════════════════════════════════════════════════ */

#alv-demo-app .chat-window {
  background: rgba(0,0,0,.2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 20px;
}

#alv-demo-app .chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}

#alv-demo-app .chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--purple-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: .5px;
}

/* P2: gold ALV avatar */
#alv-demo-app .chat-avatar--alv {
  background: linear-gradient(135deg, #8b6914, #c8a84b);
  color: #0a080e;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .8px;
}

#alv-demo-app .chat-header-info h4   { font-size: 13px; font-weight: 700; }
#alv-demo-app .chat-header-info span { font-size: 11px; color: var(--green); }

#alv-demo-app .chat-body {
  padding: 18px;
  min-height: 180px;
  max-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

#alv-demo-app .chat-body::-webkit-scrollbar       { width: 3px; }
#alv-demo-app .chat-body::-webkit-scrollbar-track  { background: transparent; }
#alv-demo-app .chat-body::-webkit-scrollbar-thumb  { background: rgba(200,168,75,.3); border-radius: 3px; }
#alv-demo-app .chat-body::-webkit-scrollbar-thumb:hover { background: rgba(200,168,75,.55); }

#alv-demo-app .chat-msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  animation: alvMsgPop .35s var(--ease) forwards;
}

#alv-demo-app .chat-msg-system {
  align-self: flex-start;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-muted);
  border-bottom-left-radius: 4px;
}

#alv-demo-app .chat-msg-user {
  align-self: flex-end;
  background: rgba(249,200,108,.1);
  border: 1px solid rgba(249,200,108,.15);
  color: var(--gold);
  border-bottom-right-radius: 4px;
}

#alv-demo-app .chat-msg-admin {
  align-self: flex-start;
  background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.15);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

@keyframes alvMsgPop {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#alv-demo-app .chat-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  padding: 0 18px 14px;
}

#alv-demo-app .typing-dots               { display: flex; gap: 3px; }
#alv-demo-app .typing-dots span          { width: 6px; height: 6px; border-radius: 50%; background: rgba(249,200,108,.5); opacity: .4; animation: alvTypeDot 1.2s ease-in-out infinite; }
#alv-demo-app .typing-dots span:nth-child(2) { animation-delay: .15s; }
#alv-demo-app .typing-dots span:nth-child(3) { animation-delay: .30s; }

@keyframes alvTypeDot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-4px); }
}


/* ── Step 2 side-by-side layout ────────────────────────── */
#alv-demo-app .s2-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

#alv-demo-app .s2-chat     { display: flex; flex-direction: column; }
#alv-demo-app .s2-showcase { display: flex; flex-direction: column; gap: 8px; }

/* Rank hero — dominant gold element */
#alv-demo-app .showcase-rank-hero {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(200,168,75,.04);
}

#alv-demo-app .showcase-rank-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(200,168,75,.55);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 2px;
}

#alv-demo-app .showcase-rank-value {
  font-size: 20px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -.2px;
  line-height: 1;
}

/* Showcase card */
#alv-demo-app .showcase-wrap { position: relative; }

#alv-demo-app .showcase-card {
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .3s var(--ease);
  /* Glassmorphism — aligns with homepage .panel style */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#alv-demo-app .showcase-card:hover { border-color: var(--border-hover); }

#alv-demo-app .showcase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}

#alv-demo-app .showcase-game-badge { display: flex; align-items: center; gap: 8px; }

#alv-demo-app .showcase-game-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  flex-shrink: 0; color: #fff;
}

#alv-demo-app .showcase-game-icon.val { background: linear-gradient(135deg, #ff4655, #fd4556); }
#alv-demo-app .showcase-game-icon.r6  { background: linear-gradient(135deg, #2e6ea6, #4a9eda); }
#alv-demo-app .showcase-game-icon.fn  { background: linear-gradient(135deg, #9d4dbb, #00c8ff); }

#alv-demo-app .showcase-game-name { font-size: 12px; font-weight: 700; }
#alv-demo-app .showcase-game-sub  { font-size: 10px; color: var(--text-dim); }

#alv-demo-app .showcase-verified {
  display: flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600; color: var(--green);
  padding: 3px 8px; border-radius: 999px;
  background: rgba(52,211,153,.08);
  white-space: nowrap;
}

#alv-demo-app .showcase-body { padding: 10px 14px; position: relative; }

#alv-demo-app .showcase-blur {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  transition: filter .5s var(--ease);
}

#alv-demo-app .showcase-blur.revealed { filter: none; pointer-events: auto; }

#alv-demo-app .showcase-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 12px;
}

#alv-demo-app .showcase-row:last-child { border: none; }
#alv-demo-app .showcase-lbl         { color: var(--text-dim); font-weight: 500; }
#alv-demo-app .showcase-val         { color: var(--text); font-weight: 600; }
#alv-demo-app .showcase-val.gold    { color: var(--gold); }
#alv-demo-app .showcase-val--ready  { color: var(--green); font-weight: 700; }

#alv-demo-app .showcase-skins {
  display: flex; gap: 5px; flex-wrap: wrap;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

/* Single reveal CTA — no lock overlay */
#alv-demo-app .showcase-peek-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px;
  width: 100%;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: rgba(249,200,108,.07);
  color: var(--gold);
  border: 1px solid rgba(249,200,108,.16);
  transition: all .3s var(--ease);
}

#alv-demo-app .showcase-peek-btn:hover {
  background: rgba(249,200,108,.13);
  transform: translateY(-1px);
}

#alv-demo-app .showcase-peek-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#alv-demo-app .showcase-peek-btn svg           { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }


/* ══════════════════════════════════════════════════════════
   13. STEP 3 — PAYMENT
══════════════════════════════════════════════════════════ */

/* Price hero — dominant, full-width, commands attention */
#alv-demo-app .pay-hero {
  background: rgba(200,168,75,.05);
  border: 1px solid rgba(200,168,75,.15);
  border-radius: var(--radius);
  padding: 22px 20px 18px;
  text-align: center;
  margin-bottom: 16px;
}

#alv-demo-app .pay-hero-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}

#alv-demo-app .pay-hero-price {
  font-size: clamp(36px, 8vw, 48px);
  font-weight: 900;
  color: var(--gold);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 16px;
}

/* Horizontal feature chips */
#alv-demo-app .pay-hero-features {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

#alv-demo-app .pay-feat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
}

#alv-demo-app .pay-feat-chip svg {
  width: 12px; height: 12px;
  stroke: var(--green); fill: none; stroke-width: 2; flex-shrink: 0;
}

/* Payment buttons — full-width Stripe first, side-by-side secondary */
#alv-demo-app .pay-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

#alv-demo-app .pay-btns-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#alv-demo-app .pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all .3s var(--ease);
}

#alv-demo-app .pay-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

#alv-demo-app .pay-btn-stripe  { background: linear-gradient(135deg, #635BFF, #7B73FF); color: #fff; border: none; }
#alv-demo-app .pay-btn-stripe:hover  { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,91,255,.35); }
#alv-demo-app .pay-btn-paypal  { background: rgba(0,112,186,.08); color: #60A5FA; border-color: rgba(0,112,186,.2); font-size: 13px; }
#alv-demo-app .pay-btn-paypal:hover  { background: rgba(0,112,186,.15); }
#alv-demo-app .pay-btn-crypto  { background: rgba(200,168,75,.06); color: var(--gold); border-color: rgba(200,168,75,.15); font-size: 13px; }
#alv-demo-app .pay-btn-crypto:hover  { background: rgba(200,168,75,.12); }

#alv-demo-app .pay-trust {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.5;
}

#alv-demo-app .pay-trust svg {
  width: 11px; height: 11px;
  vertical-align: -2px;
  stroke: var(--green); fill: none; stroke-width: 2;
  margin-right: 3px;
}

#alv-demo-app .pay-disclaimer {
  opacity: .6;
  font-style: italic;
}


/* ══════════════════════════════════════════════════════════
   14. STEP 4 — DELIVERED / CREDENTIALS
══════════════════════════════════════════════════════════ */

#alv-demo-app .delivered-card {
  background: rgba(52,211,153,.04);
  border: 1px solid rgba(52,211,153,.12);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

#alv-demo-app .delivered-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative; /* needed for ::after ripple */
}

/* Ripple via transform+opacity on pseudo-element — Compositor-only (was box-shadow = Paint) */
#alv-demo-app .delivered-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(52,211,153,.35);
  animation: alvIconPulse 2s ease-in-out infinite;
}

@keyframes alvIconPulse {
  0%, 100% { transform: scale(1);   opacity: .6; }
  50%       { transform: scale(1.25); opacity: 0; }
}

#alv-demo-app .delivered-icon svg { width: 22px; height: 22px; stroke: var(--green); fill: none; stroke-width: 2.5; }

#alv-demo-app .delivered-title { font-size: 17px; font-weight: 800; color: var(--green); }

/* CTA sits right after delivered-card */
#alv-demo-app .demo-final-cta { margin-bottom: 16px; }

/* Section label before cred grid */
#alv-demo-app .cred-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

#alv-demo-app .cred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Base cred-box */
#alv-demo-app .cred-box {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  text-align: left;
  position: relative;
  overflow: hidden;
  animation: alvCredReveal .5s var(--ease) both;
}

#alv-demo-app .cred-box:nth-child(2) { animation-delay: .06s; }
#alv-demo-app .cred-box:nth-child(3) { animation-delay: .12s; }
#alv-demo-app .cred-box:nth-child(4) { animation-delay: .18s; }
#alv-demo-app .cred-box:nth-child(5) { animation-delay: .24s; }
#alv-demo-app .cred-box:nth-child(6) { animation-delay: .30s; }

@keyframes alvCredReveal {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Meta boxes (Game, Rank, Skins, In-Game) — subtle */
#alv-demo-app .cred-box--meta {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
}

/* Highlight boxes (Email, Password) — gold-accented, prominent */
#alv-demo-app .cred-box--highlight {
  background: rgba(200,168,75,.05);
  border: 1px solid rgba(200,168,75,.25);
}

#alv-demo-app .cred-box--highlight .cred-label {
  color: rgba(200,168,75,.7);
}

#alv-demo-app .cred-box--highlight .cred-value {
  color: #e8d28a;
}

#alv-demo-app .cred-label { font-size: 10px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px; }
#alv-demo-app .cred-value { font-size: 13px; font-weight: 600; color: var(--text); font-family: 'Courier New', monospace; word-break: break-all; }

#alv-demo-app .cred-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 5px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  color: var(--text-dim);
}

#alv-demo-app .cred-copy:hover        { background: rgba(200,168,75,.1); color: var(--gold); border-color: rgba(200,168,75,.2); }
#alv-demo-app .cred-copy:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#alv-demo-app .cred-copy svg          { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }


/* ══════════════════════════════════════════════════════════
   15. CONFETTI
══════════════════════════════════════════════════════════ */

#alv-demo-app .confetti-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}

#alv-demo-app .confetti {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation: alvConfetti 2.5s ease-out forwards;
}

@keyframes alvConfetti {
  0%   { transform: translateY(-20px) rotate(0deg);    opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg);  opacity: 0; }
}


/* ══════════════════════════════════════════════════════════
   16. NAVIGATION BAR
══════════════════════════════════════════════════════════ */

#alv-demo-app .demo-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 36px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.15);
}

#alv-demo-app .nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .3s var(--ease);
  border: none;
}

#alv-demo-app .nav-btn-back { background: rgba(255,255,255,.04); color: var(--text-muted); border: 1px solid var(--border); }
#alv-demo-app .nav-btn-back:hover { background: rgba(255,255,255,.08); color: var(--text); }

#alv-demo-app .nav-btn-next {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #0A0A0F;
  box-shadow: 0 4px 16px rgba(249,200,108,.25);
}

#alv-demo-app .nav-btn-next:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(249,200,108,.35); }
#alv-demo-app .nav-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
#alv-demo-app .nav-btn svg          { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; }
#alv-demo-app .nav-btn:disabled     { opacity: .3; cursor: not-allowed; transform: none; }
#alv-demo-app .nav-progress         { font-size: 12px; color: var(--text-dim); font-weight: 600; }


/* ══════════════════════════════════════════════════════════
   17. FINAL CTA LINK
══════════════════════════════════════════════════════════ */

.demo-final-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 14px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #F9C86C, #e5a63a);
  color: #0A0A0F;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(249,200,108,.25);
  transition: all .3s var(--ease);
  font-family: inherit;
}

.demo-final-cta:hover        { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(249,200,108,.4); }
.demo-final-cta:focus-visible { outline: 2px solid #0A0A0F; outline-offset: 3px; }
.demo-final-cta svg          { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; }


/* ══════════════════════════════════════════════════════════
   18. SHARED UTILITIES
══════════════════════════════════════════════════════════ */

/* Skin tag pill — gold-tinted to match homepage */
#alv-demo-app .skin-tag {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(249,200,108,.08);
  color: var(--gold);
  border: 1px solid rgba(249,200,108,.14);
}

/* Live badge */
#alv-demo-app .live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(52,211,153,.08);
  color: var(--green);
  border: 1px solid rgba(52,211,153,.15);
  animation: alvPulse 2s ease-in-out infinite;
}

#alv-demo-app .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: alvBlink 1.5s ease-in-out infinite;
}

/* Spinning loader (payment processing) */
@keyframes alvSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Shared keyframes */
@keyframes alvBlink    { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes alvPulse    { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
@keyframes alvTagPop   { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes alvFadeUp   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* Ambient background blobs */
#alv-demo-app .demo-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

#alv-demo-app .demo-bg::before {
  content: "";
  position: absolute;
  top: -30%; left: -10%;
  width: 55%; height: 55%;
  background: radial-gradient(circle, rgba(139,92,246,.07) 0%, transparent 70%);
  filter: blur(80px);
  animation: alvBlobA 20s ease-in-out infinite;
}

#alv-demo-app .demo-bg::after {
  content: "";
  position: absolute;
  bottom: -20%; right: -10%;
  width: 50%; height: 50%;
  background: radial-gradient(circle, rgba(249,200,108,.05) 0%, transparent 70%);
  filter: blur(80px);
  animation: alvBlobB 25s ease-in-out infinite;
}

/* Performance: pause blob animations when panel is closed */
#alvd-panel:not(.open) .demo-bg::before,
#alvd-panel:not(.open) .demo-bg::after {
  animation-play-state: paused;
}

@keyframes alvBlobA { 0%, 100% { transform: translate(0, 0); }  50% { transform: translate(5%, 8%); } }
@keyframes alvBlobB { 0%, 100% { transform: translate(0, 0); }  50% { transform: translate(-4%, -6%); } }

/* Standalone page wrapper */
#alv-demo-app .demo-wrap { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 40px 20px 60px; }


/* ══════════════════════════════════════════════════════════
   19. RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Mobile: bottom sheet panel ──────────────────────────
   Panel slides up from bottom. Float button becomes a
   compact icon-pill anchored bottom-right.
─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* Panel: full-width bottom sheet */
  #alvd-panel {
    width: 100vw !important;
    max-height: 88vh;
    border-radius: 14px 14px 0 0 !important;
    clip-path: none !important;
    border-left: none !important;
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    transform: translateY(102%) !important;
  }

  #alvd-panel.open { transform: translateY(0) !important; }

  /* Float button — smaller on mobile */
  #alvd-float-btn {
    padding: 9px 14px 9px 9px !important;
    gap: 8px !important;
    border-radius: 12px 0 0 12px !important;
  }

  .alvd-float-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
  }

  .alvd-float-icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  .alvd-float-label { font-size: 11px !important; }
  .alvd-float-sub   { font-size: 8px !important; letter-spacing: 1px !important; }

  /* Nudge — already bottom-center, just adjust spacing and width */
  #alvd-nudge { bottom: 16px !important; width: 280px !important; }
  .alvd-nudge-title { font-size: 13px !important; }
  .alvd-nudge-badge { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 10px !important; }
  .alvd-nudge-badge svg { width: 16px !important; height: 16px !important; }
  .alvd-nudge-cta { font-size: 11px !important; padding: 10px !important; }

  /* Panel header — tighter on mobile */
  .alvd-ph { padding: 12px 16px; }
  .alvd-logo { font-size: 12px; letter-spacing: 2px; }
  .alvd-example-badge { font-size: 9px; padding: 2px 8px; }
  .alvd-close { width: 30px; height: 30px; }

  /* Step bar — numbers only, no labels, tighter */
  .alvd-body .demo-steps-bar { padding: 10px 14px 0; }
  .alvd-body .demo-step-pill { padding: 5px 7px; gap: 4px; }
  .alvd-body .demo-step-num  { width: 22px; height: 22px; font-size: 10px; }
  .alvd-body .step-label-text { display: none; }
  .alvd-body .demo-step-line { width: 14px; }

  /* Scenes — reduced padding */
  .alvd-body .demo-scene { padding: 14px 16px; }

  /* Scene labels — smaller */
  #alvd-panel .scene-label { font-size: 9px; padding: 2px 8px; margin-bottom: 6px; }

  /* Scene titles & desc — handled by clamp() in base styles */
  /* .scene-title and .scene-desc font-sizes removed from here */

  /* Game cards — 3-col stays but tighter */
  .alvd-body .game-cards     { gap: 7px; margin-bottom: 10px; }
  .alvd-body .game-card      { padding: 10px 6px; border-radius: 10px; }
  .alvd-body .game-card-icon { width: 32px; height: 32px; font-size: 11px; margin-bottom: 5px; border-radius: 10px; }
  .alvd-body .game-card-name { font-size: 11px; }
  .alvd-body .game-card-tag  { font-size: 9px; }
  .alvd-body .game-card-check { width: 16px; height: 16px; top: 5px; right: 5px; }

  /* Config selects — stacked */
  .alvd-body .config-row { grid-template-columns: 1fr; gap: 8px; margin-bottom: 10px; }
  .alvd-body .config-field select { font-size: 13px; padding: 9px 28px 9px 11px; }
  .alvd-body .config-field label  { font-size: 10px; }

  /* Skin preview — smaller tags */
  .alvd-body .skin-preview { margin-bottom: 8px; }
  .alvd-body .skin-preview-label { font-size: 10px; }
  #alvd-panel .skin-tag { font-size: 10px; padding: 3px 8px; }

  /* Notes textarea — shorter */
  .alvd-body .builder-field textarea { min-height: 40px; font-size: 12px; padding: 8px 10px; }
  .alvd-body .builder-field label { font-size: 10px; }

  /* Step 1 bottom badges */
  .alvd-body .step1-bottom { margin-top: 10px; gap: 8px; }
  .alvd-body .live-badge   { font-size: 11px; padding: 4px 10px; }
  .alvd-body .no-pay-badge { font-size: 11px; padding: 4px 10px; }

  /* Step 2 — stack on mobile */
  .alvd-body .s2-layout         { grid-template-columns: 1fr; gap: 8px; }
  .alvd-body .showcase-rank-value { font-size: 18px; }
  #alvd-panel .showcase-rank-hero { padding: 10px 12px 8px; }
  #alvd-panel .showcase-header  { padding: 10px 12px; }
  #alvd-panel .showcase-body    { padding: 8px 12px; }
  #alvd-panel .showcase-row     { padding: 5px 0; font-size: 11px; }
  #alvd-panel .showcase-skins   { padding: 6px 12px; gap: 4px; }
  #alvd-panel .showcase-peek-btn { padding: 9px; font-size: 12px; }

  /* Chat — tighter, more space for showcase */
  .alvd-body .chat-window  { margin-bottom: 0; }
  .alvd-body .chat-body    { max-height: 110px; min-height: 70px; padding: 10px 12px; gap: 7px; }
  #alvd-panel .chat-header { padding: 10px 14px; }
  .alvd-body .chat-msg     { font-size: 12px; padding: 8px 11px; }
  #alvd-panel .chat-msg-user { display: none; }

  /* Showcase card — compact */
  .alvd-body .showcase-card  { margin-bottom: 4px; }
  #alvd-panel .showcase-header { padding: 11px 14px; }
  #alvd-panel .showcase-game-icon { width: 28px; height: 28px; font-size: 12px; border-radius: 7px; }
  #alvd-panel .showcase-game-name { font-size: 13px; }
  #alvd-panel .showcase-game-sub  { font-size: 10px; }
  #alvd-panel .showcase-body  { padding: 8px 12px; }
  #alvd-panel .showcase-row   { padding: 5px 0; font-size: 11px; }
  #alvd-panel .showcase-skins { padding: 6px 12px; gap: 4px; }
  #alvd-panel .showcase-peek-btn { margin-top: 6px; padding: 9px; font-size: 12px; }

  /* Payment — stacked layout */
  .alvd-body .pay-layout    { grid-template-columns: 1fr; gap: 12px; }
  .alvd-body .pay-total-box { padding: 14px; }
  .alvd-body .pay-total-value { font-size: 26px; }
  .alvd-body .pay-total-label { font-size: 11px; }
  .alvd-body .alvd-disclaimer { font-size: 10px; padding: 5px 8px; }
  .alvd-body .pay-features  { grid-template-columns: 1fr 1fr; gap: 6px; }
  .alvd-body .pay-feat      { font-size: 10px; padding: 7px 8px; }
  .alvd-body .pay-btn       { padding: 12px; font-size: 13px; }
  .alvd-body .pay-trust     { font-size: 10px; }

  /* Delivered / Credentials */
  .alvd-body .delivered-card  { padding: 16px; margin-bottom: 14px; }
  .alvd-body .delivered-icon  { width: 44px; height: 44px; }
  .alvd-body .delivered-icon svg { width: 22px; height: 22px; }
  .alvd-body .delivered-title { font-size: 15px; }
  .alvd-body .delivered-sub   { font-size: 12px; }
  .alvd-body .cred-grid       { grid-template-columns: 1fr 1fr; gap: 8px; }
  .alvd-body .cred-box        { padding: 10px; }
  .alvd-body .cred-label      { font-size: 9px; }
  .alvd-body .cred-value      { font-size: 12px; }
  .alvd-body .cred-copy       { width: 24px; height: 24px; top: 7px; right: 7px; }
  .alvd-body .cred-copy svg   { width: 12px; height: 12px; }
  .demo-final-cta             { font-size: 13px; padding: 12px 16px; margin-top: 10px; }

  /* Nav bar — tighter */
  .alvd-body .demo-nav { padding: 10px 14px; }
  .alvd-body .nav-btn  { padding: 9px 14px; font-size: 12px; gap: 5px; }
  .alvd-body .nav-btn svg { width: 13px; height: 13px; }
  .alvd-body .nav-progress { font-size: 11px; }
}

/* ── Very small phones (≤380px) ───────────────────────── */
@media (max-width: 380px) {
  .alvd-float-label { font-size: 10px !important; }
  .alvd-float-sub   { display: none !important; }
  .alvd-float-btn   { padding: 8px 10px 8px 8px !important; }

  .alvd-body .game-cards { gap: 5px; }
  .alvd-body .game-card  { padding: 8px 4px; }
  .alvd-body .cred-grid  { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════
   20. REDUCED MOTION
   Must come last to override all animation declarations.
══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  #alv-demo-app *,
  #alvd-panel,
  #alvd-backdrop,
  .alvd-float-btn,
  .alvd-float-btn--shake,
  .alvd-float-icon,
  .alvd-float-shimmer,
  #alvd-nudge,
  .alvd-nudge-badge,
  .alvd-nudge-badge--pop,
  .alvd-nudge-prog-fill,
  .alvd-nudge-prog-fill--run,
  .demo-final-cta {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}