:root {
  --bg-deep: #2b0a0a;
  --bg-mid: #5c1414;
  --gold: #e0a458;
  --pink: #c23b4b;
  --lilac: #f0c9c9;
  --text: #fff5f0;
  --card: #5a1b1b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(ellipse at 50% 0%, var(--bg-mid) 0%, var(--bg-deep) 70%);
  color: var(--text);
  font-family: "Times New Roman", Times, serif;
}

/* ===================== INTRO ===================== */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 1s ease;
}
#intro-overlay.fade-out { opacity: 0; pointer-events: none; }

.intro-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
}

.figure-wrap {
  position: relative;
  width: min(46vw, 260px);
  height: min(46vw, 260px);
}
.figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.35));
}

.photo-avatar {
  border-radius: 50%;
  overflow: hidden;
  background: var(--card);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.15);
}
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kid-photo { object-position: 50% 50%; }
.adult-photo { object-position: 50% 50%; }

.turban-overlay {
  position: absolute;
  left: 8%;
  right: 8%;
  top: -13%;
  width: 84%;
  height: auto;
}

.turban-callout {
  position: absolute;
  top: -8%;
  right: 58%;
  width: 8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  pointer-events: none;
  z-index: 3;
  opacity: 1;
}
#intro-overlay.play-growth .turban-callout {
  animation: calloutFade 5.5s ease-in forwards;
}
@keyframes calloutFade {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
.callout-arrow {
  width: 6rem;
  height: 4.2rem;
}
.speech-bubble {
  background: #fff5f0;
  color: #2b0a0a;
  font-size: 0.75rem;
  padding: 0.45rem 0.65rem;
  border-radius: 12px;
  text-align: center;
  line-height: 1.25;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  white-space: nowrap;
}

.growth-figures .figure-kid {
  opacity: 1;
  transform: scale(0.55);
  transform-origin: 50% 100%;
}
.growth-figures .figure-adult {
  opacity: 0;
  transform: scale(0.55);
  transform-origin: 50% 100%;
}
#intro-overlay.play-growth .growth-figures .figure-kid {
  animation: growOut 5.5s ease-in forwards;
}
#intro-overlay.play-growth .growth-figures .figure-adult {
  animation: growIn 5.5s ease-in forwards;
}
@keyframes growOut {
  0%   { opacity: 1; transform: scale(0.55); }
  65%  { opacity: 1; transform: scale(0.62); }
  100% { opacity: 0; transform: scale(0.72); }
}
@keyframes growIn {
  0%   { opacity: 0; transform: scale(0.5); }
  45%  { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

.wave-figure {
  opacity: 0;
  position: absolute;
  transition: opacity 0.6s ease;
}
#intro-overlay.play-wave .growth-figures { opacity: 0; transition: opacity 0.5s ease; }
#intro-overlay.play-wave .wave-figure { opacity: 1; position: relative; }

.wave-hand {
  position: absolute;
  right: -8%;
  top: 20%;
  font-size: 2.4rem;
  transform-origin: 70% 85%;
  animation: waveArm 0.6s ease-in-out 7 alternate;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}
@keyframes waveArm {
  from { transform: rotate(-10deg); }
  to   { transform: rotate(24deg); }
}

.balloon-row {
  position: absolute;
  left: -20%;
  right: -20%;
  top: -3.6rem;
  height: 6rem;
  z-index: 2;
}
.balloon {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2.5rem;
  height: 3rem;
  border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%;
  transform: translate(calc(-50% + var(--startX)), 40vh) rotate(var(--rot1));
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset -4px -4px 8px rgba(0,0,0,0.15), 0 6px 10px rgba(0,0,0,0.25);
  animation:
    balloonRise 1.8s var(--delay) cubic-bezier(.19,1.3,.4,1) forwards,
    balloonBob 3.2s ease-in-out calc(var(--delay) + 1.8s) infinite;
}
.balloon::after {
  content: "";
  position: absolute;
  bottom: -0.6rem;
  left: 50%;
  width: 1px;
  height: 0.7rem;
  background: rgba(255,255,255,0.5);
}
.balloon-letter {
  font-weight: 700;
  font-size: 0.95rem;
  color: rgba(0,0,0,0.65);
}
@keyframes balloonRise {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--startX)), 40vh) rotate(var(--rot1)); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, 0) rotate(0deg); }
}
@keyframes balloonBob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -8px; }
}

.subtext {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  color: var(--lilac);
  max-width: 30rem;
}
.subtext.show { opacity: 1; transform: translateY(0); }

#skip-intro {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--text);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  z-index: 5;
}
#skip-intro:hover { background: rgba(255,255,255,0.18); }

/* ===================== MAIN PAGE ===================== */
#main-page {
  opacity: 0;
  transition: opacity 0.8s ease;
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
#main-page.show { opacity: 1; }

.page-header { text-align: center; margin-bottom: 2rem; }
.page-header h1 {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  margin: 0 0 0.5rem;
  text-shadow: 0 0 24px rgba(255, 209, 102, 0.5);
}
.page-subtitle { color: var(--lilac); margin: 0 0 1rem; }

#replay-intro {
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--lilac);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
}
#replay-intro:hover { background: rgba(255,255,255,0.08); }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 0.7rem;
}

.box {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  font-family: inherit;
  font-weight: 700;
  color: var(--text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.box:hover { transform: translateY(-2px); }
.box:active { transform: translateY(0); }

.box.available {
  background: linear-gradient(155deg, #7a1f2b, #3d0f14);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.box.available:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0 2px var(--gold);
}

.box.opened {
  background: linear-gradient(155deg, var(--pink), #7a1420);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

.box.locked {
  background: #33130f;
  color: rgba(255,255,255,0.35);
  cursor: not-allowed;
}
.box.locked:hover { transform: none; }

.box-num { font-size: 1rem; }
.box-icon { font-size: 1rem; }

.box.shake { animation: shake 0.4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ===================== MODAL ===================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 6, 20, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 1.5rem;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  position: relative;
  background: var(--card);
  border-radius: 18px;
  padding: 2rem 1.75rem;
  max-width: 26rem;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-card h2 { margin-top: 0; color: var(--gold); }
.modal-card img { max-width: 100%; border-radius: 12px; margin: 0.75rem 0; opacity: 0; }
.modal-card img.anim-fadein { animation: iconIn 1s ease forwards; }

.modal-images {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.5rem 0;
}
.modal-images[hidden] { display: none; }
.modal-images img {
  max-width: 100%;
  border-radius: 12px;
  opacity: 0;
}
.modal-images img.anim-fadein { animation: iconIn 0.9s ease forwards; }

.modal-icon {
  width: 55%;
  max-width: 150px;
  margin: 0.5rem auto 0.75rem;
}
.modal-icon[hidden] { display: none; }
.modal-icon svg { width: 100%; height: auto; display: block; }
.modal-icon.anim-static { animation: iconIn 0.8s ease forwards; }
.modal-icon.anim-reveal { animation: iconRevealFade 4s ease forwards; }
@keyframes iconIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes iconRevealFade {
  0%   { opacity: 0; transform: scale(0.8); }
  25%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
.modal-close {
  position: sticky;
  top: 0;
  float: right;
  margin-left: 0.5rem;
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0.85;
  z-index: 2;
}
.modal-close:hover { opacity: 1; }

/* ===================== TOAST ===================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  background: var(--card);
  color: var(--text);
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 30;
  font-size: 0.9rem;
}