/* ═══════════════════════════════════════════════════════════════
   Raquel's World — styles
═══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --purple-deep: #0a0520;
  --purple-mid:  #140836;
  --purple:      #1a0a3e;
  --purple-up:   #2a0d6e;
  --pink:        #ff9de2;
  --gold:        #ffd700;
  --teal:        #67e8f9;
  --lav:         #b08fff;
  --green:       #86efac;
  --orange:      #ff9f43;

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bot:    env(safe-area-inset-bottom, 0px);
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--purple-deep);
  font-family: 'Baloo 2', system-ui, sans-serif;
  color: #fff;
  overscroll-behavior: none;
}

body { position: fixed; inset: 0; }

/* Make the [hidden] attribute win over CSS display rules */
[hidden] { display: none !important; }

button { font-family: inherit; color: inherit; cursor: pointer; }
input { font-family: inherit; }

/* ═══════════════ SCREENS ═══════════════ */
.screen {
  position: fixed; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  animation: screen-in .35s ease both;
}
.screen.active { display: flex; }
@keyframes screen-in {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* ═══════════════ BACK BUTTON ═══════════════ */
.back-btn {
  position: fixed;
  top: calc(12px + var(--safe-top)); left: 12px; z-index: 300;
  padding: 8px 18px; border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff; font-size: .9rem; font-weight: 600;
  transition: background .15s, transform .15s;
}
.back-btn:hover, .back-btn:active {
  background: rgba(255,255,255,.22);
  transform: scale(1.05);
}

/* ═══════════════ SECTION HEADERS ═══════════════ */
.sec-title {
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  font-weight: 800; text-align: center;
  padding: calc(60px + var(--safe-top)) 18px 4px;
  text-shadow: 0 0 24px rgba(176,143,255,.45);
  position: relative; z-index: 10;
}
.sec-hint {
  font-size: .85rem; color: rgba(255,255,255,.5);
  text-align: center; padding: 0 18px;
  position: relative; z-index: 10;
}

/* ═══════════════ TWINKLE THE FAIRY ═══════════════ */
#fairy {
  position: fixed; left: 0; top: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 250;
  transition: opacity .4s;
}
.fairy-glow {
  position: absolute; left: -28px; top: -28px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,.7) 0%, rgba(255,157,226,.4) 35%, transparent 70%);
  filter: blur(8px);
  animation: fairy-pulse 1.6s ease-in-out infinite;
}
.fairy-core {
  position: absolute; left: -6px; top: -6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd700 50%, #ff9de2 100%);
  box-shadow: 0 0 12px #ffd700, 0 0 24px #ff9de2;
}
.fairy-name {
  position: absolute; left: 14px; top: -8px;
  font-size: .68rem; font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.5);
  padding: 2px 8px; border-radius: 50px;
  white-space: nowrap;
  animation: fade-in .3s ease;
}
.fairy-zzz {
  position: absolute; left: 8px; top: -22px;
  font-size: .9rem; font-style: italic;
  color: rgba(255,255,255,.7);
  animation: zzz 2s ease-in-out infinite;
}
.fairy.sleeping .fairy-glow { animation-duration: 4s; opacity: .55; }
.fairy.sleeping .fairy-core { box-shadow: 0 0 6px #ffd700; }
@keyframes fairy-pulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.25); opacity: 1; }
}
@keyframes zzz {
  0%, 100% { opacity: .4; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(-4px); }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════ SPARKLE TRAIL LAYER ═══════════════ */
#sparkles {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 240;
}
.sparkle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: sparkle-die var(--dur, .9s) ease-out forwards;
}
@keyframes sparkle-die {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(0); }
}

/* ═══════════════ TREASURE HUD ═══════════════ */
.hud {
  position: fixed;
  top: calc(14px + var(--safe-top)); right: 14px;
  z-index: 200;
  background: rgba(0,0,0,.4);
  border: 1.5px solid rgba(255,215,0,.4);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: .82rem; font-weight: 700;
  color: #fff;
  display: flex; align-items: center; gap: 6px;
  backdrop-filter: blur(10px);
  animation: hud-glow 3s ease-in-out infinite;
}
@keyframes hud-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,.3); }
  50%      { box-shadow: 0 0 20px rgba(255,215,0,.5); }
}

/* ═══════════════════════════════════════════════════════════════
   MAIN SCREEN — LIVING SKY
═══════════════════════════════════════════════════════════════ */
#main { background: var(--purple-deep); }

