/* ===== Design tokens (§5.1) ===== */
:root {
  /* Primary */
  --dreamy-pink:   #e3aacd;
  --sky-blue:      #a6d7f4;
  --lavender-haze: #bbaad2;
  /* Secondary */
  --bright-purple: #ac4d9d;
  --tulip-pink:    #e34e8b;
  --seafoam:       #46c0b7;
  /* Signature gradient: "cotton candy sky" */
  --sky-gradient: linear-gradient(180deg, #e3aacd 0%, #bbaad2 50%, #a6d7f4 100%);
  --card-bg: rgba(255,255,255,0.9);
  --text: #000000;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--lavender-haze);
  font-family: "Grandstander", cursive;
  color: var(--text);
  font-size: 16px;
}

#app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(172, 77, 157, 0.25);
}

h1, h2, h3, button { font-family: "Playpen Sans", cursive; }

/* ===== Screens & transitions (0.3s fade) ===== */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  overflow: hidden;
}
.screen.active { display: flex; }
.screen.visible { opacity: 1; }

.sky-bg { background: var(--sky-gradient); }

.hidden { display: none !important; }

/* ===== Buttons ===== */
.pill-btn {
  font-family: "Playpen Sans", cursive;
  font-weight: 700;
  font-size: 18px;
  min-height: 56px;
  min-width: 56px;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: var(--tulip-pink);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(172, 77, 157, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.pill-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(172, 77, 157, 0.55);
}
.big-btn {
  font-size: 20px;
  padding: 14px 36px;
  animation: btn-breathe 2.2s ease-in-out infinite;
}
@keyframes btn-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ===== Floating star field (§8.1) ===== */
.star-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.star-field .star {
  position: absolute;
  animation: star-drift var(--dur, 6s) ease-in-out infinite alternate,
             star-twinkle var(--twinkle, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes star-drift {
  from { transform: translate(0, 0) rotate(-8deg); }
  to   { transform: translate(var(--dx, 12px), var(--dy, -22px)) rotate(8deg); }
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* ===== 8.1 Title screen ===== */
#screen-title {
  align-items: center;
  justify-content: center;
}
.title-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 32px 24px;
  text-align: center;
}
.wordmark {
  width: min(78%, 320px);
  height: auto;
}
.title-pretzel { width: min(48%, 200px); height: auto; }
.title-subtitle {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 0 rgba(172, 77, 157, 0.5);
  letter-spacing: 0.5px;
}

.idle-bounce { animation: idle-bounce 2.4s ease-in-out infinite; }
@keyframes idle-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===== 8.2 Story intro ===== */
#screen-intro {
  align-items: center;
  justify-content: center;
}
.intro-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 36px 24px;
  width: 100%;
}
.intro-pretzel { width: min(42%, 175px); height: auto; }

/* Notebook-paper dialogue panel (§5.3) */
.dialogue-card {
  width: 100%;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 27px,
      rgba(166, 215, 244, 0.9) 27px 28px
    ),
    var(--card-bg);
  border-radius: 20px;
  border: 3px solid var(--lavender-haze);
  padding: 24px 22px 20px;
  min-height: 120px;
  box-shadow: 0 8px 20px rgba(172, 77, 157, 0.25);
  text-align: center;
}
.dialogue-line {
  display: none;
  font-size: 16px;
  line-height: 28px; /* matches the 28px notebook rule lines */
  animation: line-in 0.35s ease both;
}
.dialogue-line.current { display: block; }
@keyframes line-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Passport sticker that falls from the sky */
.intro-passport {
  position: absolute;
  top: -140px;
  left: 16%;
  z-index: 3;
  width: 110px;
  height: auto;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.25));
}
.intro-passport.falling {
  display: block !important;
  animation: passport-fall 1.6s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
@keyframes passport-fall {
  0%   { transform: translate(-50%, 0) rotate(-25deg); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(-50%, 26vh) rotate(8deg); opacity: 1; }
}

/* ===== 8.3 Map screen ===== */
#screen-map {
  align-items: flex-start;
  justify-content: flex-start;
  /* No scroll at target viewport; very short devices scroll gracefully */
  overflow-y: auto;
}
.map-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px 20px;
  width: 100%;
  /* Fill the full screen height so the stop list can spread out */
  min-height: 100%;
}

