/* ============================================================
   LEXNARY / LOVE  —  style.css
   Mobile-first, premium dark romantic. No external fonts.
   ============================================================ */

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

:root {
  --c-red:        #e8364a;
  --c-red-glow:   rgba(232, 54, 74, 0.38);
  --c-blue:       #5bc8f5;
  --c-blue-glow:  rgba(91, 200, 245, 0.32);
  --c-gold:       #f0c040;
  --c-gold-glow:  rgba(240, 192, 64, 0.32);

  --colour:       var(--c-red);
  --glow:         var(--c-red-glow);
  --fill-pct:     1;
  --warmth:       0.45;
  --memory-richness: 0;
  --fracture:     0.12;
  --gold-repair:  0;
  --one-sided:    0;
  --temp-intensity: 0.55;
  --temp-particles: 0.35;
  --temp-fracture: 0.12;
  --temp-aura: rgba(232,54,74,0.28);
  --temp-core: #e8364a;
  --temp-phrase: rgba(255,255,255,0.48);

  --page-bg:      #0c0c0e;
  --heart-size:   min(60vw, 264px);
  --ring-size:    calc(var(--heart-size) * 1.18);

  --font-display: 'Georgia', 'Times New Roman', serif;
  --font-body:    -apple-system, 'Helvetica Neue', sans-serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --c-coffee: 139, 106, 74;   /* warm coffee: #8B6A4A */
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--page-bg);
  color: #fff;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  touch-action: manipulation;
}

/* ── Screens ── */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-out-expo);
  z-index: 10;
}
.screen.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* ── Ambient glow ── */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  transition: background 1.8s ease;
  background: radial-gradient(ellipse 55% 42% at 50% 54%, var(--glow) 0%, transparent 70%);
}
body.dead .ambient {
  background: radial-gradient(ellipse 40% 30% at 50% 54%, rgba(80,80,80,0.12) 0%, transparent 70%);
}

/* ── Entry screen ── */
.entry__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2rem 1.5rem;
  width: min(380px, 92vw);
  z-index: 10;
}
.entry__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 10vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  color: #fff;
  opacity: 0.95;
}
.entry__sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.58);
  letter-spacing: 0.14em;
  text-transform: lowercase;
  margin-top: -1.4rem;
}
.entry__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.entry__divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: rgba(255,255,255,0.45);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}
.entry__divider::before,
.entry__divider::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: rgba(255,255,255,0.22);
}
.entry__join {
  display: flex;
  gap: 0.5rem;
}
.entry__input {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.18em;
  padding: 0.75rem 1rem;
  outline: none;
  text-transform: uppercase;
  transition: border-color 0.2s;
}
.entry__input::placeholder {
  color: rgba(255,255,255,0.42);
  text-transform: none;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  font-family: var(--font-body);
}
.entry__input:focus { border-color: rgba(255,255,255,0.55); }
.entry__note {
  font-size: 0.75rem;
  color: rgba(255,120,120,0.9);
  min-height: 1em;
  letter-spacing: 0.06em;
  text-align: center;
}

/* ── Buttons ── */
.btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  cursor: pointer;
  border-radius: 8px;
  padding: 0.85rem 1.6rem;
  border: 0.5px solid transparent;
  transition: opacity 0.18s, transform 0.14s;
  line-height: 1;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); opacity: 0.8; }
.btn--primary {
  background: rgba(255,255,255,0.92);
  color: #0c0c0e;
  border-color: rgba(255,255,255,0.92);
}
.btn--ghost {
  background: transparent;
  color: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.3);
}
.btn--danger {
  background: rgba(232,54,74,0.15);
  color: #e8364a;
  border-color: rgba(232,54,74,0.4);
}
.btn--confirm {
  background: rgba(255,255,255,0.92);
  color: #0c0c0e;
  border-color: transparent;
}

/* ── Waiting screen ── */
.waiting__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.waiting__heart {
  width: clamp(64px, 22vw, 96px);
  color: rgba(255,255,255,0.28);
}
@keyframes waiting-pulse {
  0%, 100% { opacity: 0.28; }
  50%       { opacity: 0.62; }
}
.waiting__heart { animation: waiting-pulse 3.5s ease-in-out infinite; }
.waiting__text {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 3vw, 1.05rem);
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.1em;
  font-style: italic;
}
.waiting__room {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* ── Main screen ── */
.screen--main {
  flex-direction: column;
  gap: 0;
  z-index: 5;
}

/* ── Topbar — countdown + edit only ── */
.topbar {
  position: absolute;
  top: max(env(safe-area-inset-top), 1.2rem);
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1.4rem;
  z-index: 20;
}

.topbar__timer-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.topbar__countdown {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  line-height: 1;
  transition: color 0.4s;
}
.topbar__countdown.timer--ok      { color: rgba(255,255,255,0.82); }
.topbar__countdown.timer--warning { color: #f0c040; }
.topbar__countdown.timer--urgent  { color: #e8364a; }

.topbar__edit-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.45;
  transition: opacity 0.2s;
  color: #fff;
}
.topbar__edit-btn svg {
  width: 15px;
  height: 15px;
}
.topbar__edit-btn:hover,
.topbar__edit-btn:focus-visible { opacity: 0.85; }

/* ── Room code badge — bottom right ── */
.room-code-badge {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom, 0px) + 0.9rem, 1rem);
  right: 1.2rem;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  font-family: var(--font-body);
  pointer-events: none;
  z-index: 30;
}

/* ── Heart stage ── */
.heart-stage {
  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
  margin-left: auto;
  margin-right: auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  isolation: isolate;
}

.heart-temperature-stage {
  --aura-scale: calc(0.9 + var(--temp-intensity) * 0.28);
}
.heart-aura {
  position: absolute;
  inset: -18%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: calc(0.2 + var(--temp-intensity) * 0.72);
  background:
    radial-gradient(circle at 50% 50%, var(--temp-aura), transparent 38%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0 1px, transparent 2px 22px);
  transform: scale(var(--aura-scale));
  animation: heart-aura-breathe 8s ease-in-out infinite;
}
.heart-aura::before,
.heart-aura::after {
  content: '';
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--temp-core), transparent 58%);
  box-shadow: 0 0 28px color-mix(in srgb, var(--temp-core), transparent 72%);
  animation: heart-ring-drift 14s ease-in-out infinite;
}
.heart-aura::after {
  inset: 23%;
  opacity: 0.58;
  animation-duration: 9s;
  animation-direction: reverse;
}
.heart-particles {
  position: absolute;
  inset: -10%;
  z-index: 1;
  pointer-events: none;
  opacity: calc(0.18 + var(--temp-particles) * 0.8);
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--temp-core), white 28%) 0 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,0.42) 0 1px, transparent 1.6px),
    radial-gradient(circle, color-mix(in srgb, var(--temp-core), transparent 22%) 0 1.6px, transparent 2.4px);
  background-size: 38px 38px, 64px 64px, 92px 92px;
  -webkit-mask-image: radial-gradient(circle, #000 0 50%, transparent 72%);
  mask-image: radial-gradient(circle, #000 0 50%, transparent 72%);
  animation: heart-particle-orbit 18s linear infinite;
}
.heart-ecg {
  position: absolute;
  z-index: 4;
  width: calc(var(--heart-size) * 0.78);
  height: calc(var(--heart-size) * 0.2);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -42%);
  pointer-events: none;
  opacity: calc(0.18 + var(--temp-intensity) * 0.55);
  filter: drop-shadow(0 0 8px var(--temp-core));
}
.heart-ecg path {
  fill: none;
  stroke: color-mix(in srgb, var(--temp-core), white 16%);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 250;
  animation: ecg-flow 4.5s ease-in-out infinite;
}
.touch-signal {
  position: absolute;
  top: 50%;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  transform: translateY(-50%) scale(0.42);
  filter: blur(0.1px);
}
.touch-signal::before,
.touch-signal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  box-shadow: 0 0 24px currentColor;
}
.touch-signal::after {
  inset: 18%;
  opacity: 0.5;
}
.touch-signal-left {
  left: 8%;
  color: rgba(255,104,124,0.74);
}
.touch-signal-right {
  right: 8%;
  color: rgba(120,210,255,0.72);
}
.touch-signal-left.is-active {
  animation: touch-pulse-left 2.4s ease-out forwards;
}
.touch-signal-right.is-active {
  animation: touch-pulse-right 2.4s ease-out forwards;
}

/* ── Hold ring ── */
.hold-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 5;
}
.hold-ring.is-holding { opacity: 1; }
.hold-ring__track {
  fill: none;
  stroke: rgba(255,255,255,0.12);
  stroke-width: 2.5;
}
.hold-ring__fill {
  fill: none;
  stroke: var(--temp-core);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 741.4;
  stroke-dashoffset: 741.4;
  transition: stroke 0.6s ease;
}

/* ── Heart button ── */
.heart-btn {
  position: relative;
  width: var(--heart-size);
  height: var(--heart-size);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  z-index: 3;
}
.heart-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.4);
  outline-offset: 6px;
  border-radius: 50%;
}

/* ── Heart SVG ── */
.heart-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: filter 1.8s ease, opacity 1.2s ease;
  filter:
    drop-shadow(0 0 14px color-mix(in srgb, var(--temp-core), white 18%))
    drop-shadow(0 0 34px var(--temp-aura))
    drop-shadow(0 0 72px color-mix(in srgb, var(--temp-core), transparent 62%));
}
body.dead .heart-svg {
  filter: drop-shadow(0 0 10px rgba(100,100,100,0.15));
}
.heart-bg {
  fill: rgba(8, 8, 12, 0.72);
  stroke: rgba(255,255,255,0.08);
  stroke-width: 1.4;
}
.heart-fill  {
  fill: var(--temp-core);
  opacity: calc(0.44 + var(--fill-pct) * 0.46);
  transition: fill 1.2s ease, opacity 1.2s ease, y 0.05s linear;
}
body.dead .heart-fill  { fill: #3a3a3a; }
.heart-glass {
  fill: url(#heartGlassGradient);
  opacity: calc(0.26 + var(--warmth) * 0.42);
  mix-blend-mode: screen;
  pointer-events: none;
}
.heart-sheen {
  fill: url(#heartSheenGradient);
  opacity: calc(0.16 + var(--warmth) * 0.44);
  pointer-events: none;
}
.heart-ecg-line {
  fill: none;
  stroke: rgba(255,255,255,0.5);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: calc(0.12 + var(--temp-intensity) * 0.42);
  filter: drop-shadow(0 0 6px var(--temp-core));
  stroke-dasharray: 190;
  animation: ecg-flow 4.5s ease-in-out infinite;
}
.heart-outline {
  fill: none;
  stroke: color-mix(in srgb, var(--temp-core), white 12%);
  stroke-width: 3.8;
  opacity: calc(0.5 + var(--temp-intensity) * 0.42);
  filter: drop-shadow(0 0 12px var(--temp-core));
  transition: stroke 1.2s ease, opacity 0.8s ease;
}
body.dead .heart-outline { stroke: #444; }

@keyframes heart-aura-breathe {
  0%, 100% { transform: scale(var(--aura-scale)); opacity: calc(0.2 + var(--temp-intensity) * 0.64); }
  50% { transform: scale(calc(var(--aura-scale) + 0.055)); opacity: calc(0.28 + var(--temp-intensity) * 0.72); }
}
@keyframes heart-ring-drift {
  0%, 100% { transform: scale(0.96); opacity: 0.22; }
  50% { transform: scale(1.08); opacity: 0.64; }
}
@keyframes heart-particle-orbit {
  0%   { transform: rotate(0deg)  scale(1); }
  50%  { transform: rotate(7deg)  scale(1.035); }
  100% { transform: rotate(14deg) scale(1); }
}
@keyframes ecg-flow {
  0% { stroke-dashoffset: 250; opacity: 0.08; }
  22% { opacity: 0.72; }
  52% { stroke-dashoffset: 0; opacity: 0.34; }
  100% { stroke-dashoffset: -250; opacity: 0.08; }
}
@keyframes touch-pulse-left {
  0% { opacity: 0; transform: translate(-6%, -50%) scale(0.42); }
  14% { opacity: 0.72; }
  100% { opacity: 0; transform: translate(-24%, -50%) scale(2.3); }
}
@keyframes touch-pulse-right {
  0% { opacity: 0; transform: translate(6%, -50%) scale(0.42); }
  14% { opacity: 0.72; }
  100% { opacity: 0; transform: translate(24%, -50%) scale(2.3); }
}

/* ── Heartbeat ── */
@keyframes heartbeat {
  0%   { transform: scale(1);    }
  10%  { transform: scale(1.09); }
  20%  { transform: scale(1);    }
  30%  { transform: scale(1.05); }
  45%  { transform: scale(1);    }
  100% { transform: scale(1);    }
}
@keyframes heartbeat-weak {
  0%   { transform: scale(1);    }
  15%  { transform: scale(1.025);}
  30%  { transform: scale(1);    }
  100% { transform: scale(1);    }
}
.heart-btn.is-beating      { animation: heartbeat 1.15s ease-in-out infinite; transform-origin: center; }
.heart-btn.is-beating-weak { animation: heartbeat-weak 2.6s ease-in-out infinite; transform-origin: center; }
.heart-btn.is-beating.pct-low { animation-duration: 1.7s; }
.heart-btn:active { transform: scale(0.96); transition: transform 0.08s; }

/* ── Percentage display ── */
.pct-wrap {
  margin-top: 1.2rem;
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  opacity: 0.92;
  transition: opacity 0.5s;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--temp-core), transparent 68%));
}
.pct-value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 6.5vw, 2.65rem);
  font-weight: 400;
  letter-spacing: 0;
  color: color-mix(in srgb, var(--temp-core), white 18%);
  line-height: 1;
  min-width: 2.8ch;
  text-align: right;
  transition: color 0.8s;
}
.pct-sign {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 3vw, 1.1rem);
  color: color-mix(in srgb, var(--temp-core), white 38%);
  transition: color 0.8s;
}
body.dead .pct-wrap { opacity: 0.45; }
.silent-memory {
  min-height: 1.1em;
  margin-top: 0.34rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--temp-phrase);
  text-align: center;
  text-shadow: 0 0 16px color-mix(in srgb, var(--temp-core), transparent 76%);
  transition: color 0.8s, opacity 0.8s, text-shadow 0.8s;
}

/* ── Hold hint ── */
.hold-hint {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  font-style: italic;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-display);
  text-align: center;
  transition: color 0.5s, opacity 0.5s;
  pointer-events: none;
}
.hold-hint.is-holding { color: var(--temp-core); opacity: 0.9; }
body.dead .hold-hint  { color: rgba(200,200,200,0.35); }

/* ── Dead mode ── */
body.dead { filter: grayscale(1) brightness(0.75); }
body.dead .topbar__countdown,
body.dead .pct-value,
body.dead .pct-sign { color: rgba(200,200,200,0.5); }

body.state-mutual {
  --temp-core: #ff4d45;
  --temp-aura: rgba(255,84,52,0.38);
  --glow: rgba(255,84,52,0.3);
  --temp-phrase: rgba(255,205,185,0.62);
}
body.state-one-sided {
  --temp-core: #5bc8f5;
  --temp-aura: rgba(91,200,245,0.28);
  --glow: rgba(91,200,245,0.22);
  --temp-phrase: rgba(190,230,255,0.54);
}
body.state-neglect {
  --temp-core: #d69b36;
  --temp-aura: rgba(214,155,54,0.22);
  --glow: rgba(214,155,54,0.16);
  --temp-phrase: rgba(235,195,122,0.5);
}
body.state-recovery {
  --temp-core: #f0b84a;
  --temp-aura: rgba(240,184,74,0.36);
  --glow: rgba(240,184,74,0.28);
  --temp-phrase: rgba(255,215,150,0.64);
}
body.state-dead {
  --temp-core: #696969;
  --temp-aura: rgba(120,120,120,0.08);
  --glow: rgba(120,120,120,0.08);
  --temp-intensity: 0.06;
  --temp-particles: 0;
  --temp-phrase: rgba(190,190,190,0.36);
}
body.state-dead .heart-aura,
body.state-dead .heart-particles,
body.state-dead .heart-ecg,
body.state-dead .heart-ecg-line {
  opacity: 0;
  animation-play-state: paused;
}
body.state-dead .heart-glass,
body.state-dead .heart-sheen {
  opacity: 0.04;
}
body.state-dead .heart-svg {
  opacity: 0.62;
}
body.state-recovery .heart-particles {
  animation-duration: 5.8s;
}
/* ── Tap burst ── */
@keyframes tap-burst {
  0%   { transform: translate(-50%,-50%) scale(0.6); opacity: 0.9; }
  100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0;   }
}
.tap-burst {
  position: fixed;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--temp-core);
  pointer-events: none;
  animation: tap-burst 0.52s ease-out forwards;
  z-index: 999;
}

/* ── Fade-in on load ── */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.screen--main.is-visible .topbar,
.screen--main.is-visible .heart-stage,
.screen--main.is-visible .pct-wrap,
.screen--main.is-visible .hold-hint {
  animation: fade-in 0.7s var(--ease-out-expo) both;
}
.screen--main.is-visible .heart-stage { animation-delay: 0.08s; }
.screen--main.is-visible .pct-wrap    { animation-delay: 0.16s; }
.screen--main.is-visible .hold-hint   { animation-delay: 0.22s; }

/* ── Shared modal overlay ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(12,12,14,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out-expo);
}
.modal-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* ── Modal card ── */
.modal-card {
  position: relative;
  width: min(340px, 88vw);
  background: rgba(22,22,28,0.97);
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 3.5rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.38);
  font-size: 1.7rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  touch-action: manipulation;
  transition: color 0.2s;
}
.modal-close:hover { color: rgba(255,255,255,0.75); }
.modal-icon  { font-size: 2rem; line-height: 1; }
.modal-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.06em;
}
.modal-body {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  letter-spacing: 0.03em;
}
.modal-request-btn {
  width: 100%;
  margin-top: 0.4rem;
}