.sky-layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
  overflow: hidden;
}
.sky-layer.show { opacity: 1; }

#sky-night    { background: radial-gradient(ellipse at 50% 0%, #2a0d6e 0%, #140836 45%, #0a0520 100%); }
#sky-twilight { background: linear-gradient(180deg, #4a1d8a 0%, #2a1158 50%, #150a36 100%); }
#sky-sunset   { background: linear-gradient(180deg, #1d1052 0%, #6e1c64 30%, #ff7846 65%, #ffb46b 100%); }
#sky-day      { background: linear-gradient(180deg, #62b8ff 0%, #a3d8ff 50%, #d8eeff 100%); }
#sky-dawn     { background: linear-gradient(180deg, #1a1147 0%, #6c2d77 35%, #ff9d6e 75%, #ffd6a5 100%); }

/* Star fields */
.sky-stars { position: absolute; inset: 0; }
.sky-stars.sparse > .star { opacity: .5; }
.star {
  position: absolute; border-radius: 50%; background: #fff;
  animation: twinkle var(--dur) ease-in-out infinite var(--del);
}
@keyframes twinkle {
  0%, 100% { opacity: .12; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.5); }
}

.sky-shoots .shoot {
  position: absolute;
  width: 110px; height: 2px;
  background: linear-gradient(90deg, transparent, #fff);
  border-radius: 2px;
  opacity: 0;
  animation: shoot var(--dur) linear infinite var(--del);
}
@keyframes shoot {
  0%   { opacity: 0; transform: rotate(var(--a)) translateX(-60px); }
  4%   { opacity: 1; }
  28%  { opacity: 0; transform: rotate(var(--a)) translateX(500px); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(500px); }
}

/* Moon with phase */
.sky-moon {
  position: absolute;
  top: 8%; right: 12%;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7d6 0%, #f1e7b0 60%, #c9b66e 100%);
  box-shadow: 0 0 40px rgba(255,247,214,.4), inset 0 0 20px rgba(0,0,0,.1);
  overflow: hidden;
}
.sky-moon.small { width: 64px; height: 64px; }
.moon-shadow {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--purple-deep);
  /* JS will set translate / scale based on phase */
}

/* Sun (day) */
.sky-sun {
  position: absolute; top: 10%; right: 12%;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7c2 0%, #ffd34d 50%, #ff8c1a 100%);
  box-shadow: 0 0 60px #ffce4a, 0 0 120px rgba(255,206,74,.4);
  animation: sun-pulse 4s ease-in-out infinite;
}
@keyframes sun-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.sun-rays {
  position: absolute; inset: -40px;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,234,150,.45) 6deg, transparent 12deg, transparent 30deg, rgba(255,234,150,.4) 36deg, transparent 42deg, transparent 60deg, rgba(255,234,150,.4) 66deg, transparent 72deg, transparent 90deg, rgba(255,234,150,.4) 96deg, transparent 102deg, transparent 120deg, rgba(255,234,150,.4) 126deg, transparent 132deg, transparent 150deg, rgba(255,234,150,.4) 156deg, transparent 162deg, transparent 180deg, rgba(255,234,150,.4) 186deg, transparent 192deg, transparent 210deg, rgba(255,234,150,.4) 216deg, transparent 222deg, transparent 240deg, rgba(255,234,150,.4) 246deg, transparent 252deg, transparent 270deg, rgba(255,234,150,.4) 276deg, transparent 282deg, transparent 300deg, rgba(255,234,150,.4) 306deg, transparent 312deg, transparent 330deg, rgba(255,234,150,.4) 336deg, transparent 342deg, transparent 360deg);
  border-radius: 50%;
  filter: blur(2px);
  animation: rays-rot 30s linear infinite;
  opacity: .8;
}
@keyframes rays-rot {
  to { transform: rotate(360deg); }
}

