/* ═══════════════════════════════════════════════════════════════
   theme-snap.css — Izzy's Snap (memory matching game)
   Palette  : pink #ec4899 · purple #4c1d95 · gold #fbbf24
   BG       : deep purple gradient 1a0e2e → 2d1b69 → 4c1d95
   Imported : /izzy/snap/index.html only
   ═══════════════════════════════════════════════════════════════ */

/* Google Fonts CDN removed — fonts self-hosted via shared/fonts.css */

/* ── Body / background ──────────────────────────────────────── */
body {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a0e2e 0%, #2d1b69 40%, #4c1d95 100%);
  font-family: 'Nunito', sans-serif;
  color: #fff;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Confetti canvas — fixed full-screen, above all content ──── */
#confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 200;
}

/* ── Background sparkle field ───────────────────────────────── */
#snap-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.snap-spark {
  position: absolute;
  border-radius: 50%;
  animation: sparkTwinkle var(--d) ease-in-out infinite alternate;
  opacity: 0;
}
.snap-spark.pink  { background: #f9a8d4; }
.snap-spark.white { background: #fff;    }
.snap-spark.gold  { background: #fbbf24; }

@keyframes sparkTwinkle {
  from { opacity: 0;        transform: scale(0.8); }
  to   { opacity: var(--o); transform: scale(1.3); }
}

/* ── Screens — only one visible at a time ───────────────────── */
.snap-screen {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.snap-screen[hidden] { display: none; }


/* ═══════════════════════════════════════════════════════════════
   STAGE PICKER SCREEN
   ═══════════════════════════════════════════════════════════════ */

#snap-picker {
  min-height: 100vh;
  justify-content: center;
  padding: 20px 16px 40px;
}

.picker-header {
  text-align: center;
  margin-bottom: 36px;
}
.picker-avatar {
  font-size: 4.5rem;
  display: block;
  margin-bottom: 10px;
  animation: avatarBounce 2s ease-in-out infinite;
}
@keyframes avatarBounce {
  0%, 100% { transform: translateY(0);   }
  50%       { transform: translateY(-8px); }
}
.picker-title {
  font-family: 'Fredoka One', cursive;
  font-size: 2.4rem;
  color: #f9a8d4;
  text-shadow: 0 0 24px rgba(249,168,212,0.5);
  margin-bottom: 4px;
}
.picker-sub {
  color: rgba(255,255,255,0.55);
  font-size: 1rem;
}

.stage-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

/* Stage button — base */
.stage-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: min(300px, 82vw);
  padding: 1.4rem 1rem 1.2rem;
  border: none;
  border-radius: 22px;
  font-family: 'Fredoka One', cursive;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.stage-btn:active { transform: scale(0.95); }

.btn-label {
  font-size: 1.45rem;
  color: inherit;
  line-height: 1;
}
.btn-pairs {
  font-family: 'Nunito', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  opacity: 0.75;
  color: inherit;
}
.btn-best {
  font-family: 'Nunito', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  opacity: 0.9;
  color: inherit;
  min-height: 1em;
}

/* Easy — pink */
.stage-btn.easy {
  background: linear-gradient(140deg, #f472b6, #ec4899);
  box-shadow: 0 6px 0 #9d174d, 0 8px 20px rgba(236,72,153,0.4);
  color: #fff;
}
/* Medium — purple */
.stage-btn.medium {
  background: linear-gradient(140deg, #a855f7, #7c3aed);
  box-shadow: 0 6px 0 #5b21b6, 0 8px 20px rgba(124,58,237,0.4);
  color: #fff;
}
/* Hard — gold with dark text (approved Step 2) */
.stage-btn.hard {
  background: linear-gradient(140deg, #fbbf24, #f59e0b);
  box-shadow: 0 6px 0 #92400e, 0 8px 20px rgba(245,158,11,0.4);
  color: #1c1200;
}


/* ═══════════════════════════════════════════════════════════════
   GAME SCREEN
   ═══════════════════════════════════════════════════════════════ */

#snap-game {
  min-height: 100vh;
  justify-content: flex-start;
  padding: 0 0 40px;
}

/* ── HUD — sticky so Home stays reachable when Stage 3 scrolls ─
   (Stage 3 on phone viewports will scroll — accepted in Step 2.
   Sticky HUD is the mitigation: Home never scrolls off screen.) */
.snap-hud {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: rgba(26,14,46,0.90);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(249,168,212,0.15);
}

.hud-home-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.9rem;
  min-height: 40px;
  background: rgba(255,255,255,0.08);
  color: rgba(249,168,212,0.85);
  border: 1.5px solid rgba(236,72,153,0.3);
  border-radius: 50px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.hud-home-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(236,72,153,0.7);
  color: #f9a8d4;
}

.hud-tries {
  font-family: 'Fredoka One', cursive;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.01em;
}
.hud-tries strong {
  color: #f9a8d4;
}

/* ── Card board — flex-wrap so last row centres automatically ── */
/* margin: auto absorbs remaining vertical space in the flex column,
   vertically centring the board below the sticky HUD.
   On overflow (Stage 3 phone), remaining space is 0 so auto → 0
   and the board sits naturally below the HUD and scrolls.       */
.board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  width: 100%;
  max-width: 580px;
  margin: auto;
}

/* ── Card shell ─────────────────────────────────────────────── */
.card {
  width: clamp(88px, 20vw, 116px);
  height: clamp(88px, 20vw, 116px);
  flex-shrink: 0;
  perspective: 800px;
  cursor: pointer;
  border-radius: 18px;
  -webkit-tap-highlight-color: transparent;
  /* Gold ring + drop shadow — cards are always visible distinct objects
     against the purple page background, face-down and face-up alike.
     snap-matched animation overrides box-shadow; its 100% frame
     preserves the gold ring so matched cards keep their outline.      */
  box-shadow: 0 0 0 3px rgba(255,215,0,0.65), 0 6px 18px rgba(0,0,0,0.45);
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.35, 0, 0.25, 1);
  border-radius: inherit;
}

/* Flip state: both .flipped and .matched show the face */
.card.flipped .card-inner,
.card.matched  .card-inner { transform: rotateY(180deg); }

.card-face,
.card-back {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card back — pink gradient (contrasts with purple page background)
   Pink-on-purple makes face-down cards immediately visible.
   Gold + white dot overlay reads well on the hot-pink base.
   NOTE: position: absolute and inset: 0 come from the shared
   .card-face, .card-back rule above — do NOT add position: relative
   here or the element collapses to 0 height and becomes invisible.  */
.card-back {
  background: linear-gradient(145deg, #ec4899 0%, #db2777 50%, #be185d 100%);
  overflow: hidden;
}
/* Dot pattern overlay — gold + white dots on pink */
.card-back::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(255,215,0,0.70)  1.2px, transparent 1.2px),
    radial-gradient(circle, rgba(255,255,255,0.38) 1px,   transparent 1px);
  background-size: 22px 22px, 14px 14px;
  background-position: 3px 3px, 9px 9px;
  border-radius: inherit;
}
/* ✨ centre sparkle — slightly reduced opacity on bright pink base */
.card-back::before {
  content: '✨';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  opacity: 0.78;
  pointer-events: none;
  z-index: 1;
}

/* Card face — cream background, large emoji */
.card-face {
  transform: rotateY(180deg);
  background: #fff0f5;
  font-size: clamp(2.6rem, 8vw, 3.8rem);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.08);
}

/* ── Matched — CSS pulse + gold glow (no confetti per-match;
   confetti is reserved for full board-clear only) ────────────── */
@keyframes snap-matched {
  /* Start from the same base ring as an unmatched card */
  0%   { transform: scale(1);    box-shadow: 0 0 0 3px rgba(255,215,0,0.65), 0 6px 18px rgba(0,0,0,0.45); }
  /* Peak: large gold bloom + thick ring */
  30%  { transform: scale(1.16); box-shadow: 0 0 36px 12px rgba(255,215,0,0.8),  0 0 0 4px #ffd700; }
  65%  { transform: scale(1.10); box-shadow: 0 0 24px  8px rgba(255,215,0,0.55), 0 0 0 3px #ffd700; }
  /* Settle: persistent gold ring (slightly brighter than base) marks these as matched */
  100% { transform: scale(1);    box-shadow: 0 0 14px  5px rgba(255,215,0,0.35), 0 0 0 3px rgba(255,215,0,0.65); }
}
.card.matched {
  animation: snap-matched 0.6s ease-out forwards;
  opacity: 0.82;
  cursor: default;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   STAGE COMPLETE SCREEN
   ═══════════════════════════════════════════════════════════════ */

#snap-complete {
  min-height: 100vh;
  justify-content: center;
  padding: 24px 16px 48px;
}

.complete-card {
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid rgba(249,168,212,0.25);
  border-radius: 28px;
  padding: 36px 28px 32px;
  max-width: 380px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.complete-trophy {
  font-size: 5rem;
  line-height: 1;
  animation: trophyBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes trophyBounce {
  from { transform: scale(0) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.complete-title {
  font-family: 'Fredoka One', cursive;
  font-size: 2.2rem;
  color: #f9a8d4;
  text-shadow: 0 0 20px rgba(249,168,212,0.5);
  margin: 0;
}

.complete-tries {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
}
.complete-count {
  font-family: 'Fredoka One', cursive;
  font-size: 2rem;
  color: #fbbf24;
  display: block;
  line-height: 1.2;
}

.complete-best {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.5);
  margin: 0;
}
.complete-best strong {
  color: rgba(255,255,255,0.75);
}

.new-best-badge {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1c1200;
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  padding: 0.35rem 1.1rem;
  border-radius: 50px;
  margin: 0;
  animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes badgePop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.complete-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 6px;
}

.btn-play-again {
  width: 100%;
  max-width: 260px;
  padding: 1rem;
  border: none;
  border-radius: 18px;
  font-family: 'Fredoka One', cursive;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(140deg, #a855f7, #7c3aed);
  box-shadow: 0 5px 0 #5b21b6, 0 7px 18px rgba(124,58,237,0.4);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.btn-play-again:active {
  transform: scale(0.95);
  box-shadow: 0 2px 0 #5b21b6, 0 4px 12px rgba(124,58,237,0.4);
}

.btn-home-link {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  color: rgba(249,168,212,0.7);
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 50px;
  border: 1.5px solid rgba(236,72,153,0.2);
  transition: color 0.18s, border-color 0.18s;
}
.btn-home-link:hover {
  color: #f9a8d4;
  border-color: rgba(236,72,153,0.6);
}


/* ═══════════════════════════════════════════════════════════════
   MATCH / MISS FEEDBACK OVERLAY
   Create-and-append pattern: snap.js creates a fresh <div> per
   feedback call and removes it after 1300ms. This avoids stale
   animation-restart tricks and puts the element above the confetti
   canvas (z:200) at z:300 so nothing can obscure it.
   ═══════════════════════════════════════════════════════════════ */

.feedback-overlay-item {
  position: fixed;
  top: 20vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  white-space: nowrap;
  pointer-events: none;
  z-index: 300;    /* above confetti canvas (z:200) */
  animation: feedbackPop 1200ms ease-out forwards;
}

/* Gold text for match celebration */
.feedback-overlay-item.match {
  color: #ffd700;
  text-shadow: 0 3px 0 #1a0e2e, 0 0 20px rgba(255,215,0,0.9);
}

/* Soft pink text for miss encouragement */
.feedback-overlay-item.miss {
  color: #fda4af;
  text-shadow: 0 3px 0 #1a0e2e, 0 0 20px rgba(253,164,175,0.9);
}

@keyframes feedbackPop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.82); }
  17%  { opacity: 1; transform: translateX(-50%) scale(1.06); }
  25%  { opacity: 1; transform: translateX(-50%) scale(1);    }
  83%  { opacity: 1; transform: translateX(-50%) scale(1);    }
  100% { opacity: 0; transform: translateX(-50%) scale(0.95); }
}