/* ── Timer picker ── */
.timer-picker {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.4rem 0;
}
.timer-picker__sep {
  font-family: var(--font-display);
  font-size: 2rem;
  color: rgba(255,255,255,0.5);
  line-height: 1;
  margin-top: 1.5rem;
}
.timer-picker__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.timer-picker__arrow {
  background: transparent;
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  color: rgba(255,255,255,0.55);
  font-size: 0.7rem;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  line-height: 1;
}
.timer-picker__arrow:hover {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.5);
}
.timer-picker__val {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.04em;
  line-height: 1;
  min-width: 2.2ch;
  text-align: center;
}
.timer-picker__label {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}

/* ── Reset card elements ── */
.reset-highlight {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--temp-core);
  letter-spacing: 0.08em;
  display: block;
  margin: 0.3rem 0;
}
.reset-card__actions {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.2rem;
}
.reset-card__actions .btn {
  flex: 1;
  padding: 0.8rem 1rem;
  font-size: 0.78rem;
}
.reset-card__pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.reset-card__spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,255,255,0.15);
  border-top-color: var(--temp-core);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.reset-card__pending-text {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.1em;
  font-style: italic;
  font-family: var(--font-display);
}
.reset-card__cancel-link {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 0.2rem;
}
.reset-card__cancel-link:hover { color: rgba(255,255,255,0.6); }

/* ── PWA install button — bottom LEFT ── */
.pwa-install-btn {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom, 0px) + 1.2rem, 1.4rem);
  left: max(env(safe-area-inset-left, 0px) + 1.05rem, 1.05rem);
  z-index: 50;
  background: rgba(28,28,34,0.92);
  border: 0.5px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  color: rgba(255,255,255,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.2s;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.pwa-install-btn svg { width: 20px; height: 20px; }
.pwa-install-btn:active  { transform: scale(0.94); }
.pwa-install-btn.is-hidden { opacity: 0; pointer-events: none; }

/* ── PWA iOS sheet ── */
.pwa-ios-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: rgba(22,22,28,0.97);
  border-top: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 18px 18px 0 0;
  padding: 1.6rem 1.75rem max(env(safe-area-inset-bottom, 0px) + 1.6rem, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(100%);
  transition: transform 0.42s var(--ease-out-expo);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pwa-ios-sheet.is-visible { transform: translateY(0); }
.pwa-ios-sheet__handle {
  width: 36px;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin: 0 auto -0.4rem;
}
.pwa-ios-sheet__title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: #fff;
  text-align: center;
  letter-spacing: 0.06em;
}
.pwa-ios-sheet__steps {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.pwa-ios-sheet__step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.pwa-ios-sheet__step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 0.5px solid rgba(255,255,255,0.2);
  font-size: 0.68rem;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  letter-spacing: 0;
}
.pwa-ios-sheet__close {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.1em;
}

/* ── Responsive tweaks ── */
@media (max-height: 580px) {
  :root { --heart-size: min(44vw, 192px); }
  .pct-wrap  { margin-top: 0.7rem; }
  .hold-hint { margin-top: 0.5rem; }
}
@media (min-width: 600px) {
  :root { --heart-size: 220px; }
}

/* ── Recovery link on entry screen ── */
.entry__recover-link {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.32);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.3rem 0;
  transition: color 0.2s;
  margin-top: -0.8rem;
}
.entry__recover-link:hover { color: rgba(255,255,255,0.65); }

/* ── Word input inside modals ── */
.modal-word-input {
  width: 100%;
  margin-top: 0.1rem;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: none;
}
.modal-word-input + .modal-word-input {
  margin-top: 0.65rem;
}

/* ── Inline error inside modals ── */
.modal-word-error {
  font-size: 0.72rem;
  color: rgba(232,100,100,0.9);
  min-height: 1em;
  letter-spacing: 0.05em;
  text-align: center;
  width: 100%;
}

/* -- Silent presence atmosphere -------------------------------- */
body {
  transition: background 2.8s ease, filter 0.8s ease;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,0.035), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.018), transparent 40%, rgba(0,0,0,0.18));
  opacity: calc(0.42 + var(--warmth) * 0.36);
  transition: opacity 2.6s ease, background 2.6s ease;
}
.ambient {
  background:
    radial-gradient(ellipse 58% 42% at 50% 53%, var(--glow) 0%, transparent 72%),
    radial-gradient(ellipse 95% 70% at 50% 105%, rgba(255,190,112,0.05), transparent 62%);
  filter: blur(4px);
}
.seasonal-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.24;
  transition: background 3s ease, opacity 3s ease;
}
body.time-dawn .seasonal-veil { background: linear-gradient(180deg, rgba(255,190,150,0.08), transparent 58%); }
body.time-sunset .seasonal-veil { background: linear-gradient(180deg, rgba(240,150,92,0.08), rgba(40,24,32,0.1)); }
body.time-midnight .seasonal-veil { background: radial-gradient(ellipse at 50% 0%, rgba(110,135,180,0.08), transparent 64%); }
body.season-winter .seasonal-veil { opacity: 0.32; background-color: rgba(150,180,210,0.035); }
body.season-autumn .seasonal-veil { background-color: rgba(190,132,72,0.035); }
body.warmth-cold { --page-bg: #08090d; filter: saturate(0.72) brightness(0.82); }
body.warmth-cool { --page-bg: #0b0d12; filter: saturate(0.88) brightness(0.92); }
body.warmth-warm { --page-bg: #100d0f; filter: saturate(1.05) brightness(1); }
body.warmth-deep { --page-bg: #120d0d; filter: saturate(1.12) brightness(1.04); }
body.near-death-20 .ambient { opacity: 0.72; }
body.near-death-10 .ambient { opacity: 0.48; }
body.near-death-5 .ambient { opacity: 0.25; }
body.near-death-10 .heart-svg { filter: drop-shadow(0 0 14px rgba(255,255,255,0.08)) drop-shadow(0 0 18px var(--glow)); }
body.near-death-5 .heart-svg { filter: drop-shadow(0 0 8px rgba(255,255,255,0.04)); }
.heart-bg { fill: rgba(8, 8, 12, calc(0.48 + var(--fracture) * 0.18)); }
.heart-fill { opacity: calc(0.38 + var(--fill-pct) * 0.42 + var(--warmth) * 0.18); }
.heart-memory__grain,
.heart-memory__gold,
.heart-fractures path {
  fill: none;
  pointer-events: none;
}
.heart-memory__grain {
  stroke: rgba(255,255,255,0.18);
  stroke-width: 0.65;
  opacity: calc(var(--memory-richness) * 0.52);
  stroke-dasharray: 2 10;
}
.heart-memory__gold {
  stroke: rgba(246,196,96,0.72);
  stroke-width: 1.15;
  opacity: calc(var(--gold-repair) * 0.58);
  filter: drop-shadow(0 0 6px rgba(246,196,96,0.18));
}
.heart-fractures path {
  stroke: rgba(230,235,245,0.52);
  stroke-width: 0.9;
  opacity: calc(var(--fracture) * 0.7);
  stroke-dasharray: 16 12;
}
body.warmth-deep .heart-outline { filter: drop-shadow(0 0 16px var(--glow)); }
@keyframes heartbeat-irregular {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.035); }
  23% { transform: scale(0.997); }
  46% { transform: scale(1.018); }
  68% { transform: scale(1); }
}
@keyframes heartbeat-flatline {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  46% { transform: scale(1.006); opacity: 0.78; }
}
body.rhythm-synced .heart-btn.is-beating { animation: heartbeat 1.28s ease-in-out infinite; }
body.rhythm-irregular .heart-btn.is-beating { animation: heartbeat-irregular 2.2s ease-in-out infinite; }
body.rhythm-faint .heart-btn.is-beating,
body.rhythm-faint .heart-btn.is-beating-weak { animation: heartbeat-weak 2.9s ease-in-out infinite; }
body.rhythm-flatline .heart-btn.is-beating,
body.rhythm-flatline .heart-btn.is-beating-weak { animation: heartbeat-flatline 4.2s ease-in-out infinite; }
.heart-btn.temp-rhythm-smooth.is-beating { animation-duration: 1.18s; }
.heart-btn.temp-rhythm-irregular.is-beating,
.heart-btn.temp-rhythm-irregular.is-beating-weak { animation: heartbeat-irregular 2.05s ease-in-out infinite; }
.heart-btn.temp-rhythm-faint.is-beating,
.heart-btn.temp-rhythm-faint.is-beating-weak { animation: heartbeat-weak 3.35s ease-in-out infinite; }
.heart-btn.temp-rhythm-recovery.is-beating,
.heart-btn.temp-rhythm-recovery.is-beating-weak { animation: heartbeat 1.55s ease-in-out infinite; }
.heart-btn.temp-rhythm-none,
.heart-btn.temp-rhythm-none.is-beating,
.heart-btn.temp-rhythm-none.is-beating-weak { animation: none; }
.heart-btn.pct-very-low { opacity: 0.72; }
.silent-memory {
  margin-top: 0.34rem;
  min-height: 1.1em;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--temp-phrase);
  font-style: italic;
  text-align: center;
  text-shadow: 0 0 16px color-mix(in srgb, var(--temp-core), transparent 76%);
  transition: color 0.8s, opacity 0.8s, text-shadow 0.8s;
  pointer-events: none;
}
.touch-trail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  min-height: 8px;
  margin-top: 0.3rem;
  opacity: 1;
}
.touch-trail__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  box-shadow: 0 0 8px rgba(255,255,255,0.08);
}
.touch-trail__dot--a {
  background: rgba(255,215,50,0.88);
  box-shadow: 0 0 10px rgba(255,215,50,0.4);
}
.touch-trail__dot--b {
  background: rgba(55,218,110,0.88);
  box-shadow: 0 0 10px rgba(55,218,110,0.4);
}
body .pwa-install-btn { left: max(env(safe-area-inset-left, 0px) + 1.05rem, 1.05rem); }
@keyframes pairing-bloom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  22% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}
body.pairing-ceremony::after {
  content: '';
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(64vw, 360px);
  height: min(64vw, 360px);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.38);
  pointer-events: none;
  z-index: 25;
  animation: pairing-bloom 4.8s ease-out forwards;
}
body.pairing-ceremony .ambient { opacity: 1; filter: blur(26px) brightness(1.28); }
body.dead .heart-fractures path { opacity: 0.8; }
@media (prefers-reduced-motion: reduce) {
  .heart-btn.is-beating,
  .heart-btn.is-beating-weak,
  body.rhythm-irregular .heart-btn.is-beating,
  body.rhythm-flatline .heart-btn.is-beating { animation-duration: 4s; }
  .heart-aura,
  .heart-aura::before,
  .heart-aura::after,
  .heart-particles,
  .heart-ecg path,
  .heart-ecg-line,
  .touch-signal.is-active {
    animation: none !important;
  }
  body.pairing-ceremony::after { animation: none; opacity: 0; }
}


body.dead.warmth-cold,
body.dead.warmth-cool,
body.dead.warmth-warm,
body.dead.warmth-deep { filter: grayscale(1) brightness(0.75); }


/* -- Enhancement layer: centred header, wheels, weather, responses -- */
.topbar {
  display: block;
  height: 42px;
  padding: 0 1.15rem;
}
.topbar__left,
.topbar__actions,
.topbar__timer-wrap {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}
.topbar__left { left: 1.2rem; }
.presence-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  height: 24px;
  color: rgba(255,255,255,0.25);
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
  transition: color 0.8s ease, opacity 0.8s ease, filter 0.8s ease;
  opacity: 0.54;
}
.presence-indicator i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 rgba(255,255,255,0);
  transition: box-shadow 0.8s ease, transform 0.8s ease;
}
.presence-indicator--a.is-active {
  color: rgba(255,104,124,0.9);
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(255,104,124,0.34));
}
.presence-indicator--b.is-active {
  color: rgba(120,210,255,0.9);
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(120,210,255,0.32));
}
.presence-indicator.is-active i {
  transform: scale(1.22);
  box-shadow: 0 0 16px currentColor;
}
.topbar__timer-wrap {
  left: 0;
  right: 0;
  height: 42px;
  transform: translateY(-50%);
  justify-content: center;
  pointer-events: none;
}
.topbar__timer-wrap .topbar__countdown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.topbar__timer-wrap .topbar__edit-btn {
  position: absolute;
  left: calc(50% + 3.25rem);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
}
.topbar__actions {
  right: 1.05rem;
  gap: 0.28rem;
}
.topbar .room-code-badge {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom, 0px) + 1.05rem, 1.05rem);
  right: max(env(safe-area-inset-right, 0px) + 1.05rem, 1.05rem);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.3);
  pointer-events: none;
  z-index: 50;
}
.topbar__icon-btn {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s, opacity 0.2s, transform 0.14s;
}
.topbar__icon-btn svg { width: 18px; height: 18px; }
.topbar__icon-btn:active { transform: scale(0.94); }
.topbar__icon-btn:hover,
.topbar__icon-btn:focus-visible { color: rgba(255,255,255,0.86); }
.sheet-overlay { align-items: center; }
.wheel-sheet {
  width: min(390px, 100vw);
  border-radius: 22px 22px 0 0;
  padding-bottom: max(env(safe-area-inset-bottom, 0px) + 1.35rem, 1.35rem);
  background: rgba(18,18,24,0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lock-picker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  margin: 0.35rem 0 0;
}
.lock-picker::before {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  top: 50%;
  height: 42px;
  transform: translateY(-50%);
  border-top: 0.5px solid rgba(255,255,255,0.26);
  border-bottom: 0.5px solid rgba(255,255,255,0.26);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.045), transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.24);
  pointer-events: none;
  z-index: 2;
}
.wheel-col {
  position: relative;
  width: 72px;
  height: 210px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.wheel-col::-webkit-scrollbar { display: none; }
.wheel-pad { height: 84px; }
.wheel-item {
  width: 100%;
  height: 42px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.42);
  font-family: var(--font-display);
  font-size: 1.72rem;
  line-height: 42px;
  letter-spacing: 0.04em;
  text-align: center;
  scroll-snap-align: center;
  cursor: pointer;
  transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease, text-shadow 0.18s ease;
}
.wheel-item:focus-visible { outline: 1px solid rgba(255,255,255,0.28); outline-offset: -4px; }
.wheel-sep {
  color: rgba(255,255,255,0.46);
  font-family: var(--font-display);
  font-size: 1.65rem;
  margin-bottom: 2px;
}
.wheel-labels {
  display: grid;
  grid-template-columns: 72px 72px 72px;
  justify-content: center;
  gap: 1.28rem;
  width: 100%;
  margin-top: -0.15rem;
  color: rgba(255,255,255,0.28);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sheet-actions {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.7rem;
}
.sheet-actions .btn { flex: 1; }
.weather-picker-frame {
  position: relative;
  width: min(300px, 78vw);
  height: 210px;
  margin: 0.3rem auto 0.1rem;
}
.weather-picker-frame__selection {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 50%;
  height: 42px;
  transform: translateY(-50%);
  border-top: 0.5px solid rgba(255,255,255,0.26);
  border-bottom: 0.5px solid rgba(255,255,255,0.26);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.045), transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.24);
  pointer-events: none;
  z-index: 3;
}
.weather-wheel {
  width: 100%;
  height: 100%;
  margin: 0;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}
.weather-wheel .wheel-item {
  font-family: var(--font-body);
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.38;
}
.weather-wheel .wheel-item.is-selected {
  color: rgba(255,255,255,0.94);
  opacity: 1;
  transform: scale(1.03);
  text-shadow: 0 0 14px rgba(255,255,255,0.2);
}
.weather-wheel .wheel-item.is-near {
  opacity: 0.58;
}
.pwa-install-btn { left: max(env(safe-area-inset-left, 0px) + 1.05rem, 1.05rem); }
body .pwa-install-btn { left: max(env(safe-area-inset-left, 0px) + 1.05rem, 1.05rem); }
/* ── Menu button — top-left ── */
.menu-btn {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  color: rgba(255,255,255,0.50);
  flex-shrink: 0;
  transition: color 0.2s;
}
.menu-btn span {
  display: block;
  width: 16px;
  height: 1.4px;
  background: currentColor;
  border-radius: 1px;
  transition: opacity 0.18s;
}
.menu-btn:hover, .menu-btn:focus-visible { color: rgba(255,255,255,0.86); }

/* ── Countdown badge — beside menu button ── */
.countdown-badge {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 6px 4px 6px 0.28rem;
  flex-shrink: 0;
  pointer-events: auto;
  user-select: none;
  cursor: pointer;
  touch-action: manipulation;
}
.countdown-badge.is-hidden { display: none; }

/* Local spark burst on countdown badge reaching zero */
@keyframes countdown-spark-fly {
  0%   { transform: translate(-50%,-50%) scale(1.2); opacity: 1; }
  60%  { opacity: 0.7; }
  100% { transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0); opacity: 0; }
}
.countdown-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  pointer-events: none;
  z-index: 200;
  animation: countdown-spark-fly 2.4s ease-out forwards;
}
.countdown-spark--a { background: rgba(91,200,245,0.95); }   /* blue */
.countdown-spark--b { background: rgba(240,192,64,0.95); }   /* gold */
.countdown-spark--c { background: rgba(255,182,193,0.95); }  /* pink */
.countdown-spark--d { background: rgba(134,239,172,0.95); }  /* green */

/* ── Bond age — fixed bottom-right, above room code ── */
.bond-age-display {
  position: fixed;
  right: max(env(safe-area-inset-right, 0px) + 1rem, 1rem);
  bottom: calc(max(env(safe-area-inset-bottom, 0px) + 0.9rem, 0.9rem) + 1.35rem);
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.54);
  text-shadow: 0 0 12px rgba(255,255,255,0.08);
  font-variant-numeric: tabular-nums;
  user-select: none;
  pointer-events: none;
  z-index: 30;
}