/* Passport progress pinned at top */
.passport-bar {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border: 3px solid var(--lavender-haze);
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
  box-shadow: 0 6px 16px rgba(172, 77, 157, 0.25);
}
.passport-bar-book {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}
.passport-bar-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.passport-bar-text strong {
  font-family: "Playpen Sans", cursive;
  font-size: 16px;
}
.passport-bar-text span { font-size: 15px; }
.passport-slots {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.passport-slot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px dashed var(--lavender-haze);
  display: flex;
  align-items: center;
  justify-content: center;
}
.passport-slot img { width: 26px; height: 26px; }
.passport-slot.filled {
  border-style: solid;
  border-color: var(--tulip-pink);
  background: #fff;
  animation: slot-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slot-pop {
  from { transform: scale(0.3); }
  to   { transform: scale(1); }
}

.map-title {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 0 rgba(172, 77, 157, 0.5);
}

/* Location cards — hand-drawn map feel */
.stop-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
  /* Cluster the cards together and center the group in the remaining height. */
  flex: 1;
  justify-content: center;
}
.stop-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 80px;
  padding: 10px 16px;
  border: 3px dashed var(--bright-purple);
  border-radius: 24px;
  background: var(--card-bg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(172, 77, 157, 0.2);
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Alternate cards drift left/right like waypoints on a trail */
.stop-card { width: 93%; }
.stop-card:nth-child(odd)  { transform: rotate(-1.2deg); margin-right: auto; }
.stop-card:nth-child(even) { transform: rotate(1.2deg); margin-left: auto; }
.stop-card:active:not(.locked) { transform: scale(0.97); }
.stop-card .stop-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}
.stop-card .stop-info { flex: 1; min-width: 0; }
.stop-card.locked { padding-right: 68px; }
.stop-card .stop-info h3 {
  font-size: 18px;
  margin-bottom: 2px;
}
.stop-card .stop-info p {
  font-size: 15px;
  color: var(--bright-purple);
  font-weight: 600;
}
.stop-card .stop-done {
  margin-left: auto;
  font-size: 26px;
  color: var(--seafoam);
}

/* Locked state: soft padlock overlay */
.stop-card.locked {
  cursor: default;
  filter: saturate(0.55);
}
.stop-card.locked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 21px;
  background: rgba(187, 170, 210, 0.55);
}
.stop-card .stop-lock {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.stop-card.locked .stop-lock { display: flex; }

/* Pretzel "you are here" marker */
.map-marker {
  position: absolute;
  left: -12px;
  top: -54px;
  z-index: 3;
  width: 74px;
  height: auto;
  transform: rotate(-6deg);
  filter: drop-shadow(0 4px 6px rgba(172, 77, 157, 0.4));
  animation: idle-bounce 2s ease-in-out infinite;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ===== 8.4 Stop intro (reusable) ===== */
#screen-stop-intro {
  align-items: stretch;
  justify-content: flex-start;
}

/* Full-bleed sticker-composed scene */
.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.scene .scene-layer {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
  animation:
    scene-in 0.6s ease both,
    scene-float 2.6s ease-in-out infinite alternate;
  animation-delay: var(--layer-delay, 0s), var(--float-delay, 0s);
}
@keyframes scene-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scene-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}

.stop-intro-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding: 20px 18px 26px;
}

/* Semi-transparent story card with host badge */
.story-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 3px solid var(--lavender-haze);
  border-radius: 24px;
  padding: 16px 18px 18px;
  box-shadow: 0 8px 20px rgba(172, 77, 157, 0.3);
}
.story-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.host-badge {
  width: 58px;
  height: 58px;
  object-fit: contain;
  flex-shrink: 0;
  background: var(--card-bg);
  border: 2px solid var(--seafoam);
  border-radius: 50%;
  padding: 4px;
}
.story-card h2 { font-size: 22px; }
.story-card p {
  font-size: 17px;
  line-height: 25px;
}

/* ===== 8.5 Pattern mini-game ===== */
#screen-game-pattern {
  background: linear-gradient(180deg, #a6d7f4 0%, #46c0b7 100%);
  align-items: center;
  justify-content: center;
}
.game-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 24px 20px 120px;
}
.game-msg-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--card-bg);
  border: 3px solid var(--seafoam);
  border-radius: 20px;
  padding: 12px 16px;
  box-shadow: 0 6px 16px rgba(70, 192, 183, 0.35);
}
.game-msg-card p {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}
.round-dots { display: flex; gap: 10px; }
.round-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.35);
}
.round-dot.done { background: var(--tulip-pink); }
.round-dot.current { background: var(--sky-blue); }

