:root {
  --sky-top: #02030a;
  --sky-mid: #0a1030;
  --sky-low: #1a1640;
  --firefly: #ffe9a8;
  --firefly-core: #fff7d6;
  --firefly-glow: rgba(255, 196, 92, 0.85);
  --font-size: clamp(2.6rem, 15.5vw, 8rem);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--sky-top);
}

body {
  position: fixed;
  inset: 0;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background:
    radial-gradient(120% 70% at 50% 110%, var(--sky-low) 0%, transparent 60%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 65%, #141238 100%);
  color: var(--firefly);
  font-family: "Georgia", "Iowan Old Style", "Palatino Linotype", serif;
  cursor: default;
}

#sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 214, 140, 0.22) 0%, rgba(255, 190, 110, 0.08) 35%, transparent 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
#glow.on { opacity: 1; }

#stage {
  position: absolute;
  inset: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#word {
  margin: 0;
  font-size: var(--font-size);
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
}

/* Individual firefly letters (created by script.js). */
.ch {
  display: inline-block;
  color: var(--firefly-core);
  text-shadow:
    0 0 0.06em var(--firefly-core),
    0 0 0.2em var(--firefly-glow),
    0 0 0.55em rgba(255, 160, 60, 0.45);
  will-change: transform, opacity;
  opacity: 0;
}
.ch.space { width: 0.28em; }

#hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 28px);
  margin: 0;
  text-align: center;
  font: 500 0.75rem/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 233, 168, 0.4);
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
#hint.show { opacity: 1; }
#hint.gone { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  #glow { transition: none; }
  #hint { transition: none; }
}