/* ── Room code — fixed bottom-right ── */
.room-code {
  position: fixed;
  right: max(env(safe-area-inset-right, 0px) + 1rem, 1rem);
  bottom: max(env(safe-area-inset-bottom, 0px) + 0.9rem, 0.9rem);
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  text-shadow: 0 0 12px rgba(255,255,255,0.08);
  user-select: none;
  pointer-events: none;
  z-index: 30;
}

/* ── Presence widgets — fixed vertical column, top-right ── */
.presence-widgets {
  position: fixed;
  top: max(env(safe-area-inset-top, 0px) + 0.85rem, 0.85rem);
  right: max(env(safe-area-inset-right, 0px) + 0.9rem, 0.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  align-items: flex-end;
  z-index: 50;
}
/* Widget uses a 2-column grid: icon (left, spans both rows) + label/time (right column stacked).
   This allows multi-line labels without breaking the icon alignment. */
.presence-widget {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.28rem;
  min-height: 26px;
  max-width: none;
  padding: 0.26rem 0.52rem;
  border-radius: 10px;
  border: 0.5px solid rgba(255,255,255,0.13);
  background: rgba(10,10,16,0.78);
  color: rgba(255,255,255,0.58);
  font-size: 0.63rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.24s, background 0.24s, box-shadow 0.24s, color 0.24s;
  font-family: var(--font-body);
  text-align: left;
}
.presence-widget:active { transform: scale(0.95); }
.presence-widget__icon {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  font-size: 0.82rem;
  line-height: 1;
}
.presence-widget__label {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.63rem;
  line-height: 1.3;
  white-space: nowrap;
}
.presence-widget__time {
  grid-column: 2;
  grid-row: 2;
  opacity: 0.5;
  font-size: 0.55rem;
  line-height: 1.2;
  white-space: nowrap;
}
.presence-widget.is-active {
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.82);
  box-shadow: 0 0 14px rgba(255,255,255,0.05);
}
.presence-widget--activity.is-active {
  border-color: rgba(240,192,64,0.28);
  box-shadow: 0 0 14px rgba(240,192,64,0.08);
}
.presence-widget--side-activity.is-active {
  border-color: rgba(192,132,252,0.26);
  box-shadow: 0 0 14px rgba(192,132,252,0.08);
}
.presence-widget--weather.is-active {
  border-color: rgba(91,200,245,0.26);
  box-shadow: 0 0 14px rgba(91,200,245,0.08);
}
.presence-widget--feeling.is-active {
  border-color: rgba(255,182,193,0.26);
  box-shadow: 0 0 14px rgba(255,182,193,0.08);
}

/* Compact picker frame (side-by-side wheels in activity modal) */
.weather-picker-frame--compact {
  height: 150px;
}
.weather-picker-frame--compact .weather-wheel {
  height: 150px;
}

/* Sublabel inside share modal sections */
.share-modal-received-sublabel {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.32);
  margin: 0.55rem 0 0.32rem;
  font-family: var(--font-body);
}
@media (max-width: 400px) {
  .presence-widget { padding: 0.22rem 0.42rem; }
  .presence-widget__time { display: none; }
}

@media (max-width: 420px) {
  .topbar { padding: 0 0.75rem; }
  .topbar__left { left: 0.85rem; }
  .topbar__actions { right: 0.65rem; }
  .topbar .room-code-badge { max-width: 6.4ch; overflow: hidden; }
  .topbar__countdown { font-size: 0.95rem; }
  .topbar__icon-btn { width: 30px; }
}

/* ── 10-dot trail extended ── */
.touch-trail {
  gap: 0.26rem;
}
.touch-trail__dot--empty {
  background: rgba(255,255,255,0.1);
  box-shadow: none;
}
@keyframes dot-shine-a {
  0%, 100% { transform: scale(1);    opacity: 0.62; }
  40%       { transform: scale(1.4); opacity: 1; }
}
@keyframes dot-shine-b {
  0%, 100% { transform: scale(1);    opacity: 0.62; }
  40%       { transform: scale(1.4); opacity: 1; }
}
.touch-trail.dot-shine-a .touch-trail__dot--a {
  animation: dot-shine-a 2.2s ease-in-out 1 forwards;
  background: rgba(255,215,50,0.98);
  box-shadow: 0 0 14px rgba(255,215,50,0.65);
}
.touch-trail.dot-shine-b .touch-trail__dot--b {
  animation: dot-shine-b 2.2s ease-in-out 1 forwards;
  background: rgba(55,218,110,0.98);
  box-shadow: 0 0 14px rgba(55,218,110,0.65);
}

/* ── Mutual celebration ── */
.mutual-celebration {
  position: fixed;
  left: 50%;
  top: 42%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 500;
}
@keyframes mutual-spark-fly {
  0% { opacity: 0.95; transform: translate(0, 0) scale(1.1); }
  75% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.2); }
}
.mutual-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin: -3px 0 0 -3px;
  animation: mutual-spark-fly 1.5s cubic-bezier(0.18, 0.88, 0.38, 1) forwards;
}
.mutual-spark--a {
  background: rgba(255,104,124,0.95);
  box-shadow: 0 0 12px rgba(255,104,124,0.7);
}
.mutual-spark--b {
  background: rgba(120,210,255,0.95);
  box-shadow: 0 0 12px rgba(120,210,255,0.7);
}
@keyframes mutual-heart-pulse {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.14); }
  60% { transform: scale(1.04); }
  80% { transform: scale(1.10); }
}
.heart-btn.mutual-pulse {
  animation: mutual-heart-pulse 0.85s ease-in-out !important;
}

/* ── Timer locked ── */
.topbar__edit-btn.is-locked {
  opacity: 0.2;
  cursor: not-allowed;
}

/* ── Activity status ── */
.activity-status {
  min-height: 1em;
  margin-top: 0.28rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.28);
  text-align: center;
  font-family: var(--font-body);
  text-transform: lowercase;
  pointer-events: none;
  transition: color 0.5s;
}
.activity-status.is-active {
  color: rgba(255,255,255,0.46);
}

/* ── Heart condition bands ── */
body.band-thriving {
  --temp-core: #ff4455;
  --temp-aura: rgba(255,68,85,0.42);
  --glow: rgba(255,68,85,0.32);
}
body.band-healthy {
  --temp-core: #e8364a;
  --temp-aura: rgba(232,54,74,0.38);
  --glow: rgba(232,54,74,0.28);
}
body.band-weakening {
  --temp-core: #c06040;
  --temp-aura: rgba(192,96,64,0.28);
  --glow: rgba(192,96,64,0.2);
}
body.band-fragile {
  --temp-core: #a05038;
  --temp-aura: rgba(160,80,56,0.22);
  --glow: rgba(160,80,56,0.16);
}
body.band-critical {
  --temp-core: #883030;
  --temp-aura: rgba(136,48,48,0.2);
  --glow: rgba(136,48,48,0.14);
}
body.band-fading {
  --temp-core: #6a3030;
  --temp-aura: rgba(100,48,48,0.16);
  --glow: rgba(100,48,48,0.1);
}
body.band-dead {
  --temp-core: #555;
  --temp-aura: rgba(80,80,80,0.1);
  --glow: rgba(80,80,80,0.08);
}
/* Recovery weak heartbeat: state-recovery means deadMode with deadPercent > 0.
   The heart beat is faint until 51%, controlled by the temp-rhythm class from JS. */
body.state-recovery .heart-btn.temp-rhythm-recovery {
  animation: heartbeat 2.2s ease-in-out infinite;
  opacity: 0.85;
}

/* ── Touch trail row & theme edit button ── */
.touch-trail-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 12px;
  margin-top: 0.3rem;
}
.touch-trail {
  margin-top: 0;
}
/* theme-edit-btn removed from homepage HTML — element no longer exists.
   Keeping rule as display:none safety net in case of accidental re-addition. */
.theme-edit-btn {
  display: none !important;
}

/* ── Theme selector modal ── */
.theme-modal-card {
  width: min(360px, 92vw);
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.theme-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
  width: 100%;
  margin-top: 0.4rem;
  max-height: 310px;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0 0.1rem;
}
.theme-picker::-webkit-scrollbar { display: none; }
.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0.85rem 0.4rem 0.65rem;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.11);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.22s, background 0.22s, box-shadow 0.22s, transform 0.14s;
  overflow: hidden;
  color: rgba(255,255,255,0.8);
  text-align: center;
}
.theme-card:active { transform: scale(0.95); }
.theme-card.is-selected {
  border-color: var(--card-core);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 18px color-mix(in srgb, var(--card-core), transparent 54%);
}
.theme-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, var(--card-glow), transparent 60%);
  opacity: 0.38;
  pointer-events: none;
}
.theme-card.is-selected .theme-card__glow { opacity: 0.68; }
.theme-card__heart {
  width: 30px;
  height: 30px;
  color: var(--card-core);
  filter: drop-shadow(0 0 8px var(--card-glow));
  flex-shrink: 0;
  transition: filter 0.2s;
}
.theme-card.is-selected .theme-card__heart {
  filter: drop-shadow(0 0 14px var(--card-glow)) drop-shadow(0 0 4px var(--card-core));
}
.theme-card__heart svg { width: 100%; height: 100%; }
.theme-card__label {
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.62);
  line-height: 1;
  white-space: nowrap;
}
/* Taken-by-baby state */
.theme-card.is-taken {
  opacity: 0.46;
  cursor: pointer;
}
.theme-card.is-taken .theme-card__glow { opacity: 0.22; }
.theme-card-taken {
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.55);
  line-height: 1;
}

/* Glow display (my glow / baby's glow) */
.theme-glow-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-bottom: 0.55rem;
  min-height: 38px;
}
.theme-glow-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.theme-glow-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.theme-glow-label {
  font-size: 0.56rem;
  color: rgba(255,255,255,0.36);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Theme message (error/success) */
.theme-message {
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  text-align: center;
  font-style: italic;
  min-height: 1.2em;
  padding: 0 0.5rem;
  letter-spacing: 0.03em;
  line-height: 1.5;
  opacity: 0;
  transition: color 0.3s, opacity 0.35s ease;
  white-space: pre-line;
}
.theme-message.is-visible { opacity: 1; }
.theme-message.is-error   { color: rgba(255,120,100,0.9); }
.theme-message.is-success { color: rgba(255,215,130,0.78); }

/* ── Personal theme CSS-variable override ── */
/* Comes after all band/state rules so it wins at equal specificity */
body.pt-active {
  --temp-core: var(--pt-core, #e8364a);
  --temp-aura: var(--pt-aura, rgba(232,54,74,0.38));
  --glow:      var(--pt-glow, rgba(232,54,74,0.28));
}

/* Dead state always overrides personal theme (safety net — JS also blocks activation) */
body.pt-active.state-dead,
body.pt-active.dead {
  --temp-core: #696969;
  --temp-aura: rgba(120,120,120,0.08);
  --glow:      rgba(120,120,120,0.08);
}

/* ── Share modal — received card + selector sections ── */
.share-modal-card {
  max-height: 92vh;
  overflow-y: auto;
  gap: 0.9rem;
}
.share-modal-section {
  width: 100%;
  text-align: left;
}
.share-modal-kicker {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.52rem;
  font-family: var(--font-body);
}
.share-modal-received-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.82rem;
  padding: 0.82rem 0.9rem;
  border-radius: 16px;
  border: 0.5px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.07), transparent 48%),
    rgba(255,255,255,0.05);
  box-shadow:
    0 12px 36px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.07);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.share-modal-received-card.is-active {
  border-color: rgba(255,255,255,0.2);
  box-shadow:
    0 12px 36px rgba(0,0,0,0.22),
    0 0 22px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.share-modal-received-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  background: rgba(255,255,255,0.07);
  border: 0.5px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.share-modal-received-main {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.share-modal-received-title {
  font-size: 0.96rem;
  color: rgba(255,255,255,0.88);
  font-family: var(--font-body);
  line-height: 1.2;
}
.share-modal-received-time {
  margin-top: 0.14rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.52);
  font-variant-numeric: tabular-nums;
}
.share-modal-received-phrase {
  margin-top: 0.32rem;
  font-size: 0.66rem;
  color: rgba(255,255,255,0.36);
  line-height: 1.4;
  font-style: italic;
  font-family: var(--font-display);
}
.share-modal-divider {
  width: 100%;
  height: 0.5px;
  background: rgba(255,255,255,0.09);
  margin: 0.1rem 0;
  flex-shrink: 0;
}
.share-modal-section--selector .weather-picker-frame {
  margin-top: 0.3rem;
}
.share-modal-section--selector .modal-request-btn {
  margin-top: 0.5rem;
}
.share-modal-myshare {
  margin-top: 0.45rem;
  font-size: 0.63rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em;
  text-align: center;
  font-family: var(--font-body);
  min-height: 1em;
}

/* ── Shared Space Two-Card Modals ───────────────────────────── */

.share-slider-card {
  position: relative;
  width: min(440px, calc(100vw - 2rem));
  height: min(82vh, 660px);
  border-radius: 22px;
  background: rgba(22,22,28,0.97);
  border: 0.5px solid rgba(255,255,255,0.14);
  box-shadow: 0 28px 64px rgba(0,0,0,0.65), 0 8px 24px rgba(0,0,0,0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  text-align: left;
}

/* Track: scrolling container; only the active panel is in flow */
.share-slider-track {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.share-slider-track::-webkit-scrollbar { display: none; }

/* Both panels default hidden; active one shows in normal flow */
.share-panel {
  display: none;
  touch-action: pan-y;
}
.share-panel.is-active {
  display: block;
}

.share-panel__content {
  padding: 1.1rem 1rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  box-sizing: border-box;
}

.share-panel__label {
  font-size: 0.59rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  flex-shrink: 0;
}

/* Dedicated swipe zone wrapping the dots — intentional side-switch area */
.share-switch-zone {
  flex-shrink: 0;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}

/* Two-dot indicator */
.share-slider-snaps {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 0.55rem 0;
  flex-shrink: 0;
}
.ssd-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background 0.22s, transform 0.22s;
  cursor: pointer;
}
.ssd-dot.is-active { background: rgba(255,255,255,0.65); transform: scale(1.4); }

/* Mine panel button + myshare text */
.share-panel--mine .modal-request-btn { margin-top: 0.3rem; width: 100%; }
.share-panel--mine .share-modal-myshare {
  font-size: 0.63rem; color: rgba(255,255,255,0.3);
  letter-spacing: 0.04em; text-align: center; font-family: var(--font-body);
}

/* Pickers don't need extra top margin inside panels */
.share-panel .weather-picker-frame { margin-top: 0; }

/* ── Custom presence label section ── */
.custom-label-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}
.custom-label-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.custom-label-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  padding: 0.38rem 0.6rem;
  outline: none;
  letter-spacing: 0.02em;
  transition: border-color 0.14s;
}
.custom-label-input:focus { border-color: rgba(255,255,255,0.22); }
.custom-label-input::placeholder { color: rgba(var(--c-coffee), 0.45); font-style: italic; }
.custom-label-count {
  font-size: 0.58rem;
  color: rgba(var(--c-coffee), 0.6);
  white-space: nowrap;
  flex-shrink: 0;
}
.custom-emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.custom-emoji-grid.is-hidden { display: none; }
.emoji-pick-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, transform 0.1s;
  padding: 0;
  flex-shrink: 0;
  touch-action: manipulation;
}
.emoji-pick-btn:active { transform: scale(0.88); }
.emoji-pick-btn.is-selected {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.11);
}
.custom-label-error {
  font-size: 0.62rem;
  color: rgba(255,100,100,0.88);
  margin: 0;
  min-height: 0;
  display: none;
}
.custom-label-error.is-visible { display: block; }

/* Todo card specifics */
.todo-slider-card { height: min(80vh, 620px); }
.share-slider-card .todo-add-row {
  padding: 0 1rem max(env(safe-area-inset-bottom, 0px) + 0.6rem, 0.6rem);
}
.todo-list-inner { display: flex; flex-direction: column; gap: 0; }

/* ── Per-theme subtle atmospheric overlays ── */
body.pt-active.pt-gold .ambient     { filter: blur(4px) brightness(1.1) sepia(0.12); }
body.pt-active.pt-fire .ambient     { filter: blur(4px) brightness(1.12) saturate(1.2); }
body.pt-active.pt-ice .ambient      { filter: blur(4px) saturate(0.78); }
body.pt-active.pt-purple .ambient   { filter: blur(4px) saturate(1.18) hue-rotate(10deg); }
body.pt-active.pt-green .ambient    { filter: blur(4px) saturate(1.15); }
body.pt-active.pt-sunset .ambient   { filter: blur(4px) brightness(1.08) saturate(1.1); }
body.pt-active.pt-pink .ambient     { filter: blur(4px) saturate(1.1); }
body.pt-active.pt-silver .ambient   { filter: blur(4px) brightness(1.04) saturate(0.85); }
body.pt-active.pt-cloud .ambient    { filter: blur(4px) brightness(1.02) saturate(0.8); }

/* ── Theme activation transition ── */
.heart-fill     { transition: fill 1.0s ease, opacity 1.0s ease, y 0.05s linear; }
.heart-outline  { transition: stroke 1.0s ease, opacity 0.8s ease; }
.heart-aura     { transition: opacity 0.9s ease, background 1.0s ease; }

/* ── Percentage phrase display ── */
.silent-memory.phrase-changing {
  opacity: 0;
  transition: opacity 0.27s ease;
}
/* Phrase colour subtly adapts to warmth/state via --temp-phrase (inherited) */
/* Warm states: brighter phrase; Cold/dead states: dimmer phrase — all automatic */

