:root {
  --sky: #55c7d8;
  --sky-soft: #a8e4e2;
  --mountain: #49aeb8;
  --forest: #0f3c35;
  --forest-deep: #062923;
  --forest-soft: #1c5a48;
  --fox: #ef6a32;
  --fox-dark: #a63826;
  --ani: #49a9eb;
  --cream: #fff8eb;
  --paper: #f5efe4;
  --ink: #17231f;
  --black: #080b0b;
  --white: #fff;
  --muted: #6e7a72;
  --shadow: 0 24px 80px rgba(2, 21, 18, .30);
  --ease: cubic-bezier(.22,.72,.22,1);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--forest-deep);
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--forest-deep);
  color: var(--ink);
  font-family:
    "Trebuchet MS",
    "Avenir Next",
    Avenir,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  overflow-x: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

.app-shell {
  width: min(100%, 760px);
  min-height: 100svh;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  background: var(--forest-deep);
  box-shadow: 0 0 80px rgba(0,0,0,.22);
}

.is-hidden {
  display: none !important;
}

/* ============================================================
   COVER / DISCOVERY
   ============================================================ */

.discovery {
  min-height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  isolation: isolate;
  overflow: hidden;
  color: white;
  cursor: pointer;
  transition:
    opacity .72s var(--ease),
    transform .72s var(--ease),
    filter .72s var(--ease);
}

.discovery.is-leaving {
  opacity: 0;
  transform: scale(1.035);
  filter: blur(9px) saturate(.8);
  pointer-events: none;
}

.cover-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("./assets/paws-cover.jpg");
  background-size: cover;
  background-position: center 44%;
  transform: scale(1.04);
}

.cover-vignette {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(
      180deg,
      rgba(4,37,35,.06) 0%,
      rgba(4,37,35,.06) 28%,
      rgba(4,31,28,.28) 56%,
      rgba(3,24,22,.82) 100%
    ),
    radial-gradient(
      circle at 52% 37%,
      rgba(255,255,255,.04) 0 18%,
      rgba(3,24,22,.12) 52%,
      rgba(3,24,22,.28) 100%
    );
}

.discovery-top {
  padding:
    calc(1.4rem + env(safe-area-inset-top))
    1.4rem
    0;
  text-align: center;
  position: relative;
  z-index: 2;
}

.paws-wordmark {
  margin: 0 auto;
  width: fit-content;
  color: white;
  font-weight: 1000;
  letter-spacing: -.075em;
  line-height: .72;
  text-shadow: 0 6px 16px rgba(20,54,48,.16);
  transform: rotate(-1deg);
}

.paws-line,
.leaves-line {
  display: block;
  font-size: clamp(3rem, 14vw, 6rem);
}

.paws-line small {
  display: inline-block;
  font-size: .32em;
  letter-spacing: -.02em;
  margin-left: -.16em;
  vertical-align: middle;
  transform: translateY(-.32em);
}

.leaves-line {
  margin-top: .18em;
}

.tale-strip {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 2.35rem;
  margin-top: 1.15rem;
  padding: .25rem 1.2rem .35rem;
  background: var(--black);
  color: white;
  font-size: .96rem;
  letter-spacing: .13em;
  border-radius: 10% 3% 8% 4% / 24% 14% 20% 18%;
  transform: rotate(-.7deg);
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}

.tale-strip.small {
  min-height: 1.85rem;
  margin-top: .85rem;
  font-size: .68rem;
  padding-inline: .85rem;
}

.memory-orbit {
  position: absolute;
  width: 8.2rem;
  height: 8.2rem;
  top: 31%;
  right: 9%;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.orbit {
  position: absolute;
  border: 4px solid rgba(255,255,255,.86);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.orbit-a {
  width: 6.4rem;
  height: 6.4rem;
  transform: rotate(24deg);
  animation: orbitA 9s linear infinite;
}

.orbit-b {
  width: 7.5rem;
  height: 7.5rem;
  border-width: 3px;
  opacity: .72;
  transform: rotate(-16deg);
  animation: orbitB 12s linear infinite reverse;
}

.orbit-c {
  width: 5.2rem;
  height: 5.2rem;
  border-width: 2px;
  opacity: .5;
}

.discovery-copy {
  margin-top: auto;
  padding: 2.5rem 1.55rem 1.2rem;
  text-align: center;
  position: relative;
  z-index: 2;
  text-shadow: 0 3px 18px rgba(0,0,0,.3);
}

.micro-label {
  margin: 0 0 .8rem;
  color: rgba(255,255,255,.85);
  font-size: .66rem;
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.discovery-copy h1 {
  margin: 0;
  color: white;
  font-size: clamp(2.9rem, 12vw, 5rem);
  line-height: .92;
  font-weight: 950;
  letter-spacing: -.065em;
}

.intro {
  margin: 1.1rem auto 0;
  max-width: 29rem;
  color: rgba(255,255,255,.86);
  font-size: .96rem;
  line-height: 1.55;
}

.reveal-button {
  position: relative;
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  margin: 1.55rem auto 0;
  padding: .8rem 1.3rem .6rem;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  background: rgba(4,33,30,.32);
  backdrop-filter: blur(7px);
  color: white;
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 10px 24px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.1);
  transition: transform .2s ease, background .2s ease;
}

.reveal-button:active {
  transform: scale(.97);
}

.reveal-chevron {
  font-size: 1.35rem;
  line-height: .7;
  color: #a9e8ef;
  animation: chevron 1.7s ease-in-out infinite;
}

.discovery-footer {
  padding:
    .85rem 1rem
    calc(1rem + env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.62);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .13em;
}

.leaf-mark {
  color: white;
  font-size: 1rem;
}

/* ============================================================
   MEMORY SCREEN
   ============================================================ */

.memory-screen {
  min-height: 100svh;
  background:
    linear-gradient(180deg, #d8eee8 0, #eff5ec 38rem, #f4efe5 100%);
  animation: memoryEnter .8s var(--ease) both;
}

.memory-hero {
  min-height: 31rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: white;
}

.memory-hero-bg {
  position: absolute;
  inset: -1.5rem;
  z-index: -3;
  background-image: url("./assets/paws-cover.jpg");
  background-size: cover;
  background-position: center top;
  filter: saturate(.94);
  transform: scale(1.08);
}

.memory-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(
      180deg,
      rgba(7,48,44,.26) 0%,
      rgba(6,40,35,.18) 34%,
      rgba(4,33,29,.72) 100%
    );
}

.memory-header {
  display: grid;
  grid-template-columns: 2.8rem 1fr 2.8rem;
  align-items: center;
  gap: .7rem;
  padding:
    calc(.85rem + env(safe-area-inset-top))
    1rem
    .8rem;
}

.icon-button {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(3,31,28,.2);
  backdrop-filter: blur(7px);
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
}

.mini-brand {
  text-align: center;
  text-shadow: 0 2px 12px rgba(0,0,0,.24);
}

.mini-brand strong {
  display: block;
  font-size: 1.02rem;
  line-height: .9;
  letter-spacing: -.045em;
}

.mini-brand strong small {
  font-size: .48em;
}

.mini-brand span {
  display: block;
  margin-top: .33rem;
  color: rgba(255,255,255,.72);
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.memory-heading {
  position: absolute;
  left: 1.3rem;
  right: 1.3rem;
  bottom: 3.8rem;
  text-align: center;
}

.memory-heading .micro-label {
  color: #b9eff0;
}

.memory-heading h1 {
  margin: 0 auto;
  max-width: 35rem;
  color: white;
  font-size: clamp(2.65rem, 11vw, 4.8rem);
  line-height: .92;
  font-weight: 950;
  letter-spacing: -.06em;
  text-shadow: 0 5px 25px rgba(0,0,0,.25);
}

.memory-sheet {
  position: relative;
  z-index: 3;
  margin-top: -2.4rem;
  padding: 0 1rem 2.5rem;
}

.polaroid-scene {
  position: relative;
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 .65rem;
}

.polaroid-card {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: .7rem .7rem .82rem;
  background:
    linear-gradient(135deg, #fffefa, #eee7d9);
  border-radius: 4px;
  box-shadow:
    0 24px 45px rgba(5,39,33,.24),
    0 4px 10px rgba(5,39,33,.12);
  transform: rotate(-1.1deg);
}

.polaroid-photo {
  overflow: hidden;
  background: #174b43;
  aspect-ratio: 4 / 5;
}

.polaroid-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 46%;
}

.polaroid-card figcaption {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: block;
  width: 100%;
  min-width: 0;
  margin: .58rem 0 0;
  padding: 0 .12rem;
  box-sizing: border-box;
  color: #222;
  text-align: center;
  font-size: clamp(.82rem, 3.5vw, 1.02rem);
  line-height: 1.22;
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
  transform: rotate(.4deg);
}

.ani-mark {
  width: 6.6rem;
  height: 6.6rem;
  position: absolute;
  z-index: 4;
  right: -.1rem;
  top: 2.15rem;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.ani-ring {
  position: absolute;
  border: 3px solid white;
  border-left-color: transparent;
  border-radius: 50%;
  filter: drop-shadow(0 4px 5px rgba(17,64,58,.2));
}

.ring-1 {
  width: 5.5rem;
  height: 5.5rem;
  transform: rotate(20deg);
}

.ring-2 {
  width: 6.4rem;
  height: 6.4rem;
  opacity: .65;
  transform: rotate(-13deg);
}

.ring-3 {
  width: 4.7rem;
  height: 4.7rem;
  opacity: .45;
}

.forest-shadow {
  position: absolute;
  z-index: 1;
  width: 5rem;
  height: 10rem;
  bottom: -1.4rem;
  opacity: .15;
  background:
    linear-gradient(160deg, transparent 42%, var(--forest-deep) 43% 48%, transparent 49%),
    linear-gradient(200deg, transparent 42%, var(--forest-deep) 43% 48%, transparent 49%);
}

.forest-shadow-left {
  left: -1rem;
  transform: rotate(-12deg);
}

.forest-shadow-right {
  right: -1rem;
  transform: scaleX(-1) rotate(-12deg);
}

.memory-content {
  max-width: 34rem;
  margin: 1.8rem auto 0;
  padding: 0 .35rem;
}

.memory-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .7rem;
  justify-content: space-between;
  align-items: center;
  color: #567067;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.memory-id {
  color: var(--fox);
}

.memory-text {
  margin: 1.15rem 0 0;
  color: #243a34;
  font-size: 1.03rem;
  line-height: 1.72;
}

.kept-note {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: .9rem;
  margin: 1.55rem 0 0;
  padding: 1rem;
  border: 1px solid rgba(20,79,68,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.52);
}

.kept-icon {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--fox);
  color: white;
  box-shadow: 0 7px 18px rgba(239,106,50,.24);
}

.kept-note p {
  margin: 0;
  color: #496058;
  font-size: .82rem;
  line-height: 1.55;
}

.memory-actions {
  display: grid;
  gap: .75rem;
  margin-top: 1.4rem;
}

.action {
  min-height: 3.35rem;
  display: grid;
  place-items: center;
  padding: .9rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  font-weight: 900;
  font-size: .86rem;
  cursor: pointer;
}

.action.primary {
  border: 0;
  background: var(--forest);
  color: white;
  box-shadow: 0 12px 24px rgba(9,55,47,.18);
}

.action.secondary {
  border: 1px solid rgba(14,68,58,.19);
  background: rgba(255,255,255,.46);
  color: var(--forest);
}

.site-footer {
  padding:
    2.3rem 1rem
    calc(2.4rem + env(safe-area-inset-bottom));
  text-align: center;
  background: var(--forest-deep);
  color: white;
}

.site-footer p {
  margin: .65rem 0 .35rem;
  font-size: .93rem;
  font-weight: 750;
}

.site-footer span {
  color: rgba(255,255,255,.5);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ============================================================
   LOST MEMORY
   ============================================================ */

.lost-screen {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: white;
  text-align: center;
}

.lost-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(3,34,30,.72), rgba(3,28,25,.92)),
    url("./assets/paws-cover.jpg") center / cover;
  filter: saturate(.5);
}

.lost-content h1 {
  margin: 1.2rem 0 .9rem;
  font-size: clamp(3rem, 12vw, 5rem);
  line-height: .9;
  letter-spacing: -.065em;
}

.lost-content p {
  margin: 0 0 1.7rem;
  color: rgba(255,255,255,.74);
}

/* ============================================================
   MOTION
   ============================================================ */

@keyframes memoryEnter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes orbitA {
  to { transform: rotate(384deg); }
}

@keyframes orbitB {
  to { transform: rotate(344deg); }
}

@keyframes chevron {
  0%,100% {
    opacity: .55;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(4px);
  }
}

@media (min-width: 660px) {
  .memory-sheet {
    padding-inline: 2rem;
  }

  .discovery-copy {
    padding-inline: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .discovery {
    transition: opacity .15s linear !important;
  }
}


/* Cleanup: remove duplicated branding that the cover background already provides */
.discovery-top,
.memory-orbit,
.mini-brand,
.tale-strip.small {
  display: none !important;
}

/* Rebalance spacing after removing the duplicated header branding */
.discovery-copy {
  padding-top: 7.5rem;
}

@media (min-width: 660px) {
  .discovery-copy {
    padding-top: 9rem;
  }
}

/* Cleaner header layout without center brand */
.memory-header {
  grid-template-columns: 2.8rem 1fr 2.8rem;
}

.memory-heading {
  bottom: 5.1rem;
}


/* v2 cleanup: remove duplicate cover overlays and keep header layout balanced */
.mini-brand-spacer {
  width: 100%;
  min-height: 1px;
}


/* ============================================================
   CLEAN COVER-ART INTEGRATION
   The cover already contains the logo, A Lost Tale and Ani.
   Therefore no duplicate HTML branding is rendered on top.
   ============================================================ */

.discovery {
  /* More breathing room at the top now that no overlay logo is needed. */
  padding-top: env(safe-area-inset-top);
}

/* Keep the discovery message in the lower part of the cover,
   away from the artwork's built-in logo/subtitle. */
.discovery-copy {
  padding-top: 3.5rem;
  padding-bottom: 1.35rem;
}

/* Only Back and NFC remain in the memory header. */
.memory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Move the dynamic memory title lower so the original
   cover logo / A Lost Tale artwork can breathe. */
.memory-heading {
  bottom: 2.75rem;
}

/* The hero title no longer needs room for a duplicate A Lost Tale chip. */
.memory-heading h1 {
  margin-bottom: 0;
}

/* Legacy overlay elements are disabled defensively in case
   an older cached HTML version is encountered. */
.discovery-top,
.paws-wordmark,
.memory-orbit,
.mini-brand,
.tale-strip.small,
.ani-mark {
  display: none !important;
}


/* No animated butterfly overlays.
   Butterflies are only shown where they already exist in the cover artwork. */
.butterfly,
.ani-butterfly,
.footer-butterfly {
  display: none !important;
  animation: none !important;
}


/* Social / Community link */
.action.social {
  border: 1px solid rgba(14,68,58,.18);
  background: rgba(85,199,216,.14);
  color: var(--forest);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.action.social:hover,
.action.social:focus-visible {
  background: rgba(85,199,216,.22);
}

/* Social / Community link */
.action.social {
  border: 0;
  background: var(--fox);
  color: #fff;
  box-shadow: 0 12px 24px rgba(239,106,50,.24);
}

.action.social:hover,
.action.social:focus-visible {
  background: #d95a27;
}


/* ============================================================
   CLEAN HEADER
   Remove the broken-looking top-right icon and keep the header clean.
   ============================================================ */
.memory-header {
  justify-content: flex-start;
}

.icon-button {
  margin-right: auto;
}

/* Defensive: if an older cached HTML still contains the old icon, hide it. */
.nfc-dot {
  display: none !important;
}


/* ============================================================
   MEMORY HEADER CLEANUP
   The old circular NFC indicator was decorative only and looked
   like an unrelated floating control, so it has been removed.
   ============================================================ */
.memory-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* ============================================================
   ME PEEKING OVER SOCIAL CTA
   Uses the supplied transparent fox artwork.
   pointer-events:none is intentional: clicks/taps pass through
   the image to the Socials & Community link below.
   ============================================================ */
.social-fox-stage {
  position: relative;
  padding-top: clamp(7.8rem, 30vw, 11.25rem);
  isolation: isolate;
}

.social-fox-stage .action.social {
  position: relative;
  z-index: 2;
}

.social-fox-peek {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 2.15rem;
  width: clamp(13.5rem, 58vw, 20rem);
  max-width: 72%;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none !important;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 10px 15px rgba(9,55,47,.18));
}

/* The paws should visually sit on the top edge of the orange CTA. */
@media (max-width: 430px) {
  .social-fox-stage {
    padding-top: 8.2rem;
  }

  .social-fox-peek {
    width: min(70vw, 17.5rem);
    max-width: 78%;
    bottom: 2.05rem;
  }
}

@media (min-width: 660px) {
  .social-fox-stage {
    padding-top: 10.5rem;
  }

  .social-fox-peek {
    width: 19rem;
    bottom: 2.1rem;
  }
}


/* ============================================================
   ANI — FLYING NPC
   ------------------------------------------------------------
   Ani is intentionally NOT a cursor.
   She moves independently around the app like a companion NPC.
   Every layer is pointer-events:none so no link/button/tap target
   can ever be blocked by the character.
   ============================================================ */

.ani-npc {
  --ani-size: clamp(52px, 12vw, 78px);

  position: fixed;
  z-index: 50;
  left: 0;
  top: 0;
  width: var(--ani-size);
  height: var(--ani-size);
  display: grid;
  place-items: center;

  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;

  opacity: 0;
  transform: translate3d(18px, 110px, 0);
  will-change: transform, opacity;
  transition: opacity .45s ease;
}

.ani-npc.is-ready {
  opacity: .96;
}

.ani-npc-sprite {
  display: block;
  width: 100%;
  height: auto;

  pointer-events: none !important;
  user-select: none;
  -webkit-user-drag: none;

  /* Keep Ani.gif exactly in its original rotation. */
  transform: scaleX(1);
  transform-origin: 50% 50%;
  transition: transform .16s ease-out;

  filter:
    drop-shadow(0 4px 4px rgba(7, 45, 42, .20))
    drop-shadow(0 10px 16px rgba(7, 45, 42, .10));
}

/* On very small screens keep Ani subtle and away from giant UI coverage. */
@media (max-width: 390px) {
  .ani-npc {
    --ani-size: 54px;
  }
}

/* Accessibility: Ani remains present but does not constantly roam when
   the visitor explicitly requests reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .ani-npc {
    left: auto !important;
    top: 5.25rem !important;
    right: 1rem !important;
    transform: none !important;
    transition: opacity .2s linear !important;
  }

}

.fox-peek {
  display: none !important;
}


/* ============================================================
   ME PEEKING OVER SOCIAL CTA
   Small decorative character at the right edge.
   The paws sit on the orange CTA while the ears/head can overlap
   the green Archive button above.
   The PNG never intercepts taps/clicks.
   ============================================================ */
.social-fox-stage {
  position: relative;
  isolation: isolate;
  /* No giant reserved area anymore. The character deliberately
     overlaps the neighbouring buttons instead. */
}

.social-fox-stage .action.social {
  position: relative;
  z-index: 2;
}

.social-fox-peek {
  position: absolute;
  z-index: 5;

  /* Sit at the outer right edge instead of centered. */
  left: auto;
  right: clamp(-10px, -1.4vw, -4px);

  /*
   * The bottom of the artwork is aligned just inside the top edge
   * of the orange button, so the paws visually rest on it.
   */
  bottom: calc(100% - 12px);

  width: clamp(88px, 23vw, 118px);
  max-width: none;
  height: auto;

  transform: rotate(1.5deg);
  transform-origin: 70% 100%;

  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;

  filter: drop-shadow(0 7px 10px rgba(9,55,47,.17));
}

/*
 * On narrow phones move Me a few pixels inward so the ears never
 * get clipped by the viewport edge.
 */
@media (max-width: 430px) {
.social-fox-peek {
    right: -3px;
    width: clamp(84px, 25vw, 105px);
    bottom: calc(100% - 11px);
  }
}

@media (min-width: 660px) {
.social-fox-peek {
    right: -8px;
    width: 118px;
    bottom: calc(100% - 13px);
  }
}


/* ============================================================
   FINAL FOX CTA POSITION
   Keep the current sprite size, but do not distort/offset the
   button text with padding. Me hangs outside the right edge instead.
   ============================================================ */
.social-fox-stage .action.social {
  padding-left: 1.1rem !important;
  padding-right: 1.1rem !important;
  text-align: center;
}

.social-fox-peek {
  width: clamp(88px, 23vw, 118px) !important;
  right: -22px !important;
  bottom: calc(100% - 12px) !important;
  pointer-events: none !important;
}

@media (max-width: 430px) {
  .social-fox-peek {
    width: clamp(84px, 25vw, 105px) !important;
    right: -14px !important;
    bottom: calc(100% - 11px) !important;
  }
}

@media (min-width: 660px) {
  .social-fox-peek {
    width: 118px !important;
    right: -24px !important;
    bottom: calc(100% - 13px) !important;
  }
}


/* Ani keeps the original GIF angle; only horizontal direction changes. */
.ani-npc-sprite {
  transform: scaleX(1) !important;
}

.ani-npc.is-facing-right .ani-npc-sprite {
  transform: scaleX(-1) !important;
}


/* ============================================================
   SOCIAL FOX — COMPACT FINAL POSITION
   Keep right padding for the fox, but never reserve vertical space.
   ============================================================ */
.social-fox-stage {
  position: relative !important;
  isolation: isolate;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

.social-fox-stage .action.social {
  position: relative;
  z-index: 2;
  padding-left: 1.1rem !important;
  padding-right: 5.6rem !important;
  text-align: center;
}

.social-fox-peek {
  width: clamp(88px, 23vw, 118px) !important;
  right: -14px !important;
  bottom: calc(100% - 12px) !important;
  pointer-events: none !important;
}

@media (max-width: 430px) {
  .social-fox-stage {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .social-fox-stage .action.social {
    padding-right: 5.1rem !important;
  }

  .social-fox-peek {
    width: clamp(84px, 25vw, 105px) !important;
    right: -8px !important;
    bottom: calc(100% - 11px) !important;
  }
}

@media (min-width: 660px) {
  .social-fox-stage {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .social-fox-stage .action.social {
    padding-right: 6.2rem !important;
  }

  .social-fox-peek {
    width: 118px !important;
    right: -18px !important;
    bottom: calc(100% - 13px) !important;
  }
}


/* ============================================================
   SOCIAL FOX POSITION V8
   Slightly farther left; all sizing/vertical alignment unchanged.
   ============================================================ */
.social-fox-peek {
  right: 8px !important;
}

@media (max-width: 430px) {
  .social-fox-peek {
    right: 7px !important;
  }
}

@media (min-width: 660px) {
  .social-fox-peek {
    right: 8px !important;
  }
}


/* ============================================================
   SOCIAL FOX POSITION V9
   Keep the CTA text perfectly centered.
   Move ONLY Me farther left.
   ============================================================ */
.social-fox-stage .action.social {
  padding-left: 1.1rem !important;
  padding-right: 1.1rem !important;
  text-align: center !important;
  justify-content: center !important;
}

/* Move Me farther into the button instead of shifting its text. */
.social-fox-peek {
  right: 34px !important;
}

@media (max-width: 430px) {
  .social-fox-stage .action.social {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .social-fox-peek {
    right: 26px !important;
  }
}

@media (min-width: 660px) {
  .social-fox-stage .action.social {
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }

  .social-fox-peek {
    right: 38px !important;
  }
}


/* ============================================================
   POLAROID MEMORY GLOW V10
   A soft magical glow that matches the Paws and Leaves palette:
   - Ani cyan / sky turquoise
   - subtle warm fox-orange accent
   - soft white misty shimmer
   The effect sits behind the Polaroid and keeps the scene readable.
   ============================================================ */
.polaroid-scene {
  isolation: isolate;
}

.polaroid-scene::before,
.polaroid-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* Main ambient aura behind the Polaroid */
.polaroid-scene::before {
  left: 50%;
  top: 52%;
  width: min(88%, 32rem);
  height: min(82%, 28rem);
  transform: translate(-50%, -50%);
  border-radius: 42% 42% 46% 46% / 38% 38% 54% 54%;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.18) 15%,
      rgba(122,220,232,.22) 28%,
      rgba(84,199,216,.20) 40%,
      rgba(84,199,216,.10) 56%,
      rgba(239,106,50,.08) 70%,
      rgba(239,106,50,0) 84%
    );
  filter: blur(26px);
  opacity: .95;
}

/* Secondary shimmer ring / subtle enchanted haze */
.polaroid-scene::after {
  left: 50%;
  top: 49%;
  width: min(78%, 28rem);
  height: min(72%, 24rem);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.08) 26%,
      rgba(84,199,216,.10) 48%,
      rgba(84,199,216,0) 72%
    );
  box-shadow:
    0 0 38px rgba(122,220,232,.18),
    0 0 78px rgba(84,199,216,.12);
  filter: blur(8px);
  opacity: .88;
}

.polaroid-card {
  position: relative;
  z-index: 3;
  box-shadow:
    0 24px 45px rgba(5,39,33,.24),
    0 4px 10px rgba(5,39,33,.12),
    0 0 0 1px rgba(255,255,255,.55),
    0 0 18px rgba(255,255,255,.12),
    0 0 34px rgba(84,199,216,.16),
    0 0 56px rgba(84,199,216,.10);
}

/* A tiny highlight pass on the paper itself */
.polaroid-card::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 8px;
  pointer-events: none;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.34),
      rgba(255,255,255,0) 26%,
      rgba(84,199,216,.08) 56%,
      rgba(239,106,50,.06) 100%
    );
  mix-blend-mode: screen;
  opacity: .55;
}

@media (max-width: 430px) {
  .polaroid-scene::before {
    width: 92%;
    height: 74%;
    top: 50%;
    filter: blur(22px);
  }

  .polaroid-scene::after {
    width: 84%;
    height: 66%;
  }

  .polaroid-card {
    box-shadow:
      0 20px 38px rgba(5,39,33,.24),
      0 4px 10px rgba(5,39,33,.12),
      0 0 0 1px rgba(255,255,255,.52),
      0 0 14px rgba(255,255,255,.10),
      0 0 28px rgba(84,199,216,.14);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .polaroid-scene::before {
    animation: memoryGlowPulse 5.8s ease-in-out infinite;
  }

  .polaroid-scene::after {
    animation: memoryGlowDrift 7.4s ease-in-out infinite;
  }
}

@keyframes memoryGlowPulse {
  0%, 100% {
    opacity: .88;
    transform: translate(-50%, -50%) scale(.98);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.03);
  }
}

@keyframes memoryGlowDrift {
  0%, 100% {
    opacity: .82;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: .96;
    transform: translate(-50%, -50%) scale(1.04);
  }
}


/* ============================================================
   NFC ICON FOR MEMORY NOTE V12
   Replace the sparkle with a proper NFC symbol.
   ============================================================ */
.kept-icon.kept-icon-nfc {
  position: relative;
  overflow: hidden;
}

.kept-icon.kept-icon-nfc .nfc-mark,
.kept-icon.kept-icon-nfc .nfc-mark::before,
.kept-icon.kept-icon-nfc .nfc-mark::after {
  position: absolute;
  display: block;
  content: "";
  border: 2px solid rgba(255,255,255,.98);
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.kept-icon.kept-icon-nfc .nfc-mark {
  width: .42rem;
  height: .78rem;
  left: 50%;
  top: 50%;
  transform: translate(-44%, -50%);
}

.kept-icon.kept-icon-nfc .nfc-mark::before {
  width: .72rem;
  height: 1.08rem;
  left: -.22rem;
  top: -.17rem;
  opacity: .84;
}

.kept-icon.kept-icon-nfc .nfc-mark::after {
  width: 1rem;
  height: 1.42rem;
  left: -.36rem;
  top: -.34rem;
  opacity: .64;
}


/* ============================================================
   MEMORY ARCHIVE CTA HOVER V13
   Give the primary archive CTA a clear Paws-style interactive state.
   ============================================================ */
.action {
  transition:
    background-color .22s ease,
    color .22s ease,
    box-shadow .22s ease,
    transform .22s ease,
    border-color .22s ease;
}

.action.primary:hover,
.action.primary:focus-visible {
  background: #176456;
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(9,55,47,.24),
    0 0 0 1px rgba(124,224,221,.20),
    0 0 24px rgba(84,199,216,.18);
}

.action.primary:active {
  transform: translateY(0) scale(.988);
  box-shadow:
    0 8px 18px rgba(9,55,47,.20),
    0 0 0 1px rgba(124,224,221,.16);
}

/* Keyboard users get a visible focus ring without changing layout. */
.action.primary:focus-visible {
  outline: 2px solid rgba(135,231,231,.95);
  outline-offset: 3px;
}


/* ============================================================
   NFC ICON REFINED V14
   Replace the old improvised icon with a cleaner, more standard
   contactless/NFC-style mark.
   ============================================================ */
.kept-icon.kept-icon-nfc {
  position: relative;
  overflow: hidden;
}

.kept-icon.kept-icon-nfc .nfc-mark {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  margin: auto;
}

.kept-icon.kept-icon-nfc .nfc-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: .72rem;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.98);
  border-radius: 999px;
}

.kept-icon.kept-icon-nfc .nfc-mark::before,
.kept-icon.kept-icon-nfc .nfc-mark::after,
.kept-icon.kept-icon-nfc .nfc-line::before,
.kept-icon.kept-icon-nfc .nfc-line::after {
  content: "";
  position: absolute;
  top: 50%;
  border: 2px solid rgba(255,255,255,.98);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

/* outer left arc */
.kept-icon.kept-icon-nfc .nfc-mark::before {
  width: .55rem;
  height: .95rem;
  left: .02rem;
  transform: translateY(-50%) rotate(180deg);
  opacity: .92;
}

/* outer right arc */
.kept-icon.kept-icon-nfc .nfc-mark::after {
  width: .55rem;
  height: .95rem;
  right: .02rem;
  transform: translateY(-50%);
  opacity: .92;
}

/* inner left arc */
.kept-icon.kept-icon-nfc .nfc-line::before {
  width: .34rem;
  height: .64rem;
  left: -.34rem;
  transform: translateY(-50%) rotate(180deg);
  opacity: .82;
}

/* inner right arc */
.kept-icon.kept-icon-nfc .nfc-line::after {
  width: .34rem;
  height: .64rem;
  right: -.34rem;
  transform: translateY(-50%);
  opacity: .82;
}


/* ============================================================
   NFC ICON ASSET V15
   Use the uploaded NFC symbol as a white image inside the orange circle.
   ============================================================ */
.kept-icon.kept-icon-nfc {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.kept-icon.kept-icon-nfc .nfc-symbol-img {
  width: 1.02rem;
  height: 1.02rem;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Disable the previous CSS-constructed NFC mark if cached HTML/CSS mixes. */
.kept-icon.kept-icon-nfc .nfc-mark,
.kept-icon.kept-icon-nfc .nfc-line,
.kept-icon.kept-icon-nfc .nfc-mark::before,
.kept-icon.kept-icon-nfc .nfc-mark::after,
.kept-icon.kept-icon-nfc .nfc-line::before,
.kept-icon.kept-icon-nfc .nfc-line::after {
  display: none !important;
  content: none !important;
}


/* ============================================================
   HERO IMAGE POSITION V16
   Always start hero artwork at the top so logos/title art are
   never cropped away on short/wide displays.
   ============================================================ */
.memory-hero-bg {
  background-position: center top !important;
}


/* ============================================================
   POLAROID SHINY GLOW V17
   The Polaroid should feel like a magical physical memory artifact:
   - soft breathing glow
   - subtle reflective sheen moving across the card
   - very light motion only
   ============================================================ */
.polaroid-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Soft paper highlight layer */
.polaroid-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  pointer-events: none;
  border-radius: 8px;
  background:
    linear-gradient(
      140deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.10) 18%,
      rgba(255,255,255,0) 34%,
      rgba(84,199,216,.06) 58%,
      rgba(239,106,50,.04) 100%
    );
  opacity: .72;
  mix-blend-mode: screen;
}

/* Moving glossy sweep */
.polaroid-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;

  /* Start mostly outside the card so the sweep feels natural. */
  top: -18%;
  bottom: -18%;
  left: -42%;
  width: 32%;

  transform: skewX(-22deg) translateX(0);
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.04) 18%,
      rgba(255,255,255,.18) 48%,
      rgba(255,255,255,.05) 72%,
      rgba(255,255,255,0) 100%
    );
  opacity: .0;
  filter: blur(1px);
}

/* Base glow slightly stronger, still elegant */
.polaroid-card {
  box-shadow:
    0 24px 45px rgba(5,39,33,.24),
    0 4px 10px rgba(5,39,33,.12),
    0 0 0 1px rgba(255,255,255,.55),
    0 0 18px rgba(255,255,255,.14),
    0 0 34px rgba(84,199,216,.18),
    0 0 56px rgba(84,199,216,.12),
    0 0 84px rgba(255,255,255,.06);
}

@media (prefers-reduced-motion: no-preference) {
  .polaroid-card {
    animation: polaroidGlowBreath 5.8s ease-in-out infinite;
  }

  .polaroid-card::before {
    animation: polaroidHighlightDrift 7.6s ease-in-out infinite;
  }

  .polaroid-card::after {
    animation: polaroidShineSweep 8.8s ease-in-out infinite;
  }
}

@keyframes polaroidGlowBreath {
  0%, 100% {
    box-shadow:
      0 24px 45px rgba(5,39,33,.24),
      0 4px 10px rgba(5,39,33,.12),
      0 0 0 1px rgba(255,255,255,.55),
      0 0 18px rgba(255,255,255,.12),
      0 0 30px rgba(84,199,216,.15),
      0 0 50px rgba(84,199,216,.10),
      0 0 72px rgba(255,255,255,.04);
  }
  50% {
    box-shadow:
      0 26px 48px rgba(5,39,33,.25),
      0 4px 10px rgba(5,39,33,.13),
      0 0 0 1px rgba(255,255,255,.58),
      0 0 22px rgba(255,255,255,.18),
      0 0 42px rgba(84,199,216,.22),
      0 0 70px rgba(84,199,216,.14),
      0 0 96px rgba(255,255,255,.08);
  }
}

@keyframes polaroidHighlightDrift {
  0%, 100% {
    opacity: .66;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: .82;
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes polaroidShineSweep {
  0% {
    left: -42%;
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  22% {
    opacity: .65;
  }
  34% {
    opacity: .22;
  }
  45% {
    left: 112%;
    opacity: 0;
  }
  100% {
    left: 112%;
    opacity: 0;
  }
}

@media (max-width: 430px) {
  .polaroid-card::after {
    width: 36%;
  }
}


/* ============================================================
   POLAROID HOLO SHIMMER V18
   Subtle holographic treatment:
   - not full rainbow foil
   - just a gentle iridescent memory-card shimmer
   - keeps the previous glow/shiny feel, but adds a premium holo note
   ============================================================ */
.polaroid-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/*
 * Soft holo film over the card.
 * Very restrained opacity so it reads as "special surface"
 * rather than loud rainbow foil.
 */
.polaroid-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  pointer-events: none;
  border-radius: 8px;

  background:
    linear-gradient(
      130deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.05) 16%,
      rgba(0,0,0,0) 28%
    ),
    linear-gradient(
      118deg,
      rgba(120,228,232,.10) 8%,
      rgba(194,240,220,.07) 24%,
      rgba(255,255,255,0) 38%,
      rgba(255,210,150,.06) 54%,
      rgba(255,179,214,.08) 70%,
      rgba(164,225,255,.09) 86%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      92deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.09) 48%,
      rgba(255,255,255,0) 100%
    );

  mix-blend-mode: screen;
  opacity: .72;
  filter: saturate(1.08);
}

/*
 * Moving sheen / holo sweep.
 * Slightly broader and more iridescent than the previous shine,
 * but still subtle.
 */
.polaroid-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;

  top: -20%;
  bottom: -20%;
  left: -46%;
  width: 38%;

  transform: skewX(-18deg) translateX(0);
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(140,239,234,.05) 18%,
      rgba(255,255,255,.13) 36%,
      rgba(255,193,222,.10) 52%,
      rgba(255,226,174,.07) 67%,
      rgba(255,255,255,.03) 82%,
      rgba(255,255,255,0) 100%
    );
  opacity: 0;
  filter: blur(1.2px) saturate(1.08);
}

/* Slightly richer premium shadow/glow */
.polaroid-card {
  box-shadow:
    0 24px 45px rgba(5,39,33,.24),
    0 4px 10px rgba(5,39,33,.12),
    0 0 0 1px rgba(255,255,255,.56),
    0 0 16px rgba(255,255,255,.12),
    0 0 28px rgba(120,228,232,.12),
    0 0 44px rgba(84,199,216,.12),
    0 0 70px rgba(255,255,255,.05);
}

/* A tiny iridescent aura behind the card */
.polaroid-scene::after {
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.16) 0%,
      rgba(120,228,232,.10) 24%,
      rgba(255,198,218,.06) 46%,
      rgba(255,226,174,.04) 58%,
      rgba(84,199,216,0) 74%
    ) !important;
  box-shadow:
    0 0 34px rgba(120,228,232,.12),
    0 0 72px rgba(255,198,218,.06),
    0 0 92px rgba(255,226,174,.04) !important;
}

@media (prefers-reduced-motion: no-preference) {
  .polaroid-card {
    animation: polaroidHoloBreath 6.2s ease-in-out infinite;
  }

  .polaroid-card::before {
    animation: polaroidHoloFilmShift 9.6s ease-in-out infinite;
  }

  .polaroid-card::after {
    animation: polaroidHoloSweep 8.9s ease-in-out infinite;
  }
}

@keyframes polaroidHoloBreath {
  0%, 100% {
    box-shadow:
      0 24px 45px rgba(5,39,33,.24),
      0 4px 10px rgba(5,39,33,.12),
      0 0 0 1px rgba(255,255,255,.54),
      0 0 14px rgba(255,255,255,.10),
      0 0 24px rgba(120,228,232,.10),
      0 0 38px rgba(84,199,216,.10),
      0 0 58px rgba(255,255,255,.04);
  }
  50% {
    box-shadow:
      0 26px 48px rgba(5,39,33,.25),
      0 4px 10px rgba(5,39,33,.13),
      0 0 0 1px rgba(255,255,255,.58),
      0 0 20px rgba(255,255,255,.16),
      0 0 34px rgba(120,228,232,.14),
      0 0 52px rgba(84,199,216,.14),
      0 0 82px rgba(255,198,218,.06);
  }
}

@keyframes polaroidHoloFilmShift {
  0%, 100% {
    opacity: .66;
    transform: translate3d(0, 0, 0);
    filter: saturate(1.04) hue-rotate(0deg);
  }
  50% {
    opacity: .82;
    transform: translate3d(0, -2px, 0);
    filter: saturate(1.12) hue-rotate(8deg);
  }
}

@keyframes polaroidHoloSweep {
  0% {
    left: -46%;
    opacity: 0;
  }
  12% {
    opacity: 0;
  }
  24% {
    opacity: .58;
  }
  36% {
    opacity: .18;
  }
  48% {
    left: 114%;
    opacity: 0;
  }
  100% {
    left: 114%;
    opacity: 0;
  }
}

@media (max-width: 430px) {
  .polaroid-card::after {
    width: 40%;
  }
}


/* ============================================================
   POLAROID HOLO BOOST + WOBBLE V19
   Stronger effect than v18, but still tasteful.
   ============================================================ */
.polaroid-card {
  transform-origin: 50% 78%;
}

/* Make the holo film a bit more present. */
.polaroid-card::before {
  opacity: .86 !important;
  filter: saturate(1.18) !important;
  background:
    linear-gradient(
      132deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.08) 15%,
      rgba(0,0,0,0) 28%
    ),
    linear-gradient(
      118deg,
      rgba(120,228,232,.14) 6%,
      rgba(194,240,220,.10) 22%,
      rgba(255,255,255,0) 38%,
      rgba(255,210,150,.08) 52%,
      rgba(255,179,214,.12) 68%,
      rgba(164,225,255,.13) 84%,
      rgba(255,255,255,0) 100%
    ),
    linear-gradient(
      94deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.12) 50%,
      rgba(255,255,255,0) 100%
    ) !important;
}

/* Make the sweep broader and a touch brighter. */
.polaroid-card::after {
  width: 44% !important;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(140,239,234,.08) 16%,
      rgba(255,255,255,.18) 34%,
      rgba(255,193,222,.14) 52%,
      rgba(255,226,174,.10) 66%,
      rgba(255,255,255,.05) 82%,
      rgba(255,255,255,0) 100%
    ) !important;
  filter: blur(1px) saturate(1.16) !important;
}

/* Slightly stronger aura around the scene. */
.polaroid-scene::before {
  opacity: 1 !important;
  filter: blur(30px) saturate(1.08) !important;
}

.polaroid-scene::after {
  opacity: .96 !important;
}

/* Give the card itself a bit more premium glow. */
.polaroid-card {
  box-shadow:
    0 28px 52px rgba(5,39,33,.26),
    0 6px 12px rgba(5,39,33,.13),
    0 0 0 1px rgba(255,255,255,.58),
    0 0 18px rgba(255,255,255,.16),
    0 0 34px rgba(120,228,232,.16),
    0 0 56px rgba(84,199,216,.16),
    0 0 92px rgba(255,198,218,.08) !important;
}

@media (prefers-reduced-motion: no-preference) {
  .polaroid-card {
    animation:
      polaroidHoloBreathV19 6.1s ease-in-out infinite,
      polaroidGentleWobble 7.2s ease-in-out infinite !important;
  }

  .polaroid-card::before {
    animation: polaroidHoloFilmShiftV19 8.6s ease-in-out infinite !important;
  }

  .polaroid-card::after {
    animation: polaroidHoloSweepV19 7.8s ease-in-out infinite !important;
  }

  .polaroid-scene::before {
    animation: memoryAuraPulseV19 6.8s ease-in-out infinite !important;
  }
}

@keyframes polaroidGentleWobble {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-0.35deg);
  }
  25% {
    transform: translate3d(0, -2px, 0) rotate(0.18deg);
  }
  50% {
    transform: translate3d(0, -4px, 0) rotate(0.55deg);
  }
  75% {
    transform: translate3d(0, -1px, 0) rotate(0deg);
  }
}

@keyframes polaroidHoloBreathV19 {
  0%, 100% {
    box-shadow:
      0 24px 46px rgba(5,39,33,.24),
      0 4px 10px rgba(5,39,33,.12),
      0 0 0 1px rgba(255,255,255,.56),
      0 0 16px rgba(255,255,255,.12),
      0 0 28px rgba(120,228,232,.12),
      0 0 44px rgba(84,199,216,.12),
      0 0 72px rgba(255,255,255,.05);
  }
  50% {
    box-shadow:
      0 30px 56px rgba(5,39,33,.28),
      0 6px 12px rgba(5,39,33,.14),
      0 0 0 1px rgba(255,255,255,.60),
      0 0 22px rgba(255,255,255,.18),
      0 0 40px rgba(120,228,232,.20),
      0 0 66px rgba(84,199,216,.18),
      0 0 110px rgba(255,198,218,.10);
  }
}

@keyframes polaroidHoloFilmShiftV19 {
  0%, 100% {
    opacity: .74;
    transform: translate3d(0, 0, 0);
    filter: saturate(1.10) hue-rotate(0deg);
  }
  50% {
    opacity: .92;
    transform: translate3d(0, -3px, 0);
    filter: saturate(1.22) hue-rotate(12deg);
  }
}

@keyframes polaroidHoloSweepV19 {
  0% {
    left: -48%;
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  22% {
    opacity: .68;
  }
  34% {
    opacity: .26;
  }
  48% {
    left: 116%;
    opacity: 0;
  }
  100% {
    left: 116%;
    opacity: 0;
  }
}

@keyframes memoryAuraPulseV19 {
  0%, 100% {
    opacity: .92;
    transform: translate(-50%, -50%) scale(.985);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.03);
  }
}

@media (max-width: 430px) {
  .polaroid-card::after {
    width: 46% !important;
  }

  @keyframes polaroidGentleWobble {
    0%, 100% {
      transform: translate3d(0, 0, 0) rotate(-0.28deg);
    }
    50% {
      transform: translate3d(0, -3px, 0) rotate(0.42deg);
    }
  }
}


/* ============================================================
   POLAROID WOBBLE V20
   Real left-right wobble instead of one-sided drifting.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .polaroid-card {
    animation:
      polaroidHoloBreathV19 6.1s ease-in-out infinite,
      polaroidGentleWobbleV20 7.2s ease-in-out infinite !important;
  }
}

@keyframes polaroidGentleWobbleV20 {
  0%, 100% {
    transform: translate3d(0px, 0px, 0) rotate(0deg);
  }
  20% {
    transform: translate3d(-1.5px, -2px, 0) rotate(-0.45deg);
  }
  40% {
    transform: translate3d(1.25px, -4px, 0) rotate(0.42deg);
  }
  60% {
    transform: translate3d(2px, -2px, 0) rotate(0.28deg);
  }
  80% {
    transform: translate3d(-1.25px, -1px, 0) rotate(-0.32deg);
  }
}

@media (max-width: 430px) {
  @keyframes polaroidGentleWobbleV20 {
    0%, 100% {
      transform: translate3d(0px, 0px, 0) rotate(0deg);
    }
    25% {
      transform: translate3d(-1.2px, -1.5px, 0) rotate(-0.34deg);
    }
    50% {
      transform: translate3d(1.2px, -3px, 0) rotate(0.38deg);
    }
    75% {
      transform: translate3d(-1px, -1px, 0) rotate(-0.24deg);
    }
  }
}


/* ============================================================
   INNER PHOTO MOTION V21
   Harry-Potter-style living-photo feeling:
   - the Polaroid object stays stable
   - only the image inside the Polaroid moves subtly
   ============================================================ */

.polaroid-photo {
  overflow: hidden;
}

/* Keep the physical card stable again. */
@media (prefers-reduced-motion: no-preference) {
  .polaroid-card {
    animation: polaroidHoloBreathV19 6.1s ease-in-out infinite !important;
    transform: none !important;
  }

  .polaroid-photo img {
    animation: memoryPhotoLivingMotionV21 8.4s ease-in-out infinite !important;
    will-change: transform;
    transform-origin: 50% 50%;
  }
}

@keyframes memoryPhotoLivingMotionV21 {
  0%, 100% {
    transform: scale(1.035) translate3d(0px, 0px, 0);
  }
  18% {
    transform: scale(1.04) translate3d(-4px, -2px, 0);
  }
  36% {
    transform: scale(1.05) translate3d(3px, -4px, 0);
  }
  54% {
    transform: scale(1.045) translate3d(5px, -1px, 0);
  }
  72% {
    transform: scale(1.04) translate3d(-3px, 2px, 0);
  }
  88% {
    transform: scale(1.038) translate3d(1px, 1px, 0);
  }
}

@media (max-width: 430px) {
  @keyframes memoryPhotoLivingMotionV21 {
    0%, 100% {
      transform: scale(1.04) translate3d(0px, 0px, 0);
    }
    25% {
      transform: scale(1.045) translate3d(-3px, -2px, 0);
    }
    50% {
      transform: scale(1.05) translate3d(3px, -3px, 0);
    }
    75% {
      transform: scale(1.043) translate3d(-2px, 2px, 0);
    }
  }
}

/* Reduced motion: keep the inner image still. */
@media (prefers-reduced-motion: reduce) {
  .polaroid-photo img {
    animation: none !important;
    transform: none !important;
  }
}


/* ============================================================
   MEMORY LANDING / INSTRUCTIONS V22
   Plain /memory/ URL + invalid codes.
   Inspired by the physical instruction-card mockup, translated
   into the existing Paws and Leaves web style.
   ============================================================ */
.memory-landing {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  color: #203730;
  background: #efeadd;
}

.landing-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(
      rgba(245,239,224,.90),
      rgba(245,239,224,.96)
    ),
    url("./assets/paws-cover.jpg") center top / cover;
  filter: saturate(.55);
}

.landing-vignette {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.45), transparent 32rem),
    linear-gradient(90deg, rgba(15,60,53,.07), transparent 15%, transparent 85%, rgba(15,60,53,.07));
}

.landing-wrap {
  width: min(100% - 28px, 680px);
  margin: 0 auto;
  padding:
    calc(2rem + env(safe-area-inset-top))
    0
    calc(2.4rem + env(safe-area-inset-bottom));
}

.landing-header {
  text-align: center;
  padding: 1.2rem 1rem 2rem;
}

.landing-kicker {
  margin: 0 0 .7rem;
  color: var(--fox);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .18em;
}

.landing-header h1 {
  margin: 0;
  color: var(--forest);
  font-size: clamp(3rem, 12vw, 5.3rem);
  line-height: .88;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.landing-intro {
  max-width: 31rem;
  margin: 1.15rem auto 0;
  color: #61736c;
  font-size: .93rem;
  line-height: 1.6;
}

.instruction-list {
  position: relative;
  padding: .25rem 1.15rem;
  border: 1px solid rgba(49,66,53,.21);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,251,239,.78), rgba(243,235,214,.78));
  box-shadow:
    0 22px 55px rgba(25,57,49,.10),
    inset 0 0 0 5px rgba(255,255,255,.18);
}

.instruction-step {
  min-height: 12.5rem;
  display: grid;
  grid-template-columns: 3.6rem minmax(0,1fr) 10.25rem;
  gap: 1rem;
  align-items: center;
  padding: 1.45rem .5rem;
}

.step-number {
  width: 3.35rem;
  height: 3.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff8ea;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1;
  box-shadow: 0 9px 18px rgba(15,60,53,.18);
}

.step-copy h2 {
  margin: 0 0 .55rem;
  color: #263c35;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 5vw, 2.25rem);
  line-height: 1.05;
}

.step-copy p {
  margin: 0;
  color: #64736b;
  line-height: 1.55;
  font-size: .87rem;
}

.step-art {
  min-height: 9.5rem;
  position: relative;
  display: grid;
  place-items: center;
}

.step-art::before {
  content: "";
  position: absolute;
  width: 8rem;
  height: 7rem;
  border-radius: 47% 53% 44% 56%;
  background: rgba(85,199,216,.12);
  filter: blur(1px);
  transform: rotate(-7deg);
}

.step-polaroid::before {
  background: rgba(128,151,84,.12);
}

.archive-phone::before {
  background: rgba(153,126,170,.12);
}

.mini-polaroid {
  position: relative;
  z-index: 2;
  width: 6.25rem;
  padding: .48rem .48rem 1.25rem;
  background: #f6efdd;
  border: 1px solid rgba(61,54,39,.5);
  box-shadow: 0 8px 16px rgba(50,55,42,.14);
  transform: rotate(-7deg);
}

.mini-polaroid-photo {
  aspect-ratio: 1 / 1.08;
  background:
    linear-gradient(rgba(10,45,40,.3), rgba(10,45,40,.3)),
    url("./assets/paws-cover.jpg") center / cover;
}

.mini-polaroid-line {
  width: 55%;
  height: 2px;
  margin: .62rem auto 0;
  background: rgba(51,45,34,.36);
}

.spark {
  position: absolute;
  z-index: 3;
  color: var(--fox);
  font-size: 1rem;
}

.spark-a { left: 12%; top: 16%; }
.spark-b { right: 6%; bottom: 14%; }
.spark-c { right: 2%; top: 16%; }

.phone-outline {
  position: relative;
  z-index: 2;
  width: 5.7rem;
  height: 9.2rem;
  display: grid;
  place-items: center;
  border: 3px solid #3a4f48;
  border-radius: 1.3rem;
  background: rgba(255,248,232,.58);
  box-shadow: 0 8px 18px rgba(50,55,42,.12);
}

.phone-notch {
  position: absolute;
  top: .28rem;
  left: 50%;
  width: 2rem;
  height: .28rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(39,55,49,.55);
}

.landing-nfc-symbol {
  position: relative;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
}

.landing-nfc-symbol span {
  position: absolute;
  border: 3px solid var(--forest);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
}

.landing-nfc-symbol span:nth-child(1) { width: .55rem; height: 1rem; }
.landing-nfc-symbol span:nth-child(2) { width: 1.4rem; height: 2rem; opacity: .75; }
.landing-nfc-symbol span:nth-child(3) { width: 2.2rem; height: 2.9rem; opacity: .48; }

.contact-waves {
  position: absolute;
  z-index: 3;
  right: .1rem;
  top: 50%;
  width: 2.7rem;
  height: 5rem;
  transform: translateY(-50%);
}

.contact-waves i {
  position: absolute;
  top: 50%;
  left: 0;
  border: 3px solid var(--fox);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  transform: translateY(-50%);
}

.contact-waves i:nth-child(1) { width: .9rem; height: 1.4rem; }
.contact-waves i:nth-child(2) { width: 1.6rem; height: 2.5rem; opacity: .72; }
.contact-waves i:nth-child(3) { width: 2.4rem; height: 3.8rem; opacity: .45; }

.archive-butterfly {
  font-size: 2.6rem;
  filter: hue-rotate(160deg) saturate(1.4);
}

.memory-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .6rem;
  align-items: center;
  color: var(--fox);
  opacity: .55;
}

.memory-divider span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,60,53,.5), transparent);
}

.memory-divider b {
  font-size: .9rem;
}

.landing-footer-note {
  margin: 1.35rem auto .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  color: #68776f;
  text-align: center;
}

.landing-footer-note p {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .92rem;
  font-style: italic;
}

.leaf-line {
  color: var(--forest);
  opacity: .55;
}

.landing-social {
  min-height: 3.1rem;
  display: grid;
  place-items: center;
  max-width: 26rem;
  margin: 1rem auto 0;
  padding: .8rem 1rem;
  border-radius: 999px;
  background: var(--fox);
  color: white;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(239,106,50,.18);
  transition: transform .2s ease, box-shadow .2s ease;
}

.landing-social:hover,
.landing-social:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(239,106,50,.24);
}

@media (max-width: 560px) {
  .landing-wrap {
    width: min(100% - 18px, 680px);
  }

  .instruction-list {
    padding-inline: .65rem;
  }

  .instruction-step {
    grid-template-columns: 3rem 1fr;
    min-height: auto;
    padding: 1.45rem .35rem 1.2rem;
  }

  .step-number {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.55rem;
    align-self: start;
  }

  .step-art {
    grid-column: 1 / -1;
    min-height: 8.5rem;
    margin-top: .3rem;
  }

  .phone-outline {
    width: 5rem;
    height: 8rem;
  }

  .step-copy h2 {
    font-size: 1.55rem;
  }
}


/* ============================================================
   MEMORIES FOUND V23
   Local per-device archive on the landing page.
   ============================================================ */
.found-memories {
  margin-top: 1.25rem;
  padding: 1.2rem;
  border: 1px solid rgba(15,60,53,.15);
  border-radius: 24px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.68),
      rgba(247,241,225,.72)
    );
  box-shadow: 0 16px 38px rgba(15,60,53,.07);
}

.found-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: .15rem .15rem .9rem;
}

.found-header h2 {
  margin: .18rem 0 0;
  color: var(--forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 6vw, 2.45rem);
  line-height: 1;
}

.found-count {
  flex: 0 0 auto;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: rgba(15,60,53,.08);
  color: #587068;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.found-empty {
  display: grid;
  grid-template-columns: 2.8rem 1fr;
  gap: .85rem;
  align-items: center;
  padding: 1rem;
  border-radius: 16px;
  background: rgba(255,255,255,.52);
  border: 1px dashed rgba(15,60,53,.16);
  color: #597067;
}

.found-empty-icon {
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(239,106,50,.12);
  color: var(--fox);
  font-size: 1rem;
}

.found-empty strong {
  display: block;
  color: #314b43;
  font-size: .88rem;
}

.found-empty p {
  margin: .22rem 0 0;
  font-size: .75rem;
  line-height: 1.45;
}

.found-list {
  display: grid;
  gap: .65rem;
}

.found-card {
  display: grid;
  grid-template-columns: 4.2rem minmax(0,1fr) auto;
  gap: .85rem;
  align-items: center;
  min-height: 5rem;
  padding: .58rem .7rem .58rem .58rem;
  border-radius: 17px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,60,53,.10);
  text-decoration: none;
  color: inherit;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.found-card:hover,
.found-card:focus-visible {
  transform: translateY(-2px);
  background: rgba(255,255,255,.92);
  box-shadow:
    0 10px 24px rgba(15,60,53,.09),
    0 0 0 1px rgba(85,199,216,.08);
}

.found-thumb {
  width: 4.2rem;
  height: 4.2rem;
  overflow: hidden;
  border-radius: 12px;
  background: var(--forest-deep);
  box-shadow: 0 6px 14px rgba(15,60,53,.12);
}

.found-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.found-thumb-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: white;
  background:
    radial-gradient(circle at 50% 35%, #55c7d8, #0f3c35 72%);
}

.found-card-copy {
  min-width: 0;
}

.found-label {
  display: block;
  margin-bottom: .18rem;
  color: var(--fox);
  font-size: .56rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.found-card-copy strong {
  display: block;
  overflow: hidden;
  color: #29433b;
  font-size: .88rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.found-card-copy small {
  display: block;
  margin-top: .28rem;
  color: #7a8881;
  font-size: .63rem;
}

.found-arrow {
  color: var(--forest);
  font-size: 1.15rem;
  opacity: .55;
  transition: transform .2s ease;
}

.found-card:hover .found-arrow {
  transform: translateX(2px);
}

.found-local-note {
  margin: .75rem .1rem 0;
  color: #8b958f;
  font-size: .61rem;
  text-align: right;
}

@media (max-width: 430px) {
  .found-memories {
    padding: .9rem;
  }

  .found-card {
    grid-template-columns: 3.7rem minmax(0,1fr) auto;
  }

  .found-thumb {
    width: 3.7rem;
    height: 3.7rem;
  }

  .found-count {
    font-size: .58rem;
  }
}


/* ============================================================
   POLAROID COLLECTION BACKLINK V24
   Visible shortcut from a found memory back to the landing page.
   ============================================================ */
.memory-header {
  position: relative;
  z-index: 6;
}

.collection-link {
  margin-left: auto;
  min-height: 2.7rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .38rem .72rem .38rem .52rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(5,43,38,.42);
  backdrop-filter: blur(8px);
  color: white;
  text-decoration: none;
  box-shadow:
    0 8px 20px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.collection-link:hover,
.collection-link:focus-visible {
  transform: translateY(-2px);
  background: rgba(9,76,65,.62);
  box-shadow:
    0 12px 26px rgba(0,0,0,.18),
    0 0 20px rgba(85,199,216,.12);
}

.collection-link:active {
  transform: translateY(0) scale(.98);
}

.collection-stack {
  position: relative;
  width: 2rem;
  height: 1.7rem;
  flex: 0 0 auto;
}

.collection-polaroid {
  position: absolute;
  width: 1.22rem;
  height: 1.48rem;
  background: #f5efe2;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
}

.collection-polaroid::before {
  content: "";
  position: absolute;
  left: .13rem;
  right: .13rem;
  top: .13rem;
  height: .84rem;
  background:
    linear-gradient(rgba(8,52,46,.14), rgba(8,52,46,.14)),
    url("./assets/paws-cover.jpg") center / cover;
  border-radius: 1px;
}

.collection-polaroid.p1 {
  left: .05rem;
  top: .15rem;
  transform: rotate(-12deg);
}

.collection-polaroid.p2 {
  left: .42rem;
  top: .04rem;
  transform: rotate(4deg);
}

.collection-polaroid.p3 {
  right: .02rem;
  top: .12rem;
  transform: rotate(12deg);
}

.collection-copy {
  display: grid;
  line-height: .9;
  text-align: left;
}

.collection-copy strong {
  font-size: .72rem;
  letter-spacing: -.02em;
}

.collection-copy small {
  margin-top: .23rem;
  color: rgba(255,255,255,.72);
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 520px) {
  .collection-link {
    min-width: 2.8rem;
    padding: .42rem;
    justify-content: center;
  }

  .collection-copy {
    display: none;
  }

  .collection-stack {
    width: 2rem;
    height: 1.7rem;
  }
}

@media (max-width: 360px) {
  .collection-link {
    padding: .35rem;
  }

  .collection-stack {
    transform: scale(.9);
  }
}





/* ============================================================
   LOCAL MEMORY TEST TOOLS V26
   ============================================================ */
.found-debug-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid rgba(15,60,53,.10);
}

.clear-found-button {
  appearance: none;
  border: 1px solid rgba(185,63,56,.18);
  border-radius: 999px;
  padding: .55rem .8rem;
  background: rgba(250,236,234,.72);
  color: #a5423c;
  font: inherit;
  font-size: .68rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.clear-found-button:hover,
.clear-found-button:focus-visible {
  transform: translateY(-1px);
  background: rgba(250,225,222,.92);
  border-color: rgba(185,63,56,.28);
}

.found-debug-tools small {
  color: #98a29d;
  font-size: .58rem;
  text-align: right;
}

@media (max-width: 430px) {
  .found-debug-tools {
    align-items: flex-start;
    flex-direction: column;
  }

  .found-debug-tools small {
    text-align: left;
  }
}


/* ============================================================
   FIRST FIND — INLINE COLLECTION EFFECT V27
   Lives directly above the NFC / saved-memory hint.
   ============================================================ */
.collection-added-inline {
  position: relative;
  display: grid;
  grid-template-columns: 7rem minmax(0,1fr);
  gap: .9rem;
  align-items: center;
  margin: 1.35rem 0 .85rem;
  padding: .9rem 1rem;
  overflow: hidden;

  border: 1px solid rgba(85,199,216,.23);
  border-radius: 18px;

  background:
    radial-gradient(circle at 16% 45%, rgba(85,199,216,.17), transparent 7rem),
    linear-gradient(
      135deg,
      rgba(255,255,255,.78),
      rgba(235,247,240,.80)
    );

  box-shadow:
    0 12px 26px rgba(15,60,53,.09),
    0 0 28px rgba(85,199,216,.07);

  opacity: 0;
  transform: translateY(8px);
}

.collection-added-inline.is-playing {
  animation: inlineCollectionPanelIn .42s ease forwards;
}

.collection-added-inline.is-settled {
  opacity: 1;
  transform: translateY(0);
}

.inline-collection-visual {
  position: relative;
  width: 6.4rem;
  height: 4.8rem;
}

.inline-new-polaroid {
  position: absolute;
  z-index: 4;
  left: .1rem;
  top: .35rem;
  width: 2.65rem;
  padding: .18rem .18rem .65rem;

  background: #fff9ed;
  border-radius: 2px;

  box-shadow:
    0 6px 13px rgba(14,56,48,.18),
    0 0 12px rgba(85,199,216,.10);

  transform: rotate(-8deg);
  transform-origin: 50% 90%;
}

.inline-new-polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--forest);
}

.inline-polaroid-stack {
  position: absolute;
  z-index: 3;
  right: .1rem;
  top: .55rem;
  width: 3.9rem;
  height: 3.8rem;
}

.inline-polaroid-stack::before {
  content: "";
  position: absolute;
  inset: -.55rem;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(85,199,216,.17),
      rgba(85,199,216,0) 70%
    );
}

.inline-polaroid-stack i {
  position: absolute;
  width: 2rem;
  height: 2.55rem;
  padding: .13rem .13rem .55rem;

  background: #fff9ed;
  box-shadow: 0 4px 9px rgba(14,56,48,.14);
}

.inline-polaroid-stack i::before {
  content: "";
  display: block;
  width: 100%;
  height: 1.55rem;

  background:
    linear-gradient(rgba(8,52,46,.14), rgba(8,52,46,.14)),
    url("./assets/paws-cover.jpg") center / cover;
}

.inline-polaroid-stack i:nth-child(1) {
  left: .1rem;
  top: .5rem;
  transform: rotate(-13deg);
}

.inline-polaroid-stack i:nth-child(2) {
  left: .85rem;
  top: .15rem;
  transform: rotate(1deg);
}

.inline-polaroid-stack i:nth-child(3) {
  right: .05rem;
  top: .5rem;
  transform: rotate(13deg);
}

.inline-collection-copy {
  min-width: 0;
}

.inline-collection-copy span {
  display: block;
  margin-bottom: .24rem;

  color: var(--fox);
  font-size: .58rem;
  font-weight: 950;
  letter-spacing: .15em;
}

.inline-collection-copy strong {
  display: block;

  color: #29473e;
  font-size: .9rem;
  line-height: 1.25;
}

.collection-added-inline.is-playing .inline-new-polaroid {
  animation:
    inlinePolaroidToCollection 1.1s
    cubic-bezier(.24,.77,.25,1)
    forwards;
}

.collection-added-inline.is-playing .inline-polaroid-stack {
  animation:
    inlineStackPop .9s .2s
    cubic-bezier(.22,.8,.22,1)
    both;
}

.collection-added-inline.is-playing .inline-collection-copy {
  animation:
    inlineCollectionCopyIn .55s .52s
    ease both;
}

@keyframes inlineCollectionPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes inlinePolaroidToCollection {
  0% {
    opacity: 0;
    transform:
      translate(-12px, 9px)
      rotate(-10deg)
      scale(.78);
  }

  22% {
    opacity: 1;
    transform:
      translate(0, 0)
      rotate(-6deg)
      scale(1);
  }

  70% {
    opacity: 1;
    transform:
      translate(29px, -3px)
      rotate(6deg)
      scale(.78);
  }

  100% {
    opacity: 0;
    transform:
      translate(43px, -5px)
      rotate(10deg)
      scale(.55);
  }
}

@keyframes inlineStackPop {
  0% {
    opacity: .45;
    transform: scale(.88);
  }
  55% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes inlineCollectionCopyIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 430px) {
  .collection-added-inline {
    grid-template-columns: 5.6rem minmax(0,1fr);
    padding: .8rem .85rem;
  }

  .inline-collection-visual {
    width: 5.1rem;
    transform: scale(.88);
    transform-origin: left center;
  }

  .inline-collection-copy strong {
    font-size: .82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .collection-added-inline.is-playing {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .collection-added-inline.is-playing .inline-new-polaroid {
    animation: none;
    opacity: 0;
  }

  .collection-added-inline.is-playing .inline-polaroid-stack,
  .collection-added-inline.is-playing .inline-collection-copy {
    animation: none;
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   COLLECTION NAVIGATION V29
   Safe rebuild based on v27.
   ============================================================ */

/* Inline first-find card is a real link to the Collection. */
.collection-added-inline {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.collection-added-inline.is-settled:hover,
.collection-added-inline.is-settled:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(85,199,216,.42);
  box-shadow:
    0 16px 32px rgba(15,60,53,.12),
    0 0 28px rgba(85,199,216,.12);
}

.collection-added-inline:focus-visible {
  outline: 3px solid rgba(85,199,216,.28);
  outline-offset: 3px;
}

.inline-collection-arrow {
  display: block;
  margin-top: .34rem;
  color: #4b7167;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .02em;
}

.collection-added-inline:hover .inline-collection-arrow {
  color: var(--forest);
}

/* Collection shortcut remains visible while scrolling on memory pages. */
.collection-link {
  position: fixed !important;
  z-index: 9000 !important;
  top: calc(.85rem + env(safe-area-inset-top));
  right: calc(.85rem + env(safe-area-inset-right));
  margin-left: 0 !important;

  background: rgba(7,47,41,.78) !important;
  border-color: rgba(255,255,255,.38) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.20),
    0 0 0 1px rgba(85,199,216,.08),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.collection-link:hover,
.collection-link:focus-visible {
  background: rgba(9,76,65,.92) !important;
}

@media (max-width: 520px) {
  .collection-link {
    top: calc(.65rem + env(safe-area-inset-top));
    right: calc(.65rem + env(safe-area-inset-right));
  }

  .inline-collection-arrow {
    font-size: .58rem;
  }
}


/* ============================================================
   FIRST FIND TOP PLACEMENT V30
   Confirmation now appears before the main memory image.
   No automatic scroll-to-effect.
   ============================================================ */
#memoryScreen > .collection-added-inline {
  width: min(calc(100% - 2rem), 760px);
  margin:
    calc(.8rem + env(safe-area-inset-top))
    auto
    1rem;
}

#memoryScreen > .collection-added-inline + * {
  scroll-margin-top: 0;
}

@media (max-width: 520px) {
  #memoryScreen > .collection-added-inline {
    width: min(calc(100% - 1rem), 760px);
    margin-top: .6rem;
    margin-bottom: .75rem;
  }
}


/* ============================================================
   OPTIONAL MAGIC-LINK ACCOUNT V32
   ============================================================ */
.collection-account {
  position: relative;
  margin-top: 1.1rem;
  padding: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(85,199,216,.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(85,199,216,.15), transparent 14rem),
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(238,246,239,.76));
  box-shadow: 0 16px 38px rgba(15,60,53,.07);
}

.account-cloud {
  position: absolute;
  right: 1rem;
  top: .75rem;
  color: rgba(85,199,216,.24);
  font-size: 3.4rem;
  line-height: 1;
}

.account-copy {
  position: relative;
  z-index: 1;
  max-width: 31rem;
}

.account-copy h2 {
  margin: .18rem 0 .55rem;
  color: var(--forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 6vw, 2.45rem);
  line-height: 1;
}

.account-copy > p:last-child {
  margin: 0;
  color: #64766e;
  font-size: .8rem;
  line-height: 1.55;
}

.account-login-form {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
}

.account-login-form > label {
  color: #405c53;
  font-size: .68rem;
  font-weight: 900;
}

.account-input-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: .55rem;
}

.account-input-row input {
  min-width: 0;
  min-height: 3rem;
  border: 1px solid rgba(15,60,53,.16);
  border-radius: 999px;
  padding: .72rem 1rem;
  background: rgba(255,255,255,.9);
  color: #203730;
  font: inherit;
  outline: none;
}

.account-input-row input:focus {
  border-color: rgba(85,199,216,.7);
  box-shadow: 0 0 0 3px rgba(85,199,216,.13);
}

.account-primary-button {
  border: 0;
  border-radius: 999px;
  padding: .7rem 1rem;
  background: var(--forest);
  color: white;
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  cursor: pointer;
}

.account-primary-button:disabled {
  opacity: .55;
  cursor: wait;
}

.account-privacy-copy {
  margin: 0 .2rem;
  color: #84918b;
  font-size: .61rem;
  line-height: 1.5;
}

.account-privacy-copy a {
  color: #56746a;
  font-weight: 800;
}

.account-message {
  margin-top: .8rem;
  padding: .75rem .85rem;
  border-radius: 13px;
  background: rgba(85,199,216,.11);
  color: #31564d;
  font-size: .72rem;
  line-height: 1.45;
}

.account-message.is-error {
  background: rgba(185,63,56,.09);
  color: #963c36;
}

.account-saved {
  display: grid;
  gap: .85rem;
  margin-top: 1rem;
  padding: .9rem;
  border-radius: 17px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(15,60,53,.1);
}

.account-saved-status {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.account-check {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(15,60,53,.1);
  color: var(--forest);
  font-size: 1rem;
  font-weight: 950;
}

.account-saved-status strong,
.account-saved-status span:last-child {
  display: block;
}

.account-saved-status strong {
  color: #28483e;
  font-size: .86rem;
}

#accountEmailDisplay {
  margin-top: .18rem;
  color: #7a8b84;
  font-size: .65rem;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.account-link-button {
  appearance: none;
  border: 1px solid rgba(15,60,53,.12);
  border-radius: 999px;
  padding: .48rem .7rem;
  background: rgba(238,244,239,.88);
  color: #31564d;
  text-decoration: none;
  font: inherit;
  font-size: .62rem;
  font-weight: 850;
  cursor: pointer;
}

.account-link-button.danger {
  border-color: rgba(185,63,56,.14);
  background: rgba(250,236,234,.72);
  color: #a5423c;
}

.account-saved > small {
  color: #909c96;
  font-size: .57rem;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .account-input-row {
    grid-template-columns: 1fr;
  }

  .account-primary-button {
    min-height: 2.8rem;
  }

  .account-cloud {
    font-size: 2.8rem;
  }
}


/* ============================================================
   LANDING PEEKING FOX V33
   Reuses the existing Social & Community fox asset.
   ============================================================ */
.instruction-list {
  overflow: visible;
}

.landing-peek-fox {
  position: absolute;
  z-index: 5;
  left: 1.15rem;
  top: -4.9rem;

  width: clamp(92px, 18vw, 132px);
  height: auto;

  pointer-events: none;
  user-select: none;

  filter: drop-shadow(0 8px 10px rgba(15,60,53,.12));
}

@media (max-width: 560px) {
  .landing-peek-fox {
    left: .8rem;
    top: -4rem;
    width: clamp(78px, 23vw, 104px);
  }
}

@media (max-width: 390px) {
  .landing-peek-fox {
    left: .6rem;
    top: -3.6rem;
    width: 82px;
  }
}


/* ============================================================
   OPTIONAL CUSTOM MEMORY LINK V36
   ============================================================ */
.custom-memory-link {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #ffffff;
  backdrop-filter: blur(6px);
}

.custom-memory-link:hover,
.custom-memory-link:focus-visible {
  background: rgba(255,255,255,.19);
  border-color: rgba(255,255,255,.32);
  transform: translateY(-2px);
}


/* ============================================================
   EVENT MEMORY SUBMISSION V37
   ============================================================ */
.account-submission-entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  padding: .8rem;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(85,199,216,.08), rgba(239,106,50,.06));
  border: 1px solid rgba(15,60,53,.09);
}

.account-submission-entry strong,
.account-submission-entry span {
  display: block;
}

.account-submission-entry strong {
  color: #29483f;
  font-size: .78rem;
}

.account-submission-entry span {
  margin-top: .18rem;
  color: #7a8983;
  font-size: .62rem;
  line-height: 1.4;
}

.memory-submit-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.memory-submit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4,31,27,.58);
  backdrop-filter: blur(6px);
}

.memory-submit-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  max-height: min(90svh, 760px);
  overflow-y: auto;
  padding: 1.3rem;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(85,199,216,.13), transparent 13rem),
    #f7f2e7;
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
}

.memory-submit-close {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(15,60,53,.08);
  color: #36554c;
  font-size: 1.2rem;
  cursor: pointer;
}

.memory-submit-head h2 {
  margin: .2rem 0 .45rem;
  color: var(--forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
}

.memory-submit-head > p:last-child {
  margin: 0 0 1rem;
  color: #6b7b74;
  font-size: .75rem;
}

.submit-code-stage,
.submission-form-stage,
#memorySubmissionForm {
  display: grid;
  gap: .8rem;
}

.submit-code-stage label,
#memorySubmissionForm label {
  display: grid;
  gap: .35rem;
}

.submit-code-stage label > span,
#memorySubmissionForm label > span {
  color: #405c53;
  font-size: .66rem;
  font-weight: 900;
}

.submit-code-stage input,
#memorySubmissionForm input,
#memorySubmissionForm textarea {
  width: 100%;
  border: 1px solid rgba(15,60,53,.16);
  border-radius: 13px;
  padding: .75rem .8rem;
  background: rgba(255,255,255,.88);
  color: #203730;
  font: inherit;
  outline: none;
}

.submit-code-stage input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#memorySubmissionForm textarea {
  min-height: 9rem;
  resize: vertical;
}

#memorySubmissionForm small {
  color: #87948e;
  font-size: .58rem;
}

.submission-event-badge {
  width: fit-content;
  margin-bottom: .2rem;
  padding: .38rem .62rem;
  border-radius: 999px;
  background: rgba(239,106,50,.1);
  color: var(--fox);
  font-size: .6rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.submission-result {
  margin-top: .9rem;
  padding: .8rem;
  border-radius: 13px;
  background: rgba(85,199,216,.1);
  color: #31564d;
  font-size: .7rem;
  line-height: 1.5;
}

.submission-result.is-error {
  background: rgba(185,63,56,.09);
  color: #963c36;
}

body.submit-modal-open {
  overflow: hidden;
}

@media(max-width:520px){
  .account-submission-entry {
    align-items: flex-start;
    flex-direction: column;
  }

  .memory-submit-dialog {
    padding: 1rem;
  }
}


/* COMMUNITY MEMORIES V38 */
.community-memory-badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .85rem;
  padding: .42rem .68rem;
  border: 1px solid rgba(239,106,50,.22);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(239,106,50,.12), rgba(85,199,216,.10));
}
.community-memory-badge > span {
  color: var(--fox);
  font-size: .6rem;
  font-weight: 950;
  letter-spacing: .14em;
}
.community-memory-badge > small {
  color: #667a71;
  font-size: .58rem;
  font-weight: 750;
}
.found-community-tag {
  display: inline-flex;
  width: fit-content;
  margin: .22rem 0;
  padding: .18rem .36rem;
  border-radius: 999px;
  background: rgba(239,106,50,.10);
  color: var(--fox);
  font-size: .49rem;
  font-weight: 950;
  letter-spacing: .10em;
}
.found-community-event {
  color: #657a71 !important;
  font-weight: 750;
}


/* ============================================================
   LANDING PEEKING FOX MOBILE FIX V40
   ============================================================ */

/*
 * Desktop keeps the original "peeking over the panel" placement.
 * On mobile the fox becomes smaller and sits partly INSIDE the panel.
 * This prevents overlap with the landing headline / intro while keeping
 * the same playful "peeking over the edge" effect.
 */
@media (max-width: 560px) {
  .instruction-list {
    position: relative;
    overflow: visible;
  }

  .landing-peek-fox {
    left: 14px;
    top: -28px;
    width: 72px;
    max-width: 72px;
  }

  /*
   * Give the first instruction enough breathing room so the fox never
   * covers the step number or copy.
   */
  .instruction-list > .instruction-step:first-of-type {
    padding-top: 2.15rem;
  }
}

@media (max-width: 390px) {
  .landing-peek-fox {
    left: 12px;
    top: -24px;
    width: 64px;
    max-width: 64px;
  }

  .instruction-list > .instruction-step:first-of-type {
    padding-top: 1.95rem;
  }
}


/* ============================================================
   COLLECTION BROWSER V41
   ============================================================ */

.collection-latest .found-list {
  display: grid;
  gap: .6rem;
}

.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.collection-count {
  flex: 0 0 auto;
  margin-bottom: .25rem;
  color: #82908a;
  font-size: .62rem;
  font-weight: 800;
}

.collection-browser {
  margin-top: 1.1rem;
  padding: 1.15rem;
  border: 1px solid rgba(15,60,53,.09);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(85,199,216,.10), transparent 14rem),
    rgba(255,255,255,.58);
  box-shadow: 0 16px 38px rgba(15,60,53,.05);
}

.collection-browser-heading h2 {
  margin: .18rem 0 .35rem;
  color: var(--forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 5vw, 2.15rem);
  line-height: 1;
}

.collection-browser-intro {
  margin: 0;
  color: #74847d;
  font-size: .7rem;
  line-height: 1.5;
}

.collection-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1rem;
}

.collection-search-icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: #84928c;
  font-size: 1rem;
  pointer-events: none;
}

.collection-search {
  width: 100%;
  min-height: 2.85rem;
  padding: .68rem 4.1rem .68rem 2.3rem;
  border: 1px solid rgba(15,60,53,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.84);
  color: #203730;
  font: inherit;
  font-size: .72rem;
  outline: none;
}

.collection-search:focus {
  border-color: rgba(85,199,216,.65);
  box-shadow: 0 0 0 3px rgba(85,199,216,.11);
}

.collection-search-clear {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  padding: .4rem .55rem;
  background: rgba(15,60,53,.07);
  color: #567168;
  font: inherit;
  font-size: .58rem;
  font-weight: 850;
  cursor: pointer;
}

.collection-browser-status {
  min-height: 1.1rem;
  margin: .65rem .2rem .45rem;
  color: #8a9791;
  font-size: .58rem;
}

.collection-browser-scroll {
  max-height: 430px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(15,60,53,.22) transparent;
  padding-right: .2rem;
}

.collection-browser-scroll::-webkit-scrollbar {
  width: 7px;
}

.collection-browser-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(15,60,53,.18);
}

.collection-browser-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .65rem;
}

.collection-browser-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 78px minmax(0,1fr);
  overflow: hidden;
  border: 1px solid rgba(15,60,53,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  color: inherit;
  text-decoration: none;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.collection-browser-card:hover,
.collection-browser-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(85,199,216,.24);
  box-shadow: 0 10px 24px rgba(15,60,53,.08);
}

.collection-browser-thumb {
  min-height: 88px;
  background: rgba(15,60,53,.06);
}

.collection-browser-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.collection-thumb-placeholder {
  width: 100%;
  height: 100%;
  min-height: 88px;
  display: grid;
  place-items: center;
  color: rgba(15,60,53,.25);
  font-size: 1.3rem;
}

.collection-browser-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .65rem .7rem;
}

.collection-browser-copy strong {
  overflow: hidden;
  color: #29483f;
  font-size: .72rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-browser-copy small {
  margin-top: .16rem;
  color: #87938e;
  font-size: .52rem;
}

.collection-card-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .28rem;
  margin-bottom: .22rem;
}

.collection-card-meta-row .found-label {
  margin: 0;
}

.collection-card-meta-row .found-community-tag {
  margin: 0;
}

.collection-browser-empty {
  display: grid;
  gap: .2rem;
  place-items: center;
  min-height: 7rem;
  color: #718179;
  text-align: center;
}

.collection-browser-empty strong {
  color: #405d54;
  font-size: .8rem;
}

.collection-browser-empty span {
  font-size: .64rem;
}

@media (max-width: 650px) {
  .collection-browser-grid {
    grid-template-columns: 1fr;
  }

  .collection-browser-scroll {
    max-height: 390px;
  }

  .collection-browser-card {
    grid-template-columns: 68px minmax(0,1fr);
  }

  .collection-browser-thumb,
  .collection-thumb-placeholder {
    min-height: 78px;
  }
}

@media (max-width: 390px) {
  .collection-browser {
    padding: .9rem;
  }

  .section-heading-row {
    align-items: flex-start;
  }

  .collection-count {
    margin-top: .18rem;
    white-space: nowrap;
  }
}


/* ============================================================
   FAVORITES V42
   ============================================================ */
.memory-favorite-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .85rem 0 1rem;
  flex-wrap: wrap;
}

.memory-favorite-button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.45rem;
  border: 1px solid rgba(239,106,50,.2);
  border-radius: 999px;
  padding: .48rem .8rem;
  background: rgba(255,255,255,.12);
  color: #ffffff;
  font: inherit;
  font-size: .67rem;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.memory-favorite-button:hover,
.memory-favorite-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(239,106,50,.42);
  background: rgba(239,106,50,.12);
}

.memory-favorite-button.is-favorited {
  background: rgba(239,106,50,.16);
  border-color: rgba(239,106,50,.5);
}

.memory-favorite-button.is-locked {
  opacity: .68;
}

.memory-favorite-button:disabled {
  cursor: wait;
  opacity: .55;
}

.favorite-heart {
  color: #ff9b71;
  font-size: 1.08rem;
  line-height: 1;
}

.memory-favorite-count {
  display: inline-flex;
  align-items: baseline;
  gap: .28rem;
  color: rgba(255,255,255,.78);
}

.memory-favorite-count strong {
  color: #ffffff;
  font-size: .82rem;
}

.memory-favorite-count span {
  font-size: .6rem;
}

.found-favorite-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: rgba(239,106,50,.11);
  color: var(--fox);
  font-size: .62rem;
}

@media(max-width:520px){
  .memory-favorite-wrap {
    gap: .55rem;
  }

  .memory-favorite-button {
    min-height: 2.35rem;
    padding-inline: .72rem;
  }
}


/* ============================================================
   SIGN IN + FAVORITE POLISH V43
   ============================================================ */
.account-code-callout {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: .85rem;
  padding: .72rem .8rem;
  border: 1px dashed rgba(239,106,50,.26);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(239,106,50,.07), rgba(85,199,216,.06));
}

.account-code-icon {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(239,106,50,.11);
  color: var(--fox);
  font-size: .82rem;
  font-weight: 950;
}

.account-code-callout strong,
.account-code-callout span:not(.account-code-icon) {
  display: block;
}

.account-code-callout strong {
  color: #34564c;
  font-size: .68rem;
}

.account-code-callout span:not(.account-code-icon) {
  margin-top: .12rem;
  color: #75857e;
  font-size: .6rem;
  line-height: 1.4;
}

/*
 * The Memory itself often sits on a dark hero.
 * Orange is a stronger Paws accent than plain white for the count.
 */
.memory-favorite-count {
  padding: .38rem .6rem;
  border-radius: 999px;
  background: rgba(8,44,38,.32);
  border: 1px solid rgba(255,173,133,.16);
}

.memory-favorite-count strong {
  color: #ffad85;
}

.memory-favorite-count span {
  color: rgba(242,247,244,.78);
}

.collection-favorite-count {
  display: inline-flex !important;
  align-items: center;
  gap: .25rem;
  width: fit-content;
  margin-top: .24rem !important;
  color: #6c7d75 !important;
  font-weight: 780;
}

.collection-favorite-count > span {
  color: var(--fox);
  font-size: .58rem;
}

@media(max-width:520px){
  .account-code-callout {
    align-items: flex-start;
  }
}


/* ============================================================
   FAVORITE UI CLEANUP V44
   ============================================================ */

/*
 * One single control on the Memory:
 *   ♡ 12  /  ♥ 12
 *
 * Heart represents the current user's state.
 * Number is the public aggregate.
 */
.memory-favorite-wrap {
  margin: .85rem 0 1rem;
}

.memory-favorite-combined {
  min-width: 4.15rem;
  justify-content: center;
  gap: .42rem;
  padding: .48rem .78rem;
  background: rgba(15,60,53,.10);
  border-color: rgba(239,106,50,.22);
}

.memory-favorite-combined .favorite-heart {
  color: var(--fox);
  font-size: 1.08rem;
}

.memory-favorite-combined .favorite-total {
  color: #516b61;
  font-size: .72rem;
  font-weight: 900;
}

.memory-favorite-combined.is-favorited {
  background: rgba(239,106,50,.10);
  border-color: rgba(239,106,50,.38);
}

.memory-favorite-combined.is-favorited .favorite-heart,
.memory-favorite-combined.is-favorited .favorite-total {
  color: var(--fox);
}

/*
 * Override the old v43 standalone count styling.
 * The separate count pill no longer exists.
 */
.memory-favorite-count {
  display: none !important;
}

/*
 * Accessible text helper if the project did not already define one.
 */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*
 * Last 5 Found stays lightweight:
 * only the personal favorite heart marker is shown.
 * Browse Your Collection keeps aggregate counts.
 */
.collection-latest .collection-favorite-count {
  display: none !important;
}


/* ============================================================
   BLUE BUTTERFLY FAVORITES V45
   ============================================================ */

.memory-favorite-combined .favorite-butterfly {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.08rem;
  line-height: 1;
  filter: saturate(.85) hue-rotate(165deg);
  opacity: .5;
  transform: scale(.96);
  transition:
    opacity .18s ease,
    transform .18s ease,
    filter .18s ease;
}

.memory-favorite-combined.is-favorited .favorite-butterfly {
  opacity: 1;
  transform: scale(1.08);
  filter:
    saturate(1.15)
    hue-rotate(165deg)
    drop-shadow(0 0 5px rgba(75,166,225,.28));
}

.memory-favorite-combined .favorite-total {
  color: #527e94;
}

.memory-favorite-combined.is-favorited .favorite-total {
  color: #3f8fbd;
}

.found-favorite-tag {
  background: rgba(75,166,225,.10);
  color: #3f8fbd;
  font-size: .68rem;
}

.collection-favorite-count > span {
  color: #3f8fbd;
  font-size: .66rem;
}

/*
 * Hide any old heart styling inherited from previous versions.
 */
.favorite-heart {
  display: none !important;
}


/* ============================================================
   EVENT COLLECTIONS / TREASURE HUNT V48
   ============================================================ */
.event-collections {
  margin-top: 1.1rem;
  padding: 1.15rem;
  border: 1px solid rgba(15,60,53,.09);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(239,106,50,.08), transparent 14rem),
    rgba(255,255,255,.58);
  box-shadow: 0 16px 38px rgba(15,60,53,.05);
}

.event-collection-list {
  display: grid;
  gap: .7rem;
  margin-top: 1rem;
}

.event-collection-card {
  width: 100%;
  border: 1px solid rgba(15,60,53,.09);
  border-radius: 18px;
  padding: .9rem;
  background: rgba(255,255,255,.76);
  text-align: left;
  cursor: pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.event-collection-card:hover,
.event-collection-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(85,199,216,.25);
  box-shadow: 0 10px 24px rgba(15,60,53,.08);
}

.event-collection-card-top,
.event-collection-meta {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  align-items: center;
}

.event-collection-eyebrow {
  display: block;
  margin-bottom: .2rem;
  color: var(--fox);
  font-size: .5rem;
  font-weight: 950;
  letter-spacing: .12em;
}

.event-collection-card strong {
  color: #29483f;
  font-size: .84rem;
}

.event-collection-percent {
  color: #3f8fbd;
  font-size: .82rem;
  font-weight: 950;
}

.event-progress-track {
  position: relative;
  height: 7px;
  margin: .75rem 0 .55rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15,60,53,.08);
}

.event-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(85,199,216,.95), rgba(239,106,50,.8));
  transition: width .35s ease;
}

.event-collection-meta {
  color: #76867f;
  font-size: .58rem;
}

.event-collection-meta b {
  color: #31564d;
}

.event-collection-empty {
  margin-top: .8rem;
  color: #7d8b85;
  font-size: .7rem;
}

.event-collection-screen {
  min-height: 100svh;
  padding:
    max(1rem, env(safe-area-inset-top))
    1rem
    max(2rem, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 80% 10%, rgba(85,199,216,.15), transparent 24rem),
    linear-gradient(#f7f2e7, #eef4ef);
}

.event-screen-header {
  width: min(100%, 850px);
  margin: 0 auto 1.2rem;
}

.event-back-button {
  border: 0;
  padding: .45rem 0;
  background: transparent;
  color: #526d63;
  font: inherit;
  font-size: .68rem;
  font-weight: 850;
  cursor: pointer;
}

.event-screen-header h1 {
  margin: .25rem 0 .45rem;
  color: var(--forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 8vw, 4rem);
  line-height: .98;
}

.event-screen-header > p:not(.landing-kicker) {
  max-width: 42rem;
  color: #6d7e77;
  line-height: 1.6;
  font-size: .76rem;
}

.event-progress-large {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(15,60,53,.09);
  border-radius: 17px;
  background: rgba(255,255,255,.64);
}

.event-progress-copy {
  display: flex;
  align-items: baseline;
  gap: .4rem;
}

.event-progress-copy strong {
  color: #3f8fbd;
  font-size: 1rem;
}

.event-progress-copy span {
  color: #718179;
  font-size: .62rem;
}

.event-slot-grid {
  width: min(100%, 850px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .8rem;
}

.event-slot-card {
  min-height: 150px;
  overflow: hidden;
  border: 1px solid rgba(15,60,53,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  color: inherit;
  text-decoration: none;
}

.event-slot-found {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
}

.event-slot-image {
  min-height: 150px;
  background: rgba(15,60,53,.07);
}

.event-slot-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.event-slot-image > span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(15,60,53,.22);
}

.event-slot-hidden {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0,1fr);
  background:
    radial-gradient(circle at 0 0, rgba(85,199,216,.10), transparent 9rem),
    rgba(255,255,255,.55);
  border-style: dashed;
}

.event-slot-hidden-mark {
  display: grid;
  place-items: center;
  color: rgba(63,143,189,.35);
  font-family: Georgia, serif;
  font-size: 3rem;
}

.event-slot-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .85rem;
}

.event-slot-number {
  color: #88968f;
  font-size: .49rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.event-slot-copy strong {
  margin-top: .2rem;
  color: #31564d;
  font-size: .82rem;
}

.event-slot-copy small {
  margin-top: .3rem;
  color: #3f8fbd;
  font-size: .55rem;
  font-weight: 850;
}

.event-slot-copy p {
  margin: .45rem 0 0;
  color: #6f8078;
  font-size: .65rem;
  line-height: 1.5;
}

.event-no-hint {
  font-style: italic;
  opacity: .65;
}

.event-loading-card {
  grid-column: 1 / -1;
  min-height: 10rem;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(15,60,53,.12);
  border-radius: 18px;
  color: #73847c;
  background: rgba(255,255,255,.5);
  font-size: .72rem;
}

@media(max-width:650px){
  .event-slot-grid {
    grid-template-columns: 1fr;
  }

  .event-slot-found {
    grid-template-columns: 96px minmax(0,1fr);
  }

  .event-slot-hidden {
    grid-template-columns: 58px minmax(0,1fr);
  }

  .event-slot-card,
  .event-slot-image {
    min-height: 122px;
  }
}


/* ============================================================
   STANDARD + BONUS EVENT MEMORIES V49
   ============================================================ */
.event-bonus-summary {
  display: flex;
  align-items: center;
  gap: .42rem;
  margin-top: .55rem;
  color: #6f8078;
  font-size: .56rem;
}

.event-bonus-summary b {
  color: #8b63aa;
}

.event-bonus-label,
.event-bonus-badge {
  display: inline-flex;
  width: fit-content;
  padding: .17rem .34rem;
  border-radius: 999px;
  background: rgba(139,99,170,.10);
  color: #80579f;
  font-size: .47rem;
  font-weight: 950;
  letter-spacing: .1em;
}

.event-memory-group {
  width: min(100%, 850px);
  margin: 0 auto;
}

.event-memory-group + .event-memory-group {
  margin-top: 1.4rem;
}

.event-group-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: .7rem;
}

.event-group-heading h2 {
  margin: .15rem 0 0;
  color: var(--forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 5vw, 2rem);
}

.event-group-heading > div > p:last-child:not(.landing-kicker) {
  max-width: 38rem;
  margin: .35rem 0 0;
  color: #78877f;
  font-size: .63rem;
  line-height: 1.45;
}

.event-group-heading > span {
  flex: 0 0 auto;
  padding: .3rem .5rem;
  border-radius: 999px;
  background: rgba(15,60,53,.07);
  color: #526f64;
  font-size: .6rem;
  font-weight: 900;
}

.event-bonus-group {
  padding-top: 1.1rem;
  border-top: 1px dashed rgba(139,99,170,.22);
}

.event-bonus-group .event-group-heading > span {
  background: rgba(139,99,170,.09);
  color: #80579f;
}

.event-slot-bonus {
  border-color: rgba(139,99,170,.18);
}

.event-slot-bonus.event-slot-hidden {
  background:
    radial-gradient(circle at 0 0, rgba(139,99,170,.09), transparent 9rem),
    rgba(255,255,255,.55);
}

.event-slot-bonus .event-slot-hidden-mark {
  color: rgba(139,99,170,.32);
}

@media(max-width:520px){
  .event-group-heading {
    align-items: flex-start;
  }
}


/* ============================================================
   EVENT LOGOS V50
   ============================================================ */
.event-collection-card-identity {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
}

.event-collection-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(15,60,53,.045);
}

.event-collection-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  padding: 4px;
}

.event-screen-logo {
  width: min(170px, 45vw);
  max-height: 120px;
  margin: .7rem 0 .45rem;
}

.event-screen-logo img {
  display: block;
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  object-position: left center;
}

@media(max-width:520px){
  .event-collection-logo {
    width: 40px;
    height: 40px;
  }

  .event-screen-logo {
    width: min(145px, 48vw);
  }
}




/* ============================================================
   CUSTOM MEMORY LINK COLOR FIX V52
   ============================================================ */

/*
 * Actual markup:
 *   <a class="action custom-memory-link" id="customMemoryLink">
 *
 * Keep the same dimensions/layout as the other main actions,
 * but give the optional URL its own Paws-blue identity.
 */
#customMemoryLink.action.custom-memory-link {
  background: #62b9ca !important;
  border-color: #62b9ca !important;
  color: #123f47 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  box-shadow:
    0 10px 24px rgba(55, 137, 155, .18),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

#customMemoryLink.action.custom-memory-link:hover,
#customMemoryLink.action.custom-memory-link:focus-visible {
  background: #76c5d3 !important;
  border-color: #76c5d3 !important;
  color: #0c3740 !important;
  opacity: 1 !important;
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(55, 137, 155, .24),
    inset 0 1px 0 rgba(255,255,255,.3) !important;
}

#customMemoryLink.action.custom-memory-link:active {
  background: #54adbe !important;
  border-color: #54adbe !important;
  color: #0c3740 !important;
  transform: translateY(0);
}

/*
 * Preserve the existing hide/show logic.
 */
#customMemoryLink.is-hidden {
  display: none !important;
}


/* ============================================================
   FOUND ROW + HIDDEN MEMORY ID V54
   ============================================================ */

/*
 * The "Memory Found" notice always occupies its own second row.
 * This prevents COMMUNITY/Event/Favorite metadata from pushing it
 * sideways or sharing the same line.
 */
#memoryScreen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

#memoryScreen > .memory-header,
#memoryScreen > header {
  grid-row: 1;
}

#memoryScreen > .found-row,
#memoryScreen .found-row {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  justify-self: stretch;
}

/*
 * Defensive: Memory IDs remain internal and are never shown visually.
 */
#memoryId,
.memory-id,
.memory-meta-id,
.memory-code,
[data-memory-id-visible] {
  display: none !important;
}


/* ============================================================
   FAVORITE HEARTS V55
   ============================================================ */

/*
 * Favorite semantics return to the familiar heart:
 *   ♡ = not favorited
 *   ♥ = favorited
 */
.memory-favorite-combined .favorite-heart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #d67a69;
  font-size: 1.08rem;
  line-height: 1;
  opacity: .72;
  transform: scale(.98);
  transition:
    opacity .18s ease,
    transform .18s ease,
    color .18s ease,
    filter .18s ease;
}

.memory-favorite-combined.is-favorited .favorite-heart {
  color: #e35f4d;
  opacity: 1;
  transform: scale(1.08);
  filter: drop-shadow(0 0 5px rgba(227,95,77,.2));
}

.memory-favorite-combined .favorite-total {
  color: #6b746f;
}

.memory-favorite-combined.is-favorited .favorite-total {
  color: #d55d4e;
}

.found-favorite-tag {
  background: rgba(227,95,77,.09);
  color: #d55d4e;
  font-size: .66rem;
}

.collection-favorite-count > span {
  color: #d55d4e;
  font-size: .62rem;
}

/*
 * Retire the v45 butterfly-only styling from favorite UI.
 */
.favorite-butterfly {
  display: none !important;
}


/* ============================================================
   FIXED YOUR COLLECTION SHORTCUT V56
   ============================================================ */

/*
 * Keep the top-right "Your Collection" shortcut visible at all times,
 * independent of page scroll.
 */
#collectionShortcut,
.collection-shortcut,
.collection-fab,
.your-collection-shortcut {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 12000 !important;
  transform: none;
}

/*
 * Prevent parent transforms/overflow from affecting the visual stacking.
 */
#collectionShortcut {
  isolation: isolate;
}

/*
 * Mobile: keep it compact but still fixed in the same corner.
 */
@media(max-width:560px){
  #collectionShortcut,
  .collection-shortcut,
  .collection-fab,
  .your-collection-shortcut {
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
  }
}


/* ============================================================
   LAST 5 FOUND DATE ROW V57
   ============================================================ */

/*
 * In "Last 5 Found" the found date always sits on a dedicated
 * second text row below the title.
 *
 * Browse Your Collection keeps its existing metadata layout.
 */
.collection-latest .found-date-compact {
  display: block !important;
  width: 100%;
  margin-top: .18rem;
  line-height: 1.25;
}

.collection-latest .found-memory-card .found-card-copy,
.collection-latest .found-memory-card .found-memory-copy,
.collection-latest .found-card-compact .found-card-copy,
.collection-latest .found-card-compact .found-memory-copy {
  min-width: 0;
}

/*
 * Defensive override for inline small/meta styles inherited from
 * the generic collection card.
 */
.collection-latest small.found-date-compact {
  flex-basis: 100%;
  clear: both;
}


/* ============================================================
   TRUE FIXED COLLECTION LINK V59
   ============================================================ */

/*
 * Actual frontend shortcut:
 *   <a class="collection-link">…</a>
 *
 * It is moved to body by app.js and is therefore genuinely
 * viewport-fixed, not header/hero-fixed.
 */
.collection-link,
.collection-link.collection-link-fixed {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 2147483000 !important;
  transform: none !important;
  translate: none !important;
}

/*
 * Keep it above hero overlays, Polaroids and all scrolling content.
 */
body > .collection-link.collection-link-fixed {
  position: fixed !important;
  inset:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    auto
    auto !important;
}

/*
 * Existing responsive dimensions remain, only viewport placement changes.
 */
@media(max-width:560px){
  .collection-link,
  .collection-link.collection-link-fixed,
  body > .collection-link.collection-link-fixed {
    top: max(8px, env(safe-area-inset-top)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
  }
}


/* ============================================================
   POLAROID SHOWCASE EFFECTS V61
   ============================================================ */

.polaroid-scene {
  isolation: isolate;
}

.polaroid-effect-layer,
.polaroid-effect-particles {
  position: absolute;
  inset: -11%;
  z-index: 1;
  pointer-events: none;
}

.polaroid-effect-layer {
  border-radius: 28%;
  opacity: 0;
}

.polaroid-effect-particles {
  z-index: 5;
}

.polaroid-effect-particles i {
  position: absolute;
  display: block;
  opacity: 0;
  pointer-events: none;
}

.polaroid-card {
  position: relative;
  z-index: 3;
}

/* ------------------------------------------------------------
   1. SPIRIT BLOOM
   forest-life aura, turquoise + soft fox-orange breathing light
   ------------------------------------------------------------ */
.effect-spirit-bloom .polaroid-effect-back {
  opacity: 1;
  inset: -16%;
  background:
    radial-gradient(circle at 50% 48%, rgba(130,239,220,.34), transparent 42%),
    radial-gradient(circle at 30% 65%, rgba(239,106,50,.18), transparent 26%),
    conic-gradient(
      from 0deg,
      transparent,
      rgba(118,224,200,.22),
      transparent 24%,
      rgba(239,106,50,.13),
      transparent 54%,
      rgba(118,224,200,.25),
      transparent
    );
  filter: blur(14px);
  animation:
    spiritBloomPulse 4.8s ease-in-out infinite,
    spiritBloomTurn 15s linear infinite;
}

.effect-spirit-bloom .polaroid-card::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: 9px;
  background:
    linear-gradient(
      120deg,
      rgba(179,255,236,.8),
      rgba(255,255,255,.1) 33%,
      rgba(255,176,132,.55) 67%,
      rgba(179,255,236,.8)
    );
  filter: blur(8px);
  opacity: .65;
  animation: spiritEdge 3.8s ease-in-out infinite;
}

.effect-spirit-bloom .polaroid-effect-particles i {
  width: 8px;
  height: 14px;
  border-radius: 70% 30% 70% 30%;
  background: rgba(168,246,224,.86);
  box-shadow: 0 0 10px rgba(111,225,201,.7);
}

.effect-spirit-bloom .polaroid-effect-particles i:nth-child(1){left:8%;top:72%;animation:spiritLeaf 5.2s ease-in-out infinite;}
.effect-spirit-bloom .polaroid-effect-particles i:nth-child(2){left:18%;top:16%;animation:spiritLeaf 6.1s 1s ease-in-out infinite;}
.effect-spirit-bloom .polaroid-effect-particles i:nth-child(3){left:80%;top:18%;animation:spiritLeaf 5.8s .4s ease-in-out infinite;}
.effect-spirit-bloom .polaroid-effect-particles i:nth-child(4){left:88%;top:70%;animation:spiritLeaf 6.4s 1.7s ease-in-out infinite;}
.effect-spirit-bloom .polaroid-effect-particles i:nth-child(5){left:52%;top:2%;animation:spiritLeaf 5.5s 2.2s ease-in-out infinite;}

@keyframes spiritBloomPulse{
  0%,100%{transform:scale(.92);opacity:.55;}
  50%{transform:scale(1.06);opacity:1;}
}
@keyframes spiritBloomTurn{
  to{transform:rotate(360deg);}
}
@keyframes spiritEdge{
  0%,100%{opacity:.28;filter:blur(8px);}
  50%{opacity:.78;filter:blur(11px);}
}
@keyframes spiritLeaf{
  0%{opacity:0;transform:translate(0,22px) rotate(0deg) scale(.6);}
  25%{opacity:.85;}
  70%{opacity:.6;}
  100%{opacity:0;transform:translate(25px,-54px) rotate(130deg) scale(1.05);}
}

/* ------------------------------------------------------------
   2. FIREFLY SWARM
   wandering fireflies surrounding the keepsake
   ------------------------------------------------------------ */
.effect-firefly-swarm .polaroid-effect-back {
  opacity: .7;
  inset: -10%;
  background:
    radial-gradient(circle at 50% 50%, rgba(20,83,67,.22), transparent 55%);
  filter: blur(16px);
}

.effect-firefly-swarm .polaroid-effect-particles i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #eaff9b;
  box-shadow:
    0 0 5px #f1ffa7,
    0 0 13px rgba(217,255,100,.85),
    0 0 24px rgba(115,221,120,.45);
}

.effect-firefly-swarm .polaroid-effect-particles i:nth-child(1){left:6%;top:28%;animation:firefly1 5.8s ease-in-out infinite;}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(2){left:15%;top:74%;animation:firefly2 6.8s .8s ease-in-out infinite;}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(3){left:84%;top:22%;animation:firefly2 5.2s 1.6s ease-in-out infinite reverse;}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(4){left:91%;top:68%;animation:firefly1 7.1s .3s ease-in-out infinite reverse;}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(5){left:47%;top:4%;animation:firefly3 6.4s 1.1s ease-in-out infinite;}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(6){left:52%;top:92%;animation:firefly3 5.7s 2.1s ease-in-out infinite reverse;}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(7){left:25%;top:48%;animation:firefly2 8.2s 2.8s ease-in-out infinite;}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(8){left:74%;top:52%;animation:firefly1 6.2s 1.9s ease-in-out infinite;}

.effect-firefly-swarm .polaroid-card {
  box-shadow:
    0 28px 48px rgba(5,39,33,.28),
    0 0 38px rgba(198,255,114,.10);
}

@keyframes firefly1{
  0%,100%{opacity:.05;transform:translate(0,0) scale(.6);}
  20%{opacity:1;}
  45%{transform:translate(24px,-18px) scale(1.15);}
  70%{opacity:.35;transform:translate(-12px,-38px) scale(.75);}
}
@keyframes firefly2{
  0%,100%{opacity:0;transform:translate(0,0);}
  18%{opacity:.9;}
  52%{transform:translate(-30px,20px);}
  80%{opacity:.2;transform:translate(16px,37px);}
}
@keyframes firefly3{
  0%,100%{opacity:.15;transform:translate(-10px,4px);}
  35%{opacity:1;transform:translate(18px,-27px);}
  68%{opacity:.3;transform:translate(34px,8px);}
}

/* ------------------------------------------------------------
   3. MEMORY RIFT
   vivid chromatic split + energy tearing around the frame
   ------------------------------------------------------------ */
.effect-memory-rift .polaroid-effect-back {
  opacity: .95;
  inset: -8%;
  background:
    conic-gradient(
      from 40deg,
      rgba(80,220,255,.32),
      transparent 16%,
      rgba(188,111,255,.32) 34%,
      transparent 49%,
      rgba(255,105,115,.24) 68%,
      transparent 82%,
      rgba(80,220,255,.32)
    );
  filter: blur(10px);
  animation: memoryRiftSpin 7s linear infinite;
}

.effect-memory-rift .polaroid-card {
  animation: memoryRiftPulse 3.3s ease-in-out infinite;
}

.effect-memory-rift .polaroid-card::before,
.effect-memory-rift .polaroid-card::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border: 2px solid rgba(92,220,255,.38);
  border-radius: 7px;
  pointer-events: none;
}

.effect-memory-rift .polaroid-card::before {
  transform: translate(-5px,2px);
  border-color: rgba(73,220,255,.48);
  animation: riftBlue 2.6s steps(2,end) infinite;
}

.effect-memory-rift .polaroid-card::after {
  transform: translate(5px,-2px);
  border-color: rgba(216,93,255,.38);
  animation: riftViolet 2.9s steps(2,end) infinite;
}

.effect-memory-rift .polaroid-photo img {
  animation: riftImage 5s ease-in-out infinite;
}

@keyframes memoryRiftSpin{to{transform:rotate(360deg);}}
@keyframes memoryRiftPulse{
  0%,100%{filter:drop-shadow(0 0 0 rgba(103,222,255,0));}
  50%{filter:drop-shadow(0 0 16px rgba(103,222,255,.22));}
}
@keyframes riftBlue{
  0%,100%{clip-path:inset(0 0 82% 0);transform:translate(-4px,0);}
  33%{clip-path:inset(38% 0 42% 0);transform:translate(-8px,2px);}
  66%{clip-path:inset(72% 0 8% 0);transform:translate(-3px,-2px);}
}
@keyframes riftViolet{
  0%,100%{clip-path:inset(62% 0 18% 0);transform:translate(5px,-1px);}
  36%{clip-path:inset(8% 0 72% 0);transform:translate(8px,2px);}
  70%{clip-path:inset(43% 0 37% 0);transform:translate(4px,-3px);}
}
@keyframes riftImage{
  0%,100%{filter:saturate(1) contrast(1);}
  50%{filter:saturate(1.16) contrast(1.04);}
}

/* ------------------------------------------------------------
   4. MOONLIT ECHO
   calm blue/violet rings that feel like memory waves
   ------------------------------------------------------------ */
.effect-moonlit-echo .polaroid-effect-back {
  opacity: 1;
  inset: -18%;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      transparent 30%,
      rgba(121,189,255,.18) 31%,
      rgba(121,189,255,.18) 33%,
      transparent 34%,
      transparent 43%,
      rgba(156,130,255,.13) 44%,
      rgba(156,130,255,.13) 46%,
      transparent 47%);
  filter: blur(1px);
  animation: moonEcho 4.5s ease-out infinite;
}

.effect-moonlit-echo .polaroid-card {
  box-shadow:
    0 24px 45px rgba(5,39,33,.24),
    0 0 28px rgba(119,178,255,.18),
    0 0 58px rgba(137,116,245,.10);
}

.effect-moonlit-echo .polaroid-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(188,221,255,.16) 43%,
      rgba(195,177,255,.12) 50%,
      transparent 72%
    );
  transform:translateX(-120%);
  animation:moonSweep 6.5s ease-in-out infinite;
}

@keyframes moonEcho{
  0%{transform:scale(.68);opacity:0;}
  28%{opacity:.9;}
  100%{transform:scale(1.2);opacity:0;}
}
@keyframes moonSweep{
  0%,18%{transform:translateX(-120%);}
  55%,100%{transform:translateX(120%);}
}

/* ------------------------------------------------------------
   5. GOLDEN KEEPSAKE
   warm cinematic sparkle, precious-memory showcase
   ------------------------------------------------------------ */
.effect-golden-keepsake .polaroid-effect-back {
  opacity: 1;
  inset: -14%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,221,123,.28), transparent 45%),
    conic-gradient(
      from 10deg,
      transparent,
      rgba(255,205,102,.18),
      transparent 18%,
      rgba(255,244,190,.20) 36%,
      transparent 52%,
      rgba(255,186,83,.16) 68%,
      transparent
    );
  filter: blur(12px);
  animation: goldenAura 7s linear infinite;
}

.effect-golden-keepsake .polaroid-card {
  box-shadow:
    0 26px 48px rgba(65,45,11,.23),
    0 0 24px rgba(255,202,91,.20);
}

.effect-golden-keepsake .polaroid-card::after {
  content:"";
  position:absolute;
  inset:-2px;
  border:1px solid rgba(255,214,116,.55);
  border-radius:5px;
  pointer-events:none;
  box-shadow:
    inset 0 0 10px rgba(255,236,180,.18),
    0 0 16px rgba(255,203,93,.15);
}

.effect-golden-keepsake .polaroid-effect-particles i {
  width: 5px;
  height: 5px;
  background: #ffe29b;
  transform: rotate(45deg);
  box-shadow:0 0 9px rgba(255,209,101,.75);
}

.effect-golden-keepsake .polaroid-effect-particles i:nth-child(1){left:4%;top:22%;animation:goldSpark 3.4s infinite;}
.effect-golden-keepsake .polaroid-effect-particles i:nth-child(2){left:18%;top:83%;animation:goldSpark 4.2s .8s infinite;}
.effect-golden-keepsake .polaroid-effect-particles i:nth-child(3){left:87%;top:16%;animation:goldSpark 3.7s 1.5s infinite;}
.effect-golden-keepsake .polaroid-effect-particles i:nth-child(4){left:93%;top:72%;animation:goldSpark 4.4s .4s infinite;}
.effect-golden-keepsake .polaroid-effect-particles i:nth-child(5){left:48%;top:2%;animation:goldSpark 3.8s 2s infinite;}
.effect-golden-keepsake .polaroid-effect-particles i:nth-child(6){left:55%;top:94%;animation:goldSpark 4.1s 1.1s infinite;}

@keyframes goldenAura{to{transform:rotate(360deg);}}
@keyframes goldSpark{
  0%,100%{opacity:0;transform:rotate(45deg) scale(.3);}
  36%{opacity:1;transform:rotate(45deg) scale(1.15);}
  58%{opacity:.45;transform:rotate(45deg) scale(.7);}
}

/* ------------------------------------------------------------
   Motion accessibility
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .polaroid-effect-layer,
  .polaroid-effect-particles i,
  .effect-spirit-bloom .polaroid-card::before,
  .effect-memory-rift .polaroid-card,
  .effect-memory-rift .polaroid-card::before,
  .effect-memory-rift .polaroid-card::after,
  .effect-memory-rift .polaroid-photo img,
  .effect-moonlit-echo .polaroid-photo::after {
    animation: none !important;
  }

  .effect-spirit-bloom .polaroid-effect-back,
  .effect-firefly-swarm .polaroid-effect-back,
  .effect-memory-rift .polaroid-effect-back,
  .effect-moonlit-echo .polaroid-effect-back,
  .effect-golden-keepsake .polaroid-effect-back {
    opacity: .45;
  }
}


/* ============================================================
   COLLECTION POLAROID THUMBNAILS V62
   ============================================================ */

/*
 * Collection preview images now look like miniature physical Polaroids.
 * Applies to:
 * - Last 5 Found
 * - Browse Your Collection
 */
.found-thumb,
.collection-browser-thumb {
  position: relative;
  overflow: visible !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 0 0 auto;
}

/*
 * The image itself becomes the "photo" area.
 * Extra white space at the bottom gives the classic Polaroid silhouette.
 */
.found-thumb::before,
.collection-browser-thumb::before {
  content: "";
  position: absolute;
  inset: -5px -5px -11px;
  z-index: 0;
  border-radius: 3px;
  background:
    linear-gradient(145deg, #fffefa 0%, #f4eee3 100%);
  box-shadow:
    0 5px 10px rgba(24,54,46,.14),
    0 1px 2px rgba(24,54,46,.10);
  transform: rotate(-1.8deg);
  pointer-events: none;
}

.found-thumb img,
.collection-browser-thumb img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 2px;
  transform: rotate(-1.8deg);
  box-shadow: 0 0 0 1px rgba(29,54,47,.05);
}

/*
 * Tiny warm paper highlight so the thumbnail feels physical rather than
 * like a generic white-card image.
 */
.found-thumb::after,
.collection-browser-thumb::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -7px;
  z-index: 2;
  height: 1px;
  border-radius: 999px;
  background: rgba(54,72,65,.16);
  transform: rotate(-1.8deg);
  pointer-events: none;
}

/*
 * Placeholder also sits inside the miniature Polaroid.
 */
.found-thumb .collection-thumb-placeholder,
.collection-browser-thumb .collection-thumb-placeholder {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: #edf2ed;
  color: rgba(49,86,77,.30);
  border-radius: 2px;
  transform: rotate(-1.8deg);
}

/*
 * Slightly more breathing room so the lower Polaroid border does not collide
 * with surrounding card edges.
 */
.found-card,
.collection-browser-card {
  overflow: visible;
}

.collection-latest .found-card {
  padding-top: .65rem;
  padding-bottom: .78rem;
}

.collection-browser-card {
  padding-top: .7rem;
  padding-bottom: .82rem;
}

/*
 * Keep the visual scale compact on mobile.
 */
@media(max-width:520px){
  .found-thumb::before,
  .collection-browser-thumb::before {
    inset: -4px -4px -9px;
  }

  .found-thumb::after,
  .collection-browser-thumb::after {
    bottom: -6px;
  }
}


/* ============================================================
   SHOWCASE INTENSITY TUNING V63
   ============================================================ */
.effect-spirit-bloom .polaroid-effect-back{filter:blur(11px) saturate(1.22)}
.effect-spirit-bloom .polaroid-card{box-shadow:0 28px 52px rgba(5,39,33,.30),0 0 24px rgba(103,233,204,.24),0 0 58px rgba(239,106,50,.13)}
.effect-firefly-swarm .polaroid-effect-particles i{width:7px;height:7px}
.effect-firefly-swarm .polaroid-card{box-shadow:0 28px 52px rgba(5,39,33,.30),0 0 26px rgba(215,255,104,.18),0 0 65px rgba(110,222,125,.14)}
.effect-memory-rift .polaroid-effect-back{filter:blur(7px) saturate(1.28)}
.effect-memory-rift .polaroid-card{box-shadow:0 26px 48px rgba(5,39,33,.28),-8px 0 22px rgba(72,225,255,.16),8px 0 22px rgba(199,89,255,.16)}
.effect-moonlit-echo .polaroid-effect-back{inset:-22%}
.effect-moonlit-echo .polaroid-card{box-shadow:0 26px 48px rgba(5,39,33,.26),0 0 34px rgba(119,178,255,.23),0 0 72px rgba(137,116,245,.14)}
.effect-golden-keepsake .polaroid-card{box-shadow:0 28px 50px rgba(65,45,11,.27),0 0 30px rgba(255,202,91,.24),0 0 68px rgba(255,202,91,.11)}

/* 6. BUTTERFLY ASCENSION */
.effect-butterfly-ascension .polaroid-effect-back{
  opacity:1;inset:-18%;
  background:radial-gradient(circle at 50% 70%,rgba(63,166,230,.30),transparent 36%),
             radial-gradient(circle at 50% 28%,rgba(118,226,255,.22),transparent 38%);
  filter:blur(12px);animation:butterflyAura 4.6s ease-in-out infinite;
}
.effect-butterfly-ascension .polaroid-card{
  box-shadow:0 28px 52px rgba(5,39,33,.29),0 0 30px rgba(69,170,230,.24),0 0 70px rgba(104,221,255,.13);
}
.effect-butterfly-ascension .polaroid-effect-particles i{
  width:14px;height:9px;opacity:0;
  background:radial-gradient(ellipse at 25% 50%,rgba(123,219,255,.96) 0 38%,transparent 40%),
             radial-gradient(ellipse at 75% 50%,rgba(123,219,255,.96) 0 38%,transparent 40%);
  filter:drop-shadow(0 0 7px rgba(85,190,255,.76));
}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(1){left:8%;top:88%;animation:butterflyRise 5.4s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(2){left:22%;top:94%;animation:butterflyRise 6.2s 1.2s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(3){left:74%;top:90%;animation:butterflyRise 5.8s .6s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(4){left:90%;top:82%;animation:butterflyRise 6.6s 1.8s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(5){left:42%;top:96%;animation:butterflyRise 5.9s 2.2s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(6){left:58%;top:91%;animation:butterflyRise 7.1s .9s linear infinite}
@keyframes butterflyAura{0%,100%{transform:scale(.94);opacity:.62}50%{transform:scale(1.08);opacity:1}}
@keyframes butterflyRise{0%{opacity:0;transform:translate(0,12px) scale(.55) rotate(-8deg)}15%{opacity:.95}45%{transform:translate(18px,-80px) scale(.95) rotate(10deg)}70%{opacity:.72;transform:translate(-10px,-145px) scale(.78) rotate(-7deg)}100%{opacity:0;transform:translate(12px,-215px) scale(.45) rotate(10deg)}}

/* 7. FOREST AWAKENING */
.effect-forest-awakening .polaroid-effect-back{
  opacity:1;inset:-17%;
  background:radial-gradient(circle at 30% 70%,rgba(74,177,116,.32),transparent 32%),
             radial-gradient(circle at 75% 20%,rgba(121,214,149,.24),transparent 28%),
             repeating-radial-gradient(circle at 50% 50%,rgba(112,208,141,.13) 0 2px,transparent 3px 18px);
  filter:blur(9px);animation:forestBreath 5s ease-in-out infinite;
}
.effect-forest-awakening .polaroid-card::before{
  content:"";position:absolute;inset:-7px;z-index:-1;border-radius:8px;
  background:linear-gradient(110deg,transparent 0 8%,rgba(94,208,131,.48) 11% 13%,transparent 16% 42%,rgba(143,231,164,.37) 45% 47%,transparent 50% 72%,rgba(80,174,115,.40) 75% 77%,transparent 80%);
  filter:blur(5px);animation:forestVeins 4.6s ease-in-out infinite;
}
.effect-forest-awakening .polaroid-effect-particles i{width:4px;height:18px;border-radius:60% 40%;background:linear-gradient(rgba(142,236,161,.95),rgba(71,166,104,.25));box-shadow:0 0 9px rgba(95,202,132,.5)}
.effect-forest-awakening .polaroid-effect-particles i:nth-child(1){left:7%;top:70%;animation:forestMote 6s infinite}
.effect-forest-awakening .polaroid-effect-particles i:nth-child(2){left:16%;top:16%;animation:forestMote 6.8s 1s infinite}
.effect-forest-awakening .polaroid-effect-particles i:nth-child(3){left:85%;top:20%;animation:forestMote 5.7s .5s infinite}
.effect-forest-awakening .polaroid-effect-particles i:nth-child(4){left:92%;top:68%;animation:forestMote 7s 1.7s infinite}
.effect-forest-awakening .polaroid-effect-particles i:nth-child(5){left:49%;top:1%;animation:forestMote 6.3s 2.1s infinite}
@keyframes forestBreath{0%,100%{opacity:.52;transform:scale(.94)}50%{opacity:1;transform:scale(1.07)}}
@keyframes forestVeins{0%,100%{opacity:.28;filter:blur(7px)}50%{opacity:.9;filter:blur(4px)}}
@keyframes forestMote{0%{opacity:0;transform:translateY(18px) rotate(0)}25%{opacity:.82}100%{opacity:0;transform:translate(22px,-70px) rotate(100deg)}}

/* 8. WHISPERING ECHOES */
.effect-whispering-echoes .polaroid-effect-back{
  opacity:1;inset:-22%;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 22px,rgba(110,205,210,.14) 24px 26px,transparent 28px 46px,rgba(185,137,224,.11) 48px 50px,transparent 52px 72px);
  animation:whisperPulse 3.8s ease-out infinite;
}
.effect-whispering-echoes .polaroid-card{box-shadow:0 28px 48px rgba(5,39,33,.26),0 0 34px rgba(104,205,210,.20),0 0 70px rgba(171,116,220,.11)}
.effect-whispering-echoes .polaroid-photo::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent 0 35%,rgba(206,245,245,.12) 42%,rgba(206,245,245,.26) 48%,transparent 57%);
  transform:translateX(-130%);animation:whisperSweep 4.8s ease-in-out infinite;
}
.effect-whispering-echoes .polaroid-effect-particles i{width:3px;height:3px;border-radius:50%;background:#d9ffff;box-shadow:0 0 10px rgba(184,245,255,.78)}
.effect-whispering-echoes .polaroid-effect-particles i:nth-child(1){left:4%;top:40%;animation:whisperBlink 2.7s infinite}
.effect-whispering-echoes .polaroid-effect-particles i:nth-child(2){left:18%;top:80%;animation:whisperBlink 3.1s .7s infinite}
.effect-whispering-echoes .polaroid-effect-particles i:nth-child(3){left:91%;top:34%;animation:whisperBlink 2.9s 1.2s infinite}
.effect-whispering-echoes .polaroid-effect-particles i:nth-child(4){left:78%;top:86%;animation:whisperBlink 3.4s .4s infinite}
@keyframes whisperPulse{0%{transform:scale(.72);opacity:0}32%{opacity:.95}100%{transform:scale(1.16);opacity:0}}
@keyframes whisperSweep{0%,15%{transform:translateX(-130%)}60%,100%{transform:translateX(130%)}}
@keyframes whisperBlink{0%,100%{opacity:0;transform:scale(.4)}45%{opacity:1;transform:scale(1.4)}}

/* 9. FADING MEMORY */
.effect-fading-memory .polaroid-effect-back{
  opacity:.9;inset:-13%;
  background:radial-gradient(circle at 50% 50%,rgba(220,233,228,.26),transparent 50%),
             repeating-linear-gradient(0deg,transparent 0 12px,rgba(255,255,255,.06) 13px 14px);
  filter:blur(8px);animation:fadingAura 5.8s ease-in-out infinite;
}
.effect-fading-memory .polaroid-photo img{animation:fadingMemoryImage 6.5s ease-in-out infinite}
.effect-fading-memory .polaroid-photo::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(245,247,241,0) 0%,rgba(245,247,241,.18) 34%,rgba(245,247,241,.48) 48%,rgba(245,247,241,.08) 62%,transparent 80%);
  opacity:0;animation:fadingMemoryVeil 6.5s ease-in-out infinite;
}
.effect-fading-memory .polaroid-card{animation:fadingFrame 6.5s ease-in-out infinite}
@keyframes fadingAura{0%,100%{opacity:.35}50%{opacity:.85}}
@keyframes fadingMemoryImage{0%,18%,100%{filter:saturate(1) contrast(1) blur(0);opacity:1}44%{filter:saturate(.62) contrast(.92) blur(.25px);opacity:.78}58%{filter:saturate(.9) contrast(.98) blur(0);opacity:.96}}
@keyframes fadingMemoryVeil{0%,20%,100%{opacity:0;transform:translateY(-25%)}42%{opacity:.9;transform:translateY(0)}62%{opacity:.25;transform:translateY(18%)}}
@keyframes fadingFrame{0%,100%{box-shadow:0 24px 45px rgba(5,39,33,.24)}45%{box-shadow:0 24px 45px rgba(5,39,33,.17),0 0 42px rgba(235,242,237,.26)}}

/* 10. AURORA KEEPSAKE */
.effect-aurora-keepsake .polaroid-effect-back{
  opacity:1;inset:-21%;border-radius:28%;
  background:linear-gradient(125deg,transparent 5%,rgba(58,215,207,.36) 22%,rgba(95,190,255,.20) 36%,rgba(162,112,245,.33) 52%,rgba(239,106,186,.16) 68%,rgba(67,215,192,.32) 82%,transparent 95%);
  filter:blur(18px) saturate(1.28);animation:auroraFlow 7s ease-in-out infinite alternate;
}
.effect-aurora-keepsake .polaroid-card{box-shadow:0 28px 52px rgba(5,39,33,.28),0 0 36px rgba(74,210,207,.22),0 0 72px rgba(153,111,241,.15)}
.effect-aurora-keepsake .polaroid-card::before{
  content:"";position:absolute;inset:-5px;z-index:-1;border-radius:8px;
  background:linear-gradient(120deg,rgba(91,233,216,.58),rgba(103,173,255,.27) 33%,rgba(180,111,242,.50) 66%,rgba(91,233,216,.58));
  filter:blur(7px);opacity:.68;animation:auroraEdge 4.8s ease-in-out infinite;
}
@keyframes auroraFlow{0%{transform:translate(-6%,-4%) rotate(-4deg) scale(.95)}50%{transform:translate(4%,2%) rotate(3deg) scale(1.08)}100%{transform:translate(-2%,5%) rotate(-2deg) scale(1.01)}}
@keyframes auroraEdge{0%,100%{opacity:.35}50%{opacity:.92}}

@media (prefers-reduced-motion: reduce){
  .effect-butterfly-ascension .polaroid-effect-back,
  .effect-forest-awakening .polaroid-effect-back,
  .effect-whispering-echoes .polaroid-effect-back,
  .effect-fading-memory .polaroid-effect-back,
  .effect-aurora-keepsake .polaroid-effect-back,
  .effect-butterfly-ascension .polaroid-effect-particles i,
  .effect-forest-awakening .polaroid-effect-particles i,
  .effect-whispering-echoes .polaroid-effect-particles i,
  .effect-fading-memory .polaroid-photo img,
  .effect-fading-memory .polaroid-photo::after,
  .effect-fading-memory .polaroid-card,
  .effect-aurora-keepsake .polaroid-card::before{animation:none!important}
}


/* ============================================================
   POLAROID SHOWCASE OVERHAUL V64
   Aurora Keepsake is the visual benchmark.
   All other effects are rebuilt to feel equally intentional.
   ============================================================ */

/* Shared: give special effects a little more air and presence */
.polaroid-scene:not(.effect-classic) {
  padding-top: .35rem;
  padding-bottom: .45rem;
}

.polaroid-scene:not(.effect-classic) .polaroid-effect-back {
  mix-blend-mode: screen;
}

/* ------------------------------------------------------------
   SPIRIT BLOOM V64
   Big living bloom behind the memory, petal-like spirit waves.
   ------------------------------------------------------------ */
.effect-spirit-bloom .polaroid-effect-back {
  inset: -24% !important;
  opacity: 1 !important;
  border-radius: 42% !important;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(163,255,229,.32) 0 28%, transparent 44%),
    conic-gradient(
      from 12deg,
      transparent 0 5%,
      rgba(100,236,203,.38) 7% 13%,
      transparent 15% 24%,
      rgba(255,158,106,.24) 27% 33%,
      transparent 35% 48%,
      rgba(120,225,214,.34) 51% 58%,
      transparent 60% 73%,
      rgba(255,176,113,.20) 76% 82%,
      transparent 84% 100%);
  filter: blur(12px) saturate(1.35) !important;
  animation: spiritBloomV64 6.2s ease-in-out infinite !important;
}

.effect-spirit-bloom .polaroid-card {
  box-shadow:
    0 30px 54px rgba(5,39,33,.32),
    0 0 30px rgba(91,235,201,.28),
    0 0 76px rgba(239,106,50,.16) !important;
}

.effect-spirit-bloom .polaroid-card::before {
  inset: -9px !important;
  background:
    conic-gradient(
      from 0deg,
      rgba(158,255,229,.70),
      rgba(255,190,140,.28),
      rgba(107,230,207,.66),
      rgba(255,156,99,.28),
      rgba(158,255,229,.70)) !important;
  filter: blur(9px) saturate(1.2) !important;
  opacity: .78 !important;
  animation: spiritEdgeV64 4.4s ease-in-out infinite !important;
}

.effect-spirit-bloom .polaroid-effect-particles i {
  width: 10px !important;
  height: 20px !important;
  border-radius: 80% 20% 70% 30% !important;
  background: linear-gradient(150deg,#d6fff3 0%,#62dfbf 70%,rgba(98,223,191,.1) 100%) !important;
  box-shadow: 0 0 12px rgba(103,236,205,.75) !important;
}

@keyframes spiritBloomV64 {
  0%,100% { transform: rotate(-8deg) scale(.88); opacity:.56; }
  50% { transform: rotate(10deg) scale(1.08); opacity:1; }
}
@keyframes spiritEdgeV64 {
  0%,100% { opacity:.38; transform:scale(.98); }
  50% { opacity:.9; transform:scale(1.035); }
}

/* ------------------------------------------------------------
   FIREFLY SWARM V64
   Much denser, brighter swarm with visible flight trails.
   ------------------------------------------------------------ */
.effect-firefly-swarm .polaroid-effect-back {
  inset: -20% !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 50% 55%, rgba(176,255,129,.19), transparent 38%),
    radial-gradient(circle at 20% 30%, rgba(214,255,116,.11), transparent 19%),
    radial-gradient(circle at 82% 65%, rgba(139,240,124,.12), transparent 22%) !important;
  filter: blur(10px) !important;
}

.effect-firefly-swarm .polaroid-effect-particles i {
  width: 8px !important;
  height: 8px !important;
  background: #f3ff9e !important;
  box-shadow:
    0 0 5px #fbffd2,
    0 0 15px rgba(225,255,111,.95),
    0 0 30px rgba(118,225,113,.55) !important;
}

.effect-firefly-swarm .polaroid-effect-particles i::after {
  content:"";
  position:absolute;
  width: 34px;
  height: 2px;
  right: 5px;
  top: 3px;
  border-radius:999px;
  background: linear-gradient(90deg,transparent,rgba(223,255,129,.38));
  transform-origin:right center;
  opacity:.75;
}

.effect-firefly-swarm .polaroid-card {
  box-shadow:
    0 30px 52px rgba(5,39,33,.31),
    0 0 34px rgba(212,255,103,.23),
    0 0 82px rgba(91,214,119,.15) !important;
}

/* ------------------------------------------------------------
   MEMORY RIFT V64
   Strong vertical tear in space + chromatic slice flashes.
   ------------------------------------------------------------ */
.effect-memory-rift .polaroid-effect-back {
  inset: -25% !important;
  opacity: 1 !important;
  background:
    linear-gradient(
      92deg,
      transparent 0 33%,
      rgba(62,226,255,.08) 38%,
      rgba(89,230,255,.52) 47%,
      rgba(239,255,255,.75) 50%,
      rgba(196,93,255,.52) 53%,
      rgba(213,89,255,.09) 62%,
      transparent 68%),
    conic-gradient(
      from 90deg,
      transparent,
      rgba(68,225,255,.25),
      transparent 33%,
      rgba(205,87,255,.25),
      transparent 66%,
      rgba(68,225,255,.25),
      transparent) !important;
  filter: blur(8px) saturate(1.5) !important;
  animation: riftBreathV64 3.2s ease-in-out infinite !important;
}

.effect-memory-rift .polaroid-card {
  box-shadow:
    0 28px 50px rgba(5,39,33,.30),
    -14px 0 28px rgba(60,225,255,.22),
    14px 0 28px rgba(207,83,255,.22),
    0 0 72px rgba(141,121,255,.13) !important;
}

.effect-memory-rift .polaroid-card::before,
.effect-memory-rift .polaroid-card::after {
  inset: -8px !important;
  border-width: 3px !important;
  filter: drop-shadow(0 0 8px currentColor);
}

.effect-memory-rift .polaroid-photo::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 14%,
      rgba(88,225,255,.10) 14.5% 17%,
      transparent 17.5% 34%,
      rgba(216,94,255,.08) 34.5% 37%,
      transparent 37.5% 100%);
  animation: riftSlicesV64 3.7s steps(2,end) infinite;
}

@keyframes riftBreathV64 {
  0%,100% { transform:scale(.92) skewX(-2deg); opacity:.65; }
  50% { transform:scale(1.07) skewX(2deg); opacity:1; }
}
@keyframes riftSlicesV64 {
  0%,100% { transform:translateX(0); opacity:.2; }
  35% { transform:translateX(-5px); opacity:.9; }
  65% { transform:translateX(6px); opacity:.55; }
}

/* ------------------------------------------------------------
   MOONLIT ECHO V64
   Visible moon halo plus expanding echo rings.
   ------------------------------------------------------------ */
.effect-moonlit-echo .polaroid-effect-back {
  inset: -27% !important;
  opacity:1 !important;
  background:
    radial-gradient(circle at 50% 48%,
      rgba(225,239,255,.34) 0 10%,
      rgba(147,196,255,.18) 12% 18%,
      transparent 20% 31%,
      rgba(120,172,255,.17) 32% 34%,
      transparent 35% 46%,
      rgba(164,126,255,.14) 47% 49%,
      transparent 50% 100%) !important;
  filter: blur(.5px) !important;
  animation: moonEchoV64 4.8s ease-out infinite !important;
}

.effect-moonlit-echo .polaroid-card {
  box-shadow:
    0 28px 50px rgba(5,39,33,.27),
    0 0 38px rgba(123,182,255,.27),
    0 0 88px rgba(142,112,245,.16) !important;
}

.effect-moonlit-echo .polaroid-card::before {
  content:"";
  position:absolute;
  width:100px;
  height:100px;
  right:-46px;
  top:-48px;
  z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 35%,#eef7ff 0 10%,#b9d8ff 35%,rgba(129,161,238,.3) 66%,transparent 70%);
  box-shadow:0 0 30px rgba(184,211,255,.55);
  opacity:.78;
}

@keyframes moonEchoV64 {
  0% { transform:scale(.64); opacity:0; }
  24% { opacity:1; }
  100% { transform:scale(1.18); opacity:0; }
}

/* ------------------------------------------------------------
   GOLDEN KEEPSAKE V64
   Cinematic radial rays + stronger precious sparkle.
   ------------------------------------------------------------ */
.effect-golden-keepsake .polaroid-effect-back {
  inset: -24% !important;
  opacity:1 !important;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,219,123,.26) 0 5deg,
      transparent 7deg 18deg),
    radial-gradient(circle at 50% 48%,rgba(255,225,137,.35),transparent 42%) !important;
  filter:blur(10px) saturate(1.2) !important;
  animation: goldenRaysV64 18s linear infinite !important;
}

.effect-golden-keepsake .polaroid-card {
  box-shadow:
    0 30px 54px rgba(70,47,8,.30),
    0 0 38px rgba(255,205,88,.30),
    0 0 92px rgba(255,192,73,.15) !important;
}

.effect-golden-keepsake .polaroid-effect-particles i {
  width:7px !important;
  height:7px !important;
  background:#ffe8aa !important;
  box-shadow:
    0 0 8px #fff4ca,
    0 0 18px rgba(255,203,82,.92) !important;
}

.effect-golden-keepsake .polaroid-effect-particles i::before,
.effect-golden-keepsake .polaroid-effect-particles i::after {
  content:"";
  position:absolute;
  background:rgba(255,232,162,.82);
  border-radius:999px;
}
.effect-golden-keepsake .polaroid-effect-particles i::before {
  width:18px;height:2px;left:-6px;top:2px;
}
.effect-golden-keepsake .polaroid-effect-particles i::after {
  width:2px;height:18px;left:2px;top:-6px;
}

@keyframes goldenRaysV64 { to { transform:rotate(360deg); } }

/* ------------------------------------------------------------
   BUTTERFLY ASCENSION V64
   Actual CSS-drawn butterflies with wings + flap animation.
   ------------------------------------------------------------ */
.effect-butterfly-ascension .polaroid-effect-back {
  inset:-24% !important;
  opacity:1 !important;
  background:
    radial-gradient(circle at 50% 72%,rgba(57,176,239,.34),transparent 36%),
    radial-gradient(circle at 50% 28%,rgba(131,222,255,.22),transparent 38%),
    conic-gradient(from 180deg,transparent,rgba(73,190,255,.18),transparent 30%,rgba(131,109,255,.16),transparent 60%,rgba(73,190,255,.18),transparent) !important;
  filter:blur(13px) saturate(1.25) !important;
  animation: butterflyAuraV64 5.2s ease-in-out infinite !important;
}

.effect-butterfly-ascension .polaroid-card {
  box-shadow:
    0 30px 54px rgba(5,39,33,.30),
    0 0 38px rgba(69,170,230,.28),
    0 0 88px rgba(104,221,255,.15) !important;
}

/* Each i is now a butterfly BODY */
.effect-butterfly-ascension .polaroid-effect-particles i {
  width:3px !important;
  height:11px !important;
  border-radius:999px !important;
  background:linear-gradient(#dff7ff,#51aee5) !important;
  box-shadow:0 0 8px rgba(94,195,255,.75) !important;
  transform-origin:center center;
}

/* Real left/right wings */
.effect-butterfly-ascension .polaroid-effect-particles i::before,
.effect-butterfly-ascension .polaroid-effect-particles i::after {
  content:"";
  position:absolute;
  top:0;
  width:11px;
  height:14px;
  background:
    radial-gradient(ellipse at 65% 65%,rgba(205,245,255,.95) 0 22%,rgba(81,178,235,.88) 46%,rgba(74,119,216,.74) 68%,transparent 71%);
  filter:drop-shadow(0 0 5px rgba(91,191,255,.7));
}

.effect-butterfly-ascension .polaroid-effect-particles i::before {
  right:2px;
  border-radius:100% 35% 85% 25%;
  transform-origin:right 62%;
  animation: butterflyWingLeftV64 .42s ease-in-out infinite alternate;
}

.effect-butterfly-ascension .polaroid-effect-particles i::after {
  left:2px;
  border-radius:35% 100% 25% 85%;
  transform-origin:left 62%;
  transform:scaleX(-1);
  animation: butterflyWingRightV64 .42s ease-in-out infinite alternate;
}

.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(1){left:8%;top:88%;animation:butterflyRiseV64 5.4s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(2){left:23%;top:95%;animation:butterflyRiseV64 6.4s 1.1s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(3){left:76%;top:91%;animation:butterflyRiseV64 5.8s .5s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(4){left:91%;top:82%;animation:butterflyRiseV64 6.8s 1.7s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(5){left:42%;top:97%;animation:butterflyRiseV64 6.1s 2.2s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(6){left:60%;top:92%;animation:butterflyRiseV64 7.2s .8s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(7){left:32%;top:84%;animation:butterflyRiseV64 6.6s 3s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(8){left:84%;top:96%;animation:butterflyRiseV64 7.4s 2.5s linear infinite}

@keyframes butterflyAuraV64 {
  0%,100% { transform:scale(.92) rotate(-5deg); opacity:.55; }
  50% { transform:scale(1.09) rotate(5deg); opacity:1; }
}
@keyframes butterflyWingLeftV64 {
  from { transform:rotateY(12deg) rotateZ(-9deg); }
  to { transform:rotateY(68deg) rotateZ(-24deg); }
}
@keyframes butterflyWingRightV64 {
  from { transform:scaleX(-1) rotateY(12deg) rotateZ(-9deg); }
  to { transform:scaleX(-1) rotateY(68deg) rotateZ(-24deg); }
}
@keyframes butterflyRiseV64 {
  0% { opacity:0; transform:translate(0,12px) scale(.62) rotate(-9deg); }
  14% { opacity:1; }
  42% { transform:translate(22px,-76px) scale(1.04) rotate(10deg); }
  72% { opacity:.78; transform:translate(-13px,-150px) scale(.88) rotate(-7deg); }
  100% { opacity:0; transform:translate(16px,-230px) scale(.54) rotate(12deg); }
}

/* ------------------------------------------------------------
   FOREST AWAKENING V64
   Strong forest canopy rays, mist and living emerald border.
   ------------------------------------------------------------ */
.effect-forest-awakening .polaroid-effect-back {
  inset:-24% !important;
  opacity:1 !important;
  background:
    radial-gradient(ellipse at 50% 100%,rgba(65,184,108,.34),transparent 40%),
    repeating-conic-gradient(from 0deg,rgba(107,220,143,.20) 0 5deg,transparent 7deg 20deg),
    radial-gradient(circle at 50% 45%,rgba(151,236,168,.20),transparent 48%) !important;
  filter:blur(12px) saturate(1.28) !important;
  animation: forestAwakenV64 6s ease-in-out infinite !important;
}

.effect-forest-awakening .polaroid-card {
  box-shadow:
    0 30px 54px rgba(5,39,33,.31),
    0 0 36px rgba(72,190,115,.25),
    0 0 82px rgba(120,221,145,.13) !important;
}

.effect-forest-awakening .polaroid-card::before {
  inset:-9px !important;
  background:
    linear-gradient(90deg,rgba(76,194,113,.55),transparent 18%,rgba(127,232,154,.42) 48%,transparent 74%,rgba(76,194,113,.55)) !important;
  filter:blur(8px) !important;
  opacity:.85 !important;
}

@keyframes forestAwakenV64 {
  0%,100% { transform:scale(.9) translateY(6px); opacity:.52; }
  50% { transform:scale(1.08) translateY(-3px); opacity:1; }
}

/* ------------------------------------------------------------
   WHISPERING ECHOES V64
   Larger resonance rings + visible crossing sound ribbons.
   ------------------------------------------------------------ */
.effect-whispering-echoes .polaroid-effect-back {
  inset:-29% !important;
  opacity:1 !important;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 28px,
      rgba(116,220,221,.18) 30px 33px,
      transparent 35px 58px,
      rgba(189,139,230,.13) 60px 63px,
      transparent 65px 88px) !important;
  filter:drop-shadow(0 0 10px rgba(110,202,215,.18));
  animation: whisperPulseV64 4.2s ease-out infinite !important;
}

.effect-whispering-echoes .polaroid-card {
  box-shadow:
    0 30px 52px rgba(5,39,33,.28),
    0 0 40px rgba(100,211,214,.23),
    0 0 90px rgba(172,113,220,.14) !important;
}

.effect-whispering-echoes .polaroid-card::before {
  content:"";
  position:absolute;
  inset:-15%;
  z-index:-1;
  background:
    linear-gradient(115deg,transparent 32%,rgba(177,245,245,.16) 43%,transparent 50%),
    linear-gradient(65deg,transparent 38%,rgba(205,169,255,.13) 48%,transparent 56%);
  filter:blur(6px);
  animation: whisperCrossV64 5s ease-in-out infinite;
}

@keyframes whisperPulseV64 {
  0% { transform:scale(.62); opacity:0; }
  28% { opacity:1; }
  100% { transform:scale(1.18); opacity:0; }
}
@keyframes whisperCrossV64 {
  0%,100% { transform:translateX(-6%) skewX(-4deg); opacity:.25; }
  50% { transform:translateX(6%) skewX(4deg); opacity:.9; }
}

/* ------------------------------------------------------------
   FADING MEMORY V64
   Stronger reconstruction strips and ghost-double image.
   ------------------------------------------------------------ */
.effect-fading-memory .polaroid-effect-back {
  inset:-20% !important;
  opacity:1 !important;
  background:
    radial-gradient(circle at 50% 50%,rgba(230,239,234,.30),transparent 46%),
    repeating-linear-gradient(90deg,rgba(240,245,241,.07) 0 4px,transparent 5px 18px) !important;
  filter:blur(9px) !important;
}

.effect-fading-memory .polaroid-card {
  box-shadow:
    0 28px 50px rgba(5,39,33,.25),
    0 0 34px rgba(226,237,232,.22),
    0 0 76px rgba(197,214,205,.13) !important;
}

.effect-fading-memory .polaroid-photo::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 8%,
      rgba(239,244,241,.24) 8.5% 11%,
      transparent 11.5% 20%);
  mix-blend-mode:screen;
  animation: fadingSlicesV64 6.4s ease-in-out infinite;
}

.effect-fading-memory .polaroid-photo::after {
  background:
    linear-gradient(180deg,transparent 0%,rgba(246,248,245,.12) 25%,rgba(246,248,245,.56) 48%,rgba(246,248,245,.12) 70%,transparent 100%) !important;
  animation:fadingVeilV64 6.4s ease-in-out infinite !important;
}

.effect-fading-memory .polaroid-photo img {
  animation:fadingImageV64 6.4s ease-in-out infinite !important;
}

@keyframes fadingSlicesV64 {
  0%,20%,100% { opacity:0; transform:translateY(-5%); }
  42% { opacity:.9; transform:translateY(0); }
  60% { opacity:.35; transform:translateY(4%); }
}
@keyframes fadingVeilV64 {
  0%,18%,100% { opacity:0; transform:translateY(-35%); }
  43% { opacity:1; transform:translateY(0); }
  62% { opacity:.18; transform:translateY(30%); }
}
@keyframes fadingImageV64 {
  0%,18%,100% { filter:saturate(1) contrast(1) brightness(1); opacity:1; transform:scale(1); }
  40% { filter:saturate(.42) contrast(.9) brightness(1.15); opacity:.66; transform:scale(1.012); }
  56% { filter:saturate(.78) contrast(.97) brightness(1.04); opacity:.9; }
}

/* ------------------------------------------------------------
   AURORA KEEPSAKE V64
   Keep the winner, only minor polish.
   ------------------------------------------------------------ */
.effect-aurora-keepsake .polaroid-effect-back {
  filter:blur(18px) saturate(1.34) !important;
}
.effect-aurora-keepsake .polaroid-card {
  box-shadow:
    0 30px 54px rgba(5,39,33,.30),
    0 0 40px rgba(74,210,207,.24),
    0 0 82px rgba(153,111,241,.17) !important;
}

/* ------------------------------------------------------------
   Reduced motion: preserve strong static identity
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .effect-spirit-bloom .polaroid-effect-back,
  .effect-firefly-swarm .polaroid-effect-particles i,
  .effect-memory-rift .polaroid-effect-back,
  .effect-memory-rift .polaroid-photo::after,
  .effect-moonlit-echo .polaroid-effect-back,
  .effect-golden-keepsake .polaroid-effect-back,
  .effect-butterfly-ascension .polaroid-effect-back,
  .effect-butterfly-ascension .polaroid-effect-particles i,
  .effect-butterfly-ascension .polaroid-effect-particles i::before,
  .effect-butterfly-ascension .polaroid-effect-particles i::after,
  .effect-forest-awakening .polaroid-effect-back,
  .effect-whispering-echoes .polaroid-effect-back,
  .effect-whispering-echoes .polaroid-card::before,
  .effect-fading-memory .polaroid-photo img,
  .effect-fading-memory .polaroid-photo::before,
  .effect-fading-memory .polaroid-photo::after {
    animation:none !important;
  }

  .effect-butterfly-ascension .polaroid-effect-particles i {
    opacity:.85 !important;
  }
}


/* ============================================================
   SHOWCASE CLEANUP + REWORK V65
   ============================================================ */

/* MEMORY RIFT V65 — cleaner spatial tear, less glitch */
.effect-memory-rift .polaroid-effect-back {
  inset:-24% !important;
  opacity:1 !important;
  border-radius:42% !important;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(238,252,255,.72) 0 3%,
      rgba(100,229,240,.50) 4% 8%,
      rgba(93,182,225,.26) 9% 16%,
      rgba(153,104,231,.22) 18% 26%,
      transparent 38%),
    conic-gradient(from 10deg,
      transparent 0 12%,rgba(72,213,226,.20) 17%,transparent 24% 42%,
      rgba(159,101,230,.18) 48%,transparent 56% 75%,
      rgba(72,213,226,.18) 82%,transparent 90%);
  filter:blur(10px) saturate(1.25) !important;
  animation:memoryPortalV65 6.5s ease-in-out infinite !important;
}
.effect-memory-rift .polaroid-card {
  box-shadow:0 30px 54px rgba(5,39,33,.30),0 0 34px rgba(80,210,223,.22),0 0 76px rgba(143,102,224,.14) !important;
  animation:none !important;
}
.effect-memory-rift .polaroid-card::before,
.effect-memory-rift .polaroid-card::after {
  content:"" !important;
  position:absolute !important;
  inset:-10px !important;
  z-index:-1 !important;
  border:0 !important;
  border-radius:10px !important;
  filter:blur(7px) !important;
  pointer-events:none !important;
}
.effect-memory-rift .polaroid-card::before {
  background:linear-gradient(120deg,rgba(92,226,232,.52),transparent 30%,rgba(255,255,255,.20) 48%,transparent 62%,rgba(156,108,232,.46)) !important;
  opacity:.62 !important;
  animation:riftEdgeBlueV65 4.2s ease-in-out infinite !important;
}
.effect-memory-rift .polaroid-card::after {
  background:linear-gradient(300deg,rgba(157,106,232,.46),transparent 31%,rgba(255,255,255,.16) 48%,transparent 64%,rgba(87,223,229,.48)) !important;
  opacity:.54 !important;
  animation:riftEdgeVioletV65 4.8s ease-in-out infinite !important;
}
.effect-memory-rift .polaroid-photo::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 0 34%,rgba(211,248,251,0) 39%,rgba(211,248,251,.16) 47%,rgba(204,190,255,.11) 53%,transparent 63%);
  transform:translateX(-125%);
  animation:riftLightSweepV65 7s ease-in-out infinite !important;
}
.effect-memory-rift .polaroid-photo img { animation:none !important; }

@keyframes memoryPortalV65 {
  0%,100%{transform:scale(.92) rotate(-3deg);opacity:.56}
  50%{transform:scale(1.08) rotate(3deg);opacity:1}
}
@keyframes riftEdgeBlueV65 {
  0%,100%{opacity:.35;transform:translate(-5px,2px) scale(.98)}
  50%{opacity:.78;transform:translate(-8px,0) scale(1.025)}
}
@keyframes riftEdgeVioletV65 {
  0%,100%{opacity:.30;transform:translate(5px,-2px) scale(.985)}
  50%{opacity:.72;transform:translate(8px,1px) scale(1.02)}
}
@keyframes riftLightSweepV65 {
  0%,22%{transform:translateX(-125%);opacity:0}
  48%{opacity:.85}
  70%,100%{transform:translateX(125%);opacity:0}
}

/* FIREFLY SWARM V65 — 18 fireflies with more depth */
.effect-firefly-swarm .polaroid-effect-particles i{display:block !important;opacity:0}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(9){left:30%;top:12%;animation:firefly1 5.6s .4s ease-in-out infinite}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(10){left:68%;top:14%;animation:firefly2 6.2s 1.3s ease-in-out infinite}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(11){left:5%;top:55%;animation:firefly3 7.1s 2.1s ease-in-out infinite}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(12){left:95%;top:48%;animation:firefly1 5.9s 1.8s ease-in-out infinite reverse}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(13){left:34%;top:88%;animation:firefly2 6.7s .7s ease-in-out infinite reverse}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(14){left:70%;top:84%;animation:firefly3 5.8s 2.4s ease-in-out infinite}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(15){left:12%;top:12%;animation:firefly2 8s 3s ease-in-out infinite}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(16){left:88%;top:10%;animation:firefly3 7.3s .2s ease-in-out infinite reverse}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(17){left:44%;top:50%;animation:firefly1 6.4s 2.7s ease-in-out infinite}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(18){left:60%;top:64%;animation:firefly2 7.8s 1.1s ease-in-out infinite}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(3n){width:5px !important;height:5px !important;filter:blur(.2px)}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(4n){width:10px !important;height:10px !important}
.effect-firefly-swarm .polaroid-effect-particles i:nth-child(5n){filter:blur(.7px)}

/* BUTTERFLY ASCENSION V65 — real butterfly silhouette via embedded SVG mask */
.effect-butterfly-ascension .polaroid-effect-particles i {
  width:28px !important;
  height:22px !important;
  border-radius:0 !important;
  background:linear-gradient(135deg,#d9f7ff 0%,#61c5f1 42%,#697ee5 100%) !important;
  box-shadow:none !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='black' d='M31 23C23 5 7 1 4 9c-3 9 8 19 20 18-10 5-14 15-7 19 7 4 13-5 16-15 3 10 9 19 16 15 7-4 3-14-7-19 12 1 23-9 20-18-3-8-19-4-27 14l-2-8-2 8Z'/%3E%3Cellipse fill='black' cx='32' cy='27' rx='3' ry='11'/%3E%3Cpath d='M30 18c-3-7-7-10-11-12M34 18c3-7 7-10 11-12' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat:no-repeat !important;
  -webkit-mask-position:center !important;
  -webkit-mask-size:contain !important;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='black' d='M31 23C23 5 7 1 4 9c-3 9 8 19 20 18-10 5-14 15-7 19 7 4 13-5 16-15 3 10 9 19 16 15 7-4 3-14-7-19 12 1 23-9 20-18-3-8-19-4-27 14l-2-8-2 8Z'/%3E%3Cellipse fill='black' cx='32' cy='27' rx='3' ry='11'/%3E%3Cpath d='M30 18c-3-7-7-10-11-12M34 18c3-7 7-10 11-12' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  mask-repeat:no-repeat !important;
  mask-position:center !important;
  mask-size:contain !important;
  filter:drop-shadow(0 0 7px rgba(91,191,255,.82)) !important;
}
.effect-butterfly-ascension .polaroid-effect-particles i::before,
.effect-butterfly-ascension .polaroid-effect-particles i::after {
  content:none !important;
  display:none !important;
}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(1){left:6%;top:91%;animation:butterflyFlightV65 6.2s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(2){left:19%;top:96%;animation:butterflyFlightV65 7.1s 1.1s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(3){left:78%;top:92%;animation:butterflyFlightV65 6.5s .5s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(4){left:91%;top:84%;animation:butterflyFlightV65 7.4s 1.9s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(5){left:41%;top:98%;animation:butterflyFlightV65 6.8s 2.4s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(6){left:61%;top:93%;animation:butterflyFlightV65 7.8s .9s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(7){left:30%;top:88%;animation:butterflyFlightV65 7s 3s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(8){left:85%;top:97%;animation:butterflyFlightV65 8.1s 2.7s linear infinite}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(n+9){display:none !important}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(2n){width:22px !important;height:18px !important}
.effect-butterfly-ascension .polaroid-effect-particles i:nth-child(3n){width:34px !important;height:26px !important}

@keyframes butterflyFlightV65 {
  0%{opacity:0;transform:translate(0,18px) rotate(-12deg) scale(.55) rotateY(0deg)}
  12%{opacity:.95}
  26%{transform:translate(20px,-45px) rotate(12deg) scale(.88) rotateY(42deg)}
  48%{transform:translate(-8px,-105px) rotate(-8deg) scale(1) rotateY(-28deg)}
  70%{opacity:.8;transform:translate(18px,-165px) rotate(10deg) scale(.86) rotateY(36deg)}
  100%{opacity:0;transform:translate(-6px,-245px) rotate(-6deg) scale(.55) rotateY(0deg)}
}

@media (prefers-reduced-motion: reduce) {
  .effect-memory-rift .polaroid-effect-back,
  .effect-memory-rift .polaroid-card::before,
  .effect-memory-rift .polaroid-card::after,
  .effect-memory-rift .polaroid-photo::after,
  .effect-firefly-swarm .polaroid-effect-particles i,
  .effect-butterfly-ascension .polaroid-effect-particles i {
    animation:none !important;
  }
  .effect-butterfly-ascension .polaroid-effect-particles i { opacity:.85 !important; }
}


/* ============================================================
   MEMORY TYPE BADGES V66
   ============================================================ */

.memory-type-badge-public,
.memory-type-tag {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.09em;
  line-height:1;
}

/* Main Memory hero badge */
.memory-type-badge-public {
  margin:0 auto .65rem;
  padding:.34rem .62rem;
  font-size:.58rem;
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(8px);
  box-shadow:0 7px 20px rgba(0,0,0,.10);
}

.memory-type-badge-public.is-physical {
  color:#fff8e9;
  background:rgba(172,112,55,.34);
  border-color:rgba(255,225,178,.42);
}

.memory-type-badge-public.is-digital {
  color:#eaffff;
  background:rgba(60,155,177,.34);
  border-color:rgba(167,236,247,.42);
}

/* Compact Collection badges */
.memory-type-tag {
  padding:.20rem .34rem;
  font-size:.46rem;
  border:1px solid transparent;
}

.memory-type-tag.is-physical {
  color:#855b2c;
  background:rgba(178,126,61,.10);
  border-color:rgba(178,126,61,.16);
}

.memory-type-tag.is-digital {
  color:#377c8c;
  background:rgba(70,165,184,.10);
  border-color:rgba(70,165,184,.16);
}

/*
 * Keep collection metadata tidy when Label + Type + Community + Favorite
 * all appear together.
 */
.collection-card-meta-row {
  display:flex;
  align-items:center;
  gap:.28rem;
  flex-wrap:wrap;
}


/* ============================================================
   FAVORITE LOGIN HINT + ANI GUIDE V69
   ============================================================ */

.memory-favorite-wrap {
  position: relative;
}

/* Desktop hover / keyboard focus hint for locked favorite control */
.memory-favorite-button.is-locked {
  position: relative;
}

.memory-favorite-button.is-locked::after {
  content: attr(data-login-hint);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 200;
  width: max-content;
  max-width: min(220px, 72vw);
  padding: .46rem .62rem;
  border-radius: 10px;
  background: rgba(19,61,55,.96);
  color: #fff;
  font-size: .68rem;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(8,35,31,.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition:
    opacity .16s ease,
    transform .16s ease,
    visibility .16s ease;
}

.memory-favorite-button.is-locked::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  z-index: 201;
  width: 9px;
  height: 9px;
  background: rgba(19,61,55,.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) rotate(45deg);
  transition: opacity .16s ease, visibility .16s ease;
}

@media (hover:hover) and (pointer:fine) {
  .memory-favorite-button.is-locked:hover::after,
  .memory-favorite-button.is-locked:hover::before,
  .memory-favorite-button.is-locked:focus-visible::after,
  .memory-favorite-button.is-locked:focus-visible::before {
    opacity: 1;
    visibility: visible;
  }

  .memory-favorite-button.is-locked:hover::after,
  .memory-favorite-button.is-locked:focus-visible::after {
    transform: translate(-50%, 0);
  }
}

/* Ani speech bubble */
.ani-speech-bubble {
  position: absolute;
  right: calc(100% - 10px);
  bottom: calc(72% + 10px);
  width: min(210px, 62vw);
  padding: .68rem .78rem;
  border: 1px solid rgba(46,112,102,.16);
  border-radius: 16px 16px 5px 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,250,246,.98));
  color: #214f47;
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  box-shadow:
    0 12px 28px rgba(6,43,37,.18),
    0 2px 6px rgba(6,43,37,.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.94);
  transform-origin: 100% 100%;
  transition:
    opacity .2s ease,
    transform .2s cubic-bezier(.2,.8,.2,1),
    visibility .2s ease;
  pointer-events: none;
}

.ani-speech-bubble::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: #f7faf7;
  border-right: 1px solid rgba(46,112,102,.13);
  border-bottom: 1px solid rgba(46,112,102,.13);
  transform: rotate(45deg);
}

.ani-speech-bubble.is-visible,
.ani-npc.is-speaking .ani-speech-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.ani-npc.is-favorite-guide {
  z-index: 14000;
}

.ani-npc.is-favorite-guide .ani-npc-sprite {
  filter:
    drop-shadow(0 4px 5px rgba(7,45,42,.22))
    drop-shadow(0 0 14px rgba(105,205,219,.20));
}

/* If Ani sits on the left edge, put the bubble to her right */
.ani-npc.is-favorite-guide[style*="--ani-bubble-right"] .ani-speech-bubble {
  left: calc(100% - 8px);
  right: auto;
  border-radius: 16px 16px 16px 5px;
}

/* Fallback pulse if Ani has not initialized yet */
.favorite-login-nudge {
  animation: favoriteLoginNudgeV69 .55s ease-in-out 2;
}

@keyframes favoriteLoginNudgeV69 {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.08); }
}

@media (max-width:520px) {
  .ani-speech-bubble {
    width: min(190px, 66vw);
    font-size: .70rem;
    padding: .62rem .70rem;
  }
}

/* Reduced motion: Ani moves instantly to the heart instead of flying. */
@media (prefers-reduced-motion: reduce) {
  .ani-npc.is-favorite-guide {
    left: var(--ani-guide-x, auto) !important;
    top: var(--ani-guide-y, 5.25rem) !important;
    right: auto !important;
    transform: none !important;
  }

  .ani-speech-bubble,
  .ani-speech-bubble.is-visible {
    transition: none !important;
  }

  .favorite-login-nudge {
    animation: none !important;
  }
}


/* ============================================================
   ANI SPEECH BUBBLE VIEWPORT CLAMP V70
   ============================================================ */

/*
 * The speech bubble is moved directly under <body> by app.js.
 * This prevents Ani's transformed fixed container from becoming
 * the bubble's containing block.
 */
body > .ani-speech-bubble {
  position: fixed !important;
  z-index: 15000 !important;
  right: auto !important;
  bottom: auto !important;
  max-width: calc(100vw - 24px) !important;
  pointer-events: none !important;
  transform-origin: 50% 50%;
}

/*
 * Bubble tail follows the chosen side.
 */
body > .ani-speech-bubble::after {
  right: auto;
  bottom: auto;
}

body > .ani-speech-bubble.bubble-right::after {
  left: -7px;
  top: 22px;
  transform: rotate(135deg);
}

body > .ani-speech-bubble.bubble-left::after {
  right: -7px;
  top: 22px;
  transform: rotate(-45deg);
}

body > .ani-speech-bubble.bubble-above::after {
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%) rotate(45deg);
}

/*
 * No fixed relation to Ani remains. JS hard-clamps x/y to:
 *   12px <= x <= viewportWidth - bubbleWidth - 12px
 *   12px <= y <= viewportHeight - bubbleHeight - 12px
 */
@media (max-width:520px) {
  body > .ani-speech-bubble {
    width: min(190px, calc(100vw - 24px));
  }
}

@media (prefers-reduced-motion: reduce) {
  body > .ani-speech-bubble {
    position: fixed !important;
  }
}


/* ============================================================
   ANI BUBBLE VISIBILITY FIX V71
   ============================================================ */
body > .ani-speech-bubble {
  display:block !important;
}

body > .ani-speech-bubble.is-visible {
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) scale(1) !important;
}

body > .ani-speech-bubble:not(.is-visible) {
  opacity:0;
  visibility:hidden;
}

body > #aniSpeechBubble {
  z-index:2147482500 !important;
}


/* ============================================================
   ANI SPEECH FONT V72
   ============================================================ */
.ani-speech-bubble,
body > .ani-speech-bubble {
  font-family: "Architects Daughter", cursive !important;
  font-weight: 400 !important;
  letter-spacing: .01em;
}


/* ============================================================
   SPECIAL MEMORY / SUBMISSION CODE UNLOCK V74
   ============================================================ */

.memory-code-unlock {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  margin:1.15rem 0 1.35rem;
  padding:1.05rem;
  border:1px solid rgba(116,190,197,.28);
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%,rgba(127,102,235,.17),transparent 42%),
    radial-gradient(circle at 0% 100%,rgba(64,214,195,.16),transparent 42%),
    linear-gradient(145deg,rgba(248,255,252,.96),rgba(242,247,255,.94));
  box-shadow:
    0 16px 36px rgba(26,76,70,.12),
    inset 0 0 32px rgba(255,255,255,.45);
}

.memory-code-unlock-glow {
  position:absolute;
  z-index:-1;
  inset:-35%;
  background:
    conic-gradient(
      from 20deg,
      transparent,
      rgba(75,218,204,.19),
      transparent 30%,
      rgba(151,107,240,.18),
      transparent 62%,
      rgba(75,218,204,.18),
      transparent);
  filter:blur(20px);
  animation:memoryCodeAura 10s linear infinite;
}

.memory-code-unlock-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.memory-code-unlock-kicker,
.memory-code-label {
  display:block;
  color:#4c9aa2;
  font-size:.55rem;
  font-weight:950;
  letter-spacing:.13em;
}

.memory-code-unlock h3 {
  margin:.25rem 0 0;
  color:#173f3a;
  font-size:1.05rem;
  line-height:1.15;
}

.memory-code-unlock-spark {
  color:#8d72db;
  font-size:1.5rem;
  filter:drop-shadow(0 0 8px rgba(141,114,219,.35));
  animation:memoryCodeSpark 2.8s ease-in-out infinite;
}

.memory-code-unlock-copy {
  margin:.7rem 0 .9rem;
  color:#57716b;
  font-size:.82rem;
  line-height:1.5;
}

.memory-code-login {
  display:grid;
  gap:.65rem;
  padding:.8rem;
  border-radius:14px;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(65,143,137,.12);
}

.memory-code-login p {
  margin:0;
  color:#58716c;
  font-size:.78rem;
}

.memory-code-login-button,
.memory-code-submit-button,
.memory-code-copy-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  font:inherit;
  font-weight:900;
}

.memory-code-login-button,
.memory-code-submit-button {
  width:fit-content;
  padding:.6rem .86rem;
  background:#174d46;
  color:#fff;
  font-size:.72rem;
  box-shadow:0 7px 16px rgba(23,77,70,.16);
}

.memory-code-result {
  display:grid;
  gap:.55rem;
}

.memory-code-row {
  display:flex;
  align-items:stretch;
  gap:.45rem;
}

.memory-code-row code {
  min-width:0;
  flex:1 1 auto;
  padding:.72rem .75rem;
  border:1px dashed rgba(71,135,131,.28);
  border-radius:12px;
  background:rgba(255,255,255,.82);
  color:#173f3a;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(.86rem,4vw,1.08rem);
  font-weight:900;
  letter-spacing:.11em;
  text-align:center;
  user-select:all;
  box-shadow:inset 0 1px 8px rgba(39,105,96,.04);
}

.memory-code-copy-button {
  flex:0 0 auto;
  padding:.55rem .7rem;
  background:rgba(83,170,174,.12);
  color:#397d80;
  font-size:.68rem;
}

#memoryCodeEvent {
  color:#73857f;
  font-size:.66rem;
}

.memory-code-actions {
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin-top:.2rem;
}

.memory-code-used {
  display:inline-flex;
  align-items:center;
  padding:.34rem .55rem;
  border-radius:999px;
  background:rgba(118,133,127,.10);
  color:#6b7873;
  font-size:.57rem;
  font-weight:950;
  letter-spacing:.09em;
}

.memory-code-loading,
.memory-code-error {
  margin:.3rem 0 0;
  font-size:.72rem;
}

.memory-code-loading {
  color:#66817a;
}

.memory-code-error {
  color:#9b4f49;
}

@keyframes memoryCodeAura {
  to { transform:rotate(360deg); }
}

@keyframes memoryCodeSpark {
  0%,100% { transform:scale(.9) rotate(-8deg); opacity:.55; }
  50% { transform:scale(1.18) rotate(8deg); opacity:1; }
}

@media(max-width:520px) {
  .memory-code-unlock {
    padding:.9rem;
    border-radius:17px;
  }

  .memory-code-row {
    align-items:stretch;
  }

  .memory-code-copy-button {
    padding-inline:.62rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  .memory-code-unlock-glow,
  .memory-code-unlock-spark {
    animation:none !important;
  }
}


/* ============================================================
   CLAIM YOUR CODE EMAIL FLOW V75
   ============================================================ */
.memory-code-claim-form {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.45rem;
}

.memory-code-claim-form input {
  min-width:0;
  width:100%;
  box-sizing:border-box;
  padding:.68rem .72rem;
  border:1px solid rgba(54,122,116,.18);
  border-radius:999px;
  outline:none;
  background:rgba(255,255,255,.88);
  color:#173f3a;
  font:inherit;
  font-size:.76rem;
  box-shadow:inset 0 1px 7px rgba(32,90,82,.04);
}

.memory-code-claim-form input:focus {
  border-color:rgba(76,172,170,.48);
  box-shadow:
    0 0 0 3px rgba(76,172,170,.09),
    inset 0 1px 7px rgba(32,90,82,.04);
}

.memory-code-claim-note {
  color:#788985;
  font-size:.62rem;
  line-height:1.4;
}

.memory-code-claim-message {
  margin:0 !important;
  color:#3d7b70 !important;
  font-size:.69rem !important;
  font-weight:750;
}

.memory-code-claim-message.is-error {
  color:#a2524c !important;
}

.memory-code-claim-form.is-sent input {
  opacity:.72;
}

@media(max-width:520px) {
  .memory-code-claim-form {
    grid-template-columns:1fr;
  }

  .memory-code-claim-form .memory-code-login-button {
    width:100%;
  }
}


/* ============================================================
   MOBILE SUBMISSION IMAGE STATUS V76
   ============================================================ */
.submission-image-status {
  display:block;
  margin-top:.32rem;
  color:#4f8178;
  font-size:.64rem;
  font-weight:750;
  line-height:1.35;
}

.submission-image-status.is-error {
  color:#a4514b;
}


/* ============================================================
   SUBMISSION DIAGNOSTIC V77
   ============================================================ */
.submission-diagnostic {
  display:inline-block;
  margin-top:.42rem;
  padding:.28rem .42rem;
  border-radius:7px;
  background:rgba(86,76,72,.08);
  color:#6d6865;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.56rem;
  line-height:1.25;
  user-select:all;
}


/* ============================================================
   COMMUNITY MEMORY STREAM V78
   ============================================================ */
.community-memory-stream {
  margin:1.3rem 0 1.55rem;
}

.community-stream-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.72rem;
}

.community-stream-heading h2 {
  margin:.15rem 0 0;
}

.community-stream-heading > span {
  max-width:13rem;
  color:rgba(38,88,80,.64);
  font-size:.65rem;
  font-weight:800;
  text-align:right;
}

.community-stream-viewport {
  position:relative;
  overflow:hidden;
  margin-inline:calc(var(--page-pad, 1rem) * -1);
  padding:.3rem 0 .65rem;
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
  mask-image:linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 96%,
    transparent 100%
  );
}

.community-stream-track {
  display:flex;
  width:max-content;
  gap:.7rem;
  padding-left:1rem;
  animation:communityMemoryDrift 52s linear infinite;
}

.community-stream-viewport:hover .community-stream-track,
.community-stream-viewport:focus-within .community-stream-track {
  animation-play-state:paused;
}

.community-stream-card {
  width:clamp(215px,68vw,280px);
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:.72rem;
  align-items:center;
  flex:0 0 auto;
  padding:.65rem;
  border:1px solid rgba(73,139,128,.14);
  border-radius:17px;
  background:
    radial-gradient(circle at 0 0,rgba(114,220,205,.09),transparent 44%),
    rgba(255,255,255,.88);
  box-shadow:0 9px 24px rgba(28,73,66,.09);
}

.community-stream-card.is-claimed {
  border-color:rgba(106,180,169,.3);
  box-shadow:
    0 9px 24px rgba(28,73,66,.09),
    inset 0 0 0 1px rgba(96,187,174,.12);
}

.community-stream-image {
  display:block;
  overflow:hidden;
  aspect-ratio:1 / 1.15;
  border-radius:10px;
  background:#ecf3ef;
  box-shadow:0 4px 10px rgba(34,74,67,.12);
  transform:rotate(-1.4deg);
}

.community-stream-card:nth-child(even) .community-stream-image {
  transform:rotate(1.3deg);
}

.community-stream-image img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.community-stream-copy {
  min-width:0;
  display:grid;
  gap:.28rem;
}

.community-stream-event {
  color:#5c9a92;
  font-size:.52rem;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.community-stream-copy strong {
  display:-webkit-box;
  overflow:hidden;
  color:#214b44;
  font-size:.78rem;
  line-height:1.25;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.community-stream-claim {
  width:fit-content;
  margin-top:.12rem;
  padding:.38rem .55rem;
  border:0;
  border-radius:999px;
  background:#1c6258;
  color:#fff;
  cursor:pointer;
  font:inherit;
  font-size:.57rem;
  font-weight:950;
  letter-spacing:.02em;
  box-shadow:0 5px 12px rgba(28,98,88,.15);
}

.community-stream-claim.is-remove {
  background:rgba(39,93,85,.08);
  color:#60746f;
  box-shadow:none;
}

.community-stream-claim:disabled {
  opacity:.55;
  cursor:wait;
}

@keyframes communityMemoryDrift {
  from { transform:translateX(0); }
  to { transform:translateX(calc(-50% - .35rem)); }
}

@media(max-width:520px) {
  .community-stream-heading {
    align-items:start;
  }

  .community-stream-heading > span {
    max-width:9rem;
    font-size:.58rem;
  }

  .community-stream-card {
    width:235px;
  }

  .community-stream-track {
    animation-duration:44s;
  }
}

@media(prefers-reduced-motion:reduce) {
  .community-stream-track {
    animation:none !important;
    overflow-x:auto;
  }

  .community-stream-viewport {
    overflow-x:auto;
    mask-image:none;
    -webkit-mask-image:none;
  }
}


/* ============================================================
   EVENT COMMUNITY MEMORIES V80
   ============================================================ */
.event-community-group {
  margin-top:1.35rem;
  padding-top:1.1rem;
  border-top:1px solid rgba(79,154,145,.14);
}

.event-community-group .event-group-heading {
  position:relative;
}

.event-community-group .event-group-heading::before {
  content:"";
  position:absolute;
  left:-.65rem;
  top:.15rem;
  bottom:.15rem;
  width:3px;
  border-radius:999px;
  background:linear-gradient(
    180deg,
    rgba(93,202,188,.75),
    rgba(140,112,219,.52)
  );
}

.event-community-grid .event-slot-community {
  border-color:rgba(78,161,151,.22);
  background:
    radial-gradient(circle at 100% 0%,rgba(139,111,220,.08),transparent 45%),
    radial-gradient(circle at 0% 100%,rgba(76,202,185,.09),transparent 45%),
    rgba(255,255,255,.9);
}

.event-community-grid .event-slot-community.is-claimed {
  box-shadow:
    0 10px 25px rgba(30,79,71,.08),
    inset 0 0 0 1px rgba(85,183,169,.13);
}

.event-community-memory-link {
  display:block;
  color:inherit;
  text-decoration:none;
}

.event-community-claim-button {
  width:fit-content;
  margin-top:.35rem;
  padding:.4rem .58rem;
  border:0;
  border-radius:999px;
  background:#1d6359;
  color:#fff;
  cursor:pointer;
  font:inherit;
  font-size:.57rem;
  font-weight:950;
  box-shadow:0 5px 12px rgba(29,99,89,.14);
}

.event-community-claim-button.is-remove {
  background:rgba(37,92,84,.08);
  color:#64756f;
  box-shadow:none;
}

.event-community-claim-button:disabled {
  opacity:.5;
  cursor:wait;
}


/* ============================================================
   UNIFIED MINI POLAROIDS V81
   ------------------------------------------------------------
   Memory previews should always read as physical little keepsakes,
   not generic app thumbnails.

   Existing Collection thumbnails from V62 remain intact.
   This extends the same visual language to:
   - Standard Memories in Event Collections
   - Bonus Memories in Event Collections
   - Community Memories in Event Collections
   - Community Discoveries landing-page stream
   ============================================================ */

:root {
  --mini-polaroid-paper-top: #fffefa;
  --mini-polaroid-paper-bottom: #f3ecdf;
  --mini-polaroid-shadow:
    0 6px 13px rgba(24,54,46,.15),
    0 1px 2px rgba(24,54,46,.10);
}

/* ---------- Event Collection previews ---------- */

.event-slot-card.event-slot-found {
  overflow: visible;
  align-items: center;
}

.event-slot-card.event-slot-found .event-slot-image {
  position: relative;
  align-self: center;
  box-sizing: border-box;
  width: calc(100% - 18px);
  min-height: 0;
  aspect-ratio: 1 / 1.18;
  margin: 9px 8px 13px 10px;
  padding: 6px 6px 15px;
  overflow: visible;
  border-radius: 3px;
  background:
    linear-gradient(
      145deg,
      var(--mini-polaroid-paper-top) 0%,
      var(--mini-polaroid-paper-bottom) 100%
    );
  box-shadow: var(--mini-polaroid-shadow);
  transform: rotate(-1.7deg);
  transform-origin: center center;
}

/* Gentle alternation keeps a stack-of-real-prints feeling. */
.event-slot-card.event-slot-found:nth-child(even) .event-slot-image {
  transform: rotate(1.35deg);
}

.event-slot-card.event-slot-found .event-slot-image img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  border-radius: 1px;
  background: #e8efeb;
  box-shadow: 0 0 0 1px rgba(29,54,47,.055);
}

.event-slot-card.event-slot-found .event-slot-image > span {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 1px;
  background: #edf2ed;
  color: rgba(49,86,77,.30);
  box-shadow: 0 0 0 1px rgba(29,54,47,.055);
}

/* Very subtle "paper edge" in the larger bottom border. */
.event-slot-card.event-slot-found .event-slot-image::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 7px;
  height: 1px;
  border-radius: 999px;
  background: rgba(65,76,70,.12);
  pointer-events: none;
}

/*
 * Community cards wrap their preview in a link. Keep the link from clipping
 * the rotated print.
 */
.event-community-memory-link {
  overflow: visible;
  padding: 0;
}

/* ---------- Landing Community Stream previews ---------- */

.community-stream-image {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1.20;
  padding: 5px 5px 13px;
  overflow: visible;
  border-radius: 3px;
  background:
    linear-gradient(
      145deg,
      var(--mini-polaroid-paper-top) 0%,
      var(--mini-polaroid-paper-bottom) 100%
    );
  box-shadow: var(--mini-polaroid-shadow);
  transform: rotate(-1.8deg);
}

.community-stream-card:nth-child(even) .community-stream-image {
  transform: rotate(1.45deg);
}

.community-stream-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  border-radius: 1px;
  background: #e8efeb;
  box-shadow: 0 0 0 1px rgba(29,54,47,.055);
}

.community-stream-image > span {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 1px;
  background: #edf2ed;
  color: rgba(49,86,77,.30);
  box-shadow: 0 0 0 1px rgba(29,54,47,.055);
}

.community-stream-image::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 6px;
  height: 1px;
  border-radius: 999px;
  background: rgba(65,76,70,.12);
  pointer-events: none;
}

/*
 * Give the real-print edges enough air. Previously the stream thumbnail
 * deliberately filled its column edge-to-edge.
 */
.community-stream-card {
  grid-template-columns: 76px minmax(0,1fr);
  overflow: visible;
}

/* ---------- Harmonize existing Collection Polaroids ---------- */

/*
 * The Collection already used miniature Polaroids since V62.
 * Only align paper/shadow values so all preview locations now feel like
 * one component family.
 */
.found-thumb::before,
.collection-browser-thumb::before {
  background:
    linear-gradient(
      145deg,
      var(--mini-polaroid-paper-top) 0%,
      var(--mini-polaroid-paper-bottom) 100%
    );
  box-shadow: var(--mini-polaroid-shadow);
}

/* ---------- Responsive tuning ---------- */

@media(max-width:650px) {
  .event-slot-card.event-slot-found .event-slot-image {
    width: calc(100% - 14px);
    margin: 7px 6px 11px 8px;
    padding: 5px 5px 12px;
  }

  .event-slot-card.event-slot-found .event-slot-image::after {
    bottom: 5px;
  }
}

@media(max-width:520px) {
  .community-stream-card {
    grid-template-columns: 72px minmax(0,1fr);
  }

  .community-stream-image {
    padding: 4px 4px 11px;
  }

  .community-stream-image::after {
    bottom: 5px;
  }
}


/* ============================================================
   ADAPTIVE POLAROID IMAGE RATIOS V90
   ------------------------------------------------------------
   Mini Polaroids now follow the real source image ratio.
   Nothing is cropped into a forced square anymore.
   ============================================================ */

/* Event Collection previews */
.event-slot-card.event-slot-found .event-slot-image {
  aspect-ratio: auto !important;
  height: auto !important;
}

.event-slot-card.event-slot-found .event-slot-image img {
  width: 100%;
  height: auto !important;
  max-height: 150px;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

.event-slot-card.event-slot-found .event-slot-image > span {
  min-height: 70px;
  height: auto !important;
  aspect-ratio: 1 / 1;
}

/* Community stream previews */
.community-stream-image {
  aspect-ratio: auto !important;
  height: auto !important;
}

.community-stream-image img {
  width: 100%;
  height: auto !important;
  max-height: 110px;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

.community-stream-image > span {
  min-height: 62px;
  height: auto !important;
  aspect-ratio: 1 / 1;
}

/*
 * Collection thumbnails already use a compact fixed footprint.
 * Preserve that footprint, but show the full photo instead of cropping.
 */
.found-thumb img,
.collection-browser-thumb img {
  object-fit: contain !important;
  background: #edf2ed;
}


/* ============================================================
   UNIFORM PREVIEWS + ADAPTIVE MAIN MEMORY V91
   ============================================================ */

/*
 * PREVIEWS
 * --------
 * All compact preview Polaroids return to a consistent footprint.
 * The preview image may crop slightly with cover; that keeps lists,
 * streams and Event Collections visually calm and aligned.
 */

/* Event Collection previews */
.event-slot-card.event-slot-found .event-slot-image {
  width: calc(100% - 18px);
  min-height: 0;
  height: auto !important;
  aspect-ratio: 1 / 1.18 !important;
  margin: 9px 8px 13px 10px;
  padding: 6px 6px 15px;
}

.event-slot-card.event-slot-found .event-slot-image img {
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}

.event-slot-card.event-slot-found .event-slot-image > span {
  width: 100%;
  height: 100% !important;
  min-height: 0;
  aspect-ratio: auto !important;
}

/* Community Stream previews */
.community-stream-image {
  width: 100%;
  height: auto !important;
  aspect-ratio: 1 / 1.20 !important;
  padding: 5px 5px 13px;
}

.community-stream-image img {
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}

.community-stream-image > span {
  width: 100%;
  height: 100% !important;
  min-height: 0;
  aspect-ratio: auto !important;
}

/* Collection previews */
.found-thumb img,
.collection-browser-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  background: transparent;
}

/*
 * MAIN MEMORY
 * -----------
 * Only the large Polaroid inside the actual Memory page follows the
 * source image's real aspect ratio.
 *
 * - portrait remains portrait
 * - landscape remains landscape
 * - square remains square
 *
 * The paper frame naturally grows/shrinks with the image.
 */
.memory-screen .polaroid-photo {
  aspect-ratio: auto !important;
  height: auto !important;
}

.memory-screen .polaroid-photo img {
  width: 100%;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
}

/*
 * The existing living-photo animation still works. Its tiny scale/pan may
 * hide only a few edge pixels while moving; the resting composition uses
 * the complete source image.
 */

@media(max-width:650px) {
  .event-slot-card.event-slot-found .event-slot-image {
    width: calc(100% - 14px);
    margin: 7px 6px 11px 8px;
    padding: 5px 5px 12px;
  }
}

@media(max-width:520px) {
  .community-stream-image {
    padding: 4px 4px 11px;
  }
}


/* ============================================================
   SQUARE PREVIEW POLAROIDS V92
   ============================================================ */

/*
 * All preview Polaroids now use one consistent square photo area.
 * The surrounding paper still reads as a tiny Polaroid/Instax print,
 * but every preview occupies the same visual footprint.
 *
 * The full opened Memory view remains adaptive and is not affected.
 */

/* Event Collection previews */
.event-slot-card.event-slot-found .event-slot-image {
  aspect-ratio: 1 / 1 !important;
  padding: 6px 6px 15px;
}

.event-slot-card.event-slot-found .event-slot-image img,
.event-slot-card.event-slot-found .event-slot-image > span {
  width: 100%;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Community Stream previews */
.community-stream-image {
  aspect-ratio: 1 / 1 !important;
  padding: 5px 5px 13px;
}

.community-stream-image img,
.community-stream-image > span {
  width: 100%;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Last 5 + Browse Collection */
.found-thumb,
.collection-browser-thumb {
  aspect-ratio: 1 / 1 !important;
}

.found-thumb img,
.collection-browser-thumb img,
.found-thumb .collection-thumb-placeholder,
.collection-browser-thumb .collection-thumb-placeholder {
  width: 100%;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Keep paper edge visible under square photo area */
.found-thumb::before,
.collection-browser-thumb::before {
  inset: -5px -5px -11px;
}

/* Mobile stays square too */
@media(max-width:520px) {
  .community-stream-image {
    aspect-ratio: 1 / 1 !important;
  }

  .event-slot-card.event-slot-found .event-slot-image {
    aspect-ratio: 1 / 1 !important;
  }

  .found-thumb,
  .collection-browser-thumb {
    aspect-ratio: 1 / 1 !important;
  }
}


/* ============================================================
   EXPLORE SQUARE THUMBNAIL SIZE FIX V93
   ============================================================ */

/*
 * V92 made Browse Your Collection thumbnails square, but the thumbnail
 * container was allowed to grow with the card. Keep the square Polaroid,
 * but restore a compact fixed preview footprint so text/meta never gets
 * covered.
 */

.collection-browser-card {
  overflow: visible;
}

.collection-browser-thumb {
  position: relative;
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  aspect-ratio: 1 / 1 !important;
  align-self: center;
}

.collection-browser-thumb img,
.collection-browser-thumb .collection-thumb-placeholder {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

.collection-browser-card .collection-browser-copy,
.collection-browser-card .collection-browser-body,
.collection-browser-card .found-copy {
  min-width: 0;
  position: relative;
  z-index: 3;
}

/*
 * Ensure the paper frame/shadow stays behind the image and never overlaps
 * neighboring copy visually.
 */
.collection-browser-thumb::before {
  z-index: 0;
}

.collection-browser-thumb img,
.collection-browser-thumb .collection-thumb-placeholder {
  position: relative;
  z-index: 1;
}

.collection-browser-thumb::after {
  z-index: 2;
}

@media(max-width:520px) {
  .collection-browser-thumb {
    flex-basis: 62px !important;
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
  }
}


/* ============================================================
   AUTH-AWARE LANDING GUIDE V94
   ============================================================ */

#guestInstructionList {
  position: relative;
  overflow: visible;
}

/* Lower the fox so the paws visibly rest on the card edge. */
#guestInstructionList .landing-peek-fox {
  left: 1.35rem !important;
  top: -3.9rem !important;
  width: clamp(96px, 18vw, 126px) !important;
  z-index: 8;
}

/* Logged-in users get only a compact, optional guide. */
.member-memory-help {
  position: relative;
  margin: 2.25rem 0 1.25rem;
  border: 1px solid rgba(15,60,53,.10);
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0%, rgba(85,199,216,.09), transparent 13rem),
    rgba(255,255,255,.58);
  box-shadow: 0 12px 28px rgba(15,60,53,.045);
  overflow: visible;
}

.member-memory-help-summary {
  position: relative;
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1rem .9rem 7.2rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.member-memory-help-summary::-webkit-details-marker {
  display: none;
}

.member-help-fox {
  position: absolute;
  z-index: 4;
  left: 1rem;
  top: -3.35rem;
  width: 104px;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 7px 10px rgba(15,60,53,.12));
}

.member-memory-help-copy {
  min-width: 0;
  display: grid;
  gap: .12rem;
}

.member-memory-help-copy .landing-kicker {
  margin: 0;
  font-size: .52rem;
}

.member-memory-help-copy strong {
  color: var(--forest);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  line-height: 1.1;
}

.member-memory-help-copy > span {
  color: #7b8a84;
  font-size: .62rem;
}

.member-memory-help-chevron {
  flex: 0 0 auto;
  margin-left: auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(15,60,53,.07);
  color: #4e6a61;
  font-size: 1rem;
  transition: transform .18s ease;
}

.member-memory-help[open] .member-memory-help-chevron {
  transform: rotate(180deg);
}

.member-memory-help-body {
  display: grid;
  gap: .45rem;
  padding: .8rem;
  border-top: 1px solid rgba(15,60,53,.07);
}

.member-help-step {
  min-height: 58px;
  display: grid;
  grid-template-columns: 2rem minmax(0,1fr);
  gap: .65rem;
  align-items: center;
  padding: .6rem .7rem;
  border-radius: 13px;
  background: rgba(255,255,255,.48);
}

.member-help-step > span {
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .82rem;
  font-weight: 800;
}

.member-help-step strong {
  display: block;
  color: #294b43;
  font-size: .72rem;
}

.member-help-step p {
  margin: .12rem 0 0;
  color: #788781;
  font-size: .61rem;
  line-height: 1.45;
}

@media(max-width:560px) {
  #guestInstructionList .landing-peek-fox {
    left: 14px !important;
    top: -2.7rem !important;
    width: 80px !important;
    max-width: 80px !important;
  }

  .member-memory-help {
    margin-top: 1.9rem;
  }

  .member-memory-help-summary {
    min-height: 74px;
    padding: .8rem .75rem .75rem 5.75rem;
  }

  .member-help-fox {
    left: .65rem;
    top: -2.55rem;
    width: 82px;
  }

  .member-memory-help-copy strong {
    font-size: .96rem;
  }
}


/* ============================================================
   PREMIUM DISCOVERY / REVEAL V95
   ============================================================ */

.discovery-premium {
  background:#062e2a;
}

.discovery-premium .cover-bg {
  background-position:center 42%;
  filter:saturate(.88) contrast(1.02);
  transform:scale(1.055);
  animation:discoveryCoverBreath 11s ease-in-out infinite alternate;
}

.discovery-premium .cover-vignette {
  z-index:-2;
  background:
    linear-gradient(
      180deg,
      rgba(4,37,35,.12) 0%,
      rgba(4,37,35,.08) 24%,
      rgba(3,29,27,.24) 46%,
      rgba(3,22,20,.72) 71%,
      rgba(2,18,17,.96) 100%
    ),
    radial-gradient(
      ellipse at 50% 42%,
      rgba(126,227,220,.10) 0%,
      transparent 29%,
      rgba(2,19,18,.14) 58%,
      rgba(2,18,17,.55) 100%
    );
}

.discovery-aurora {
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.58;
  background:
    radial-gradient(circle at 18% 37%,rgba(84,199,216,.19),transparent 20rem),
    radial-gradient(circle at 80% 28%,rgba(239,106,50,.12),transparent 18rem),
    radial-gradient(circle at 53% 56%,rgba(142,223,197,.10),transparent 21rem);
  mix-blend-mode:screen;
  animation:discoveryAuroraDrift 9s ease-in-out infinite alternate;
}

.discovery.is-digital-collectable .discovery-aurora {
  background:
    radial-gradient(circle at 22% 35%,rgba(83,195,230,.24),transparent 20rem),
    radial-gradient(circle at 79% 29%,rgba(137,104,221,.22),transparent 18rem),
    radial-gradient(circle at 52% 55%,rgba(91,215,205,.12),transparent 21rem);
}

.discovery-grain {
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  opacity:.05;
  background-image:
    repeating-radial-gradient(
      circle at 17% 29%,
      rgba(255,255,255,.75) 0 1px,
      transparent 1px 4px
    );
  background-size:7px 7px;
  mix-blend-mode:soft-light;
}

.discovery-found-badge {
  position:absolute;
  z-index:5;
  top:calc(1.3rem + env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.42rem .72rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(2,28,25,.34);
  backdrop-filter:blur(9px);
  box-shadow:0 8px 20px rgba(0,0,0,.10);
  color:rgba(255,255,255,.82);
  font-size:.54rem;
  font-weight:950;
  letter-spacing:.17em;
  white-space:nowrap;
}

.discovery-found-dot {
  width:.38rem;
  height:.38rem;
  border-radius:50%;
  background:#f39a69;
  box-shadow:
    0 0 0 4px rgba(243,154,105,.10),
    0 0 14px rgba(243,154,105,.65);
  animation:discoveryFoundPulse 1.8s ease-in-out infinite;
}

.discovery.is-digital-collectable .discovery-found-dot {
  background:#7edbe5;
  box-shadow:
    0 0 0 4px rgba(126,219,229,.10),
    0 0 14px rgba(126,219,229,.75);
}

.discovery-relic {
  position:absolute;
  z-index:3;
  top:32%;
  left:50%;
  width:13.5rem;
  height:13.5rem;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  pointer-events:none;
}

.discovery-relic-glow {
  position:absolute;
  inset:15%;
  border-radius:50%;
  background:rgba(244,182,124,.18);
  filter:blur(24px);
  box-shadow:0 0 55px rgba(244,182,124,.18);
  animation:discoveryRelicGlow 3.4s ease-in-out infinite;
}

.discovery.is-digital-collectable .discovery-relic-glow {
  background:rgba(97,207,226,.22);
  box-shadow:0 0 58px rgba(119,119,228,.24);
}

.discovery-relic-orbit {
  position:absolute;
  border:1px solid rgba(255,255,255,.34);
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
}

.discovery-relic-orbit.orbit-one {
  width:11rem;
  height:11rem;
  animation:discoveryOrbitOne 9s linear infinite;
}

.discovery-relic-orbit.orbit-two {
  width:12.7rem;
  height:12.7rem;
  opacity:.45;
  border-style:dashed;
  animation:discoveryOrbitTwo 15s linear infinite reverse;
}

.discovery-relic-card {
  position:relative;
  width:6.6rem;
  height:7.8rem;
  padding:.38rem .38rem 1.2rem;
  border:1px solid rgba(255,255,255,.72);
  border-radius:3px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.92),rgba(238,231,215,.80));
  box-shadow:
    0 20px 40px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.12),
    0 0 38px rgba(235,181,123,.14);
  transform:rotate(-4deg);
  animation:discoveryRelicFloat 4.8s ease-in-out infinite;
}

.discovery-relic-image {
  height:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%,rgba(141,214,207,.22),transparent 50%),
    linear-gradient(145deg,#0c4a43,#082f2b);
}

.discovery-relic-mark {
  display:grid;
  place-items:center;
  width:2.35rem;
  height:2.35rem;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.32);
  color:rgba(255,255,255,.86);
  font-size:1rem;
  box-shadow:0 0 24px rgba(255,255,255,.10);
}

.discovery-relic-line {
  position:absolute;
  left:1.45rem;
  right:1.45rem;
  bottom:.55rem;
  height:2px;
  border-radius:999px;
  background:rgba(19,65,57,.22);
}

.discovery-type-seal {
  position:absolute;
  right:-.9rem;
  bottom:1.2rem;
  min-height:2.2rem;
  display:flex;
  align-items:center;
  gap:.38rem;
  padding:.42rem .6rem;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(6,42,37,.68);
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:.47rem;
  font-weight:950;
  letter-spacing:.08em;
  box-shadow:0 9px 20px rgba(0,0,0,.18);
}

.discovery.is-digital-collectable .discovery-type-seal {
  background:rgba(37,49,87,.72);
  border-color:rgba(137,210,226,.30);
}

.discovery-type-icon {
  width:1.15rem;
  height:1.15rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(239,106,50,.18);
  color:#ffc29e;
}

.discovery.is-digital-collectable .discovery-type-icon {
  background:rgba(104,205,221,.17);
  color:#9ce8f2;
}

.discovery-sparks {
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
}

.discovery-sparks i {
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  box-shadow:0 0 8px rgba(255,255,255,.72);
  opacity:0;
  animation:discoverySpark 4.8s ease-in-out infinite;
}

.discovery-sparks i:nth-child(1){left:15%;top:34%;animation-delay:.2s}
.discovery-sparks i:nth-child(2){left:26%;top:44%;animation-delay:1.1s}
.discovery-sparks i:nth-child(3){left:72%;top:38%;animation-delay:1.9s}
.discovery-sparks i:nth-child(4){left:82%;top:49%;animation-delay:.7s}
.discovery-sparks i:nth-child(5){left:38%;top:27%;animation-delay:2.7s}
.discovery-sparks i:nth-child(6){left:62%;top:24%;animation-delay:3.4s}
.discovery-sparks i:nth-child(7){left:19%;top:57%;animation-delay:2.2s}
.discovery-sparks i:nth-child(8){left:75%;top:60%;animation-delay:3.1s}
.discovery-sparks i:nth-child(9){left:47%;top:48%;animation-delay:.9s}
.discovery-sparks i:nth-child(10){left:87%;top:30%;animation-delay:2.4s}
.discovery-sparks i:nth-child(11){left:11%;top:24%;animation-delay:3.7s}
.discovery-sparks i:nth-child(12){left:56%;top:64%;animation-delay:1.5s}

.discovery-premium .discovery-copy {
  margin-top:auto;
  padding:clamp(24rem,57svh,34rem) 1.45rem 1rem;
  text-shadow:0 3px 18px rgba(0,0,0,.35);
}

.discovery-premium .discovery-type-label {
  margin-bottom:.7rem;
  color:rgba(220,248,242,.82);
  font-size:.56rem;
}

.discovery-premium .discovery-copy h1 {
  max-width:34rem;
  margin-inline:auto;
  font-size:clamp(3.15rem,12vw,5.35rem);
  line-height:.88;
  letter-spacing:-.068em;
  text-wrap:balance;
  text-shadow:
    0 7px 28px rgba(0,0,0,.34),
    0 0 35px rgba(101,207,196,.08);
}

.discovery-premium .discovery-intro {
  margin-top:.9rem;
  color:rgba(255,255,255,.80);
  font-size:.84rem;
  line-height:1.5;
}

.discovery-whisper {
  max-width:20rem;
  margin:1rem auto 0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.65rem;
  color:rgba(255,255,255,.45);
}

.discovery-whisper span {
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25));
}

.discovery-whisper span:last-child {
  background:linear-gradient(90deg,rgba(255,255,255,.25),transparent);
}

.discovery-whisper small {
  font-size:.43rem;
  font-weight:900;
  letter-spacing:.16em;
}

.reveal-button-premium {
  min-width:13rem;
  margin-top:1.05rem;
  gap:.13rem;
  padding:.68rem 1.2rem .58rem;
  border-color:rgba(255,255,255,.44);
  background:
    linear-gradient(180deg,rgba(15,72,63,.62),rgba(4,39,35,.66));
  box-shadow:
    0 14px 34px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 0 rgba(104,214,202,.0);
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
  animation:discoveryRevealPulse 2.6s ease-in-out infinite;
}

.discovery.is-digital-collectable .reveal-button-premium {
  background:
    linear-gradient(180deg,rgba(57,79,119,.65),rgba(24,50,78,.72));
  border-color:rgba(155,220,234,.44);
}

.reveal-button-premium:hover,
.reveal-button-premium:focus-visible {
  transform:translateY(-2px) scale(1.015);
  border-color:rgba(255,255,255,.72);
  box-shadow:
    0 17px 38px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 5px rgba(108,215,201,.07),
    0 0 30px rgba(108,215,201,.14);
}

.reveal-button-kicker {
  color:rgba(190,238,231,.70);
  font-size:.42rem;
  font-weight:950;
  letter-spacing:.18em;
}

.reveal-button-premium strong {
  font-size:.78rem;
  letter-spacing:.11em;
}

.discovery-tension {
  margin:.55rem auto 0;
  color:rgba(255,255,255,.40);
  font-size:.49rem;
  font-weight:700;
  letter-spacing:.03em;
}

.discovery-premium .discovery-footer {
  padding-top:.35rem;
  color:rgba(255,255,255,.48);
}

/* Physical / Digital identity */
.discovery.is-physical-collectable .discovery-type-label {
  color:#f7d2b9;
}

.discovery.is-digital-collectable .discovery-type-label {
  color:#a9eaf1;
}

/* Reveal transition gets a short flash before the Memory opens. */
.discovery-premium.is-leaving::after {
  content:"";
  position:absolute;
  z-index:20;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 47%,rgba(255,255,255,.75),rgba(135,225,214,.16) 26%,transparent 62%);
  animation:discoveryRevealFlash .68s ease-out both;
}

@keyframes discoveryCoverBreath {
  from {transform:scale(1.05)}
  to {transform:scale(1.085)}
}

@keyframes discoveryAuroraDrift {
  from {transform:translate3d(-1%,0,0) scale(1)}
  to {transform:translate3d(1.5%,-1%,0) scale(1.05)}
}

@keyframes discoveryFoundPulse {
  0%,100% {transform:scale(.9);opacity:.72}
  50% {transform:scale(1.12);opacity:1}
}

@keyframes discoveryRelicGlow {
  0%,100% {transform:scale(.90);opacity:.58}
  50% {transform:scale(1.08);opacity:1}
}

@keyframes discoveryOrbitOne {
  to {transform:rotate(360deg)}
}

@keyframes discoveryOrbitTwo {
  to {transform:rotate(360deg)}
}

@keyframes discoveryRelicFloat {
  0%,100% {transform:translateY(0) rotate(-4deg)}
  50% {transform:translateY(-8px) rotate(-2deg)}
}

@keyframes discoverySpark {
  0%,100% {opacity:0;transform:translateY(4px) scale(.55)}
  35% {opacity:.8}
  55% {opacity:.3;transform:translateY(-8px) scale(1)}
}

@keyframes discoveryRevealPulse {
  0%,100% {
    box-shadow:
      0 14px 34px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.16),
      0 0 0 0 rgba(104,214,202,0);
  }
  50% {
    box-shadow:
      0 16px 38px rgba(0,0,0,.25),
      inset 0 1px 0 rgba(255,255,255,.18),
      0 0 0 7px rgba(104,214,202,.055);
  }
}

@keyframes discoveryRevealFlash {
  0% {opacity:0;transform:scale(.72)}
  32% {opacity:1}
  100% {opacity:0;transform:scale(1.12)}
}

@media(max-width:520px) {
  .discovery-relic {
    top:31%;
    width:11.8rem;
    height:11.8rem;
  }

  .discovery-relic-card {
    width:5.7rem;
    height:6.85rem;
  }

  .discovery-relic-orbit.orbit-one {
    width:9.6rem;
    height:9.6rem;
  }

  .discovery-relic-orbit.orbit-two {
    width:11.1rem;
    height:11.1rem;
  }

  .discovery-type-seal {
    right:-.5rem;
    bottom:.75rem;
    font-size:.42rem;
  }

  .discovery-premium .discovery-copy {
    padding:
      clamp(20rem,54svh,29rem)
      1.1rem
      .75rem;
  }

  .discovery-premium .discovery-copy h1 {
    font-size:clamp(2.9rem,13vw,4.5rem);
  }

  .discovery-premium .discovery-intro {
    font-size:.78rem;
  }
}

@media(max-height:720px) {
  .discovery-relic {
    top:27%;
    transform:translate(-50%,-50%) scale(.84);
  }

  .discovery-premium .discovery-copy {
    padding-top:45svh;
  }

  .discovery-premium .discovery-copy h1 {
    font-size:clamp(2.55rem,10vw,4rem);
  }

  .discovery-premium .discovery-intro {
    margin-top:.65rem;
  }

  .discovery-whisper {
    margin-top:.7rem;
  }

  .reveal-button-premium {
    margin-top:.75rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  .discovery-premium .cover-bg,
  .discovery-aurora,
  .discovery-found-dot,
  .discovery-relic-glow,
  .discovery-relic-card,
  .discovery-relic-orbit,
  .discovery-sparks i,
  .reveal-button-premium {
    animation:none !important;
  }
}


/* ============================================================
   CINEMATIC DISCOVERY CLEANUP V96
   ============================================================ */

.discovery-relic,
.discovery-type-seal,
.discovery-type-label {
  display:none !important;
}

.discovery-premium .cover-vignette {
  background:
    linear-gradient(
      180deg,
      rgba(4,37,35,.04) 0%,
      rgba(4,37,35,.03) 28%,
      rgba(3,29,27,.10) 48%,
      rgba(3,22,20,.60) 72%,
      rgba(2,18,17,.94) 100%
    ),
    radial-gradient(
      ellipse at 52% 38%,
      rgba(137,226,215,.08) 0%,
      transparent 31%,
      rgba(2,19,18,.08) 58%,
      rgba(2,18,17,.38) 100%
    );
}

.discovery-memory-aura {
  position:absolute;
  z-index:2;
  left:50%;
  top:43%;
  width:min(68vw, 30rem);
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:.32;
}

.discovery-memory-aura::before,
.discovery-memory-aura::after {
  content:"";
  position:absolute;
  inset:13%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  filter:drop-shadow(0 0 18px rgba(132,224,214,.08));
  animation:discoveryAuraTurn 18s linear infinite;
}

.discovery-memory-aura::after {
  inset:24%;
  border-style:dashed;
  opacity:.42;
  animation-direction:reverse;
  animation-duration:24s;
}

.discovery-memory-aura i {
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 12px rgba(255,255,255,.38);
  animation:discoveryAuraSpark 4.5s ease-in-out infinite;
}

.discovery-memory-aura i:nth-child(1){left:20%;top:48%;animation-delay:.2s}
.discovery-memory-aura i:nth-child(2){right:18%;top:33%;animation-delay:1.5s}
.discovery-memory-aura i:nth-child(3){left:54%;bottom:14%;animation-delay:2.8s}

.discovery-premium .discovery-copy {
  padding:
    clamp(28rem, 66svh, 39rem)
    1.45rem
    1rem;
}

.discovery-collectable-chip {
  width:fit-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin:0 auto .85rem;
  padding:.42rem .7rem;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(3,31,28,.42);
  backdrop-filter:blur(10px);
  box-shadow:
    0 8px 22px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.08);
  color:#f4d0b6;
  font-size:.5rem;
  font-weight:950;
  letter-spacing:.13em;
}

.discovery.is-digital-collectable .discovery-collectable-chip {
  color:#b1edf4;
  background:rgba(21,48,65,.46);
  border-color:rgba(160,226,237,.24);
}

.discovery-collectable-glyph {
  width:1.25rem;
  height:1.25rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(239,106,50,.14);
  color:#ffc39f;
  font-size:.64rem;
}

.discovery.is-digital-collectable .discovery-collectable-glyph {
  background:rgba(100,206,222,.14);
  color:#a8ebf3;
}

.discovery-premium .discovery-copy h1 {
  margin-top:0;
  font-size:clamp(3rem,11.5vw,5rem);
  line-height:.9;
}

.discovery-premium .discovery-intro {
  max-width:25rem;
  margin-top:.9rem;
  color:rgba(255,255,255,.82);
  font-size:.82rem;
}

.discovery-whisper {
  max-width:16rem;
  margin-top:.85rem;
}

.discovery-whisper small {
  font-size:.42rem;
  color:rgba(255,255,255,.42);
}

.reveal-button-premium {
  min-width:14rem;
  margin-top:.9rem;
  padding:.74rem 1.25rem .63rem;
  background:
    linear-gradient(180deg,rgba(18,77,67,.74),rgba(4,42,37,.76));
  border-color:rgba(255,255,255,.48);
  box-shadow:
    0 15px 34px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.17),
    0 0 28px rgba(104,214,202,.07);
}

.discovery.is-digital-collectable .reveal-button-premium {
  background:
    linear-gradient(180deg,rgba(37,76,103,.74),rgba(17,47,66,.80));
  box-shadow:
    0 15px 34px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.17),
    0 0 28px rgba(111,194,227,.08);
}

.discovery-tension {
  margin-top:.5rem;
  color:rgba(255,255,255,.36);
  font-size:.48rem;
}

.discovery-found-badge {
  padding:.34rem .6rem;
  background:rgba(2,28,25,.24);
  border-color:rgba(255,255,255,.13);
  color:rgba(255,255,255,.66);
  box-shadow:none;
}

@keyframes discoveryAuraTurn {
  to { transform:rotate(360deg); }
}

@keyframes discoveryAuraSpark {
  0%,100% { opacity:.05; transform:translateY(5px) scale(.7); }
  45% { opacity:.7; transform:translateY(-5px) scale(1); }
}

@media(max-width:520px) {
  .discovery-memory-aura {
    top:42%;
    width:76vw;
  }

  .discovery-premium .discovery-copy {
    padding:
      clamp(25rem, 63svh, 34rem)
      1.05rem
      .75rem;
  }

  .discovery-premium .discovery-copy h1 {
    font-size:clamp(2.85rem,12.5vw,4.35rem);
  }
}

@media(max-height:720px) {
  .discovery-memory-aura {
    top:36%;
    width:min(54vw,22rem);
  }

  .discovery-premium .discovery-copy {
    padding-top:52svh;
  }

  .discovery-whisper {
    margin-top:.55rem;
  }

  .reveal-button-premium {
    margin-top:.65rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  .discovery-memory-aura::before,
  .discovery-memory-aura::after,
  .discovery-memory-aura i {
    animation:none !important;
  }
}


/* ============================================================
   CINEMATIC MEMORY FOG V97
   ============================================================ */

/*
 * Three soft fog layers drift across the cover artwork before Reveal.
 * They sit above the background image/vignette but below all content.
 * On Tap to Reveal the fog parts and dissolves before the Memory opens.
 */

.discovery-fog {
  position:absolute;
  z-index:0;
  left:-26%;
  width:152%;
  pointer-events:none;
  opacity:0;
  filter:blur(20px);
  will-change:transform, opacity;
  transform:translate3d(0,0,0);
  transition:
    opacity .68s var(--ease),
    transform .78s cubic-bezier(.18,.74,.2,1),
    filter .78s ease;
}

/* broad, distant haze */
.discovery-fog-back {
  top:13%;
  height:35%;
  opacity:.20;
  background:
    radial-gradient(
      ellipse at 18% 58%,
      rgba(225,244,239,.44) 0 12%,
      rgba(203,231,224,.22) 26%,
      transparent 56%
    ),
    radial-gradient(
      ellipse at 58% 42%,
      rgba(232,247,242,.34) 0 10%,
      rgba(205,232,225,.18) 30%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 87% 60%,
      rgba(227,245,240,.28) 0 8%,
      rgba(210,235,229,.16) 27%,
      transparent 56%
    );
  animation:discoveryFogBackDrift 18s ease-in-out infinite alternate;
}

/* middle layer crosses the character / lower logo */
.discovery-fog-mid {
  top:34%;
  height:40%;
  opacity:.28;
  filter:blur(24px);
  background:
    radial-gradient(
      ellipse at 12% 50%,
      rgba(233,247,243,.48) 0 11%,
      rgba(211,236,230,.24) 25%,
      transparent 53%
    ),
    radial-gradient(
      ellipse at 48% 48%,
      rgba(233,248,243,.38) 0 13%,
      rgba(208,234,228,.20) 30%,
      transparent 59%
    ),
    radial-gradient(
      ellipse at 82% 38%,
      rgba(233,247,243,.42) 0 10%,
      rgba(211,236,230,.22) 27%,
      transparent 55%
    );
  animation:discoveryFogMidDrift 14s ease-in-out infinite alternate;
}

/* closer low fog, intentionally strongest near the lower image */
.discovery-fog-front {
  top:55%;
  height:38%;
  opacity:.34;
  filter:blur(27px);
  background:
    radial-gradient(
      ellipse at 14% 52%,
      rgba(239,249,246,.56) 0 10%,
      rgba(218,239,234,.26) 28%,
      transparent 57%
    ),
    radial-gradient(
      ellipse at 50% 55%,
      rgba(237,249,245,.48) 0 12%,
      rgba(216,239,233,.24) 30%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 87% 45%,
      rgba(239,249,246,.52) 0 10%,
      rgba(219,240,234,.25) 28%,
      transparent 58%
    );
  animation:discoveryFogFrontDrift 11s ease-in-out infinite alternate;
}

/*
 * Digital Collectables get a slightly cooler mist.
 * Physical stays warmer/neutral and more natural.
 */
.discovery.is-digital-collectable .discovery-fog-back,
.discovery.is-digital-collectable .discovery-fog-mid,
.discovery.is-digital-collectable .discovery-fog-front {
  filter:blur(22px) hue-rotate(8deg) saturate(1.08);
}

/*
 * Reveal:
 * back fog rises and fades,
 * mid layer splits sideways,
 * front layer drops and thins.
 * Together this feels like the hidden Memory is being uncovered.
 */
.discovery-premium.is-leaving .discovery-fog-back {
  opacity:0 !important;
  transform:translate3d(0,-11%,0) scale(1.09);
  filter:blur(38px);
  animation:none !important;
}

.discovery-premium.is-leaving .discovery-fog-mid {
  opacity:0 !important;
  transform:translate3d(16%,2%,0) scale(1.14);
  filter:blur(42px);
  animation:none !important;
}

.discovery-premium.is-leaving .discovery-fog-front {
  opacity:0 !important;
  transform:translate3d(-18%,10%,0) scale(1.16);
  filter:blur(46px);
  animation:none !important;
}

@keyframes discoveryFogBackDrift {
  0% {
    transform:translate3d(-3%,0,0) scale(1.02);
  }
  100% {
    transform:translate3d(4%,-2%,0) scale(1.08);
  }
}

@keyframes discoveryFogMidDrift {
  0% {
    transform:translate3d(4%,1%,0) scale(1.04);
  }
  100% {
    transform:translate3d(-5%,-1%,0) scale(1.10);
  }
}

@keyframes discoveryFogFrontDrift {
  0% {
    transform:translate3d(-5%,2%,0) scale(1.05);
  }
  100% {
    transform:translate3d(5%,-2%,0) scale(1.12);
  }
}

/*
 * Short screens get slightly less fog so the lower headline/CTA
 * never lose contrast.
 */
@media(max-height:720px) {
  .discovery-fog-back {
    opacity:.16;
  }

  .discovery-fog-mid {
    opacity:.22;
  }

  .discovery-fog-front {
    opacity:.25;
  }
}

/* Mobile: keep the same effect but slightly tighter/lighter. */
@media(max-width:520px) {
  .discovery-fog {
    left:-34%;
    width:168%;
  }

  .discovery-fog-back {
    opacity:.17;
  }

  .discovery-fog-mid {
    opacity:.24;
  }

  .discovery-fog-front {
    opacity:.29;
  }
}

@media(prefers-reduced-motion:reduce) {
  .discovery-fog {
    animation:none !important;
    transition:opacity .25s ease !important;
    transform:none !important;
  }

  .discovery-premium.is-leaving .discovery-fog {
    opacity:0 !important;
  }
}


/* ============================================================
   MEMORY STORY FIRST V98
   ============================================================ */

/*
 * The Memory text is the emotional core of the page.
 * Give it a proper keepsake/story treatment and place it before
 * any Special Code / bonus mechanics.
 */

.memory-story {
  position:relative;
  margin:1.05rem 0 1.35rem;
  padding:1.15rem 1.1rem 1rem;
  overflow:hidden;
  border:1px solid rgba(20,79,68,.10);
  border-radius:20px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(85,199,216,.08),
      transparent 13rem
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.76),
      rgba(248,243,231,.68)
    );
  box-shadow:
    0 14px 34px rgba(15,60,53,.05),
    inset 0 1px 0 rgba(255,255,255,.60);
}

.memory-story::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:
    linear-gradient(
      180deg,
      rgba(239,106,50,.78),
      rgba(85,199,216,.60)
    );
}

.memory-story::after {
  content:"";
  position:absolute;
  right:-2.8rem;
  top:-2.8rem;
  width:8rem;
  height:8rem;
  border-radius:50%;
  border:1px solid rgba(85,199,216,.09);
  box-shadow:
    0 0 0 1.2rem rgba(85,199,216,.025),
    0 0 0 2.4rem rgba(239,106,50,.018);
  pointer-events:none;
}

.memory-story-heading {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:.72rem;
  margin-bottom:.8rem;
}

.memory-story-mark {
  flex:0 0 auto;
  width:2.25rem;
  height:2.25rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(15,60,53,.07);
  color:var(--fox);
  font-size:1.08rem;
}

.memory-story-kicker {
  margin:0 0 .14rem;
  color:#5c958d;
  font-size:.5rem;
  font-weight:950;
  letter-spacing:.16em;
}

.memory-story-heading h2 {
  margin:0;
  color:#23483f;
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.28rem;
  line-height:1.08;
  letter-spacing:-.018em;
}

.memory-story .memory-text {
  position:relative;
  z-index:1;
  margin:0;
  color:#2f443d;
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.02rem;
  line-height:1.75;
  letter-spacing:.002em;
  white-space:pre-line;
}

.memory-story-signature {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.6rem;
  margin-top:1rem;
  color:#8c9892;
}

.memory-story-signature span {
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(15,60,53,.13)
    );
}

.memory-story-signature span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(15,60,53,.13),
      transparent
    );
}

.memory-story-signature small {
  font-size:.42rem;
  font-weight:900;
  letter-spacing:.16em;
}

/*
 * Special claim is still special, but now visually secondary
 * to the actual Memory story.
 */
.memory-code-unlock {
  margin-top:.75rem !important;
  padding:1rem !important;
  border-radius:18px !important;
  box-shadow:
    0 10px 24px rgba(15,60,53,.045) !important;
}

.memory-code-unlock-head {
  align-items:flex-start;
}

.memory-code-unlock-head h3 {
  font-size:1rem;
  line-height:1.18;
}

.memory-code-unlock-copy {
  font-size:.7rem;
  line-height:1.5;
}

.memory-code-unlock-kicker {
  font-size:.48rem;
  letter-spacing:.14em;
}

@media(max-width:520px) {
  .memory-story {
    margin-top:.9rem;
    padding:1rem .95rem .9rem;
    border-radius:18px;
  }

  .memory-story-heading h2 {
    font-size:1.15rem;
  }

  .memory-story .memory-text {
    font-size:.96rem;
    line-height:1.7;
  }

  .memory-story-mark {
    width:2rem;
    height:2rem;
  }
}


/* ============================================================
   COLLECTION POLAROID OVERFLOW FIX V99
   ============================================================ */

/*
 * The miniature Polaroid paper uses negative insets and rotation.
 * Older rules deliberately set the parent cards to overflow:visible,
 * which lets the paper/shadow escape the left/right card boundary.
 *
 * Keep the Polaroid effect, but contain it inside the list card.
 */
.found-card,
.collection-browser-card {
  overflow: hidden !important;
}

/*
 * Give the preview column enough inner breathing room so the rotated
 * paper edge stays visible instead of being hard-cut against the card.
 */
.found-card {
  padding-left: .72rem;
}

.collection-browser-card {
  padding-left: .48rem;
}

/*
 * Slightly reduce the paper overshoot horizontally while preserving
 * the larger bottom Polaroid border.
 */
.found-thumb::before,
.collection-browser-thumb::before {
  inset: -3px -3px -10px !important;
}

.found-thumb::after,
.collection-browser-thumb::after {
  bottom: -6px !important;
}

/*
 * Keep the rotated image itself fully inside its reserved square.
 */
.found-thumb,
.collection-browser-thumb {
  max-width: 100%;
  box-sizing: border-box;
}

@media(max-width:520px) {
  .found-card {
    padding-left: .62rem;
  }

  .collection-browser-card {
    padding-left: .42rem;
  }

  .found-thumb::before,
  .collection-browser-thumb::before {
    inset: -2px -2px -8px !important;
  }

  .found-thumb::after,
  .collection-browser-thumb::after {
    bottom: -5px !important;
  }
}


/* ============================================================
   MEMORY STORY TEXT-ONLY V102
   ============================================================ */

/*
 * The static "THE MEMORY / A story worth keeping." heading and the
 * decorative signature were identical for every Memory, so they are removed.
 * The actual Memory text is now the only content in this panel.
 */

.memory-story-heading,
.memory-story-mark,
.memory-story-kicker,
.memory-story-signature {
  display: none !important;
}

.memory-story {
  margin: 1rem 0 1.3rem;
  padding: 1.1rem 1.15rem;
}

.memory-story .memory-text {
  margin: 0;
  color: #2f443d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.03rem;
  line-height: 1.78;
  letter-spacing: .002em;
  white-space: pre-line;
}

@media(max-width:520px) {
  .memory-story {
    padding: 1rem;
  }

  .memory-story .memory-text {
    font-size: .97rem;
    line-height: 1.72;
  }
}


/* ============================================================
   MEMORY SIGNATURE + PHYSICAL NOTE V103
   ============================================================ */

/*
 * Keep the story itself text-only, but restore the small Paws and Leaves
 * signature as a quiet visual closing line.
 */
.memory-story .memory-story-signature {
  display:grid !important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.6rem;
  margin-top:1rem;
  color:#8c9892;
}

.memory-story .memory-story-signature span {
  display:block;
  height:1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(15,60,53,.13)
    );
}

.memory-story .memory-story-signature span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(15,60,53,.13),
      transparent
    );
}

.memory-story .memory-story-signature small {
  display:block;
  font-size:.42rem;
  font-weight:900;
  letter-spacing:.16em;
}

/*
 * The NFC / physical keepsake note is relevant only for Physical
 * Collectables. JS toggles .is-hidden from the authoritative Memory type.
 */
#physicalMemoryNote.is-hidden {
  display:none !important;
}


/* ============================================================
   ARACHNO PULL TO REFRESH V108
   Visual-only companion to the native pull gesture.
   ============================================================ */

.arachno-ptr {
  --arachno-pull: 0;
  --arachno-progress: 0;
  position: fixed;
  z-index: 9999;
  left: 50%;
  top: 0;
  width: min(100vw, 760px);
  height: 172px;
  pointer-events: none !important;
  opacity: calc(var(--arachno-progress) * .98);
  transform:
    translate3d(
      -50%,
      calc(-154px + (var(--arachno-pull) * 1px)),
      0
    );
  transition:
    transform .26s cubic-bezier(.22,.78,.24,1),
    opacity .18s ease;
  will-change: transform, opacity;
}

.arachno-ptr.is-tracking {
  transition: none;
}

.arachno-ptr-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.arachno-ptr-pill {
  position: absolute;
  z-index: 5;
  top: 12px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .48rem;
  min-width: 158px;
  min-height: 32px;
  padding: .44rem .78rem;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(11,73,69,.91),
      rgba(5,47,44,.92)
    );
  color: rgba(255,255,255,.94);
  box-shadow:
    0 10px 26px rgba(3,35,33,.22),
    inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  transform:
    translateX(-50%)
    scale(calc(.92 + (var(--arachno-progress) * .08)));
}

.arachno-ptr-pill > span:last-child {
  font-size: .49rem;
  font-weight: 950;
  letter-spacing: .13em;
  white-space: nowrap;
}

.arachno-ptr-pulse {
  width: .42rem;
  height: .42rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #82edf6;
  box-shadow:
    0 0 0 4px rgba(130,237,246,.08),
    0 0 13px rgba(130,237,246,.58);
}

.arachno-ptr-web {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 20px;
  width: 260px;
  height: 145px;
  transform:
    translateX(-50%)
    scaleY(calc(.55 + (var(--arachno-progress) * .45)));
  transform-origin: top center;
  opacity: calc(.08 + (var(--arachno-progress) * .92));
  overflow: visible;
}

.arachno-ptr-web path {
  fill: none;
  stroke: rgba(235,253,253,.86);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-dasharray: 2.5 3.5;
  filter: drop-shadow(0 0 3px rgba(107,226,238,.38));
}

.arachno-ptr-character-wrap {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -4px;
  width: 116px;
  height: 82px;
  transform:
    translate3d(
      -50%,
      calc(58px - (var(--arachno-progress) * 62px)),
      0
    )
    scale(calc(.78 + (var(--arachno-progress) * .22)));
  transform-origin: 50% 90%;
  opacity: calc(.02 + (var(--arachno-progress) * .98));
  will-change: transform, opacity;
}

.arachno-ptr-character {
  display: block;
  width: 100%;
  height: auto;
  filter:
    saturate(1.05)
    drop-shadow(0 8px 14px rgba(4,55,56,.22));
}

.arachno-ptr.is-ready .arachno-ptr-pill {
  border-color: rgba(130,237,246,.68);
  box-shadow:
    0 12px 28px rgba(3,35,33,.26),
    0 0 0 5px rgba(130,237,246,.05),
    0 0 26px rgba(130,237,246,.14);
}

.arachno-ptr.is-ready .arachno-ptr-web path {
  stroke-dasharray: none;
  stroke-width: 1.65;
}

.arachno-ptr.is-ready .arachno-ptr-pulse {
  animation: arachnoPtrReady .7s ease-in-out infinite alternate;
}

.arachno-ptr.is-committed .arachno-ptr-character-wrap {
  animation: arachnoPtrTugCharacter .48s cubic-bezier(.2,.88,.2,1) both;
}

.arachno-ptr.is-committed .arachno-ptr-web {
  animation: arachnoPtrTugWeb .48s cubic-bezier(.2,.88,.2,1) both;
}

.arachno-ptr.is-committed .arachno-ptr-pill {
  animation: arachnoPtrTugPill .48s cubic-bezier(.2,.88,.2,1) both;
}

@keyframes arachnoPtrReady {
  from {
    transform: scale(.90);
    opacity: .72;
  }
  to {
    transform: scale(1.18);
    opacity: 1;
  }
}

@keyframes arachnoPtrTugCharacter {
  0% {
    transform: translate3d(-50%,-4px,0) scale(1);
  }
  48% {
    transform: translate3d(-50%,11px,0) scale(.95,1.07);
  }
  100% {
    transform: translate3d(-50%,-3px,0) scale(1.02,.98);
  }
}

@keyframes arachnoPtrTugWeb {
  0% {
    transform: translateX(-50%) scaleY(1);
  }
  48% {
    transform: translateX(-50%) scaleY(1.14);
  }
  100% {
    transform: translateX(-50%) scaleY(.95);
  }
}

@keyframes arachnoPtrTugPill {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  48% {
    transform: translateX(-50%) translateY(9px);
  }
  100% {
    transform: translateX(-50%) translateY(2px);
  }
}

@media(max-width:520px) {
  .arachno-ptr-character-wrap {
    width: 100px;
  }

  .arachno-ptr-web {
    width: 220px;
  }

  .arachno-ptr-pill {
    min-width: 148px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .arachno-ptr,
  .arachno-ptr-pill,
  .arachno-ptr-web,
  .arachno-ptr-character-wrap,
  .arachno-ptr-pulse {
    animation: none !important;
    transition: none !important;
  }
}


/* ============================================================
   ARACHNO PTR V111 — POSITION + STANDALONE COMPENSATION
   ============================================================ */

/*
 * Base position moved another 15px down.
 * Standalone/PWA gets a small extra compensation because iOS uses a
 * different viewport/chrome geometry than mobile Safari.
 */
.arachno-ptr {
  top: 77px;
}

@media(max-width:520px) {
  .arachno-ptr {
    top: 85px;
  }
}

/*
 * iOS / installed WebApp mode:
 * +18px beyond the mobile-browser position so the scene visually aligns
 * more closely with Safari's browser presentation.
 */
body.is-standalone-app .arachno-ptr {
  top: 95px;
}

@media(max-width:520px) {
  body.is-standalone-app .arachno-ptr {
    top: 103px;
  }
}

/* CSS-native fallback for browsers that expose display-mode directly. */
@media(display-mode: standalone) {
  .arachno-ptr {
    top: 95px;
  }
}

@media(display-mode: standalone) and (max-width:520px) {
  .arachno-ptr {
    top: 103px;
  }
}


/* ============================================================
   SHARE BUTTERFLIES V112
   ============================================================ */

#shareButton {
  position: relative;
  isolation: isolate;
  overflow: visible;
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

#shareButton:hover,
#shareButton:focus-visible,
#shareButton.is-butterfly-hover {
  transform: translateY(-2px);
  border-color: rgba(85,199,216,.42);
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(85,199,216,.16),
      transparent 70%
    ),
    rgba(255,255,255,.62);
  box-shadow:
    0 11px 25px rgba(15,60,53,.09),
    0 0 0 4px rgba(85,199,216,.045);
}

#shareButton.is-butterfly-burst {
  animation: shareButtonButterflyPulse .62s cubic-bezier(.18,.86,.22,1);
}

.share-butterfly-layer {
  position: fixed;
  z-index: 10050;
  inset: 0;
  overflow: hidden;
  pointer-events: none !important;
  contain: layout style paint;
}

.share-butterfly {
  --bf-size: 16px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bf-size);
  height: calc(var(--bf-size) * .72);
  transform:
    translate3d(
      calc(var(--bf-x) - (var(--bf-size) * .5)),
      calc(var(--bf-y) - (var(--bf-size) * .5)),
      0
    );
  opacity: 0;
  animation:
    shareButterflyFlight var(--bf-duration) cubic-bezier(.15,.62,.26,1)
    var(--bf-delay) forwards;
  will-change: transform, opacity;
  background:
    linear-gradient(
      90deg,
      transparent 43%,
      rgba(35,75,66,.78) 44% 56%,
      transparent 57%
    );
  border-radius: 50%;
  filter: drop-shadow(0 3px 5px rgba(27,80,72,.10));
}

.share-butterfly::before,
.share-butterfly::after {
  content: "";
  position: absolute;
  top: 7%;
  width: 56%;
  height: 78%;
  background:
    radial-gradient(
      circle at 36% 35%,
      hsla(var(--bf-hue-2), 92%, 76%, .98) 0 18%,
      transparent 19%
    ),
    linear-gradient(
      145deg,
      hsla(var(--bf-hue), 90%, 65%, .98),
      hsla(var(--bf-hue-2), 88%, 58%, .94)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    0 1px 4px rgba(23,57,52,.12);
}

.share-butterfly::before {
  right: 48%;
  border-radius: 78% 34% 72% 38%;
  transform-origin: 100% 58%;
  animation: shareButterflyWingLeft .18s ease-in-out infinite alternate;
}

.share-butterfly::after {
  left: 48%;
  border-radius: 34% 78% 38% 72%;
  transform-origin: 0 58%;
  animation: shareButterflyWingRight .18s ease-in-out infinite alternate;
}

@keyframes shareButtonButterflyPulse {
  0% {
    transform: translateY(0) scale(1);
  }
  36% {
    transform: translateY(-3px) scale(1.025);
    box-shadow:
      0 14px 30px rgba(15,60,53,.11),
      0 0 0 7px rgba(85,199,216,.06);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes shareButterflyWingLeft {
  from {
    transform: rotateY(18deg) rotate(-12deg) scaleX(.86);
  }
  to {
    transform: rotateY(68deg) rotate(-4deg) scaleX(.52);
  }
}

@keyframes shareButterflyWingRight {
  from {
    transform: rotateY(-18deg) rotate(12deg) scaleX(.86);
  }
  to {
    transform: rotateY(-68deg) rotate(4deg) scaleX(.52);
  }
}

@keyframes shareButterflyFlight {
  0% {
    opacity: 0;
    transform:
      translate3d(
        calc(var(--bf-x) - (var(--bf-size) * .5)),
        calc(var(--bf-y) - (var(--bf-size) * .5)),
        0
      )
      scale(.62)
      rotate(0deg);
  }

  12% {
    opacity: .98;
  }

  48% {
    opacity: .96;
    transform:
      translate3d(
        calc(var(--bf-x) + var(--bf-drift-x)),
        calc(var(--bf-y) + (var(--bf-travel-y) * .47)),
        0
      )
      scale(1)
      rotate(var(--bf-rotate));
  }

  100% {
    opacity: 0;
    transform:
      translate3d(
        calc(var(--bf-x) + var(--bf-travel-x)),
        calc(var(--bf-y) + var(--bf-travel-y)),
        0
      )
      scale(.82)
      rotate(calc(var(--bf-rotate) * -1.3));
  }
}

@media(prefers-reduced-motion:reduce) {
  #shareButton.is-butterfly-burst,
  .share-butterfly,
  .share-butterfly::before,
  .share-butterfly::after {
    animation: none !important;
  }

  .share-butterfly-layer {
    display: none !important;
  }
}


/* ============================================================
   INTEGRATED SPECIAL GIFT CARD V114
   ============================================================ */

.memory-gift-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 1.1rem 0 1.35rem;
  padding: 1.1rem;
  border: 1px solid rgba(15,60,53,.10);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(85,199,216,.14), transparent 14rem),
    radial-gradient(circle at 0% 100%, rgba(239,106,50,.08), transparent 12rem),
    rgba(255,255,255,.70);
  box-shadow:
    0 16px 36px rgba(15,60,53,.055),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.memory-gift-glow {
  position: absolute;
  z-index: -1;
  top: -6rem;
  right: -5rem;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: rgba(85,199,216,.12);
  filter: blur(22px);
}

.memory-gift-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .9rem;
}

.memory-gift-head h2 {
  margin: .28rem 0 .35rem;
  color: #29483f;
  font-size: clamp(1.45rem, 6vw, 2rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.memory-gift-description {
  max-width: 30rem;
  margin: 0;
  color: #6c7c76;
  font-size: .72rem;
  line-height: 1.55;
}

.memory-gift-badge {
  flex: 0 0 auto;
  max-width: 11rem;
  padding: .35rem .55rem;
  border-radius: 999px;
  background: rgba(85,199,216,.11);
  color: #397b86;
  font-size: .48rem;
  font-weight: 950;
  line-height: 1.2;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
}

.memory-gift-loading,
.memory-gift-unavailable {
  margin-top: 1rem;
  padding: .85rem;
  border-radius: 14px;
  background: rgba(15,60,53,.045);
  color: #718078;
  font-size: .67rem;
}

.memory-gift-unavailable {
  display: grid;
  gap: .18rem;
}

.memory-gift-unavailable strong {
  color: #47645b;
  font-size: .76rem;
}

.memory-gift-steps {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .55rem;
  margin-top: 1rem;
}

.memory-gift-steps article {
  display: grid;
  grid-template-columns: 1.65rem minmax(0,1fr);
  gap: .5rem;
  align-items: start;
  padding: .7rem;
  border: 1px solid rgba(15,60,53,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.50);
}

.memory-gift-steps article > span {
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0f3c35;
  color: #fff;
  font-size: .55rem;
  font-weight: 950;
}

.memory-gift-steps strong {
  display: block;
  color: #36564c;
  font-size: .66rem;
}

.memory-gift-steps p {
  margin: .14rem 0 0;
  color: #7c8984;
  font-size: .56rem;
  line-height: 1.4;
}

.memory-gift-email-form {
  margin-top: .9rem;
}

.memory-gift-email-form > label {
  display: block;
  margin-bottom: .35rem;
  color: #5d716a;
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.memory-gift-email-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: .55rem;
}

.memory-gift-email-row input {
  min-width: 0;
  min-height: 2.8rem;
  padding: .68rem .8rem;
  border: 1px solid rgba(15,60,53,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #203730;
  font: inherit;
  font-size: .72rem;
  outline: none;
}

.memory-gift-email-row input:focus {
  border-color: rgba(85,199,216,.65);
  box-shadow: 0 0 0 3px rgba(85,199,216,.09);
}

.memory-gift-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: 1rem;
  padding: .8rem;
  border-radius: 16px;
  background: rgba(15,60,53,.045);
}

.memory-gift-account {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
}

.memory-gift-account div {
  min-width: 0;
}

.memory-gift-account strong,
.memory-gift-account span {
  display: block;
}

.memory-gift-account strong {
  color: #36564c;
  font-size: .67rem;
}

.memory-gift-account div span {
  overflow: hidden;
  margin-top: .1rem;
  color: #78867f;
  font-size: .58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-gift-activate {
  flex: 0 0 auto;
}

.memory-gift-code-state {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(239,106,50,.13);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,247,239,.74));
  text-align: center;
}

.memory-gift-code-kicker {
  margin: 0;
  color: #78857f;
  font-size: .52rem;
  font-weight: 950;
  letter-spacing: .13em;
}

.memory-gift-code {
  margin: .72rem 0 .45rem;
  color: #0f3c35;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: clamp(1.45rem,7vw,2rem);
  font-weight: 950;
  letter-spacing: .13em;
}

.memory-gift-code-copy {
  max-width: 28rem;
  margin: 0 auto;
  color: #78847f;
  font-size: .6rem;
  line-height: 1.5;
}

.memory-gift-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: .8rem;
}

.memory-gift-message {
  margin: .8rem 0 0;
  padding: .7rem .8rem;
  border-radius: 13px;
  background: rgba(85,199,216,.10);
  color: #39717a;
  font-size: .64rem;
  line-height: 1.5;
}

.memory-gift-message.is-error {
  background: rgba(186,58,48,.08);
  color: #8b433d;
}

@media(max-width:620px) {
  .memory-gift-head {
    display: grid;
  }

  .memory-gift-badge {
    max-width: 100%;
    width: fit-content;
  }

  .memory-gift-steps {
    grid-template-columns: 1fr;
  }

  .memory-gift-email-row {
    grid-template-columns: 1fr;
  }

  .memory-gift-member {
    align-items: stretch;
    flex-direction: column;
  }

  .memory-gift-activate {
    width: 100%;
  }

  .memory-gift-actions {
    display: grid;
  }
}


/* ============================================================
   SPECIAL GIFT CARD PREMIUM LOOK V115
   ============================================================ */

.memory-gift-card {
  border: 1px solid rgba(255,255,255,.82) !important;
  padding: 1.25rem !important;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.94) 0%,
      rgba(247,253,250,.90) 35%,
      rgba(237,250,252,.90) 70%,
      rgba(255,246,238,.92) 100%
    ) !important;
  box-shadow:
    0 20px 48px rgba(15,60,53,.10),
    0 0 0 1px rgba(85,199,216,.12),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.memory-gift-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background:
    linear-gradient(
      115deg,
      rgba(239,106,50,.54),
      rgba(255,214,114,.72),
      rgba(85,199,216,.68),
      rgba(161,125,230,.50),
      rgba(239,106,50,.54)
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .62;
  pointer-events: none;
}

.memory-gift-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80%;
  left: -28%;
  width: 48%;
  height: 240%;
  transform: rotate(18deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.50),
      rgba(176,239,245,.30),
      transparent
    );
  animation: memoryGiftFoilSweep 8s ease-in-out infinite;
  pointer-events: none;
}

.memory-gift-special-mark {
  position: absolute;
  z-index: 3;
  top: .95rem;
  right: 1rem;
  width: 4.15rem;
  height: 4.15rem;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.88), transparent 28%),
    linear-gradient(145deg, rgba(239,106,50,.96), rgba(209,79,38,.98));
  color: #fff;
  box-shadow:
    0 12px 24px rgba(239,106,50,.22),
    inset 0 0 0 3px rgba(255,255,255,.12);
  transform: rotate(7deg);
  text-align: center;
}

.memory-gift-special-mark span {
  position: absolute;
  top: -.45rem;
  right: -.15rem;
  color: #ffe6a3;
  font-size: 1.15rem;
  text-shadow: 0 0 10px rgba(255,220,134,.82);
}

.memory-gift-special-mark strong,
.memory-gift-special-mark small {
  display: block;
  line-height: 1;
}

.memory-gift-special-mark strong {
  font-size: .53rem;
  letter-spacing: .10em;
}

.memory-gift-special-mark small {
  margin-top: .18rem;
  font-size: .44rem;
  font-weight: 950;
  letter-spacing: .18em;
}

.memory-gift-sparkles {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.memory-gift-sparkles i {
  position: absolute;
  color: #e7a43b;
  font-style: normal;
  opacity: .72;
  animation: memoryGiftSparkle 2.8s ease-in-out infinite alternate;
}

.memory-gift-sparkles i:nth-child(1) {
  left: 3.3%;
  top: 10%;
  font-size: .85rem;
}

.memory-gift-sparkles i:nth-child(2) {
  left: 43%;
  top: 8%;
  color: #55c7d8;
  font-size: .6rem;
  animation-delay: .5s;
}

.memory-gift-sparkles i:nth-child(3) {
  right: 12%;
  bottom: 15%;
  color: #a783dc;
  font-size: .75rem;
  animation-delay: 1.1s;
}

.memory-gift-sparkles i:nth-child(4) {
  left: 8%;
  bottom: 18%;
  color: #ef6a32;
  font-size: .55rem;
  animation-delay: .8s;
}

.memory-gift-sparkles i:nth-child(5) {
  right: 42%;
  bottom: 7%;
  color: #55c7d8;
  font-size: .65rem;
  animation-delay: 1.5s;
}

.memory-gift-head {
  padding-right: 5rem;
}

.memory-gift-head .landing-kicker {
  color: #ef6a32;
  letter-spacing: .15em;
}

.memory-gift-head h2 {
  font-size: clamp(1.75rem, 7vw, 2.45rem) !important;
  color: #24483f !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

.memory-gift-code-state {
  position: relative;
  overflow: hidden;
  padding: 1.25rem !important;
  border: 1px solid rgba(239,106,50,.20) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,220,158,.16), transparent 55%),
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,247,239,.88)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.64),
    0 10px 26px rgba(239,106,50,.055);
}

.memory-gift-code-state::before,
.memory-gift-code-state::after {
  content: "✦";
  position: absolute;
  color: rgba(239,106,50,.28);
  font-size: 2.2rem;
}

.memory-gift-code-state::before {
  top: .35rem;
  left: .65rem;
  transform: rotate(-14deg);
}

.memory-gift-code-state::after {
  right: .65rem;
  bottom: .25rem;
  color: rgba(85,199,216,.32);
  transform: rotate(16deg);
}

.memory-gift-code-kicker {
  color: #7a8c84 !important;
  letter-spacing: .16em !important;
}

.memory-gift-code {
  margin: .9rem 0 .5rem !important;
  color: #0d483e !important;
  font-size: clamp(1.75rem, 8vw, 2.55rem) !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.9);
}

.memory-gift-expiry {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: .15rem auto .75rem;
  padding: .36rem .58rem;
  border: 1px solid rgba(239,106,50,.14);
  border-radius: 999px;
  background: rgba(239,106,50,.055);
}

.memory-gift-expiry span {
  color: #9a7465;
  font-size: .45rem;
  font-weight: 950;
  letter-spacing: .11em;
}

.memory-gift-expiry strong {
  color: #744b3d;
  font-size: .56rem;
}

#memoryGiftUseCode {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, #0f3c35, #14584d);
  box-shadow:
    0 11px 24px rgba(15,60,53,.20),
    inset 0 1px 0 rgba(255,255,255,.12);
}

#memoryGiftUseCode::after {
  content: "✦";
  margin-left: .35rem;
  color: #a8edf3;
}

@keyframes memoryGiftFoilSweep {
  0%, 18% {
    transform: translateX(-40%) rotate(18deg);
    opacity: 0;
  }
  42% {
    opacity: .72;
  }
  66%, 100% {
    transform: translateX(320%) rotate(18deg);
    opacity: 0;
  }
}

@keyframes memoryGiftSparkle {
  from {
    opacity: .28;
    transform: scale(.72) rotate(-8deg);
  }
  to {
    opacity: .92;
    transform: scale(1.14) rotate(8deg);
  }
}

@media(max-width:620px) {
  .memory-gift-head {
    padding-right: 0;
    padding-top: 3.5rem;
  }

  .memory-gift-special-mark {
    top: .8rem;
    right: .85rem;
    width: 3.75rem;
    height: 3.75rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  .memory-gift-card::after,
  .memory-gift-sparkles i {
    animation: none !important;
  }
}


/* ============================================================
   GIFT-ONLY MODE + PENDING STATUS V116
   ============================================================ */

/*
 * A QR Gift URL is now a dedicated experience inside the same Memory Archive
 * application shell. Everything except the Gift itself is hidden.
 */
body.gift-only-mode #guestInstructionList,
body.gift-only-mode #memberMemoryHelp,
body.gift-only-mode #communityMemoryStream,
body.gift-only-mode .event-collections,
body.gift-only-mode .collection-latest,
body.gift-only-mode .collection-browser,
body.gift-only-mode #collectionAccount,
body.gift-only-mode .landing-footer-note,
body.gift-only-mode .landing-social,
body.gift-only-mode .landing-header {
  display: none !important;
}

body.gift-only-mode #landingScreen {
  display: block !important;
  min-height: 100svh;
}

body.gift-only-mode #landingScreen .landing-wrap {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-top: max(1.25rem, env(safe-area-inset-top));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

body.gift-only-mode #memoryGiftCard {
  display: block !important;
  margin: 0 auto !important;
  width: min(100%, 680px);
}

.gift-email-sent {
  position: relative;
  display: grid;
  grid-template-columns: 2.8rem minmax(0,1fr);
  gap: .85rem;
  align-items: center;
  margin: 1rem 0 1.25rem;
  padding: .95rem 1rem;
  border: 1px solid rgba(85,199,216,.20);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(85,199,216,.12), transparent 10rem),
    rgba(255,255,255,.66);
  box-shadow: 0 10px 28px rgba(15,60,53,.05);
}

.gift-email-sent-icon {
  width: 2.7rem;
  height: 2.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0f3c35;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 8px 18px rgba(15,60,53,.16);
}

.gift-email-sent h2 {
  margin: .15rem 0 .2rem;
  color: #29483f;
  font-size: 1.05rem;
  letter-spacing: -.025em;
}

.gift-email-sent p:last-child {
  margin: 0;
  color: #718078;
  font-size: .68rem;
  line-height: 1.5;
}

/*
 * Make the expiration impossible to miss below the code.
 */
.memory-gift-expiry {
  display: flex !important;
  width: fit-content;
  margin: .35rem auto .9rem !important;
  padding: .46rem .7rem !important;
  border-color: rgba(239,106,50,.22) !important;
  background: rgba(239,106,50,.075) !important;
}

.memory-gift-expiry.is-hidden {
  display: none !important;
}

.memory-gift-expiry span {
  font-size: .48rem !important;
}

.memory-gift-expiry strong {
  font-size: .62rem !important;
}

@media(max-width:620px) {
  body.gift-only-mode #landingScreen .landing-wrap {
    padding-inline: .85rem;
  }

  .gift-email-sent {
    grid-template-columns: 2.4rem minmax(0,1fr);
    padding: .8rem;
  }

  .gift-email-sent-icon {
    width: 2.3rem;
    height: 2.3rem;
  }
}


/* ============================================================
   SIGNED-IN GIFT INTEGRATION V117
   ============================================================ */

/*
 * Gift-only mode is now only used for signed-out visitors.
 * Once authenticated, the normal landing content returns and the Gift Card
 * becomes a highlighted section within the Memory Archive again.
 */
body:not(.gift-only-mode) #memoryGiftCard:not(.is-hidden) {
  margin-top: 1rem;
  margin-bottom: 1.45rem;
}

body:not(.gift-only-mode) #memoryGiftCard:not(.is-hidden)::before {
  opacity: .78;
}

body:not(.gift-only-mode) #memoryGiftCard:not(.is-hidden) {
  box-shadow:
    0 20px 46px rgba(15,60,53,.09),
    0 0 0 1px rgba(85,199,216,.14),
    inset 0 1px 0 rgba(255,255,255,.95);
}


/* ============================================================
   COMMUNITY STREAM ALWAYS VISIBLE V118
   ============================================================ */

.community-memory-stream {
  display: block;
}

.community-stream-empty {
  width: min(100%, 34rem);
  min-height: 5.4rem;
  margin: .35rem auto;
  display: grid;
  grid-template-columns: 2.4rem minmax(0,1fr);
  gap: .75rem;
  align-items: center;
  padding: .9rem 1rem;
  border: 1px solid rgba(15,60,53,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.46);
  color: #6f8079;
}

.community-stream-empty-mark {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(85,199,216,.10);
  color: #55aebc;
  font-size: .9rem;
}

.community-stream-empty strong,
.community-stream-empty span {
  display: block;
}

.community-stream-empty strong {
  color: #36564c;
  font-size: .7rem;
}

.community-stream-empty div span {
  margin-top: .16rem;
  font-size: .6rem;
  line-height: 1.45;
}


/* ============================================================
   GIFT EMAIL STATUS VISIBILITY FIX V119
   ============================================================ */

#giftEmailSent.is-hidden {
  display: none !important;
}


/* ============================================================
   CLAIMED GIFTS LANDING V120
   ============================================================ */

.claimed-gifts {
  margin: 1.15rem 0 1.35rem;
}

.claimed-gifts-count {
  flex: 0 0 auto;
  padding: .3rem .52rem;
  border-radius: 999px;
  background: rgba(239,106,50,.08);
  color: #a65e40;
  font-size: .52rem;
  font-weight: 900;
}

.claimed-gifts-list {
  display: grid;
  gap: .72rem;
}

.claimed-gift-card {
  position: relative;
  overflow: hidden;
  padding: .95rem;
  border: 1px solid rgba(239,106,50,.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(85,199,216,.11), transparent 12rem),
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,248,241,.74));
  box-shadow:
    0 11px 28px rgba(15,60,53,.045),
    inset 0 1px 0 rgba(255,255,255,.70);
}

.claimed-gift-card::after {
  content: "✦";
  position: absolute;
  right: .8rem;
  bottom: .55rem;
  color: rgba(85,199,216,.22);
  font-size: 2.5rem;
  pointer-events: none;
}

.claimed-gift-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .7rem;
}

.claimed-gift-kicker {
  margin: 0;
  color: #ef6a32;
  font-size: .48rem;
  font-weight: 950;
  letter-spacing: .14em;
}

.claimed-gift-top h3 {
  margin: .22rem 0 .28rem;
  color: #29483f;
  font-size: 1.05rem;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.claimed-gift-event {
  color: #78877f;
  font-size: .56rem;
}

.claimed-gift-status {
  flex: 0 0 auto;
  padding: .28rem .45rem;
  border-radius: 999px;
  background: rgba(85,199,216,.10);
  color: #4d909b;
  font-size: .45rem;
  font-weight: 950;
  letter-spacing: .08em;
}

.claimed-gift-card.is-used .claimed-gift-status {
  background: rgba(15,60,53,.06);
  color: #78857f;
}

.claimed-gift-code-wrap {
  margin-top: .72rem;
  padding: .72rem .8rem;
  border-radius: 14px;
  background: rgba(255,255,255,.60);
  text-align: center;
}

.claimed-gift-code-wrap > span,
.claimed-gift-code-wrap > strong,
.claimed-gift-code-wrap > small {
  display: block;
}

.claimed-gift-code-wrap > span {
  color: #829089;
  font-size: .43rem;
  font-weight: 950;
  letter-spacing: .12em;
}

.claimed-gift-code-wrap > strong {
  margin: .38rem 0 .28rem;
  color: #0f493f;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: clamp(1.2rem,6vw,1.65rem);
  letter-spacing: .13em;
}

.claimed-gift-code-wrap > small {
  color: #9a7465;
  font-size: .48rem;
}

.claimed-gift-code-wrap > small b {
  color: #744b3d;
}

.claimed-gift-actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  margin-top: .7rem;
}

.claimed-gift-used-copy {
  color: #7c8984;
  font-size: .58rem;
  line-height: 1.4;
}

@media(max-width:520px) {
  .claimed-gift-actions {
    display: grid;
  }

  .claimed-gift-actions button {
    width: 100%;
  }
}


/* ============================================================
   SPECIAL GIFT PREMIUM REDESIGN V121
   ============================================================ */

/*
 * Remove the playful circular badge treatment entirely.
 * The Gift should read like a rare collector / keepsake card.
 */
.memory-gift-special-mark {
  display: none !important;
}

.memory-gift-card {
  position: relative;
  border: 1px solid rgba(255,255,255,.88) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 82% 8%, rgba(126,225,236,.12), transparent 18rem),
    radial-gradient(circle at 8% 92%, rgba(239,106,50,.06), transparent 18rem),
    linear-gradient(
      145deg,
      rgba(255,255,255,.96) 0%,
      rgba(249,252,248,.95) 34%,
      rgba(241,249,247,.94) 66%,
      rgba(255,250,245,.95) 100%
    ) !important;
  box-shadow:
    0 28px 58px rgba(13,54,49,.13),
    0 6px 16px rgba(13,54,49,.05),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 0 0 1px rgba(85,199,216,.08) !important;
}

.memory-gift-card::before {
  opacity: .9 !important;
  background:
    linear-gradient(
      112deg,
      rgba(239,106,50,.68),
      rgba(255,196,111,.56),
      rgba(85,199,216,.72),
      rgba(148,117,225,.46),
      rgba(85,199,216,.62),
      rgba(239,106,50,.56)
    ) !important;
}

.memory-gift-card::after {
  width: 34% !important;
  left: -35% !important;
  opacity: .58;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.62),
      rgba(189,244,247,.30),
      rgba(255,220,171,.18),
      transparent
    ) !important;
  animation-duration: 10s !important;
}

/* Subtle inner frame so the card feels layered and collectible. */
.memory-gift-card > .memory-gift-glow::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(15,60,53,.045);
  border-radius: 18px;
  pointer-events: none;
}

/* Premium, quiet top-right label instead of the round sticker. */
.memory-gift-premium-tag {
  position: absolute;
  z-index: 4;
  top: 1rem;
  right: 1rem;
  display: grid;
  grid-template-columns: 2rem auto;
  gap: .55rem;
  align-items: center;
  padding: .52rem .72rem .5rem .6rem;
  border: 1px solid rgba(15,60,53,.09);
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.86),
      rgba(239,248,246,.78)
    );
  box-shadow:
    0 8px 18px rgba(15,60,53,.07),
    inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}

.memory-gift-premium-tag-line {
  position: relative;
  width: 2rem;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(239,106,50,.7),
      rgba(85,199,216,.75)
    );
}

.memory-gift-premium-tag-line::before,
.memory-gift-premium-tag-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: .32rem;
  height: .32rem;
  border: 1px solid rgba(85,199,216,.62);
  transform: translateY(-50%) rotate(45deg);
  background: rgba(255,255,255,.82);
}

.memory-gift-premium-tag-line::before {
  left: -.12rem;
}

.memory-gift-premium-tag-line::after {
  right: -.12rem;
  border-color: rgba(239,106,50,.60);
}

.memory-gift-premium-tag small,
.memory-gift-premium-tag strong {
  display: block;
}

.memory-gift-premium-tag small {
  color: #7d8e87;
  font-size: .36rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.memory-gift-premium-tag strong {
  margin-top: .12rem;
  color: #36564c;
  font-size: .48rem;
  font-weight: 950;
  letter-spacing: .12em;
}

/* Give the heading more breathing room and more premium hierarchy. */
.memory-gift-head {
  padding-right: 8.4rem !important;
  padding-top: .15rem;
}

.memory-gift-head .landing-kicker {
  font-size: .52rem;
  letter-spacing: .18em !important;
}

.memory-gift-head h2 {
  margin-top: .38rem !important;
  max-width: 30rem;
  font-size: clamp(2rem, 7vw, 2.8rem) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}

.memory-gift-description {
  max-width: 32rem;
  color: #63766f !important;
  font-size: .74rem !important;
  line-height: 1.6 !important;
}

/* Premium code "relic" panel. */
.memory-gift-code-state {
  margin-top: 1.2rem !important;
  padding: 1.45rem 1.2rem 1.25rem !important;
  border: 1px solid rgba(215,146,100,.20) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,220,158,.16), transparent 60%),
    linear-gradient(
      145deg,
      rgba(255,255,255,.93),
      rgba(255,251,247,.91)
    ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.78),
    0 14px 32px rgba(84,62,46,.055);
}

.memory-gift-code-state::before,
.memory-gift-code-state::after {
  content: "";
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid rgba(239,106,50,.14);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(239,106,50,.10), transparent 65%);
}

.memory-gift-code-state::before {
  top: .55rem;
  left: .75rem;
}

.memory-gift-code-state::after {
  right: .75rem;
  bottom: .55rem;
  border-color: rgba(85,199,216,.16);
  background:
    radial-gradient(circle, rgba(85,199,216,.10), transparent 65%);
}

.memory-gift-code-kicker {
  color: #7b8b85 !important;
  font-size: .48rem !important;
  letter-spacing: .18em !important;
}

.memory-gift-code {
  margin: 1rem 0 .55rem !important;
  color: #0e4a40 !important;
  font-size: clamp(2rem, 8vw, 2.8rem) !important;
  letter-spacing: .16em !important;
}

.memory-gift-expiry {
  margin-top: .25rem !important;
  margin-bottom: .9rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  gap: .42rem !important;
}

.memory-gift-expiry::before,
.memory-gift-expiry::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(239,106,50,.26)
    );
}

.memory-gift-expiry::after {
  background:
    linear-gradient(
      90deg,
      rgba(239,106,50,.26),
      transparent
    );
}

.memory-gift-expiry span {
  color: #9a7a6d !important;
  letter-spacing: .12em !important;
}

.memory-gift-expiry strong {
  color: #6f5044 !important;
  font-weight: 900 !important;
}

.memory-gift-code-copy {
  max-width: 31rem !important;
  color: #75837d !important;
  font-size: .61rem !important;
}

.memory-gift-actions {
  margin-top: 1rem !important;
}

#memoryGiftUseCode {
  min-height: 2.85rem;
  padding-inline: 1.1rem;
  background:
    linear-gradient(135deg,#103f37,#15564a) !important;
  box-shadow:
    0 12px 26px rgba(15,60,53,.18),
    inset 0 1px 0 rgba(255,255,255,.11) !important;
}

#memoryGiftCopyCode {
  min-height: 2.85rem;
  padding-inline: .95rem;
}

/* Softly "etched" message strip rather than another colored card. */
.memory-gift-message {
  margin-top: .8rem !important;
  border: 1px solid rgba(85,199,216,.10);
  background:
    linear-gradient(
      90deg,
      rgba(85,199,216,.06),
      rgba(255,255,255,.38),
      rgba(85,199,216,.06)
    ) !important;
  color: #52766e !important;
}

/* Reduce playful sparkle density. Keep only two quiet glints. */
.memory-gift-sparkles i {
  display: none;
}

.memory-gift-sparkles i:nth-child(2),
.memory-gift-sparkles i:nth-child(3) {
  display: block;
  opacity: .38;
}

@media(max-width:620px) {
  .memory-gift-premium-tag {
    top: .85rem;
    right: .85rem;
    transform: scale(.92);
    transform-origin: top right;
  }

  .memory-gift-head {
    padding-right: 0 !important;
    padding-top: 4.4rem !important;
  }

  .memory-gift-code {
    font-size: clamp(1.7rem, 8vw, 2.35rem) !important;
  }
}

@media(prefers-reduced-motion:reduce) {
  .memory-gift-card::after {
    animation: none !important;
  }
}


/* ============================================================
   PAWS & LEAVES LANGUAGE POLISH V123
   ============================================================ */

.memory-gift-email-prompt {
  margin: 0 0 .42rem;
  color: #ef6a32;
  font-size: .48rem;
  font-weight: 950;
  letter-spacing: .13em;
}

#memorySubmitTitle {
  letter-spacing: -.035em;
}

.claimed-gift-status {
  white-space: nowrap;
}

.claimed-gift-card.is-used .claimed-gift-status {
  background: rgba(15,60,53,.055);
  color: #63766f;
}


/* ============================================================
   EXACT LIVE SHARE PREVIEW V130
   ============================================================ */

.shared-memory-preview-mode {
  padding-top: 70px;
}

.shared-memory-preview-banner {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000001;
  min-height: 70px;
  display: flex;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(15,60,53,.10);
  background: rgba(246,250,247,.95);
  box-shadow: 0 8px 24px rgba(15,60,53,.08);
  backdrop-filter: blur(14px);
}

.shared-memory-preview-banner > div {
  width: min(1080px,100%);
  margin: auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .35rem .9rem;
}

.shared-memory-preview-kicker {
  color: #ef6a32;
  font-size: .52rem;
  font-weight: 950;
  letter-spacing: .14em;
}

.shared-memory-preview-banner strong {
  color: #0f3c35;
  font-size: .72rem;
}

.shared-memory-preview-banner small {
  color: #718078;
  font-size: .58rem;
}

.shared-memory-preview-mode .memory-favorite-wrap,
.shared-memory-preview-mode #memoryCodeUnlock,
.shared-memory-preview-mode #shareButton,
.shared-memory-preview-mode .collection-link,
.shared-memory-preview-mode #collectionAddedInline,
.shared-memory-preview-mode #backButton {
  display: none !important;
}

.shared-memory-hint-preview {
  width: min(1080px,calc(100% - 28px));
  margin: 0 auto 3rem;
  padding-top: .5rem;
}

.shared-memory-hint-preview-head {
  margin-bottom: .85rem;
}

.shared-memory-hint-preview-head h2 {
  margin: .18rem 0 0;
  color: #0f3c35;
  font-size: clamp(1.25rem,4vw,1.8rem);
  letter-spacing: -.035em;
}

.shared-memory-hint-grid {
  max-width: 620px;
}

@media(max-width:620px) {
  .shared-memory-preview-mode {
    padding-top: 84px;
  }

  .shared-memory-preview-banner {
    min-height: 84px;
  }

  .shared-memory-preview-banner > div {
    align-items: flex-start;
    flex-direction: column;
    gap: .12rem;
  }
}


/* ============================================================
   EVENT SUB-COLLECTIONS V136
   ============================================================ */

.event-subcollection-block{
  display:grid;
  gap:.8rem;
  margin:0 0 1.35rem;
  padding:1rem;
  border:1px solid rgba(31,74,64,.09);
  border-radius:20px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.66),
      rgba(244,248,244,.46)
    );
}

.event-subcollection-block:last-child{
  margin-bottom:0;
}

.event-subcollection-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.event-subcollection-kicker{
  display:block;
  margin-bottom:.18rem;
  color:#ef6a32;
  font-size:.5rem;
  font-weight:950;
  letter-spacing:.12em;
}

.event-subcollection-heading h3{
  margin:0;
  color:#123f47;
  font-size:clamp(1.05rem,3vw,1.4rem);
  letter-spacing:-.035em;
}

.event-subcollection-heading p{
  max-width:620px;
  margin:.3rem 0 0;
  color:#718078;
  font-size:.7rem;
  line-height:1.5;
}

.event-subcollection-progress{
  flex:0 0 auto;
  padding:.34rem .52rem;
  border:1px solid rgba(31,74,64,.10);
  border-radius:999px;
  background:rgba(255,255,255,.68);
  color:#718078;
  font-size:.62rem;
  font-weight:800;
}

.event-subcollection-progress strong{
  color:#123f47;
}

.event-subcollection-slot-grid{
  margin-top:.1rem;
}

@media(max-width:620px){
  .event-subcollection-block{
    padding:.8rem;
    border-radius:17px;
  }

  .event-subcollection-heading{
    gap:.6rem;
  }
}


/* ============================================================
   EVENT SUB-COLLECTION LAYOUT REPAIR V137
   ============================================================ */

/*
 * The original .event-slot-grid is the grid for Memory cards.
 * In v136 the same element also became the parent of whole Sub-Collections,
 * so the Sub-Collection panels were treated as individual Memory cards and
 * squeezed into columns.
 *
 * With .has-subcollections the OUTER container becomes a vertical stack.
 * Only .event-subcollection-slot-grid remains the actual Memory-card grid.
 */
.event-slot-grid.has-subcollections{
  display:flex !important;
  flex-direction:column;
  gap:1.15rem;
  width:100%;
  min-width:0;
}

.event-slot-grid.has-subcollections > .event-subcollection-block{
  width:100%;
  min-width:0;
  margin:0;
  box-sizing:border-box;
}

/*
 * Restore the normal card grid inside each Sub-Collection.
 * minmax(0,1fr) prevents long titles from forcing columns wider than their
 * available space.
 */
.event-subcollection-slot-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.78rem;
  width:100%;
  min-width:0;
}

/*
 * Cards must be allowed to occupy the available column width.
 * This prevents text from collapsing into the tiny strip visible in v136.
 */
.event-subcollection-slot-grid > .event-slot-card{
  width:100%;
  min-width:0;
  max-width:none;
  box-sizing:border-box;
}

.event-subcollection-slot-grid .event-slot-copy{
  min-width:0;
}

.event-subcollection-slot-grid .event-slot-copy strong,
.event-subcollection-slot-grid .event-slot-copy p,
.event-subcollection-slot-grid .event-slot-copy small{
  overflow-wrap:anywhere;
}

/*
 * A single Memory in a Sub-Collection should not become an oversized
 * full-width card on desktop. Keep the same visual rhythm as the normal
 * Collection grid.
 */
.event-subcollection-slot-grid > .event-slot-card:only-child{
  max-width:none;
}

@media(max-width:720px){
  .event-subcollection-slot-grid{
    grid-template-columns:1fr;
  }

  .event-slot-grid.has-subcollections{
    gap:.9rem;
  }
}


/* ============================================================
   COMPLETED EVENT SUB-COLLECTIONS V138
   ============================================================ */

.event-subcollection-block{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.event-subcollection-complete-glow{
  position:absolute;
  inset:-20%;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(255,205,114,.22),
      transparent 34%
    ),
    radial-gradient(
      circle at 82% 8%,
      rgba(98,185,202,.16),
      transparent 32%
    );
  transition:opacity .35s ease;
}

.event-subcollection-block.is-complete{
  border-color:rgba(207,156,63,.28);
  background:
    linear-gradient(
      145deg,
      rgba(255,252,241,.92),
      rgba(246,250,247,.76)
    );
  box-shadow:
    0 18px 46px rgba(66,86,72,.08),
    inset 0 0 0 1px rgba(255,255,255,.55);
}

.event-subcollection-block.is-complete
.event-subcollection-complete-glow{
  opacity:1;
}

.event-subcollection-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.48rem;
}

.event-subcollection-complete-badge{
  display:inline-flex;
  align-items:center;
  gap:.28rem;
  padding:.24rem .46rem;
  border:1px solid rgba(207,156,63,.24);
  border-radius:999px;
  background:rgba(255,244,211,.72);
  color:#926c2d;
  font-size:.46rem;
  font-weight:950;
  letter-spacing:.075em;
  line-height:1.2;
  white-space:nowrap;
}

.event-subcollection-complete-badge > span:first-child{
  font-size:.62rem;
  line-height:1;
}

.event-subcollection-progress.is-complete{
  border-color:rgba(207,156,63,.28);
  background:rgba(255,244,211,.72);
  color:#8c6c39;
  box-shadow:0 6px 18px rgba(174,125,44,.08);
}

.event-subcollection-progress-star{
  margin-right:.16rem;
  color:#c4913e;
}

.event-subcollection-complete-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.48rem;
  margin-top:.12rem;
  padding:.42rem .65rem;
  border-top:1px solid rgba(207,156,63,.14);
  color:#987648;
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.02em;
  text-align:center;
}

.event-subcollection-complete-note > span:first-child,
.event-subcollection-complete-note > span:last-child{
  color:#c4913e;
}

@media(max-width:620px){
  .event-subcollection-title-row{
    align-items:flex-start;
    flex-direction:column;
    gap:.3rem;
  }

  .event-subcollection-complete-badge{
    white-space:normal;
  }

  .event-subcollection-complete-note{
    font-size:.52rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .event-subcollection-complete-glow{
    transition:none;
  }
}


/* ============================================================
   OPTIONAL BONUS PROGRESS + COMPLETION V139
   ============================================================ */

.event-bonus-progress{
  width:min(100%,850px);
  margin:.75rem auto 1rem;
  padding:.72rem .85rem;
  display:grid;
  gap:.5rem;
  border:1px solid rgba(111,90,170,.18);
  border-radius:15px;
  background:
    linear-gradient(
      135deg,
      rgba(111,90,170,.055),
      rgba(98,185,202,.045)
    );
}

.event-bonus-progress.is-hidden{
  display:none;
}

.event-bonus-progress-copy{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.event-bonus-progress-label{
  color:#6f5aaa;
  font-size:.5rem;
  font-weight:950;
  letter-spacing:.12em;
}

.event-bonus-progress-copy strong{
  color:#5d4b95;
  font-size:.72rem;
}

.event-bonus-progress-track{
  overflow:hidden;
  height:7px;
  border-radius:999px;
  background:rgba(111,90,170,.10);
}

.event-bonus-progress-track > span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:
    linear-gradient(
      90deg,
      #6f5aaa,
      #62b9ca
    );
  transition:width .35s ease;
}

.event-bonus-progress.is-complete{
  border-color:rgba(111,90,170,.30);
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(153,123,221,.16),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(111,90,170,.09),
      rgba(98,185,202,.07)
    );
  box-shadow:0 12px 30px rgba(81,66,125,.08);
}

.event-bonus-progress.is-complete
.event-bonus-progress-label::after{
  content:" · COMPLETE";
}

.event-subcollection-block.is-bonus-complete{
  border-color:rgba(111,90,170,.30);
  background:
    linear-gradient(
      145deg,
      rgba(248,245,255,.95),
      rgba(241,250,252,.80)
    );
  box-shadow:
    0 18px 46px rgba(77,64,126,.10),
    inset 0 0 0 1px rgba(255,255,255,.55);
}

.event-subcollection-block.is-bonus-complete
.event-subcollection-complete-glow{
  opacity:1;
  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(153,123,221,.24),
      transparent 34%
    ),
    radial-gradient(
      circle at 82% 8%,
      rgba(98,185,202,.20),
      transparent 32%
    );
}

.event-subcollection-block.is-bonus-complete
.event-subcollection-complete-badge{
  border-color:rgba(111,90,170,.25);
  background:rgba(236,229,255,.82);
  color:#66529e;
}

.event-subcollection-block.is-bonus-complete
.event-subcollection-progress.is-complete{
  border-color:rgba(111,90,170,.25);
  background:rgba(236,229,255,.78);
  color:#66529e;
  box-shadow:0 6px 18px rgba(82,65,135,.08);
}

.event-subcollection-block.is-bonus-complete
.event-subcollection-progress-star,
.event-subcollection-block.is-bonus-complete
.event-subcollection-complete-note > span:first-child,
.event-subcollection-block.is-bonus-complete
.event-subcollection-complete-note > span:last-child{
  color:#6f5aaa;
}

.event-subcollection-block.is-bonus-complete
.event-subcollection-complete-note{
  border-top-color:rgba(111,90,170,.15);
  color:#6d5c9a;
}

@media(max-width:620px){
  .event-bonus-progress{
    padding:.68rem .72rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .event-bonus-progress-track > span{
    transition:none;
  }
}


/* ============================================================
   PER-USER ADMIN DEBUG RESET V140
   ============================================================ */

.admin-debug-tools{
  width:min(100%,980px);
  margin:2.2rem auto 1.5rem;
  padding:0 18px;
}

.admin-debug-tools.is-hidden{
  display:none !important;
}

.admin-debug-tools-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  padding:1rem 1.1rem;
  border:1px dashed rgba(190,76,62,.30);
  border-radius:16px;
  background:
    linear-gradient(
      135deg,
      rgba(190,76,62,.055),
      rgba(255,255,255,.72)
    );
}

.admin-debug-kicker{
  display:block;
  margin-bottom:.18rem;
  color:#b84c3e;
  font-size:.5rem;
  font-weight:950;
  letter-spacing:.12em;
}

.admin-debug-tools strong{
  display:block;
  color:#6e332c;
  font-size:.82rem;
}

.admin-debug-tools p{
  max-width:650px;
  margin:.28rem 0 0;
  color:#7f6a66;
  font-size:.64rem;
  line-height:1.5;
}

.admin-debug-reset-button{
  min-height:42px;
  padding:.62rem .9rem;
  border:1px solid rgba(139,48,38,.26);
  border-radius:999px;
  background:#8f3b32;
  color:#fff;
  font:inherit;
  font-size:.66rem;
  font-weight:900;
  cursor:pointer;
}

.admin-debug-reset-button:disabled{
  opacity:.55;
  cursor:wait;
}

#adminDebugStatus{
  grid-column:1 / -1;
  color:#8f5d56;
  font-size:.58rem;
}

@media(max-width:680px){
  .admin-debug-tools-inner{
    grid-template-columns:1fr;
  }

  .admin-debug-reset-button{
    width:100%;
  }
}


/* ============================================================
   YOUTUBE MEMORY MEDIA V144
   ============================================================ */

.memory-video-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#0c1513;
}

.memory-video-wrap.is-hidden{
  display:none !important;
}

.memory-video-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.memory-screen .polaroid-photo:has(.memory-video-wrap:not(.is-hidden)){
  aspect-ratio:16/9;
  height:auto;
  background:#0c1513;
}

.memory-screen .polaroid-photo > #memoryImage.is-hidden{
  display:none !important;
}

.found-thumb,
.collection-browser-thumb,
.event-slot-image,
.community-stream-image{
  position:relative;
}

.memory-preview-play{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  transform:translate(-50%,-50%);
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding-left:2px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:50%;
  background:rgba(15,60,53,.82);
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  font-size:.7rem;
  line-height:1;
  pointer-events:none;
}

.found-thumb .memory-preview-play{
  width:28px;
  height:28px;
  font-size:.58rem;
}

.event-slot-image .memory-preview-play{
  width:32px;
  height:32px;
}

@media(max-width:620px){
  .memory-preview-play{
    width:30px;
    height:30px;
    font-size:.62rem;
  }
}


/* ============================================================
   VIDEO PREVIEW PLAY OVERLAY REPAIR V145
   ============================================================ */

/*
 * The Play icon must live on top of the preview image and must never
 * contribute to card height. The Event cards had inherited layout rules
 * that allowed the badge to sit below the thumbnail.
 */
.event-slot-image,
.found-thumb,
.collection-browser-thumb,
.community-stream-image{
  position:relative !important;
  overflow:hidden;
}

.event-slot-image .memory-preview-play,
.found-thumb .memory-preview-play,
.collection-browser-thumb .memory-preview-play,
.community-stream-image .memory-preview-play{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  z-index:5 !important;
  pointer-events:none !important;
}

/*
 * Keep the Event thumbnail itself at the intended square size. The icon must
 * not create an extra row beneath the image.
 */
.event-slot-image{
  display:block !important;
}

.event-slot-image > img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/*
 * Some card layouts inherit flex/grid behavior on child spans.
 * Explicitly remove that from the Play badge.
 */
.event-slot-image > .memory-preview-play,
.found-thumb > .memory-preview-play,
.collection-browser-thumb > .memory-preview-play,
.community-stream-image > .memory-preview-play{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
  padding:0 0 0 2px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  line-height:1 !important;
  box-sizing:border-box !important;
}

.found-thumb > .memory-preview-play{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  max-width:28px !important;
  max-height:28px !important;
}


/* ============================================================
   SHARE THIS MEMORY MODAL V146
   ============================================================ */

body.memory-share-open{
  overflow:hidden;
}

.memory-share-backdrop{
  position:fixed;
  inset:0;
  z-index:2200;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(4,34,30,.68);
  backdrop-filter:blur(7px);
}

.memory-share-backdrop.is-hidden{
  display:none !important;
}

.memory-share-modal{
  position:relative;
  width:min(100%,430px);
  max-height:min(92vh,720px);
  overflow:auto;
  padding:1.2rem;
  border:1px solid rgba(255,255,255,.52);
  border-radius:24px;
  background:
    radial-gradient(circle at 90% 0%, rgba(85,199,216,.12), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,249,246,.96));
  box-shadow:
    0 28px 70px rgba(3,31,27,.28),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.memory-share-close{
  position:absolute;
  top:.72rem;
  right:.72rem;
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(15,60,53,.07);
  color:#45675d;
  font:inherit;
  font-size:1rem;
  cursor:pointer;
}

.memory-share-head{
  padding-right:2rem;
}

.memory-share-head h2{
  margin:.14rem 0 0;
  color:#143f47;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.5rem,5vw,2rem);
  line-height:1.05;
}

.memory-share-head > p:last-child{
  margin:.4rem 0 0;
  color:#74837c;
  font-size:.67rem;
  line-height:1.5;
}

.memory-share-qr-wrap{
  display:grid;
  place-items:center;
  margin:1rem 0 .9rem;
  padding:.85rem;
  border:1px solid rgba(15,60,53,.09);
  border-radius:18px;
  background:#fff;
}

.memory-share-qr{
  display:block;
  width:min(100%,280px);
  aspect-ratio:1;
  object-fit:contain;
}

.memory-share-url-wrap input{
  width:100%;
  box-sizing:border-box;
  padding:.72rem .78rem;
  border:1px solid rgba(15,60,53,.12);
  border-radius:13px;
  background:rgba(255,255,255,.78);
  color:#45675d;
  font:inherit;
  font-size:.63rem;
}

.memory-share-actions{
  display:flex;
  gap:.55rem;
  margin-top:.7rem;
}

.memory-share-copy,
.memory-share-native{
  flex:1;
  min-height:44px;
  border-radius:999px;
  font:inherit;
  font-size:.68rem;
  font-weight:900;
  cursor:pointer;
}

.memory-share-copy{
  border:1px solid rgba(239,106,50,.22);
  background:#ef6a32;
  color:#fff;
}

.memory-share-native{
  border:1px solid rgba(15,60,53,.15);
  background:rgba(15,60,53,.07);
  color:#31564d;
}

.memory-share-native.is-hidden{
  display:none !important;
}

.memory-share-status{
  display:block;
  min-height:1rem;
  margin-top:.5rem;
  color:#718078;
  font-size:.57rem;
  text-align:center;
}

@media(max-width:520px){
  .memory-share-backdrop{
    align-items:end;
    padding:10px;
  }

  .memory-share-modal{
    width:100%;
    border-radius:22px 22px 16px 16px;
    padding:1rem;
  }

  .memory-share-qr{
    width:min(100%,240px);
  }

  .memory-share-actions{
    flex-direction:column;
  }
}


/* ============================================================
   DEBUG ADMIN SHORTCUT V147
   ============================================================ */

.admin-debug-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.55rem;
  flex-wrap:wrap;
}

.admin-debug-admin-button{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.62rem .9rem;
  border:1px solid rgba(15,60,53,.16);
  border-radius:999px;
  background:rgba(15,60,53,.08);
  color:#31564d;
  font-size:.66rem;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}

.admin-debug-admin-button:hover,
.admin-debug-admin-button:focus-visible{
  background:rgba(15,60,53,.13);
  transform:translateY(-1px);
}

@media(max-width:680px){
  .admin-debug-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .admin-debug-admin-button,
  .admin-debug-reset-button{
    width:100%;
  }
}


/* ============================================================
   SHARE BUTTON QR AFFORDANCE V148
   ============================================================ */

.memory-share-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.48rem;
}

.memory-share-button-qr{
  width:1.08rem;
  height:1.08rem;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:1px;
  padding:1px;
  box-sizing:border-box;
  transition:transform .18s ease;
}

.memory-share-button-qr i{
  display:block;
  border-radius:1px;
  background:currentColor;
  opacity:.96;
}

.memory-share-button-qr i:nth-child(5),
.memory-share-button-qr i:nth-child(8){
  opacity:0;
}

.memory-share-button:hover .memory-share-button-qr,
.memory-share-button:focus-visible .memory-share-button-qr{
  transform:scale(1.06);
}

@media(prefers-reduced-motion:reduce){
  .memory-share-button-qr{
    transition:none;
  }
}


/* ============================================================
   MAGIC LINK APP HANDOFF V149
   ============================================================ */

.account-app-login-hint{
  margin:.55rem 0 0;
  padding:.55rem .65rem;
  border:1px solid rgba(85,199,216,.16);
  border-radius:12px;
  background:
    linear-gradient(
      135deg,
      rgba(85,199,216,.065),
      rgba(255,255,255,.42)
    );
  color:#61766e;
  font-size:.58rem;
  line-height:1.45;
}

.account-app-login-hint::before{
  content:"↗";
  display:inline-block;
  margin-right:.28rem;
  color:#3f8fbd;
  font-weight:950;
}


/* ============================================================
   MOBILE COLLECTION POLAROID PHOTO FIT V150
   ============================================================ */

/*
 * The miniature Collection Polaroids intentionally keep overflow visible so
 * their paper/shadow can extend beyond the square thumbnail box.
 *
 * On narrow screens the separately rotated photo could therefore poke below
 * the white Polaroid paper. Keep the paper rotation, but fit the actual photo
 * safely inside it.
 */
@media(max-width:650px){
  .found-thumb,
  .collection-browser-thumb{
    overflow:visible !important;
  }

  .found-thumb img,
  .collection-browser-thumb img{
    width:calc(100% - 4px) !important;
    height:calc(100% - 4px) !important;
    margin:2px !important;
    transform:none !important;
    border-radius:2px !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  .found-thumb .collection-thumb-placeholder,
  .collection-browser-thumb .collection-thumb-placeholder{
    width:calc(100% - 4px) !important;
    height:calc(100% - 4px) !important;
    min-height:0 !important;
    margin:2px !important;
    transform:none !important;
    overflow:hidden !important;
  }

  /*
   * The paper remains the visual Polaroid and may stay slightly rotated.
   * Give it a little more bottom room so the photo never touches the caption
   * edge even on very small cards.
   */
  .found-thumb::before,
  .collection-browser-thumb::before{
    inset:-4px -4px -12px !important;
    transform:rotate(-1.4deg) !important;
  }

  .found-thumb::after,
  .collection-browser-thumb::after{
    bottom:-8px !important;
    transform:rotate(-1.4deg) !important;
  }

  /*
   * Video Play icons remain centered on the visible photo, not on the paper
   * extension underneath it.
   */
  .found-thumb > .memory-preview-play,
  .collection-browser-thumb > .memory-preview-play{
    top:50% !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}


/* ============================================================
   EVENT / SUB-COLLECTION POLAROID PHOTO VIEWPORT V151
   ============================================================ */

/*
 * Event Memories use a real paper container with extra bottom padding.
 * The image used to live directly inside that paper element. On narrow
 * layouts old square-preview rules could let the image visually extend
 * through/below the Polaroid paper.
 *
 * The new .event-slot-photo is the dedicated photo aperture:
 * - always square
 * - always clipped
 * - independent from the paper/caption padding
 * - used by Main, Bonus, Sub-Collection and Community Event cards
 */
.event-slot-card.event-slot-found .event-slot-image{
  box-sizing:border-box !important;
  overflow:visible !important;
}

.event-slot-card.event-slot-found .event-slot-photo{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  border-radius:1px;
  background:#e8efeb;
  box-shadow:0 0 0 1px rgba(29,54,47,.055);
}

.event-slot-card.event-slot-found .event-slot-photo > img{
  position:absolute !important;
  inset:0;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center !important;
  transform:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.event-slot-card.event-slot-found .event-slot-photo > span:not(.memory-preview-play){
  position:absolute;
  inset:0;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  display:grid;
  place-items:center;
  color:rgba(49,86,77,.30);
}

/*
 * The Play badge now centers against the actual photo aperture rather than
 * the full Polaroid paper including its larger lower border.
 */
.event-slot-card.event-slot-found .event-slot-photo > .memory-preview-play{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  transform:translate(-50%,-50%) !important;
  z-index:5 !important;
}

/*
 * Mobile is where the old bug was visible. Keep the paper itself slightly
 * rotated, while the clipped photo remains safely inside its aperture.
 */
@media(max-width:650px){
  .event-slot-card.event-slot-found .event-slot-image{
    width:calc(100% - 14px) !important;
    margin:7px 6px 11px 8px !important;
    padding:5px 5px 12px !important;
    aspect-ratio:auto !important;
    height:auto !important;
    min-height:0 !important;
  }

  .event-slot-card.event-slot-found .event-slot-photo{
    width:100% !important;
    aspect-ratio:1 / 1 !important;
    overflow:hidden !important;
  }

  .event-slot-card.event-slot-found .event-slot-photo > img{
    width:100% !important;
    height:100% !important;
  }
}

/*
 * Sub-Collection rendering uses the exact same event-slot-card component,
 * but keep explicit selectors here as regression protection.
 */
.event-subcollection-slot-grid
  .event-slot-card.event-slot-found
  .event-slot-photo,
.event-bonus-grid
  .event-slot-card.event-slot-found
  .event-slot-photo{
  overflow:hidden !important;
}


/* ============================================================
   PEOPLE ALONG THE WAY V153
   ============================================================ */

.collection-mode-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.4rem;
  margin:1.1rem 0 .8rem;
  padding:.28rem;
  border:1px solid rgba(15,60,53,.09);
  border-radius:999px;
  background:rgba(255,255,255,.58);
}

.collection-mode-tab{
  min-height:42px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#6d7e77;
  font:inherit;
  font-size:.66rem;
  font-weight:900;
  cursor:pointer;
}

.collection-mode-tab.is-active{
  background:#0f3c35;
  color:#fff;
  box-shadow:0 7px 17px rgba(15,60,53,.16);
}

.collection-mode-panel.is-hidden{
  display:none !important;
}

.people-collection-panel{
  margin-top:.8rem;
}

.people-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.1rem;
  border:1px solid rgba(15,60,53,.09);
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(85,199,216,.10), transparent 14rem),
    rgba(255,255,255,.60);
}

.people-heading h2{
  margin:.15rem 0 .25rem;
  color:var(--forest);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.7rem,6vw,2.6rem);
}

.people-heading p:last-child{
  margin:0;
  color:#75847e;
  font-size:.68rem;
}

.people-count{
  flex:0 0 auto;
  padding:.34rem .58rem;
  border-radius:999px;
  background:rgba(85,199,216,.10);
  color:#3f8fbd;
  font-size:.58rem;
  font-weight:900;
}

.people-own-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:.9rem 1rem;
  align-items:center;
  margin-top:.8rem;
  padding:1rem;
  border:1px solid rgba(239,106,50,.16);
  border-radius:22px;
  background:
    linear-gradient(
      135deg,
      rgba(239,106,50,.06),
      rgba(85,199,216,.06)
    ),
    rgba(255,255,255,.70);
}

.people-own-copy h3{
  margin:.12rem 0 .2rem;
  color:#29483f;
  font-size:.95rem;
}

.people-own-copy > p:last-child{
  margin:0;
  color:#718179;
  font-size:.64rem;
  line-height:1.5;
}

.people-own-preview{
  grid-row:1 / span 2;
  grid-column:2;
}

.people-own-actions{
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
}

.people-polaroid{
  width:86px;
  padding:6px 6px 16px;
  background:
    linear-gradient(145deg,#fffefa,#f4eee3);
  border-radius:3px;
  box-shadow:0 8px 18px rgba(24,54,46,.15);
  transform:rotate(-2deg);
}

.people-photo{
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 35%, #55c7d8, #0f3c35 72%);
}

.people-photo img,
.people-encounter-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.people-photo-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color:#fff;
  font-family:Georgia,serif;
  font-size:2rem;
  font-weight:700;
}

.people-polaroid strong{
  display:block;
  margin-top:.42rem;
  overflow:hidden;
  color:#334840;
  font-size:.57rem;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.people-login-note,
.people-empty{
  margin-top:.8rem;
  padding:.9rem 1rem;
  border:1px dashed rgba(15,60,53,.13);
  border-radius:18px;
  background:rgba(255,255,255,.48);
  color:#718179;
}

.people-login-note strong,
.people-login-note span,
.people-empty strong,
.people-empty span{
  display:block;
}

.people-login-note strong,
.people-empty strong{
  color:#405d54;
  font-size:.74rem;
}

.people-login-note span,
.people-empty span{
  margin-top:.2rem;
  font-size:.62rem;
  line-height:1.5;
}

.people-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
  margin-top:.8rem;
}

.people-card{
  min-width:0;
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:.8rem;
  align-items:center;
  padding:.8rem;
  border:1px solid rgba(15,60,53,.09);
  border-radius:18px;
  background:rgba(255,255,255,.72);
}

.people-card.is-mutual{
  border-color:rgba(239,106,50,.20);
  background:
    radial-gradient(circle at 0 0, rgba(239,106,50,.08), transparent 8rem),
    rgba(255,255,255,.76);
}

.people-card-copy{
  min-width:0;
}

.people-found-badge,
.people-mutual-badge{
  display:inline-flex;
  padding:.2rem .38rem;
  border-radius:999px;
  font-size:.46rem;
  font-weight:950;
  letter-spacing:.1em;
}

.people-found-badge{
  background:rgba(85,199,216,.10);
  color:#3f8fbd;
}

.people-mutual-badge{
  background:rgba(239,106,50,.11);
  color:#c65b31;
}

.people-card-copy p{
  margin:.42rem 0 0;
  color:#536c63;
  font-size:.62rem;
  line-height:1.45;
}

.people-card-copy small{
  display:block;
  margin-top:.42rem;
  color:#8a9691;
  font-size:.52rem;
}

.people-modal-open{
  overflow:hidden;
}

.people-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:2300;
  display:grid;
  place-items:center;
  padding:16px;
  background:rgba(4,34,30,.70);
  backdrop-filter:blur(7px);
}

.people-modal-backdrop.is-hidden{
  display:none !important;
}

.people-modal{
  position:relative;
  width:min(100%,430px);
  max-height:min(92vh,760px);
  overflow:auto;
  padding:1.15rem;
  border:1px solid rgba(255,255,255,.52);
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(85,199,216,.13), transparent 14rem),
    linear-gradient(145deg,#fffefa,#f5f8f4);
  box-shadow:0 28px 70px rgba(3,31,27,.28);
}

.people-modal h2{
  margin:.15rem 2rem .35rem 0;
  color:#143f47;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.6rem,6vw,2.2rem);
  line-height:1.05;
}

.people-modal-intro{
  margin:0 0 .9rem;
  color:#74837c;
  font-size:.66rem;
  line-height:1.5;
}

.people-modal-close{
  position:absolute;
  top:.72rem;
  right:.72rem;
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(15,60,53,.07);
  color:#45675d;
  font:inherit;
  font-size:1rem;
  cursor:pointer;
}

.people-profile-form{
  display:grid;
  gap:.72rem;
}

.people-profile-form label{
  display:grid;
  gap:.28rem;
  color:#405d54;
  font-size:.61rem;
  font-weight:850;
}

.people-profile-form input,
.people-profile-form textarea,
.people-share-url{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(15,60,53,.13);
  border-radius:12px;
  padding:.68rem .72rem;
  background:#fff;
  color:#29483f;
  font:inherit;
  font-size:.68rem;
}

.people-profile-form textarea{
  resize:vertical;
}

.people-profile-form small{
  color:#89958f;
  font-size:.52rem;
  font-weight:500;
}

.people-form-status{
  display:block;
  min-height:1rem;
  margin-top:.45rem;
  color:#718078;
  font-size:.57rem;
  text-align:center;
}

.people-share-qr-wrap{
  display:grid;
  place-items:center;
  margin:.85rem 0;
  padding:.8rem;
  border:1px solid rgba(15,60,53,.09);
  border-radius:18px;
  background:#fff;
}

.people-share-qr-wrap img{
  width:min(100%,280px);
  aspect-ratio:1;
  object-fit:contain;
}

.people-share-url{
  margin-bottom:.6rem;
}

.people-encounter-polaroid{
  width:min(72vw,270px);
  margin:.9rem auto 1rem;
  padding:10px 10px 38px;
  background:
    linear-gradient(145deg,#fffefa,#f2eadc);
  box-shadow:0 18px 38px rgba(15,60,53,.20);
  transform:rotate(-1.5deg);
}

.people-encounter-photo{
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 35%, #55c7d8, #0f3c35 72%);
}

.people-encounter-polaroid strong{
  display:block;
  margin-top:.7rem;
  color:#30483f;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem;
  text-align:center;
}

.people-encounter-message{
  margin:.6rem 0 .9rem;
  color:#526a61;
  font-size:.73rem;
  line-height:1.6;
  text-align:center;
}

.people-encounter-social{
  width:100%;
  box-sizing:border-box;
  justify-content:center;
  margin-bottom:.7rem;
}

.people-encounter-actions{
  display:flex;
  gap:.5rem;
}

.people-encounter-actions > *{
  flex:1;
}

@media(max-width:650px){
  .collection-mode-tabs{
    grid-template-columns:1fr;
    border-radius:18px;
  }

  .people-heading{
    align-items:flex-start;
    flex-direction:column;
  }

  .people-own-card{
    grid-template-columns:1fr;
  }

  .people-own-preview{
    grid-row:auto;
    grid-column:auto;
  }

  .people-own-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .people-grid{
    grid-template-columns:1fr;
  }

  .people-modal-backdrop{
    align-items:end;
    padding:10px;
  }

  .people-modal{
    width:100%;
    border-radius:22px 22px 16px 16px;
  }

  .people-encounter-actions{
    flex-direction:column;
  }
}



/* ============================================================
   COLLECTION TAB ICONS V155
   ============================================================ */

.collection-mode-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.3rem .7rem;
}

.collection-mode-tab-inner{
  min-width:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}

.collection-mode-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.collection-mode-icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.collection-mode-icon-memory{
  width:20px;
  height:20px;
  object-fit:contain;
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.08));
}

.collection-mode-icon-people{
  width:20px;
  height:20px;
  border-radius:50%;
  color:#3f8fbd;
  background:rgba(85,199,216,.11);
  box-shadow:inset 0 0 0 1px rgba(85,199,216,.12);
}

.collection-mode-icon-people svg{
  width:14px;
  height:14px;
  overflow:visible;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

.collection-mode-icon-people circle{
  fill:currentColor;
  stroke:none;
}

.collection-mode-tab.is-active .collection-mode-icon-people{
  color:#fff;
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}

.collection-mode-tab.is-active .collection-mode-icon-memory{
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.16))
    brightness(1.04);
}

@media(max-width:650px){
  .collection-mode-tab{
    padding:.45rem .7rem;
    border-radius:16px;
  }

  .collection-mode-tab-inner{
    width:100%;
    justify-content:center;
  }

  .collection-mode-label{
    font-size:.64rem;
  }
}


/* ============================================================
   ONE-SCAN PEOPLE LINK + LARGE PEOPLE MEMORIES V156
   ============================================================ */

.people-card{
  appearance:none;
  width:100%;
  box-sizing:border-box;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.people-card:hover,
.people-card:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(85,199,216,.26);
  box-shadow:0 10px 24px rgba(15,60,53,.09);
  outline:none;
}

.people-card.is-mutual:hover,
.people-card.is-mutual:focus-visible{
  border-color:rgba(239,106,50,.28);
}

.people-own-preview{
  appearance:none;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
}

.people-own-preview:hover .people-polaroid,
.people-own-preview:focus-visible .people-polaroid{
  transform:rotate(-1deg) translateY(-2px);
  box-shadow:0 12px 24px rgba(24,54,46,.19);
}

.people-own-preview:focus-visible{
  outline:2px solid rgba(85,199,216,.55);
  outline-offset:5px;
  border-radius:6px;
}

.people-polaroid{
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

/*
 * Collected People Memories open in the existing encounter modal, but this
 * modal now doubles as the large Memory viewer.
 */
.people-encounter-modal{
  width:min(100%,500px);
}

.people-encounter-polaroid{
  width:min(78vw,330px);
  padding:12px 12px 46px;
}

.people-encounter-photo{
  aspect-ratio:1 / 1;
}

.people-encounter-polaroid strong{
  margin-top:.9rem;
  font-size:1.12rem;
}

.people-encounter-message{
  max-width:34rem;
  margin:.75rem auto .95rem;
  font-size:.78rem;
}

#peopleKeepPerson.is-hidden{
  display:none !important;
}

@media(max-width:650px){
  .people-card{
    min-height:116px;
  }

  .people-encounter-polaroid{
    width:min(82vw,320px);
  }
}


/* ============================================================
   PEOPLE TERMINOLOGY + TOP-RIGHT QR SHORTCUT V158
   ============================================================ */

.paws-top-shortcuts{
  position:fixed !important;
  top:max(12px,env(safe-area-inset-top)) !important;
  right:max(12px,env(safe-area-inset-right)) !important;
  z-index:2147483000 !important;
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:0 !important;
  pointer-events:none;
}

.paws-top-shortcuts > *{
  pointer-events:auto;
}

/*
 * The old Collection shortcut remains visually identical, but positioning is
 * owned by the shared wrapper so My QR can sit immediately beside it.
 */
.paws-top-shortcuts > .collection-link,
.paws-top-shortcuts > .collection-link.collection-link-fixed{
  position:relative !important;
  inset:auto !important;
  top:auto !important;
  right:auto !important;
  left:auto !important;
  bottom:auto !important;
  margin:0 !important;
}

.people-qr-shortcut{
  appearance:none;
  min-height:2.7rem;
  display:inline-flex;
  align-items:center;
  gap:.48rem;
  padding:.38rem .68rem .38rem .5rem;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  background:rgba(31,103,111,.76);
  backdrop-filter:blur(8px);
  color:#fff;
  font:inherit;
  cursor:pointer;
  box-shadow:
    0 8px 20px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.people-qr-shortcut:hover,
.people-qr-shortcut:focus-visible{
  transform:translateY(-2px);
  background:rgba(47,130,139,.90);
  box-shadow:
    0 12px 26px rgba(0,0,0,.18),
    0 0 20px rgba(85,199,216,.15);
  outline:none;
}

.people-qr-shortcut:active{
  transform:translateY(0) scale(.98);
}

.people-qr-shortcut-icon{
  width:1.75rem;
  height:1.75rem;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.12);
}

.people-qr-shortcut-icon svg{
  width:1.18rem;
  height:1.18rem;
  overflow:visible;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}

.people-qr-shortcut-icon circle{
  fill:currentColor;
  stroke:none;
}

.people-qr-shortcut-copy{
  display:grid;
  line-height:.9;
  text-align:left;
}

.people-qr-shortcut-copy strong{
  font-size:.7rem;
  letter-spacing:-.01em;
}

.people-qr-shortcut-copy small{
  margin-top:.22rem;
  color:rgba(255,255,255,.74);
  font-size:.5rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

@media(max-width:560px){
  .paws-top-shortcuts{
    top:max(8px,env(safe-area-inset-top)) !important;
    right:max(8px,env(safe-area-inset-right)) !important;
    gap:.35rem;
  }

  .people-qr-shortcut{
    min-width:2.8rem;
    padding:.42rem;
    justify-content:center;
  }

  .people-qr-shortcut-copy{
    display:none;
  }

  .people-qr-shortcut-icon{
    width:1.72rem;
    height:1.72rem;
  }
}

@media(max-width:360px){
  .people-qr-shortcut{
    padding:.35rem;
  }

  .people-qr-shortcut-icon{
    transform:scale(.92);
  }
}


/* ============================================================
   THREADS CONNECTED / ARACHNO LANGUAGE V159
   ============================================================ */

.collection-mode-icon-people,
.people-qr-shortcut-icon{
  position:relative;
}

.collection-mode-icon-people::after,
.people-qr-shortcut-icon::after{
  content:"";
  position:absolute;
  inset:2px;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.18;
  pointer-events:none;
}

.people-mutual-badge{
  letter-spacing:.08em;
}


/* ============================================================
   MYSTERIOUS ARACHNO PEOPLE ALONG THE WAY V160
   ============================================================ */

#peopleCollectionPanel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:1rem;
  border:1px solid rgba(93,130,145,.26);
  border-radius:28px;
  background:
    radial-gradient(circle at 18% 0%, rgba(95,125,176,.16), transparent 18rem),
    radial-gradient(circle at 88% 12%, rgba(72,183,193,.10), transparent 16rem),
    radial-gradient(circle at 50% 100%, rgba(30,41,62,.34), transparent 18rem),
    linear-gradient(180deg, rgba(18,22,31,.97), rgba(15,20,28,.97));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 20px 48px rgba(8,12,18,.28);
  color:#e7efe9;
}

#peopleCollectionPanel::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.05) 0, transparent 30%),
    radial-gradient(circle at 82% 14%, rgba(255,255,255,.04) 0, transparent 26%),
    linear-gradient(115deg, transparent 0 20%, rgba(255,255,255,.025) 20.5%, transparent 21.2%, transparent 34%, rgba(255,255,255,.02) 34.5%, transparent 35.2%, transparent 48%, rgba(255,255,255,.02) 48.5%, transparent 49.2%, transparent 65%, rgba(255,255,255,.018) 65.5%, transparent 66.2%);
  opacity:.75;
  pointer-events:none;
  z-index:-2;
}

#peopleCollectionPanel::after{
  content:"";
  position:absolute;
  inset:auto -1rem -4.5rem auto;
  width:16rem;
  height:16rem;
  background:
    radial-gradient(circle at center, rgba(95,125,176,.10), transparent 62%);
  filter:blur(10px);
  pointer-events:none;
  z-index:-1;
}

#peopleCollectionPanel .landing-kicker{
  color:#9fc8d2;
}

#peopleCollectionPanel h2,
#peopleCollectionPanel h3,
#peopleCollectionPanel strong{
  color:#f4efe5;
}

#peopleCollectionPanel p,
#peopleCollectionPanel span,
#peopleCollectionPanel small{
  color:rgba(232,239,236,.82);
}

#peopleCollectionPanel .people-heading{
  position:relative;
  border-color:rgba(126,164,179,.16);
  background:
    radial-gradient(circle at 100% 0%, rgba(85,199,216,.10), transparent 13rem),
    linear-gradient(180deg, rgba(28,35,47,.90), rgba(19,25,35,.86));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 12px 30px rgba(0,0,0,.18);
}

#peopleCollectionPanel .people-count{
  border:1px solid rgba(99,185,207,.24);
  background:rgba(12,17,25,.70);
  color:#d9edf0;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

/* Atmospheric Arachno stage */
.people-thread-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);
  gap:1rem;
  align-items:center;
  margin:1rem 0 1.05rem;
  padding:1.15rem 1.2rem;
  border:1px solid rgba(106,141,161,.18);
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(circle at 0 0, rgba(80,98,153,.18), transparent 12rem),
    radial-gradient(circle at 100% 100%, rgba(44,180,188,.10), transparent 12rem),
    linear-gradient(180deg, rgba(30,37,52,.92), rgba(17,22,31,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 18px 38px rgba(0,0,0,.18);
}

.people-thread-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, transparent 0 12%, rgba(255,255,255,.04) 12.4%, transparent 12.8%, transparent 28%, rgba(255,255,255,.028) 28.4%, transparent 28.8%, transparent 52%, rgba(255,255,255,.028) 52.4%, transparent 52.8%);
  pointer-events:none;
  opacity:.7;
}

.people-thread-stage-copy{
  position:relative;
  z-index:1;
}

.people-thread-stage-copy h3{
  margin:.1rem 0 .42rem;
  font-size:1.16rem;
}

.people-thread-stage-copy p:last-child{
  margin:0;
  max-width:34rem;
}

.people-thread-stage-visual{
  position:relative;
  min-height:170px;
}

.people-thread-stage-spine{
  position:absolute;
  left:1rem;
  right:3.6rem;
  top:50%;
  height:1px;
  background:linear-gradient(90deg, rgba(120,164,186,.15), rgba(154,214,221,.55), rgba(120,164,186,.15));
  transform:translateY(-50%);
}

.people-thread-stage-card{
  position:absolute;
  width:78px;
  height:92px;
  padding:6px 6px 18px;
  border-radius:6px;
  background:linear-gradient(160deg, #fffefa, #efe7d9);
  box-shadow:0 14px 22px rgba(0,0,0,.23);
}

.people-thread-stage-card span{
  display:block;
  width:100%;
  height:100%;
  border-radius:3px;
  background:
    radial-gradient(circle at 30% 32%, rgba(180,206,223,.45), transparent 35%),
    linear-gradient(160deg, #415165, #2a3445 58%, #51617a);
}

.people-thread-stage-card-a{ left:.8rem; top:.95rem; transform:rotate(-8deg); }
.people-thread-stage-card-b{ left:7rem; bottom:.7rem; transform:rotate(4.2deg); }
.people-thread-stage-card-c{ left:13.3rem; top:1.2rem; transform:rotate(-4deg); }

.people-thread-stage-card::before{
  content:"";
  position:absolute;
  left:50%;
  top:-18px;
  width:1px;
  height:18px;
  background:linear-gradient(to bottom, rgba(162,219,226,.06), rgba(162,219,226,.65));
  transform:translateX(-50%);
}

.people-thread-stage-node{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d6eef2;
  box-shadow:0 0 0 4px rgba(120,205,215,.10), 0 0 12px rgba(120,205,215,.35);
}

.people-thread-stage-node-a{ left:2.85rem; top:1rem; }
.people-thread-stage-node-b{ left:9.05rem; bottom:.5rem; }
.people-thread-stage-node-c{ left:15.3rem; top:1.08rem; }

.people-thread-stage-arachno{
  position:absolute;
  right:-.3rem;
  bottom:-.4rem;
  width:138px;
  height:138px;
  background:url("./assets/arachno-pull-refresh.png") right bottom / contain no-repeat;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.28));
  opacity:.98;
}

/* Own card, notes, empty state */
#peopleCollectionPanel .people-own-card,
#peopleCollectionPanel .people-login-note,
#peopleCollectionPanel .people-empty{
  position:relative;
  border-color:rgba(126,164,179,.15);
  background:
    radial-gradient(circle at 100% 0, rgba(85,199,216,.07), transparent 12rem),
    linear-gradient(180deg, rgba(25,31,43,.90), rgba(16,22,31,.88));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 16px 32px rgba(0,0,0,.16);
}

#peopleCollectionPanel .people-login-note strong,
#peopleCollectionPanel .people-empty strong{
  color:#f5ede0;
}

#peopleCollectionPanel .people-login-note span,
#peopleCollectionPanel .people-empty span{
  color:rgba(232,239,236,.78);
}

/* Grid becomes a thread-web board */
#peopleCollectionPanel .people-grid{
  position:relative;
  padding-top:1.35rem;
  gap:1rem;
}

#peopleCollectionPanel .people-grid::before{
  content:"";
  position:absolute;
  left:1.25rem;
  right:1.25rem;
  top:.55rem;
  height:1px;
  background:linear-gradient(90deg, rgba(155,214,220,.08), rgba(155,214,220,.45), rgba(155,214,220,.08));
}

#peopleCollectionPanel .people-card{
  position:relative;
  border-color:rgba(120,162,178,.16);
  background:
    radial-gradient(circle at 100% 0, rgba(93,196,209,.08), transparent 8rem),
    linear-gradient(180deg, rgba(28,35,47,.94), rgba(20,26,36,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 16px 28px rgba(0,0,0,.16);
}

#peopleCollectionPanel .people-card::before{
  content:"";
  position:absolute;
  left:46px;
  top:-18px;
  width:1px;
  height:18px;
  background:linear-gradient(to bottom, rgba(162,219,226,.04), rgba(162,219,226,.55));
}

#peopleCollectionPanel .people-card::after{
  content:"";
  position:absolute;
  left:42px;
  top:-23px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#d7eef1;
  box-shadow:0 0 0 4px rgba(120,205,215,.08), 0 0 12px rgba(120,205,215,.30);
}

#peopleCollectionPanel .people-card:nth-child(3n+1) .people-polaroid{
  transform:rotate(-2.4deg);
}
#peopleCollectionPanel .people-card:nth-child(3n+2) .people-polaroid{
  transform:rotate(1.8deg);
}
#peopleCollectionPanel .people-card:nth-child(3n+3) .people-polaroid{
  transform:rotate(-.9deg);
}

#peopleCollectionPanel .people-polaroid{
  background:linear-gradient(160deg,#fffefa,#eee6d8);
  box-shadow:0 12px 22px rgba(0,0,0,.18);
}

#peopleCollectionPanel .people-card-copy p{
  color:rgba(234,240,238,.86);
}

#peopleCollectionPanel .people-card-copy small{
  color:rgba(165,212,221,.85);
}

#peopleCollectionPanel .people-found-badge,
#peopleCollectionPanel .people-mutual-badge{
  background:rgba(12,18,25,.72);
  border:1px solid rgba(153,214,220,.22);
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}

#peopleCollectionPanel .people-mutual-badge{
  color:#f6e3bc;
  border-color:rgba(247,197,110,.26);
  background:linear-gradient(180deg, rgba(57,46,23,.62), rgba(23,18,10,.78));
}

#peopleCollectionPanel .people-card.is-mutual{
  border-color:rgba(247,197,110,.18);
  background:
    radial-gradient(circle at 100% 0, rgba(248,185,92,.12), transparent 9rem),
    radial-gradient(circle at 0 100%, rgba(95,125,176,.12), transparent 8rem),
    linear-gradient(180deg, rgba(30,37,49,.95), rgba(22,27,37,.93));
}

/* Large People card modal */
.people-encounter-backdrop{
  background:rgba(8,12,18,.70);
  backdrop-filter:blur(8px);
}

.people-encounter-modal{
  border-color:rgba(126,164,179,.16);
  background:
    radial-gradient(circle at 100% 0, rgba(93,196,209,.08), transparent 10rem),
    linear-gradient(180deg, rgba(24,30,42,.96), rgba(16,21,30,.96));
  color:#ecf3ee;
  box-shadow:0 24px 56px rgba(0,0,0,.34);
}

.people-encounter-modal .landing-kicker{
  color:#9fc8d2;
}

.people-encounter-modal h2,
.people-encounter-modal strong{
  color:#f5ede0;
}

.people-encounter-modal p,
.people-encounter-modal span{
  color:rgba(232,239,236,.84);
}

@media (max-width: 900px){
  .people-thread-stage{
    grid-template-columns:1fr;
  }

  .people-thread-stage-visual{
    min-height:160px;
  }
}

@media (max-width: 640px){
  #peopleCollectionPanel{
    padding:.85rem;
  }

  .people-thread-stage{
    padding:1rem;
  }

  .people-thread-stage-copy h3{
    font-size:1.02rem;
  }

  .people-thread-stage-visual{
    min-height:152px;
  }

  .people-thread-stage-card{
    width:66px;
    height:80px;
  }

  .people-thread-stage-card-a{ left:.55rem; top:1rem; }
  .people-thread-stage-card-b{ left:5.55rem; bottom:.75rem; }
  .people-thread-stage-card-c{ left:10.1rem; top:1.2rem; }

  .people-thread-stage-node-a{ left:2.3rem; top:1.05rem; }
  .people-thread-stage-node-b{ left:7.1rem; bottom:.55rem; }
  .people-thread-stage-node-c{ left:11.45rem; top:1.15rem; }

  .people-thread-stage-arachno{
    width:116px;
    height:116px;
    right:-.5rem;
  }

  #peopleCollectionPanel .people-card::before{
    left:40px;
  }

  #peopleCollectionPanel .people-card::after{
    left:36px;
  }
}


/* ============================================================
   PEOPLE RED THREAD POLISH V161
   ============================================================ */

#peopleCollectionPanel{
  background:
    radial-gradient(circle at 16% 0%, rgba(174,82,80,.15), transparent 18rem),
    radial-gradient(circle at 86% 12%, rgba(120,57,71,.14), transparent 16rem),
    radial-gradient(circle at 50% 100%, rgba(30,41,62,.34), transparent 18rem),
    linear-gradient(180deg, rgba(18,22,31,.97), rgba(15,20,28,.97));
}

#peopleCollectionPanel::after{
  background: radial-gradient(circle at center, rgba(170,76,78,.12), transparent 62%);
}

#peopleCollectionPanel .landing-kicker,
.people-thread-stage-copy .landing-kicker,
.people-encounter-modal .landing-kicker{
  color:#e6a09a;
  letter-spacing:.22em;
}

#peopleCollectionPanel .people-count{
  border-color: rgba(197,113,115,.24);
}

#peopleCollectionPanel .people-heading{
  background:
    radial-gradient(circle at 100% 0%, rgba(166,83,94,.13), transparent 13rem),
    linear-gradient(180deg, rgba(28,35,47,.90), rgba(19,25,35,.86));
}

.people-thread-stage{
  background:
    radial-gradient(circle at 0 0, rgba(126,63,84,.22), transparent 12rem),
    radial-gradient(circle at 100% 100%, rgba(104,50,63,.16), transparent 12rem),
    linear-gradient(180deg, rgba(30,37,52,.92), rgba(17,22,31,.92));
}

.people-thread-stage-spine,
#peopleCollectionPanel .people-grid::before{
  background:linear-gradient(90deg, rgba(201,112,113,.12), rgba(220,136,126,.72), rgba(201,112,113,.12));
}

.people-thread-stage-card::before,
#peopleCollectionPanel .people-card::before{
  background:linear-gradient(to bottom, rgba(239,164,154,.06), rgba(226,132,124,.8));
}

.people-thread-stage-node,
#peopleCollectionPanel .people-card::after{
  background:#ffe3dc;
  box-shadow:0 0 0 4px rgba(214,109,106,.10), 0 0 12px rgba(224,127,119,.38);
}

#peopleCollectionPanel .people-found-badge,
#peopleCollectionPanel .people-mutual-badge{
  border-color: rgba(198,113,115,.24);
}

#peopleCollectionPanel .people-card{
  background:
    radial-gradient(circle at 100% 0, rgba(142,68,83,.14), transparent 8rem),
    linear-gradient(180deg, rgba(28,35,47,.94), rgba(20,26,36,.92));
}

#peopleCollectionPanel .people-card.is-mutual{
  border-color: rgba(233,170,120,.2);
  background:
    radial-gradient(circle at 100% 0, rgba(201,121,93,.16), transparent 9rem),
    radial-gradient(circle at 0 100%, rgba(142,68,83,.18), transparent 8rem),
    linear-gradient(180deg, rgba(30,37,49,.95), rgba(22,27,37,.93));
}

.people-encounter-modal{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 0% 0%, rgba(126,63,84,.18), transparent 11rem),
    radial-gradient(circle at 100% 0, rgba(201,121,93,.10), transparent 10rem),
    linear-gradient(180deg, rgba(24,30,42,.97), rgba(16,21,30,.97));
}

.people-encounter-modal::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(118deg, transparent 0 17%, rgba(255,255,255,.035) 17.4%, transparent 17.8%, transparent 36%, rgba(219,141,128,.035) 36.4%, transparent 36.8%, transparent 58%, rgba(255,255,255,.028) 58.4%, transparent 58.8%);
  opacity:.9;
}

.people-encounter-polaroid{
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}

.people-encounter-message{
  max-width:34rem;
  margin:.5rem auto .75rem;
  color:rgba(241,241,233,.92) !important;
  font-size:.96rem;
  line-height:1.72;
  text-wrap:balance;
}

.people-encounter-threadline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  width:min(100%, 32rem);
  margin:0 auto 1rem;
  color:rgba(231,174,161,.86);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.people-encounter-threadline::before,
.people-encounter-threadline::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(219,141,128,.75), transparent);
}

.people-encounter-threadline-node{
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:#ffe7e1;
  box-shadow:0 0 0 4px rgba(211,109,101,.1), 0 0 14px rgba(220,130,118,.32);
}

.people-encounter-threadline-label{
  white-space:nowrap;
}

.people-encounter-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:0;
  margin:0 auto .75rem;
  padding:.7rem 1rem;
  border-color:rgba(212,132,120,.24);
  background:rgba(247,238,231,.92);
  color:#6d403f;
}

.people-encounter-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.65rem;
  width:100%;
}

.people-encounter-actions > *{
  flex:0 1 auto;
  min-width:12rem;
}

.people-encounter-actions .account-primary-button,
.people-encounter-actions .account-link-button{
  min-height:46px;
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}

.people-encounter-actions .account-primary-button{
  background:linear-gradient(135deg, #8f454e, #c06d5d);
}

.people-encounter-actions .account-primary-button:disabled{
  opacity:1;
  cursor:default;
  background:linear-gradient(135deg, rgba(96,61,71,.9), rgba(143,89,100,.9));
  color:rgba(255,248,244,.88);
}

.people-encounter-actions .account-link-button{
  border-color:rgba(212,132,120,.24);
  background:rgba(247,238,231,.92);
  color:#6d403f;
}

.people-encounter-status,
#peopleEncounterStatus{
  display:block;
  margin-top:.85rem;
  text-align:center;
  color:rgba(220,193,184,.92);
}

@media (max-width: 640px){
  .people-encounter-message{
    font-size:.89rem;
  }

  .people-encounter-threadline{
    gap:.45rem;
    font-size:.56rem;
    letter-spacing:.14em;
  }

  .people-encounter-threadline-label{
    white-space:normal;
    text-align:center;
  }

  .people-encounter-social,
  .people-encounter-actions > *{
    width:100%;
    min-width:0;
  }
}


/* ============================================================
   MEMORIES MODE / THREADS MODE V162
   ============================================================ */

body,
.memory-landing,
.landing-bg,
.landing-vignette,
.landing-wrap,
.collection-mode-tabs,
.collection-account{
  transition:
    background .5s ease,
    border-color .5s ease,
    color .5s ease,
    box-shadow .5s ease,
    filter .5s ease;
}

body.threads-mode,
html.threads-mode{
  background:#080b10;
}

body.threads-mode .app-shell{
  background:
    radial-gradient(circle at 50% 8%, rgba(116,47,66,.16), transparent 26rem),
    linear-gradient(180deg,#0b1118,#080b10);
  box-shadow:
    0 0 90px rgba(0,0,0,.55),
    0 0 44px rgba(139,55,70,.08);
}

body.threads-mode .memory-landing{
  color:#e8ece8;
  background:#0b1017;
}

body.threads-mode .landing-bg{
  background:
    linear-gradient(rgba(7,13,18,.88), rgba(7,11,17,.96)),
    url("./assets/paws-cover.jpg") center top / cover;
  filter:saturate(.42) brightness(.55) contrast(1.08);
}

body.threads-mode .landing-vignette{
  background:
    radial-gradient(circle at 50% 13%, rgba(155,66,76,.12), transparent 27rem),
    radial-gradient(circle at 50% 60%, transparent 0 34%, rgba(0,0,0,.34) 72%),
    linear-gradient(90deg, rgba(0,0,0,.30), transparent 18%, transparent 82%, rgba(0,0,0,.30));
}

body.threads-mode .landing-header h1{
  color:#f2eee7;
  text-shadow:
    0 2px 0 rgba(0,0,0,.25),
    0 0 28px rgba(159,70,78,.10);
}

body.threads-mode .landing-header .landing-kicker{
  color:#dd8d88;
}

body.threads-mode .landing-intro{
  color:rgba(220,229,225,.72);
}

body.threads-mode .collection-mode-tabs{
  border-color:rgba(183,100,107,.18);
  background:rgba(9,14,20,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 14px 30px rgba(0,0,0,.20);
}

body.threads-mode .collection-mode-tab{
  color:rgba(224,232,228,.58);
}

body.threads-mode .collection-mode-tab.is-active{
  background:
    radial-gradient(circle at 50% 0%, rgba(188,91,95,.22), transparent 8rem),
    linear-gradient(135deg,#3c2029,#1d1720 58%,#111821);
  color:#fff4ed;
  box-shadow:
    inset 0 0 0 1px rgba(231,143,136,.15),
    0 8px 22px rgba(0,0,0,.28),
    0 0 20px rgba(165,66,77,.11);
}

body.threads-mode .collection-mode-icon-people{
  color:#f0afa7;
  background:rgba(178,79,87,.14);
  box-shadow:
    inset 0 0 0 1px rgba(228,134,127,.18),
    0 0 14px rgba(178,79,87,.16);
}

body.threads-mode .collection-account{
  border-color:rgba(176,93,104,.16);
  background:
    radial-gradient(circle at 100% 0%, rgba(145,62,78,.12), transparent 15rem),
    linear-gradient(180deg,rgba(24,30,41,.90),rgba(14,20,28,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 38px rgba(0,0,0,.20);
}

body.threads-mode .collection-account h2,
body.threads-mode .collection-account strong{
  color:#f3ece3;
}

body.threads-mode .collection-account p,
body.threads-mode .collection-account span,
body.threads-mode .collection-account small,
body.threads-mode .landing-footer-note,
body.threads-mode .landing-footer-note p{
  color:rgba(218,226,222,.70);
}

body.threads-mode .account-input-row input{
  border-color:rgba(181,103,110,.17);
  background:rgba(247,242,235,.92);
}

body.threads-mode .landing-social{
  border-color:rgba(185,102,108,.18);
  background:rgba(21,27,37,.88);
  color:#e6c1b9;
}

/* Thread mode keeps the broader Archive visible, but visually pushes the
   Memory-only areas into the background so Arachno's Web reads as the focus. */
body.threads-mode #guestInstructionList,
body.threads-mode #memberMemoryHelp,
body.threads-mode #memoryGiftCard,
body.threads-mode #claimedGifts,
body.threads-mode #communityMemoryStream{
  filter:saturate(.55) brightness(.64);
  opacity:.58;
}

body.threads-mode #peopleCollectionPanel{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 24px 56px rgba(0,0,0,.34),
    0 0 38px rgba(145,58,70,.12);
}

/* ============================================================
   ARACHNO'S WEB - DEEPER GLOW V162
   ============================================================ */

.people-thread-stage{
  isolation:isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 42px rgba(123,48,64,.08),
    0 20px 44px rgba(0,0,0,.28),
    0 0 24px rgba(139,55,70,.08);
}

.people-thread-stage::after{
  content:"";
  position:absolute;
  inset:-25%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 75% 55%, rgba(190,82,87,.15), transparent 12rem),
    radial-gradient(circle at 35% 45%, rgba(117,47,72,.14), transparent 10rem);
  filter:blur(18px);
  opacity:.8;
}

.people-thread-stage-spine,
#peopleCollectionPanel .people-grid::before{
  height:2px;
  background:
    linear-gradient(90deg,
      rgba(112,36,47,.02),
      rgba(178,66,70,.46) 18%,
      rgba(242,128,112,.96) 50%,
      rgba(178,66,70,.46) 82%,
      rgba(112,36,47,.02));
  box-shadow:
    0 0 7px rgba(220,89,82,.38),
    0 0 18px rgba(156,52,64,.18);
}

.people-thread-stage-card::before,
#peopleCollectionPanel .people-card::before{
  width:2px;
  background:linear-gradient(to bottom,rgba(145,47,58,.08),rgba(237,119,105,.92));
  box-shadow:0 0 8px rgba(220,89,82,.32);
}

.people-thread-stage-node,
#peopleCollectionPanel .people-card::after{
  background:#ffe2db;
  box-shadow:
    0 0 0 4px rgba(212,86,82,.10),
    0 0 10px rgba(242,126,111,.55),
    0 0 22px rgba(165,54,66,.30);
  animation:arachnoThreadPulse 3.6s ease-in-out infinite;
}

.people-thread-stage-node-b{
  animation-delay:-1.2s;
}

.people-thread-stage-node-c{
  animation-delay:-2.35s;
}

.people-thread-stage-arachno{
  filter:
    drop-shadow(0 13px 18px rgba(0,0,0,.38))
    drop-shadow(0 0 12px rgba(170,66,76,.17));
}

.people-thread-stage-arachno::after{
  content:"";
}

#peopleCollectionPanel .people-card:hover,
#peopleCollectionPanel .people-card:focus-visible{
  border-color:rgba(219,128,119,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 34px rgba(0,0,0,.26),
    0 0 20px rgba(154,55,69,.12);
}

@keyframes arachnoThreadPulse{
  0%,100%{
    transform:scale(.92);
    opacity:.72;
  }
  50%{
    transform:scale(1.12);
    opacity:1;
  }
}

/* ============================================================
   PEOPLE DETAIL BUTTON ALIGNMENT V162
   ============================================================ */

.people-encounter-social{
  display:flex !important;
  width:fit-content !important;
  max-width:100%;
  margin:.1rem auto .85rem !important;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.people-encounter-actions{
  justify-content:center;
}

.people-encounter-actions > *{
  flex:0 1 15rem;
  width:auto;
  max-width:100%;
}

@media(max-width:640px){
  .people-encounter-social{
    width:fit-content !important;
    max-width:calc(100% - 1rem);
  }

  .people-encounter-actions > *{
    width:min(100%, 18rem);
    flex-basis:18rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .people-thread-stage-node,
  #peopleCollectionPanel .people-card::after{
    animation:none !important;
  }

  body,
  .memory-landing,
  .landing-bg,
  .landing-vignette,
  .landing-wrap,
  .collection-mode-tabs,
  .collection-account{
    transition:none !important;
  }
}

/* ============================================================
   THREADS MODE ACCOUNT / SIGN-IN THEME V163
   ============================================================ */

body.threads-mode .collection-account{
  border-color:rgba(181,92,103,.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(152,65,79,.17), transparent 15rem),
    radial-gradient(circle at 4% 100%, rgba(91,46,67,.13), transparent 13rem),
    linear-gradient(180deg,rgba(22,28,39,.96),rgba(13,18,26,.97));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 42px rgba(0,0,0,.26),
    0 0 30px rgba(137,54,67,.08);
}

body.threads-mode .collection-account::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(116deg,
      transparent 0 18%,
      rgba(214,119,112,.035) 18.3%,
      transparent 18.7%,
      transparent 45%,
      rgba(255,255,255,.02) 45.3%,
      transparent 45.7%,
      transparent 72%,
      rgba(193,93,101,.025) 72.3%,
      transparent 72.7%);
  opacity:.9;
}

body.threads-mode .account-cloud{
  color:rgba(201,101,106,.18);
  text-shadow:0 0 18px rgba(190,79,91,.12);
}

body.threads-mode .account-copy,
body.threads-mode .account-login-form,
body.threads-mode .account-message,
body.threads-mode .account-saved{
  position:relative;
  z-index:1;
}

body.threads-mode .account-copy > p:last-child,
body.threads-mode .account-app-login-hint,
body.threads-mode .account-privacy-copy,
body.threads-mode .account-saved > small{
  color:rgba(211,220,216,.64);
}

body.threads-mode .account-login-form > label{
  color:#e8c7c1;
}

body.threads-mode .account-input-row input{
  border-color:rgba(195,109,113,.24);
  background:rgba(10,15,22,.82);
  color:#f1eee9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

body.threads-mode .account-input-row input::placeholder{
  color:rgba(212,216,213,.42);
}

body.threads-mode .account-input-row input:focus{
  border-color:rgba(220,129,121,.55);
  box-shadow:
    0 0 0 3px rgba(185,76,86,.13),
    0 0 20px rgba(169,65,78,.08);
}

body.threads-mode .account-primary-button{
  background:linear-gradient(135deg,#7d3c48,#b85f58);
  color:#fff7f1;
  box-shadow:
    0 8px 20px rgba(0,0,0,.20),
    0 0 16px rgba(169,65,78,.08);
}

body.threads-mode .account-primary-button:hover,
body.threads-mode .account-primary-button:focus-visible{
  background:linear-gradient(135deg,#914551,#c96c61);
}

body.threads-mode .account-code-callout{
  border-color:rgba(210,116,105,.28);
  background:
    radial-gradient(circle at 0 50%, rgba(160,64,75,.14), transparent 8rem),
    linear-gradient(135deg,rgba(33,26,34,.92),rgba(19,24,32,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 10px 24px rgba(0,0,0,.15);
}

body.threads-mode .account-code-icon{
  background:rgba(174,73,82,.18);
  color:#efa69c;
  box-shadow:0 0 14px rgba(182,74,84,.10);
}

body.threads-mode .account-code-callout strong{
  color:#f2e9e3;
}

body.threads-mode .account-code-callout span:not(.account-code-icon){
  color:rgba(213,221,217,.65);
}

body.threads-mode .account-saved{
  border:1px solid rgba(178,91,103,.20);
  background:
    radial-gradient(circle at 100% 0%, rgba(129,58,76,.13), transparent 13rem),
    linear-gradient(180deg,rgba(29,35,47,.94),rgba(18,24,33,.94));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 14px 30px rgba(0,0,0,.18);
}

body.threads-mode .account-check{
  background:rgba(139,63,78,.18);
  color:#f0aaa1;
  box-shadow:
    inset 0 0 0 1px rgba(220,126,119,.12),
    0 0 16px rgba(166,68,82,.09);
}

body.threads-mode .account-saved-status strong{
  color:#f4ece5;
}

body.threads-mode #accountEmailDisplay{
  color:rgba(213,221,218,.58);
}

body.threads-mode .account-actions{
  gap:.5rem;
}

body.threads-mode .account-link-button{
  border-color:rgba(184,100,108,.22);
  background:rgba(26,32,42,.92);
  color:#e8d8d2;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 7px 16px rgba(0,0,0,.12);
}

body.threads-mode .account-link-button:hover,
body.threads-mode .account-link-button:focus-visible{
  border-color:rgba(219,126,118,.36);
  background:rgba(41,36,46,.96);
  color:#fff3ec;
}

body.threads-mode .account-link-button.danger{
  border-color:rgba(204,91,91,.28);
  background:rgba(72,31,39,.56);
  color:#f0a5a0;
}

body.threads-mode .account-link-button.danger:hover,
body.threads-mode .account-link-button.danger:focus-visible{
  border-color:rgba(225,105,102,.42);
  background:rgba(91,38,47,.70);
  color:#ffd8d3;
}

body.threads-mode .account-submission-entry{
  border-color:rgba(178,91,103,.20);
  background:
    linear-gradient(135deg,rgba(128,55,72,.12),rgba(22,28,38,.80));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

body.threads-mode .account-submission-entry strong{
  color:#f2e9e3;
}

body.threads-mode .account-submission-entry span{
  color:rgba(211,220,216,.62);
}

body.threads-mode .submit-memory-button,
body.threads-mode #openMemorySubmit{
  border-color:rgba(213,119,111,.28);
  background:linear-gradient(135deg,rgba(106,47,61,.88),rgba(151,72,73,.88));
  color:#fff0e9;
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    0 0 14px rgba(171,70,80,.07);
}

body.threads-mode .submit-memory-button:hover,
body.threads-mode .submit-memory-button:focus-visible,
body.threads-mode #openMemorySubmit:hover,
body.threads-mode #openMemorySubmit:focus-visible{
  background:linear-gradient(135deg,rgba(126,55,69,.96),rgba(174,82,79,.96));
}

body.threads-mode .account-privacy-copy a{
  color:#e19a92;
}

body.threads-mode .account-message{
  border:1px solid rgba(176,91,104,.18);
  background:rgba(110,48,65,.17);
  color:#eadbd5;
}

body.threads-mode .account-message.is-error{
  border-color:rgba(211,88,88,.22);
  background:rgba(115,39,49,.24);
  color:#f0aaa5;
}

@media(max-width:520px){
  body.threads-mode .account-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  body.threads-mode .account-actions .danger{
    grid-column:1 / -1;
  }

  body.threads-mode .account-submission-entry{
    align-items:stretch;
  }

  body.threads-mode .account-submission-entry .submit-memory-button{
    width:100%;
    justify-content:center;
  }
}

/* ============================================================
   ARACHNO'S LIVING WEB V164
   ============================================================ */

.people-thread-stage{
  grid-template-columns:1fr !important;
  gap:.8rem;
  padding:1.1rem;
}

.people-thread-stage-copy{
  max-width:42rem;
  padding-right:3rem;
}

.people-thread-stage-copy h3{
  font-size:clamp(1.1rem,3.4vw,1.45rem);
}

.people-web-live{
  position:relative;
  min-height:430px !important;
  border:1px solid rgba(184,92,98,.13);
  border-radius:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 48%,rgba(134,51,67,.17),transparent 11rem),
    radial-gradient(circle at 20% 20%,rgba(71,64,104,.13),transparent 12rem),
    radial-gradient(circle at 82% 78%,rgba(131,53,65,.12),transparent 10rem),
    linear-gradient(180deg,rgba(10,15,23,.88),rgba(8,12,18,.96));
  box-shadow:
    inset 0 0 48px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.02);
}

.people-web-live::before,
.people-web-live::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
}

.people-web-live::before{
  background:
    repeating-radial-gradient(circle at 50% 50%,transparent 0 53px,rgba(222,124,115,.018) 54px,transparent 55px 83px),
    repeating-conic-gradient(from 7deg at 50% 50%,transparent 0 14deg,rgba(225,132,121,.024) 14.5deg,transparent 15deg 31deg);
  opacity:.8;
  transform:rotate(-3deg);
}

.people-web-live::after{
  background:
    radial-gradient(circle at 50% 50%,rgba(205,102,99,.06),transparent 31%),
    linear-gradient(120deg,transparent 0 35%,rgba(255,255,255,.018) 35.4%,transparent 35.9% 67%,rgba(189,83,94,.02) 67.4%,transparent 67.9%);
  filter:blur(1px);
}

.people-web-lines{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}

.people-web-thread{
  vector-effect:non-scaling-stroke;
  fill:none;
  stroke:#c45f60;
  stroke-width:1.2;
  stroke-linecap:round;
  opacity:.48;
  filter:drop-shadow(0 0 2px rgba(203,83,87,.22));
}

.people-web-thread.strength-2{
  stroke-width:1.75;
  opacity:.62;
  filter:drop-shadow(0 0 3px rgba(217,94,91,.32));
}

.people-web-thread.strength-3{
  stroke-width:2.35;
  opacity:.78;
  filter:drop-shadow(0 0 4px rgba(230,112,101,.42));
}

.people-web-thread.strength-4{
  stroke-width:3;
  opacity:.94;
  filter:drop-shadow(0 0 6px rgba(242,126,111,.54));
}

.people-web-thread.is-event{
  stroke:#8c5965;
  stroke-dasharray:4 7;
  opacity:.34;
}

.people-web-thread.is-event-spine{
  stroke:#84505c;
  stroke-width:1;
  stroke-dasharray:2 9;
  opacity:.34;
}

.people-web-thread.is-event-spine.is-gathering{
  stroke:#da766b;
  stroke-width:1.7;
  opacity:.66;
  filter:drop-shadow(0 0 5px rgba(221,103,94,.38));
}

.people-web-thread.is-special{
  stroke:#e4b18c;
  stroke-width:2.4;
  stroke-dasharray:2 5;
  opacity:.9;
  filter:drop-shadow(0 0 6px rgba(239,177,125,.48));
  animation:peopleSpecialThreadGlow 2.7s ease-in-out infinite;
}

.people-web-nodes{
  position:absolute;
  inset:0;
  z-index:3;
}

.people-web-anchor,
.people-web-person,
.people-web-event{
  position:absolute;
  left:var(--web-x);
  top:var(--web-y);
  transform:translate(-50%,-50%);
}

.people-web-anchor{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ef9b90;
  box-shadow:
    0 0 0 7px rgba(184,73,82,.08),
    0 0 18px rgba(220,100,96,.30);
}

.people-web-person{
  appearance:none;
  width:66px;
  padding:5px 5px 16px;
  border:0;
  border-radius:4px;
  background:linear-gradient(155deg,#fffdf7,#e8dfd2);
  color:#453632;
  font:inherit;
  cursor:pointer;
  box-shadow:
    0 14px 25px rgba(0,0,0,.31),
    0 0 0 1px rgba(255,255,255,.24);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.people-web-person:nth-child(3n+1){
  transform:translate(-50%,-50%) rotate(-4deg);
}

.people-web-person:nth-child(3n+2){
  transform:translate(-50%,-50%) rotate(3deg);
}

.people-web-person:nth-child(3n+3){
  transform:translate(-50%,-50%) rotate(-1.5deg);
}

.people-web-person:hover,
.people-web-person:focus-visible{
  z-index:8;
  transform:translate(-50%,-50%) rotate(0deg) scale(1.08);
  box-shadow:
    0 18px 32px rgba(0,0,0,.40),
    0 0 22px rgba(212,91,89,.20);
  outline:none;
}

.people-web-person.is-self{
  width:80px;
  padding:6px 6px 20px;
  z-index:6;
  border:1px solid rgba(230,129,117,.32);
  box-shadow:
    0 18px 34px rgba(0,0,0,.36),
    0 0 24px rgba(196,77,85,.17);
}

.people-web-person.is-returned{
  box-shadow:
    0 16px 29px rgba(0,0,0,.34),
    0 0 20px rgba(227,105,94,.26);
}

.people-web-person.is-special{
  border:1px solid rgba(237,179,128,.52);
  box-shadow:
    0 17px 30px rgba(0,0,0,.36),
    0 0 24px rgba(237,170,114,.30);
}

.people-web-person-photo{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  background:linear-gradient(145deg,#3d4354,#232b3b);
}

.people-web-person-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.people-web-node-fallback{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  color:#f1e8dc;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.5rem;
  font-weight:700;
}

.people-web-person-name{
  display:block;
  margin-top:.34rem;
  overflow:hidden;
  color:#4a3733;
  font-size:.48rem;
  font-weight:900;
  line-height:1.1;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.people-web-return-mark,
.people-web-special-mark{
  position:absolute;
  display:grid;
  place-items:center;
  width:1.25rem;
  height:1.25rem;
  border-radius:50%;
  color:#fff5ec;
  font-size:.64rem;
  font-weight:900;
  box-shadow:0 5px 12px rgba(0,0,0,.22);
}

.people-web-return-mark{
  right:-.55rem;
  bottom:.3rem;
  background:#9d4e55;
}

.people-web-special-mark{
  right:-.5rem;
  top:-.5rem;
  background:#a16e4c;
  box-shadow:
    0 5px 12px rgba(0,0,0,.22),
    0 0 14px rgba(236,173,119,.30);
}

.people-web-event{
  z-index:4;
  width:105px;
  padding:.48rem .56rem;
  border:1px solid rgba(176,95,105,.19);
  border-radius:13px;
  background:rgba(13,18,26,.88);
  box-shadow:
    0 10px 20px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.02);
  color:#d9c8c2;
  text-align:center;
  pointer-events:none;
}

.people-web-event strong,
.people-web-event small{
  display:block;
}

.people-web-event strong{
  overflow:hidden;
  color:#f0ddd6 !important;
  font-size:.52rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.people-web-event small{
  margin-top:.18rem;
  color:rgba(220,190,183,.62) !important;
  font-size:.42rem;
  line-height:1.25;
}

.people-web-event.is-gathering{
  border-color:rgba(222,120,111,.35);
  background:
    radial-gradient(circle at 50% 0,rgba(165,67,76,.18),transparent 5rem),
    rgba(17,20,29,.92);
  box-shadow:
    0 12px 22px rgba(0,0,0,.25),
    0 0 18px rgba(190,75,81,.16);
}

.people-web-whisper{
  position:absolute;
  left:50%;
  bottom:.68rem;
  z-index:7;
  display:flex;
  align-items:center;
  gap:.5rem;
  max-width:calc(100% - 12rem);
  padding:.42rem .66rem;
  border:1px solid rgba(177,94,103,.13);
  border-radius:999px;
  background:rgba(8,12,18,.76);
  color:rgba(231,205,197,.75);
  font-size:.54rem;
  font-style:italic;
  line-height:1.35;
  transform:translateX(-50%);
  backdrop-filter:blur(7px);
}

.people-web-whisper-dot{
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:#e79589;
  box-shadow:
    0 0 0 4px rgba(197,77,85,.08),
    0 0 12px rgba(227,106,98,.38);
  animation:arachnoThreadPulse 3.1s ease-in-out infinite;
}

.people-web-more{
  position:absolute;
  right:.75rem;
  top:.72rem;
  z-index:7;
  padding:.28rem .46rem;
  border:1px solid rgba(177,94,103,.14);
  border-radius:999px;
  background:rgba(8,12,18,.72);
  color:rgba(222,194,187,.68) !important;
  font-size:.46rem;
  font-weight:800;
}

.people-thread-stage-arachno{
  z-index:5;
  right:.45rem !important;
  bottom:.1rem !important;
  width:154px !important;
  height:154px !important;
  opacity:.92;
  pointer-events:none;
}

.people-web-live.is-stirring .people-thread-stage-arachno{
  filter:
    drop-shadow(0 13px 18px rgba(0,0,0,.4))
    drop-shadow(0 0 17px rgba(210,84,88,.28));
  animation:peopleArachnoStir 4.4s ease-in-out infinite;
}

.people-web-live.thread-just-woven{
  animation:peopleWebWake 1.5s ease-out both;
}

/* ============================================================
   RECENTLY WOVEN V164
   ============================================================ */

.people-recent,
.people-discoveries{
  margin-top:1rem;
  padding:1rem;
  border:1px solid rgba(153,84,97,.15);
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0,rgba(133,56,71,.09),transparent 10rem),
    linear-gradient(180deg,rgba(23,29,40,.91),rgba(15,20,29,.91));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    0 14px 28px rgba(0,0,0,.15);
}

.people-subsection-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.75rem;
}

.people-subsection-heading h3{
  margin:.12rem 0 0;
  font-size:.95rem;
}

.people-recent-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;
}

.people-recent-card{
  appearance:none;
  min-width:0;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  gap:.58rem;
  align-items:center;
  padding:.58rem;
  border:1px solid rgba(160,88,99,.13);
  border-radius:15px;
  background:rgba(10,15,22,.54);
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}

.people-recent-card:hover,
.people-recent-card:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(215,118,110,.28);
  background:rgba(30,25,34,.76);
  outline:none;
}

.people-recent-photo{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:3px solid #eee4d8;
  background:#2a3040;
  transform:rotate(-2deg);
  box-shadow:0 7px 14px rgba(0,0,0,.22);
}

.people-recent-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.people-recent-copy{
  min-width:0;
}

.people-recent-copy strong,
.people-recent-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.people-recent-copy strong{
  color:#f0e8e1 !important;
  font-size:.66rem;
}

.people-recent-copy small{
  margin-top:.22rem;
  color:rgba(215,189,183,.62) !important;
  font-size:.48rem;
}

.people-recent-special{
  color:#e9b581 !important;
  font-size:.8rem;
  text-shadow:0 0 9px rgba(234,171,112,.3);
}

/* ============================================================
   THREAD DISCOVERIES V164
   ============================================================ */

.people-discovery-count{
  flex:0 0 auto;
  padding:.28rem .48rem;
  border:1px solid rgba(178,94,103,.15);
  border-radius:999px;
  background:rgba(8,12,18,.56);
  color:#d6aaa4 !important;
  font-size:.5rem;
  font-weight:900;
}

.people-discovery-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.65rem;
}

.people-discovery{
  display:grid;
  grid-template-columns:2.1rem minmax(0,1fr);
  gap:.65rem;
  align-items:start;
  min-width:0;
  padding:.72rem;
  border:1px solid rgba(151,83,96,.12);
  border-radius:15px;
  background:rgba(8,12,18,.48);
}

.people-discovery.is-unlocked{
  border-color:rgba(210,116,108,.24);
  background:
    radial-gradient(circle at 0 0,rgba(158,65,76,.13),transparent 7rem),
    rgba(12,16,23,.64);
  box-shadow:0 0 16px rgba(151,59,72,.08);
}

.people-discovery-mark{
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(115,55,70,.18);
  color:#e99d92 !important;
  font-size:.76rem;
  box-shadow:inset 0 0 0 1px rgba(217,123,115,.12);
}

.people-discovery.is-locked{
  filter:saturate(.65);
  opacity:.62;
}

.people-discovery-copy strong,
.people-discovery-copy p,
.people-discovery-copy small{
  display:block;
}

.people-discovery-copy strong{
  color:#f0e7df !important;
  font-size:.62rem;
}

.people-discovery-copy p{
  margin:.16rem 0 .45rem;
  color:rgba(215,220,216,.64) !important;
  font-size:.5rem;
  line-height:1.4;
}

.people-discovery-copy small{
  margin-top:.24rem;
  color:rgba(220,170,162,.58) !important;
  font-size:.44rem;
}

.people-discovery-progress{
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.055);
}

.people-discovery-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#8a3d4d,#e17c6f);
  box-shadow:0 0 8px rgba(214,94,87,.25);
}

/* ============================================================
   RETURNING / SPECIAL THREADS V164
   ============================================================ */

.people-returned-note{
  display:block;
  margin-top:.28rem;
  color:#e5a497 !important;
  font-size:.43rem;
  font-weight:900;
  letter-spacing:.06em;
}

.people-special-badge{
  display:inline-flex;
  padding:.2rem .38rem;
  border:1px solid rgba(232,174,120,.27);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(77,54,33,.66),rgba(32,24,19,.78));
  color:#edbd8c !important;
  font-size:.46rem;
  font-weight:950;
  letter-spacing:.09em;
  box-shadow:0 0 14px rgba(232,164,103,.08);
}

#peopleCollectionPanel .people-card.strength-2::before{
  width:2px;
  box-shadow:0 0 8px rgba(218,91,84,.35);
}

#peopleCollectionPanel .people-card.strength-3::before{
  width:3px;
  box-shadow:0 0 11px rgba(226,102,92,.45);
}

#peopleCollectionPanel .people-card.strength-4::before{
  width:4px;
  box-shadow:0 0 14px rgba(238,116,101,.55);
}

#peopleCollectionPanel .people-card.is-special-thread{
  border-color:rgba(229,169,116,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 18px 32px rgba(0,0,0,.24),
    0 0 20px rgba(232,164,105,.10);
}

/* ============================================================
   SHARE MY QR - ARACHNO WEB V164
   ============================================================ */

.people-share-modal{
  overflow:hidden;
  border-color:rgba(173,87,101,.22);
  background:
    radial-gradient(circle at 0 0,rgba(125,53,73,.20),transparent 12rem),
    radial-gradient(circle at 100% 100%,rgba(146,61,68,.12),transparent 10rem),
    linear-gradient(180deg,rgba(24,30,42,.98),rgba(13,18,26,.98));
  color:#ecede8;
}

.people-share-modal h2{
  color:#f5ede5;
}

.people-share-modal .people-modal-intro{
  color:rgba(221,224,219,.70);
}

.people-share-web{
  position:relative;
  display:grid;
  place-items:center;
  min-height:330px;
  margin:.75rem 0 .55rem;
}

.people-share-web::before{
  content:"";
  position:absolute;
  inset:4% 1%;
  border:1px solid rgba(184,83,92,.12);
  border-radius:24px;
  background:
    repeating-radial-gradient(circle at 50% 50%,transparent 0 36px,rgba(220,105,99,.025) 37px,transparent 38px 58px),
    repeating-conic-gradient(from 9deg at 50% 50%,transparent 0 21deg,rgba(220,105,99,.035) 21.4deg,transparent 21.8deg 47deg);
  opacity:.85;
}

.people-share-qr-wrap{
  position:relative;
  z-index:4;
  width:min(72vw,260px);
  margin:0;
  padding:.72rem;
  border:1px solid rgba(216,123,113,.30);
  border-radius:20px;
  background:#fffdf7;
  box-shadow:
    0 20px 40px rgba(0,0,0,.30),
    0 0 26px rgba(187,72,82,.15),
    inset 0 0 0 5px rgba(255,255,255,.55);
}

.people-share-thread{
  position:absolute;
  z-index:2;
  height:2px;
  background:linear-gradient(90deg,transparent,#d76e66 22%,#e58b7c 50%,#d76e66 78%,transparent);
  box-shadow:0 0 8px rgba(213,91,87,.30);
  transform-origin:center;
}

.people-share-thread-a{
  width:92%;
  top:33%;
  left:4%;
  transform:rotate(14deg);
}

.people-share-thread-b{
  width:86%;
  left:7%;
  top:61%;
  transform:rotate(-18deg);
}

.people-share-thread-c{
  width:70%;
  left:15%;
  top:47%;
  transform:rotate(72deg);
}

.people-share-node{
  position:absolute;
  z-index:3;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ffe1d9;
  box-shadow:
    0 0 0 5px rgba(197,77,84,.08),
    0 0 14px rgba(229,106,97,.40);
  animation:arachnoThreadPulse 3s ease-in-out infinite;
}

.people-share-node-a{left:10%;top:30%;}
.people-share-node-b{right:9%;top:59%;animation-delay:-1s;}
.people-share-node-c{left:48%;bottom:7%;animation-delay:-2s;}

.people-share-arachno{
  position:absolute;
  right:-.8rem;
  bottom:-.7rem;
  z-index:5;
  width:112px;
  height:112px;
  background:url("./assets/arachno-pull-refresh.png") right bottom / contain no-repeat;
  filter:
    drop-shadow(0 10px 16px rgba(0,0,0,.36))
    drop-shadow(0 0 11px rgba(180,69,80,.17));
  pointer-events:none;
}

.people-share-callout{
  margin:.15rem 0 .72rem;
  color:#e3a199 !important;
  font-size:.5rem;
  font-weight:950;
  letter-spacing:.16em;
  text-align:center;
}

.people-share-modal .people-share-url{
  border-color:rgba(185,93,104,.20);
  background:rgba(8,12,18,.78);
  color:#e9ded8;
}

.people-share-modal #peopleCopyShareUrl{
  width:100%;
  background:linear-gradient(135deg,#843f4a,#bb6259);
}

/* ============================================================
   WHERE OUR THREADS MET V164
   ============================================================ */

.people-thread-return,
.people-special-thread,
.people-encounter-where{
  width:min(100%,32rem);
  box-sizing:border-box;
  margin:.75rem auto;
}

.people-thread-return,
.people-special-thread{
  display:grid;
  grid-template-columns:2.25rem minmax(0,1fr);
  gap:.7rem;
  align-items:center;
  padding:.72rem .82rem;
  border:1px solid rgba(189,96,105,.18);
  border-radius:15px;
  background:rgba(87,37,52,.14);
}

.people-thread-return-icon,
.people-special-thread-mark{
  width:2.1rem;
  height:2.1rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(147,60,74,.18);
  color:#eba096 !important;
  font-size:.85rem;
  box-shadow:inset 0 0 0 1px rgba(214,118,111,.12);
}

.people-thread-return strong,
.people-thread-return span,
.people-special-thread strong,
.people-special-thread span{
  display:block;
}

.people-thread-return strong,
.people-special-thread strong{
  color:#f0e5de !important;
  font-size:.65rem;
}

.people-thread-return div > span,
.people-special-thread div > span{
  margin-top:.17rem;
  color:rgba(215,204,198,.64) !important;
  font-size:.5rem;
  line-height:1.4;
}

.people-special-thread{
  border-color:rgba(232,174,120,.22);
  background:rgba(100,67,36,.14);
}

.people-special-thread-mark{
  background:rgba(145,94,48,.20);
  color:#edbd8c !important;
  box-shadow:
    inset 0 0 0 1px rgba(234,176,119,.16),
    0 0 14px rgba(234,170,109,.09);
}

.people-encounter-where{
  padding:.8rem;
  border:1px solid rgba(173,89,101,.14);
  border-radius:16px;
  background:rgba(8,12,18,.44);
}

.people-encounter-where .landing-kicker{
  margin:0 0 .55rem;
  color:#dfa097 !important;
  font-size:.48rem;
  letter-spacing:.15em;
}

.people-encounter-meetings{
  position:relative;
  display:grid;
  gap:.5rem;
}

.people-encounter-meetings::before{
  content:"";
  position:absolute;
  left:7px;
  top:7px;
  bottom:7px;
  width:2px;
  background:linear-gradient(#8a3a49,#e17769,#8a3a49);
  box-shadow:0 0 7px rgba(208,82,80,.22);
}

.people-encounter-meeting{
  position:relative;
  display:grid;
  grid-template-columns:16px minmax(0,1fr);
  gap:.6rem;
  align-items:center;
  min-width:0;
}

.people-encounter-meeting-node{
  position:relative;
  z-index:1;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ffe1da;
  box-shadow:
    0 0 0 4px rgba(193,76,84,.09),
    0 0 10px rgba(222,100,94,.30);
}

.people-encounter-meeting strong,
.people-encounter-meeting small{
  display:block;
}

.people-encounter-meeting strong{
  color:#eee3dc !important;
  font-size:.6rem;
}

.people-encounter-meeting small{
  margin-top:.1rem;
  color:rgba(210,192,185,.56) !important;
  font-size:.46rem;
}

@keyframes peopleSpecialThreadGlow{
  0%,100%{opacity:.65;stroke-width:1.8;}
  50%{opacity:1;stroke-width:3;}
}

@keyframes peopleArachnoStir{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-4px) rotate(-1deg);}
}

@keyframes peopleWebWake{
  0%{box-shadow:inset 0 0 48px rgba(0,0,0,.28),0 0 0 rgba(223,98,94,0);}
  35%{box-shadow:inset 0 0 48px rgba(0,0,0,.20),0 0 38px rgba(223,98,94,.24);}
  100%{box-shadow:inset 0 0 48px rgba(0,0,0,.28),0 0 0 rgba(223,98,94,0);}
}

@media(max-width:760px){
  .people-thread-stage-copy{
    padding-right:0;
  }

  .people-web-live{
    min-height:380px !important;
  }

  .people-web-person{
    width:58px;
    padding:4px 4px 14px;
  }

  .people-web-person.is-self{
    width:68px;
  }

  .people-web-event{
    width:82px;
    padding:.4rem .42rem;
  }

  .people-web-whisper{
    max-width:calc(100% - 8rem);
  }

  .people-thread-stage-arachno{
    width:128px !important;
    height:128px !important;
  }

  .people-recent-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  .people-web-live{
    min-height:360px !important;
    margin-inline:-.3rem;
  }

  .people-web-person{
    width:50px;
    padding:4px 4px 12px;
  }

  .people-web-person.is-self{
    width:60px;
  }

  .people-web-person-name{
    font-size:.42rem;
  }

  .people-web-event{
    width:70px;
  }

  .people-web-event strong{
    font-size:.45rem;
  }

  .people-web-event small{
    font-size:.37rem;
  }

  .people-web-whisper{
    left:.55rem;
    right:6.2rem;
    bottom:.5rem;
    max-width:none;
    transform:none;
    font-size:.47rem;
  }

  .people-web-more{
    font-size:.4rem;
  }

  .people-thread-stage-arachno{
    right:-.15rem !important;
    width:104px !important;
    height:104px !important;
  }

  .people-discovery-grid{
    grid-template-columns:1fr;
  }

  .people-share-web{
    min-height:290px;
  }

  .people-share-arachno{
    width:90px;
    height:90px;
  }
}

@media(prefers-reduced-motion:reduce){
  .people-web-thread.is-special,
  .people-web-whisper-dot,
  .people-share-node,
  .people-web-live.is-stirring .people-thread-stage-arachno,
  .people-web-live.thread-just-woven{
    animation:none !important;
  }
}

/* V164: Threads Mode is a real mode, not a dimmed Memory view. */
body.threads-mode #guestInstructionList,
body.threads-mode #memberMemoryHelp,
body.threads-mode #memoryGiftCard,
body.threads-mode #claimedGifts,
body.threads-mode #communityMemoryStream,
body.threads-mode #giftEmailSent{
  display:none !important;
}


/* ============================================================
   PEOPLE MODAL RESPONSIVE / THREADS POLISH V165
   ============================================================ */

/*
 * The previous max-height applied to the content box. Once padding and the
 * new meeting/history sections were added, the outer modal could exceed the
 * viewport. All People modals now size against the actual viewport.
 */
.people-modal{
  box-sizing:border-box;
}

body.threads-mode .people-modal-backdrop{
  padding:
    max(12px,env(safe-area-inset-top))
    max(12px,env(safe-area-inset-right))
    max(12px,env(safe-area-inset-bottom))
    max(12px,env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 18%,rgba(122,46,62,.16),transparent 24rem),
    rgba(4,9,14,.80);
  backdrop-filter:blur(11px) saturate(.82);
}

body.threads-mode .people-modal{
  width:min(100%,540px);
  max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(205,112,108,.38) rgba(255,255,255,.025);
  border:1px solid rgba(184,91,105,.24);
  background:
    radial-gradient(circle at 8% 0%,rgba(145,57,76,.18),transparent 13rem),
    radial-gradient(circle at 100% 26%,rgba(96,42,67,.12),transparent 14rem),
    linear-gradient(180deg,rgba(24,29,40,.985),rgba(12,17,25,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 28px 72px rgba(0,0,0,.46),
    0 0 42px rgba(138,49,66,.09);
  color:#eee8e2;
}

body.threads-mode .people-modal::-webkit-scrollbar{
  width:7px;
}

body.threads-mode .people-modal::-webkit-scrollbar-track{
  background:rgba(255,255,255,.02);
}

body.threads-mode .people-modal::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(205,112,108,.34);
}

body.threads-mode .people-modal-close{
  position:sticky;
  float:right;
  top:0;
  z-index:20;
  margin:-.15rem -.1rem 0 .5rem;
  border:1px solid rgba(203,111,110,.15);
  background:rgba(12,17,24,.84);
  color:#d99b95;
  backdrop-filter:blur(8px);
}

/* Detail modal: a deliberate vertical story instead of stacked loose blocks. */
body.threads-mode .people-encounter-modal{
  width:min(100%,560px);
  padding:1.2rem 1.25rem max(1.3rem,env(safe-area-inset-bottom));
}

body.threads-mode .people-encounter-modal > .landing-kicker,
body.threads-mode .people-encounter-modal > h2{
  position:relative;
  z-index:2;
}

body.threads-mode .people-encounter-polaroid{
  width:min(76vw,330px);
  max-width:100%;
  margin:1rem auto 1.15rem;
}

body.threads-mode .people-encounter-message{
  width:min(100%,31rem);
  margin:.7rem auto .85rem;
  padding:0 .35rem;
  font-size:.82rem;
  line-height:1.7;
}

body.threads-mode .people-encounter-threadline{
  width:min(100%,31rem);
  margin:.85rem auto 1rem;
}

body.threads-mode .people-thread-return,
body.threads-mode .people-special-thread,
body.threads-mode .people-encounter-where{
  width:min(100%,31rem);
  margin:.7rem auto;
}

/* "Where our threads met" becomes part of the red-thread storytelling. */
body.threads-mode .people-encounter-where{
  padding:.9rem .95rem;
  border:1px solid rgba(185,91,103,.19);
  background:
    radial-gradient(circle at 0 0,rgba(126,49,67,.13),transparent 9rem),
    rgba(6,10,16,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 10px 25px rgba(0,0,0,.13);
}

body.threads-mode .people-encounter-where .landing-kicker{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0 0 .72rem;
}

body.threads-mode .people-encounter-where .landing-kicker::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(209,106,103,.48),transparent);
}

body.threads-mode .people-encounter-meetings{
  gap:.65rem;
}

body.threads-mode .people-encounter-meetings::before{
  left:6px;
  top:6px;
  bottom:6px;
  width:1px;
  background:linear-gradient(#74303f,#df776c,#74303f);
  box-shadow:0 0 9px rgba(216,91,88,.20);
}

body.threads-mode .people-encounter-meeting{
  grid-template-columns:14px minmax(0,1fr);
  gap:.7rem;
}

body.threads-mode .people-encounter-meeting-node{
  width:9px;
  height:9px;
  background:#ffe4df;
  box-shadow:
    0 0 0 4px rgba(193,76,84,.08),
    0 0 13px rgba(222,100,94,.34);
}

body.threads-mode .people-encounter-meeting strong{
  font-size:.66rem;
}

body.threads-mode .people-encounter-meeting small{
  margin-top:.16rem;
  font-size:.5rem;
}

/*
 * Footer keeps all interaction controls together and centered.
 * This fixes the social button / Show My QR drifting at different widths.
 */
.people-encounter-footer{
  width:min(100%,31rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:1rem auto 0;
  padding-top:.95rem;
  border-top:1px solid rgba(205,112,108,.13);
}

body.threads-mode .people-encounter-social{
  display:inline-flex !important;
  align-self:center;
  width:auto !important;
  min-width:0;
  max-width:min(100%,20rem);
  margin:0 auto .75rem !important;
  padding:.66rem 1rem;
  border:1px solid rgba(202,110,108,.25);
  background:rgba(31,29,37,.92);
  color:#ecd8d1;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 8px 18px rgba(0,0,0,.16);
  text-align:center;
}

body.threads-mode .people-encounter-social:hover,
body.threads-mode .people-encounter-social:focus-visible{
  border-color:rgba(223,129,118,.40);
  background:rgba(53,35,44,.96);
  color:#fff0e9;
}

body.threads-mode .people-encounter-actions{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.65rem;
}

body.threads-mode .people-encounter-actions > *{
  flex:0 1 15rem;
  width:min(100%,15rem);
  min-width:0;
  min-height:44px;
}

body.threads-mode #peopleShowMineAfter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  border-color:rgba(202,110,108,.24);
  background:linear-gradient(135deg,rgba(83,43,55,.92),rgba(115,55,63,.92));
  color:#fae8df;
}

body.threads-mode #peopleKeepPerson{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

body.threads-mode #peopleEncounterStatus{
  width:100%;
  min-height:0;
  margin:.75rem auto 0;
  color:rgba(213,188,180,.70);
  font-size:.52rem;
  line-height:1.45;
  text-align:center;
}

/* Profile and QR modals now belong visually to Threads Mode too. */
body.threads-mode .people-profile-form label{
  color:#e8d7d0;
}

body.threads-mode .people-profile-form input,
body.threads-mode .people-profile-form textarea,
body.threads-mode .people-share-url{
  border-color:rgba(188,94,105,.22);
  background:rgba(7,11,17,.72);
  color:#f0e9e4;
}

body.threads-mode .people-profile-form input::placeholder,
body.threads-mode .people-profile-form textarea::placeholder{
  color:rgba(225,217,211,.38);
}

body.threads-mode .people-share-qr-wrap{
  border-color:rgba(185,91,103,.20);
  background:
    radial-gradient(circle at center,rgba(125,52,67,.12),transparent 70%),
    rgba(248,241,233,.96);
  box-shadow:
    0 16px 34px rgba(0,0,0,.22),
    0 0 26px rgba(144,51,66,.10);
}

/* Wide but short viewports: prioritize usable scrolling over perfect centering. */
@media(max-height:720px){
  body.threads-mode .people-modal-backdrop{
    align-items:start;
  }

  body.threads-mode .people-modal{
    margin:auto;
  }

  body.threads-mode .people-encounter-polaroid{
    width:min(58vh,300px);
  }
}

@media(max-width:650px){
  body.threads-mode .people-modal-backdrop{
    align-items:stretch;
    padding:
      max(8px,env(safe-area-inset-top))
      max(8px,env(safe-area-inset-right))
      max(8px,env(safe-area-inset-bottom))
      max(8px,env(safe-area-inset-left));
  }

  body.threads-mode .people-modal{
    width:100%;
    max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin:auto 0;
    border-radius:22px;
  }

  body.threads-mode .people-encounter-modal{
    padding:1rem .9rem max(1.1rem,env(safe-area-inset-bottom));
  }

  body.threads-mode .people-encounter-polaroid{
    width:min(74vw,290px);
  }

  body.threads-mode .people-encounter-message{
    font-size:.76rem;
  }

  .people-encounter-footer{
    width:100%;
  }

  body.threads-mode .people-encounter-actions{
    flex-direction:column;
    align-items:center;
  }

  body.threads-mode .people-encounter-actions > *{
    width:min(100%,19rem);
    flex-basis:auto;
  }

  body.threads-mode .people-encounter-social{
    max-width:min(100%,19rem);
  }
}

@media(prefers-reduced-motion:reduce){
  body.threads-mode .people-modal{
    scroll-behavior:auto;
  }
}


/* ============================================================
   CUT A THREAD V166
   ============================================================ */

.people-cut-thread-wrap{
  width:min(100%,31rem);
  margin:1rem auto 0;
  padding-top:.85rem;
  border-top:1px solid rgba(190,92,101,.10);
  text-align:center;
}

.people-cut-thread-button{
  appearance:none;
  border:0;
  padding:.45rem .65rem;
  background:transparent;
  color:rgba(206,165,163,.63);
  font:inherit;
  font-size:.56rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .18s ease,text-shadow .18s ease;
}

.people-cut-thread-button::before{
  content:"✂";
  margin-right:.38rem;
  font-size:.72rem;
}

.people-cut-thread-button:hover,
.people-cut-thread-button:focus-visible{
  color:#eeaaa5;
  text-shadow:0 0 14px rgba(215,91,91,.18);
  outline:none;
}

.people-cut-thread-confirm{
  padding:.85rem;
  border:1px solid rgba(201,83,91,.22);
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 0,rgba(145,48,62,.15),transparent 9rem),
    rgba(31,16,23,.70);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 12px 25px rgba(0,0,0,.15);
  text-align:left;
}

.people-cut-thread-confirm-copy strong,
.people-cut-thread-confirm-copy span{display:block;}
.people-cut-thread-confirm-copy strong{color:#f1c3bc;font-size:.72rem;}
.people-cut-thread-confirm-copy span{margin-top:.28rem;color:rgba(226,205,201,.66);font-size:.57rem;line-height:1.5;}
.people-cut-thread-confirm-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.75rem;}
.people-cut-thread-confirm-button{appearance:none;border:1px solid rgba(225,94,91,.34);border-radius:999px;padding:.52rem .78rem;background:linear-gradient(135deg,rgba(111,32,43,.92),rgba(160,54,57,.94));color:#ffe9e4;font:inherit;font-size:.6rem;font-weight:900;cursor:pointer;box-shadow:0 7px 16px rgba(0,0,0,.16);}
.people-cut-thread-confirm-button:hover,.people-cut-thread-confirm-button:focus-visible{background:linear-gradient(135deg,rgba(135,38,49,.98),rgba(184,64,62,.98));outline:none;}
.people-cut-thread-confirm-button:disabled{opacity:.62;cursor:wait;}
.people-web-live.thread-just-cut{animation:people-thread-cut-recoil 1.2s ease both;}
.people-web-live.thread-just-cut .people-web-thread{opacity:.25;filter:saturate(.45);}
@keyframes people-thread-cut-recoil{0%{filter:brightness(1)}22%{filter:brightness(1.24) saturate(.8)}45%{filter:brightness(.72) saturate(.55)}100%{filter:brightness(1)}}
@media(max-width:650px){.people-cut-thread-confirm-actions{display:grid;grid-template-columns:1fr}.people-cut-thread-confirm-actions>*{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.people-web-live.thread-just-cut{animation:none}}


/* ============================================================
   GLOBAL MODE SWITCH POSITION V167
   ============================================================ */

/*
 * Memories / People Along the Way is a global mode switch, so it now sits
 * directly beneath the compact Hunt guide before gifts, community content,
 * Event Collections or any other mode-specific content begins.
 */
.collection-mode-tabs{
  margin:.95rem 0 1.15rem;
  position:relative;
  z-index:8;
}

body.threads-mode .collection-mode-tabs{
  margin-bottom:1.25rem;
  border-color:rgba(185,91,103,.20);
  background:
    radial-gradient(circle at 100% 0,rgba(142,55,72,.11),transparent 9rem),
    rgba(15,20,28,.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 28px rgba(0,0,0,.18);
}

@media(max-width:650px){
  .collection-mode-tabs{
    margin:.8rem 0 1rem;
  }
}


/* ============================================================
   RETURN HISTORY DISPLAY FIX V168
   ============================================================ */

.people-thread-return{
  grid-template-columns:2.5rem minmax(0,1fr);
  gap:.8rem;
  align-items:center;
  padding:.8rem .9rem;
}

.people-thread-return-icon{
  box-sizing:border-box;
  width:2.3rem;
  height:2.3rem;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  justify-self:center;
  margin:0;
  padding:0;
  line-height:1;
  font-family:Arial,sans-serif;
  font-size:.82rem;
  transform:none;
  overflow:visible;
}

.people-thread-return > div{
  min-width:0;
}

.people-thread-return > div > strong{
  margin:0;
  line-height:1.25;
}

.people-thread-return > div > span{
  margin-top:.2rem;
  line-height:1.45;
}

/*
 * If only one normalized meeting remains, the return panel is hidden by JS;
 * the history box then contains exactly one node instead of a false duplicate.
 */
.people-encounter-meetings:has(
  .people-encounter-meeting:only-child
)::before{
  top:50%;
  bottom:auto;
  height:1px;
  opacity:.35;
}

@media(max-width:560px){
  .people-thread-return{
    grid-template-columns:2.35rem minmax(0,1fr);
    padding:.72rem .78rem;
  }

  .people-thread-return-icon{
    width:2.15rem;
    height:2.15rem;
  }
}


/* ============================================================
   ARACHNOPHOBIA MODE V169
   ============================================================ */

.arachnophobia-control{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin:.85rem 0 1rem;
  padding:.75rem .85rem;
  border:1px solid rgba(168,88,101,.16);
  border-radius:16px;
  background:
    radial-gradient(circle at 0 50%,rgba(97,45,63,.12),transparent 10rem),
    rgba(10,15,22,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.018),
    0 10px 24px rgba(0,0,0,.12);
}

.arachnophobia-control-copy{
  min-width:0;
  display:flex;
  align-items:center;
  gap:.7rem;
}

.arachnophobia-control-copy strong,
.arachnophobia-control-copy span{
  display:block;
}

.arachnophobia-control-copy strong{
  color:#eee6df !important;
  font-size:.68rem;
}

.arachnophobia-control-copy > div > span{
  margin-top:.14rem;
  color:rgba(215,204,199,.60) !important;
  font-size:.52rem;
  line-height:1.45;
}

.arachnophobia-control-cloud{
  position:relative;
  width:2.55rem;
  height:1.7rem;
  flex:0 0 auto;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 54%,#101217 0 32%,transparent 33%),
    radial-gradient(circle at 50% 34%,#17191f 0 38%,transparent 39%),
    radial-gradient(circle at 70% 55%,#0d0f14 0 34%,transparent 35%),
    linear-gradient(#101217,#080a0e);
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.38));
}

.arachnophobia-control-cloud::after{
  content:"";
  position:absolute;
  left:16%;
  right:12%;
  bottom:-.18rem;
  height:.44rem;
  border-radius:50%;
  background:rgba(0,0,0,.48);
  filter:blur(4px);
}

.arachnophobia-toggle{
  appearance:none;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:0;
  padding:.3rem;
  background:transparent;
  color:rgba(224,209,203,.65);
  font:inherit;
  cursor:pointer;
}

.arachnophobia-toggle-track{
  position:relative;
  width:2.8rem;
  height:1.5rem;
  border:1px solid rgba(197,113,116,.20);
  border-radius:999px;
  background:rgba(8,12,18,.80);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.32);
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.arachnophobia-toggle-knob{
  position:absolute;
  top:.2rem;
  left:.2rem;
  width:1rem;
  height:1rem;
  border-radius:50%;
  background:#aeb3b2;
  box-shadow:0 2px 6px rgba(0,0,0,.30);
  transition:
    transform .2s ease,
    background .18s ease;
}

.arachnophobia-toggle.is-active
.arachnophobia-toggle-track{
  border-color:rgba(221,131,119,.42);
  background:rgba(104,47,59,.72);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.28),
    0 0 14px rgba(171,66,79,.10);
}

.arachnophobia-toggle.is-active
.arachnophobia-toggle-knob{
  transform:translateX(1.28rem);
  background:#f0c7bd;
}

.arachnophobia-toggle-state{
  min-width:1.6rem;
  color:rgba(224,209,203,.68) !important;
  font-size:.52rem;
  font-weight:900;
  text-align:left;
}

/* ------------------------------------------------------------
   Reusable dark cloud replacement
   ------------------------------------------------------------ */

/*
 * Div-based Arachno art:
 * - Arachno's Web
 * - Share My QR
 */
.arachnophobia-mode .people-thread-stage-arachno,
.arachnophobia-mode .people-share-arachno{
  background:none !important;
  filter:none !important;
  animation:none !important;
}

.arachnophobia-mode .people-thread-stage-arachno::before,
.arachnophobia-mode .people-share-arachno::before{
  content:"";
  position:absolute;
  left:8%;
  right:6%;
  top:24%;
  bottom:18%;
  border-radius:46% 54% 48% 52% / 54% 44% 56% 46%;
  background:
    radial-gradient(circle at 22% 62%,#090b10 0 24%,transparent 25%),
    radial-gradient(circle at 37% 42%,#13151b 0 31%,transparent 32%),
    radial-gradient(circle at 57% 34%,#1a1c22 0 34%,transparent 35%),
    radial-gradient(circle at 76% 57%,#0d0f14 0 29%,transparent 30%),
    linear-gradient(180deg,#17191f,#080a0e 78%);
  filter:
    drop-shadow(0 13px 18px rgba(0,0,0,.44))
    drop-shadow(0 0 12px rgba(93,57,76,.12));
  opacity:.96;
}

.arachnophobia-mode .people-thread-stage-arachno::after,
.arachnophobia-mode .people-share-arachno::after{
  content:"";
  position:absolute;
  left:14%;
  right:8%;
  bottom:13%;
  height:18%;
  border-radius:50%;
  background:rgba(0,0,0,.54);
  filter:blur(8px);
}

/*
 * Pull-to-refresh Arachno is an <img>. Hide the image and render the cloud
 * inside the existing character wrapper so the pull mechanics stay intact.
 */
.arachnophobia-mode .arachno-ptr-character{
  visibility:hidden !important;
  opacity:0 !important;
}

.arachnophobia-mode .arachno-ptr-character-wrap{
  position:relative;
}

.arachnophobia-mode .arachno-ptr-character-wrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:76%;
  height:58%;
  transform:translate(-50%,-48%);
  border-radius:48% 52% 45% 55% / 55% 45% 55% 45%;
  background:
    radial-gradient(circle at 20% 62%,#080a0e 0 24%,transparent 25%),
    radial-gradient(circle at 37% 40%,#14161c 0 31%,transparent 32%),
    radial-gradient(circle at 59% 34%,#1a1c23 0 33%,transparent 34%),
    radial-gradient(circle at 78% 58%,#0b0d12 0 27%,transparent 28%),
    linear-gradient(180deg,#16181e,#07090d 76%);
  filter:
    drop-shadow(0 10px 14px rgba(0,0,0,.45))
    drop-shadow(0 0 10px rgba(82,50,67,.10));
}

.arachnophobia-mode .arachno-ptr-character-wrap::after{
  content:"";
  position:absolute;
  left:24%;
  right:17%;
  bottom:15%;
  height:12%;
  border-radius:50%;
  background:rgba(0,0,0,.52);
  filter:blur(6px);
}

/* Keep the red-thread atmosphere, but ensure the cloud never animates like a spider. */
.arachnophobia-mode
.people-web-live.is-stirring
.people-thread-stage-arachno{
  animation:none !important;
  filter:none !important;
}

/*
 * If future Arachno <img> elements are added, this generic opt-in class gives
 * them a safe fallback without affecting Ani or any other character.
 */
.arachnophobia-mode img.arachno-image{
  visibility:hidden !important;
  opacity:0 !important;
}

@media(max-width:650px){
  .arachnophobia-control{
    align-items:flex-start;
    flex-direction:column;
  }

  .arachnophobia-toggle{
    align-self:flex-end;
  }
}

@media(prefers-reduced-motion:reduce){
  .arachnophobia-toggle-track,
  .arachnophobia-toggle-knob{
    transition:none;
  }
}


/* ============================================================
   PEOPLE MODAL STACKING + SWIPE CLOSE V170
   ============================================================ */

/*
 * Global top shortcuts use an intentionally extreme z-index.
 * People modals must therefore explicitly sit above them.
 */
.people-modal-backdrop{
  z-index:2147483600 !important;
}

.people-modal{
  position:relative;
  z-index:2;
  transform:
    translateY(var(--people-swipe-y,0px));
  opacity:
    var(--people-swipe-opacity,1);
  will-change:transform,opacity;
}

/*
 * Keep the close control inside the modal itself and away from the viewport's
 * top-right shortcuts. Sticky means it stays reachable while a long modal
 * scrolls.
 */
.people-modal-close{
  position:sticky !important;
  top:.15rem !important;
  right:auto !important;
  left:100% !important;
  z-index:40 !important;
  float:right;
  margin:-.18rem -.05rem .15rem .65rem !important;
  width:2.15rem !important;
  height:2.15rem !important;
  border:1px solid rgba(211,119,113,.18) !important;
  background:rgba(10,15,22,.90) !important;
  color:#e3a09a !important;
  box-shadow:
    0 6px 16px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter:blur(10px);
}

.people-modal-close:hover,
.people-modal-close:focus-visible{
  border-color:rgba(226,133,121,.36) !important;
  background:rgba(39,26,34,.96) !important;
  color:#fff0e9 !important;
  outline:none;
}

/* Small grab indicator makes swipe-to-close discoverable on touch screens. */
.people-modal::before{
  content:"";
  position:sticky;
  top:.15rem;
  left:50%;
  z-index:35;
  display:block;
  width:2.7rem;
  height:4px;
  margin:-.05rem auto .35rem;
  border-radius:999px;
  background:rgba(216,150,143,.28);
  transform:translateX(0);
  pointer-events:none;
}

/*
 * During a gesture, avoid transition lag. Failed gestures spring smoothly
 * back into place; successful gestures slide out.
 */
.people-modal.is-swipe-dragging{
  transition:none !important;
  touch-action:pan-x;
  cursor:grabbing;
}

.people-modal.is-swipe-snapping{
  --people-swipe-y:0px !important;
  --people-swipe-opacity:1 !important;
  transition:
    transform .18s cubic-bezier(.22,.8,.3,1),
    opacity .18s ease !important;
}

.people-modal.is-swipe-closing{
  transition:
    transform .18s cubic-bezier(.4,0,1,1),
    opacity .16s ease !important;
}

.people-modal-backdrop.is-swipe-dragging{
  background-color:rgba(4,9,14,.66);
}

/* Ensure modal content is never obscured by the fixed shortcuts on narrow PWA views. */
@media(max-width:650px){
  .people-modal-backdrop{
    z-index:2147483600 !important;
  }

  .people-modal{
    padding-top:.7rem !important;
  }

  .people-modal-close{
    top:.1rem !important;
    margin-right:0 !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .people-modal,
  .people-modal.is-swipe-snapping,
  .people-modal.is-swipe-closing{
    transition:none !important;
  }
}


/* ============================================================
   ADMIN DEBUG · 100 DUMMY THREADS V172
   ============================================================ */

.admin-debug-thread-button{
  appearance:none;
  border:1px solid rgba(149,88,167,.28);
  border-radius:999px;
  padding:.55rem .8rem;
  background:
    linear-gradient(
      135deg,
      rgba(77,44,91,.90),
      rgba(104,54,94,.90)
    );
  color:#f5eaf6;
  font:inherit;
  font-size:.62rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:
    0 7px 17px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.admin-debug-thread-button:hover,
.admin-debug-thread-button:focus-visible{
  border-color:rgba(187,111,190,.46);
  background:
    linear-gradient(
      135deg,
      rgba(94,51,110,.97),
      rgba(126,62,110,.97)
    );
  outline:none;
}

.admin-debug-thread-button.is-active{
  border-color:rgba(226,116,111,.40);
  background:
    linear-gradient(
      135deg,
      rgba(118,45,58,.96),
      rgba(166,68,65,.96)
    );
  color:#fff0eb;
}

.people-debug-preview-badge{
  flex:1 1 100%;
  margin-top:.5rem;
  padding:.42rem .62rem;
  border:1px dashed rgba(226,119,111,.30);
  border-radius:10px;
  background:rgba(122,43,57,.15);
  color:#efaaa1 !important;
  font-size:.48rem;
  font-weight:950;
  letter-spacing:.12em;
  text-align:center;
}

.people-web-live.is-debug-100{
  min-height:760px !important;
  overflow:hidden;
  background:
    radial-gradient(
      circle at center,
      rgba(146,55,71,.11),
      transparent 42%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,.018),
      transparent 68%
    ),
    rgba(6,10,16,.20);
}

.people-web-live.is-debug-100 .people-web-person{
  width:36px;
  padding:3px 3px 9px;
  border-radius:3px;
}

.people-web-live.is-debug-100
.people-web-person.is-self{
  width:60px;
  z-index:20;
}

.people-web-live.is-debug-100
.people-web-person-name{
  margin-top:.18rem;
  font-size:.31rem;
  line-height:1.1;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.people-web-live.is-debug-100
.people-web-return-mark,
.people-web-live.is-debug-100
.people-web-special-mark{
  transform:scale(.72);
  transform-origin:center;
}

.people-web-live.is-debug-100
.people-web-thread{
  opacity:.32;
  stroke-width:1.1;
}

.people-web-live.is-debug-100
.people-web-thread.strength-2{
  opacity:.40;
  stroke-width:1.35;
}

.people-web-live.is-debug-100
.people-web-thread.strength-3{
  opacity:.50;
  stroke-width:1.7;
}

.people-web-live.is-debug-100
.people-web-thread.strength-4{
  opacity:.62;
  stroke-width:2.05;
}

.people-web-live.is-debug-100
.people-web-event{
  width:78px;
  padding:.34rem .38rem;
  z-index:12;
}

.people-web-live.is-debug-100
.people-web-event strong{
  font-size:.39rem;
}

.people-web-live.is-debug-100
.people-web-event small{
  font-size:.31rem;
}

.people-web-live.is-debug-100
.people-web-whisper{
  max-width:28rem;
}

@media(max-width:760px){
  .people-web-live.is-debug-100{
    min-height:680px !important;
  }

  .people-web-live.is-debug-100 .people-web-person{
    width:28px;
    padding:2px 2px 7px;
  }

  .people-web-live.is-debug-100
  .people-web-person.is-self{
    width:52px;
  }

  .people-web-live.is-debug-100
  .people-web-person-name{
    font-size:.26rem;
  }

  .people-debug-preview-badge{
    font-size:.42rem;
  }
}


/* ============================================================
   CLUSTERED WEB + THREAD DIRECTORY V173
   ============================================================ */

.people-directory{
  margin-top:1rem;
  padding:1rem;
  border:1px solid rgba(174,88,101,.15);
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0,rgba(124,50,68,.10),transparent 12rem),
    rgba(10,15,22,.42);
}

.people-directory-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:.8rem;
}

.people-directory-heading h3{
  margin:.1rem 0 0;
}

.people-directory-result{
  flex:0 0 auto;
  padding:.28rem .5rem;
  border:1px solid rgba(202,107,106,.16);
  border-radius:999px;
  color:rgba(226,196,190,.72) !important;
  font-size:.48rem;
  font-weight:900;
}

.people-directory-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(150px,.34fr);
  gap:.65rem;
  margin:.85rem 0 .35rem;
}

.people-search-field{
  position:relative;
  display:block;
}

.people-search-icon{
  position:absolute;
  left:.72rem;
  top:50%;
  transform:translateY(-50%);
  color:rgba(223,157,150,.54) !important;
  font-size:1rem;
  pointer-events:none;
}

.people-search-field input,
.people-cluster-filter select{
  width:100%;
  box-sizing:border-box;
  min-height:42px;
  border:1px solid rgba(187,94,104,.18);
  border-radius:12px;
  background:rgba(5,9,14,.68);
  color:#eee5df;
  font:inherit;
  font-size:.62rem;
  outline:none;
}

.people-search-field input{
  padding:.68rem .75rem .68rem 2rem;
}

.people-cluster-filter select{
  padding:.68rem .75rem;
}

.people-search-field input::placeholder{
  color:rgba(222,211,204,.37);
}

.people-search-field input:focus,
.people-cluster-filter select:focus{
  border-color:rgba(218,121,114,.44);
  box-shadow:0 0 0 3px rgba(166,63,77,.10);
}

.people-directory .people-grid{
  margin-top:.7rem;
}

.people-directory-more{
  appearance:none;
  display:block;
  width:min(100%,22rem);
  margin:.85rem auto 0;
  border:1px solid rgba(204,108,106,.22);
  border-radius:999px;
  padding:.62rem .85rem;
  background:rgba(42,27,35,.86);
  color:#edd9d2;
  font:inherit;
  font-size:.58rem;
  font-weight:900;
  cursor:pointer;
}

.people-directory-more:hover,
.people-directory-more:focus-visible{
  border-color:rgba(225,129,119,.38);
  background:rgba(64,34,43,.94);
  outline:none;
}

/* Dense networks use Event / Along-the-Way cluster nodes first. */
.people-web-live.is-clustered{
  min-height:610px;
}

.people-web-cluster{
  position:absolute;
  left:var(--web-x);
  top:var(--web-y);
  z-index:12;
  width:112px;
  min-height:58px;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.12rem;
  padding:.48rem .58rem;
  border:1px solid rgba(201,108,106,.26);
  border-radius:16px;
  background:
    radial-gradient(circle at 50% 0,rgba(128,48,68,.20),transparent 6rem),
    rgba(18,17,25,.94);
  color:#f1e4df;
  box-shadow:
    0 13px 26px rgba(0,0,0,.22),
    0 0 20px rgba(154,57,72,.08);
  cursor:pointer;
}

.people-web-cluster strong{
  color:#f3dfd8 !important;
  font-size:.54rem;
  line-height:1.15;
  text-align:center;
}

.people-web-cluster small{
  color:rgba(226,180,173,.75) !important;
  font-size:.43rem;
}

.people-web-cluster > span{
  color:rgba(232,155,147,.60) !important;
  font-size:.36rem;
}

.people-web-cluster:hover,
.people-web-cluster:focus-visible,
.people-web-cluster.is-expanded{
  border-color:rgba(237,139,125,.58);
  background:
    radial-gradient(circle at 50% 0,rgba(181,73,81,.30),transparent 6rem),
    rgba(35,21,30,.97);
  box-shadow:
    0 15px 30px rgba(0,0,0,.25),
    0 0 28px rgba(199,78,83,.18);
  outline:none;
}

.people-web-thread.is-selected-cluster{
  opacity:.8 !important;
  stroke-width:3 !important;
  filter:drop-shadow(0 0 5px rgba(221,100,94,.32));
}

.people-web-thread.is-cluster-member{
  opacity:.54;
  stroke-dasharray:2 5;
}

.people-web-person.is-cluster-member{
  z-index:16;
}

.people-web-cluster-more{
  position:absolute;
  left:var(--web-x);
  top:var(--web-y);
  z-index:18;
  transform:translate(-50%,-50%);
  border:1px solid rgba(206,108,106,.20);
  border-radius:999px;
  padding:.38rem .6rem;
  background:rgba(18,13,20,.90);
  color:#e9cbc4;
  font:inherit;
  font-size:.43rem;
  font-weight:900;
  cursor:pointer;
}

.people-web-cluster-more:hover,
.people-web-cluster-more:focus-visible{
  border-color:rgba(226,130,119,.40);
  background:rgba(50,27,36,.94);
  outline:none;
}

/*
 * The old 100-debug layout intentionally no longer renders all people at once.
 * The debug mode now tests the same cluster interaction that production will
 * use once the network becomes large.
 */
.people-web-live.is-debug-100{
  min-height:660px !important;
}

@media(max-width:760px){
  .people-directory-controls{
    grid-template-columns:1fr;
  }

  .people-web-live.is-clustered,
  .people-web-live.is-debug-100{
    min-height:590px !important;
  }

  .people-web-cluster{
    width:88px;
    min-height:50px;
    padding:.4rem .42rem;
  }

  .people-web-cluster strong{
    font-size:.45rem;
  }

  .people-web-cluster small{
    font-size:.36rem;
  }

  .people-web-person.is-cluster-member{
    width:34px;
  }
}


/* ============================================================
   CONTACT ↔ CONTACT WEB THREADS V174
   ============================================================ */

/*
 * These are real reciprocal relationships between two People already visible
 * in the user's own web. They are intentionally finer/dimmer than the user's
 * primary red threads so the hierarchy stays readable.
 */
.people-web-thread.is-contact-link{
  stroke:rgba(196,76,87,.48);
  stroke-width:1.15;
  stroke-dasharray:2.5 4.5;
  opacity:.56;
  filter:
    drop-shadow(0 0 2px rgba(205,76,82,.18));
}

.people-web-thread.is-contact-link.is-cluster-contact-link{
  stroke:rgba(220,93,91,.58);
  stroke-width:1.35;
  opacity:.68;
  stroke-dasharray:3 4;
}

.people-web-live.is-stirring
.people-web-thread.is-contact-link{
  opacity:.70;
}

.people-web-cluster.is-expanded::after{
  content:"";
  position:absolute;
  inset:-5px;
  border:1px solid rgba(217,93,92,.10);
  border-radius:20px;
  box-shadow:
    0 0 18px rgba(187,68,79,.08);
  pointer-events:none;
}

/* Dense debug webs may contain dozens of secondary edges. */
.people-web-live.is-debug-100
.people-web-thread.is-contact-link{
  stroke-width:.9;
  opacity:.38;
}

.people-web-live.is-debug-100
.people-web-thread.is-contact-link.is-cluster-contact-link{
  stroke-width:1.1;
  opacity:.52;
}

@media(max-width:760px){
  .people-web-thread.is-contact-link{
    stroke-width:.85;
    opacity:.42;
  }

  .people-web-thread.is-contact-link.is-cluster-contact-link{
    stroke-width:1;
    opacity:.54;
  }
}


/* ============================================================
   ARACHNO DISCOVERY WEB VIEWPORT V175
   ============================================================ */

/*
 * Arachno's Web is now a window into a larger virtual space instead of a
 * self-contained diagram. The viewport keeps a stable size while the world
 * behind it can be panned and zoomed.
 */
.people-web-live{
  position:relative;
  min-height:0 !important;
  height:clamp(430px,58vh,590px) !important;
  overflow:hidden !important;
  cursor:grab;
  touch-action:none;
  user-select:none;
  overscroll-behavior:contain;
  border:1px solid rgba(174,82,96,.17);
  background:
    radial-gradient(circle at 50% 50%,rgba(127,43,61,.10),transparent 22rem),
    radial-gradient(circle at 12% 18%,rgba(65,43,78,.12),transparent 18rem),
    linear-gradient(180deg,rgba(9,13,20,.96),rgba(5,9,14,.98));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.02),
    inset 0 0 80px rgba(0,0,0,.22),
    0 18px 38px rgba(0,0,0,.18);
}

.people-web-live:focus-visible{
  outline:2px solid rgba(220,120,113,.34);
  outline-offset:3px;
}

.people-web-live.is-navigating{
  cursor:grabbing;
}

.people-web-world{
  position:absolute;
  left:0;
  top:0;
  width:1800px;
  height:1200px;
  transform-origin:0 0;
  transform:
    translate(
      var(--web-pan-x,0px),
      var(--web-pan-y,0px)
    )
    scale(var(--web-scale,.78));
  transition:
    transform .28s cubic-bezier(.2,.75,.3,1);
  will-change:transform;
}

.people-web-world.is-view-immediate{
  transition:none !important;
}

.people-web-lines,
.people-web-nodes{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.people-web-lines{
  pointer-events:none;
}

.people-web-nodes{
  overflow:visible;
}

.people-web-world .people-thread-stage-arachno{
  right:5.5rem;
  bottom:4.6rem;
}

/*
 * Soft radial landmarks make empty virtual space feel intentional and help
 * orientation while panning without turning it into a literal map grid.
 */
.people-web-world::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 160px,rgba(207,95,94,.025) 161px 162px,transparent 163px 310px,rgba(207,95,94,.022) 311px 312px,transparent 313px),
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.018),transparent 100px),
    radial-gradient(circle at 82% 76%,rgba(157,60,77,.035),transparent 150px);
  opacity:.85;
}

.people-web-controls{
  position:absolute;
  top:.72rem;
  right:.72rem;
  z-index:60;
  display:grid;
  grid-template-columns:repeat(2,2.15rem);
  gap:.35rem;
  padding:.35rem;
  border:1px solid rgba(205,112,108,.16);
  border-radius:14px;
  background:rgba(8,12,18,.78);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.people-web-controls button{
  appearance:none;
  width:2.15rem;
  height:2.15rem;
  display:grid;
  place-items:center;
  border:1px solid rgba(201,108,106,.16);
  border-radius:10px;
  background:rgba(35,27,36,.86);
  color:#ead7d0;
  font:inherit;
  font-size:.9rem;
  font-weight:900;
  cursor:pointer;
}

.people-web-controls button:hover,
.people-web-controls button:focus-visible{
  border-color:rgba(228,130,119,.40);
  background:rgba(68,35,45,.94);
  color:#fff1ea;
  outline:none;
}

.people-web-discovery-hint{
  position:absolute;
  left:.72rem;
  top:.72rem;
  z-index:55;
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  max-width:calc(100% - 7.4rem);
  padding:.42rem .62rem;
  border:1px solid rgba(194,99,103,.12);
  border-radius:999px;
  background:rgba(7,11,17,.72);
  color:rgba(223,198,191,.66);
  backdrop-filter:blur(8px);
  font-size:.46rem;
  font-weight:850;
  letter-spacing:.04em;
  pointer-events:none;
}

.people-web-discovery-hint > span:first-child{
  color:#d78d85;
  text-shadow:0 0 10px rgba(212,93,91,.22);
}

.people-web-whisper{
  z-index:58 !important;
  pointer-events:none;
}

.people-web-more{
  z-index:58 !important;
}

/* Cluster/person sizing can stay readable because zoom now handles density. */
.people-web-live.is-clustered,
.people-web-live.is-debug-100{
  min-height:0 !important;
  height:clamp(430px,58vh,590px) !important;
}

.people-web-live.is-clustered .people-web-cluster{
  width:126px;
  min-height:64px;
}

.people-web-live .people-web-person{
  transform-origin:center;
}

/* Prevent browser page scrolling while actively exploring the canvas. */
body:has(.people-web-live.is-navigating){
  overscroll-behavior:none;
}

@media(max-width:760px){
  .people-web-live,
  .people-web-live.is-clustered,
  .people-web-live.is-debug-100{
    height:clamp(390px,55vh,520px) !important;
  }

  .people-web-controls{
    top:.5rem;
    right:.5rem;
    grid-template-columns:repeat(2,2rem);
  }

  .people-web-controls button{
    width:2rem;
    height:2rem;
  }

  .people-web-discovery-hint{
    left:.5rem;
    top:.5rem;
    max-width:calc(100% - 6.2rem);
    font-size:.4rem;
  }

  .people-web-world .people-thread-stage-arachno{
    right:4rem;
    bottom:3rem;
  }
}

@media(prefers-reduced-motion:reduce){
  .people-web-world{
    transition:none !important;
  }
}


/* ============================================================
   TIGHTER NESTED WEB GEOMETRY V176
   ============================================================ */

/*
 * Main cluster spines are now intentionally shorter because the Event /
 * Along-the-Way layer sits close to the user. The web should read as nested:
 *
 *   YOU -> CLUSTER -> PEOPLE -> CONTACT LINKS
 *
 * rather than one huge radial star.
 */
.people-web-thread.is-event-spine{
  stroke-width:1.7;
  opacity:.62;
  stroke-dasharray:3 5;
  filter:drop-shadow(0 0 3px rgba(211,88,89,.16));
}

.people-web-thread.is-event-spine.is-selected-cluster{
  stroke-width:2.35 !important;
  opacity:.82 !important;
}

.people-web-thread.is-cluster-member{
  stroke-width:1.15;
  opacity:.52;
  stroke-dasharray:2 4;
}

.people-web-live.is-clustered .people-web-cluster{
  width:118px;
  min-height:60px;
}

/*
 * Expanded clusters should visually feel like their own little web rather
 * than a second full-screen radial layout.
 */
.people-web-person.is-cluster-member{
  transform:
    translate(-50%,-50%)
    scale(.92);
}

.people-web-live.is-debug-100
.people-web-thread.is-event-spine{
  opacity:.52;
}

@media(max-width:760px){
  .people-web-live.is-clustered .people-web-cluster{
    width:96px;
    min-height:52px;
  }

  .people-web-person.is-cluster-member{
    transform:
      translate(-50%,-50%)
      scale(.86);
  }
}


/* ============================================================
   ALWAYS-CLUSTERED HYBRID WEB V177
   ============================================================ */

.people-web-cluster-hidden{
  color:rgba(231,157,149,.58) !important;
  font-size:.34rem !important;
  letter-spacing:.04em;
}

.people-web-person.is-preview-member{
  width:42px;
  padding:3px 3px 10px;
  z-index:15;
  opacity:.90;
  transform:
    translate(-50%,-50%)
    scale(.88);
}

.people-web-person.is-preview-member
.people-web-person-name{
  margin-top:.16rem;
  font-size:.34rem;
  line-height:1.08;
}

.people-web-thread.is-preview-member{
  stroke-width:.92;
  opacity:.40;
  stroke-dasharray:2 5;
}

.people-web-person.is-expanded-member{
  z-index:18;
  opacity:1;
}

.people-web-thread.is-expanded-member{
  opacity:.58;
}

.people-web-cluster:not(.is-expanded){
  box-shadow:
    0 12px 24px rgba(0,0,0,.20),
    0 0 16px rgba(154,57,72,.07);
}

.people-web-cluster.is-expanded{
  z-index:22;
}

.people-web-thread.is-contact-link.is-cluster-contact-link{
  opacity:.46;
}

.people-web-live:has(
  .people-web-cluster.is-expanded
)
.people-web-thread.is-contact-link.is-cluster-contact-link{
  opacity:.62;
}

@media(max-width:760px){
  .people-web-person.is-preview-member{
    width:34px;
    padding:2px 2px 8px;
    transform:
      translate(-50%,-50%)
      scale(.84);
  }

  .people-web-person.is-preview-member
  .people-web-person-name{
    font-size:.28rem;
  }

  .people-web-thread.is-preview-member{
    opacity:.34;
  }
}


/* ============================================================
   TIGHT CENTRAL CLUSTER KNOT V178
   ============================================================ */

/*
 * The Event / Along-the-Way layer now hugs the user's central card.
 * The visual growth happens from those knots outward into their local People
 * webs rather than using long first-level spokes.
 */
.people-web-thread.is-event-spine{
  stroke-width:1.45;
  opacity:.56;
  stroke-dasharray:2.5 4.5;
}

.people-web-thread.is-event-spine.is-selected-cluster{
  stroke-width:2.1 !important;
  opacity:.78 !important;
}

.people-web-live.is-clustered .people-web-cluster{
  width:112px;
  min-height:58px;
}

@media(max-width:760px){
  .people-web-live.is-clustered .people-web-cluster{
    width:92px;
    min-height:50px;
  }
}


/* ============================================================
   STRANGE THREAD · NETWORK HUB GLOW V179
   ============================================================ */

/*
 * Strange Thread now has a clear gold visual identity.
 * It can come from:
 * - Admin manual override
 * - automatic strong connectivity (8+ reciprocal People connections)
 */
.people-web-person.is-special{
  border-color:rgba(245,197,93,.72) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.28),
    0 0 0 2px rgba(246,200,91,.18),
    0 0 17px rgba(245,185,64,.44),
    0 0 34px rgba(242,167,45,.22) !important;
}

.people-web-person.is-special
.people-web-person-photo{
  box-shadow:
    inset 0 0 0 1px rgba(255,224,137,.34),
    0 0 12px rgba(244,187,68,.28);
}

.people-web-person.is-special
.people-web-person-name{
  color:#ffe5a0 !important;
  text-shadow:
    0 0 8px rgba(240,180,62,.30);
}

.people-web-special-mark{
  color:#ffd66f !important;
  background:rgba(52,36,13,.94) !important;
  border-color:rgba(247,205,100,.42) !important;
  box-shadow:
    0 0 9px rgba(247,190,63,.48),
    0 0 18px rgba(247,190,63,.20);
}

.people-web-thread.is-special{
  stroke:#e9b648 !important;
  opacity:.82 !important;
  filter:
    drop-shadow(0 0 3px rgba(244,188,61,.48));
}

#peopleCollectionPanel .people-card.is-special-thread{
  border-color:rgba(243,194,82,.48) !important;
  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(236,180,60,.10),
      transparent 9rem
    ),
    rgba(17,18,24,.80) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,240,188,.04),
    0 18px 32px rgba(0,0,0,.24),
    0 0 18px rgba(241,184,58,.20),
    0 0 34px rgba(232,157,36,.10) !important;
}

.people-special-badge{
  border-color:rgba(247,205,102,.46) !important;
  background:
    linear-gradient(
      180deg,
      rgba(90,66,20,.88),
      rgba(38,27,10,.92)
    ) !important;
  color:#ffe095 !important;
  box-shadow:
    0 0 12px rgba(238,180,59,.20),
    inset 0 1px 0 rgba(255,237,171,.08) !important;
}

.people-recent-card.is-special-thread{
  border-color:rgba(241,192,82,.36) !important;
  box-shadow:
    0 0 16px rgba(241,180,59,.13);
}

.people-recent-card.is-special-thread
.people-recent-photo{
  box-shadow:
    0 0 0 1px rgba(245,204,109,.26),
    0 0 12px rgba(239,179,59,.17);
}

/* Automatic hub Strange Threads get a very subtle extra pulse. */
@keyframes strangeThreadHubGlow{
  0%,100%{
    filter:
      drop-shadow(0 0 3px rgba(244,188,61,.26));
  }
  50%{
    filter:
      drop-shadow(0 0 7px rgba(249,198,74,.50));
  }
}

.people-web-person.is-auto-strange.is-special{
  animation:
    strangeThreadHubGlow 3.8s ease-in-out infinite;
}

@media(prefers-reduced-motion:reduce){
  .people-web-person.is-auto-strange.is-special{
    animation:none !important;
  }
}


/* ============================================================
   PEOPLE WEB POLAROID NAME LAYER FIX V180
   ============================================================ */

/*
 * The compact web Polaroids use several glow/photo layers. On some sizes the
 * caption could end up visually underneath those layers or get clipped by the
 * scaled preview card. Keep the caption in its own explicit foreground zone.
 */
.people-web-person{
  overflow:visible !important;
}

.people-web-person-photo{
  position:relative;
  z-index:1;
  overflow:hidden;
}

.people-web-person-photo::before,
.people-web-person-photo::after{
  z-index:2;
  pointer-events:none;
}

.people-web-person-photo img,
.people-web-node-fallback{
  position:relative;
  z-index:1;
}

.people-web-person-name{
  position:relative !important;
  z-index:8 !important;
  display:block !important;
  min-height:.72rem;
  margin-top:.22rem !important;
  padding:0 .08rem;
  overflow:visible !important;
  color:#2d3835;
  background:transparent;
  text-align:center;
  white-space:nowrap;
  text-overflow:clip;
  line-height:1.05;
  pointer-events:none;
}

/*
 * Preview cards are very small, so use a slightly stronger caption treatment
 * rather than making the entire Polaroid larger.
 */
.people-web-person.is-preview-member
.people-web-person-name{
  min-height:.58rem;
  margin-top:.14rem !important;
  font-size:.34rem !important;
  color:#293531 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.75);
}

/* Expanded cards can afford a little more legibility. */
.people-web-person.is-expanded-member
.people-web-person-name{
  font-size:.42rem;
  color:#26332f !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.72);
}

/*
 * Strange Thread styling previously added strong glows around the whole card.
 * Keep the gold name readable above that glow, not inside/behind it.
 */
.people-web-person.is-special
.people-web-person-name{
  z-index:10 !important;
  color:#6a4a0d !important;
  text-shadow:
    0 1px 0 rgba(255,246,208,.95),
    0 0 5px rgba(238,183,54,.18) !important;
}

/* Return / Strange markers stay above the image but below the name caption. */
.people-web-return-mark,
.people-web-special-mark{
  z-index:6 !important;
}

@media(max-width:760px){
  .people-web-person.is-preview-member
  .people-web-person-name{
    min-height:.52rem;
    font-size:.29rem !important;
  }

  .people-web-person.is-expanded-member
  .people-web-person-name{
    font-size:.38rem;
  }
}


/* ============================================================
   CRISP DISCOVERY WEB ZOOM + STRANGE TEXT CONTRAST V181
   ============================================================ */

/*
 * V175 used transform: scale() on the complete 1800x1200 web world.
 * Browsers can rasterize that composited layer, which makes Polaroids and
 * text visibly soft while zooming.
 *
 * V181 splits navigation into:
 *   people-web-pan   -> translate only
 *   people-web-world -> layout zoom only
 *
 * `zoom` causes the browser to lay out/repaint text and borders at the target
 * scale rather than enlarging one previously rasterized surface.
 */
.people-web-pan{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  transform:
    translate(
      var(--web-pan-x,0px),
      var(--web-pan-y,0px)
    );
  transition:
    transform .22s cubic-bezier(.2,.75,.3,1);
  will-change:transform;
}

.people-web-pan.is-view-immediate{
  transition:none !important;
}

.people-web-world{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:1800px !important;
  height:1200px !important;

  /*
   * Reset the old V175 composited transform zoom.
   */
  transform:none !important;
  transform-origin:0 0 !important;
  transition:none !important;
  will-change:auto !important;

  /*
   * Layout-based zoom keeps DOM text and Polaroid chrome substantially
   * sharper at non-100% scales.
   */
  zoom:var(--web-scale,.78);
}

.people-web-world.is-view-immediate{
  transition:none !important;
}

/*
 * Browser hints for the remaining independently positioned visual elements.
 */
.people-web-person,
.people-web-cluster,
.people-web-cluster-more{
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

.people-web-person-photo img{
  image-rendering:auto;
  backface-visibility:hidden;
}


/* ------------------------------------------------------------
   Strange Thread: gold is the glow, NOT the text colour.
   ------------------------------------------------------------ */

/*
 * Web Polaroids are light paper. Keep names nearly black, including Strange
 * Threads, and let the border/shadow communicate the gold state.
 */
.people-web-person.is-special
.people-web-person-name{
  color:#111713 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95) !important;
}

/*
 * Directory badge: pale gold surface with black text instead of yellow text
 * on a dark gold background.
 */
.people-special-badge{
  border-color:rgba(219,166,48,.68) !important;
  background:
    linear-gradient(
      180deg,
      #ffe7a3,
      #eec45e
    ) !important;
  color:#15130d !important;
  text-shadow:none !important;
  box-shadow:
    0 0 12px rgba(238,180,59,.20),
    inset 0 1px 0 rgba(255,255,255,.46) !important;
}

/*
 * The large People modal has a dark theme, but the physical Polaroid inside
 * it is white. A broad `.people-encounter-modal strong` rule used to win here
 * and could turn the person's name almost white on white.
 */
#peopleEncounterName{
  color:#111713 !important;
  text-shadow:none !important;
}

/*
 * Strange panel in the modal becomes a light gold card with dark readable
 * copy. Gold remains an accent/glow, not the foreground text colour.
 */
.people-encounter-modal .people-special-thread{
  border-color:rgba(221,169,57,.58) !important;
  background:
    linear-gradient(
      145deg,
      rgba(255,236,173,.97),
      rgba(232,193,95,.96)
    ) !important;
  box-shadow:
    0 0 18px rgba(234,176,48,.18),
    inset 0 1px 0 rgba(255,255,255,.42);
}

.people-encounter-modal
.people-special-thread strong,
.people-encounter-modal
.people-special-thread div > span{
  color:#17150f !important;
  text-shadow:none !important;
}

.people-encounter-modal
.people-special-thread-mark{
  border:1px solid rgba(79,59,16,.16);
  background:rgba(255,250,222,.72) !important;
  color:#17150f !important;
  box-shadow:
    0 0 0 3px rgba(138,98,14,.06),
    0 0 12px rgba(183,128,21,.16) !important;
}

/*
 * Keep all normal text on the Polaroid itself dark even though its surrounding
 * modal remains dark-themed.
 */
.people-encounter-polaroid,
.people-encounter-polaroid strong{
  color:#111713 !important;
}

@media(prefers-reduced-motion:reduce){
  .people-web-pan{
    transition:none !important;
  }
}


/* ============================================================
   SMOOTH CRISP DISCOVERY ZOOM V182
   ============================================================ */

.people-web-world{
  contain:layout paint style;
}

.people-web-pan{
  transition:
    transform .16s cubic-bezier(.2,.75,.3,1);
}

.people-web-pan.is-view-immediate,
.people-web-live.is-navigating
.people-web-pan{
  transition:none !important;
}

.people-web-controls,
.people-web-discovery-hint,
.people-web-whisper{
  transform:translateZ(0);
}

@media(prefers-reduced-motion:reduce){
  .people-web-pan{
    transition:none !important;
  }
}


/* ============================================================
   QR SHARE + REFERRAL ACHIEVEMENTS V183
   ============================================================ */

.people-referral-progress{
  margin:.1rem auto .7rem;
  color:rgba(224,214,204,.64) !important;
  font-size:.47rem;
  font-weight:800;
  letter-spacing:.035em;
  text-align:center;
}

.people-referral-reward{
  width:min(100%,22rem);
  box-sizing:border-box;
  margin:.15rem auto .55rem;
  display:grid;
  grid-template-columns:2rem minmax(0,1fr);
  align-items:center;
  gap:.62rem;
  padding:.62rem .72rem;
  border:1px solid rgba(242,196,81,.42);
  border-radius:14px;
  background:
    radial-gradient(
      circle at 0 0,
      rgba(255,230,135,.16),
      transparent 8rem
    ),
    rgba(43,31,12,.78);
  box-shadow:
    0 0 18px rgba(238,180,56,.12),
    inset 0 1px 0 rgba(255,239,178,.07);
}

.people-referral-reward-mark{
  width:1.9rem;
  height:1.9rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    linear-gradient(
      145deg,
      #ffe9a3,
      #dcae43
    );
  color:#17140d !important;
  box-shadow:
    0 0 14px rgba(242,190,67,.28);
}

.people-referral-reward strong,
.people-referral-reward span{
  display:block;
}

.people-referral-reward strong{
  color:#ffe49a !important;
  font-size:.58rem;
  font-weight:950;
  letter-spacing:.11em;
}

.people-referral-reward div > span{
  margin-top:.12rem;
  color:rgba(239,225,196,.70) !important;
  font-size:.45rem;
  line-height:1.35;
}

/*
 * Arachno's Favor: the QR itself becomes visibly special once three genuine
 * new registrations were attributed to this user's QR.
 */
#peopleShareBackdrop.has-arachno-favor
.people-share-qr-wrap{
  border-color:rgba(240,194,75,.72) !important;
  box-shadow:
    0 20px 40px rgba(0,0,0,.30),
    0 0 0 2px rgba(247,205,94,.18),
    0 0 28px rgba(238,177,48,.34),
    0 0 52px rgba(222,140,28,.15),
    inset 0 0 0 5px rgba(255,255,255,.55) !important;
}

#peopleShareBackdrop.has-arachno-favor
.people-share-thread{
  background:
    linear-gradient(
      90deg,
      transparent,
      #d66d62 18%,
      #e4b44b 48%,
      #d66d62 78%,
      transparent
    );
  box-shadow:
    0 0 9px rgba(228,171,51,.28);
}

.people-web-person.is-self.is-arachno-favored{
  border-color:rgba(246,203,95,.68) !important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.28),
    0 0 0 2px rgba(246,203,95,.14),
    0 0 21px rgba(239,181,55,.30),
    0 0 42px rgba(226,143,32,.12) !important;
}

.people-web-person.is-self.is-arachno-favored::after{
  content:"✦";
  position:absolute;
  right:-7px;
  top:-8px;
  z-index:12;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f3cc68;
  color:#17140d;
  font-size:.5rem;
  box-shadow:
    0 0 10px rgba(245,193,67,.38);
}

@media(max-width:560px){
  .people-referral-reward{
    grid-template-columns:1.8rem minmax(0,1fr);
    padding:.55rem .62rem;
  }

  .people-referral-reward-mark{
    width:1.7rem;
    height:1.7rem;
  }
}


/* ============================================================
   RED THREAD REFOCUS V184
   ============================================================ */

/*
 * Arachno remains the keeper of the web, but the RED THREAD becomes the
 * dominant visual motif again. Main spines, local cluster threads and
 * contact-to-contact connections now share a warmer yarn-like red language.
 */

:root{
  --red-thread-deep:#8f2f3e;
  --red-thread:#c94e56;
  --red-thread-warm:#e36b62;
  --red-thread-soft:#f09a88;
  --red-thread-glow:rgba(222,81,79,.32);
}

/*
 * Main YOU -> EVENT/ALONG THE WAY thread.
 * Slightly irregular-looking through layered stroke/glow rather than a
 * sterile technical connector.
 */
.people-web-thread.is-event-spine{
  stroke:var(--red-thread) !important;
  stroke-width:2.05 !important;
  stroke-linecap:round;
  opacity:.78 !important;
  stroke-dasharray:4 3 !important;
  filter:
    drop-shadow(0 0 2px rgba(214,72,74,.34))
    drop-shadow(0 0 5px rgba(175,45,58,.14)) !important;
}

.people-web-thread.is-event-spine.is-selected-cluster{
  stroke:var(--red-thread-warm) !important;
  stroke-width:2.7 !important;
  opacity:.96 !important;
  filter:
    drop-shadow(0 0 3px rgba(232,101,89,.52))
    drop-shadow(0 0 8px rgba(179,49,56,.22)) !important;
}

/*
 * EVENT -> PEOPLE threads: clearly red, but one hierarchy step lighter.
 */
.people-web-thread.is-cluster-member{
  stroke:#c84a53 !important;
  stroke-width:1.45 !important;
  stroke-linecap:round;
  opacity:.64 !important;
  stroke-dasharray:3 3.5 !important;
  filter:
    drop-shadow(0 0 2px rgba(196,60,67,.22));
}

.people-web-thread.is-preview-member{
  stroke:#be434e !important;
  stroke-width:1.15 !important;
  opacity:.52 !important;
  stroke-dasharray:2.5 3.5 !important;
}

.people-web-thread.is-expanded-member{
  stroke:#d45758 !important;
  opacity:.72 !important;
}

/*
 * PEOPLE <-> PEOPLE cross-links remain visibly part of the same red thread
 * system instead of looking like separate graph edges.
 */
.people-web-thread.is-contact-link{
  stroke:#b93d49 !important;
  stroke-width:1.05 !important;
  stroke-linecap:round;
  stroke-dasharray:2 3.5 !important;
  opacity:.46 !important;
  filter:
    drop-shadow(0 0 2px rgba(182,49,62,.16)) !important;
}

.people-web-thread.is-contact-link.is-cluster-contact-link{
  stroke:#c94e56 !important;
  opacity:.58 !important;
}

/*
 * Returning threads look literally doubled: a second red strand runs close to
 * the original line through a stronger warm glow.
 */
.people-web-thread.strength-2{
  stroke-width:1.7 !important;
}

.people-web-thread.strength-3{
  stroke-width:2.15 !important;
  filter:
    drop-shadow(1px 0 0 rgba(242,132,111,.22))
    drop-shadow(-1px 0 0 rgba(120,34,48,.20))
    drop-shadow(0 0 4px rgba(213,78,74,.24)) !important;
}

.people-web-thread.strength-4{
  stroke-width:2.65 !important;
  filter:
    drop-shadow(1.2px 0 0 rgba(244,139,116,.30))
    drop-shadow(-1.2px 0 0 rgba(116,29,45,.28))
    drop-shadow(0 0 6px rgba(218,79,74,.30)) !important;
}

/*
 * Strange Thread stays RED at its core. Gold is only the halo/favor around
 * the red strand, preserving the Red Thread metaphor.
 */
.people-web-thread.is-special{
  stroke:#d14e53 !important;
  opacity:.92 !important;
  filter:
    drop-shadow(0 0 2px rgba(214,67,67,.42))
    drop-shadow(0 0 5px rgba(237,182,57,.38))
    drop-shadow(0 0 9px rgba(224,157,35,.18)) !important;
}

/*
 * Event/Along-the-Way cluster nodes should look like knots in the thread,
 * not generic graph bubbles.
 */
.people-web-cluster{
  border-color:rgba(204,72,79,.34) !important;
  background:
    radial-gradient(circle at 18% 14%,rgba(211,81,83,.16),transparent 5.5rem),
    linear-gradient(180deg,rgba(40,27,36,.95),rgba(23,19,27,.96)) !important;
  box-shadow:
    0 12px 24px rgba(0,0,0,.22),
    0 0 0 1px rgba(172,51,64,.08),
    0 0 18px rgba(178,47,61,.10) !important;
}

.people-web-cluster::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#c84b52;
  box-shadow:
    0 0 0 4px rgba(198,72,80,.08),
    0 0 11px rgba(213,79,79,.28);
  transform:translate(-50%,-50%);
  opacity:.58;
  pointer-events:none;
}

.people-web-cluster strong,
.people-web-cluster small,
.people-web-cluster span{
  position:relative;
  z-index:2;
}

/*
 * Red-thread accent for the overall discovery viewport.
 */
.people-web-live{
  background:
    radial-gradient(circle at 50% 50%,rgba(137,38,55,.12),transparent 21rem),
    radial-gradient(circle at 12% 18%,rgba(76,43,69,.12),transparent 18rem),
    linear-gradient(180deg,rgba(9,13,20,.97),rgba(5,9,14,.99)) !important;
}

.people-web-world::before{
  background:
    radial-gradient(circle at 50% 50%,transparent 0 160px,rgba(204,71,77,.034) 161px 162px,transparent 163px 310px,rgba(204,71,77,.026) 311px 312px,transparent 313px),
    radial-gradient(circle at 18% 24%,rgba(195,65,75,.025),transparent 100px),
    radial-gradient(circle at 82% 76%,rgba(176,54,67,.038),transparent 150px) !important;
}

/*
 * Headline motif.
 */
.people-thread-stage-copy .landing-kicker{
  color:#e67e72 !important;
  text-shadow:0 0 10px rgba(204,70,75,.18);
}

.people-thread-stage-copy h3::after{
  content:"";
  display:block;
  width:5.2rem;
  height:2px;
  margin-top:.48rem;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      #9f3444 10%,
      #d85d5d 48%,
      #a83847 88%,
      transparent
    );
  box-shadow:0 0 7px rgba(211,75,76,.20);
}

/*
 * Recently Woven and Discovery sections get a subtle thread divider.
 */
.people-subsection-heading{
  position:relative;
}

.people-subsection-heading::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.42rem;
  height:1px;
  background:
    linear-gradient(
      90deg,
      rgba(184,55,68,.55),
      rgba(221,96,87,.14),
      transparent 78%
    );
}

/*
 * Referral reward language visually stays rooted in red thread, even when
 * Arachno's Favor adds gold.
 */
.people-referral-reward{
  border-color:rgba(225,167,49,.44) !important;
  background:
    radial-gradient(circle at 0 0,rgba(225,82,74,.13),transparent 8rem),
    radial-gradient(circle at 100% 100%,rgba(239,196,84,.11),transparent 7rem),
    rgba(40,26,19,.82) !important;
}

#peopleShareBackdrop.has-arachno-favor
.people-share-thread{
  background:
    linear-gradient(
      90deg,
      transparent,
      #b83d48 10%,
      #d95455 36%,
      #e6b84d 50%,
      #d95455 66%,
      #b83d48 90%,
      transparent
    ) !important;
}

/*
 * Make the QR modal's normal threads red even before Favor.
 */
.people-share-thread{
  background:
    linear-gradient(
      90deg,
      transparent,
      #aa3544 12%,
      #d55b59 48%,
      #aa3544 88%,
      transparent
    ) !important;
  box-shadow:
    0 0 8px rgba(197,62,68,.28) !important;
}

/*
 * Thread Discovery progress also follows red-thread palette.
 */
.people-discovery-progress span{
  background:
    linear-gradient(
      90deg,
      #8f3040,
      #cf5157,
      #ea7669
    ) !important;
  box-shadow:
    0 0 8px rgba(208,75,75,.25) !important;
}

/*
 * Stronger red-thread cue for own central card.
 */
.people-web-person.is-self{
  box-shadow:
    0 8px 22px rgba(0,0,0,.26),
    0 0 0 2px rgba(196,65,75,.12),
    0 0 17px rgba(196,57,69,.15) !important;
}

/*
 * Keep Favor/Strange glows compatible with red-thread core.
 */
.people-web-person.is-self.is-arachno-favored{
  box-shadow:
    0 8px 22px rgba(0,0,0,.28),
    0 0 0 2px rgba(198,67,73,.16),
    0 0 18px rgba(208,67,72,.20),
    0 0 30px rgba(240,187,67,.18) !important;
}

@media(max-width:760px){
  .people-web-thread.is-event-spine{
    stroke-width:1.8 !important;
  }

  .people-web-thread.is-cluster-member{
    stroke-width:1.25 !important;
  }

  .people-web-thread.is-contact-link{
    stroke-width:.92 !important;
  }
}


/* ============================================================
   DEBUG ACHIEVEMENT SIMULATOR V186
   ============================================================ */

.debug-achievement-simulator{
  margin-top:.9rem;
  padding:.82rem;
  border:1px solid rgba(205,91,96,.18);
  border-radius:16px;
  background:
    radial-gradient(
      circle at 0 0,
      rgba(153,48,65,.11),
      transparent 10rem
    ),
    rgba(8,12,18,.46);
}

.debug-achievement-simulator-head{
  margin-bottom:.7rem;
}

.debug-achievement-simulator-head strong,
.debug-achievement-simulator-head span{
  display:block;
}

.debug-achievement-simulator-head strong{
  color:#f2e6df;
  font-size:.64rem;
}

.debug-achievement-simulator-head span{
  margin-top:.13rem;
  color:rgba(219,202,194,.57);
  font-size:.46rem;
}

.debug-achievement-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:.42rem;
}

.debug-achievement-button{
  appearance:none;
  min-height:2.3rem;
  padding:.48rem .58rem;
  border:1px solid rgba(192,91,96,.18);
  border-radius:11px;
  background:rgba(31,24,32,.72);
  color:#e7d9d3;
  font:inherit;
  font-size:.48rem;
  font-weight:850;
  text-align:left;
  cursor:pointer;
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.debug-achievement-button:hover,
.debug-achievement-button:focus-visible{
  border-color:rgba(220,111,103,.42);
  background:rgba(58,31,39,.80);
  outline:none;
}

.debug-achievement-button.is-active{
  border-color:rgba(228,97,91,.60);
  background:
    linear-gradient(
      135deg,
      rgba(129,43,55,.86),
      rgba(68,32,42,.86)
    );
  color:#fff0e8;
  box-shadow:
    0 0 12px rgba(205,65,71,.16);
}

.debug-referral-simulator{
  margin-top:.72rem;
  padding-top:.68rem;
  border-top:1px solid rgba(198,87,92,.12);
}

.debug-referral-simulator label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  margin-bottom:.45rem;
  color:rgba(225,211,203,.72);
  font-size:.48rem;
}

.debug-referral-simulator label strong{
  color:#efbf64;
  font-size:.55rem;
}

.debug-referral-simulator input[type="range"]{
  width:100%;
  accent-color:#c84c53;
}

.debug-referral-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.42rem;
  margin-top:.55rem;
}

#debugUnlockFavor.is-active{
  border-color:rgba(239,193,74,.62);
  background:
    linear-gradient(
      135deg,
      rgba(88,58,16,.90),
      rgba(49,31,12,.90)
    );
  color:#f8d677;
  box-shadow:
    0 0 14px rgba(235,179,52,.16);
}

@media(max-width:560px){
  .debug-achievement-grid,
  .debug-referral-buttons{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   V192 · COSMETIC REWARDS REMOVED
   ============================================================ */

.people-referral-reward{
  width:min(100%,22rem);
  box-sizing:border-box;
  margin:.15rem auto .55rem;
  display:block;
  padding:.58rem .68rem;
  border:1px solid rgba(155,91,103,.16) !important;
  border-radius:12px;
  background:rgba(12,17,24,.58) !important;
  box-shadow:none !important;
}

.people-referral-reward-mark{
  display:none !important;
}

.people-referral-reward::before,
.people-referral-reward::after{
  content:none !important;
  display:none !important;
}

.people-referral-reward strong{
  display:block;
  color:#e6d8d4 !important;
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.08em;
}

.people-referral-reward div > span{
  display:block;
  margin-top:.12rem;
  color:rgba(216,211,207,.62) !important;
  font-size:.45rem;
  line-height:1.4;
}

.people-achievement-rewards,
.people-achievement-reward-chip,
.people-discovery-reward{
  display:none !important;
}

.people-web-person.is-self.is-arachno-favored::before,
.people-web-person.is-self.is-arachno-favored::after{
  content:none !important;
  display:none !important;
}

#peopleShareBackdrop.has-arachno-favor
.people-share-qr-wrap::after{
  content:none !important;
  display:none !important;
}


/* ============================================================
   V193 · PEOPLE CARD ACHIEVEMENTS
   Achievements are informational card metadata, not cosmetic rewards.
   ============================================================ */

.people-card-achievements{
  width:min(100%,32rem);
  box-sizing:border-box;
  margin:.7rem auto;
  padding:.7rem .76rem;
  border:1px solid rgba(171,83,96,.14);
  border-radius:14px;
  background:rgba(9,13,20,.42);
}

.people-card-achievements .landing-kicker{
  margin:0 0 .5rem;
  color:rgba(222,145,142,.72) !important;
  font-size:.43rem;
  letter-spacing:.15em;
}

.people-card-achievement-list{
  display:flex;
  flex-wrap:wrap;
  gap:.34rem;
}

.people-card-achievement{
  display:inline-flex;
  align-items:center;
  min-height:1.55rem;
  padding:.26rem .52rem;
  border:1px solid rgba(176,91,103,.18);
  border-radius:999px;
  background:rgba(31,22,30,.56);
  color:#ddd0cb;
  font-size:.46rem;
  font-weight:800;
  line-height:1.15;
}

.people-card-achievement::before{
  content:"";
  width:5px;
  height:5px;
  flex:0 0 auto;
  margin-right:.34rem;
  border-radius:50%;
  background:#c85b61;
  box-shadow:0 0 6px rgba(198,78,87,.22);
}

/*
 * Strange Thread mark:
 * the original ✦ glyph sits visually above/left because of font metrics.
 * Hide the text glyph and draw it in an absolutely centered pseudo element.
 */
.people-special-thread-mark{
  position:relative;
  padding:0 !important;
  font-size:0 !important;
  line-height:1 !important;
  text-align:center;
}

.people-special-thread-mark::before{
  content:"✦";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:currentColor;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.76rem;
  font-weight:700;
  line-height:1;
  transform:translateY(-.02em);
}

/* Keep the light Strange Thread modal variant readable. */
.people-encounter-modal
.people-special-thread-mark::before{
  color:#17150f;
}

@media(max-width:560px){
  .people-card-achievements{
    padding:.62rem .66rem;
  }

  .people-card-achievement{
    font-size:.43rem;
  }
}


/* ============================================================
   PEOPLE WEB NO-OVERLAP + PINNED ARACHNO V195
   ============================================================ */

/*
 * Arachno should stay visible as the keeper of the web, not drift away with
 * the pannable/zoomable world. Pin the figure to the visible canvas.
 */
.people-web-live > .people-thread-stage-arachno{
  position:absolute !important;
  right:1rem !important;
  bottom:.8rem !important;
  z-index:34 !important;
  width:132px !important;
  height:132px !important;
  pointer-events:none;
  opacity:.98;
}

.people-web-world > .people-thread-stage-arachno{
  position:absolute;
}

/*
 * Give node captions a little more breathing room and ensure the cluster layer
 * remains readable once collisions are resolved in JS.
 */
.people-web-person{
  z-index:16;
}

.people-web-person.is-self{
  z-index:22;
}

.people-web-cluster{
  z-index:14;
}

.people-web-cluster-more{
  z-index:18;
}

@media(max-width:760px){
  .people-web-live > .people-thread-stage-arachno{
    right:.55rem !important;
    bottom:.45rem !important;
    width:104px !important;
    height:104px !important;
  }
}


/* ============================================================
   SMART EXPANDED CLUSTER PACKING V196
   ============================================================ */

/*
 * The JS layout now uses multiple packed rings. Slightly reduce the expanded
 * Polaroid transition so repositioning feels intentional rather than jumpy.
 */
.people-web-person.is-expanded-member{
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

/*
 * Keep the opened cluster node clearly above its surrounding threads, but
 * below the People cards that fan out around it.
 */
.people-web-cluster.is-expanded{
  z-index:15;
}

.people-web-person.is-expanded-member{
  z-index:19;
}

/*
 * "+ more" belongs below the expanded group and should not cover a Polaroid.
 */
.people-web-cluster-more{
  z-index:17;
}


/* ============================================================
   GLOBAL PEOPLE WEB PACKING V197
   ============================================================ */

/*
 * Geometry now reserves real card footprints in JS.
 * Keep CSS card sizes stable so those collision boxes remain accurate.
 */
.people-web-person.is-preview-member{
  width:66px;
}

.people-web-person.is-expanded-member{
  width:70px;
}

/*
 * Cluster positions are now intentionally farther from YOU. Avoid later CSS
 * transforms that visually enlarge them enough to defeat collision spacing.
 */
.people-web-cluster{
  transform:translate(-50%,-50%);
}

.people-web-cluster.is-expanded{
  transform:translate(-50%,-50%);
}

/*
 * Pinned Arachno from V195 remains outside the pan/zoom world.
 */
.people-web-live > .people-thread-stage-arachno{
  z-index:34 !important;
}


/* ============================================================
   KNOT CONNECTION RED GLOW V198
   ============================================================ */

/*
 * Every YOU -> knot connection should carry the same red-thread language as
 * the currently active knot. The selected knot remains stronger so hierarchy
 * is preserved.
 */
.people-web-thread.is-event-spine{
  stroke:rgba(204,72,82,.76) !important;
  stroke-width:2.2 !important;
  opacity:.78 !important;
  stroke-linecap:round;
  filter:
    drop-shadow(0 0 2px rgba(203,65,77,.48))
    drop-shadow(0 0 6px rgba(185,49,66,.24)) !important;
}

/*
 * Selected/current knot connection = same family, one level stronger.
 */
.people-web-thread.is-event-spine.is-selected-cluster{
  stroke:rgba(231,91,94,.94) !important;
  stroke-width:2.8 !important;
  opacity:.98 !important;
  filter:
    drop-shadow(0 0 3px rgba(232,83,90,.68))
    drop-shadow(0 0 8px rgba(205,56,73,.42))
    drop-shadow(0 0 13px rgba(171,37,58,.18)) !important;
}

/*
 * The member threads remain lighter. They connect People to a knot, while the
 * brighter spine shows the main structure between YOU and the knots.
 */
.people-web-thread.is-cluster-member{
  stroke:rgba(192,69,80,.56) !important;
  filter:
    drop-shadow(0 0 2px rgba(186,56,71,.20)) !important;
}

.people-web-thread.is-cluster-member.is-expanded-member{
  stroke:rgba(207,75,84,.66) !important;
  filter:
    drop-shadow(0 0 2px rgba(203,62,75,.28))
    drop-shadow(0 0 5px rgba(177,44,62,.10)) !important;
}

@media(max-width:760px){
  .people-web-thread.is-event-spine{
    stroke-width:1.9 !important;
  }

  .people-web-thread.is-event-spine.is-selected-cluster{
    stroke-width:2.45 !important;
  }
}


/* ============================================================
   PEOPLE WEB HOVER THREAD PULSE V199
   ============================================================ */

/*
 * When a Polaroid is hovered/focused, de-emphasize unrelated lines and make
 * every line touching that person visibly pulse.
 */
.people-web-lines.has-hovered-thread
.people-web-thread{
  opacity:.16 !important;
  transition:
    opacity .15s ease,
    stroke .15s ease,
    filter .15s ease,
    stroke-width .15s ease;
}

.people-web-lines.has-hovered-thread
.people-web-thread.is-hover-related{
  opacity:1 !important;
  stroke:rgba(239,92,96,.98) !important;
  stroke-width:2.7px !important;
  stroke-dasharray:8 7 !important;
  stroke-linecap:round;
  filter:
    drop-shadow(0 0 3px rgba(237,83,90,.72))
    drop-shadow(0 0 8px rgba(208,54,72,.42))
    drop-shadow(0 0 14px rgba(172,36,57,.16)) !important;
  animation:
    peopleThreadHoverPulse .72s linear infinite;
}

/*
 * Contact↔Contact lines are normally finer. On hover they should be just as
 * readable as the direct knot connection because the whole point is seeing
 * every relationship of the hovered person.
 */
.people-web-lines.has-hovered-thread
.people-web-thread.is-contact-link.is-hover-related{
  stroke-width:2.35px !important;
}

/*
 * Keep the hovered/focused card clearly above surrounding Polaroids.
 */
.people-web-nodes.has-hovered-person
.people-web-person{
  transition:
    opacity .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.people-web-nodes.has-hovered-person
.people-web-person:not(.is-hover-source){
  opacity:.66;
}

.people-web-person.is-hover-source{
  z-index:40 !important;
  opacity:1 !important;
  transform:
    translate(-50%,-50%)
    rotate(0deg)
    scale(1.07) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.42),
    0 0 22px rgba(216,80,87,.20) !important;
}

@keyframes peopleThreadHoverPulse{
  from{
    stroke-dashoffset:0;
  }
  to{
    stroke-dashoffset:-30;
  }
}

@media(prefers-reduced-motion:reduce){
  .people-web-lines.has-hovered-thread
  .people-web-thread.is-hover-related{
    animation:none !important;
    stroke-dasharray:none !important;
  }
}


/* ============================================================
   DETERMINISTIC MY CARD CAMERA START V201
   ============================================================ */

/*
 * On a reload the web must never briefly render at x:0/y:0 and then visibly
 * jump into place. The pannable world stays hidden until a valid, measurable
 * canvas has been centered on My Card.
 */
.people-web-live:not(.is-view-ready)
.people-web-pan{
  opacity:0;
}

.people-web-live.is-view-ready
.people-web-pan{
  opacity:1;
  transition:opacity .12s ease;
}

/*
 * Controls and pinned Arachno remain visible while the web camera settles.
 */
.people-web-controls,
.people-web-live > .people-thread-stage-arachno{
  opacity:1;
}

@media(prefers-reduced-motion:reduce){
  .people-web-live.is-view-ready
  .people-web-pan{
    transition:none;
  }
}


/* ============================================================
   ARCHIVE GIFT IDENTITY CHECKMARK CENTERING V202
   ============================================================ */

/*
 * The ✓ glyph has uneven font metrics and looked high/left inside the circle.
 * Draw it through a centered pseudo element instead.
 */
.memory-gift-account > .account-check{
  position:relative;
  display:block !important;
  padding:0 !important;
  font-size:0 !important;
  line-height:1 !important;
}

.memory-gift-account > .account-check::before{
  content:"✓";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--forest);
  font-family:Arial,Helvetica,sans-serif;
  font-size:1rem;
  font-weight:700;
  line-height:1;
  transform:translateY(-.01em);
}


/* ============================================================
   DE / EN LANGUAGE SWITCH V205
   ============================================================ */

.paws-language-switch{
  min-height:2.7rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.12rem;
  padding:.28rem .45rem;
  border:1px solid rgba(255,255,255,.30);
  border-radius:999px;
  background:rgba(20,55,59,.72);
  backdrop-filter:blur(8px);
  box-shadow:
    0 8px 20px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
  color:rgba(255,255,255,.58);
}

.paws-language-switch button{
  appearance:none;
  min-width:1.8rem;
  min-height:1.8rem;
  display:grid;
  place-items:center;
  padding:.2rem .32rem;
  border:0;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.62);
  font:inherit;
  font-size:.62rem;
  font-weight:950;
  letter-spacing:.05em;
  cursor:pointer;
}

.paws-language-switch button:hover,
.paws-language-switch button:focus-visible{
  color:#fff;
  outline:none;
}

.paws-language-switch button.is-active{
  background:rgba(255,255,255,.16);
  color:#fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12);
}

.paws-language-switch > span{
  font-size:.54rem;
  color:rgba(255,255,255,.34);
  pointer-events:none;
}

@media(max-width:560px){
  .paws-language-switch{
    min-height:2.8rem;
    padding:.28rem .34rem;
  }

  .paws-language-switch button{
    min-width:1.55rem;
    padding:.15rem .2rem;
    font-size:.56rem;
  }
}

@media(max-width:390px){
  .paws-top-shortcuts{
    gap:.22rem;
  }

  .paws-language-switch{
    padding:.22rem .28rem;
  }

  .paws-language-switch button{
    min-width:1.4rem;
    font-size:.52rem;
  }
}


/* ============================================================
   DE UI GENERATED LABELS V207
   ============================================================ */

html[lang="de"]
.event-bonus-progress.is-complete
.event-bonus-progress-label::after{
  content:" · VOLLSTÄNDIG";
}


/* ============================================================
   SESSION RECOVERY / OFFLINE AUTH STATE V210
   ============================================================ */

/*
 * A temporary session.php/network failure is not a logout. Keep the saved
 * account card visible, but disable server-mutating actions until the durable
 * device login has been verified again.
 */
.account-saved.is-session-unavailable{
  position:relative;
}

.account-saved.is-session-unavailable
.account-actions,
.account-saved.is-session-unavailable
.account-submission-entry{
  opacity:.48;
  pointer-events:none;
}

.account-saved.is-session-unavailable
.account-check{
  opacity:.72;
}

.account-saved.is-session-unavailable
#accountEmailDisplay{
  font-style:italic;
}


/* ============================================================
   V211 — THE COLLECTION BOOK
   Scrapbook / poetry-album treatment for Memories and Events.
   ============================================================ */

:root{
  --album-paper:#f3e8d2;
  --album-paper-light:#fffaf0;
  --album-paper-dark:#d8c7a7;
  --album-ink:#342d26;
  --album-pencil:#776b5c;
  --album-red:#a94a3c;
  --album-thread:#b9473d;
  --album-tape:rgba(235,220,181,.72);
  --album-shadow:0 18px 46px rgba(24,19,13,.24);
}

/* The entire Memories collection becomes a stack of journal pages. */
#memoryCollectionPanel{
  position:relative;
  padding:18px 10px 32px;
  border-radius:28px 28px 18px 18px;
  background:
    linear-gradient(90deg,rgba(105,78,48,.05) 0 1px,transparent 1px 100%),
    radial-gradient(circle at 14% 16%,rgba(126,91,47,.08) 0 1px,transparent 1.5px),
    linear-gradient(180deg,#f8eedb 0%,#f2e5cb 52%,#ecddc0 100%);
  box-shadow:0 26px 70px rgba(0,0,0,.24),inset 0 0 0 1px rgba(107,77,42,.12);
  isolation:isolate;
}

#memoryCollectionPanel::before{
  content:"";
  position:absolute;
  inset:12px auto 12px 14px;
  width:4px;
  border-radius:10px;
  background:linear-gradient(180deg,transparent,rgba(105,76,45,.16) 8%,rgba(105,76,45,.16) 92%,transparent);
  box-shadow:7px 0 14px rgba(73,49,24,.10);
  pointer-events:none;
}

.collection-album-cover{
  position:relative;
  margin:0 0 24px;
  padding:30px 24px 20px 38px;
  overflow:hidden;
  color:var(--album-ink);
  border-radius:20px 10px 14px 18px;
  background:
    radial-gradient(circle at 84% 18%,rgba(255,255,255,.62),transparent 28%),
    linear-gradient(135deg,#f7ecd7,#e9d8b8);
  box-shadow:var(--album-shadow),inset 0 0 0 1px rgba(84,58,31,.14);
}

.collection-album-cover::before,
.collection-album-cover::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.collection-album-cover::before{
  width:115px;
  height:30px;
  right:-22px;
  top:24px;
  transform:rotate(7deg);
  background:linear-gradient(90deg,transparent 0 6%,var(--album-tape) 9% 91%,transparent 94%);
  opacity:.7;
}

.collection-album-cover::after{
  right:18px;
  bottom:16px;
  width:100px;
  height:52px;
  opacity:.22;
  background:
    radial-gradient(ellipse at 20% 80%,transparent 48%,var(--album-red) 49% 51%,transparent 52%),
    radial-gradient(ellipse at 48% 62%,transparent 48%,var(--album-red) 49% 51%,transparent 52%),
    radial-gradient(ellipse at 76% 44%,transparent 48%,var(--album-red) 49% 51%,transparent 52%);
  transform:rotate(-9deg);
}

.collection-album-binding{
  position:absolute;
  inset:0 auto 0 0;
  width:22px;
  background:
    repeating-linear-gradient(180deg,rgba(71,50,31,.32) 0 2px,transparent 2px 19px),
    linear-gradient(90deg,rgba(73,48,25,.18),transparent);
}

.album-handnote{
  margin:0 0 5px;
  color:var(--album-red)!important;
  font-family:"Architects Daughter",cursive!important;
  font-size:.82rem!important;
  letter-spacing:.08em!important;
  font-weight:700;
}

.collection-album-cover h2{
  margin:0;
  max-width:520px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,8vw,3.2rem);
  line-height:.94;
  font-weight:500;
  color:var(--album-ink);
}

.collection-album-cover-copy>p:last-child{
  max-width:530px;
  margin:15px 0 0;
  line-height:1.65;
  color:#625548;
}

.collection-journal-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin:24px 0 18px;
}

.collection-journal-stat{
  min-height:82px;
  padding:12px 10px 10px;
  border-top:1px solid rgba(75,54,31,.23);
  border-bottom:1px solid rgba(75,54,31,.12);
}

.collection-journal-stat strong{
  display:block;
  color:var(--album-ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;
  font-weight:500;
}

.collection-journal-stat span{
  display:block;
  margin-top:4px;
  color:var(--album-pencil);
  font-family:"Architects Daughter",cursive;
  font-size:.78rem;
  line-height:1.15;
}

.collection-album-index,
.event-album-index{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.collection-album-index a,
.event-album-index a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  color:#4e4438;
  text-decoration:none;
  border:1px solid rgba(91,63,34,.17);
  border-radius:3px 9px 5px 8px;
  background:rgba(255,250,239,.54);
  font-family:"Architects Daughter",cursive;
  font-size:.78rem;
  transition:transform .2s ease,background .2s ease;
}

.collection-album-index a:nth-child(2),
.event-album-index a:nth-child(2){transform:rotate(.8deg)}
.collection-album-index a:nth-child(3),
.event-album-index a:nth-child(3){transform:rotate(-.7deg)}
.collection-album-index a:hover,
.collection-album-index a:focus-visible,
.event-album-index a:hover,
.event-album-index a:focus-visible{
  transform:translateY(-2px) rotate(0);
  background:#fff9ec;
}
.collection-album-index a span,
.event-album-index a span{color:var(--album-red);font-weight:700}

.collection-journey-strip{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px 20px;
  margin:12px 8px 30px;
  padding:18px 18px 16px 22px;
  color:var(--album-ink);
  border-radius:7px 13px 8px 11px;
  background:rgba(255,250,239,.67);
  border:1px solid rgba(98,71,42,.13);
  box-shadow:0 9px 22px rgba(65,45,24,.09);
  transform:rotate(-.35deg);
}

.collection-journey-thread{
  position:absolute;
  left:7px;
  top:14px;
  bottom:14px;
  width:2px;
  background:var(--album-thread);
  box-shadow:0 0 7px rgba(185,71,61,.22);
}

.collection-journey-copy h3{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.3rem;
  font-weight:500;
}
.collection-journey-copy>p:last-child{margin:6px 0 0;color:#6a5c4e;font-size:.88rem}

.collection-journey-dates{display:flex;align-items:center;gap:9px}
.journey-date-note{min-width:84px;transform:rotate(-1deg)}
.journey-date-note.is-latest{transform:rotate(1deg)}
.journey-date-note span{display:block;color:var(--album-red);font-family:"Architects Daughter",cursive;font-size:.68rem}
.journey-date-note strong{font-family:Georgia,"Times New Roman",serif;font-size:.78rem;color:#453b30;font-weight:500}
.journey-date-thread{width:24px;height:1px;background:var(--album-thread);transform:rotate(-6deg)}
.journey-date-placeholder{font-size:1.5rem;color:var(--album-red)}

/* Existing sections become individual scrapbook leaves. */
#memoryCollectionPanel>.event-collections,
#memoryCollectionPanel>.collection-latest,
#memoryCollectionPanel>.collection-browser{
  position:relative;
  margin:20px 8px;
  padding:22px 16px 24px;
  color:var(--album-ink);
  border-radius:8px 13px 7px 11px;
  background:
    linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.08)),
    var(--album-paper-light);
  border:1px solid rgba(94,65,34,.12);
  box-shadow:0 10px 30px rgba(63,43,24,.11);
}
#memoryCollectionPanel>.event-collections{transform:rotate(.15deg)}
#memoryCollectionPanel>.collection-latest{transform:rotate(-.16deg)}
#memoryCollectionPanel>.collection-browser{transform:rotate(.1deg)}
#memoryCollectionPanel .section-heading-row h2,
#memoryCollectionPanel .collection-browser-heading h2{
  color:var(--album-ink);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
}
#memoryCollectionPanel .landing-kicker{color:var(--album-red)}
#memoryCollectionPanel .collection-browser-intro{color:#716254}

/* Polaroids are now visibly pasted into the book. */
.album-memory-polaroid{
  position:relative!important;
  overflow:visible!important;
  transform:rotate(var(--album-tilt,0deg));
  transform-origin:50% 20%;
  background:#fffdf7!important;
  border:1px solid rgba(73,57,39,.10)!important;
  box-shadow:0 12px 20px rgba(47,34,21,.16),0 2px 3px rgba(47,34,21,.13)!important;
  transition:transform .24s ease,box-shadow .24s ease!important;
}
.album-memory-polaroid:hover,
.album-memory-polaroid:focus-visible{
  transform:translateY(-5px) rotate(0deg) scale(1.015)!important;
  box-shadow:0 18px 30px rgba(47,34,21,.21),0 3px 4px rgba(47,34,21,.13)!important;
  z-index:4;
}
.album-photo-tape{
  position:absolute;
  z-index:5;
  left:50%;
  top:-8px;
  width:52px;
  height:18px;
  background:linear-gradient(90deg,transparent,var(--album-tape) 10% 90%,transparent);
  transform:translateX(-50%) rotate(-2deg);
  box-shadow:0 1px 1px rgba(65,46,27,.08);
  pointer-events:none;
}
.album-memory-polaroid:nth-child(3n+2) .album-photo-tape{transform:translateX(-50%) rotate(4deg)}
.album-memory-polaroid:nth-child(4n) .album-photo-tape{left:28%;transform:translateX(-50%) rotate(-6deg)}
.album-memory-polaroid .collection-browser-copy strong,
.album-memory-polaroid .found-copy strong{
  font-family:"Architects Daughter",cursive!important;
  color:#3f352b!important;
  font-weight:700!important;
}
.album-memory-event{
  color:#8b5549!important;
  font-family:"Architects Daughter",cursive;
}
.album-memory-polaroid .found-date,
.album-memory-polaroid .collection-favorite-count{
  color:#827465!important;
  font-family:"Architects Daughter",cursive;
}
.collection-browser-grid{gap:24px 14px!important;padding:12px 6px 18px!important}
.found-list{gap:14px!important;padding-top:8px}

/* Event Collection cards become chapter dividers. */
.event-collection-card.album-event-chapter{
  position:relative;
  overflow:visible;
  margin:6px 4px 14px;
  padding:18px 18px 18px 22px;
  color:var(--album-ink);
  background:
    linear-gradient(90deg,rgba(178,77,59,.15) 0 7px,transparent 7px),
    linear-gradient(135deg,#efe0c3,#fff8e9);
  border:1px solid rgba(88,62,36,.14);
  border-radius:5px 13px 8px 6px;
  box-shadow:0 9px 20px rgba(54,38,23,.12);
}
.event-collection-card.album-event-chapter:nth-child(even){transform:rotate(.3deg)}
.event-collection-card.album-event-chapter:nth-child(odd){transform:rotate(-.18deg)}
.event-collection-card.album-event-chapter:hover,
.event-collection-card.album-event-chapter:focus-visible{transform:translateX(4px) rotate(0);box-shadow:0 13px 26px rgba(54,38,23,.17)}
.album-event-bookmark{
  position:absolute;
  top:11px;
  right:-8px;
  display:grid;
  place-items:center;
  width:28px;
  height:48px;
  color:white;
  background:var(--album-red);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
  font-size:.8rem;
}
.event-collection-card .event-collection-eyebrow{color:var(--album-red)!important;font-family:"Architects Daughter",cursive!important}
.event-collection-card strong{font-family:Georgia,"Times New Roman",serif!important;color:var(--album-ink)!important;font-weight:500!important}
.event-collection-card .event-collection-meta,
.event-collection-card .event-upcoming-meta{color:#756757!important}

/* Event screen as an opened chapter with visible index tabs. */
.event-collection-screen{
  position:relative;
  color:var(--album-ink)!important;
  padding:18px 12px 44px!important;
  background:
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(89,61,34,.10) 50%,transparent calc(50% + 2px)),
    linear-gradient(180deg,#f2e5cb,#ecdbba)!important;
}
.event-collection-screen::before{
  content:"";
  position:absolute;
  inset:10px 10px 24px;
  z-index:0;
  border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(76,52,28,.10),0 24px 50px rgba(0,0,0,.16);
  pointer-events:none;
}
.event-collection-screen>*{position:relative;z-index:1}
.event-screen-header{
  margin:4px 2px 20px!important;
  padding:20px 18px 24px!important;
  color:var(--album-ink)!important;
  background:rgba(255,250,240,.76)!important;
  border:1px solid rgba(84,59,33,.12);
  border-radius:8px 14px 8px 12px;
  box-shadow:0 10px 28px rgba(62,43,24,.10);
}
.event-screen-header h1{font-family:Georgia,"Times New Roman",serif!important;color:var(--album-ink)!important;font-weight:500!important}
.event-screen-header>p:not(.landing-kicker){color:#746556!important}
.event-screen-header .landing-kicker{color:var(--album-red)!important}
.event-back-button{font-family:"Architects Daughter",cursive!important}
.event-album-index{margin:18px 0 12px}
.event-progress-large{border-radius:5px!important;background:rgba(113,79,43,.06)!important;border:1px dashed rgba(104,73,39,.22)!important}
.event-memory-group{
  margin:18px 2px!important;
  padding:22px 16px 26px!important;
  color:var(--album-ink)!important;
  background:rgba(255,250,240,.82)!important;
  border:1px solid rgba(85,60,34,.11)!important;
  border-radius:7px 12px 6px 10px!important;
  box-shadow:0 12px 30px rgba(61,42,23,.10)!important;
}
.event-memory-group:nth-of-type(even){transform:rotate(.12deg)}
.event-memory-group:nth-of-type(odd){transform:rotate(-.1deg)}
.event-group-heading h2{font-family:Georgia,"Times New Roman",serif!important;color:var(--album-ink)!important;font-weight:500!important}
.event-group-heading p{color:#746657!important}
.event-group-heading .landing-kicker{color:var(--album-red)!important}
.event-slot-grid{gap:20px 13px!important;padding:8px 2px!important}
.event-slot-card{
  position:relative;
  overflow:visible!important;
  border-radius:3px!important;
  background:#fffdf8!important;
  border:1px solid rgba(74,55,36,.10)!important;
  box-shadow:0 10px 19px rgba(49,35,21,.13)!important;
}
.event-slot-card:nth-child(4n+1){transform:rotate(-1deg)}
.event-slot-card:nth-child(4n+2){transform:rotate(.8deg)}
.event-slot-card:nth-child(4n+3){transform:rotate(-.35deg)}
.event-slot-card:nth-child(4n){transform:rotate(1.15deg)}
.event-slot-card::before{
  content:"";
  position:absolute;
  z-index:3;
  width:43px;
  height:15px;
  top:-7px;
  left:50%;
  transform:translateX(-50%) rotate(-3deg);
  background:linear-gradient(90deg,transparent,var(--album-tape) 10% 90%,transparent);
  pointer-events:none;
}
.event-slot-hidden{
  background:
    repeating-linear-gradient(0deg,rgba(110,87,60,.025) 0 1px,transparent 1px 4px),
    #eee3ce!important;
  border:1px dashed rgba(86,61,37,.22)!important;
  box-shadow:inset 0 0 22px rgba(86,61,37,.05)!important;
}
.event-slot-hidden-mark{font-family:"Architects Daughter",cursive!important;color:#9a8066!important}
.event-slot-copy strong{font-family:"Architects Daughter",cursive!important;color:#473b30!important}
.event-slot-number,.event-slot-copy small{color:#8a7663!important}

/* Chapter/page transition — decorative, never blocks interaction. */
.album-page-enter{animation:albumPageIn .58s cubic-bezier(.22,.72,.22,1) both}
@keyframes albumPageIn{
  0%{opacity:0;transform:perspective(1100px) rotateY(-4deg) translateX(13px);filter:brightness(.94)}
  100%{opacity:1;transform:perspective(1100px) rotateY(0) translateX(0);filter:brightness(1)}
}

@media (max-width:699px){
  #memoryCollectionPanel{margin-inline:-2px;padding:12px 5px 24px;border-radius:20px 20px 12px 12px}
  .collection-album-cover{padding:26px 18px 18px 30px}
  .collection-journal-stats{grid-template-columns:1fr 1fr}
  .collection-journal-first{grid-column:1/-1}
  .collection-journey-strip{grid-template-columns:1fr}
  .collection-journey-dates{justify-content:flex-start}
  #memoryCollectionPanel>.event-collections,
  #memoryCollectionPanel>.collection-latest,
  #memoryCollectionPanel>.collection-browser{margin:16px 4px;padding:18px 11px 21px}
  .event-album-index{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .event-album-index a{white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .album-page-enter{animation:none!important}
  .album-memory-polaroid,
  .event-collection-card.album-event-chapter{transition:none!important}
  .album-memory-polaroid:hover,
  .album-memory-polaroid:focus-visible,
  .event-collection-card.album-event-chapter:hover,
  .event-collection-card.album-event-chapter:focus-visible{transform:rotate(0)!important}
}


/* ============================================================
   COLLECTION ALBUM MOBILE HARDENING V212
   ============================================================ */

#memoryCollectionPanel,
.collection-album-cover,
.collection-journey-strip,
#memoryCollectionPanel > .event-collections,
#memoryCollectionPanel > .collection-latest,
#memoryCollectionPanel > .collection-browser,
.event-collection-screen,
.event-screen-header,
.event-memory-group,
.event-collection-card.album-event-chapter,
.album-memory-polaroid,
.event-slot-card{
  box-sizing:border-box;
  min-width:0;
}

#memoryCollectionPanel,
.event-collection-screen{
  max-width:100%;
  overflow-x:clip;
}

.collection-album-cover-copy,
.collection-journey-copy,
.collection-browser-heading,
.event-collection-card-identity,
.event-screen-header,
.event-group-heading > div,
.event-slot-copy{
  min-width:0;
}

.collection-album-cover h2,
.collection-album-cover-copy p,
.collection-journey-copy h3,
.collection-journey-copy p,
.event-collection-card strong,
.event-screen-header h1,
.event-screen-header p,
.event-group-heading h2,
.event-group-heading p,
.event-slot-copy strong,
.event-slot-copy small,
.album-memory-polaroid strong,
.album-memory-polaroid small{
  overflow-wrap:anywhere;
}

@media (max-width:699px){
  #memoryCollectionPanel{
    width:100%;
    margin-inline:0;
    padding:12px 6px 24px;
  }

  .collection-album-cover{
    width:100%;
    margin-inline:0;
    padding:25px 16px 18px 29px;
  }

  .collection-album-cover h2{
    font-size:clamp(1.9rem,10vw,2.75rem);
  }

  .collection-journal-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .collection-journal-stat{
    min-width:0;
  }

  .collection-journal-first{
    grid-column:1/-1;
  }

  .collection-journey-strip{
    width:auto;
    grid-template-columns:minmax(0,1fr);
    margin:12px 4px 24px;
    transform:none;
  }

  .collection-journey-dates{
    min-width:0;
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .journey-date-thread{
    flex:0 0 18px;
  }

  .collection-album-index,
  .event-album-index{
    display:flex;
    width:100%;
    max-width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding:3px 2px 7px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .collection-album-index::-webkit-scrollbar,
  .event-album-index::-webkit-scrollbar{
    display:none;
  }

  .collection-album-index a,
  .event-album-index a{
    flex:0 0 auto;
    max-width:86vw;
    white-space:nowrap;
    scroll-snap-align:start;
  }

  #memoryCollectionPanel > .event-collections,
  #memoryCollectionPanel > .collection-latest,
  #memoryCollectionPanel > .collection-browser{
    width:auto;
    margin:15px 4px;
    padding:18px 11px 20px;
    transform:none;
  }

  .found-list .album-memory-polaroid{
    transform:none;
  }

  .found-list .album-memory-polaroid:hover,
  .found-list .album-memory-polaroid:focus-visible{
    transform:translateY(-2px)!important;
  }

  .collection-browser-grid{
    width:100%;
    min-width:0;
    padding-inline:2px!important;
  }

  .event-collection-screen{
    width:100%;
    padding:
      max(12px,env(safe-area-inset-top))
      max(8px,env(safe-area-inset-right))
      max(32px,env(safe-area-inset-bottom))
      max(8px,env(safe-area-inset-left)) !important;
    background:linear-gradient(180deg,#f2e5cb,#ecdbba)!important;
  }

  .event-collection-screen::before{
    inset:8px 5px 18px;
  }

  .event-screen-header{
    width:auto;
    margin:2px 2px 16px!important;
    padding:18px 14px 21px!important;
  }

  .event-memory-group{
    width:auto;
    margin:15px 2px!important;
    padding:20px 11px 23px!important;
    transform:none!important;
  }

  .event-group-heading{
    min-width:0;
    gap:.65rem;
  }

  .event-slot-grid,
  .event-subcollection-slot-grid{
    min-width:0;
  }

  .event-slot-card{
    max-width:100%;
  }

  .album-event-bookmark{
    right:-4px;
    width:25px;
    height:43px;
  }
}

@media (max-width:520px){
  .collection-journal-stats{
    gap:5px;
  }

  .collection-journal-stat{
    padding-inline:7px;
  }

  .collection-journey-dates{
    gap:6px;
  }

  .event-collection-card.album-event-chapter{
    margin-inline:1px 5px;
    padding:16px 15px 16px 18px;
    transform:none;
  }

  .event-collection-card-top,
  .event-collection-meta{
    min-width:0;
    gap:.55rem;
  }

  .event-collection-card-top{
    align-items:flex-start;
  }

  .event-collection-percent{
    flex:0 0 auto;
  }

  .event-slot-grid:not(.has-subcollections),
  .event-community-grid,
  .event-bonus-grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }

  .event-slot-card{
    transform:none!important;
  }

  .event-slot-card::before{
    top:-6px;
  }
}

@media (max-width:380px){
  .collection-album-cover{
    padding-right:12px;
  }

  .collection-journal-stats{
    grid-template-columns:1fr;
  }

  .collection-journal-first{
    grid-column:auto;
  }

  .collection-journey-strip{
    padding:17px 12px 15px 18px;
  }

  .journey-date-thread{
    display:none;
  }

  .event-screen-header{
    padding-inline:11px!important;
  }

  .event-memory-group{
    padding-inline:9px!important;
  }

  .album-event-bookmark{
    right:-2px;
  }
}


/* ============================================================
   MEMORY CAPTION FLOW FIX V213
   ============================================================ */

/*
 * Captions can be much longer than the original one-line Polaroid note.
 * Keep them in normal document flow so the white Polaroid border grows with
 * the text instead of letting a second line overlap the photo.
 */
#memoryCaption{
  max-width:100%;
}

@media (max-width:420px){
  .polaroid-card{
    padding:
      .62rem
      .62rem
      .74rem;
  }

  .polaroid-card figcaption{
    margin-top:.5rem;
    padding-inline:.08rem;
    font-size:clamp(.78rem,4vw,.94rem);
    line-height:1.2;
  }
}