/* Sun low (sunset/dawn) */
.sky-sun-low {
  position: absolute;
  bottom: 12%; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3a8 0%, #ffb046 50%, #ff5e3a 100%);
  box-shadow: 0 0 80px #ffaa55, 0 0 160px rgba(255,128,80,.4);
}
.sky-sun-low.pinkish {
  background: radial-gradient(circle, #fff5d8 0%, #ffd0a0 50%, #ff8888 100%);
  box-shadow: 0 0 80px #ffb888, 0 0 160px rgba(255,160,180,.4);
}

/* Day clouds */
.sky-clouds-day {
  position: absolute; inset: 0;
}
.sky-clouds-day::before, .sky-clouds-day::after {
  content: '';
  position: absolute;
  width: 200px; height: 50px;
  background: rgba(255,255,255,.7);
  border-radius: 100px;
  filter: blur(4px);
  animation: cloud-drift 70s linear infinite;
}
.sky-clouds-day::before { top: 22%; animation-duration: 60s; }
.sky-clouds-day::after  { top: 45%; animation-duration: 90s; animation-delay: -30s; opacity: .55; }

/* Mountain silhouettes (sunset) */
.sky-mountains {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background:
    linear-gradient(135deg, #1a0830 25%, transparent 25.5%) -10px 0 / 80px 80px,
    linear-gradient(225deg, #1a0830 25%, transparent 25.5%) 30px 0 / 100px 100px,
    linear-gradient(180deg, transparent 0%, #1a0830 60%, #0a0520 100%);
}

/* Drifting global clouds */
#skyClouds {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
}
.cloud {
  position: absolute;
  border-radius: 60px;
  background: rgba(255,255,255,.07);
  filter: blur(14px);
  animation: cloud-drift linear infinite;
}
@keyframes cloud-drift {
  from { transform: translateX(-320px); }
  to   { transform: translateX(calc(100vw + 320px)); }
}

/* Main inner layout */
.main-inner {
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; width: 100%;
  gap: 22px; padding: calc(20px + var(--safe-top)) 18px calc(20px + var(--safe-bot));
}

.main-titlewrap { text-align: center; }
.main-title {
  font-size: clamp(2.3rem, 9.5vw, 5rem);
  font-weight: 800; line-height: 1.12;
  background: linear-gradient(140deg, #ffd700 0%, #ffb3e8 38%, #b08fff 68%, #6ee7ff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: title-pulse 5s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(176,143,255,.5));
  cursor: pointer;
  user-select: none;
}
.main-title.day {
  filter: drop-shadow(0 0 20px rgba(255,255,255,.7));
}
@keyframes title-pulse {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(176,143,255,.4)); }
  50%      { filter: drop-shadow(0 0 42px rgba(255,215,0,.55)); }
}

.main-sub {
  margin-top: -10px;
  font-size: clamp(.9rem, 3.5vw, 1.15rem);
  color: rgba(255,255,255,.7);
  letter-spacing: .03em;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.main-meta {
  margin-top: 4px;
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  letter-spacing: .04em;
}

/* Six-portal grid */
.portals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%; max-width: 360px;
}
@media (min-width: 560px) {
  .portals { grid-template-columns: repeat(3, 1fr); max-width: 720px; gap: 14px; }
}
@media (min-width: 1100px) {
  .portals { grid-template-columns: repeat(6, 1fr); max-width: 1100px; }
}

.portal {
  padding: 16px 12px;
  border-radius: 22px;
  border: 1.5px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  cursor: pointer; text-align: center;
  position: relative; overflow: hidden;
  animation: portal-bob 4.2s ease-in-out infinite var(--pd, 0s);
  transition: transform .18s, box-shadow .18s;
}
.portal::before {
  content: ''; position: absolute; inset: 0;
  background: var(--pg, transparent);
  opacity: .14;
  transition: opacity .2s;
}
.portal:hover::before, .portal:active::before { opacity: .28; }
.portal:hover, .portal:active {
  transform: scale(1.05) translateY(-3px) !important;
  box-shadow: 0 14px 44px var(--ps, rgba(0,0,0,.3));
}
@keyframes portal-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.portal-emoji { font-size: 2.1rem; display: block; margin-bottom: 4px; }
.portal-name  { font-size: .92rem; font-weight: 700; }
.portal-hint  { font-size: .68rem; color: rgba(255,255,255,.55); margin-top: 2px; }

/* Audio mute toggle */
.audio-toggle {
  position: fixed;
  bottom: calc(14px + var(--safe-bot)); right: 14px;
  z-index: 200;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.lang-btn {
  position: fixed;
  bottom: calc(14px + var(--safe-bot)); left: 14px;
  z-index: 200;
  padding: 0 12px; height: 42px;
  border-radius: 21px;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  font-size: .82rem; font-weight: 700;
  color: #fff;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s;
}
.lang-btn:hover { background: rgba(255,255,255,.2); }

/* ═══════════════════════════════════════════════════════════════
   BUBBLES
═══════════════════════════════════════════════════════════════ */
#bubbles { background: radial-gradient(ellipse at 30% 80%, #1e0c5e 0%, #0f0630 60%, #0a0520 100%); }
#bub-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
}
.bub-counter {
  position: absolute;
  top: calc(14px + var(--safe-top)); right: 14px;
  z-index: 12;
  background: rgba(0,0,0,.4);
  border: 1.5px solid rgba(255,157,226,.4);
  border-radius: 50px;
  padding: 6px 14px;
  font-size: .85rem; font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   PIANO
═══════════════════════════════════════════════════════════════ */
#piano {
  background: radial-gradient(ellipse at 50% 40%, #1a0850 0%, #0d0430 60%, #0a0520 100%);
  justify-content: center;
}
.piano-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  padding: 0 12px;
}
.keys-row {
  display: flex; gap: clamp(4px, 1.3vw, 8px);
  padding: 14px 14px 20px;
  background: rgba(0,0,0,.35);
  border-radius: 20px;
  box-shadow: 0 0 50px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.05);
}
.key {
  width: clamp(32px, 8.8vw, 56px);
  height: clamp(120px, 25vh, 170px);
  border-radius: 10px; cursor: pointer;
  user-select: none; touch-action: manipulation;
  position: relative;
  transition: transform .08s, filter .08s;
}
.key:active, .key.pressed {
  transform: scaleY(.93) translateY(5px);
  filter: brightness(1.6) saturate(1.3);
}
.key.glow {
  animation: key-glow .8s ease;
}
@keyframes key-glow {
  0%, 100% { box-shadow: 0 7px 0 var(--bot), 0 10px 18px var(--top); }
  50%      { box-shadow: 0 7px 0 var(--bot), 0 0 30px #fff, 0 0 60px var(--top); filter: brightness(1.8); }
}
.key-label {
  position: absolute; bottom: 9px; left: 50%;
  transform: translateX(-50%);
  font-size: clamp(.5rem, 1.5vw, .65rem);
  font-weight: 700; color: rgba(255,255,255,.78);
  pointer-events: none;
}
.piano-controls {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: center;
}
.chip {
  padding: 8px 16px;
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .85rem; font-weight: 600;
  backdrop-filter: blur(10px);
  transition: background .15s, transform .15s;
}
.chip:hover, .chip:active { background: rgba(255,255,255,.18); transform: scale(1.04); }
.chip.primary { background: linear-gradient(135deg, #ffd700, #f472b6); color: #1a0a3e; border-color: transparent; }
.chip.danger  { background: rgba(255,80,120,.15); border-color: rgba(255,80,120,.4); }
.chip.active  { background: rgba(255,215,0,.25); border-color: rgba(255,215,0,.6); }
.chip.hidden  { display: none; }

.note-float {
  position: fixed; font-size: 1.6rem;
  pointer-events: none; z-index: 999;
  animation: note-rise 1.1s ease-out forwards;
}
@keyframes note-rise {
  0%   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-130px) scale(.5) rotate(20deg); }
}

/* ═══════════════════════════════════════════════════════════════
   PAINTING
═══════════════════════════════════════════════════════════════ */
#painting {
  background: radial-gradient(ellipse at 50% 50%, #1c0a48 0%, #100530 60%, #0a0520 100%);
}
#paint-canvas {
  position: absolute;
  top: 56px; left: 0; right: 0;
  bottom: 130px;
  width: 100%; height: calc(100% - 186px);
  touch-action: none;
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.08);
}
.paint-title {
  position: absolute; top: calc(14px + var(--safe-top)); left: 50%;
  transform: translateX(-50%);
  padding: 0; font-size: 1.2rem; z-index: 12;
}
.paint-dock {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 8px 10px calc(10px + var(--safe-bot));
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 6px;
  z-index: 11;
}
.paint-brushes, .paint-colors, .paint-actions {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}
.brush-btn, .color-btn {
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  transition: transform .12s, border-color .15s;
}
.brush-btn.active, .color-btn.active {
  border-color: #ffd700;
  transform: scale(1.12);
  box-shadow: 0 0 16px rgba(255,215,0,.5);
}

