/* ══════════════════════════════════════════════════════════════════════
   Edelmis — night-garden stylesheet
   Palette: aubergine night, Havana rose & apricot, cream paper, cedar green
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --night-1: #1b1230;   /* deepest sky */
  --night-2: #2a1a45;   /* dusk plum */
  --night-3: #3d2a5c;   /* lifted plum (cards, nav) */
  --rose:    #f2a7b8;   /* petal pink */
  --rose-2:  #e07a97;   /* deeper rose */
  --apricot: #f5b97f;   /* warm Havana light */
  --gold:    #ffe4a8;   /* moonlight */
  --cream:   #f7ebdd;   /* paper */
  --cream-2: #eed7bd;   /* paper shadow */
  --ink:     #3b2440;   /* text on paper */
  --cedar:   #7fb58a;   /* green accent */
  --sea:     #4d7fa3;

  --text:    #f3e9f2;
  --text-2:  rgba(243, 233, 242, .72);
  --text-3:  rgba(243, 233, 242, .5);

  --card:        rgba(61, 42, 92, .45);
  --card-border: rgba(242, 167, 184, .16);
  --nav-bg:      rgba(27, 18, 48, .55);
  --menu-bg:     rgba(27, 18, 48, .96);
  --chip:        rgba(242, 167, 184, .1);
  --chip-border: rgba(242, 167, 184, .25);
  --heading:     #ffe4a8;
  --accent:      #f2a7b8;
  --sky-bg:
    radial-gradient(120% 70% at 50% 110%, #4a2a52 0%, transparent 60%),
    linear-gradient(180deg, #1b1230 0%, #2a1a45 55%, #3a2352 100%);
  --star-opacity: 1;
  --moon-bg: radial-gradient(circle at 38% 34%, #fff8e6, #f1d9a8 70%);
  --moon-glow: 0 0 40px 12px rgba(255, 228, 168, .18), 0 0 120px 40px rgba(255, 228, 168, .08);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --script: 'Parisienne', 'Brush Script MT', cursive;
  --sans: 'Karla', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow-paper: 0 30px 60px -30px rgba(0,0,0,.6), 0 8px 24px -12px rgba(0,0,0,.4);
}

/* ── Day: follows Cuba's clock ── */
body[data-mode="day"] {
  --night-1: #f6dcc7;
  --night-2: #f9e6d5;
  --night-3: #ffffff;
  --gold:    #b9455f;
  --heading: #b9455f;
  --accent:  #d4577a;
  --rose:    #e07a97;
  --apricot: #e8955c;
  --text:    #3b2440;
  --text-2:  rgba(59, 36, 64, .74);
  --text-3:  rgba(59, 36, 64, .52);
  --card:        rgba(255, 255, 255, .5);
  --card-border: rgba(185, 69, 95, .2);
  --nav-bg:      rgba(255, 246, 238, .72);
  --menu-bg:     rgba(255, 246, 238, .97);
  --chip:        rgba(185, 69, 95, .08);
  --chip-border: rgba(185, 69, 95, .25);
  --sky-bg:
    radial-gradient(120% 60% at 50% 115%, #ffd9bd 0%, transparent 60%),
    linear-gradient(180deg, #9fc4e6 0%, #cfdff2 42%, #f7dccb 78%, #f6d0bd 100%);
  --star-opacity: 0;
  --moon-bg: radial-gradient(circle at 40% 38%, #fff6d8, #ffd27a 60%, #f5b97f 100%);
  --moon-glow: 0 0 40px 14px rgba(255, 210, 122, .35), 0 0 140px 50px rgba(255, 210, 122, .18);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--night-1);
  overflow-x: hidden;
  transition: background .9s var(--ease), color .9s var(--ease);
}
img, svg { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ───────────────────────── Sky ───────────────────────── */
.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--sky-bg);
  transition: background .9s var(--ease);
}
.sky::after { content: ""; position: absolute; inset: 0; background: var(--sky-bg); opacity: 0; }
.sky-stars { position: absolute; inset: 0; opacity: var(--star-opacity); transition: opacity .9s; }
.sky-stars span {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; opacity: .75;
  animation: twinkle var(--d, 4s) ease-in-out var(--o, 0s) infinite alternate;
}
.sky-moon {
  position: absolute; top: 78px; right: 5vw; width: 46px; height: 46px; border-radius: 50%; transition: opacity .6s;
  background: radial-gradient(circle at 38% 34%, #fff8e6, #f1d9a8 70%);
  box-shadow: 0 0 40px 12px rgba(255, 228, 168, .18), 0 0 120px 40px rgba(255, 228, 168, .08);
}
.sky-haze {
  position: absolute; inset: auto 0 0 0; height: 40vh;
  background: linear-gradient(180deg, transparent, rgba(242, 167, 184, .08));
}
@media (min-width: 880px) { .sky-moon { top: 9vh; right: 8vw; width: 64px; height: 64px; } }
@keyframes twinkle { from { opacity: .25; transform: scale(.8);} to { opacity: .9; transform: scale(1.2);} }

/* ───────────────────────── Flower shower ───────────────────────── */
.flower-shower { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.flower {
  position: absolute; top: -80px; left: var(--x, 50%);
  width: var(--s, 28px); height: var(--s, 28px);
  animation:
    fall var(--dur, 7s) linear var(--delay, 0s) forwards,
    sway var(--sw, 3s) ease-in-out var(--delay, 0s) infinite alternate;
  opacity: 0;
}
.flower svg { width: 100%; height: 100%; animation: spin var(--spin, 6s) linear infinite; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
@keyframes fall {
  0%   { transform: translateY(0); opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(115vh); opacity: 0; }
}
@keyframes sway { from { margin-left: -24px; } to { margin-left: 24px; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────────────────── Nav ───────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem;
  background: var(--nav-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--card-border);
  transition: background .9s;
}
.nav-brand {
  font-family: var(--script); font-size: 1.85rem; line-height: 1;
  color: var(--accent); text-decoration: none;
}
.nav-links {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column; gap: .25rem; padding: .75rem 1rem 1.1rem;
  background: var(--menu-bg); border-bottom: 1px solid var(--card-border);
}
.nav-links.open { display: flex; }
.nav-links a, .logout-link {
  display: block; padding: .6rem .5rem; border-radius: 8px;
  color: var(--text-2); text-decoration: none; font-size: 1.15rem;
  background: none; border: 0; text-align: left; width: 100%;
}
.nav-links a.active, .nav-links a:hover, .logout-link:hover { color: var(--text); background: var(--chip); }
.logout-form { margin: .25rem 0 0; padding-top: .5rem; border-top: 1px solid var(--card-border); }
.logout-link { color: var(--text-3); font-style: italic; }

.nav-controls { display: flex; align-items: center; gap: .6rem; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .7rem; border-radius: 999px;
  background: var(--chip); border: 1px solid var(--chip-border);
  font-family: var(--sans); font-size: .78rem; letter-spacing: .04em; color: var(--text-3);
}
.lang-toggle span.active { color: var(--gold); }
.lang-sep { opacity: .5; }
.nav-burger {
  display: inline-flex; flex-direction: column; gap: 5px; padding: .5rem;
  background: none; border: 0;
}
.nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--accent); transition: transform .3s var(--ease), opacity .3s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (min-width: 880px) {
  .nav { padding: .9rem 2rem; }
  .nav-links { display: flex; position: static; flex-direction: row; align-items: center; gap: .2rem; padding: 0; background: none; border: 0; }
  .nav-links a { font-size: 1.05rem; padding: .4rem .7rem; width: auto; }
  .logout-form { margin: 0 0 0 .5rem; padding: 0 0 0 .6rem; border: 0; border-left: 1px solid rgba(242,167,184,.18); }
  .logout-link { width: auto; padding: .4rem .6rem; font-size: 1rem; }
  .nav-burger { display: none; }
}

/* ───────────────────────── Views ───────────────────────── */
main { position: relative; z-index: 1; }
.view { display: none; padding: 2.25rem 1.25rem 5rem; max-width: 720px; margin: 0 auto; text-align: center; }
.view.active { display: block; animation: view-in .6s var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none;} }

.section-heading {
  margin: 0 0 1.25rem; font-weight: 500; font-size: clamp(2rem, 6vw, 2.75rem); line-height: 1.1;
  color: var(--heading); letter-spacing: -.01em;
}

.btn, .btn-ghost {
  display: inline-block; padding: .8rem 1.6rem; border-radius: 999px;
  font-size: 1.1rem; text-decoration: none; transition: transform .25s var(--ease), background .25s;
}
.btn { background: linear-gradient(135deg, var(--rose), var(--apricot)); color: var(--night-1); border: 0; font-weight: 600; }
.btn:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--chip-border); }
.btn-ghost:hover { color: var(--text); background: var(--chip); }

/* ───────────────────────── Home: our world ───────────────────────── */
.home { padding-top: 1.75rem; }
.home-name { margin: 0; font-family: var(--script); font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: 1; color: var(--accent); }
.home-title {
  margin: .25rem 0 1.5rem; font-weight: 400; font-size: clamp(1.6rem, 5.6vw, 2.3rem); line-height: 1.15;
  color: var(--text-2); letter-spacing: .01em;
}
.home-title span { display: block; }
.home-title-line2 { color: var(--text); font-style: italic; font-weight: 500; font-size: 1.15em; }

.world-wrap { margin: 2rem auto 0; max-width: 380px; }
.world { width: 100%; height: auto; display: block; overflow: visible; }
.world-halo { fill: none; stroke: rgba(242,167,184,.16); stroke-width: 1; }
.world-rim { fill: none; stroke: rgba(255,228,168,.35); stroke-width: 1.5; }
.world-moon { filter: drop-shadow(0 0 10px rgba(255, 228, 168, .55)); }
.world-day { fill: #fff; opacity: .8; animation: twinkle var(--d, 3s) ease-in-out var(--o, 0s) infinite alternate; }
.world-wave { animation: wave 5s ease-in-out infinite alternate; }
.world-wave-2 { animation-duration: 7s; animation-delay: -2s; }
@keyframes wave { from { transform: translateX(-6px);} to { transform: translateX(6px);} }
#wSky stop, #wSea stop, #wMoon stop { transition: stop-color .9s; }
body[data-mode="day"] #wSky stop:nth-child(1) { stop-color: #dbe9f7; }
body[data-mode="day"] #wSky stop:nth-child(2) { stop-color: #a9cbe9; }
body[data-mode="day"] #wSky stop:nth-child(3) { stop-color: #7fb0dc; }
body[data-mode="day"] #wSea stop:nth-child(1) { stop-color: #6fb3d6; }
body[data-mode="day"] #wSea stop:nth-child(2) { stop-color: #3f86b3; }
body[data-mode="day"] #wMoon stop:nth-child(1) { stop-color: #fff6d8; }
body[data-mode="day"] #wMoon stop:nth-child(2) { stop-color: #f7b95e; }
body[data-mode="day"] .world-moon { filter: drop-shadow(0 0 14px rgba(255, 200, 100, .8)); }
body[data-mode="day"] .world-day { opacity: .22; animation: none; }
body[data-mode="day"] .world-light { opacity: 0; animation: none; }
body[data-mode="day"] .world-rim { stroke: rgba(185, 69, 95, .35); }
body[data-mode="day"] .world-halo { stroke: rgba(185, 69, 95, .15); }
.world-cedar { transform-box: fill-box; transform-origin: bottom center; animation: breeze 6s ease-in-out infinite alternate; }
.world-palm-fronds { transform-box: fill-box; transform-origin: 50% 100%; animation: breeze 4.5s ease-in-out -1s infinite alternate; }
@keyframes breeze { from { rotate: -1.5deg; } to { rotate: 1.5deg; } }
.world-light { animation: glow 2.8s ease-in-out infinite alternate; }
.world-light-2 { animation-delay: -1.4s; }
@keyframes glow { from { opacity: .5; } to { opacity: 1; } }
.world-note { margin: 1rem auto 0; max-width: 34ch; font-size: 1rem; font-style: italic; color: var(--text-3); line-height: 1.5; }

.together { margin: 0 auto; max-width: 520px; }
.together-label { margin: 0 0 .6rem; font-size: 1.1rem; color: var(--text-2); font-style: italic; }
.together-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem;
  padding: 1rem .5rem; border-radius: 22px;
  background: var(--card); border: 1px solid var(--card-border); transition: background .9s, border-color .9s;
}
.together-cell { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.together-num { font-size: clamp(1.6rem, 6.5vw, 2.4rem); font-weight: 500; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; }
.together-unit { font-size: .85rem; color: var(--text-3); }
.together-since { margin: .8rem 0 0; font-size: 1rem; color: var(--text-3); }
.together-since time { color: var(--text-2); font-style: italic; }

.together-fun {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; text-align: left;
}
.together-fun li { font-size: .98rem; color: var(--text-3); line-height: 1.35; }
.together-fun strong { display: block; font-weight: 500; font-size: 1.35rem; color: var(--accent); font-variant-numeric: tabular-nums; }



/* ───────────────────────── Letter ───────────────────────── */
.letter-stage { position: relative; min-height: 380px; display: grid; place-items: center; }

.sealed {
  position: relative; width: min(340px, 90vw); aspect-ratio: 1.45; border: 0; background: none;
  display: grid; place-items: center; transition: transform .35s var(--ease);
}
.sealed:hover { transform: translateY(-3px) rotate(-.5deg); }
.sealed-paper {
  position: absolute; inset: 0; border-radius: 6px; background: var(--cream);
  box-shadow: var(--shadow-paper);
  background-image: repeating-linear-gradient(0deg, transparent 0 30px, rgba(59,36,64,.05) 30px 31px);
}
.sealed-fold {
  position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(to bottom right, var(--cream) 49.6%, transparent 50%) top / 100% 52% no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.12));
}
.sealed-fold::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 52%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #fbf1e3, var(--cream-2));
}
.sealed-name {
  position: absolute; bottom: 14%; left: 50%; transform: translateX(-50%);
  font-family: var(--script); font-size: 2rem; color: var(--ink); opacity: .85;
}
.wax {
  position: relative; z-index: 2; width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c94d68, #8a2b3f 70%);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.25), 0 6px 14px -6px rgba(0,0,0,.6);
  display: grid; place-items: center; margin-top: -10%;
  animation: wax-pulse 3s ease-in-out infinite;
}
.wax svg { width: 34px; height: 34px; fill: rgba(255,255,255,.75); }
@keyframes wax-pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.06);} }
.sealed-hint { position: absolute; bottom: -2.2rem; left: 0; right: 0; font-size: 1rem; font-style: italic; color: var(--text-3); }
.sealed.opening { animation: seal-open .7s var(--ease) forwards; }
@keyframes seal-open { 40% { transform: scale(1.04);} 100% { transform: scale(.9); opacity: 0; } }
.sealed-petals { position: absolute; inset: 0; pointer-events: none; }
.sealed-petals i {
  position: absolute; left: 50%; top: 45%; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--rose); opacity: 0;
}
.sealed.opening .sealed-petals i { animation: petal-burst .9s var(--ease) forwards; }
@keyframes petal-burst {
  0% { opacity: 1; transform: translate(0,0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) rotate(var(--pr)); }
}

