/* ============================================================
   THE VIGIL — memories, shared fire and circle constellations
   ============================================================ */

/* Live company in the scene: a quiet upper arc around the flame. */
.family-emoji-ring.is-hearth-circle {
  bottom: max(130px, calc(env(safe-area-inset-bottom, 0px) + 130px));
  width: min(330px, 84vw);
  height: min(330px, 84vw);
  z-index: 46;
  isolation: isolate;
}

.hearth-circle-friend {
  width: 54px;
  min-width: 54px;
  height: 54px;
  min-height: 54px;
  padding: 0;
  border: 1px solid rgba(255, 210, 147, .22);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 231, 187, .14), transparent 48%),
    rgba(27, 12, 18, .76);
  color: #fff5df;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, .38),
    0 0 0 5px rgba(255, 126, 35, .045),
    0 0 22px rgba(255, 112, 25, .17);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), border-color .35s ease, box-shadow .4s ease, filter .3s ease, opacity .3s ease;
}

.hearth-circle-friend::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  width: 1px;
  height: 45px;
  z-index: -1;
  opacity: .24;
  background: linear-gradient(to bottom, rgba(255, 193, 105, .76), transparent);
  transform-origin: 50% 0;
  transform: rotate(var(--thread-rotation, 0deg));
  transition: opacity .4s ease, filter .4s ease;
}

.hearth-circle-avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 27px;
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .4));
}

.hearth-circle-live {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border: 2px solid #241018;
  border-radius: 50%;
  background: #67ed9a;
  box-shadow: 0 0 8px rgba(103, 237, 154, .8);
}

.hearth-circle-friend .family-emoji-name {
  position: absolute;
  left: 50%;
  top: calc(100% + 5px);
  max-width: 82px;
  padding: 2px 7px;
  border: 1px solid rgba(255, 224, 184, .08);
  background: rgba(16, 6, 13, .7);
  color: rgba(255, 235, 207, .76);
  transform: translateX(-50%);
}

.hearth-circle-friend:hover,
.hearth-circle-friend:focus-visible {
  border-color: rgba(255, 221, 165, .7);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .42), 0 0 0 6px rgba(255, 144, 53, .1), 0 0 30px rgba(255, 119, 30, .34);
  outline: 3px solid rgba(255, 226, 174, .48);
  outline-offset: 4px;
}

.hearth-circle-friend:active { filter: brightness(1.16); }

.hearth-circle-friend.is-awaiting-friend {
  border-color: rgba(255, 224, 165, .86);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .42),
    0 0 0 7px rgba(255, 164, 64, .12),
    0 0 34px rgba(255, 133, 36, .42);
  animation: hearthFriendAwaits 650ms ease-in-out both;
}

/* The first friend becomes the origin; every other connected friend answers
   with a quiet orbit. This makes the second half of the gesture discoverable
   without adding an instruction panel or intercepting another pointer. */
.family-emoji-ring.is-choosing-friend .hearth-circle-friend.is-spark-candidate {
  border-color: rgba(255, 217, 151, .68);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .42),
    0 0 0 5px rgba(255, 151, 53, .08),
    0 0 26px rgba(255, 141, 41, .32);
  animation: hearthFriendCandidate 820ms ease-in-out infinite alternate;
}

.hearth-circle-friend.is-spark-candidate::after,
.hearth-circle-friend.is-fire-drop-target::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid rgba(255, 211, 137, .68);
  border-radius: 50%;
  opacity: .58;
  pointer-events: none;
}

.hearth-circle-friend.is-spark-candidate::after {
  animation: hearthFriendCandidateOrbit 820ms ease-in-out infinite alternate;
}

/* Magnetized drop target for a carried procedural ember. The larger halo
   deliberately exceeds a child's fingertip while retaining the 54px button. */
.hearth-circle-friend.is-fire-drop-target {
  border-color: rgba(255, 242, 196, 1);
  filter: brightness(1.3) saturate(1.14);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .42),
    0 0 0 8px rgba(255, 176, 72, .16),
    0 0 42px rgba(255, 122, 27, .72);
  transform: translate(-50%, -50%) scale(1.09);
}

.hearth-circle-friend.is-fire-drop-target::after {
  inset: -14px;
  border-width: 2px;
  opacity: .92;
  box-shadow: 0 0 18px rgba(255, 180, 75, .72);
  animation: hearthFriendDropTarget 560ms ease-in-out infinite alternate;
}

/* A carried ember makes the existing stars answer; there is intentionally no
   rectangular veil, gradient band, or extra sky layer. */
#screenGame #nightSky {
  transition: filter 240ms ease;
}

#screenGame.is-fire-sky-target #nightSky {
  filter: brightness(1.22) saturate(1.18) drop-shadow(0 0 5px rgba(222, 195, 255, .38));
}

.hearth-circle-friend.is-sharing-spark,
.hearth-circle-friend.is-receiving-spark {
  border-color: rgba(255, 232, 181, .95);
  animation: hearthFriendSparkAnswer 1.08s cubic-bezier(.18, .8, .24, 1) both;
}

.hearth-circle-friend.is-sharing-spark::before,
.hearth-circle-friend.is-receiving-spark::before {
  opacity: .82;
  filter: drop-shadow(0 0 8px rgba(255, 188, 78, .88));
}

@keyframes hearthFriendAwaits {
  0% { filter: brightness(1); }
  42% { filter: brightness(1.34) saturate(1.12); }
  100% { filter: brightness(1.08); }
}

@keyframes hearthFriendCandidate {
  from { filter: brightness(1.02); }
  to { filter: brightness(1.24) saturate(1.08); }
}

@keyframes hearthFriendCandidateOrbit {
  from { opacity: .28; transform: scale(.86); }
  to { opacity: .78; transform: scale(1.08); }
}

@keyframes hearthFriendDropTarget {
  from { transform: scale(.82); opacity: .52; }
  to { transform: scale(1.08); opacity: 1; }
}

@keyframes hearthFriendSparkAnswer {
  0%, 100% { filter: brightness(1); transform: translate(-50%, -50%) scale(1); }
  28% { filter: brightness(1.5) saturate(1.18); transform: translate(-50%, -50%) scale(1.1); }
  58% { filter: brightness(1.2) saturate(1.08); transform: translate(-50%, -50%) scale(1.04); }
}

/* A dropped procedural ember warms the friend in place.  The GPU renderer
   carries the actual light filament; this DOM response keeps the social
   target unmistakable beneath a small finger without adding another fire
   image or stealing pointer input. */
.hearth-circle-friend.is-receiving-flame {
  animation: hearthFriendReceivesFlame 1.55s cubic-bezier(.2, .82, .28, 1) both;
  border-color: rgba(255, 232, 178, .96);
  isolation: isolate;
}