/* ═══════════════════════════════════════════════════════════════
   SPELLS
═══════════════════════════════════════════════════════════════ */
#spells {
  background: radial-gradient(ellipse at 50% 60%, #2a0d6e 0%, #140836 50%, #0a0520 100%);
}
#spell-canvas {
  position: absolute;
  top: 200px; bottom: 80px; left: 10px; right: 10px;
  width: calc(100% - 20px); height: calc(100% - 280px);
  touch-action: none;
  border-radius: 20px;
  border: 1.5px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.025);
}
.spell-journal {
  position: relative; z-index: 10;
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: center;
  padding: 12px 16px;
  width: 100%; max-width: 480px; margin: 0 auto;
}
.spell-entry {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  transition: transform .2s, box-shadow .2s;
}
.spell-entry.discovered {
  background: rgba(255,215,0,.15);
  border-color: rgba(255,215,0,.5);
  box-shadow: 0 0 18px rgba(255,215,0,.3);
}
.spell-entry.locked { color: rgba(255,255,255,.25); }
.spell-result {
  position: absolute;
  bottom: 32px; left: 50%; transform: translateX(-50%);
  font-size: 1rem; font-weight: 700;
  color: #fff;
  text-shadow: 0 0 12px rgba(255,215,0,.6);
  pointer-events: none;
  z-index: 12;
  opacity: 0;
  transition: opacity .3s;
}
.spell-result.show { opacity: 1; }

