:root {
  --ink: #05040b;
  --night: #0a0d24;
  --plum: #1a0d29;
  --cream: #fff4e6;
  --gold: #f7d58b;
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  /* iOS: keep text at its size when rotating; no rubber-band scroll. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
  background: var(--ink);
  color: var(--cream);
}

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* A long press on the words should not open the copy/select menu. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(120% 80% at 70% 15%, rgba(40, 18, 60, 0.55), transparent 60%),
    radial-gradient(90% 70% at 15% 90%, rgba(12, 20, 52, 0.7), transparent 65%),
    linear-gradient(180deg, var(--ink) 0%, var(--night) 55%, var(--plum) 100%);
}

#garden {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Taps and drags belong to the flowers, not to browser gestures. */
  touch-action: none;
}

/* Darkens the scene a touch while the message appears (opacity set by JS). */
.veil {
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 8, 0.38);
  opacity: 0;
  pointer-events: none;
}

/* Soft shadow behind the words so they stay readable over any digit. */
.halo {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(5, 4, 11, 0.72), rgba(5, 4, 11, 0.35) 60%, transparent);
}

/* The message box; its two passages (the love letter, then the kasımpatı
   sentence) take turns in the same place. Position and size are set by JS. */
.message {
  position: absolute;
  margin: 0;
  pointer-events: none;
}

.passage {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: 0.01em;
  color: var(--cream);
  text-wrap: balance;
  will-change: opacity, transform;
}

/* Atom labels for the dopamine drawing (positioned by JS). */
.chem-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}


.chem-atom,
.chem-caption {
  position: absolute;
  opacity: 0;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 6px rgba(5, 4, 11, 0.9), 0 0 12px rgba(5, 4, 11, 0.8);
}

.chem-atom {
  font: 600 14px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--cream);
}

/* The O of "HO" and the N of "NH₂" sit on the atom itself. */
.chem-atom.anchor-end { transform: translate(calc(-100% + 0.32em), -50%); }
.chem-atom.anchor-start { transform: translate(-0.32em, -50%); }

.chem-caption {
  font: italic 500 13px/1 var(--serif);
  letter-spacing: 0.03em;
  color: var(--gold);
}

.passage .lines { display: block; max-width: 100%; }

.passage.stacked .phrase { display: block; }

.message .word {
  display: inline-block;
  white-space: nowrap;
}

.message .char {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
  text-shadow: 0 0 18px rgba(247, 213, 139, 0.18);
}

.noscript { inset: 0; font: italic 500 1.6rem/1.35 var(--serif); padding: 1rem; text-align: center; }
.noscript .char { opacity: 1; }

.replay {
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid rgba(255, 244, 230, 0.22);
  border-radius: 999px;
  background: rgba(10, 8, 22, 0.45);
  color: rgba(255, 244, 230, 0.82);
  font: italic 500 1.05rem/1 var(--serif);
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 1.6s ease, transform 1.6s ease, border-color 0.3s, color 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.replay.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.music {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 16px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 244, 230, 0.18);
  border-radius: 999px;
  background: rgba(10, 8, 22, 0.4);
  color: rgba(255, 244, 230, 0.55);
  font: italic 500 1rem/1 var(--serif);
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: color 0.3s, border-color 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.music[hidden] { display: none; }

.music.on {
  color: var(--cream);
  border-color: rgba(247, 213, 139, 0.55);
}

.music:hover,
.music:focus-visible,
.replay:hover,
.replay:focus-visible {
  border-color: rgba(247, 213, 139, 0.6);
  color: var(--cream);
  outline: none;
}