/* ── Refill feedback popup ── */
@keyframes refill-feedback-float {
  0%   { opacity: 0;   transform: translateX(-50%) translateY(0)    scale(0.82); }
  18%  { opacity: 1;   transform: translateX(-50%) translateY(-10px) scale(1); }
  78%  { opacity: 0.8; transform: translateX(-50%) translateY(-28px) scale(1); }
  100% { opacity: 0;   transform: translateX(-50%) translateY(-40px) scale(0.92); }
}
.refill-feedback {
  position: fixed;
  left: 50%;
  top: 46%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--temp-core), white 32%);
  text-shadow: 0 0 22px var(--temp-aura);
  pointer-events: none;
  z-index: 600;
  white-space: nowrap;
  animation: refill-feedback-float 1.9s cubic-bezier(0.22, 0.82, 0.44, 1) forwards;
}
.refill-feedback--mutual {
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  color: rgba(255,215,130,0.96);
  text-shadow: 0 0 28px rgba(255,200,90,0.5), 0 0 56px rgba(91,200,245,0.28);
}

/* ── Mutual firework celebration ── */
/* NOTE: Calm Mode must NOT suppress these — mutual hold is the most     */
/* important emotional ritual. These are intentionally outside calm-mode. */
.mutual-fireworks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 490;
}
.mutual-burst {
  position: absolute;
  width: 0;
  height: 0;
}
@keyframes mutual-fw-spark-fly {
  0%   { opacity: 0.95; transform: translate(0, 0) scale(1.1); }
  55%  { opacity: 0.65; }
  100% { opacity: 0;    transform: translate(var(--tx), var(--ty)) scale(0.08); }
}
.mutual-fw-spark {
  position: absolute;
  border-radius: 50%;
  /* Single lightweight glow — no double blur to keep mobile GPU free */
  animation: mutual-fw-spark-fly 1.85s cubic-bezier(0.12, 0.82, 0.32, 1) forwards;
}
/* Four colours: sky-blue, gold, rose-pink, mint-green */
.mutual-fw-spark--a {
  background: rgba(91,200,245,0.96);
  box-shadow: 0 0 7px rgba(91,200,245,0.65);
}
.mutual-fw-spark--b {
  background: rgba(240,192,64,0.96);
  box-shadow: 0 0 7px rgba(240,192,64,0.65);
}
.mutual-fw-spark--c {
  background: rgba(255,110,150,0.96);
  box-shadow: 0 0 7px rgba(255,110,150,0.65);
}
.mutual-fw-spark--d {
  background: rgba(77,255,184,0.96);
  box-shadow: 0 0 7px rgba(77,255,184,0.65);
}

@keyframes mutual-bloom-expand {
  0%   { opacity: 0;    transform: scale(0.4); }
  18%  { opacity: 0.55; transform: scale(1);   }
  60%  { opacity: 0.2;  transform: scale(1.9); }
  100% { opacity: 0;    transform: scale(2.6); }
}
.mutual-bloom {
  position: fixed;
  left: 50%;
  top: 42%;
  width: min(88vw, 520px);
  height: min(88vw, 520px);
  margin-left: calc(min(88vw, 520px) / -2);
  margin-top: calc(min(88vw, 520px) / -2);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255,240,200,0.30) 0%,
    rgba(91,200,245,0.14)  40%,
    rgba(240,192,64,0.08)  65%,
    transparent            75%
  );
  pointer-events: none;
  z-index: 488;
  /* Shortened to 2.5s — fits within 3s DOM cleanup */
  animation: mutual-bloom-expand 2.5s cubic-bezier(0.15, 0.75, 0.35, 1) forwards;
}

/* Layer 4: dot row celebration */
@keyframes mutual-dot-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.7); }
}
.touch-trail.mutual-dot-glow .touch-trail__dot {
  animation: mutual-dot-pulse 0.7s ease-in-out 3;
}
.touch-trail.mutual-dot-glow .touch-trail__dot--a {
  background: rgba(91,200,245,0.94);
  box-shadow: 0 0 18px rgba(91,200,245,0.65);
}
.touch-trail.mutual-dot-glow .touch-trail__dot--b {
  background: rgba(240,192,64,0.94);
  box-shadow: 0 0 18px rgba(240,192,64,0.65);
}
.touch-trail.mutual-dot-glow .touch-trail__dot--empty {
  background: rgba(255,255,255,0.32);
  box-shadow: 0 0 8px rgba(255,255,255,0.18);
}

/* ── prefers-reduced-motion: simple fade, never hidden ── */
/* Sparks appear in-place as coloured dots and fade out.   */
/* Bloom fades gently. Never display:none — must be seen.  */
@keyframes mutual-fw-reduced {
  0%   { opacity: 0.9; }
  100% { opacity: 0;   }
}
@keyframes mutual-bloom-reduced {
  0%   { opacity: 0.35; transform: scale(0.85); }
  100% { opacity: 0;    transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  /* Override fly-out with a simple in-place fade — colourful and visible */
  .mutual-fw-spark {
    animation: mutual-fw-reduced 1.8s ease-out forwards !important;
  }
  .mutual-bloom {
    animation: mutual-bloom-reduced 2s ease-out forwards !important;
  }
  .refill-feedback { animation: none !important; opacity: 0; pointer-events: none; }
  .touch-trail.mutual-dot-glow .touch-trail__dot { animation: none !important; }
}

/* ── Checking feature ── */
#checkingFlash {
  position: fixed;
  inset: 0;
  z-index: 610;
  background: #fffef8;
  opacity: 0;
  pointer-events: none;
}
.checking-screen {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(6,6,10,0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.3rem;
  padding: 2.5rem 1.8rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out-expo);
}
.checking-screen.is-visible {
  opacity: 1;
  pointer-events: all;
}
.checking-icon {
  font-size: 3.2rem;
  line-height: 1;
  color: rgba(255,215,130,0.72);
  animation: checking-heartpulse 2.2s ease-in-out infinite;
}
@keyframes checking-heartpulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.checking-title {
  font-family: var(--font-display);
  font-size: 1.38rem;
  color: rgba(255,255,255,0.86);
  font-weight: 400;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.4;
}
.checking-message {
  font-size: 0.94rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  margin: 0;
}
.checking-actions {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  width: 100%;
  max-width: 260px;
  margin-top: 0.4rem;
}
.checking-ok-btn,
.checking-skip-btn { width: 100%; }
.checking-toast {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom, 0px) + 5rem, 5rem);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  max-width: min(320px, 88vw);
  background: rgba(20,20,26,0.97);
  border: 0.5px solid rgba(255,215,130,0.22);
  border-radius: 12px;
  padding: 0.72rem 1.1rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.03em;
  text-align: center;
  z-index: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}
.checking-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Persistent Checking response card — stays until green X */
.checking-response-card {
  position: fixed;
  bottom: max(env(safe-area-inset-bottom, 0px) + 5rem, 5rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(320px, 88vw);
  background: rgba(20,20,26,0.97);
  border: 0.5px solid rgba(255,215,130,0.3);
  border-radius: 12px;
  padding: 0.75rem 3rem 0.88rem 1.2rem;
  z-index: 701;
  pointer-events: all;
  box-shadow: 0 6px 28px rgba(0,0,0,0.45);
}
#checkingResponseCard .modal-close {
  top: 2px;
  right: 2px;
}
.checking-response-msg {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.5;
  margin: 0;
  white-space: normal;
}

.checking-countdown-number {
  font-family: var(--font-display);
  font-size: 2.6rem !important;
  color: rgba(255,215,130,0.82);
  line-height: 1 !important;
}
.response-checking-btn {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  padding: 0.38rem 0.8rem;
}

/* ── Side menu overlay ── */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(8,8,12,0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.34s var(--ease-out-expo);
}
.menu-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}
.menu-panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(268px, 78vw);
  background: rgba(11,11,17,0.98);
  border-right: 0.5px solid rgba(255,255,255,0.09);
  display: flex;
  flex-direction: column;
  padding: max(env(safe-area-inset-top, 0px) + 1.3rem, 1.3rem) 1.3rem max(env(safe-area-inset-bottom, 0px) + 1.8rem, 1.8rem);
  transform: translateX(-100%);
  transition: transform 0.36s var(--ease-out-expo);
}
.menu-overlay.is-visible .menu-panel { transform: translateX(0); }
.menu-close {
  align-self: flex-end;
  margin-bottom: 0.9rem;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.28);
  font-size: 1.7rem;
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: color 0.2s;
}
.menu-close:hover { color: rgba(255,255,255,0.68); }
.menu-branding {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.menu-branding__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.14em;
}
.menu-branding__sub {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.1em;
}
.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  flex: 1;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 0.78rem;
  width: 100%;
  padding: 0.78rem 0.7rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: rgba(255,255,255,0.64);
  font-family: var(--font-body);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s, color 0.18s;
}
.menu-item:hover, .menu-item:focus-visible {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.94);
}
.menu-item--review {
  color: rgba(255,215,130,0.86);
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}
.menu-item--review:hover {
  background: rgba(255,215,130,0.08);
  color: rgba(255,225,148,1);
}
.menu-item--secondary {
  margin-top: auto;
  color: rgba(255,255,255,0.34);
  font-size: 0.78rem;
}
.menu-item__icon {
  font-size: 0.95rem;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.62;
  line-height: 1;
}

/* ── Review screen ── */
.review-screen {
  position: fixed;
  inset: 0;
  z-index: 420;
  background: rgba(6,6,10,0.97);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.44s var(--ease-out-expo);
  overflow: hidden;
}
.review-screen.is-visible {
  opacity: 1;
  pointer-events: all;
}
.review-screen__inner {
  flex: 1;
  overflow-y: auto;
  padding: max(env(safe-area-inset-top, 0px) + 1.6rem, 1.6rem) 1.7rem max(env(safe-area-inset-bottom, 0px) + 2.4rem, 2.4rem);
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0;
  gap: 1rem;
}
.review-header__titles { display: flex; flex-direction: column; gap: 0.2rem; }
.review-header__title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  color: rgba(255,215,130,0.88);
  letter-spacing: 0.1em;
}
.review-header__sub {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.12em;
}
.review-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.28);
  font-size: 1.7rem;
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: color 0.2s;
}
.review-close:hover { color: rgba(255,255,255,0.68); }
.review-divider {
  height: 0.5px;
  background: rgba(255,215,130,0.12);
  margin: 1.4rem 0 2.2rem;
}
.review-insight {
  padding-bottom: 2rem;
  margin-bottom: 1.8rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.review-insight:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.review-insight__category {
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,215,130,0.38);
  margin-bottom: 0.65rem;
}
.review-insight__text {
  font-family: var(--font-display);
  font-size: 0.97rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.82;
  letter-spacing: 0.025em;
  font-style: italic;
}
.review-no-data {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.28);
  text-align: center;
  margin: 5rem 0;
  font-style: italic;
  letter-spacing: 0.06em;
  line-height: 1.7;
}
/* Adjust topbar__left spacing for menu btn */
.topbar__left {
  gap: 0.45rem;
}

/* ── Review dashboard components ── */
.rv-card {
  background: rgba(255,255,255,0.038);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 1.2rem 1.25rem;
  margin-bottom: 1rem;
}
.rv-card:last-child { margin-bottom: 0; }
.rv-card--hero {
  background: linear-gradient(140deg, rgba(255,215,130,0.08), rgba(91,200,245,0.05));
  border-color: rgba(255,215,130,0.14);
}
.rv-card--chart,
.rv-card--rings {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}
.rv-card--reflection { background: rgba(255,255,255,0.024); }
.rv-card__label {
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,215,130,0.42);
  margin-bottom: 0.9rem;
  font-family: var(--font-body);
  width: 100%;
}
.rv-hero-phrase {
  font-family: var(--font-display);
  font-size: 0.98rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.rv-hero-stats {
  display: flex;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  padding-top: 0.85rem;
  gap: 0;
}
.rv-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  border-right: 0.5px solid rgba(255,255,255,0.07);
}
.rv-stat:last-child { border-right: none; }
.rv-stat__val {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: rgba(255,255,255,0.88);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rv-stat__key {
  font-size: 0.54rem;
  color: rgba(255,255,255,0.32);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rv-row {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.rv-legend-row {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin-top: 0.65rem;
  width: 100%;
}
.rv-legend {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.48);
}
.rv-legend--a::before { content: '●'; color: #5bc8f5; margin-right: 0.32rem; font-size: 0.5rem; }
.rv-legend--b::before { content: '●'; color: #f0c040; margin-right: 0.32rem; font-size: 0.5rem; }
.rv-legend--m::before { content: '●'; color: #ff6b8a; margin-right: 0.32rem; font-size: 0.5rem; }
.rv-rings {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.25rem;
}
.rv-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
}
.rv-ring-label {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.34);
  letter-spacing: 0.1em;
}
.rv-metrics {
  display: flex;
  gap: 0;
  margin-bottom: 0.9rem;
}
.rv-metric {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  border-right: 0.5px solid rgba(255,255,255,0.07);
}
.rv-metric:last-child { border-right: none; }
.rv-metric__val {
  font-family: var(--font-display);
  font-size: 1.28rem;
  color: rgba(255,255,255,0.82);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rv-metric__key {
  font-size: 0.52rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
}
.rv-bar-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.rv-bar-track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.rv-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 1.1s var(--ease-out-expo);
}
.rv-bar-fill--recovery { background: linear-gradient(90deg, #f0c040, #ff6b8a); }
.rv-bar-fill--weather  { background: linear-gradient(90deg, #5bc8f5, #7dd8ff); }
.rv-bar-fill--activity { background: linear-gradient(90deg, #f0c040, #f8d880); }
.rv-bar-fill--feeling  { background: linear-gradient(90deg, #f9a8d4, #fbcfe8); }
.rv-bar-label {
  font-size: 0.56rem;
  color: rgba(255,255,255,0.32);
  letter-spacing: 0.08em;
  white-space: nowrap;
  min-width: 70px;
}
.rv-presence-bars {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.rv-presence-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.rv-presence-label {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.46);
  min-width: 78px;
  letter-spacing: 0.04em;
}
.rv-insight {
  padding: 0.75rem 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.rv-insight:last-child { border-bottom: none; padding-bottom: 0; }
.rv-insight__cat {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,215,130,0.36);
  margin-bottom: 0.38rem;
}
.rv-insight__text {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.78;
  font-style: italic;
  letter-spacing: 0.02em;
}
.rv-no-data {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.26);
  text-align: center;
  padding: 0.8rem 0;
  font-style: italic;
  font-family: var(--font-display);
}
@media (max-width: 360px) {
  .rv-row { flex-direction: column; }
  .rv-rings { justify-content: center; }
}

/* ── Cinematic Emotional Observatory ── */

/* Season atmosphere overlays */
.review-screen.rv-season-warm         { background: linear-gradient(180deg, rgba(30,17,4,0.98), rgba(6,6,10,0.98) 52%); }
.review-screen.rv-season-synchronized { background: linear-gradient(180deg, rgba(4,13,26,0.98), rgba(6,6,10,0.98) 52%); }
.review-screen.rv-season-recovering   { background: linear-gradient(180deg, rgba(26,13,4,0.98), rgba(6,6,10,0.98) 52%); }
.review-screen.rv-season-fragile,
.review-screen.rv-season-distant      { background: rgba(5,5,8,0.99); filter: saturate(0.72) brightness(0.9); }
.review-screen.rv-season-beginning,
.review-screen.rv-season-forming      { background: rgba(6,6,10,0.99); }

/* Hero */
.rv-hero {
  position: relative;
  text-align: center;
  padding: 0.2rem 0 2rem;
}
.rv-hero:not(.rv-hero--history) .review-close { position: absolute; top: 0; right: 0; }
.rv-hero__season-label {
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,215,130,0.42);
  margin-bottom: 0.52rem;
}
.rv-hero__season-name {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.07em;
  margin-bottom: 1.1rem;
  line-height: 1.2;
}
.rv-hero__hb {
  margin: 0 auto 1rem;
  display: flex;
  justify-content: center;
}
.rv-hb-svg { opacity: 0.72; max-width: 100%; }
@keyframes rv-hb-draw { to { stroke-dashoffset: 0; } }
.rv-hb-path { animation: rv-hb-draw 2s ease-out 0.5s forwards; }
.rv-hero__phrase {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-style: italic;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.rv-hero__sub {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.26);
}

/* Sections */
.rv-section { margin-bottom: 1.8rem; }
.rv-section__label {
  font-size: 0.5rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,215,130,0.32);
  margin-bottom: 0.88rem;
}

/* Timeline */
.rv-timeline { display: flex; flex-direction: column; }
.rv-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 0.88rem;
  padding-bottom: 1.1rem;
  position: relative;
}
.rv-timeline-item:last-child { padding-bottom: 0; }
.rv-timeline-line {
  position: absolute;
  left: 5px; top: 16px; bottom: -4px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
}
.rv-timeline-node {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.22rem;
  border: 1px solid currentColor;
  box-shadow: 0 0 10px currentColor;
}
.rv-timeline-node--warm { color: rgba(255,215,130,0.72); background: rgba(255,215,130,0.18); }
.rv-timeline-node--sync { color: rgba(91,200,245,0.72);  background: rgba(91,200,245,0.18); }
.rv-timeline-node--cold { color: rgba(140,165,200,0.5);  background: rgba(140,165,200,0.1); }
.rv-timeline-node--gold { color: rgba(240,192,64,0.75);  background: rgba(240,192,64,0.18); }
.rv-timeline-node--soft { color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.07); }
.rv-timeline-text {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  font-style: italic;
}

/* Dual pulse rings */
.rv-dual-rings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.rv-pulse-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
  opacity: 0.38;
}
.rv-pulse-ring.is-active { opacity: 1; }
@keyframes rv-ring-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.rv-pulse-ring.is-active svg { animation: rv-ring-breathe 4.5s ease-in-out infinite; }
.rv-ring-track { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 6; }
.rv-ring-fill  { fill: none; stroke-width: 6; stroke-linecap: round; }
.rv-ring-fill--a { stroke: #5bc8f5; filter: drop-shadow(0 0 4px rgba(91,200,245,0.55)); }
.rv-ring-fill--b { stroke: #f0c040; filter: drop-shadow(0 0 4px rgba(240,192,64,0.55)); }
.rv-pulse-ring__val {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: rgba(255,255,255,0.8);
}
.rv-pulse-ring__key {
  font-size: 0.52rem;
  color: rgba(255,255,255,0.34);
  letter-spacing: 0.1em;
}
.rv-mutual-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  padding: 0 0.6rem;
  opacity: 0.28;
  text-align: center;
}
.rv-mutual-center.is-active { opacity: 1; }
.rv-mutual-center__val {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: rgba(255,255,255,0.82);
}
.rv-mutual-center__key {
  font-size: 0.52rem;
  color: rgba(255,255,255,0.36);
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.rv-sync-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.rv-sync-label {
  font-size: 0.54rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.08em;
  min-width: 70px;
}
.rv-sync-pct {
  font-size: 0.56rem;
  color: rgba(255,255,255,0.34);
  min-width: 28px;
  text-align: right;
}
.rv-bar-fill--sync { background: linear-gradient(90deg, #5bc8f5, #f0c040); }

/* Rhythm shape */
.rv-rhythm-canvas {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

/* Vitals */
.rv-vitals-row {
  display: flex;
  justify-content: space-around;
  gap: 0.5rem;
}
.rv-vital-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

/* Meaningful moment */
.rv-meaningful {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.85;
  font-style: italic;
  letter-spacing: 0.022em;
  padding: 1.05rem 1.1rem;
  background: rgba(255,215,130,0.045);
  border: 0.5px solid rgba(255,215,130,0.11);
  border-radius: 16px;
}

/* Reflection cards */
.rv-cards { display: flex; flex-direction: column; gap: 0.72rem; }
.rv-reflection-card {
  position: relative;
  padding: 1.05rem 1.1rem;
  background: rgba(255,255,255,0.038);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
}
.rv-reflection-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, rgba(255,215,130,0.15), transparent);
}
.rv-reflection-card__cat {
  font-size: 0.52rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,215,130,0.32);
  margin-bottom: 0.48rem;
}
.rv-reflection-card__text {
  font-family: var(--font-display);
  font-size: 0.86rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.8;
  font-style: italic;
}

/* ── Chart Observatory UI ── */
.rv-section__label {
  display: flex;
  align-items: center;
  gap: 0.36rem;
}
.rv-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 0.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.38);
  font-size: 0.56rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  font-family: var(--font-body);
}
.rv-info-btn:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); }
.rv-how-to-read {
  font-size: 0.64rem;
  color: rgba(255,255,255,0.26);
  letter-spacing: 0.03em;
  font-style: italic;
  font-family: var(--font-display);
  margin-bottom: 0.75rem;
  padding: 0.58rem 0.7rem;
  border: 0.5px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  line-height: 1.5;
}
.rv-chart-controls {
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  margin-bottom: 0.8rem;
}
.rv-chart-switcher,
.rv-view-toggle {
  display: flex;
  gap: 0.26rem;
  flex-wrap: wrap;
}
.rv-chart-btn,
.rv-view-btn {
  padding: 0.38rem 0.68rem;
  border-radius: 999px;
  border: 0.5px solid rgba(255,255,255,0.13);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.46);
  font-size: 0.63rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.22s, background 0.22s, color 0.22s, box-shadow 0.22s;
  font-family: var(--font-body);
  line-height: 1;
}
.rv-chart-btn.is-active,
.rv-view-btn.is-active {
  border-color: rgba(255,215,130,0.42);
  background: rgba(255,215,130,0.09);
  color: rgba(255,215,130,0.88);
  box-shadow: 0 0 12px rgba(255,215,130,0.1);
}
.rv-chart-summary { margin-bottom: 0.65rem; min-height: 1.2rem; }
.rv-chart-summary__text {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.54);
  line-height: 1.65;
  font-style: italic;
}
.rv-chart-area {
  width: 100%;
  margin-bottom: 0.75rem;
}
.rv-chart-canvas {
  display: block;
  width: 100%;
}
.rv-table-content { width: 100%; }
.rv-table { width: 100%; border-collapse: collapse; }
.rv-table tr { border-bottom: 0.5px solid rgba(255,255,255,0.06); }
.rv-table tr:last-child { border-bottom: none; }
.rv-table td { padding: 0.6rem 0.35rem; vertical-align: middle; }
.rv-table-dim { font-size: 0.68rem; color: rgba(255,255,255,0.42); letter-spacing: 0.04em; width: 38%; }
.rv-table-val { font-family: var(--font-display); font-size: 0.86rem; color: rgba(255,255,255,0.76); width: 20%; text-align: center; font-variant-numeric: tabular-nums; }
.rv-table-desc { font-size: 0.63rem; color: rgba(255,255,255,0.32); font-style: italic; font-family: var(--font-display); line-height: 1.4; width: 42%; }
.rv-insights { display: flex; flex-direction: column; gap: 0.22rem; }
.rv-insight-item {
  font-size: 0.66rem;
  color: rgba(255,215,130,0.48);
  letter-spacing: 0.04em;
  font-style: italic;
}

/* Explanation modal */
.rv-explain-overlay {
  position: fixed;
  inset: 0;
  z-index: 490;
  background: rgba(8,8,12,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out-expo);
}
.rv-explain-overlay.is-visible { opacity: 1; pointer-events: all; }
.rv-explain-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: rgba(14,14,20,0.98);
  border: 0.5px solid rgba(255,215,130,0.22);
  border-radius: 20px;
  padding: 3.5rem 1.5rem 1.5rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}