.hearth-circle-friend.is-receiving-flame::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -15px;
  border: 2px solid rgba(255, 190, 86, .76);
  border-radius: 50%;
  box-shadow:
    0 0 12px rgba(255, 226, 151, .82),
    0 0 30px rgba(255, 121, 24, .58),
    inset 0 0 18px rgba(255, 183, 74, .34);
  pointer-events: none;
  animation: hearthFriendGiftHalo 1.55s cubic-bezier(.18, .76, .25, 1) both;
}

.hearth-circle-friend.is-receiving-flame .hearth-circle-avatar {
  animation: hearthFriendGiftAvatar 1.55s cubic-bezier(.2, .82, .28, 1) both;
}

@keyframes hearthFriendReceivesFlame {
  0% { filter: brightness(1); }
  18% { filter: brightness(1.55) saturate(1.18); }
  48% { filter: brightness(1.28) saturate(1.1); }
  100% { filter: brightness(1); }
}

@keyframes hearthFriendGiftHalo {
  0% { opacity: 0; transform: scale(.42); }
  20% { opacity: 1; transform: scale(1); }
  58% { opacity: .68; transform: scale(1.28); }
  100% { opacity: 0; transform: scale(1.62); }
}

@keyframes hearthFriendGiftAvatar {
  0%, 100% { transform: translateY(0) scale(1); }
  22% { transform: translateY(-5px) scale(1.12); }
  48% { transform: translateY(-2px) scale(1.06); }
}

/* The people visibly warm the same fire: higher social stages strengthen the
   threads and introduce the shader's gold/violet accent into the DOM circle. */
#screenGame[data-fire-stage="living"] .hearth-circle-friend::before {
  opacity: .38;
  background: linear-gradient(to bottom, rgba(255, 210, 126, .88), rgba(255, 119, 31, .08), transparent);
}

#screenGame[data-fire-stage="magical"] .hearth-circle-friend {
  border-color: rgba(239, 205, 255, .42);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .42), 0 0 0 5px rgba(255, 184, 77, .07), 0 0 30px rgba(190, 105, 255, .25);
}

#screenGame[data-fire-stage="magical"] .hearth-circle-friend::before {
  opacity: .52;
  background: linear-gradient(to bottom, rgba(234, 205, 255, .95), rgba(255, 171, 68, .42), transparent);
  animation: hearthSocialThread 2.8s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

@keyframes hearthSocialThread {
  0%, 100% { opacity: .32; filter: drop-shadow(0 0 2px rgba(255, 178, 77, .25)); }
  50% { opacity: .68; filter: drop-shadow(0 0 7px rgba(205, 132, 255, .72)); }
}

.hearth-status-dock {
  position: fixed;
  z-index: 145;
  left: max(12px, env(safe-area-inset-left, 12px));
  bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  display: flex;
  align-items: stretch;
  height: 44px;
  margin: 0;
  border: 1px solid rgba(255, 202, 128, 0.42);
  border-radius: 22px;
  color: #fff6df;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 222, 151, 0.2), transparent 34%),
    linear-gradient(160deg, rgba(73, 30, 12, 0.8), rgba(17, 7, 15, 0.86));
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.44),
    0 0 18px rgba(255, 108, 20, 0.13),
    inset 0 1px 0 rgba(255, 235, 198, 0.22);
  overflow: visible;
  backdrop-filter: blur(13px) saturate(1.2);
  -webkit-backdrop-filter: blur(13px) saturate(1.2);
  transition: border-color 180ms, box-shadow 240ms, opacity 160ms ease, transform 180ms ease, visibility 0s linear;
}

.hearth-status-dock.is-occluded,
body.flamia-panel-open .hearth-status-dock,
body.flamia-modal-open .hearth-status-dock,
body.hearth-vigil-open .hearth-status-dock {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.88) translateY(8px);
  transition: opacity 150ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.hearth-status-dock::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: -4px;
  border-radius: 26px;
  border: 1px solid rgba(255, 157, 67, 0.16);
  opacity: .62;
  animation: hearthTriggerBreathe 3.8s ease-in-out infinite;
}

.hearth-memory-trigger {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  width: 76px;
  min-width: 76px;
  height: 44px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 0 21px 21px 0;
  color: #fff6df;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 180ms ease, transform 160ms ease;
}

.hearth-memory-trigger:hover,
.hearth-memory-trigger:focus-visible {
  background: rgba(255, 180, 82, .12);
  outline: 3px solid rgba(255, 221, 157, .34);
  outline-offset: 2px;
}

.hearth-memory-trigger:active { transform: scale(.95); }

.hearth-memory-flame {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 1;
  transform-origin: 50% 90%;
  animation: hearthFlameSway 2.8s ease-in-out infinite;
}

.hearth-memory-label {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 242, 215, .94);
}

.hearth-status-time {
  color: #ffc15b;
  font: 900 14px/1 "Nunito", sans-serif;
  letter-spacing: .01em;
}

.hearth-status-dock .fire-info-tag {
  position: relative;
  inset: auto;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid rgba(255, 205, 139, .16);
  border-radius: 21px 0 0 21px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff0c4;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 180ms ease, color 180ms ease, transform 160ms ease;
}

.fire-progress-ring {
  --fire-ring-color: #ffb62e;
  position: relative;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: conic-gradient(from -90deg,
    #fff1a8 0,
    var(--fire-ring-color) var(--fire-progress, 0%),
    rgba(255, 255, 255, .18) var(--fire-progress, 0%),
    rgba(255, 255, 255, .18) 100%);
  box-shadow: 0 0 10px rgba(255, 151, 35, .5), inset 0 0 0 1px rgba(255,255,255,.18);
}

.fire-progress-ring::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 30%, #4b2014, #16090d 74%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.12);
}

.fire-progress-ring .hearth-memory-flame {
  position: absolute;
  z-index: 1;
  top: 4px;
}

.fire-progress-value {
  position: absolute;
  z-index: 1;
  bottom: 4px;
  color: #fff2c8;
  font: 900 8px/1 "Nunito", sans-serif;
  letter-spacing: -.02em;
  text-shadow: 0 1px 3px #000;
}