.paper {
  display: none; position: relative; width: min(560px, 94vw); padding: 2.25rem 1.5rem 1.5rem;
  border-radius: 8px; background: var(--cream); color: var(--ink); text-align: left;
  box-shadow: var(--shadow-paper);
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(242,167,184,.18), transparent 50%),
    radial-gradient(90% 60% at 0% 100%, rgba(127,181,138,.14), transparent 50%);
}
.paper.open { display: block; animation: paper-in .8s var(--ease) both; }
@keyframes paper-in { from { opacity: 0; transform: translateY(14px) scale(.98);} to { opacity: 1; transform: none;} }
.paper.closing { animation: paper-away .7s var(--ease) forwards; }
@keyframes paper-away {
  0%   { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(18px) scale(.94); }
}
.sealed.resealing { animation: reseal .7s var(--ease) both; }
@keyframes reseal {
  0%   { opacity: 0; transform: scale(.94); }
  100% { opacity: 1; transform: none; }
}
.sealed.resealing .wax { animation: wax-settle .7s var(--ease) both; }
@keyframes wax-settle { 0% { transform: scale(1.25); opacity: 0; } 45% { opacity: 1; } 100% { transform: scale(1); } }
.paper-pressed { position: absolute; top: .6rem; right: .8rem; width: 56px; color: var(--cedar); opacity: .55; }
.paper-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin: 0 0 1rem; padding-right: 64px; }
.paper-greeting { margin: 0; font-family: var(--script); font-size: 2.1rem; line-height: 1.1; color: var(--rose-2); }
.paper-listen {
  flex: none; display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem;
  padding: .45rem .85rem .45rem .6rem; border-radius: 999px; border: 1px solid rgba(59,36,64,.22);
  background: rgba(255,255,255,.55); color: var(--ink); font-size: .95rem; font-style: italic;
  transition: background .3s, border-color .3s;
}
.paper-listen:hover { background: #fff; }
.paper-listen svg { width: 20px; height: 20px; fill: var(--rose-2); }
.paper-listen .ic-pause { display: none; }
.paper-listen.playing .ic-play { display: none; }
.paper-listen.playing .ic-pause { display: block; }
.paper-listen.playing { border-color: var(--rose-2); background: rgba(224,122,151,.12); }
@media (max-width: 440px) {
  .paper-head { flex-direction: column; padding-right: 60px; }
  .paper-listen { margin-top: 0; }
}

.paper-pages { position: relative; min-height: 180px; }
.paper-page { display: none; }
.paper-page.current { display: block; animation: page-in .6s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateX(10px);} to { opacity: 1; transform: none;} }
.paper-vignette { width: 56px; height: 56px; margin: 0 0 .6rem; color: var(--ink); opacity: .55; }
.paper-vignette svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.paper-text { margin: 0; font-size: 1.22rem; line-height: 1.65; max-width: 58ch; }
.paper-text .w { display: inline-block; opacity: 0; animation: word-in .5s var(--ease) forwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none;} }

