/* =====================================================================
   FOR YOU — stylesheet
   A soft, editorial, hand-written-letter feel: cream paper, blush ink,
   a single warm rose accent. Motion is gentle everywhere — nothing
   snaps, everything eases.
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --cream:        #FFF9F4;
  --cream-deep:   #FBEEE4;
  --paper:        #FFFDFB;
  --blush:        #F6D9E1;
  --blush-soft:   #FBE7EC;
  --rose:         #C9678A;
  --rose-deep:    #A94F70;
  --plum:         #3E2A33;
  --plum-soft:    #6E5560;
  --gold:         #E7C481;

  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
}

body{
  font-family: var(--font-body);
  color: var(--plum);
  background:
    radial-gradient(ellipse at 20% 15%, var(--blush-soft) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 80%, var(--cream-deep) 0%, transparent 60%),
    var(--cream);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Floating hearts canvas ---------- */
#hearts-canvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Music toggle ---------- */
.music-toggle{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 40;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(201,103,138,0.35);
  background: rgba(255,253,251,0.75);
  backdrop-filter: blur(6px);
  color: var(--rose-deep);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow: 0 2px 10px rgba(169,79,112,0.12);
}
.music-toggle:hover{ transform: scale(1.08); background: var(--paper); }
.music-toggle.playing{ animation: musicPulse 2.4s ease-in-out infinite; }
@keyframes musicPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(201,103,138,0.25); }
  50%{ box-shadow: 0 0 0 8px rgba(201,103,138,0); }
}

/* ---------- Layout ---------- */
#app{
  position: relative;
  z-index: 2;
  min-height: 100vh;
}

.screen{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px) scale(.985);
  padding: 90px 20px 40px;
}
.screen.active{
  display: flex;
  animation: screenIn .7s var(--ease-soft) forwards;
}
.screen.leaving{
  animation: screenOut .45s var(--ease-soft) forwards;
}
@keyframes screenIn{
  from{ opacity: 0; transform: translateY(14px) scale(.985); }
  to{   opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes screenOut{
  from{ opacity: 1; transform: translateY(0) scale(1); }
  to{   opacity: 0; transform: translateY(-10px) scale(.985); }
}

.card{
  background: var(--paper);
  border-radius: 22px;
  padding: 48px 42px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px -20px rgba(169,79,112,0.22), 0 2px 10px rgba(62,42,51,0.04);
  border: 1px solid rgba(201,103,138,0.10);
}
.card-wide{ max-width: 620px; }

/* ---------- Typography ---------- */
.eyebrow, .puzzle-eyebrow{
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11.5px;
  color: var(--rose);
  font-weight: 600;
  margin: 0 0 14px;
}

.welcome-title{
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 2.6rem);
  font-weight: 400;
  margin: 0 0 18px;
  color: var(--plum);
  line-height: 1.2;
}
.heart-emoji{ display: inline-block; animation: heartbeat 1.8s ease-in-out infinite; }
@keyframes heartbeat{
  0%,100%{ transform: scale(1); }
  25%{ transform: scale(1.14); }
  40%{ transform: scale(1); }
}

.welcome-text{
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--plum-soft);
  margin: 0 0 34px;
}

.puzzle-question{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4vw, 1.6rem);
  font-weight: 400;
  line-height: 1.4;
  margin: 0 0 10px;
}
.puzzle-instructions{
  font-size: .92rem;
  color: var(--plum-soft);
  margin: 0 0 26px;
}

/* ---------- Buttons ---------- */
.btn-primary{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--rose) 0%, var(--rose-deep) 100%);
  color: #fff;
  border: none;
  padding: 15px 34px;
  border-radius: 999px;
  font-size: 1rem;
  font-family: var(--font-body);
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(169,79,112,0.55);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(169,79,112,0.6); }
.btn-primary:active{ transform: translateY(0px) scale(.98); }
.btn-primary:disabled{ opacity: .5; cursor: default; transform: none; }
.btn-small{ padding: 12px 28px; font-size: .92rem; margin-top: 4px; }
.btn-seal{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
}

/* ---------- Feedback text ---------- */
.feedback{
  min-height: 22px;
  font-size: .92rem;
  margin-top: 16px;
  color: var(--rose-deep);
  transition: opacity .3s var(--ease);
}
.feedback.success{ color: #6e9c74; font-weight: 600; }
.feedback.shake{ animation: shake .4s var(--ease); }
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-6px); }
  40%{ transform: translateX(5px); }
  60%{ transform: translateX(-4px); }
  80%{ transform: translateX(3px); }
}