/* Effect overlays */
.fx-layer {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 500;
}
.fx-flash {
  position: fixed; inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none; z-index: 600;
  animation: flash 1s ease-out forwards;
}
@keyframes flash {
  0%  { opacity: 0; }
  10% { opacity: .85; }
  100%{ opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   STAR MAP
═══════════════════════════════════════════════════════════════ */
#starmap {
  background: radial-gradient(ellipse at 50% 0%, #1f0d56 0%, #100530 60%, #0a0520 100%);
}
#starmap-canvas {
  position: absolute;
  top: 110px; bottom: 80px; left: 0; right: 0;
  width: 100%; height: calc(100% - 190px);
  touch-action: none;
}
.starmap-tools {
  position: absolute; bottom: calc(20px + var(--safe-bot)); left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 10px;
  z-index: 12;
}
.starmap-stats {
  position: absolute;
  top: calc(58px + var(--safe-top)); right: 14px;
  font-size: .78rem; color: rgba(255,255,255,.6);
  z-index: 12;
}
.starmap-clear {
  position: absolute;
  top: calc(80px + var(--safe-top)); right: 14px;
  font-size: .72rem; opacity: .7;
  z-index: 12;
}
.starmap-clear:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   LETTERS
═══════════════════════════════════════════════════════════════ */
#letters {
  background: radial-gradient(ellipse at 50% 0%, #2a0d6e 0%, #140836 50%, #0a0520 100%);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.letters-wrap {
  width: 100%; max-width: 480px;
  padding: 0 16px calc(50px + var(--safe-bot));
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
}
.letters-heading {
  font-size: 1.7rem; font-weight: 800;
  text-align: center; padding: calc(60px + var(--safe-top)) 0 8px;
}

/* Letter card */
.lcard {
  border-radius: 22px; overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(14px);
  position: relative;
  --theme1: #ffd700;
  --theme2: #ff9de2;
  transition: box-shadow .3s, border-color .3s;
}
.lcard.is-open {
  border-color: rgba(255,215,0,.4);
  box-shadow: 0 0 24px rgba(255,215,0,.12);
}
.lcard.opening { box-shadow: 0 0 32px rgba(255,215,0,.4); }

.env-row {
  display: flex; align-items: center;
  gap: 13px; padding: 18px;
}
.env-icon {
  font-size: 2rem; flex-shrink: 0;
  animation: env-sway 3.8s ease-in-out infinite var(--ed, 0s);
}
@keyframes env-sway {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  50%      { transform: rotate(5deg) scale(1.12); }
}
.env-text { flex: 1; min-width: 0; }
.env-title { font-size: .97rem; font-weight: 700; line-height: 1.3; }
.env-date  { font-size: .76rem; color: rgba(255,255,255,.52); margin-top: 2px; }

.env-badge {
  flex-shrink: 0;
  font-size: .66rem; font-weight: 800;
  padding: 4px 12px; border-radius: 50px;
  background: linear-gradient(135deg, var(--theme1), var(--theme2));
  color: #1a0a3e; letter-spacing: .04em;
}
.env-lock { font-size: 1.4rem; flex-shrink: 0; opacity: .8; }

.env-cd {
  margin: 0 18px 16px;
  padding: 10px 14px;
  background: rgba(0,0,0,.25); border-radius: 12px;
  font-size: .82rem; color: rgba(255,255,255,.55);
  text-align: center;
}

/* Sealed envelope */
.env-sealed {
  position: relative;
  margin: 8px 18px 18px;
  height: 130px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--theme1) 0%, var(--theme2) 100%);
  cursor: pointer;
  overflow: visible;
  transform-style: preserve-3d;
  perspective: 1000px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.env-sealed::before {
  /* paper body */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(0,0,0,.05) 100%);
  border-radius: 14px;
}
.env-flap {
  position: absolute; top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(160deg, var(--theme1), var(--theme2));
  filter: brightness(.75);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform .9s cubic-bezier(.4, .8, .3, 1);
  z-index: 2;
}
.env-seal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd96e 0%, #c98c1c 60%, #6a3f00 100%);
  box-shadow: 0 0 0 3px rgba(255,255,255,.2), 0 4px 8px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #fff;
  z-index: 3;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  transition: transform .4s, opacity .4s;
}
.env-tap-hint {
  position: absolute;
  bottom: 14px; left: 50%; transform: translateX(-50%);
  font-size: .72rem; font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: .04em;
  z-index: 4;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  animation: tap-pulse 1.6s ease-in-out infinite;
}
@keyframes tap-pulse {
  0%, 100% { opacity: .65; }
  50%      { opacity: 1; }
}
.env-sealed.opened .env-flap {
  transform: rotateX(180deg);
}
.env-sealed.opened .env-seal {
  transform: translate(-50%, -50%) scale(2.5);
  opacity: 0;
}
.env-sealed.opened .env-tap-hint { opacity: 0; }

