/*
 * wizard-design-polish.css
 * Design refinements for the Playmade wizard flow.
 * Drop-in override — link AFTER the inline <style> or at end of <head>.
 */

/* ═══════════════════════════════════════════════
   1. TYPOGRAPHY — Use the already-loaded display font
   ═══════════════════════════════════════════════ */

.wz-heading {
  font-family: 'Fredoka One', -apple-system, system-ui, sans-serif;
  letter-spacing: -0.01em;
}

.wz-curate-heading {
  font-family: 'Fredoka One', -apple-system, system-ui, sans-serif;
}

/* Soften the sub-headings with a slightly warmer weight */
.wz-sub {
  color: rgba(255, 255, 255, 0.52);
  font-weight: 400;
}

/* Labels get a touch more presence */
.wz-label {
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.09em;
}

/* Next button — ensure the font matches the playful tone */
#wz-next {
  font-family: 'Fredoka One', -apple-system, system-ui, sans-serif;
  font-weight: 400; /* Fredoka One only has one weight */
  letter-spacing: 0.02em;
}

#wz-play-btn {
  font-family: 'Fredoka One', -apple-system, system-ui, sans-serif;
  font-weight: 400;
}


/* ═══════════════════════════════════════════════
   2. BACKGROUND DEPTH — Break the flat void
   ═══════════════════════════════════════════════ */

/* Subtle radial glow behind the wizard */
#wizard {
  background:
    radial-gradient(ellipse 80% 50% at 50% 20%, rgba(108, 92, 231, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(253, 121, 168, 0.05) 0%, transparent 60%),
    var(--bg);
}

/* Noise texture overlay for tactile depth */
#wizard::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Ensure step content renders above the noise layer */
.wz-step {
  z-index: 1;
}

#wz-navbar {
  z-index: 150; /* keep above noise */
}


/* ═══════════════════════════════════════════════
   3. STEPS 1 & 2 — Add visual warmth
   ═══════════════════════════════════════════════ */

/* Decorative ambient glow behind the input area */
#wz-step-1::before,
#wz-step-2::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.12) 0%, transparent 70%);
  top: 18%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  animation: ambientPulse 6s ease-in-out infinite alternate;
}

@keyframes ambientPulse {
  0%   { opacity: 0.6; transform: translateX(-50%) scale(1); }
  100% { opacity: 1;   transform: translateX(-50%) scale(1.15); }
}


/* ═══════════════════════════════════════════════
   4. PROGRESS BAR — More presence
   ═══════════════════════════════════════════════ */

#wz-progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
}

#wz-progress-fill {
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 60%, var(--accent) 100%);
  box-shadow: 0 0 12px rgba(162, 155, 254, 0.4);
}

/* Step counter — slightly more visible */
#wz-step-counter {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.82rem;
}


/* ═══════════════════════════════════════════════
   5. DOTS — Livelier active state
   ═══════════════════════════════════════════════ */

.wz-dot.active {
  background: linear-gradient(90deg, var(--primary-light), var(--accent));
  box-shadow: 0 0 8px rgba(162, 155, 254, 0.35);
}


/* ═══════════════════════════════════════════════
   6. NEXT BUTTON — Fix shadow & add gradient
   ═══════════════════════════════════════════════ */