/* ---------- Success burst (shown briefly after each puzzle) ---------- */
.success-burst{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}
.success-burst.show{ animation: burstShow 1.1s var(--ease-soft) forwards; }
.success-burst .burst-heart{
  font-size: 5rem;
  filter: drop-shadow(0 8px 20px rgba(201,103,138,0.4));
}
@keyframes burstShow{
  0%{ opacity: 0; transform: scale(.5); }
  25%{ opacity: 1; transform: scale(1.15); }
  40%{ opacity: 1; transform: scale(1); }
  85%{ opacity: 1; }
  100%{ opacity: 0; transform: scale(1.3); }
}

/* ---------- Progress bar ---------- */
.progress-bar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 20px 12px;
  background: linear-gradient(to bottom, var(--cream) 55%, transparent);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.progress-bar.hidden{ opacity: 0; transform: translateY(-14px); pointer-events: none; }
.progress-label{
  margin: 0;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-weight: 600;
}
.progress-hearts{ display: flex; gap: 7px; }
.progress-heart{
  font-size: 15px;
  color: rgba(201,103,138,0.28);
  transition: color .4s var(--ease), transform .4s var(--ease);
}
.progress-heart.done{ color: var(--rose); transform: scale(1.15); }
.progress-heart.current{ color: var(--rose-deep); animation: heartbeat 1.6s ease-in-out infinite; }

