*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  background: radial-gradient(120% 100% at 50% 0%, var(--bg-color-2) 0%, var(--bg-color) 60%);
  color: var(--text-color);
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.app-root { display: flex; flex-direction: column; height: 100vh; height: 100dvh; width: 100vw; position: relative; }

/* Ambient background texture — very subtle, always present, never distracting */
.app-root::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.35) 0, transparent 60%),
    radial-gradient(1px 1px at 80% 40%, rgba(255,255,255,0.25) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 75%, rgba(255,255,255,0.2) 0, transparent 60%),
    radial-gradient(1px 1px at 30% 85%, rgba(255,255,255,0.3) 0, transparent 60%),
    radial-gradient(1px 1px at 90% 90%, rgba(255,255,255,0.2) 0, transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

::selection { background: rgba(232, 137, 154, 0.35); }

/* Safety net: only break a word if it truly cannot fit on its own line
   (e.g. one very long unbroken name). Normal sentences wrap at spaces only. */
h1, h2, h3, p, span, div, button {
  overflow-wrap: normal;
  word-break: normal;
}
.story-text, .photo-caption, .handwritten, .ending-title, .ending-subtitle,
.ending-credit, .interactive-message, .header-title, .kicker, .envelope-hint {
  overflow-wrap: break-word;
}