/* ─────────────────────────────────────────────
   BASE (Mobile First)
───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* remove blue tap flash on Android */
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(to bottom, #ffb8cc, #fff0f5 60%, #ffffff);
  font-family: 'Lora', 'Georgia', serif;
  /* Safe area insets for notch/punch-hole phones */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  touch-action: none; /* prevent scroll bounce on iOS */
}

/* ─────────────────────────────────────────────
   CANVAS
───────────────────────────────────────────── */
canvas {
  position: fixed;
  inset: 0;                   /* top/right/bottom/left: 0 */
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 0;
}

/* ─────────────────────────────────────────────
   INSTRUCTIONS LABEL
───────────────────────────────────────────── */
#instructions {
  position: fixed;
  bottom: max(9%, env(safe-area-inset-bottom) + 24px);
  left: 0;
  right: 0;
  text-align: center;
  color: #5a1a6a;
  font-size: clamp(0.85rem, 3.5vw, 1.25rem); /* fluid: small on mobile, big on desktop */
  font-style: italic;
  letter-spacing: 0.03em;
  line-height: 1.5;
  pointer-events: none;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.7s ease-in-out;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.95),
    0 1px 4px rgba(200, 100, 180, 0.2);
  /* prevent text from sitting under notch/island */
  padding: 0 16px;
}

/* ─────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS (min-width = mobile first)
───────────────────────────────────────────── */

/* Tablet and up */
@media (min-width: 600px) {
  #instructions {
    font-size: clamp(1rem, 2vw, 1.4rem);
    bottom: 10%;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  #instructions {
    font-size: 1.3rem;
    bottom: 10%;
  }
}

/* Landscape phones: push instruction higher so it's not cut off */
@media (max-height: 500px) and (orientation: landscape) {
  #instructions {
    bottom: 4%;
    font-size: 0.78rem;
  }
}

/* ─────────────────────────────────────────────
   LETTER OVERLAY (Scene 3)
───────────────────────────────────────────── */
#letter {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom));
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0s; /* controlled by GSAP */
}

#letter-inner {
  background: rgba(253, 240, 213, 0.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(160, 110, 50, 0.3);
  border-radius: 14px;
  padding: clamp(20px, 5vw, 40px) clamp(20px, 6vw, 48px);
  max-width: min(560px, 88vw);
  width: 100%;
  box-shadow:
    0 8px 32px rgba(100, 40, 80, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.letter-body {
  font-family: 'Lora', 'Georgia', serif;
  font-style: italic;
  font-size: clamp(0.95rem, 3.8vw, 1.15rem);
  line-height: 1.75;
  color: #2c1a10;
  margin: 0 0 1.2em;
  text-align: center;
}

.letter-footer {
  font-family: 'Lora', 'Georgia', serif;
  font-style: italic;
  font-size: clamp(0.82rem, 3.2vw, 0.98rem);
  line-height: 1.6;
  color: #6b3a1c;
  margin: 0;
  text-align: center;
}