.lbody {
  padding: 0 18px 20px;
  animation: letter-in .55s ease forwards;
}
@keyframes letter-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.letter-paper {
  background: rgba(255,255,255,.09);
  border-radius: 14px; padding: 18px 20px;
  font-family: 'Caveat', cursive;
  font-size: 1.18rem;
  line-height: 1.55;
  color: rgba(255,255,255,.95);
  position: relative;
}
.letter-paper::before {
  content: '\201C';
  position: absolute; top: -10px; left: 12px;
  font-size: 4.5rem; line-height: 1;
  color: rgba(255,215,0,.22);
  font-family: Georgia, serif; pointer-events: none;
}
.letter-paper.secret {
  background: linear-gradient(135deg, rgba(255,215,0,.15), rgba(255,157,226,.15));
  border: 1px solid rgba(255,215,0,.4);
  box-shadow: inset 0 0 20px rgba(255,215,0,.1);
}

/* ═══════════════════════════════════════════════════════════════
   DIALOG
═══════════════════════════════════════════════════════════════ */
.dialog {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  z-index: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: dialog-bg-in .3s ease;
}
@keyframes dialog-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.dialog-card {
  width: 100%; max-width: 320px;
  background: linear-gradient(180deg, #2a0d6e, #140836);
  border: 1.5px solid rgba(255,215,0,.4);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 0 40px rgba(255,215,0,.2);
  display: flex; flex-direction: column; gap: 14px;
  animation: dialog-pop .35s cubic-bezier(.5, 1.6, .5, 1);
}
@keyframes dialog-pop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
.dialog-card h3 {
  font-size: 1.1rem; font-weight: 700;
  text-align: center;
}
.dialog-card input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.3);
  color: #fff;
  font-size: 1rem;
  outline: none;
}
.dialog-card input:focus { border-color: rgba(255,215,0,.6); }
.dialog-actions {
  display: flex; gap: 10px;
  justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  top: calc(70px + var(--safe-top));
  left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,215,0,.4);
  border-radius: 50px;
  padding: 8px 18px;
  font-size: .9rem; font-weight: 600;
  color: #fff;
  z-index: 800;
  animation: toast-in .35s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ═══════════════════════════════════════════════════════════════
   FX UTILITIES
═══════════════════════════════════════════════════════════════ */
.confetti, .float-heart, .float-particle {
  position: fixed;
  pointer-events: none;
  z-index: 600;
}

/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .star, .shoot, .cloud { animation: none !important; }
  #fairy { display: none; }
}