.pattern-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.pattern-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 64px;
  min-height: 80px;
  padding: 8px;
  border: 3px solid #fff;
  border-radius: 24px;
  background: var(--card-bg);
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(70, 192, 183, 0.5);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.pattern-btn img {
  height: 56px;
  width: auto;
  max-width: 56px;
  object-fit: contain;
  flex-shrink: 0;
}
.pattern-btn:active { transform: scale(0.96); }
.pattern-btn.lit {
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.65), 0 6px 0 rgba(70, 192, 183, 0.5);
  animation: btn-bounce 0.35s ease;
}
@keyframes btn-bounce {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.08); }
}
/* Playback highlight: glowing brand-colored ring + gentle scale-up while
   Buttercup "sings" each note (~900ms, notes fire every 1100ms). */
.pattern-btn.singing {
  background: #fff;
  border-color: var(--tulip-pink, #f4739f);
  animation: btn-sing 0.9s ease;
}
@keyframes btn-sing {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 115, 159, 0.7), 0 6px 0 rgba(70, 192, 183, 0.5);
  }
  25% {
    transform: scale(1.12);
    box-shadow: 0 0 0 8px rgba(244, 115, 159, 0.55), 0 0 22px 6px rgba(178, 116, 227, 0.5), 0 6px 0 rgba(70, 192, 183, 0.5);
  }
  70% {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px rgba(244, 115, 159, 0.4), 0 0 16px 4px rgba(178, 116, 227, 0.35), 0 6px 0 rgba(70, 192, 183, 0.5);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 115, 159, 0), 0 6px 0 rgba(70, 192, 183, 0.5);
  }
}
.pattern-buttons.shake { animation: gentle-shake 0.45s ease; }
@keyframes gentle-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  50% { transform: translateX(8px); }
  75% { transform: translateX(-4px); }
}

/* Small Pretzel cheering from the corner (§8.10) */
.corner-pretzel {
  position: absolute;
  right: 10px;
  bottom: 12px;
  z-index: 3;
  width: 104px;
  height: auto;
  pointer-events: none;
}
.corner-pretzel.cheer { animation: cheer-bounce 0.5s ease; }
@keyframes cheer-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-18px) rotate(-4deg); }
}