/* ---------- Puzzle 1: quiz ---------- */
.quiz-options{ display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.quiz-option{
  text-align: left;
  padding: 15px 20px;
  border-radius: 14px;
  border: 1.5px solid rgba(201,103,138,0.22);
  background: var(--cream);
  color: var(--plum);
  font-size: .98rem;
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .2s var(--ease);
}
.quiz-option:hover{ border-color: var(--rose); background: var(--blush-soft); transform: translateX(2px); }
.quiz-option.correct{ background: #eef6ee; border-color: #8fbf95; color: #3f5f43; }
.quiz-option.incorrect{ background: #fbeaea; border-color: #d99b9b; animation: shake .4s var(--ease); }
.quiz-option:disabled{ cursor: default; }

/* ---------- Puzzle 2: timeline ---------- */
.timeline-list{
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.timeline-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--cream);
  border: 1.5px solid rgba(201,103,138,0.2);
  border-radius: 14px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  font-size: .95rem;
  transition: box-shadow .25s var(--ease), border-color .3s var(--ease);
}
.timeline-item .drag-dot{ color: var(--rose); font-size: 1rem; letter-spacing: 2px; opacity: .6; }
.timeline-item.dragging{
  cursor: grabbing;
  box-shadow: 0 12px 26px -8px rgba(169,79,112,0.35);
  border-color: var(--rose);
  position: relative;
  z-index: 5;
}
.timeline-item.correct-final{ background: #eef6ee; border-color: #8fbf95; }
.timeline-item.wrong-final{ background: #fbeaea; border-color: #d99b9b; }

/* ---------- Puzzle 3: word search ---------- */
.wordsearch-wrapper{ display: flex; flex-direction: column; align-items: center; gap: 22px; }
.wordsearch-grid{
  display: grid;
  gap: 4px;
  touch-action: none;
  user-select: none;
}
.ws-cell{
  width: clamp(26px, 8vw, 38px);
  height: clamp(26px, 8vw, 38px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(.75rem, 3vw, .95rem);
  font-weight: 600;
  background: var(--cream);
  border-radius: 8px;
  color: var(--plum-soft);
  transition: background .15s, color .15s, transform .15s;
}
.ws-cell.selecting{ background: var(--blush); color: var(--rose-deep); transform: scale(1.05); }
.ws-cell.found{ background: var(--rose); color: #fff; }
.wordsearch-words{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: center;
  max-width: 380px;
}
.ws-word{
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--plum-soft);
  text-transform: uppercase;
  transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}
.ws-word.found{ color: var(--rose); text-decoration: line-through; text-decoration-color: var(--rose); }

/* ---------- Puzzle 4: photo puzzle ---------- */
.photo-puzzle{
  display: grid;
  gap: 3px;
  margin: 0 auto;
  width: min(340px, 82vw);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px -14px rgba(169,79,112,0.4);
}
.photo-tile{
  background-repeat: no-repeat;
  cursor: pointer;
  transition: outline-color .2s, filter .2s, transform .2s;
  outline: 2px solid transparent;
  outline-offset: -2px;
}
.photo-tile.selected{ outline-color: var(--rose); filter: brightness(1.08); transform: scale(0.96); }
.photo-tile.solved-flash{ animation: tileSolved .5s var(--ease); }
@keyframes tileSolved{
  0%{ filter: brightness(1.3); }
  100%{ filter: brightness(1); }
}

/* ---------- Puzzle 5: code input ---------- */
.code-input{
  width: 160px;
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: .12em;
  padding: 14px 10px;
  border-radius: 14px;
  border: 1.5px solid rgba(201,103,138,0.3);
  background: var(--cream);
  color: var(--plum);
  font-family: var(--font-display);
  margin: 8px 0 18px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.code-input:focus{
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 4px rgba(201,103,138,0.15);
}

/* ---------- Reveal overlay (the number "67" moment) ---------- */
.reveal-overlay{
  position: fixed;
  inset: 0;
  background: #0b0708;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s var(--ease-soft);
}
.reveal-overlay.show{ opacity: 1; pointer-events: all; }
.reveal-number{
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(7rem, 40vw, 16rem);
  font-weight: 400;
  opacity: 0;
  letter-spacing: .02em;
  text-shadow:
    0 0 30px rgba(231,196,129,0.55),
    0 0 70px rgba(231,196,129,0.35),
    0 0 120px rgba(231,196,129,0.2);
}
.reveal-number.pop{
  animation: numberIn 1s var(--ease-soft) forwards, numberGlow 2.6s ease-in-out .9s infinite;
}
.reveal-number.fade-out{
  animation: numberOut 1.6s var(--ease-soft) forwards;
}
@keyframes numberIn{
  from{ opacity: 0; transform: scale(.85); }
  to{   opacity: 1; transform: scale(1); }
}
@keyframes numberGlow{
  0%,100%{
    text-shadow: 0 0 30px rgba(231,196,129,0.5), 0 0 70px rgba(231,196,129,0.3), 0 0 120px rgba(231,196,129,0.18);
  }
  50%{
    text-shadow: 0 0 45px rgba(231,196,129,0.75), 0 0 100px rgba(231,196,129,0.45), 0 0 160px rgba(231,196,129,0.28);
  }
}
@keyframes numberOut{
  from{ opacity: 1; }
  to{ opacity: 0; }
}

/* ---------- Final page ---------- */
.final-card{ text-align: center; }
.final-heading{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  font-weight: 400;
  margin: 0 0 30px;
}
.reasons-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  max-height: 52vh;
  overflow-y: auto;
  padding: 4px 6px 4px 0;
  margin-bottom: 20px;
}
.reasons-list::-webkit-scrollbar{ width: 6px; }
.reasons-list::-webkit-scrollbar-thumb{ background: rgba(201,103,138,0.3); border-radius: 4px; }
.reason-item{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
  padding: 10px 16px;
  background: var(--cream);
  border-radius: 12px;
  font-size: .93rem;
  line-height: 1.5;
  border-left: 3px solid var(--blush);
}
.reason-item.shown{ opacity: 1; transform: translateY(0); }
.reason-number{ color: var(--rose); font-weight: 600; margin-right: 6px; font-family: var(--font-display); }

.final-message{
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  color: var(--rose-deep);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s var(--ease-soft), transform 1s var(--ease-soft);
  margin-top: 10px;
}
.final-message.shown{ opacity: 1; transform: translateY(0); }

.skip-hint{
  position: fixed;
  bottom: 14px;
  right: 16px;
  z-index: 25;
  background: none;
  border: none;
  color: rgba(110,85,96,0.45);
  font-size: .74rem;
  letter-spacing: .06em;
  cursor: pointer;
  padding: 6px 8px;
  transition: color .3s;
}
.skip-hint:hover{ color: var(--rose-deep); }

/* ---------- Confetti canvas ---------- */
#confetti-canvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 520px){
  .screen{ padding: 84px 14px 30px; }
  .card{ padding: 34px 24px; border-radius: 18px; }
  .music-toggle{ top: 12px; right: 12px; }
}

@media (max-height: 640px){
  .screen{ padding-top: 70px; }
}