#wz-next:not(:disabled) {
  background: linear-gradient(135deg, var(--primary) 0%, #8B7CF6 100%);
  box-shadow:
    0 4px 20px rgba(108, 92, 231, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

#wz-next:not(:disabled):hover {
  box-shadow:
    0 6px 28px rgba(108, 92, 231, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

/* Disabled state: keep it muted but not invisible */
#wz-next:disabled {
  opacity: 0.38;
  background: rgba(108, 92, 231, 0.4);
}


/* ═══════════════════════════════════════════════
   7. INPUT FIELDS — Warmer focus state
   ═══════════════════════════════════════════════ */

.wz-input:focus {
  border-color: var(--primary-light);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(162, 155, 254, 0.12);
}

/* Step 2: Large topic textarea */
.wz-topic-textarea {
  resize: none;
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1.5;
  min-height: 130px;
  padding: 16px 18px;
}

.wz-field-topic {
  max-width: 480px;
}


/* ═══════════════════════════════════════════════
   8. TILES (Step 3) — Richer selected state
   ═══════════════════════════════════════════════ */

.wz-tile.selected {
  border-color: var(--primary-light);
  background: rgba(108, 92, 231, 0.14);
  box-shadow: 0 0 0 1px rgba(162, 155, 254, 0.15), 0 4px 16px rgba(108, 92, 231, 0.12);
}

.wz-tile-icon {
  transition: background 0.2s, transform 0.2s;
}

.wz-tile.selected .wz-tile-icon {
  background: rgba(108, 92, 231, 0.3);
  transform: scale(1.05);
}


/* ═══════════════════════════════════════════════
   9. PLAY BUTTON (Step 6) — Richer gradient
   ═══════════════════════════════════════════════ */

#wz-play-btn {
  background: linear-gradient(135deg, #FD79A8 0%, #e84393 100%);
  box-shadow:
    0 4px 24px rgba(253, 121, 168, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.12) inset;
}


/* ═══════════════════════════════════════════════
   10. STEP 6 CURATE HEADER — Solid backdrop so cards don't bleed through
   ═══════════════════════════════════════════════ */

/* Navbar needs a solid bg so cards don't scroll behind it on step 6 */
#wz-navbar {
  background: var(--bg);
}

.wz-curate-header {
  background: var(--bg);
  padding-bottom: 14px;
  z-index: 110;
  /* Extend bg full-width using box-shadow — no layout side effects */
  box-shadow:
    -100vw 0 0 0 var(--bg),
     100vw 0 0 0 var(--bg),
    /* soft fade below */
    0 12px 16px -4px var(--bg);
}


/* ═══════════════════════════════════════════════
   10b. STEP 6 CARD CHECKMARKS — Match step 4 style exactly
   ═══════════════════════════════════════════════ */

/* Filled purple circle, same as .wz-style-checkmark in step 4 */
.cp-card-check {
  width: 22px;
  height: 22px;
  top: 6px;
  right: 6px;
  background: var(--primary);
  font-size: 0.7rem;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.15);
}

/* Hide the checkmark on unselected cards — same as step 4 (only selected shows check) */
.cp-card.card-unselected .cp-card-check {
  display: none;
}

/* Count badge — match purple theme instead of green */
.wz-in-num {
  background: rgba(108, 92, 231, 0.25);
  border: 1px solid rgba(162, 155, 254, 0.5);
  color: var(--primary-light);
}


/* ═══════════════════════════════════════════════
   10b2. STEP 6 CURATE NAVBAR TITLE — Standard font
   ═══════════════════════════════════════════════ */

#wz-curate-navbar-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════
   10c. STEP 6 CURATE GRID — Subtle hover state + mobile scroll snap
   ═══════════════════════════════════════════════ */

/* Mobile: one card at a time with scroll snapping */
@media (max-width: 479px) {
  #wz-step-6 {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 56px; /* match navbar height so snapped cards appear just below header */
  }
  #wz-card-grid {
    padding-top: 16px;
    padding-bottom: 120px;
    gap: 16px;
  }
  #wz-card-grid > .cp-card {
    scroll-snap-align: start;
  }
}

#wz-card-grid .cp-card {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s, box-shadow 0.2s;
}

@media (hover: hover) {
  #wz-card-grid .cp-card:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  }
}


/* ═══════════════════════════════════════════════
   11. DESKTOP — Better use of space
   ═══════════════════════════════════════════════ */

@media (min-width: 768px) {
  .wz-heading {
    font-size: 2.4rem;
  }

  .wz-sub {
    font-size: 1.05rem;
  }

  /* Input steps: constrain width so they don't stretch edge-to-edge */
  .wz-field {
    max-width: 480px;
  }

  .wz-tiles {
    max-width: 480px;
  }

  /* Step 5 preview card: bigger on desktop */
  .wz-preview-card-host {
    width: 260px;
  }

  /* Step 6 curate: 3-col at tablet, 4-col at desktop */
  #wz-card-grid {
    max-width: 900px;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  #wz-card-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1060px;
    gap: 18px;
  }

  .wz-heading {
    font-size: 2.6rem;
  }
}


/* ═══════════════════════════════════════════════
   12. BACK BUTTON — Subtle refinement
   ═══════════════════════════════════════════════ */

#wz-back {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#wz-back:hover {
  background: rgba(255, 255, 255, 0.14);
}


/* ═══════════════════════════════════════════════
   13. TOPIC THEME — Whimsical emoji decorations
   ═══════════════════════════════════════════════ */

/* Floating background emoji container */
#wz-emoji-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}

.wz-emoji-float {
  position: absolute;
  font-size: 2rem;
  opacity: 0;
  user-select: none;
  animation: wzEmojiFloat linear infinite;
}