.rv-explain-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.28);
  font-size: 1.7rem;
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  touch-action: manipulation;
  transition: color 0.2s;
}
.rv-explain-close:hover { color: rgba(255,255,255,0.7); }
.rv-explain-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: rgba(255,215,130,0.85);
  letter-spacing: 0.07em;
  margin-bottom: 0.88rem;
  line-height: 1.3;
}
.rv-explain-text {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.78;
  letter-spacing: 0.015em;
}

/* ── Global readability improvements ── */
.modal-title                  { color: rgba(255,255,255,0.96); }
.modal-body                   { color: rgba(255,255,255,0.86); font-size: 0.84rem; line-height: 1.65; }
.entry__sub                   { color: rgba(255,255,255,0.82); font-size: 0.9rem; }
.waiting__text                { color: rgba(255,255,255,0.86); }
.hold-hint                    { color: rgba(255,255,255,0.78); font-size: 0.8rem; }
.menu-item                    { color: rgba(255,255,255,0.86); }
.gl-section__title            { color: rgba(255,255,255,0.96); font-size: 0.92rem; }
.gl-section__text             { color: rgba(255,255,255,0.82); font-size: 0.82rem; line-height: 1.78; }
.gl-steps li                  { color: rgba(255,255,255,0.78); font-size: 0.8rem; }
.rv-timeline-text             { color: rgba(255,255,255,0.82); }
.rv-insight__text             { color: rgba(255,255,255,0.86); }
.rv-reflection-card__text     { color: rgba(255,255,255,0.86); }
.rv-chart-summary__text       { color: rgba(255,255,255,0.8); }
.rv-section__label            { color: rgba(255,215,130,0.55); }
.rv-hero__phrase              { color: rgba(255,255,255,0.74); }
.rv-hero__sub                 { color: rgba(255,255,255,0.6); }
.rv-meaningful                { color: rgba(255,255,255,0.76); }
.share-modal-received-title   { color: rgba(255,255,255,0.96); font-size: 1rem; }
.share-modal-received-time    { color: rgba(255,255,255,0.75); font-size: 0.78rem; }
.share-modal-received-phrase  { color: rgba(255,255,255,0.58); font-size: 0.72rem; }
.share-modal-kicker           { color: rgba(255,255,255,0.58); font-size: 0.65rem; }
.theme-glow-label             { color: rgba(255,255,255,0.58); }
.checking-message             { color: rgba(255,255,255,0.68); font-size: 1rem; }
.rv-hero__season-name         { color: rgba(255,255,255,0.9); }
.rv-hero__season-label        { color: rgba(255,215,130,0.62); }
.checking-toast               { font-size: 0.84rem; color: rgba(255,255,255,0.85); }

/* ── Cyber green close / X buttons ── */
.modal-close {
  color: #4dffb8 !important;
  text-shadow: 0 0 12px rgba(77,255,184,0.22);
  transition: color 0.22s, text-shadow 0.22s;
}
.modal-close:hover { color: #7dffcc !important; text-shadow: 0 0 20px rgba(77,255,184,0.52); }
.menu-close {
  color: #4dffb8;
  text-shadow: 0 0 10px rgba(77,255,184,0.2);
  transition: color 0.22s;
}
.menu-close:hover { color: #7dffcc; }
.review-close,
.rv-explain-close {
  color: #4dffb8;
  text-shadow: 0 0 10px rgba(77,255,184,0.2);
  transition: color 0.22s;
}
.review-close:hover,
.rv-explain-close:hover { color: #7dffcc; }

/* ── Guideline screen ── */
.guideline-screen { z-index: 440; }
.guideline-inner {
  /* inherits review-screen__inner padding/scroll */
}
.guideline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.guideline-header__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.1em;
}
.guideline-intro {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.04em;
  margin-bottom: 1.6rem;
  font-style: italic;
  font-family: var(--font-display);
}
.gl-section {
  display: flex;
  gap: 0.9rem;
  padding: 1.05rem 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.gl-section:last-of-type { border-bottom: none; }
.gl-section__num {
  font-family: var(--font-display);
  font-size: 0.68rem;
  color: rgba(255,215,130,0.35);
  min-width: 1.6rem;
  padding-top: 0.14rem;
  letter-spacing: 0.04em;
}
.gl-section__body { flex: 1; min-width: 0; }
.gl-section__title {
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  margin-bottom: 0.4rem;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.gl-section__text {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.52);
  line-height: 1.75;
  letter-spacing: 0.01em;
}
.gl-section__text em { font-style: italic; color: rgba(255,255,255,0.42); }
.gl-steps {
  list-style: none;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.gl-steps li {
  font-size: 0.77rem;
  color: rgba(255,255,255,0.52);
  padding-left: 0.88rem;
  position: relative;
  line-height: 1.55;
}
.gl-steps li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: rgba(255,215,130,0.42);
  font-size: 0.9rem;
}
.gl-steps li strong {
  color: rgba(255,255,255,0.72);
  font-weight: 500;
}
.gl-close-btn {
  margin-top: 1.8rem;
  align-self: center;
  width: 100%;
  max-width: 220px;
}
.gl-install-section {
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}
.gl-install-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 260px;
}
.gl-install-hint {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.32);
  text-align: center;
  letter-spacing: 0.03em;
  min-height: 1em;
  font-style: italic;
}
/* Terms screen */
.terms-screen { z-index: 445; }
.gl-terms-footer {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.gl-terms-updated {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.26);
  letter-spacing: 0.1em;
}
.gl-terms-closing {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-style: italic;
  color: rgba(255,255,255,0.36);
  line-height: 1.6;
}
/* Entry/waiting pre-join links */
.entry__guideline-link,
.entry__terms-link {
  color: rgba(255,255,255,0.22);
}
.entry__guideline-link:hover,
.entry__terms-link:hover { color: rgba(255,255,255,0.55); }
.entry__terms-link { margin-top: 0; }
.waiting__guide-link,
.waiting__terms-link { margin-top: 0.8rem; }
/* Menu separator group (Guideline + Terms) */
.menu-item--guide {
  margin-top: 0.6rem;
  padding-top: 0.9rem;
  border-top: 0.5px solid rgba(255,255,255,0.08);
}
/* Second item in the group — no extra separator */
.menu-item--terms { margin-top: 0; border-top: none; padding-top: 0.78rem; }
.menu-item--guide .menu-item__icon { opacity: 0.48; }
/* Disabled menu items (pre-join state) */
.menu-item.is-disabled {
  opacity: 0.24;
  pointer-events: none;
  cursor: default;
}
@media (max-width: 400px) {
  .presence-widget__time { display: none; }
}

/* ── Life object size scale ──────────────────────────────── */
#heartSvg {
  transform: scale(var(--life-scale, 1));
  transform-origin: center center;
  transition: transform 1.4s cubic-bezier(0.34, 1.05, 0.64, 1);
  will-change: transform;
}

/* ── Per-band visual system (11 ranges) ──────────────────── */

/* Shared aura intensity driven by --band-intensity */
.heart-aura {
  opacity: calc(var(--band-intensity, 0.8) * 0.82);
  transition: opacity 1.2s ease;
}

/* ── band-d0  (0% — Dead Mode) ───────────────────────────── */
.band-d0 #heartSvg            { filter: grayscale(1) brightness(0.35); }
.band-d0 .heart-aura           { opacity: 0.04 !important; }
.band-d0 .heart-particles      { opacity: 0.02; }
.band-d0 .ambient              { opacity: 0.08; }
.band-d0 .seasonal-veil        { background: rgba(20,20,30,0.55); }

/* ── band-b1  (1–10% — Last Spark) ──────────────────────── */
.band-b1 #heartSvg             { filter: grayscale(0.85) brightness(0.42) saturate(0.3); }
.band-b1 .heart-aura           { opacity: 0.10 !important; }
.band-b1 .heart-particles      { opacity: 0.06; }
.band-b1 .ambient              { opacity: 0.12; filter: hue-rotate(200deg) brightness(0.5); }
.band-b1 .seasonal-veil        { background: rgba(10,15,35,0.45); }

/* ── band-b2  (11–20% — Near Silent) ────────────────────── */
.band-b2 #heartSvg             { filter: grayscale(0.65) brightness(0.52) saturate(0.45); }
.band-b2 .heart-aura           { opacity: 0.15 !important; }
.band-b2 .heart-particles      { opacity: 0.10; }
.band-b2 .ambient              { opacity: 0.18; filter: hue-rotate(160deg) brightness(0.6); }
.band-b2 .seasonal-veil        { background: rgba(12,18,40,0.38); }

/* ── band-b3  (21–30% — Fading Warmth) ──────────────────── */
.band-b3 #heartSvg             { filter: grayscale(0.44) brightness(0.62) saturate(0.55); }
.band-b3 .heart-aura           { opacity: 0.22 !important; }
.band-b3 .heart-particles      { opacity: 0.15; }
.band-b3 .ambient              { opacity: 0.25; filter: hue-rotate(100deg) brightness(0.65); }
.band-b3 .seasonal-veil        { background: rgba(14,10,28,0.28); }

/* ── band-b4  (31–40% — Quiet Distance) ─────────────────── */
.band-b4 #heartSvg             { filter: grayscale(0.26) brightness(0.72) saturate(0.65); }
.band-b4 .heart-aura           { opacity: 0.32 !important; }
.band-b4 .heart-particles      { opacity: 0.22; }
.band-b4 .ambient              { opacity: 0.32; filter: hue-rotate(40deg) brightness(0.7); }

/* ── band-b5  (41–50% — Fragile Rhythm) ─────────────────── */
.band-b5 #heartSvg             { filter: grayscale(0.10) brightness(0.80) saturate(0.75); }
.band-b5 .heart-aura           { opacity: 0.42 !important; }
.band-b5 .heart-particles      { opacity: 0.30; }
.band-b5 .ambient              { opacity: 0.40; filter: brightness(0.75); }

/* ── band-b6  (51–60% — Soft Pulse) ─────────────────────── */
.band-b6 #heartSvg             { filter: brightness(0.88) saturate(0.85); }
.band-b6 .heart-aura           { opacity: 0.54 !important; }
.band-b6 .heart-particles      { opacity: 0.40; }
.band-b6 .ambient              { opacity: 0.50; }

/* ── band-b7  (61–70% — Gentle Warmth) ──────────────────── */
.band-b7 #heartSvg             { filter: brightness(0.94) saturate(0.94); }
.band-b7 .heart-aura           { opacity: 0.64 !important; }
.band-b7 .heart-particles      { opacity: 0.52; }
.band-b7 .ambient              { opacity: 0.60; }

/* ── band-b8  (71–80% — Steady Bond) ────────────────────── */
.band-b8 #heartSvg             { filter: brightness(1.00) saturate(1.02); }
.band-b8 .heart-aura           { opacity: 0.74 !important; }
.band-b8 .heart-particles      { opacity: 0.64; }
.band-b8 .ambient              { opacity: 0.72; }

/* ── band-b9  (81–90% — Alive and Warm) ─────────────────── */
.band-b9 #heartSvg             { filter: brightness(1.06) saturate(1.12); }
.band-b9 .heart-aura           { opacity: 0.84 !important; }
.band-b9 .heart-particles      { opacity: 0.78; }
.band-b9 .ambient              { opacity: 0.82; }

/* ── band-b10 (91–100% — Flourishing · Flame) ───────────── */
@keyframes life-flame {
  0%, 100% {
    filter: brightness(1.10) saturate(1.22)
            drop-shadow(0 0  8px var(--colour))
            drop-shadow(0 0 18px var(--colour));
  }
  50% {
    filter: brightness(1.18) saturate(1.35)
            drop-shadow(0 0 14px var(--colour))
            drop-shadow(0 0 28px var(--colour));
  }
}

/* Low-power flame for mobile: transform-only, no filter compositing */
@keyframes life-flame-mobile {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.014); }
}

.band-b10 #heartSvg            { animation: life-flame 2.8s ease-in-out infinite; }
.band-b10 .heart-aura          { opacity: 0.96 !important; }
.band-b10 .heart-particles     { opacity: 1; }
.band-b10 .ambient             { opacity: 1; }