.fire-info-tag.low .fire-progress-ring { --fire-ring-color: #ff812d; }
.fire-info-tag.critical .fire-progress-ring { --fire-ring-color: #ff4938; }
.fire-info-tag.legendary .fire-progress-ring { --fire-ring-color: #ffe76b; }

.hearth-status-dock .fire-info-tag:hover,
.hearth-status-dock .fire-info-tag:focus-visible {
  background: rgba(255, 180, 82, .1);
  outline: 3px solid rgba(255, 221, 157, .34);
  outline-offset: 2px;
}

.hearth-status-dock .fire-info-tag:active { transform: scale(.96); }
.hearth-status-dock:has(.fire-info-tag.critical) {
  border-color: rgba(255, 91, 45, .54);
  box-shadow: 0 10px 26px rgba(0,0,0,.44), 0 0 22px rgba(255,80,40,.2);
}

.hearth-memory-count {
  position: absolute;
  z-index: 2;
  top: -5px;
  right: -4px;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border: 2px solid #17080a;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe18b, #ff8b2c);
  color: #2d0b02;
  font: 900 10px/19px "Nunito", sans-serif;
  text-align: center;
  box-shadow: 0 3px 12px rgba(255, 116, 32, .45);
}

@keyframes hearthTriggerBreathe {
  0%, 100% { transform: scale(.96); opacity: .42; }
  50% { transform: scale(1.08); opacity: .92; }
}

@keyframes hearthFlameSway {
  0%, 100% { transform: rotate(-2deg) scale(.98); }
  50% { transform: rotate(2deg) scale(1.06); }
}

/* Immersive scene overlay */
.hearth-vigil-overlay,
.sky-circle-overlay {
  position: fixed;
  inset: 0;
  z-index: 315;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 0s linear 280ms;
  touch-action: pan-y;
}

.hearth-vigil-overlay.visible,
.sky-circle-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.hearth-vigil-overlay.is-closing { pointer-events: none; }

.hearth-vigil-backdrop,
.sky-circle-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 105%, rgba(118, 39, 11, .52) 0%, rgba(16, 5, 13, .82) 43%, rgba(3, 2, 10, .96) 100%),
    rgba(3, 2, 9, .84);
  backdrop-filter: blur(16px) saturate(.82);
  -webkit-backdrop-filter: blur(16px) saturate(.82);
}

.hearth-vigil-overlay.is-entering .hearth-vigil-backdrop {
  animation: hearthNightIgnite 620ms ease-out both;
}

@keyframes hearthNightIgnite {
  0% { opacity: 0; }
  42% { opacity: 1; }
  100% { opacity: 1; }
}

.hearth-vigil-sheet,
.sky-circle-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: min(91dvh, 900px);
  overflow: hidden;
  border: 1px solid rgba(255, 207, 133, .22);
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  background:
    linear-gradient(180deg, rgba(31, 15, 24, .94), rgba(14, 6, 14, .98)),
    #130811;
  box-shadow:
    0 -1px 0 rgba(255, 241, 210, .06),
    0 -30px 100px rgba(0, 0, 0, .72),
    0 0 80px rgba(153, 52, 15, .16);
  transform: translateY(38px) scale(.985);
  transition: transform 270ms cubic-bezier(.4,0,.7,.2), opacity 230ms ease;
}

.hearth-vigil-overlay.visible .hearth-vigil-sheet,
.sky-circle-overlay.visible .sky-circle-dialog { transform: translateY(0) scale(1); }

.hearth-vigil-overlay.is-entering .hearth-vigil-sheet {
  will-change: transform, opacity;
  animation: hearthVigilArrive 720ms cubic-bezier(.16,1,.3,1) both;
}

@keyframes hearthVigilArrive {
  0% { opacity: 0; transform: translateY(54px) scale(.94); }
  54% { opacity: 1; transform: translateY(-5px) scale(1.008); }
  76% { transform: translateY(2px) scale(.998); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hearth-vigil-sheet::before,
.sky-circle-dialog::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 218, 157, .68), transparent);
}

.hearth-vigil-sheet::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -150px;
  left: 50%;
  width: min(520px, 110vw);
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 145, 48, .2), rgba(255, 95, 18, .045) 46%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(.65);
}

.hearth-vigil-overlay.visible .hearth-vigil-sheet::after {
  opacity: .62;
  transform: translateX(-50%) scale(1);
}

.hearth-vigil-overlay.is-entering .hearth-vigil-sheet::after {
  animation: hearthCrownGlow 1.15s .08s cubic-bezier(.16,1,.3,1) both;
}

@keyframes hearthCrownGlow {
  0% { opacity: 0; transform: translateX(-50%) scale(.55); }
  45% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  100% { opacity: .62; transform: translateX(-50%) scale(1); }
}