@keyframes wzEmojiFloat {
  0%   { transform: translateY(0) translateX(0) rotate(-5deg); opacity: 0; }
  8%   { opacity: 0.07; }
  92%  { opacity: 0.05; }
  100% { transform: translateY(-110vh) translateX(18px) rotate(15deg); opacity: 0; }
}

/* Topic pill shown on step 3 */
.wz-topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(162, 155, 254, 0.10);
  border: 1px solid rgba(162, 155, 254, 0.18);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: 1rem;
  margin-top: 10px;
  animation: wzTopicPillIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes wzTopicPillIn {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Confetti particle */
.wz-emoji-particle {
  position: fixed;
  font-size: 1.7rem;
  pointer-events: none;
  z-index: 9999;
  user-select: none;
}

@keyframes wzEmojiParticle {
  0%   { transform: scale(0) rotate(0deg);   opacity: 1; }
  35%  { transform: scale(1.4) rotate(var(--r)); opacity: 1; }
  100% { transform: scale(0.7) translateY(var(--dy)) translateX(var(--dx)) rotate(var(--r2)); opacity: 0; }
}


/* ═══════════════════════════════════════════════
   13. SKELETON CARDS — Warmer tint
   ═══════════════════════════════════════════════ */

.wz-skeleton {
  background: rgba(108, 92, 231, 0.08);
}

.wz-skeleton::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(162, 155, 254, 0.06) 50%,
    transparent 100%
  );
}


/* ═══════════════════════════════════════════════
   14. STEP 4 LOADING SCREEN — "Building your game"
   ═══════════════════════════════════════════════ */

/* Header hidden by default on step 4; JS adds .visible after reveal */
#wz-step-4 .wz-step4-header {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease 0.1s;
}

#wz-step-4 .wz-step4-header.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Loading container */
.wz-building {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 32px;
  width: 100%;
}

.wz-building--exit {
  animation: wzBuildingExit 0.3s ease forwards;
}

@keyframes wzBuildingExit {
  to { opacity: 0; transform: translateY(-8px); }
}

/* Heading */
.wz-building-heading {
  font-family: 'Fredoka One', -apple-system, system-ui, sans-serif;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  line-height: 1.1;
}

/* Animated ellipsis dots */
.wz-building-dots {
  display: inline-flex;
  gap: 5px;
  margin-top: -4px;
}

.wz-building-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-light);
  animation: wzDotPulse 1.2s ease-in-out infinite;
}

.wz-building-dots span:nth-child(2) { animation-delay: 0.2s; }
.wz-building-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes wzDotPulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40%            { opacity: 1;   transform: scale(1.2); }
}

/* Floating card group */
.wz-building-cards {
  position: relative;
  width: 240px;
  height: 150px;
  margin: 12px 0 4px;
}

/* Individual floating mini-cards */
.wz-building-card {
  position: absolute;
  width: 80px;
  height: 110px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  line-height: 1;
  will-change: transform;
}

/* Card 1 — left, tilted left */
.wz-building-card:nth-child(1) {
  left: 10px;
  top: 16px;
  animation: wzCardFloat1 3.2s ease-in-out infinite;
}

/* Card 2 — center, upright, on top */
.wz-building-card:nth-child(2) {
  left: 50%;
  top: 4px;
  transform: translateX(-50%) rotate(1deg);
  animation: wzCardFloat2 2.8s ease-in-out infinite;
  z-index: 2;
}

/* Card 3 — right, tilted right */
.wz-building-card:nth-child(3) {
  right: 10px;
  top: 20px;
  animation: wzCardFloat3 3.5s ease-in-out infinite;
}

@keyframes wzCardFloat1 {
  0%, 100% { transform: rotate(-8deg) translateY(0);     }
  50%       { transform: rotate(-6deg) translateY(-12px); }
}

@keyframes wzCardFloat2 {
  0%, 100% { transform: translateX(-50%) rotate(1deg) translateY(0);     }
  50%       { transform: translateX(-50%) rotate(2deg) translateY(-12px); }
}

@keyframes wzCardFloat3 {
  0%, 100% { transform: rotate(7deg) translateY(0);     }
  50%       { transform: rotate(5deg) translateY(-12px); }
}

/* Subtext */
.wz-building-sub {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.02em;
  text-align: center;
}

/* ── Reveal animation for style card wraps ── */
.wz-style-card-wrap--reveal {
  animation: wzCardReveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

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