/* ── Glow colour temperature per band (background overlay) ── */
/* Cold band backgrounds */
.band-d0  .seasonal-veil { opacity: 0.55; }
.band-b1  .seasonal-veil { background: rgba(10,18,55,0.32); opacity: 0.7; }
.band-b2  .seasonal-veil { background: rgba(12,20,50,0.25); opacity: 0.6; }
.band-b3  .seasonal-veil { background: rgba(14,14,44,0.18); opacity: 0.5; }
.band-b4  .seasonal-veil { background: rgba(12,10,30,0.12); opacity: 0.4; }
.band-b5  .seasonal-veil { background: rgba(8, 8, 20,0.08); opacity: 0.28; }
/* Neutral → warm bands */
.band-b6  .seasonal-veil { opacity: 0.14; }
.band-b7  .seasonal-veil { opacity: 0.08; }
.band-b8  .seasonal-veil { opacity: 0.04; }
.band-b9  .seasonal-veil { opacity: 0; }
.band-b10 .seasonal-veil { opacity: 0; }

/* ── Partner name input label ────────────────────────────── */
.modal-name-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin: 0.9rem 0 0.3rem;
}
.modal-name-count {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.04em;
}
.modal-name-input {
  font-style: italic;
}

/* Theme swatches */
.theme-swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.theme-swatch:hover { transform: scale(1.12); }
.theme-swatch.is-selected { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.18); }

/* ── Dead mode romantic sentences ────────────────────────── */
.dead-sentences {
  position: absolute;
  bottom: 38%;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 2rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 2;
}
.dead-sentences.is-visible { opacity: 1; }
.dead-sentence-text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.52);
  text-align: center;
  font-style: italic;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dead-sentence-text.sentence-in { opacity: 1; }

/* ── History filter bar ──────────────────────────────────── */
.rv-filter-bar {
  padding: 1rem 1.2rem 0.6rem;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  margin: 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.rv-filter-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.rv-filter-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  min-width: 2.8rem;
}
.rv-filter-label--to { margin-left: 0.3rem; }
.rv-filter-select,
.rv-filter-date {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.82);
  font-size: 0.82rem;
  padding: 0.36rem 0.7rem;
  font-family: inherit;
  outline: none;
  flex: 1;
  min-width: 0;
}
.rv-filter-select option { background: #1a0a0e; }
.rv-filter-apply,
.rv-filter-clear {
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  color: rgba(255,255,255,0.65);
  font-size: 0.78rem;
  padding: 0.36rem 0.9rem;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.04em;
  transition: background 0.18s;
}
.rv-filter-apply:hover { background: rgba(255,255,255,0.09); }
.rv-filter-clear { border-color: rgba(255,255,255,0.09); color: rgba(255,255,255,0.36); }
.rv-filter-clear:hover { color: rgba(255,255,255,0.55); }
.rv-filter-active-note {
  font-size: 0.72rem;
  color: rgba(240,192,64,0.7);
  min-height: 1.1rem;
  letter-spacing: 0.03em;
}

/* ── History header row (close + PDF) ────────────────────── */
.rv-hero--history { padding-bottom: 0.6rem; }
.rv-hero__header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.rv-hero__header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* ── Story tab ──────────────────────────────────────────── */
.rv-story {
  padding: 0.2rem 0;
}
.rv-story-season {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240,192,64,0.6);
  margin-bottom: 1.1rem;
}
.rv-story-para {
  font-size: 0.92rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
  margin: 0 0 1rem;
  font-style: italic;
}
.rv-story-para:last-child { margin-bottom: 0; font-style: normal; color: rgba(255,255,255,0.44); font-size: 0.8rem; }
.rv-story-filter-note {
  font-size: 0.72rem;
  color: rgba(91,200,245,0.6);
  margin-bottom: 0.8rem;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════
   TIMER — Lock Drum Design
   ═══════════════════════════════════════════════════════════ */

/* ── Timer modal: centred (not bottom sheet) ──────────────── */
.timer-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.timer-modal-overlay .timer-modal-card {
  width: min(400px, 94vw);
  border-radius: 24px;
  background: rgba(14,14,20,0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 32px 80px rgba(0,0,0,0.72), 0 0 0 1px rgba(255,255,255,0.04);
  padding: 3.5rem 1.5rem 1.5rem;
  max-height: 90vh;
  overflow-y: auto;
}

/* ── Lock drum wrapper ───────────────────────────────────── */
.timer-wheel {
  gap: 0;
  margin: 1.4rem auto 0;
  position: relative;
}

/* Centred selection highlight box */
.timer-wheel.lock-picker::before {
  left: 2%;
  right: 2%;
  height: 56px;
  border-radius: 12px;
  background: rgba(255,255,255,0.038);
  border-top-color:    rgba(255,255,255,0.2);
  border-bottom-color: rgba(255,255,255,0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07),
              inset 0 -1px 0 rgba(0,0,0,0.3);
}

/* Column wrapper: transparent layout pass-through */
.drum-col-wrap {
  display: flex;
  flex: 1;
  justify-content: center;
}

/* ── Drum column ─────────────────────────────────────────── */
.timer-wheel .wheel-col,
.timer-wheel .drum-col {
  width: 90px;
  height: 280px;      /* 5 items × 52px + 20px rounding */
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.15) 14%,
    rgba(0,0,0,0.65) 30%,
    black            42%,
    black            58%,
    rgba(0,0,0,0.65) 70%,
    rgba(0,0,0,0.15) 86%,
    transparent      100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.15) 14%,
    rgba(0,0,0,0.65) 30%,
    black            42%,
    black            58%,
    rgba(0,0,0,0.65) 70%,
    rgba(0,0,0,0.15) 86%,
    transparent      100%
  );
}
.timer-wheel .wheel-col::-webkit-scrollbar,
.timer-wheel .drum-col::-webkit-scrollbar { display: none; }

/* Pad: centres first / last item in the drum window */
.timer-wheel .wheel-pad {
  height: 114px;   /* (280 / 2) − (52 / 2) = 140 − 26 = 114px */
  flex-shrink: 0;
  pointer-events: none;
}

/* ── Drum items ──────────────────────────────────────────── */
.timer-wheel .wheel-item {
  height: 52px;
  line-height: 52px;
  font-size: 1.8rem;
  font-weight: 300;
  color: rgba(255,255,255,0.18);
  letter-spacing: 0.1em;
  scroll-snap-align: center;
  transition: color 0.14s ease, font-size 0.14s ease,
              font-weight 0.14s ease, text-shadow 0.14s ease;
  border: none;
  background: transparent;
  text-align: center;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* Selected / centred item — bright, bold, glowing */
.timer-wheel .wheel-item.is-selected {
  color: rgba(255,255,255,0.98);
  font-size: 2.4rem;
  font-weight: 600;
  text-shadow: 0 0 18px rgba(255,255,255,0.22),
               0 0 36px var(--colour, rgba(232,54,74,0.35));
}

/* ── Drum separator ( : ) ────────────────────────────────── */
.drum-sep {
  font-size: 1.7rem;
  font-weight: 200;
  color: rgba(255,255,255,0.32);
  line-height: 280px;
  padding: 0 4px;
  flex-shrink: 0;
}

/* ── Drum labels (hours / minutes / seconds) ─────────────── */
.drum-labels {
  display: grid;
  grid-template-columns: 90px 24px 90px 24px 90px;
  justify-content: center;
  text-align: center;
  color: rgba(255,255,255,0.25);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}
.drum-labels span:nth-child(2),
.drum-labels span:nth-child(4) { /* separators */
  opacity: 0;
}

/* ── Countdown picker overrides ──────────────────────────── */
.countdown-picker .countdown-unit-drum {
  width: 130px;
}
/* Reduce letter-spacing on unit column so "hours" / "days" don't clip */
.countdown-picker .countdown-unit-drum .wheel-item {
  letter-spacing: 0.02em;
  font-size: 1.5rem;
}
.countdown-picker .countdown-unit-drum .wheel-item.is-selected {
  font-size: 1.9rem;
  letter-spacing: 0.02em;
}
.countdown-labels {
  display: grid;
  grid-template-columns: 90px 130px;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  color: rgba(255,255,255,0.25);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* ── Reset request / confirm card extras ─────────────────── */
.reset-timer-preview {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 0 24px var(--colour, rgba(232,54,74,0.4));
  margin: 1rem 0 0.6rem;
  font-variant-numeric: tabular-nums;
}
.reset-card__heart-icon {
  font-size: 1.8rem;
  color: var(--colour, #e8364a);
  margin-bottom: 0.3rem;
}
.reset-agree-btn {
  background: linear-gradient(135deg, var(--colour, #e8364a), rgba(232,54,74,0.7));
  border-color: transparent;
  letter-spacing: 0.05em;
}
.reset-card__sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.42);
  margin-top: 0.3rem;
  margin-bottom: 0;
  font-style: italic;
}

/* ── Share Memory Attachment ──────────────────────────────── */

.share-attachment {
  width: 100%;
  margin: 0.9rem 0 0.6rem;
  display: flex; flex-direction: column; gap: 0.55rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* Photo upload */
.share-attach-photo-row {
  display: flex; align-items: center; gap: 0.5rem;
}

.share-file-input {
  display: none;
}

.share-photo-label {
  display: flex; align-items: center; gap: 0.4rem;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 0.42rem 0.75rem;
  cursor: pointer; flex: 1;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.52);
  transition: background 0.15s, border-color 0.15s;
  letter-spacing: 0.03em;
}
.share-photo-label:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.3); }

.share-photo-icon { font-size: 1rem; opacity: 0.6; }

.share-photo-clear {
  background: none; border: none;
  color: rgba(255,255,255,0.3); font-size: 1.2rem;
  cursor: pointer; padding: 0 0.2rem; line-height: 1;
  transition: color 0.14s;
  flex-shrink: 0;
}
.share-photo-clear:hover { color: rgba(255,100,100,0.7); }
.share-photo-clear.is-hidden { display: none; }

.share-photo-thumb {
  width: 100%; max-height: 180px;
  object-fit: cover; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
}
.share-photo-thumb.is-hidden { display: none; }

/* Location */
.share-attach-location-row {
  display: flex; align-items: center; gap: 0.4rem;
}

.share-location-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.82);
  font-size: 0.8rem;
  padding: 0.4rem 0.65rem;
  outline: none; letter-spacing: 0.02em;
  transition: border-color 0.14s;
}
.share-location-input::placeholder { color: rgba(255,255,255,0.28); }
.share-location-input:focus { border-color: rgba(255,255,255,0.22); }

.share-gps-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.5); font-size: 1.05rem;
  width: 36px; height: 36px; flex-shrink: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.14s, color 0.14s;
}
.share-gps-btn:hover  { background: rgba(255,255,255,0.11); color: rgba(255,255,255,0.8); }
.share-gps-btn:disabled { opacity: 0.4; cursor: default; }

/* Note */
.share-note-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.82);
  font-size: 0.8rem;
  padding: 0.4rem 0.65rem;
  outline: none;
  transition: border-color 0.14s;
  box-sizing: border-box;
}
.share-note-input::placeholder { color: rgba(255,255,255,0.28); }
.share-note-input:focus { border-color: rgba(255,255,255,0.22); }

.share-attach-hint {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.25);
  font-style: italic;
  margin: 0;
  line-height: 1.3;
}
.share-attach-hint--right { text-align: right; margin-top: -0.3rem; }

/* Received attachment display */
.received-photo-thumb {
  width: 100%; max-height: 160px;
  object-fit: cover; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  margin-top: 0.5rem;
}
.received-photo-thumb.is-hidden { display: none; }

.photo-glance-wrap { margin-top: 0.5rem; }
.photo-glance-wrap.is-hidden { display: none; }

.photo-glance-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 1.5rem;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.65);
  font-size: 0.77rem; letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.photo-glance-btn:hover { background: rgba(255,255,255,0.09); }
.photo-glance-btn.is-viewing {
  border-color: rgba(255,182,193,0.45);
  color: rgba(255,182,193,0.9);
  background: rgba(255,182,193,0.08);
}

.received-meta {
  margin-top: 0.4rem;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.received-meta.is-hidden { display: none; }

.received-location {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.48);
  letter-spacing: 0.04em;
}
.received-location.is-hidden { display: none; }

.received-note {
  font-size: 0.75rem;
  font-style: italic;
  color: rgba(255,255,255,0.58);
  line-height: 1.45;
}
.received-note.is-hidden { display: none; }

/* ── Background Designs ───────────────────────────────────── */