/* ===== 8.6 Matching mini-game ===== */
#screen-game-match {
  background: linear-gradient(180deg, #e3aacd 0%, #bbaad2 100%);
  align-items: center;
  justify-content: flex-start;
}
#screen-game-match .game-content { padding-top: 32px; }
/* Chinatown "Welcome, friends" sign */
.chinatown-sign {
  align-self: center;
  background: var(--bright-purple);
  color: #fff;
  font-family: "Playpen Sans", cursive;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 6px;
  padding: 8px 18px 8px 24px;
  border-radius: 12px;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(172, 77, 157, 0.45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.match-msg-card { border-color: var(--bright-purple); box-shadow: 0 6px 16px rgba(172, 77, 157, 0.35); }

.match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 14px;
  width: 100%;
}
.match-card {
  min-height: 76px;
  padding: 10px 8px;
  border: 3px solid var(--lavender-haze);
  border-radius: 18px;
  background: var(--card-bg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  transition: transform 0.12s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.match-card:active { transform: scale(0.96); }
.match-card .hanzi {
  font-family: "Grandstander", cursive;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}
.match-card .pinyin { font-size: 15px; color: var(--bright-purple); font-weight: 600; }
.match-card .english {
  font-family: "Playpen Sans", cursive;
  font-size: 18px;
  font-weight: 700;
}
.match-card.selected {
  border-color: var(--bright-purple);
  box-shadow: 0 0 0 5px rgba(172, 77, 157, 0.35);
  transform: scale(1.04);
}
.match-card.matched {
  border-color: var(--seafoam);
  background: #e2f7ee;
  cursor: default;
  box-shadow: none;
}
.match-card.matched::after { content: "✓"; font-size: 15px; color: var(--seafoam); }
.match-card.flash-wrong { animation: flash-pink 0.5s ease; }
@keyframes flash-pink {
  0%, 100% { background: var(--card-bg); }
  40% { background: #fbd3e2; border-color: var(--tulip-pink); }
}
.match-pretzel { width: 118px; right: 50%; transform: translateX(50%); }

/* ===== 8.7 Scavenger hunt mini-game ===== */
#screen-game-scavenger {
  align-items: stretch;
  justify-content: flex-start;
}
.scavenger-bottom {
  position: relative;
  z-index: 2;
  margin-top: auto;
  width: 100%;
  padding: 0 16px 20px;
}
.scavenger-clue-card { background: rgba(255, 255, 255, 0.92); border-color: var(--tulip-pink); }
.scavenger-clue-card.wiggle { animation: gentle-shake 0.45s ease; }
.scavenger-clue-text { flex: 1; min-width: 0; }
#scavenger-clue { font-size: 17px; line-height: 24px; font-weight: 600; }
.scavenger-progress {
  margin-top: 4px;
  font-size: 15px;
  color: var(--bright-purple);
  font-weight: 600;
}

/* Invisible tap zones over placed stickers */
.scav-zone {
  position: absolute;
  z-index: 3;
  min-width: 56px;
  min-height: 56px;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scav-zone.found { pointer-events: none; }

/* Star that pulses in on a correct find */
.scav-star {
  position: absolute;
  z-index: 4;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: star-pop 0.9s ease both;
}
@keyframes star-pop {
  0%   { transform: translate(-50%, -50%) scale(0.15); opacity: 0; }
  40%  { transform: translate(-50%, -50%) scale(1.35); opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Celebration ring that expands from the tap point */
.scav-ring {
  position: absolute;
  z-index: 4;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 4px solid var(--tulip-pink);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
  pointer-events: none;
  animation: ring-burst 0.7s ease-out both;
}
@keyframes ring-burst {
  0%   { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* "Found it!" floats up from the tap point */
.scav-found-label {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bright-purple);
  color: #fff;
  font-family: "Playpen Sans", cursive;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  animation: found-float 0.9s ease-out both;
}
@keyframes found-float {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  20%  { transform: translate(-50%, -70%) scale(1.1); opacity: 1; }
  75%  { transform: translate(-50%, -170%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -210%) scale(1); opacity: 0; }
}

/* Glow pulse on the found sticker artwork. Animates filter only so the
   scene-float transform animation on .scene-layer is left untouched. */
.scene-layer.scav-layer-found {
  animation:
    scav-layer-glow 0.8s ease both,
    scene-float 2.6s ease-in-out infinite alternate;
  animation-delay: 0s, var(--float-delay, 0s);
}
@keyframes scav-layer-glow {
  0%   { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12)); }
  35%  { filter: drop-shadow(0 0 14px rgba(216, 84, 165, 0.95)) brightness(1.25) saturate(1.3); }
  70%  { filter: drop-shadow(0 0 8px rgba(148, 88, 216, 0.7)) brightness(1.1); }
  100% { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12)); }
}

/* New clue slides in; card border flashes teal to signal "new task" */
.scavenger-clue-card.clue-new { animation: clue-card-flash 0.8s ease; }
@keyframes clue-card-flash {
  0%   { border-color: var(--tulip-pink); }
  30%  { border-color: var(--seafoam); box-shadow: 0 0 0 4px rgba(84, 200, 190, 0.35); }
  100% { border-color: var(--tulip-pink); }
}
#scavenger-clue.clue-slide { animation: clue-slide-in 0.55s ease both; }
@keyframes clue-slide-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
.scavenger-progress.count-pop { animation: count-pop 0.6s ease; }
@keyframes count-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); color: var(--tulip-pink); }
  100% { transform: scale(1); }
}

/* Persistent checkmark where a target was found */
.scav-check {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--seafoam);
  color: #fff;
  font-family: "Playpen Sans", cursive;
  font-size: 20px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* ===== Fun fact postcard ===== */
#screen-funfact {
  align-items: center;
  justify-content: center;
}
.funfact-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 32px 24px;
}
.funfact-pretzel { width: min(34%, 140px); height: auto; }
.funfact-card {
  width: 100%;
  background: var(--card-bg);
  border: 3px dashed var(--tulip-pink);
  border-radius: 14px;
  padding: 20px 20px 22px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(172, 77, 157, 0.3);
  transform: rotate(-1.5deg);
}
.funfact-card h2 {
  font-size: 22px;
  color: var(--tulip-pink);
  margin-bottom: 10px;
}
.funfact-card p { font-size: 16px; line-height: 24px; }
.funfact-card .funfact-hanzi {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  margin-bottom: 6px;
}