.hearth-vigil-embers {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hearth-vigil-embers i {
  position: absolute;
  bottom: -10px;
  left: var(--ember-x, 12%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd16f;
  box-shadow: 0 0 10px #ff792f;
  opacity: 0;
  animation: none;
}

.hearth-vigil-overlay.visible .hearth-vigil-embers i { animation: hearthEmberRise 5.8s ease-out infinite; }

.hearth-vigil-embers i:nth-child(1) { --ember-x: 12%; animation-delay: .2s; }
.hearth-vigil-embers i:nth-child(2) { --ember-x: 26%; animation-delay: 1.8s; }
.hearth-vigil-embers i:nth-child(3) { --ember-x: 40%; animation-delay: 3.4s; }
.hearth-vigil-embers i:nth-child(4) { --ember-x: 54%; animation-delay: .9s; }
.hearth-vigil-embers i:nth-child(5) { --ember-x: 68%; animation-delay: 2.7s; }
.hearth-vigil-embers i:nth-child(6) { --ember-x: 82%; animation-delay: 4.2s; }

@keyframes hearthEmberRise {
  0% { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; }
  12% { opacity: .75; }
  70% { opacity: .22; }
  100% { transform: translate3d(18px, -78vh, 0) scale(1.1); opacity: 0; }
}

.hearth-vigil-overlay.is-entering .hearth-vigil-header > *,
.hearth-vigil-overlay.is-entering .hearth-vigil-body > * {
  animation: hearthStoryReveal 520ms cubic-bezier(.16,1,.3,1) both;
}
.hearth-vigil-overlay.is-entering .hearth-vigil-header > *:nth-child(1) { animation-delay: 120ms; }
.hearth-vigil-overlay.is-entering .hearth-vigil-header > *:nth-child(2) { animation-delay: 180ms; }
.hearth-vigil-overlay.is-entering .hearth-vigil-body > *:nth-child(1) { animation-delay: 180ms; }
.hearth-vigil-overlay.is-entering .hearth-vigil-body > *:nth-child(2) { animation-delay: 240ms; }
.hearth-vigil-overlay.is-entering .hearth-vigil-body > *:nth-child(3) { animation-delay: 300ms; }
.hearth-vigil-overlay.is-entering .hearth-vigil-body > *:nth-child(4) { animation-delay: 350ms; }
.hearth-vigil-overlay.is-entering .hearth-vigil-body > *:nth-child(n+5) { animation-delay: 390ms; }

@keyframes hearthStoryReveal {
  0% { opacity: 0; transform: translateY(17px) scale(.975); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hearth-vigil-header,
.sky-circle-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 22px 17px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  background: linear-gradient(180deg, rgba(255, 156, 75, .045), transparent);
}

.hearth-vigil-eyebrow,
.sky-circle-eyebrow,
.hearth-sky-copy > span {
  display: block;
  margin-bottom: 5px;
  color: #e7b778;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hearth-vigil-header h2,
.sky-circle-header h2 {
  margin: 0;
  color: #fff5dc;
  font-family: "Cinzel", serif;
  font-size: clamp(23px, 6vw, 35px);
  font-weight: 700;
  line-height: 1.03;
  text-shadow: 0 0 28px rgba(255, 154, 54, .22);
}

.hearth-vigil-header p,
.sky-circle-header p {
  max-width: 510px;
  margin: 7px 0 0;
  color: rgba(255, 235, 207, .56);
  font-size: 13px;
  line-height: 1.45;
}

.hearth-vigil-close,
.sky-circle-close {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: rgba(255, 255, 255, .055);
  color: rgba(255, 244, 225, .82);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms, transform 160ms, border-color 160ms;
}

.hearth-vigil-close:hover,
.sky-circle-close:hover { background: rgba(255, 197, 128, .13); border-color: rgba(255, 209, 151, .4); }
.hearth-vigil-close:active,
.sky-circle-close:active { transform: scale(.9); }

.hearth-vigil-body,
.sky-circle-body {
  position: relative;
  z-index: 1;
  max-height: calc(min(91dvh, 900px) - 122px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 16px max(28px, env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 184, 105, .22) transparent;
  -webkit-overflow-scrolling: touch;
}

.hearth-presence {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 210, 150, .115);
  border-radius: 18px;
  background: linear-gradient(105deg, rgba(255, 166, 82, .075), rgba(124, 76, 183, .045));
}

.hearth-presence-stack { display: flex; padding-left: 4px; }
.hearth-presence-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: -8px;
  border: 2px solid #25101a;
  border-radius: 50%;
  background: #382019;
  font-size: 19px;
  box-shadow: 0 0 13px rgba(255, 142, 53, .12);
}
.hearth-presence-avatar:first-child { margin-left: 0; }
.hearth-presence-avatar.is-me { border-color: rgba(255, 207, 122, .64); }

.hearth-presence-copy { display: flex; flex-direction: column; min-width: 0; }
.hearth-presence-copy strong { color: #ffe8bd; font-size: 13px; line-height: 1.25; }
.hearth-presence-copy span { color: rgba(255, 239, 214, .44); font-size: 11px; line-height: 1.35; }

.hearth-presence button,
.hearth-memory-actions button,
.hearth-memory-empty button,
.hearth-sky-callout button,
.sky-circle-play,
.hearth-journal-link {
  min-height: 48px;
  border: 1px solid rgba(255, 205, 137, .22);
  border-radius: 14px;
  background: linear-gradient(135deg, #bd511e, #e57b29);
  color: #fff8e8;
  font: 800 13px/1 "Nunito", sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(83, 25, 5, .2), inset 0 1px 0 rgba(255, 244, 214, .16);
  transition: transform 140ms, filter 140ms, background 140ms, border-color 140ms, box-shadow 180ms;
}

.hearth-presence button::before,
.hearth-memory-actions button::before,
.hearth-memory-empty button::before,
.hearth-sky-callout button::before,
.sky-circle-play::before,
.hearth-journal-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -50% -25%;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 247, 220, .32) 48%, transparent 66%);
  transform: translateX(-70%) rotate(8deg);
  transition: transform 520ms cubic-bezier(.16,1,.3,1);
}

.hearth-presence button:hover::before,
.hearth-memory-actions button:hover::before,
.hearth-memory-empty button:hover::before,
.hearth-sky-callout button:hover::before,
.sky-circle-play:hover::before,
.hearth-journal-link:hover::before { transform: translateX(65%) rotate(8deg); }

.hearth-presence button { min-height: 48px; padding: 0 12px; font-size: 11px; }
.hearth-presence button:hover,
.hearth-memory-actions button:hover,
.hearth-memory-empty button:hover,
.hearth-sky-callout button:hover,
.sky-circle-play:hover { filter: brightness(1.12); }
.hearth-presence button:active,
.hearth-memory-actions button:active,
.hearth-memory-empty button:active,
.hearth-sky-callout button:active,
.sky-circle-play:active { transform: scale(.96); }

.hearth-vigil-overlay button.is-hearth-activated {
  animation: hearthButtonMagic 640ms cubic-bezier(.2,.9,.2,1) both;
}

@keyframes hearthButtonMagic {
  0% { transform: scale(1); filter: brightness(1); }
  24% { transform: scale(.93); filter: brightness(1.38) saturate(1.22); }
  52% { transform: scale(1.07); filter: brightness(1.2) saturate(1.35); box-shadow: 0 0 0 7px rgba(255, 181, 78, .13), 0 0 32px rgba(255, 108, 28, .48); }
  100% { transform: scale(1); filter: brightness(1.06); }
}

.hearth-memory-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 206, 143, .14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 137, 49, .12), transparent 34%),
    linear-gradient(145deg, rgba(70, 30, 23, .7), rgba(24, 11, 22, .86));
  box-shadow: inset 0 1px 0 rgba(255, 245, 220, .04), 0 18px 50px rgba(0, 0, 0, .18);
}

.hearth-memory-card.is-hearth-stage,
.hearth-presence.is-hearth-stage,
.hearth-memory-empty.is-hearth-stage,
.hearth-sky-callout.is-hearth-stage,
.hearth-journal-link.is-hearth-stage {
  animation: hearthStageAnswer 620ms cubic-bezier(.16,1,.3,1) both !important;
}

@keyframes hearthStageAnswer {
  0% { transform: scale(1); }
  34% { transform: scale(.985); box-shadow: inset 0 0 0 1px rgba(255, 224, 162, .42), 0 0 18px rgba(255, 118, 30, .15); }
  68% { transform: scale(1.012); box-shadow: inset 0 0 0 1px rgba(255, 231, 181, .18), 0 0 45px rgba(255, 118, 30, .26); }
  100% { transform: scale(1); }
}

.hearth-memory-card.is-hero { padding: 19px; }
.hearth-memory-card.is-shared {
  border-color: rgba(207, 169, 255, .27);
  background:
    radial-gradient(circle at 14% 20%, rgba(255, 145, 52, .14), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(172, 115, 255, .12), transparent 36%),
    linear-gradient(145deg, rgba(65, 27, 31, .76), rgba(24, 11, 31, .9));
}

.hearth-memory-glow {
  position: absolute;
  top: -55px;
  left: -42px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: rgba(255, 115, 34, .08);
  filter: blur(24px);
  pointer-events: none;
}

.hearth-memory-topline {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
  color: rgba(255, 230, 195, .42);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hearth-memory-kind { color: rgba(255, 200, 133, .74); }
.hearth-memory-card.is-shared .hearth-memory-kind { color: rgba(216, 186, 255, .86); }
.hearth-memory-main { position: relative; display: flex; align-items: center; gap: 13px; }

.hearth-memory-emoji {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 215, 157, .14);
  border-radius: 18px;
  background: rgba(255, 255, 255, .045);
  font-size: 30px;
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, .35));
}