.paper-signature { display: none; margin: 1.5rem 0 0; font-family: var(--script); font-size: 1.9rem; text-align: right; color: var(--rose-2); }
.paper-signature.show { display: block; animation: page-in .6s var(--ease) both; }

.paper-nav { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(59,36,64,.12); }
.paper-btn { background: none; border: 1px solid rgba(59,36,64,.25); border-radius: 999px; padding: .45rem 1rem; font-size: 1rem; color: var(--ink); }
.paper-btn:disabled { opacity: .3; cursor: default; }
.paper-dots { display: inline-flex; gap: .4rem; }
.paper-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(59,36,64,.2); }
.paper-dots i.on { background: var(--rose-2); }
.paper-close { display: block; margin: 1rem auto 0; background: none; border: 0; font-size: .95rem; font-style: italic; color: rgba(59,36,64,.6); }

/* ───────────────────────── Meter (gauge) ───────────────────────── */
.meter-intro { margin: -.5rem auto 1.5rem; max-width: 40ch; color: var(--text-2); font-style: italic; }
.gauge-wrap { position: relative; margin: 0 auto; max-width: 420px; }
.gauge-hearts { position: absolute; inset: 0 0 30% 0; pointer-events: none; overflow: visible; z-index: 2; }
.fly-heart {
  position: absolute; left: var(--x, 50%); bottom: 42%; font-size: calc(1.7rem * var(--s, 1)); line-height: 1;
  opacity: 0; transform: translate(-50%, 0) scale(.4);
  animation: heart-fly var(--dur, 2s) cubic-bezier(.2,.7,.3,1) var(--delay, 0s) forwards;
  text-shadow: 0 2px 8px rgba(0,0,0,.25); filter: saturate(1.2);
}
@keyframes heart-fly {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.4) rotate(0); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -260px) scale(1) rotate(var(--r, 0deg)); }
}
.gauge.burst { animation: gauge-burst 1s var(--ease) forwards; }
@keyframes gauge-burst {
  0%   { opacity: 1; transform: scale(1); filter: none; }
  35%  { transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.25); filter: blur(10px); }
}
.gauge { width: 100%; height: auto; display: block; overflow: visible; }
.gauge-rim { fill: #c9a06a; stroke: #8f6a3c; stroke-width: 1.5; }
.gauge-ticks line { stroke: rgba(59,36,64,.45); stroke-width: 1.5; stroke-linecap: round; }
.gauge-ticks line.major { stroke-width: 2.2; }
.gauge-value { font-family: var(--serif); font-size: 34px; font-weight: 500; fill: var(--ink); font-variant-numeric: tabular-nums; }
.gauge-unit { font-family: var(--serif); font-style: italic; font-size: 15px; fill: rgba(59,36,64,.7); }
.gauge-needle path { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.gauge-cracks path { fill: none; stroke: rgba(59,36,64,.7); stroke-width: 1.4; stroke-linecap: round; }
.gauge.broken .gauge-cracks { opacity: 1 !important; transition: opacity .4s; }
.gauge.broken { animation: shake .5s ease-in-out; }
@keyframes shake { 0%,100% { transform: translateX(0);} 20% { transform: translateX(-6px) rotate(-.6deg);} 40% { transform: translateX(6px) rotate(.6deg);} 60% { transform: translateX(-4px);} 80% { transform: translateX(4px);} }
.gauge-caption { min-height: 3.2em; margin: .75rem auto 0; max-width: 38ch; font-size: 1.1rem; color: var(--text-2); font-style: italic; }
.gauge-caption.fail { color: var(--accent); }
.gauge-actions { display: flex; justify-content: center; gap: .75rem; margin-top: 1rem; }

.meter-result { margin: 1rem auto 0; max-width: 460px; animation: view-in .9s var(--ease) both; }
.infinity-svg { display: block; width: min(320px, 90%); margin: 0 auto .5rem; overflow: visible; }
.infinity-ghost { fill: none; stroke: var(--accent); stroke-opacity: .22; stroke-width: 6; stroke-linecap: round; }
.infinity-line { fill: none; stroke: var(--heading); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: infinity-draw 2.6s var(--ease) .2s forwards; filter: drop-shadow(0 0 10px rgba(255,228,168,.5)); }
@keyframes infinity-draw { to { stroke-dashoffset: 0; } }
.infinity-comet { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 90 910; stroke-dashoffset: 1000; opacity: 0;
  animation: infinity-run 3.4s linear 2.8s infinite, infinity-show .6s 2.8s forwards; filter: drop-shadow(0 0 8px #fff); }
@keyframes infinity-run { to { stroke-dashoffset: 0; } }
@keyframes infinity-show { to { opacity: .95; } }
body[data-mode="day"] .infinity-comet { stroke: #fff3d6; }
body[data-mode="day"] .paper, body[data-mode="day"] .sealed-paper { border: 1px solid rgba(185, 69, 95, .18); box-shadow: 0 30px 60px -30px rgba(90, 40, 60, .45), 0 8px 24px -12px rgba(90, 40, 60, .3); }
.result-1 { margin: 0; color: var(--text-2); font-style: italic; }
.result-2 { margin: .35rem 0 0; font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 500; color: var(--heading); line-height: 1.15; }
.result-3 { margin: .35rem 0 1.5rem; color: var(--accent); font-style: italic; font-size: 1.2rem; }

/* ───────────────────────── Lebanon ↔ Cuba ───────────────────────── */
.distance-sub { margin: -.6rem 0 1.25rem; font-size: 1.25rem; font-style: italic; color: var(--text-2); }
.globe-wrap { max-width: 380px; margin: 0 auto 1.5rem; }
.globe { width: 100%; height: auto; display: block; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }
.globe-ring { fill: none; stroke: var(--card-border); stroke-width: 1.5; }
.globe-hours line { stroke: var(--chip-border); stroke-width: 1; }
.globe-hours line.major { stroke: var(--heading); stroke-opacity: .6; stroke-width: 1.6; }
.globe-glow { fill: rgba(245,185,127,.28); filter: blur(14px); transition: fill .4s; }
#skyTop, #skyBottom { transition: stop-color .35s; }
#coreSea { transition: fill .35s; }
.globe-label { font-family: var(--sans); font-size: 9px; fill: var(--text-3); letter-spacing: .04em; }
.globe-marker { cursor: grab; }
.globe-marker.dragging { cursor: grabbing; }
.globe-marker-bg { fill: var(--night-3); stroke: var(--chip-border); stroke-width: 1.5; transition: fill .4s, stroke .4s; }
.globe-marker.is-day .globe-marker-bg { fill: #fff2d9; stroke: var(--apricot); }
body[data-mode="day"] .globe-marker-bg { fill: #fff; }
.globe-marker.dragging .globe-marker-bg { stroke: var(--heading); stroke-width: 2.5; }
.globe-marker:focus-visible .globe-marker-bg { stroke: var(--heading); stroke-width: 2.5; }
.globe-marker-tag { font-family: var(--serif); font-size: 12px; fill: var(--text-2); pointer-events: none; }
.globe-reset { margin-top: .75rem; }

.route {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem;
  padding: 1.25rem .9rem 1rem; border-radius: 22px;
  background: var(--card); border: 1px solid var(--card-border); transition: background .9s, border-color .9s;
}
.route-end { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 72px; }
.route-flag { font-size: 1.8rem; line-height: 1; margin-bottom: .2rem; }
.route-name { font-size: 1rem; color: var(--text-2); }
.route-time { font-size: 1.6rem; font-weight: 500; line-height: 1.1; color: var(--heading); font-variant-numeric: tabular-nums; }
.route-state { font-size: .85rem; font-style: italic; color: var(--text-3); }
.route-arc { width: 100%; height: auto; color: var(--accent); }
.route-arc path#routePath { stroke: currentColor; stroke-width: 1.5; opacity: .6; }
.distance-line2 { margin: 1.5rem auto 0; max-width: 40ch; color: var(--text-2); }

/* ───────────────────────── Our songs ───────────────────────── */
.songs-sub { margin: -.6rem 0 1.5rem; font-size: 1.2rem; font-style: italic; color: var(--text-2); }
.song-list { display: grid; gap: 1.1rem; max-width: 560px; margin: 0 auto; text-align: left; }
.song {
  display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: start;
  padding: 1.1rem 1.1rem 1.1rem .9rem; border-radius: 22px;
  background: var(--card); border: 1px solid var(--card-border); transition: background .9s, border-color .9s;
}
.vinyl { width: 96px; height: 96px; display: grid; place-items: center; }
.vinyl-disc {
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background:
    radial-gradient(circle, transparent 0 17px, rgba(255,255,255,.06) 17px 18px, transparent 18px 22px, rgba(255,255,255,.06) 22px 23px, transparent 23px 27px, rgba(255,255,255,.05) 27px 28px, transparent 28px 33px, rgba(255,255,255,.05) 33px 34px, transparent 34px 39px, rgba(255,255,255,.05) 39px 40px, transparent 40px),
    conic-gradient(from 20deg, #24192f, #3a2b45 25%, #24192f 50%, #3a2b45 75%, #24192f);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08);
  animation: vinyl-spin 6s linear infinite;
}
.vinyl-label {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #f7c9d4, #d4577a 70%); color: #fff;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35);
}
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
.song-body { min-width: 0; }
.song-first { margin: 0 0 .15rem; font-size: .9rem; font-style: italic; color: var(--accent); }
.song-title { margin: 0; font-weight: 500; font-size: 1.5rem; line-height: 1.15; color: var(--heading); }
.song-artist { margin: .1rem 0 .6rem; color: var(--text-2); font-size: 1.05rem; }
.song-note { margin: 0 0 .9rem; font-size: 1.02rem; font-style: italic; color: var(--text-3); line-height: 1.5; }
.song-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.song-links .btn, .song-links .btn-ghost { padding: .55rem 1.05rem; font-size: 1rem; }
.song-embed { display: block; width: 100%; border: 0; border-radius: 14px; }
.song-embed-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.song-embed-yt { position: absolute; inset: 0; width: 100%; height: 100%; }
.player { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem .55rem .55rem; border-radius: 999px; background: var(--chip); border: 1px solid var(--chip-border); }
.player-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--rose), var(--apricot)); color: var(--night-1); }
.player-btn svg { width: 20px; height: 20px; fill: #3b2440; }
.player .ic-pause { display: none; } .player.playing .ic-pause { display: block; } .player.playing .ic-play { display: none; }
.player.playing .player-btn { box-shadow: 0 0 0 4px var(--chip); }
.player-seek { flex: 1; min-width: 0; accent-color: var(--apricot); }
.player-time { flex: none; font-family: var(--sans); font-size: .8rem; color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 2.8em; text-align: right; }
.song-open { display: inline-block; margin-top: .6rem; font-size: .95rem; font-style: italic; color: var(--accent); text-decoration: none; }
.song-open:hover { text-decoration: underline; }
.songs-more { margin: 1.5rem 0 0; font-style: italic; color: var(--text-3); font-size: 1rem; }
@media (max-width: 440px) {
  .song { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .song-links { justify-content: center; }
}

/* ───────────────────────── Login ───────────────────────── */
.login-page { display: grid; place-items: center; min-height: 100dvh; padding: 1.5rem; }
.login-card {
  position: relative; z-index: 1; width: min(420px, 100%); padding: 2.25rem 1.75rem 1.75rem; border-radius: 10px;
  background: var(--cream); color: var(--ink); text-align: center; box-shadow: var(--shadow-paper);
  background-image: radial-gradient(120% 80% at 100% 0%, rgba(242,167,184,.22), transparent 50%);
}
.login-for { margin: 0; font-size: 1rem; font-style: italic; color: rgba(59,36,64,.6); }
.login-name { margin: 0 0 .25rem; font-family: var(--script); font-size: 3.2rem; line-height: 1; color: var(--rose-2); }
.login-sub { margin: 0 0 1.5rem; font-size: 1.05rem; color: rgba(59,36,64,.75); }
.login-field { display: block; text-align: left; margin-bottom: 1rem; }
.login-field span { display: block; font-size: .95rem; margin-bottom: .35rem; color: rgba(59,36,64,.7); }
.login-field input {
  width: 100%; padding: .85rem 1rem; border-radius: 10px; border: 1px solid rgba(59,36,64,.2);
  background: #fff; font: inherit; font-size: 1.1rem; color: var(--ink);
}
.login-field input:focus { outline: 2px solid var(--rose); border-color: transparent; }
.login-btn {
  width: 100%; padding: .9rem; border: 0; border-radius: 999px; font-size: 1.15rem; font-weight: 600; color: var(--night-1);
  background: linear-gradient(135deg, var(--rose), var(--apricot));
}
.login-error { display: none; margin: 0 0 1rem; padding: .6rem .8rem; border-radius: 8px; background: rgba(224,122,151,.15); color: #8a2b3f; font-size: .98rem; }
.login-error.show { display: block; }
.login-foot { margin: 1.25rem 0 0; font-size: .95rem; font-style: italic; color: rgba(59,36,64,.5); }
.login-wax { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c94d68, #8a2b3f 70%); box-shadow: 0 6px 14px -6px rgba(0,0,0,.6); display: grid; place-items: center; }
.login-wax svg { width: 26px; height: 26px; fill: rgba(255,255,255,.75); }

/* ───────────────────────── Motion preferences ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .flower-shower { display: none; }
  .paper-text .w { opacity: 1; }
}