body.bg-rose      { --bg-base: #120508; background: radial-gradient(ellipse at 40% 30%, #200a14 0%, #120508 65%); }
body.bg-midnight  { --bg-base: #050814; background: radial-gradient(ellipse at 30% 20%, #0a1230 0%, #050814 70%); }
body.bg-forest    { --bg-base: #040b05; background: radial-gradient(ellipse at 60% 80%, #0a1e0c 0%, #040b05 68%); }
body.bg-universe  { --bg-base: #080412; background: radial-gradient(ellipse at 50% 40%, #1a0836 0%, #0d0520 38%, #080412 80%); }
body.bg-bluesky   { --bg-base: #061228; background: radial-gradient(ellipse at 50% 10%, #1a3a80 0%, #0f2460 32%, #081430 68%), radial-gradient(ellipse at 22% 55%, rgba(255,255,255,0.04) 0%, transparent 38%), radial-gradient(ellipse at 76% 38%, rgba(255,255,255,0.035) 0%, transparent 32%); }
body.bg-nightsky  { --bg-base: #010308; background: radial-gradient(ellipse at 35% 20%, #0c1828 0%, #060c14 42%, #010308 80%); }

/* Background Design picker */
.bg-design-card { max-width: 360px; }
.bg-design-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin-top: 1.2rem;
}
.bg-swatch {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.08);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.18s, transform 0.14s;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 4px;
}
.bg-swatch:hover  { border-color: rgba(255,255,255,0.28); transform: scale(1.06); }
.bg-swatch.is-selected { border-color: var(--colour, #e8364a); box-shadow: 0 0 0 2px var(--colour, #e8364a); }
.bg-swatch__label {
  font-size: 0.44rem;
  color: rgba(255,255,255,0.6);
  text-align: center;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  line-height: 1.2;
  padding: 0 2px;
}

/* ── Shared Sleep Visuals ─────────────────────────────────── */

body.shared-sleep-active .heart-stage { filter: brightness(0.82) saturate(0.7); }
body.shared-sleep-active .topbar__countdown { opacity: 0.55; }
body.shared-sleep-active .ambient { filter: brightness(0.7); }
body.shared-sleep-active { --bg-sleep-overlay: rgba(30,40,80,0.22); }
body.shared-sleep-active::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 20%, rgba(120,140,220,0.08), transparent 70%);
}

.sleep-indicator {
  position: fixed;
  bottom: 5.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.5rem;
  background: rgba(30,40,80,0.82);
  border: 1px solid rgba(120,140,220,0.22);
  border-radius: 20px;
  padding: 0.35rem 0.9rem;
  font-size: 0.72rem;
  color: rgba(180,200,255,0.72);
  letter-spacing: 0.08em;
  opacity: 0; pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 10;
}
.sleep-indicator.is-visible { opacity: 1; }
.sleep-indicator__moon { font-size: 0.9rem; opacity: 0.7; }

/* ── To Do List ───────────────────────────────────────────── */

.todo-modal-card { max-width: 420px; max-height: 88vh; display: flex; flex-direction: column; }

.todo-tabs {
  display: flex; gap: 0.5rem;
  margin: 0.8rem 0 0.3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0.5rem;
}
.todo-tab {
  background: none; border: none; color: rgba(255,255,255,0.42);
  font-size: 0.78rem; letter-spacing: 0.06em; cursor: pointer;
  padding: 0.3rem 0.6rem; border-radius: 6px;
  transition: color 0.16s, background 0.16s;
}
.todo-tab.is-active { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.07); }
.todo-privacy-note {
  font-size: 0.7rem; color: rgba(255,255,255,0.3);
  font-style: italic; margin: 0 0 0.5rem; text-align: center;
}

.todo-panel {
  flex: 1; overflow-y: auto;
  padding: 0.4rem 0;
  max-height: 340px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.todo-panel.is-hidden { display: none; }

.todo-empty {
  color: rgba(255,255,255,0.28); font-size: 0.8rem;
  font-style: italic; text-align: center; padding: 1.5rem 0;
}

.todo-task {
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.todo-task.is-done .todo-task__text { opacity: 0.38; text-decoration: line-through; }
.todo-task__row {
  display: flex; align-items: center; gap: 0.5rem;
}
.todo-task__text {
  flex: 1; font-size: 0.85rem; color: rgba(255,255,255,0.82);
  word-break: break-word;
}
.todo-check {
  background: none; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%;
  color: rgba(255,255,255,0.5); font-size: 0.62rem;
  width: 22px; height: 22px; flex-shrink: 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.14s, color 0.14s;
}
.todo-check:hover { border-color: var(--colour, #e8364a); color: var(--colour, #e8364a); }
.todo-delete {
  background: none; border: none;
  color: rgba(255,255,255,0.25); font-size: 1.1rem;
  cursor: pointer; padding: 0 0.2rem; line-height: 1;
  transition: color 0.14s;
}
.todo-delete:hover { color: rgba(255,100,100,0.7); }

.todo-subtasks { padding-left: 1.8rem; margin-top: 0.3rem; }
.todo-subtask {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.18rem 0;
}
.todo-subtask.is-done .todo-subtask__text { opacity: 0.35; text-decoration: line-through; }
.todo-subtask__text { flex: 1; font-size: 0.78rem; color: rgba(255,255,255,0.62); }
.todo-check--sub { width: 17px; height: 17px; font-size: 0.52rem; }
.todo-delete--sub { font-size: 0.9rem; }

.todo-add-sub-row {
  display: flex; gap: 0.3rem; margin: 0.3rem 0;
}
.todo-sub-input {
  flex: 1; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
  color: rgba(255,255,255,0.8); font-size: 0.72rem;
  padding: 0.3rem 0.5rem; outline: none;
}
.todo-sub-input::placeholder { color: rgba(255,255,255,0.22); }
.todo-sub-input:focus { border-color: rgba(255,255,255,0.2); }
.todo-add-sub-btn {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px; color: rgba(255,255,255,0.55); font-size: 0.9rem;
  padding: 0.2rem 0.5rem; cursor: pointer; transition: background 0.14s;
}
.todo-add-sub-btn:hover { background: rgba(255,255,255,0.13); }

.todo-add-row {
  display: flex; gap: 0.5rem; margin-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.07); padding-top: 0.7rem;
}
.todo-add-input {
  flex: 1; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  color: rgba(255,255,255,0.85); font-size: 0.82rem;
  padding: 0.45rem 0.7rem; outline: none;
}
.todo-add-input::placeholder { color: rgba(255,255,255,0.25); }
.todo-add-input:focus { border-color: rgba(255,255,255,0.22); }
.todo-add-btn { flex-shrink: 0; font-size: 0.8rem; padding: 0.45rem 0.9rem; }

/* ── About ZOTELE screen ──────────────────────────────────── */

.about-screen .gl-about-tagline {
  text-align: center;
  margin: 2.5rem 0 1rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.gl-about-tagline__name {
  font-size: 1.8rem; font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.88);
}
.gl-about-tagline__phrase {
  font-size: 0.82rem; font-style: italic;
  color: rgba(255,255,255,0.4); letter-spacing: 0.06em;
}

/* ── Shared Sleep — stars & warm glow ───────────────────── */

.sleep-stars {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 2;
  overflow: hidden;
}

.sleep-star {
  position: absolute;
  left: var(--x);
  top:  var(--y);
  width:  var(--s);
  height: var(--s);
  border-radius: 50%;
  background: rgba(210, 225, 255, 0.72);
  box-shadow: 0 0 calc(var(--s) * 2) rgba(180, 200, 255, 0.4);
  animation: star-pulse var(--dur) var(--d) ease-in-out infinite alternate;
}

@keyframes star-pulse {
  0%   { opacity: 0.12; transform: scale(0.8); }
  50%  { opacity: 0.72; transform: scale(1.2); }
  100% { opacity: 0.18; transform: scale(0.9); }
}

body.shared-sleep-active::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 0%, rgba(90,110,180,0.08) 0%, transparent 65%),
              radial-gradient(ellipse at 20% 80%, rgba(120,100,180,0.05) 0%, transparent 55%);
}

/* ── Shared Sleep — object pulse slows ───────────────────── */

body.shared-sleep-active .heart-btn.is-beating {
  animation-duration: 4.5s !important;
}
body.shared-sleep-active .heart-btn.is-beating-weak {
  animation-duration: 6s !important;
}
body.shared-sleep-active .heart-aura {
  animation-duration: 7s !important;
  opacity: 0.4;
}

/* Timer paused indicator */
.topbar__countdown.timer--sleeping {
  opacity: 0.48;
  letter-spacing: 0.12em;
  color: rgba(140,160,220,0.72) !important;
}

/* ── Partner Sleeping Modal ───────────────────────────────── */
.partner-sleep-card { max-width: 300px; text-align: center; }
.partner-sleep-card .modal-icon { font-size: 2.2rem; color: rgba(140,160,220,0.7); }
.partner-sleep-card .btn { margin-top: 0.8rem; width: 100%; }

/* ── Todo Inline Edit ─────────────────────────────────────── */
.todo-edit-btn {
  background: none; border: none;
  color: rgba(255,255,255,0.2); font-size: 0.85rem;
  cursor: pointer; padding: 0 0.18rem; transition: color 0.14s;
  line-height: 1;
}
.todo-edit-btn:hover { color: rgba(255,255,255,0.5); }

.todo-edit-row {
  display: flex; gap: 0.3rem;
  margin: 0.25rem 0 0.25rem 1.8rem;
  align-items: center;
}
.todo-edit-input {
  flex: 1; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
  color: rgba(255,255,255,0.85); font-size: 0.82rem;
  padding: 0.3rem 0.5rem; outline: none;
}
.todo-edit-input:focus { border-color: var(--colour, rgba(232,54,74,0.5)); }
.todo-edit-save {
  background: var(--colour, #e8364a); border: none; border-radius: 6px;
  color: #fff; font-size: 0.72rem; padding: 0.3rem 0.55rem;
  cursor: pointer; opacity: 0.85; transition: opacity 0.14s;
}
.todo-edit-save:hover { opacity: 1; }
.todo-edit-cancel {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; color: rgba(255,255,255,0.45); font-size: 0.72rem;
  padding: 0.3rem 0.55rem; cursor: pointer;
}

/* ── Diary Screen ─────────────────────────────────────────── */

.diary-screen .diary-inner { max-width: 520px; margin: 0 auto; }

.diary-intro {
  font-size: 0.82rem; font-style: italic;
  color: rgba(255,255,255,0.38); text-align: center;
  margin: 0 0 1.8rem; line-height: 1.6;
}

.diary-entries {
  display: flex; flex-direction: column; gap: 1.8rem;
  padding-bottom: 3rem;
}

.diary-empty {
  color: rgba(255,255,255,0.3); font-size: 0.82rem;
  font-style: italic; text-align: center; padding: 2rem 0;
}

.diary-loading {
  color: rgba(255,255,255,0.25); font-size: 0.78rem;
  font-style: italic; text-align: center; padding: 2rem 0;
  letter-spacing: 0.06em;
}

.diary-entry {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.8rem;
  row-gap: 0.3rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.diary-entry:last-child { border-bottom: none; }

.diary-entry__date {
  grid-column: 2; grid-row: 1;
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.32);
}

.diary-entry__icon {
  grid-column: 1; grid-row: 1 / 3;
  font-size: 1rem; color: rgba(255,255,255,0.22);
  display: flex; align-items: flex-start; padding-top: 2px;
  line-height: 1;
}

.diary-entry__text {
  grid-column: 2; grid-row: 2;
  font-size: 0.9rem; font-style: italic;
  color: rgba(255,255,255,0.72);
  line-height: 1.7; margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
}

/* ── Checking 4-button layout ────────────────────────────── */

.checking-actions--four {
  display: flex; flex-direction: column; gap: 0.6rem;
  align-items: stretch; width: 100%; max-width: 280px; margin: 0 auto;
}

.checking-notok-btn {
  border-color: rgba(255,107,107,0.45);
  color: rgba(255,160,160,0.9);
}
.checking-notok-btn:hover { border-color: rgba(255,107,107,0.7); }

.checking-later-btn {
  font-size: 0.82rem;
}

.checking-ignore-link {
  background: none; border: none;
  color: rgba(255,255,255,0.25); font-size: 0.72rem;
  cursor: pointer; padding: 0.2rem; letter-spacing: 0.06em;
  text-decoration: underline; text-underline-offset: 3px;
  text-align: center; transition: color 0.14s;
}
.checking-ignore-link:hover { color: rgba(255,255,255,0.45); }


/* ── Object Health Evolution ──────────────────────────────── */
/* Each life object group (heart / flower / tree) has distinct
   visual deterioration at low life percentages. The data-life-obj
   attribute is set on body by applyLifeObject(). */

/* ── HEART: cracks, dims, slows ────────────────────────────── */
[data-life-obj="heart"].band-b1 .heart-fractures { opacity: 0.92; stroke: rgba(255,255,255,0.35); }
[data-life-obj="heart"].band-b2 .heart-fractures { opacity: 0.68; }
[data-life-obj="heart"].band-b3 .heart-fractures { opacity: 0.42; }
[data-life-obj="heart"].band-b4 .heart-fractures { opacity: 0.22; }
[data-life-obj="heart"].band-b5 .heart-fractures { opacity: 0.1; }
[data-life-obj="heart"].band-b6 .heart-fractures,
[data-life-obj="heart"].band-b7 .heart-fractures,
[data-life-obj="heart"].band-b8 .heart-fractures,
[data-life-obj="heart"].band-b9 .heart-fractures,
[data-life-obj="heart"].band-b10 .heart-fractures { opacity: 0; }

[data-life-obj="heart"].band-d0 .heart-bg { filter: saturate(0) brightness(0.28); }
[data-life-obj="heart"].band-b1 .heart-bg { filter: saturate(0.15) brightness(0.4); }
[data-life-obj="heart"].band-b2 .heart-bg { filter: saturate(0.32) brightness(0.55); }
[data-life-obj="heart"].band-b3 .heart-bg { filter: saturate(0.58) brightness(0.72); }
[data-life-obj="heart"].band-b4 .heart-bg { filter: saturate(0.75); }

/* ECG flatline at very low life */
[data-life-obj="heart"].band-d0 .heart-ecg-line,
[data-life-obj="heart"].band-b1 .heart-ecg-line { opacity: 0.15; }

/* ── Universal recovery glow ───────────────────────────────── */
[data-life-obj="heart"].band-b8 .heart-bg,
[data-life-obj="heart"].band-b9 .heart-bg,
[data-life-obj="heart"].band-b10 .heart-bg { filter: brightness(1.08); }

/* Weak breathing pulse at very low life (all objects) */
body.band-b1 .heart-btn,
body.band-b2 .heart-btn {
  animation-duration: 5s !important;
}
body.band-d0 .heart-btn {
  animation: none !important;
  opacity: 0.55;
}

/* ── Emotional Seasons ────────────────────────────────────── */
/* The season label — appears above bond age, bottom-right */
.season-label {
  position: fixed;
  bottom: 5.8rem;
  right: 1rem;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--season-accent, rgba(255,255,255,0.28));
  opacity: 0.7;
  pointer-events: none;
  text-align: right;
  font-style: italic;
  transition: color 2s ease, opacity 1s ease;
  z-index: 5;
}

/* Season ambient overlays — subtle shifts to the room atmosphere */
body.es-still-winter    .ambient { filter: blur(4px) saturate(0.4) brightness(0.6); }
body.es-healing-rain    .ambient { filter: blur(4px) brightness(0.75) hue-rotate(200deg); }
body.es-recovery-spring .ambient { filter: blur(4px) brightness(0.8) hue-rotate(80deg); }
body.es-golden-season   .ambient { filter: blur(4px) brightness(1.18) sepia(0.15); }
body.es-midnight-rhythm .ambient { filter: blur(4px) brightness(0.55) hue-rotate(230deg); }
body.es-sleeping-season .ambient { filter: blur(4px) brightness(0.7) hue-rotate(220deg); }
body.es-warm-return     .ambient { filter: blur(4px) brightness(1.08) sepia(0.08); }
body.es-first-warmth    .ambient { filter: blur(4px) brightness(0.95); }

/* Season accent glow on the heart stage */
body.es-golden-season .heart-aura   { opacity: 0.65; filter: hue-rotate(-10deg); }
body.es-healing-rain  .heart-aura   { opacity: 0.45; filter: hue-rotate(180deg); }
body.es-still-winter  .heart-aura   { opacity: 0.2;  filter: saturate(0.2); }
body.es-midnight-rhythm .heart-aura { opacity: 0.5;  filter: hue-rotate(220deg); }

/* ── Room Age Atmosphere ──────────────────────────────────── */
/* The room subtly deepens as the relationship ages */

/* New room: slightly brighter, sharper */
body.room-age-new      { --age-warmth: 0; }

/* Forming (1-4 weeks): gentle settling */
body.room-age-forming  { --age-warmth: 0.15; }
body.room-age-forming .ambient { opacity: 0.92; }

/* Established (1-3 months): warm, familiar feel */
body.room-age-established { --age-warmth: 0.35; }
body.room-age-established .seasonal-veil {
  background-color: rgba(220, 160, 80, 0.018);
}

/* Deep (3-12 months): rich emotional depth */
body.room-age-deep { --age-warmth: 0.58; }
body.room-age-deep .seasonal-veil {
  background-color: rgba(200, 140, 60, 0.028);
}
body.room-age-deep .ambient {
  filter: blur(4px) brightness(1.06) sepia(0.04);
}

/* Ancient (1+ years): golden, irreplaceable weight */
body.room-age-ancient { --age-warmth: 1; }
body.room-age-ancient .seasonal-veil {
  background: radial-gradient(ellipse at 50% 30%, rgba(240,192,64,0.055), transparent 65%),
              rgba(200,150,50,0.025);
}
body.room-age-ancient .ambient {
  filter: blur(4px) brightness(1.1) sepia(0.06);
}
body.room-age-ancient .heart-stage {
  filter: drop-shadow(0 0 18px rgba(240,192,64,0.12));
}

/* ── Emotional Scar System ───────────────────────────────── */
/* Dead modes leave faint scars. Recoveries leave gold marks.
   The object physically remembers the relationship's history. */

/* Heart fractures deepen with scar history */
.heart-fractures {
  opacity: calc(var(--fracture-vis, 0.22) * 0.6 + var(--scar-depth, 0) * 0.4);
  stroke-width: calc(0.6 + var(--scar-depth, 0) * 0.8);
}

/* Gold repair lines appear with recovery history */
.heart-memory__gold {
  opacity: calc(0.1 + var(--heal-light, 0) * 0.5);
  stroke: rgba(240,192,64, calc(0.3 + var(--heal-light,0) * 0.4));
  stroke-width: calc(0.5 + var(--heal-light,0) * 0.8);
}

/* Deep scar history: faint grey shimmer on the life object */
body[style*="--scar-depth: 0.7"] .heart-bg,
body[style*="--scar-depth: 0.8"] .heart-bg,
body[style*="--scar-depth: 0.9"] .heart-bg,
body[style*="--scar-depth: 1.0"] .heart-bg {
  filter: brightness(0.94) contrast(1.03);
}

/* Gold repair on room-age-deep/ancient: gold memory grain becomes visible */
body.room-age-deep .heart-memory__grain,
body.room-age-ancient .heart-memory__grain {
  opacity: calc(0.15 + var(--heal-light,0) * 0.25);
  stroke: rgba(240,192,64, 0.25);
}
body.room-age-ancient .heart-memory__gold {
  opacity: calc(0.22 + var(--heal-light,0) * 0.38);
}

/* ── Relationship Milestones (Our History) ────────────────── */
.rv-legacy {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.2rem 0;
}
.rv-legacy-item {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.rv-legacy-item:last-child { border-bottom: none; }
.rv-legacy-icon {
  font-size: 0.9rem; color: var(--colour, #e8364a);
  opacity: 0.72; flex-shrink: 0; width: 1rem;
}
.rv-legacy-label {
  flex: 1; font-size: 0.82rem; color: rgba(255,255,255,0.7);
  font-style: italic;
}
.rv-legacy-date {
  font-size: 0.68rem; color: rgba(255,255,255,0.32);
  letter-spacing: 0.04em; flex-shrink: 0;
}

/* ── Diary week separators ────────────────────────────────── */
.diary-week-separator {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  font-style: italic;
  text-align: center;
  padding: 1rem 0 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 0.5rem;
}
.diary-week-separator:first-child {
  border-top: none; padding-top: 0;
}

/* ── Absence Awareness ────────────────────────────────────── */
/* The room reflects how long since either heart was present.
   Not punishment — just honest atmospheric reflection.
   Silence is presence. But long absence changes the quality of air. */

/* Fresh (< 3h): room is warm, recently held */
body.absence-fresh .ambient { opacity: 1; }

/* Gentle (3-24h): room cools very slightly */
body.absence-gentle .ambient {
  filter: blur(4px) brightness(0.94) saturate(0.92);
  transition: filter 4s ease;
}

/* Long (24-72h): room noticeably quieter, waiting */
body.absence-long .ambient {
  filter: blur(4px) brightness(0.82) saturate(0.72);
  transition: filter 6s ease;
}
body.absence-long .seasonal-veil {
  background-color: rgba(80,90,120,0.025);
}
body.absence-long .heart-stage {
  filter: drop-shadow(0 0 12px rgba(100,120,180,0.1));
}

/* Deep (72h+): room in soft waiting state */
body.absence-deep .ambient {
  filter: blur(4px) brightness(0.68) saturate(0.55);
  transition: filter 8s ease;
}
body.absence-deep .seasonal-veil {
  background: radial-gradient(ellipse at 50% 60%, rgba(60,70,110,0.04), transparent 65%);
}
body.absence-deep .heart-stage {
  filter: drop-shadow(0 0 8px rgba(60,80,140,0.08));
}
body.absence-deep .heart-btn.is-beating {
  animation-duration: 5.5s !important;
}

/* When returning from long absence — fresh class temporarily gives warmth boost */
body.absence-fresh.room-age-deep .ambient,
body.absence-fresh.room-age-ancient .ambient {
  filter: blur(4px) brightness(1.06) sepia(0.04);
  transition: filter 3s ease;
}

/* ── Page hidden — pause ALL decorative animations ────────── */
body.page-hidden .heart-aura,
body.page-hidden .heart-aura::before,
body.page-hidden .heart-aura::after,
body.page-hidden .heart-particles,
body.page-hidden #heartSvg,
body.page-hidden .heart-btn,
body.page-hidden .heart-ecg path,
body.page-hidden .heart-ecg-line,
body.page-hidden .waiting__heart,
body.page-hidden .sleep-star {
  animation-play-state: paused !important;
}

/* ── Calm Mode ───────────────────────────────────────────── */
/* Reduces GPU load while preserving emotional presence.     */

/* Aura: !important wins band-b10's opacity; 32s wins mobile's forced 16s */
body.calm-mode .heart-aura {
  opacity: 0.22 !important;
  animation-duration: 32s !important;
}
/* Rings (::before / ::after): barely drifting, nearly invisible */
body.calm-mode .heart-aura::before,
body.calm-mode .heart-aura::after {
  animation-duration: 48s !important;
  opacity: 0.12 !important;
}
/* Particles: always hidden */
body.calm-mode .heart-particles { display: none !important; }

/* Heart SVG glow: single soft shadow — !important wins mobile rule */
body.calm-mode .heart-svg {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--temp-core), transparent 48%)) !important;
}
/* band-b10 flame animation: stop entirely */
body.calm-mode.band-b10 #heartSvg { animation: none !important; }

/* Heartbeat: slower, calmer pulse (was never touched before) */
body.calm-mode .heart-btn.is-beating      { animation-duration: 2.4s !important; }
body.calm-mode .heart-btn.is-beating-weak { animation-duration: 4.2s !important; }

/* ECG: remove outer glow, dim wrapper, much slower flow
   — fixes previously broken target (.heart-ecg path was never targeted)
   — 14s !important wins mobile's 7s !important */
body.calm-mode .heart-ecg              { opacity: 0.2; filter: none !important; }
body.calm-mode .heart-ecg path,
body.calm-mode .heart-ecg-line         { opacity: 0.18 !important; animation-duration: 14s !important; }

/* Ambient background: remove all atmospheric filters */
body.calm-mode .ambient                { filter: none !important; }

/* Sleep stars: still and dim */
body.calm-mode .sleep-star             { opacity: 0.3; animation-play-state: paused; }

/* Body-level warmth filters: remove in calm mode */
body.calm-mode.warmth-cold,
body.calm-mode.warmth-cool,
body.calm-mode.warmth-warm,
body.calm-mode.warmth-deep             { filter: none !important; }

/* ── Shared Sleep — low-power rest mode ─────────────────── */
body.shared-sleep-active .sleep-star {
  animation-duration: 18s !important;
}
body.shared-sleep-active .heart-particles {
  animation-duration: 28s !important;
  opacity: 0.18;
}

/* ── Mobile-first low-power rendering (≤768px) ─────────── */
/* ZOTELE must feel emotionally alive while technically       */
/* remaining mostly at rest. On mobile, heat > aesthetics.   */
@media (max-width: 768px) {
  /* Body-level filter for warmth states is a full-page       */
  /* compositor. On mobile, skip it — use --page-bg instead.  */
  body.warmth-cold,
  body.warmth-cool,
  body.warmth-warm,
  body.warmth-deep { filter: none !important; }

  /* Dead mode grayscale is semantic — keep it but soften */
  body.dead { filter: grayscale(0.85) brightness(0.78); }

  /* Two small shadows — warm glow stays alive at lower GPU cost */
  .heart-svg {
    filter:
      drop-shadow(0 0 8px color-mix(in srgb, var(--temp-core), white 18%))
      drop-shadow(0 0 18px var(--temp-aura));
  }
  body.dead .heart-svg { filter: drop-shadow(0 0 8px rgba(100,100,100,0.15)); }

  /* Aura: simpler background (removes repeating-radial-gradient),   */
  /* smaller extent, slower cycle — glow stays warm, GPU stays cool  */
  .heart-aura {
    background: radial-gradient(circle at 50% 50%, var(--temp-aura), transparent 44%) !important;
    inset: -10% !important;
    animation-duration: 16s !important;
  }
  .heart-aura::before { animation-duration: 22s !important; }
  .heart-aura::after  { animation-duration: 16s !important; }

  /* Particles removed entirely on mobile — continuous background-   */
  /* image rotation creates paint work on every frame                */
  .heart-particles  { display: none !important; }

  /* ECG slowed — stroke-dashoffset is compositor-safe, fewer cycles */
  .heart-ecg path,
  .heart-ecg-line   { animation-duration: 7s  !important; }

  /* life-flame at band-b10: replace filter animation with cheap     */
  /* transform-only scale. Static drop-shadows keep the glow feel.  */
  .band-b10 #heartSvg { animation: life-flame-mobile 14s ease-in-out infinite !important; }

  /* Remove ambient blur — full-screen fixed blur forces a           */
  /* compositor layer across the entire viewport.                    */
  /* Colour tinting (brightness, saturate, hue-rotate) is kept.     */
  .ambient { filter: none !important; }

  /* State/season ambient overrides: keep colour, drop blur */
  body.es-still-winter    .ambient { filter: saturate(0.4) brightness(0.6) !important; }
  body.es-healing-rain    .ambient { filter: brightness(0.75) hue-rotate(200deg) !important; }
  body.es-recovery-spring .ambient { filter: brightness(0.8) hue-rotate(80deg) !important; }
  body.es-midnight-rhythm .ambient { filter: brightness(0.55) hue-rotate(230deg) !important; }
  body.es-sleeping-season .ambient { filter: brightness(0.7) hue-rotate(220deg) !important; }
  body.pt-active .ambient { filter: none !important; }

  /* Presence widgets: no backdrop-filter on mobile */
  .presence-widget { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ── Share remove photo button ────────────────────────────── */
.share-remove-photo-btn {
  background: none; border: none;
  color: rgba(255,100,100,0.55); font-size: 0.68rem;
  cursor: pointer; padding: 0; letter-spacing: 0.04em;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color 0.14s;
}
.share-remove-photo-btn:hover { color: rgba(255,100,100,0.85); }

/* ── Homepage simplification — hide rules ──────────────────── */
.topbar__timer-wrap { display: none !important; }
#presenceA          { display: none !important; }
#presenceB          { display: none !important; }
#seasonLabel        { display: none !important; }

/* ── Menu sections — 4-block grouped layout ─────────────────── */
.menu-nav { overflow-y: auto; gap: 0; }

.menu-section--open {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.menu-section--open .menu-section__label {
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.22);
  padding: 0 0.7rem 0.45rem;
  display: block;
}
details.menu-section {
  border-top: 0.5px solid rgba(255,255,255,0.07);
  padding-top: 0.15rem;
  margin-top: 0.15rem;
}
.menu-section__header {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.7rem;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  border-radius: 8px;
  transition: color 0.18s;
  user-select: none;
  width: 100%;
  background: none;
  border: none;
}
.menu-section__header::-webkit-details-marker,
.menu-section__header::marker { display: none; }
.menu-section__header::after {
  content: '+';
  font-size: 0.7rem;
  opacity: 0.38;
  font-style: normal;
  flex-shrink: 0;
}
details[open] > .menu-section__header::after { content: '−'; }
.menu-section__header:hover { color: rgba(255,255,255,0.52); }
.menu-section__body {
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
  padding-bottom: 0.3rem;
}
.menu-section__download {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 0.5px solid rgba(255,255,255,0.07);
}

/* ══════════════════════════════════════════════════════════════
   COFFEE COLOUR SYSTEM — warm secondary text (#8B6A4A)
   Replaces all low-contrast grey text. Applied last for cascade.
   Primary/selected text (white) is NOT touched here.
   ══════════════════════════════════════════════════════════════ */

/* Entry / onboarding */
.entry__sub                          { color: rgba(var(--c-coffee), 0.85); }
.entry__divider                      { color: rgba(var(--c-coffee), 0.65); }
.entry__input::placeholder           { color: rgba(var(--c-coffee), 0.55); }
.entry__recover-link                 { color: rgba(var(--c-coffee), 0.6); }
.entry__recover-link:hover           { color: rgba(var(--c-coffee), 0.9); }
.entry__guideline-link,
.entry__terms-link                   { color: rgba(var(--c-coffee), 0.5); }
.entry__guideline-link:hover,
.entry__terms-link:hover             { color: rgba(var(--c-coffee), 0.82); }

/* Waiting screen */
.waiting__text                       { color: rgba(var(--c-coffee), 0.9); }
.waiting__room                       { color: rgba(var(--c-coffee), 0.68); }

/* Modal body & helpers */
.modal-body                          { color: rgba(var(--c-coffee), 0.9); }
.modal-name-label                    { color: rgba(var(--c-coffee), 0.75); }
.modal-name-count                    { color: rgba(var(--c-coffee), 0.55); }

/* Wheel / drum labels (non-selected text) */
.timer-picker__label                 { color: rgba(var(--c-coffee), 0.65); }
.wheel-labels                        { color: rgba(var(--c-coffee), 0.65); }
.drum-labels                         { color: rgba(var(--c-coffee), 0.65); }
.countdown-labels                    { color: rgba(var(--c-coffee), 0.65); }
.wheel-sep                           { color: rgba(var(--c-coffee), 0.72); }
.drum-sep                            { color: rgba(var(--c-coffee), 0.5); }

/* Wheel items — non-selected coffee, selected stays white */
.wheel-item                          { color: rgba(var(--c-coffee), 0.75); }
.weather-wheel .wheel-item           { color: rgba(var(--c-coffee), 1); opacity: 0.55; }
.weather-wheel .wheel-item.is-near   { opacity: 0.78; }
.weather-wheel .wheel-item.is-selected { color: rgba(255,255,255,0.94); opacity: 1; }
.timer-wheel .wheel-item             { color: rgba(var(--c-coffee), 0.55); }
/* Selected drum items keep white — higher specificity wins */

/* Hold hint */
.hold-hint                           { color: rgba(var(--c-coffee), 0.88); }

/* Reset / timer pending cards */
.reset-card__pending-text            { color: rgba(var(--c-coffee), 0.82); }
.reset-card__cancel-link             { color: rgba(var(--c-coffee), 0.6); }
.reset-card__cancel-link:hover       { color: rgba(var(--c-coffee), 0.9); }
.reset-card__sub                     { color: rgba(var(--c-coffee), 0.72); }

/* Share panels */
.share-panel__label                  { color: rgba(var(--c-coffee), 0.7); }
.share-modal-received-time           { color: rgba(var(--c-coffee), 0.82); }
.share-modal-received-phrase         { color: rgba(var(--c-coffee), 0.78); }
.share-modal-myshare,
.share-panel--mine .share-modal-myshare { color: rgba(var(--c-coffee), 0.65); }
.share-modal-kicker                  { color: rgba(var(--c-coffee), 0.72); }
.share-modal-received-sublabel       { color: rgba(var(--c-coffee), 0.65); }
.share-attach-hint                   { color: rgba(var(--c-coffee), 0.6); }
.share-photo-label                   { color: rgba(var(--c-coffee), 0.72); }
.share-location-input::placeholder   { color: rgba(var(--c-coffee), 0.5); }
.share-note-input::placeholder       { color: rgba(var(--c-coffee), 0.5); }
.share-gps-btn                       { color: rgba(var(--c-coffee), 0.72); }
.received-location                   { color: rgba(var(--c-coffee), 0.72); }
.received-note                       { color: rgba(var(--c-coffee), 0.82); }
.photo-glance-btn                    { color: rgba(var(--c-coffee), 0.78); }

/* Presence widgets */
.presence-widget                     { color: rgba(var(--c-coffee), 0.82); }

/* Countdown badge & activity status */
.countdown-badge                     { color: rgba(var(--c-coffee), 0.72); }
.activity-status                     { color: rgba(var(--c-coffee), 0.62); }
.activity-status.is-active           { color: rgba(var(--c-coffee), 0.82); }

/* Bond age & room code */
.bond-age-display                    { color: rgba(var(--c-coffee), 0.7); }
.room-code                           { color: rgba(var(--c-coffee), 0.58); }

/* Checking */
.checking-message                    { color: rgba(var(--c-coffee), 0.88); }
.checking-ignore-link                { color: rgba(var(--c-coffee), 0.55); }
.checking-ignore-link:hover          { color: rgba(var(--c-coffee), 0.82); }
.checking-toast                      { color: rgba(var(--c-coffee), 0.9); }

/* PWA install sheet */
.pwa-ios-sheet__step                 { color: rgba(var(--c-coffee), 0.85); }
.pwa-ios-sheet__step-num             { color: rgba(var(--c-coffee), 0.72); }
.pwa-ios-sheet__close                { color: rgba(var(--c-coffee), 0.62); }

/* Theme modal */
.theme-card__label                   { color: rgba(var(--c-coffee), 0.8); }
.theme-glow-label                    { color: rgba(var(--c-coffee), 0.72); }
.theme-card-taken                    { color: rgba(var(--c-coffee), 0.68); }
.theme-message                       { color: rgba(var(--c-coffee), 0.72); }

/* Menu — icons coffee, list text stays near-white */
/* Force text (not emoji) rendering on all menu icons so CSS color applies */
.menu-item__icon                     { color: rgba(var(--c-coffee), 0.85); opacity: 1; font-variant-emoji: text; }
/* ☁ (cloud) occupies ~65% of its em square vs ~90% for geometric chars —
   scale it up so it matches the visual weight of Timer, Feeling, etc. */
#menuItemWeather .menu-item__icon    { font-size: 1.3rem; }
.menu-item:hover .menu-item__icon,
.menu-item:focus-visible .menu-item__icon { color: rgba(255,255,255,0.82); }
.menu-branding__sub                  { color: rgba(var(--c-coffee), 0.65); }
.menu-section--open .menu-section__label { color: rgba(var(--c-coffee), 0.62); }
.menu-section__header                { color: rgba(var(--c-coffee), 0.78); }
.menu-section__header:hover          { color: rgba(var(--c-coffee), 0.98); }
.menu-item--secondary                { color: rgba(var(--c-coffee), 0.65); }

/* Review / history screens */
.review-header__sub                  { color: rgba(var(--c-coffee), 0.7); }
.rv-stat__key                        { color: rgba(var(--c-coffee), 0.62); }
.rv-metric__key                      { color: rgba(var(--c-coffee), 0.62); }
.rv-ring-label                       { color: rgba(var(--c-coffee), 0.62); }
.rv-pulse-ring__key                  { color: rgba(var(--c-coffee), 0.62); }
.rv-mutual-center__key               { color: rgba(var(--c-coffee), 0.68); }
.rv-sync-label                       { color: rgba(var(--c-coffee), 0.62); }
.rv-sync-pct                         { color: rgba(var(--c-coffee), 0.65); }
.rv-bar-label                        { color: rgba(var(--c-coffee), 0.65); }
.rv-presence-label                   { color: rgba(var(--c-coffee), 0.72); }
.rv-legend                           { color: rgba(var(--c-coffee), 0.72); }
.rv-table-dim                        { color: rgba(var(--c-coffee), 0.72); }
.rv-table-desc                       { color: rgba(var(--c-coffee), 0.68); }
.rv-no-data                          { color: rgba(var(--c-coffee), 0.62); }
.rv-hero__phrase                     { color: rgba(var(--c-coffee), 0.88); }
.rv-hero__sub                        { color: rgba(var(--c-coffee), 0.72); }
.rv-how-to-read                      { color: rgba(var(--c-coffee), 0.65); }
.rv-chart-summary__text              { color: rgba(var(--c-coffee), 0.85); }
.rv-timeline-text                    { color: rgba(var(--c-coffee), 0.88); }
.rv-insight__text                    { color: rgba(var(--c-coffee), 0.9); }
.rv-reflection-card__text            { color: rgba(var(--c-coffee), 0.88); }
.rv-meaningful                       { color: rgba(var(--c-coffee), 0.88); }
.rv-chart-btn,
.rv-view-btn                         { color: rgba(var(--c-coffee), 0.72); }
.rv-explain-text                     { color: rgba(var(--c-coffee), 0.85); }
.rv-filter-label                     { color: rgba(var(--c-coffee), 0.72); }
.rv-filter-clear                     { color: rgba(var(--c-coffee), 0.55); }
.rv-filter-clear:hover               { color: rgba(var(--c-coffee), 0.82); }
.rv-filter-apply                     { color: rgba(var(--c-coffee), 0.78); }

/* Guideline / about / terms */
.guideline-intro                     { color: rgba(var(--c-coffee), 0.72); }
.gl-section__text                    { color: rgba(var(--c-coffee), 0.85); }
.gl-section__text em                 { color: rgba(var(--c-coffee), 0.68); }
.gl-steps li                         { color: rgba(var(--c-coffee), 0.85); }
.gl-steps li strong                  { color: rgba(255,255,255,0.82); }
.gl-install-hint                     { color: rgba(var(--c-coffee), 0.6); }
.gl-terms-updated                    { color: rgba(var(--c-coffee), 0.55); }
.gl-terms-closing                    { color: rgba(var(--c-coffee), 0.72); }
.gl-about-tagline__phrase            { color: rgba(var(--c-coffee), 0.65); }

/* Diary */
.diary-intro                         { color: rgba(var(--c-coffee), 0.72); }
.diary-empty                         { color: rgba(var(--c-coffee), 0.62); }
.diary-loading                       { color: rgba(var(--c-coffee), 0.55); }
.diary-entry__date                   { color: rgba(var(--c-coffee), 0.65); }
.diary-entry__icon                   { color: rgba(var(--c-coffee), 0.55); }
.diary-entry__text                   { color: rgba(var(--c-coffee), 0.88); }
.diary-week-separator                { color: rgba(var(--c-coffee), 0.5); }

/* Dead mode encouragement sentences */
.dead-sentence-text                  { color: rgba(var(--c-coffee), 0.78); }

/* To Do list */
.todo-empty                          { color: rgba(var(--c-coffee), 0.65); }
.todo-privacy-note                   { color: rgba(var(--c-coffee), 0.62); }
.todo-subtask__text                  { color: rgba(var(--c-coffee), 0.8); }
.todo-add-input::placeholder         { color: rgba(var(--c-coffee), 0.5); }
.todo-sub-input::placeholder         { color: rgba(var(--c-coffee), 0.45); }
.todo-edit-cancel                    { color: rgba(var(--c-coffee), 0.7); }
.todo-add-sub-btn                    { color: rgba(var(--c-coffee), 0.7); }
.todo-check                          { color: rgba(var(--c-coffee), 0.68); }
.todo-edit-btn                       { color: rgba(var(--c-coffee), 0.45); }
.todo-edit-btn:hover                 { color: rgba(var(--c-coffee), 0.82); }
.todo-delete                         { color: rgba(var(--c-coffee), 0.48); }