.hearth-memory-copy { flex: 1 1 auto; min-width: 0; }
.hearth-memory-copy h3 {
  margin: 0;
  color: #fff2d3;
  font-family: "Cinzel", serif;
  font-size: clamp(15px, 4vw, 20px);
  font-weight: 700;
  line-height: 1.25;
}

.hearth-memory-meta { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 6px; color: rgba(255, 232, 202, .49); font-size: 11px; }
.hearth-memory-score { color: #ffd27e; font-weight: 900; }
.hearth-memory-people { display: flex; flex: 0 0 auto; align-items: center; padding-left: 7px; }
.hearth-memory-people span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-left: -7px;
  border: 1px solid rgba(255, 219, 170, .3);
  border-radius: 50%;
  background: #29111b;
  font-size: 14px;
}

.hearth-memory-actions { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; margin-top: 16px; }
.hearth-memory-actions button { padding: 0 15px; }
.hearth-memory-actions button.is-quiet {
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 237, 210, .74);
}

.hearth-memory-section-title {
  margin: 20px 4px 10px;
  color: rgba(255, 222, 177, .66);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hearth-memory-strip {
  display: grid;
  grid-auto-columns: minmax(245px, 76%);
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  padding: 1px 1px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x;
}
.hearth-memory-strip::-webkit-scrollbar { display: none; }
.hearth-memory-card.is-compact { min-height: 175px; padding: 14px; scroll-snap-align: start; }
.hearth-memory-card.is-compact .hearth-memory-emoji { width: 45px; height: 45px; border-radius: 14px; font-size: 23px; }
.hearth-memory-card.is-compact .hearth-memory-people { display: none; }
.hearth-memory-card.is-compact .hearth-memory-copy h3 { font-family: "Nunito", sans-serif; font-size: 14px; font-weight: 900; }
.hearth-memory-card.is-compact .hearth-memory-actions { margin-top: 12px; }
.hearth-memory-card.is-compact .hearth-memory-actions button { min-height: 48px; padding: 0 9px; font-size: 11px; }

.hearth-memory-empty {
  padding: 26px 20px;
  border: 1px dashed rgba(255, 202, 132, .2);
  border-radius: 22px;
  background: radial-gradient(circle at 50% 120%, rgba(255, 105, 26, .11), transparent 54%);
  text-align: center;
}
.hearth-empty-flame { display: inline-block; font-size: 42px; opacity: .72; filter: saturate(.7) drop-shadow(0 0 15px rgba(255, 108, 29, .28)); }
.hearth-memory-empty h3 { margin: 8px 0 5px; color: #fff0cf; font-family: "Cinzel", serif; font-size: 17px; }
.hearth-memory-empty p { max-width: 420px; margin: 0 auto; color: rgba(255, 233, 203, .5); font-size: 12px; line-height: 1.5; }
.hearth-memory-empty button { min-width: 170px; margin-top: 16px; padding: 0 20px; }

.hearth-sky-callout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 145px;
  margin-top: 14px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid rgba(175, 162, 255, .2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 78% 18%, rgba(167, 127, 255, .18), transparent 31%),
    linear-gradient(145deg, rgba(22, 21, 57, .92), rgba(19, 8, 29, .94));
}
.hearth-sky-copy { position: relative; z-index: 1; }
.hearth-sky-copy > span { color: #c9afff; }
.hearth-sky-copy h3 { margin: 0; color: #f7efff; font-family: "Cinzel", serif; font-size: 17px; }
.hearth-sky-copy p { max-width: 390px; margin: 6px 0 0; color: rgba(235, 222, 255, .54); font-size: 12px; line-height: 1.45; }
.hearth-sky-callout button { position: relative; z-index: 1; min-width: 130px; padding: 0 15px; border-color: rgba(204, 180, 255, .28); background: linear-gradient(135deg, #60429e, #8a5cc6); }
.hearth-sky-stars { position: absolute; inset: 0; pointer-events: none; }
.hearth-sky-stars i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #f8ebff; box-shadow: 0 0 8px #b88bff; animation: none; }
.hearth-vigil-overlay.visible .hearth-sky-stars i { animation: hearthStarPulse 2.8s ease-in-out infinite; }
.hearth-sky-stars i:nth-child(1) { top: 18%; left: 56%; }
.hearth-sky-stars i:nth-child(2) { top: 27%; left: 71%; animation-delay: -.8s; }
.hearth-sky-stars i:nth-child(3) { top: 63%; left: 62%; animation-delay: -1.4s; }
.hearth-sky-stars i:nth-child(4) { top: 48%; left: 85%; animation-delay: -.35s; }
.hearth-sky-stars i:nth-child(5) { top: 74%; left: 78%; animation-delay: -2s; }
@keyframes hearthStarPulse { 50% { opacity: .32; transform: scale(.65); } }

.hearth-journal-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  border-color: transparent;
  background: transparent;
  color: rgba(255, 227, 189, .54);
}
.hearth-journal-link:hover { color: rgba(255, 237, 210, .88); background: rgba(255, 255, 255, .035); }

/* Every CTA opens a tiny themed portal before the next screen takes focus. */
.hearth-vigil-overlay.is-actioning .hearth-vigil-sheet {
  animation: hearthPortalAnswer 640ms cubic-bezier(.16,1,.3,1) both;
}
.hearth-vigil-overlay.is-action-fire { --hearth-action-color: #ff9d39; --hearth-action-soft: rgba(255, 83, 15, .3); }
.hearth-vigil-overlay.is-action-sky { --hearth-action-color: #d8bdff; --hearth-action-soft: rgba(133, 86, 255, .32); }
.hearth-vigil-overlay.is-action-journal { --hearth-action-color: #ffe0a1; --hearth-action-soft: rgba(199, 118, 35, .3); }
.hearth-vigil-overlay.is-action-social { --hearth-action-color: #ffc3d8; --hearth-action-soft: rgba(255, 91, 139, .28); }
.hearth-vigil-overlay.is-action-play { --hearth-action-color: #ffdb75; --hearth-action-soft: rgba(255, 131, 26, .3); }

.hearth-vigil-overlay.is-actioning .hearth-vigil-backdrop {
  animation: none;
}

.hearth-vigil-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 68%, var(--hearth-action-soft, rgba(255, 125, 35, .25)), transparent 52%);
  opacity: 0;
  pointer-events: none;
  transform: scale(.82);
}
.hearth-vigil-overlay.is-actioning .hearth-vigil-backdrop::after {
  animation: hearthBackdropAnswer 640ms ease-out both;
}

@keyframes hearthPortalAnswer {
  0% { transform: translateY(0) scale(1); }
  42% { transform: translateY(3px) scale(.985); }
  72% { transform: translateY(-4px) scale(1.012); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes hearthBackdropAnswer {
  0%, 100% { opacity: 0; transform: scale(.82); }
  48% { opacity: 1; transform: scale(1.08); }
}

.hearth-action-burst {
  --hearth-action-color: #ffd377;
  --hearth-action-soft: rgba(255, 132, 34, .42);
  position: fixed;
  z-index: 4;
  left: var(--hearth-burst-x);
  top: var(--hearth-burst-y);
  width: 1px;
  height: 1px;
  pointer-events: none;
  contain: layout style;
}
.hearth-action-burst.is-sky { --hearth-action-color: #e4d1ff; --hearth-action-soft: rgba(153, 105, 255, .48); }
.hearth-action-burst.is-journal { --hearth-action-color: #ffe6a9; --hearth-action-soft: rgba(224, 145, 53, .45); }
.hearth-action-burst.is-social { --hearth-action-color: #ffd0df; --hearth-action-soft: rgba(255, 89, 143, .44); }
.hearth-action-burst.is-play { --hearth-action-color: #fff08f; --hearth-action-soft: rgba(255, 128, 25, .5); }

.hearth-action-burst b,
.hearth-action-burst i {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
}
.hearth-action-burst b {
  z-index: 2;
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(0 0 13px var(--hearth-action-color));
}
.hearth-action-burst i {
  width: 6px;
  height: 10px;
  border-radius: 60% 40% 60% 40%;
  background: var(--hearth-action-color);
  box-shadow: 0 0 10px var(--hearth-action-color), 0 0 22px var(--hearth-action-soft);
}
.hearth-action-burst.is-live b { animation: hearthBurstCore 720ms cubic-bezier(.16,1,.3,1) both; }
.hearth-action-burst.is-live i { animation: hearthBurstSpark 700ms cubic-bezier(.12,.8,.2,1) both; }
.hearth-action-burst i:nth-of-type(1) { --bx:-82px; --by:-18px; --br:-55deg; }
.hearth-action-burst i:nth-of-type(2) { --bx:-67px; --by:-58px; --br:-20deg; animation-delay:20ms; }
.hearth-action-burst i:nth-of-type(3) { --bx:-30px; --by:-78px; --br:12deg; animation-delay:45ms; }
.hearth-action-burst i:nth-of-type(4) { --bx:9px; --by:-86px; --br:38deg; animation-delay:10ms; }
.hearth-action-burst i:nth-of-type(5) { --bx:49px; --by:-68px; --br:62deg; animation-delay:55ms; }
.hearth-action-burst i:nth-of-type(6) { --bx:82px; --by:-30px; --br:85deg; animation-delay:30ms; }
.hearth-action-burst i:nth-of-type(7) { --bx:76px; --by:20px; --br:115deg; animation-delay:65ms; }
.hearth-action-burst i:nth-of-type(8) { --bx:48px; --by:58px; --br:145deg; animation-delay:18ms; }
.hearth-action-burst i:nth-of-type(9) { --bx:5px; --by:72px; --br:175deg; animation-delay:60ms; }
.hearth-action-burst i:nth-of-type(10) { --bx:-39px; --by:61px; --br:205deg; animation-delay:35ms; }
.hearth-action-burst i:nth-of-type(11) { --bx:-75px; --by:35px; --br:238deg; animation-delay:75ms; }
.hearth-action-burst i:nth-of-type(12) { --bx:-92px; --by:6px; --br:270deg; animation-delay:8ms; }

@keyframes hearthBurstCore {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15) rotate(-12deg); }
  38% { opacity: 1; transform: translate(-50%, -50%) scale(1.28) rotate(7deg); }
  100% { opacity: 0; transform: translate(-50%, -72%) scale(.72) rotate(0); }
}
@keyframes hearthBurstSpark {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.2); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) rotate(var(--br)) scale(.15); }
}

/* Moment rekindling — coherent flame-to-sky VFX */
.hearth-rekindle-vfx {
  position: fixed;
  z-index: 360;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hearth-rekindle-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 76%, rgba(255, 244, 184, .7), rgba(255, 105, 18, .24) 16%, transparent 42%),
    radial-gradient(circle at 50% 78%, rgba(255, 75, 12, .18), transparent 62%);
  mix-blend-mode: screen;
}
.hearth-rekindle-vfx.is-burning .hearth-rekindle-flash { animation: hearthMemoryFlash 1.4s ease-out both; }
@keyframes hearthMemoryFlash {
  0% { opacity: 0; }
  12% { opacity: .92; }
  42% { opacity: .28; }
  100% { opacity: 0; }
}
.hearth-rekindle-ring {
  position: absolute;
  left: 50%;
  bottom: max(112px, calc(env(safe-area-inset-bottom, 0px) + 112px));
  width: 48px;
  height: 48px;
  border: 2px solid rgba(255, 205, 110, .78);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, 50%) scale(.2);
}
.hearth-rekindle-vfx.is-burning .hearth-rekindle-ring { animation: hearthMemoryRing 1.5s cubic-bezier(.18,.76,.2,1) forwards; }
@keyframes hearthMemoryRing {
  0% { opacity: .9; transform: translate(-50%, 50%) scale(.2); box-shadow: 0 0 20px rgba(255, 127, 35, .8); }
  100% { opacity: 0; transform: translate(-50%, 50%) scale(8); box-shadow: 0 0 50px rgba(255, 127, 35, 0); }
}

.hearth-rekindle-wave {
  position: absolute;
  left: 50%;
  bottom: max(112px, calc(env(safe-area-inset-bottom, 0px) + 112px));
  width: 68px;
  height: 28px;
  border: 2px solid rgba(255, 126, 37, .66);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, 50%) scale(.25);
}
.hearth-rekindle-vfx.is-burning .hearth-rekindle-wave { animation: hearthMemoryWave 1.9s 120ms cubic-bezier(.18,.76,.2,1) forwards; }
@keyframes hearthMemoryWave {
  0% { opacity: .8; transform: translate(-50%, 50%) scale(.25); box-shadow: 0 0 24px rgba(255, 100, 24, .62); }
  100% { opacity: 0; transform: translate(-50%, 50%) scale(9); box-shadow: 0 0 60px rgba(255, 100, 24, 0); }
}

.hearth-rekindle-title {
  position: absolute;
  left: 50%;
  bottom: max(255px, calc(env(safe-area-inset-bottom, 0px) + 255px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  max-width: min(82vw, 430px);
  color: #fff0c9;
  opacity: 0;
  text-align: center;
  text-shadow: 0 2px 16px #16050a, 0 0 24px rgba(255, 127, 35, .4);
  transform: translate(-50%, 28px) scale(.94);
}
.hearth-rekindle-title span { font-size: 41px; }
.hearth-rekindle-title strong { font-family: "Cinzel", serif; font-size: clamp(16px, 4vw, 25px); line-height: 1.25; }
.hearth-rekindle-vfx.is-burning .hearth-rekindle-title { animation: hearthMemoryTitle 2.7s ease-out forwards; }
@keyframes hearthMemoryTitle {
  0% { opacity: 0; transform: translate(-50%, 28px) scale(.94); }
  18%, 67% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -44px) scale(.98); }
}

.hearth-rekindle-vfx > i {
  position: absolute;
  left: 50%;
  bottom: max(130px, calc(env(safe-area-inset-bottom, 0px) + 130px));
  width: 5px;
  height: 9px;
  border-radius: 50% 50% 40% 40%;
  background: #ffe17d;
  box-shadow: 0 0 12px #ff641f;
  opacity: 0;
  transform: translateX(-50%);
}
.hearth-rekindle-vfx.is-shared > i { background: #e7c7ff; box-shadow: 0 0 12px #a66cff; }
.hearth-rekindle-vfx.is-burning > i { animation: hearthMemoryEmber 2.2s ease-out forwards; }
.hearth-rekindle-vfx > i:nth-of-type(1) { --x: -105px; --y: -360px; animation-delay: .02s; }
.hearth-rekindle-vfx > i:nth-of-type(2) { --x: -68px; --y: -440px; animation-delay: .14s; }
.hearth-rekindle-vfx > i:nth-of-type(3) { --x: -31px; --y: -320px; animation-delay: .25s; }
.hearth-rekindle-vfx > i:nth-of-type(4) { --x: 22px; --y: -470px; animation-delay: .08s; }
.hearth-rekindle-vfx > i:nth-of-type(5) { --x: 58px; --y: -350px; animation-delay: .3s; }
.hearth-rekindle-vfx > i:nth-of-type(6) { --x: 96px; --y: -420px; animation-delay: .2s; }
.hearth-rekindle-vfx > i:nth-of-type(7) { --x: -145px; --y: -300px; animation-delay: .4s; }
.hearth-rekindle-vfx > i:nth-of-type(8) { --x: 137px; --y: -300px; animation-delay: .34s; }
.hearth-rekindle-vfx > i:nth-of-type(9) { --x: -185px; --y: -235px; animation-delay: .12s; }
.hearth-rekindle-vfx > i:nth-of-type(10) { --x: 182px; --y: -250px; animation-delay: .26s; }
.hearth-rekindle-vfx > i:nth-of-type(11) { --x: -112px; --y: -510px; animation-delay: .44s; }
.hearth-rekindle-vfx > i:nth-of-type(12) { --x: 118px; --y: -530px; animation-delay: .38s; }
.hearth-rekindle-vfx > i:nth-of-type(13) { --x: -18px; --y: -570px; animation-delay: .18s; }
.hearth-rekindle-vfx > i:nth-of-type(14) { --x: 42px; --y: -545px; animation-delay: .5s; }
@keyframes hearthMemoryEmber {
  0% { opacity: 0; transform: translate3d(-50%, 0, 0) scale(.4); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--x), var(--y), 0) rotate(110deg) scale(.15); }
}

#fireWebglCanvas.memory-rekindled {
  filter: saturate(1.28) brightness(1.13);
  animation: hearthFireRemember 2.7s ease-out;
}
@keyframes hearthFireRemember {
  0%, 100% { filter: saturate(1) brightness(1); }
  20% { filter: saturate(1.5) brightness(1.26) drop-shadow(0 0 20px rgba(255, 126, 31, .48)); }
  55% { filter: saturate(1.22) brightness(1.08) drop-shadow(0 0 42px rgba(255, 126, 31, .2)); }
}

/* Circle constellation modal */
.sky-circle-overlay { align-items: center; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
.sky-circle-backdrop {
  background:
    radial-gradient(circle at 50% 3%, rgba(80, 65, 158, .28), transparent 38%),
    radial-gradient(circle at 50% 110%, rgba(116, 37, 18, .27), transparent 41%),
    rgba(3, 2, 13, .94);
}
.sky-circle-dialog {
  width: min(560px, 100%);
  max-height: min(88dvh, 760px);
  border: 1px solid rgba(201, 184, 255, .24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0, rgba(90, 70, 165, .18), transparent 34%),
    linear-gradient(180deg, rgba(20, 16, 48, .98), rgba(11, 6, 23, .99));
  box-shadow: 0 32px 100px rgba(0, 0, 0, .75), 0 0 80px rgba(111, 82, 192, .15);
  transform: translateY(20px) scale(.97);
}
.sky-circle-header { border-bottom-color: rgba(210, 197, 255, .08); }
.sky-circle-header .sky-circle-eyebrow { color: #c7afff; }
.sky-circle-body { max-height: calc(min(88dvh, 760px) - 132px); padding: 14px 16px max(20px, env(safe-area-inset-bottom, 0px)); }

.sky-circle-map {
  position: relative;
  height: 155px;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid rgba(203, 187, 255, .13);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 50%, rgba(118, 91, 207, .16), transparent 43%),
    linear-gradient(180deg, rgba(15, 16, 49, .84), rgba(13, 8, 28, .88));
}
.sky-circle-map::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .45;
  background-image:
    radial-gradient(circle at 9% 18%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 24% 74%, #ddceff 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 24%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 67%, #f7ddff 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 30%, #fff 0 1px, transparent 1.5px);
}
.sky-circle-map-svg { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); overflow: visible; }
.sky-circle-map-svg line { stroke: rgba(212, 195, 255, .14); stroke-width: .55; vector-effect: non-scaling-stroke; }
.sky-circle-map-svg line.is-lit { stroke: rgba(230, 214, 255, .58); stroke-width: 1; filter: drop-shadow(0 0 3px rgba(164, 122, 255, .45)); }
.sky-circle-map-svg circle { fill: rgba(240, 228, 255, .28); }
.sky-circle-map-svg circle.is-lit { fill: #eadcff; filter: drop-shadow(0 0 5px rgba(175, 131, 255, .9)); }
.sky-circle-map-svg circle.is-me { fill: #ffd477; filter: drop-shadow(0 0 6px rgba(255, 188, 67, .95)); }
.sky-circle-line {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--length);
  height: 1px;
  transform: rotate(var(--angle));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(211, 192, 255, .12), rgba(255, 220, 160, .35));
}
.sky-circle-map-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border: 0;
  border-radius: 50%;
  background: var(--color, #eedfff);
  box-shadow: 0 0 8px 2px var(--glow, rgba(187, 149, 255, .55));
  transform: translate(-50%, -50%);
}
.sky-circle-map-star.is-me { --color: #ffd274; --glow: rgba(255, 190, 71, .72); }

.sky-circle-roster { display: flex; flex-direction: column; gap: 7px; }
.sky-circle-player {
  display: grid;
  grid-template-columns: 28px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 56px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 16px;
  background: rgba(255, 255, 255, .035);
}
.sky-circle-player.is-me { border-color: rgba(255, 206, 114, .22); background: rgba(255, 173, 65, .055); }
.sky-circle-rank { color: rgba(224, 210, 255, .46); font-size: 12px; font-weight: 900; text-align: center; }
.sky-circle-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .055); font-size: 22px; }
.sky-circle-person { display: flex; min-width: 0; flex-direction: column; }
.sky-circle-person strong { overflow: hidden; color: #f8efff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sky-circle-person span { color: rgba(225, 210, 255, .42); font-size: 10px; }
.sky-circle-score { color: #ffd179; font-family: "Cinzel", serif; font-size: 14px; font-weight: 700; }
.sky-circle-empty { padding: 24px 15px; color: rgba(231, 219, 255, .56); font-size: 13px; line-height: 1.5; text-align: center; }
.sky-circle-play { width: 100%; margin-top: 12px; padding: 0 18px; border-color: rgba(201, 179, 255, .26); background: linear-gradient(135deg, #5b409c, #8a5fc0); }

/* Focus is always legible against fire and night gradients. */
.hearth-vigil-overlay button:focus-visible,
.sky-circle-overlay button:focus-visible,
.hearth-memory-trigger:focus-visible {
  outline: 3px solid rgba(255, 229, 170, .8);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .hearth-vigil-overlay { padding-left: 0; padding-right: 0; }
  .hearth-vigil-sheet { width: 100%; max-height: 92dvh; border-radius: 25px 25px 0 0; }
  .hearth-vigil-header { padding: 20px 17px 14px; }
  .hearth-vigil-body { padding: 13px 12px max(22px, env(safe-area-inset-bottom, 0px)); }
  .hearth-presence { grid-template-columns: auto minmax(0, 1fr); }
  .hearth-presence button { grid-column: 1 / -1; width: 100%; }
  .hearth-sky-callout { grid-template-columns: 1fr; gap: 13px; }
  .hearth-sky-callout button { width: 100%; }
  .hearth-memory-card.is-hero { padding: 16px; }
}

@media (max-height: 620px) and (orientation: portrait) {
  .hearth-status-dock {
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .hearth-status-dock { bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px)); height: 42px; }
  .hearth-memory-trigger { width: 72px; min-width: 72px; height: 42px; }
  .hearth-status-dock .fire-info-tag { width: 42px; min-width: 42px; height: 42px; }
  .fire-progress-ring { width: 33px; height: 33px; }
  .hearth-memory-flame { margin: 0; font-size: 12px; }
  .hearth-memory-label { font-size: 7px; }
  .hearth-status-time { font-size: 13px; }
  .hearth-vigil-overlay { align-items: stretch; padding: 0; }
  .hearth-vigil-sheet { width: min(760px, 100%); max-height: 100dvh; border: 0; border-radius: 0; }
  .hearth-vigil-header { padding: 12px 18px 10px; }
  .hearth-vigil-header p { display: none; }
  .hearth-vigil-body { max-height: calc(100dvh - 78px); }
  .hearth-presence { margin-bottom: 10px; }
}

@media (min-width: 900px) {
  .hearth-status-dock { left: max(22px, env(safe-area-inset-left, 22px)); bottom: 26px; height: 46px; }
  .hearth-memory-trigger,
  .hearth-status-dock .fire-info-tag { height: 46px; }
  .hearth-memory-flame { font-size: 14px; }
  .hearth-vigil-overlay { align-items: center; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .hearth-vigil-sheet { border-bottom: 1px solid rgba(255, 207, 133, .22); border-radius: 30px; }
  .hearth-vigil-body { padding: 18px 20px 24px; }
  .hearth-memory-strip { grid-auto-columns: minmax(270px, 48%); }
}

@media (prefers-reduced-motion: reduce) {
  .hearth-status-dock::before,
  .hearth-memory-flame,
  .hearth-vigil-embers i,
  .hearth-sky-stars i,
  .hearth-vigil-overlay.is-entering .hearth-vigil-backdrop,
  .hearth-vigil-overlay.is-entering .hearth-vigil-sheet,
  .hearth-vigil-overlay.is-entering .hearth-vigil-sheet::after,
  .hearth-vigil-overlay.is-entering .hearth-vigil-header > *,
  .hearth-vigil-overlay.is-entering .hearth-vigil-body > *,
  .hearth-vigil-overlay.is-actioning .hearth-vigil-sheet,
  .hearth-vigil-overlay.is-actioning .hearth-vigil-backdrop,
  .hearth-vigil-overlay.is-actioning .hearth-vigil-backdrop::after,
  .hearth-vigil-overlay button.is-hearth-activated,
  .hearth-vigil-overlay .is-hearth-stage,
  .hearth-action-burst *,
  .hearth-rekindle-flash,
  .hearth-rekindle-ring,
  .hearth-rekindle-wave,
  .hearth-rekindle-title,
  .hearth-rekindle-vfx > i,
  .hearth-rekindle-vfx,
	  .hearth-circle-friend.is-receiving-flame,
	  .hearth-circle-friend.is-receiving-flame::after,
	  .hearth-circle-friend.is-receiving-flame .hearth-circle-avatar,
	  .hearth-circle-friend.is-awaiting-friend,
	  .hearth-circle-friend.is-spark-candidate,
	  .hearth-circle-friend.is-spark-candidate::after,
	  .hearth-circle-friend.is-fire-drop-target,
	  .hearth-circle-friend.is-fire-drop-target::after,
	  .hearth-circle-friend.is-sharing-spark,
	  .hearth-circle-friend.is-receiving-spark,
  #fireWebglCanvas.memory-rekindled {
    animation: none !important;
  }
  #screenGame[data-fire-stage="magical"] .hearth-circle-friend::before {
    animation: none !important;
  }
  #screenGame #nightSky {
    transition: none !important;
  }
  .family-emoji-ring.is-hearth-circle .hearth-circle-friend {
    animation: none !important;
    transition: none !important;
  }
  .hearth-vigil-overlay,
  .sky-circle-overlay,
  .hearth-vigil-sheet,
  .sky-circle-dialog,
  .hearth-memory-trigger {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .hearth-vigil-sheet { will-change: auto !important; }
  .hearth-presence button,
  .hearth-memory-actions button,
  .hearth-memory-empty button,
  .hearth-sky-callout button,
  .sky-circle-play,
  .hearth-journal-link,
  .hearth-presence button::before,
  .hearth-memory-actions button::before,
  .hearth-memory-empty button::before,
  .hearth-sky-callout button::before,
  .sky-circle-play::before,
  .hearth-journal-link::before {
    transition: none !important;
  }
  .hearth-presence button:active,
  .hearth-memory-actions button:active,
  .hearth-memory-empty button:active,
  .hearth-sky-callout button:active,
  .sky-circle-play:active,
  .hearth-journal-link:active { transform: none !important; }
}

@media (forced-colors: active) {
  .hearth-memory-trigger,
  .hearth-vigil-sheet,
  .sky-circle-dialog,
  .hearth-memory-card,
  .hearth-presence,
  .hearth-sky-callout { border: 1px solid CanvasText; }
  .hearth-vigil-backdrop,
  .sky-circle-backdrop { background: Canvas; }
}