/* ===== 8.8 Sticker award ===== */
#screen-award {
  align-items: center;
  justify-content: center;
}
.award-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 32px 24px;
  text-align: center;
}
.award-sticker {
  width: min(43.5%, 180px);
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(172, 77, 157, 0.4));
}
.award-sticker.landing { animation: award-in 1.1s cubic-bezier(0.34, 1.3, 0.64, 1) both; }
@keyframes award-in {
  0%   { transform: scale(0.1) rotate(0deg); opacity: 0; }
  55%  { transform: scale(1.15) rotate(360deg); opacity: 1; }
  75%  { transform: scale(0.95) rotate(360deg); }
  100% { transform: scale(1) rotate(360deg); }
}
.award-text {
  font-size: 22px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(172, 77, 157, 0.5);
}
.award-pretzel { width: min(30%, 125px); height: auto; }

/* ===== 8.9 Passport ceremony ===== */
#screen-ceremony {
  align-items: center;
  justify-content: center;
}
.ceremony-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 24px 20px;
}

/* The passport book: cover swings open to reveal the page */
.passport-book {
  position: relative;
  width: 240px;
  height: 280px;
  perspective: 1100px;
}
.book-page {
  position: absolute;
  inset: 0;
  background: #fdf6ec;
  border: 3px solid var(--bright-purple);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(172, 77, 157, 0.35);
  text-align: center;
}
.page-title {
  font-family: "Playpen Sans", cursive;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--bright-purple);
}
.cere-stickers {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cere-sticker {
  width: 60px;
  height: 60px;
  object-fit: contain;
  opacity: 0;
}
.cere-sticker.fly { animation: sticker-fly 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) forwards; }
@keyframes sticker-fly {
  0%   { transform: translate(-45vw, -45vh) scale(2.6) rotate(-50deg); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* The big stamp slam */
.cere-stamp {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 148px;
  height: 148px;
  border: 5px solid var(--tulip-pink);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transform: translateX(-50%) rotate(-10deg);
}
.cere-stamp img { width: 84px; height: auto; }
.cere-stamp span {
  font-family: "Playpen Sans", cursive;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 0 14px;
  color: var(--tulip-pink);
  text-align: center;
}
.cere-stamp.slam { animation: stamp-slam 0.5s ease-in forwards; }
@keyframes stamp-slam {
  0%   { transform: translateX(-50%) scale(3.2) rotate(-32deg); opacity: 0; }
  55%  { opacity: 1; }
  80%  { transform: translateX(-50%) scale(0.94) rotate(-10deg); opacity: 1; }
  100% { transform: translateX(-50%) scale(1) rotate(-10deg); opacity: 1; }
}

/* Cover swings open like a real book */
.book-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 12px;
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.6, 0, 0.3, 1);
  backface-visibility: hidden;
  z-index: 2;
  filter: drop-shadow(4px 6px 10px rgba(0, 0, 0, 0.25));
}
.passport-book.open .book-cover { transform: rotateY(-155deg); }

/* Friendship moment + closing copy */
.cere-pals {
  width: min(52%, 210px);
  height: auto;
  animation: line-in 0.6s ease both;
}
.cere-copy {
  width: 100%;
  background: var(--card-bg);
  border: 3px solid var(--lavender-haze);
  border-radius: 18px;
  padding: 14px 18px;
  text-align: center;
  animation: line-in 0.6s ease both;
}
.cere-copy p { font-size: 16px; line-height: 23px; }
.cere-copy .cere-sign {
  margin-top: 6px;
  font-family: "Playpen Sans", cursive;
  font-weight: 700;
  color: var(--tulip-pink);
}

/* Star-sticker confetti (§5.3: sticker particles only) */
.confetti-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}
.confetti-star {
  position: absolute;
  top: -70px;
  animation: confetti-fall var(--fall, 3s) linear var(--fdelay, 0s) forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(120vh) rotate(var(--spin, 300deg)); }
}

/* ===== Ceremony shop action ===== */
.cere-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.cere-actions.float-in { animation: float-up 0.7s cubic-bezier(0.2, 1.1, 0.4, 1) both; }
@keyframes float-up {
  from { transform: translateY(36px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
/* Primary action: the shop link is the only call to action on this screen */
.shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 4px;
  padding: 12px 30px;
  border: none;
  border-radius: 999px;
  background: var(--tulip-pink);
  color: #fff;
  font-family: "Playpen Sans", cursive;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(172, 77, 157, 0.55);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.shop-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(172, 77, 157, 0.55);
}

/* Small screens: tighten spacing */
@media (max-height: 620px) {
  .title-pretzel { width: 38%; }
  .intro-content, .title-content { gap: 14px; }
}