/* style pack: standard */
/* ============================================================
   Standard - the default profile skin. It carries no rules on purpose:
   the base card chrome in css/chronos/11-profile-modal.css IS the standard
   look, and .theme-standard / .frame-standard simply add nothing on top.
   The pack exists so the file catalog and the seeded Theme catalog agree.
   ============================================================ */

/* style pack: woven-elegance */
/* ============================================================
   Woven Elegance (Pro) - tailored black weave, gold thread.
   Sharp square frame, gradient gold borders, shimmer sweep,
   gold-gradient username.
   ============================================================ */
.profile-card.theme-woven-elegance {
  --accent: #c9a96e;
  --profile-frame: transparent;
  --profile-ring: #c9a96e;
  --profile-tile-bg: linear-gradient(180deg, rgba(201, 169, 110, 0.12), rgba(0, 0, 0, 0.30));
  --profile-tile-border: rgba(201, 169, 110, 0.32);
  --profile-hero-overlay:
    repeating-linear-gradient(45deg, rgba(201, 169, 110, 0.10) 0px, rgba(201, 169, 110, 0.10) 1px, transparent 1px, transparent 7px),
    linear-gradient(120deg, rgba(10, 8, 5, 0.78), rgba(201, 169, 110, 0.14));
  --profile-tab-accent: #c9a96e;
  border: 2px solid transparent;
  /* weave texture over near-black, wrapped in a woven-gold gradient frame */
  background:
    repeating-linear-gradient(45deg, rgba(201, 169, 110, 0.05) 0px, rgba(201, 169, 110, 0.05) 2px, transparent 2px, transparent 8px) padding-box,
    linear-gradient(180deg, #14100c 0%, #0a0806 100%) padding-box,
    linear-gradient(135deg, #f0dfae 0%, #8a6d3b 28%, #c9a96e 50%, #6d5528 74%, #e9d8a6 100%) border-box;

  /* v0.7.3.1: same layering contract as the founder pack - the card isolates so
     negative-z decor stays above this background but under every child, dialogs
     included. */
  isolation: isolate;
}
.profile-card.frame-woven-elegance .profile-avatar {
  border-radius: 4px; /* tailored square frame */
  border: 3px solid transparent;
  background:
    linear-gradient(145deg, #241c12, #0f0b06) padding-box,
    linear-gradient(135deg, #f0dfae, #8a6d3b 40%, #e9d8a6) border-box;
}
.profile-card.frame-woven-elegance .profile-avatar::before {
  content: "";
  position: absolute;
  inset: -4px;
  /* Behind the avatar: the shimmer sweeps the gilded frame edge, not the photo. */
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 240, 200, 0.55) 50%, transparent 68%);
  background-size: 250% 100%;
  animation: theme-shimmer 3.4s linear infinite;
  pointer-events: none;
}
.profile-card.theme-woven-elegance .profile-name {
  background: linear-gradient(100deg, #f5e6bd, #c9a96e 45%, #f0dfae);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Baroque frame: gilded corner scrolls (inline SVG flourishes) + a double
   inner hairline so the card reads as a picture frame. */
.profile-card.theme-woven-elegance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M4 48 C4 20 20 4 48 4 M9 48 C9 24 24 9 48 9 M4 30 C13 30 18 24 18 15' stroke='%23c9a96e' stroke-width='2' fill='none'/%3E%3Ccircle cx='18' cy='15' r='3.2' fill='%23e9d8a6'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cg transform='rotate(90 26 26)'%3E%3Cpath d='M4 48 C4 20 20 4 48 4 M9 48 C9 24 24 9 48 9 M4 30 C13 30 18 24 18 15' stroke='%23c9a96e' stroke-width='2' fill='none'/%3E%3Ccircle cx='18' cy='15' r='3.2' fill='%23e9d8a6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cg transform='rotate(-90 26 26)'%3E%3Cpath d='M4 48 C4 20 20 4 48 4 M9 48 C9 24 24 9 48 9 M4 30 C13 30 18 24 18 15' stroke='%23c9a96e' stroke-width='2' fill='none'/%3E%3Ccircle cx='18' cy='15' r='3.2' fill='%23e9d8a6'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cg transform='rotate(180 26 26)'%3E%3Cpath d='M4 48 C4 20 20 4 48 4 M9 48 C9 24 24 9 48 9 M4 30 C13 30 18 24 18 15' stroke='%23c9a96e' stroke-width='2' fill='none'/%3E%3Ccircle cx='18' cy='15' r='3.2' fill='%23e9d8a6'/%3E%3C/g%3E%3C/svg%3E");
  background-position: left 4px top 4px, right 4px top 4px, left 4px bottom 4px, right 4px bottom 4px;
}
.profile-card.theme-woven-elegance::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(201, 169, 110, 0.45);
  border-radius: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .profile-card.frame-woven-elegance .profile-avatar::before {
    animation: none;
  }
}

/* style pack: streak-180 */
/* ============================================================
   Persistence (180-day streak) - battle-worn crimson on navy.
   Beveled shield frame, crimson stripes, pulsing ember glow,
   red-edged stat tiles.
   ============================================================ */
.profile-card.theme-streak-180 {
  --accent: #e94560;
  --profile-frame: transparent;
  --profile-ring: #e94560;
  --profile-tile-bg: rgba(233, 69, 96, 0.10);
  --profile-tile-border: rgba(233, 69, 96, 0.26);
  --profile-hero-overlay:
    repeating-linear-gradient(-55deg, rgba(233, 69, 96, 0.16) 0px, rgba(233, 69, 96, 0.16) 14px, transparent 14px, transparent 36px),
    linear-gradient(120deg, rgba(10, 14, 30, 0.72), rgba(233, 69, 96, 0.16));
  --profile-tab-accent: #e94560;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #1a1a2e 0%, #16213e 55%, #0f1626 100%) padding-box,
    linear-gradient(160deg, #e94560 0%, #57263a 40%, #16213e 70%, #e94560 100%) border-box;

  /* v0.7.3.1: same layering contract as the founder pack - the card isolates so
     negative-z decor stays above this background but under every child, dialogs
     included. */
  isolation: isolate;
}
.profile-card.frame-streak-180 .profile-avatar {
  border-radius: 18px 4px 18px 4px; /* beveled shield cut */
  border: 3px solid transparent;
  background:
    linear-gradient(145deg, #241826, #120a14) padding-box,
    linear-gradient(135deg, #ff7a92, #e94560 45%, #7a1d31) border-box;
  animation: theme-pulse-red 2.8s ease-in-out infinite;
}
.profile-card.theme-streak-180 .profile-name {
  color: #ffe3e8;
  text-shadow: 0 0 12px rgba(233, 69, 96, 0.55);
}
.profile-card.theme-streak-180 .profile-stat {
  border-left: 3px solid rgba(233, 69, 96, 0.65);
}
/* Fortress frame: battlement merlons cut the hero's bottom edge, forged iron
   corner brackets with crimson rivets pin all four corners of the card. */
.profile-card.theme-streak-180 .profile-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 14px;
  background: #232c49;
  clip-path: polygon(0 100%, 0 45%, 6% 45%, 6% 0, 14% 0, 14% 45%, 20% 45%, 20% 0, 28% 0, 28% 45%, 34% 45%, 34% 0, 42% 0, 42% 45%, 48% 45%, 48% 0, 56% 0, 56% 45%, 62% 45%, 62% 0, 70% 0, 70% 45%, 76% 45%, 76% 0, 84% 0, 84% 45%, 90% 45%, 90% 0, 98% 0, 98% 45%, 100% 45%, 100% 100%);
  pointer-events: none;
}
.profile-card.theme-streak-180::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M3 34 V10 Q3 3 10 3 H34' fill='none' stroke='%233d4763' stroke-width='5'/%3E%3Ccircle cx='8' cy='8' r='2.4' fill='%23e94560'/%3E%3Ccircle cx='24' cy='4.5' r='2' fill='%23e94560'/%3E%3Ccircle cx='4.5' cy='24' r='2' fill='%23e94560'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg transform='rotate(90 18 18)'%3E%3Cpath d='M3 34 V10 Q3 3 10 3 H34' fill='none' stroke='%233d4763' stroke-width='5'/%3E%3Ccircle cx='8' cy='8' r='2.4' fill='%23e94560'/%3E%3Ccircle cx='24' cy='4.5' r='2' fill='%23e94560'/%3E%3Ccircle cx='4.5' cy='24' r='2' fill='%23e94560'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg transform='rotate(-90 18 18)'%3E%3Cpath d='M3 34 V10 Q3 3 10 3 H34' fill='none' stroke='%233d4763' stroke-width='5'/%3E%3Ccircle cx='8' cy='8' r='2.4' fill='%23e94560'/%3E%3Ccircle cx='24' cy='4.5' r='2' fill='%23e94560'/%3E%3Ccircle cx='4.5' cy='24' r='2' fill='%23e94560'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg transform='rotate(180 18 18)'%3E%3Cpath d='M3 34 V10 Q3 3 10 3 H34' fill='none' stroke='%233d4763' stroke-width='5'/%3E%3Ccircle cx='8' cy='8' r='2.4' fill='%23e94560'/%3E%3Ccircle cx='24' cy='4.5' r='2' fill='%23e94560'/%3E%3Ccircle cx='4.5' cy='24' r='2' fill='%23e94560'/%3E%3C/g%3E%3C/svg%3E");
  background-position: left 3px top 3px, right 3px top 3px, left 3px bottom 3px, right 3px bottom 3px;
}

@media (prefers-reduced-motion: reduce) {
  .profile-card.frame-streak-180 .profile-avatar {
    animation: none;
  }
}

/* style pack: streak-365 */
/* ============================================================
   Year of Focus (365-day streak) - royal gold medallion.
   Circular frame, rotating golden halo, ray-burst hero,
   soft gold name.
   ============================================================ */
.profile-card.theme-streak-365 {
  --accent: #ffd700;
  --profile-frame: transparent;
  --profile-ring: #ffd700;
  --profile-tile-bg: rgba(255, 215, 0, 0.08);
  --profile-tile-border: rgba(255, 215, 0, 0.26);
  --profile-hero-overlay:
    repeating-conic-gradient(from 200deg at 85% -20%, rgba(255, 215, 0, 0.12) 0deg 6deg, transparent 6deg 14deg),
    linear-gradient(120deg, rgba(15, 12, 41, 0.60), rgba(255, 215, 0, 0.12));
  --profile-tab-accent: #ffd700;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #0f0c29 0%, #24204a 55%, #12102a 100%) padding-box,
    linear-gradient(135deg, #fff3b0 0%, #b8860b 35%, #ffd700 55%, #8a6d1b 80%, #ffe066 100%) border-box;

  /* v0.7.3.1: same layering contract as the founder pack - the card isolates so
     negative-z decor stays above this background but under every child, dialogs
     included. */
  isolation: isolate;
}
.profile-card.frame-streak-365 .profile-avatar {
  border-radius: 50%; /* medallion */
  border: 3px solid transparent;
  background:
    linear-gradient(145deg, #2a2347, #14102a) padding-box,
    conic-gradient(#ffe066, #b8860b, #fff3b0, #ffd700, #ffe066) border-box;
}
.profile-card.frame-streak-365 .profile-avatar::before {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 215, 0, 0.55) 40deg, transparent 90deg, transparent 180deg, rgba(255, 215, 0, 0.35) 230deg, transparent 280deg);
  filter: blur(4px);
  animation: theme-spin 7s linear infinite;
  pointer-events: none;
}
.profile-card.theme-streak-365 .profile-name { color: #ffeeb0; }
/* Temple frame: fluted marble-gold columns run the full card height along both
   edges (repeating-gradient flutes, gold capitals), a pediment crowns the hero. */
.profile-card.theme-streak-365::before,
.profile-card.theme-streak-365::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15px;
  /* v0.7.3.1: was z-index 3 and bled over dialogs opened inside the card. */
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, #f0d492 0px, #f0d492 2px, #96762e 2px, #96762e 5px);
  border-top: 6px solid #d4af37;
  border-bottom: 6px solid #d4af37;
  opacity: 0.85;
}
.profile-card.theme-streak-365::before { left: 5px; }
.profile-card.theme-streak-365::after { right: 5px; }
.profile-card.theme-streak-365 .profile-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46%;
  height: 18px;
  background: linear-gradient(180deg, #e8c87e, #b8912f);
  clip-path: polygon(10% 100%, 50% 0, 90% 100%);
  opacity: 0.92;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .profile-card.frame-streak-365 .profile-avatar::before {
    animation: none;
  }
}

/* style pack: amethyst */
/* ============================================================
   Amethyst - violet crystal. Facet-cut frame, gem gradients,
   prism hero, faceted tiles.
   ============================================================ */
.profile-card.theme-amethyst {
  --accent: #bf7fff;
  --profile-frame: transparent;
  --profile-ring: #bf7fff;
  --profile-tile-bg: linear-gradient(160deg, rgba(191, 127, 255, 0.18), rgba(26, 8, 48, 0.45));
  --profile-tile-border: rgba(191, 127, 255, 0.34);
  /* v0.4.66.6: the top-right druse moved here from the card ::before - the hero
     overlay paints above the hero background but below the streak text, so the
     crystal stays visible while never covering content. */
  --profile-hero-overlay:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='64'%3E%3Cg transform='rotate(180 52 32)'%3E%3Cpolygon points='0,64 0,20 12,38 22,6 36,44 48,24 56,64' fill='%233d1857'/%3E%3Cpolygon points='14,64 26,40 36,64' fill='%23a55ee0'/%3E%3C/g%3E%3C/svg%3E") right 0 top 0 no-repeat,
    conic-gradient(from 220deg at 30% 15%, rgba(191, 127, 255, 0.24), rgba(80, 30, 140, 0.20) 25%, rgba(26, 8, 48, 0.42) 50%, rgba(150, 80, 255, 0.18) 75%, rgba(191, 127, 255, 0.24)),
    linear-gradient(120deg, rgba(26, 8, 48, 0.35), transparent);
  --profile-tab-accent: #bf7fff;
  border: 2px solid transparent;
  /* v0.4.66.6: own stacking context so the crystal ::before can sit at z-index:-1 -
     above the card background gradients but BELOW all content, always. */
  isolation: isolate;
  background:
    /* v0.7.4: cut-gem field - a seamless triangular facet lattice (three repeating
       gradients, no tile, no seams) with sparse white glints and rarer gold flecks
       per the reference. Reads as polished crystal, stays quieter than any content. */
    radial-gradient(circle 1.2px at 24px 18px, rgba(255, 255, 255, 0.4) 99%, transparent 100%) padding-box,
    radial-gradient(circle 1.4px at 96px 74px, rgba(212, 169, 78, 0.5) 99%, transparent 100%) padding-box,
    repeating-linear-gradient(60deg, rgba(226, 199, 255, 0.05) 0 1px, transparent 1px 27px) padding-box,
    repeating-linear-gradient(-60deg, rgba(226, 199, 255, 0.05) 0 1px, transparent 1px 27px) padding-box,
    repeating-linear-gradient(0deg, rgba(16, 4, 28, 0.5) 0 1px, transparent 1px 27px) padding-box,
    radial-gradient(ellipse at 50% 30%, rgba(191, 127, 255, 0.16), transparent 62%) padding-box,
    linear-gradient(180deg, #2a1040 0%, #1a0830 55%, #10041f 100%) padding-box,
    linear-gradient(150deg, #e2c7ff 0%, #7b2d8b 30%, #bf7fff 55%, #4a0e6b 80%, #d8b4fe 100%) border-box;
  background-size: 130px 96px, 210px 160px, auto, auto, auto, auto, auto, auto;
}
.profile-card.frame-amethyst .profile-avatar {
  border-radius: 24px 6px 24px 6px; /* crystal facet cut */
  border: 3px solid transparent;
  background:
    linear-gradient(145deg, #31164f, #180830) padding-box,
    linear-gradient(135deg, #e2c7ff, #7b2d8b 40%, #bf7fff 70%, #d8b4fe) border-box;
}
.profile-card.theme-amethyst .profile-name {
  color: #ecdcff;
  text-shadow: 0 0 12px rgba(191, 127, 255, 0.5);
}
/* Geode frame: a crystal druse grows out of the bottom-left corner, the hero's
   bottom edge breaks into a jagged crystalline fracture. v0.4.66.6: the druse sits
   at z-index:-1 inside the card's own stacking context (isolation above), so it is
   ALWAYS behind content - it used to overlay the inventory tiles at z-index:3. The
   former top-right druse lives in --profile-hero-overlay now. */
.profile-card.theme-amethyst::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='78'%3E%3Cpolygon points='0,78 0,26 14,46 24,8 40,52 52,28 60,78' fill='%233d1857'/%3E%3Cpolygon points='0,78 0,48 10,56 20,32 32,64 42,78' fill='%23672b96'/%3E%3Cpolygon points='18,78 28,52 38,78' fill='%23bf7fff'/%3E%3C/svg%3E");
  background-position: left 0 bottom 0;
}
.profile-card.theme-amethyst .profile-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 12px;
  background: #1e0b36;
  clip-path: polygon(0 100%, 0 45%, 7% 70%, 15% 15%, 24% 80%, 32% 30%, 41% 90%, 50% 20%, 59% 75%, 68% 35%, 77% 88%, 85% 25%, 93% 65%, 100% 40%, 100% 100%);
  pointer-events: none;
}

/* style pack: ember */
/* ============================================================
   Ember - smouldering fire. Soft-flame frame, flicker glow,
   rising sparks over a heat-haze hero.
   ============================================================ */
.profile-card.theme-ember {
  --accent: #ff8c42;
  --profile-frame: transparent;
  --profile-ring: #ff8c42;
  --profile-tile-bg: rgba(255, 140, 66, 0.11);
  --profile-tile-border: rgba(255, 140, 66, 0.30);
  --profile-hero-overlay:
    radial-gradient(circle at 18% 82%, rgba(255, 170, 70, 0.45) 0px 2px, transparent 4px),
    radial-gradient(circle at 42% 64%, rgba(255, 120, 40, 0.40) 0px 2px, transparent 4px),
    radial-gradient(circle at 63% 88%, rgba(255, 190, 90, 0.40) 0px 1.5px, transparent 3px),
    radial-gradient(circle at 82% 58%, rgba(255, 140, 66, 0.35) 0px 2px, transparent 4px),
    linear-gradient(0deg, rgba(60, 15, 5, 0.62), rgba(255, 107, 53, 0.16));
  --profile-tab-accent: #ff8c42;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #2b0f08 0%, #1c0a05 55%, #120503 100%) padding-box,
    linear-gradient(15deg, #7d1c0c 0%, #ff6b35 35%, #ffc46b 55%, #c0392b 78%, #ff8c42 100%) border-box;

  /* v0.7.3.1: same layering contract as the founder pack - the card isolates so
     negative-z decor stays above this background but under every child, dialogs
     included. */
  isolation: isolate;
}
.profile-card.frame-ember .profile-avatar {
  border-radius: 50% 50% 38% 38% / 55% 55% 40% 40%; /* soft flame silhouette */
  border: 3px solid transparent;
  background:
    linear-gradient(145deg, #38150a, #1a0803) padding-box,
    linear-gradient(0deg, #7d1c0c, #ff6b35 50%, #ffc46b) border-box;
  animation: theme-flicker 2.4s ease-in-out infinite;
}
.profile-card.theme-ember .profile-name {
  color: #ffe0c2;
  text-shadow: 0 0 12px rgba(255, 120, 40, 0.55);
}
/* Forge frame: the hero's bottom edge burns away into a charred tear - the
   gradient puts glowing embers right on the ripped silhouette; drifting sparks
   flicker in the top corner. */
.profile-card.theme-ember .profile-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 15px;
  background: linear-gradient(180deg, #ffc46b 0px, #ff6b35 2px, #7d1c0c 5px, #1c0a05 9px, #160804 100%);
  clip-path: polygon(0 100%, 0 55%, 5% 20%, 9% 65%, 14% 10%, 19% 70%, 24% 30%, 29% 85%, 34% 15%, 39% 60%, 45% 5%, 50% 75%, 55% 25%, 60% 90%, 65% 20%, 70% 65%, 75% 10%, 80% 80%, 85% 35%, 90% 70%, 95% 15%, 100% 55%, 100% 100%);
  pointer-events: none;
}
.profile-card.theme-ember::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 18px;
  width: 4px;
  height: 4px;
  z-index: -1;
  border-radius: 50%;
  background: #ffc46b;
  box-shadow:
    46px 10px 0 -1px #ff8c42,
    108px 2px 0 0 #ffc46b,
    170px 14px 0 -1px #ff8c42,
    228px 6px 0 -2px #ffdf9e,
    282px 12px 0 -1px #ff8c42;
  animation: theme-sparks 2.1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes theme-sparks {
  0%, 100% { opacity: 0.45; }
  38%      { opacity: 1; }
  62%      { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-card.frame-ember .profile-avatar,
  .profile-card.theme-ember::before {
    animation: none;
  }
}

/* style pack: chronometer */
/* ============================================================
   Wave 2 base palettes (ornate frame layers land per-theme on top).
   ============================================================ */

/* Chronometer (Pro) - brass clockwork on dark leather. */
.profile-card.theme-chronometer {
  --accent: #d6a854;
  --profile-frame: transparent;
  --profile-ring: #d6a854;
  --profile-tile-bg: rgba(214, 168, 84, 0.10);
  --profile-tile-border: rgba(214, 168, 84, 0.32);
  --profile-hero-overlay: linear-gradient(120deg, rgba(23, 16, 8, 0.72), rgba(214, 168, 84, 0.16));
  --profile-tab-accent: #d6a854;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #1c1409 0%, #120c05 100%) padding-box,
    linear-gradient(135deg, #f0d492 0%, #8c6a2f 30%, #d6a854 55%, #6f5220 80%, #e8c87e 100%) border-box;
  /* v0.7.3.1: same layering contract as the founder pack - the card isolates so the
     negative-z decor stays above this background but under every child, dialogs included. */
  isolation: isolate;
}
.profile-card.theme-chronometer .profile-name { color: #f3dfae; }
/* Clockwork frame: the avatar sits in a brass watch bezel with minute ticks and a
   sweeping second hand; gears rest in the lower corners; a dashed brass rail runs
   the card's inner edge. */
.profile-card.frame-chronometer .profile-avatar {
  border-radius: 50%;
  border: 3px solid transparent;
  background:
    linear-gradient(145deg, #2a1f0e, #171008) padding-box,
    conic-gradient(#f0d492, #8c6a2f, #e8c87e, #d6a854, #f0d492) border-box;
  outline: 2px dashed rgba(214, 168, 84, 0.55);
  outline-offset: 3px;
}
.profile-card.frame-chronometer .profile-avatar::before {
  content: "";
  position: absolute;
  inset: -9px;
  /* Behind the avatar box (like the 365 halo): the sweep hand shows only in the
     bezel margin and never crosses the user's photo. */
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(240, 212, 146, 0.85) 0deg 8deg, transparent 8deg 360deg);
  animation: theme-spin 12s linear infinite;
  pointer-events: none;
}
.profile-card.theme-chronometer::before {
  content: "";
  position: absolute;
  inset: 0;
  /* v0.7.3.1: was z-index 3 and bled over dialogs opened inside the card. */
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Ccircle cx='23' cy='23' r='13' fill='none' stroke='%238c6a2f' stroke-width='5' stroke-dasharray='4.5 3.5'/%3E%3Ccircle cx='23' cy='23' r='5' fill='%233a2a10'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Ccircle cx='17' cy='17' r='9.5' fill='none' stroke='%23705526' stroke-width='4' stroke-dasharray='3.4 2.8'/%3E%3Ccircle cx='17' cy='17' r='3.6' fill='%233a2a10'/%3E%3C/svg%3E");
  background-position: right 10px bottom 10px, right 46px bottom 34px;
  opacity: 0.9;
}
.profile-card.theme-chronometer::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  pointer-events: none;
  border: 1px dashed rgba(214, 168, 84, 0.5);
  border-radius: 11px;
}

@media (prefers-reduced-motion: reduce) {
  .profile-card.frame-chronometer .profile-avatar::before {
    animation: none;
  }
}

/* style pack: star-chart */
/* Star Chart (streak 100) - silver constellations on midnight navy. */
.profile-card.theme-star-chart {
  --accent: #cdd9f0;
  --profile-frame: transparent;
  --profile-ring: #cdd9f0;
  --profile-tile-bg: rgba(141, 166, 214, 0.10);
  --profile-tile-border: rgba(141, 166, 214, 0.30);
  --profile-hero-overlay: linear-gradient(120deg, rgba(10, 16, 36, 0.62), rgba(141, 166, 214, 0.14));
  --profile-tab-accent: #cdd9f0;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #0a1024 0%, #0e1730 55%, #080d1e 100%) padding-box,
    linear-gradient(150deg, #e8eefb 0%, #4a5f8a 35%, #cdd9f0 60%, #35476b 85%, #e8eefb 100%) border-box;

  /* v0.7.3.1: same layering contract as the founder pack - the card isolates so
     negative-z decor stays above this background but under every child, dialogs
     included. */
  isolation: isolate;
}
.profile-card.theme-star-chart .profile-name { color: #e8eefb; }
/* Observatory frame: a constellation threads across the hero, a crescent moon and
   star dust sit low on the card, the avatar rides a dashed silver orbit. */
.profile-card.frame-star-chart .profile-avatar {
  border-radius: 50%;
  outline: 1px dashed rgba(205, 217, 240, 0.6);
  outline-offset: 5px;
}
.profile-card.theme-star-chart .profile-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right 18px top 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='70'%3E%3Cpath d='M8 52 58 16 108 44 158 12 214 38' stroke='rgba(141,166,214,0.5)' stroke-width='1' fill='none'/%3E%3Ccircle cx='8' cy='52' r='2.4' fill='%23e8eefb'/%3E%3Ccircle cx='58' cy='16' r='1.7' fill='%238fa5cf'/%3E%3Ccircle cx='108' cy='44' r='2.6' fill='%23e8eefb'/%3E%3Ccircle cx='158' cy='12' r='1.7' fill='%238fa5cf'/%3E%3Ccircle cx='214' cy='38' r='2.2' fill='%23cdd9f0'/%3E%3C/svg%3E");
  opacity: 0.9;
}
.profile-card.theme-star-chart::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right 14px bottom 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='22' cy='22' r='15' fill='none' stroke='%238fa5cf' stroke-width='1.4'/%3E%3Cpath d='M22 7 A15 15 0 0 1 22 37 A11 15 0 0 0 22 7' fill='%23cdd9f0'/%3E%3C/svg%3E");
  opacity: 0.85;
}
.profile-card.theme-star-chart::after {
  content: "";
  position: absolute;
  top: 62%;
  left: 8%;
  width: 3px;
  height: 3px;
  z-index: -1;
  border-radius: 50%;
  background: #e8eefb;
  box-shadow:
    34px 30px 0 -1px #8fa5cf,
    88px 12px 0 0 #cdd9f0,
    150px 44px 0 -1px #8fa5cf,
    210px 20px 0 -1px #e8eefb,
    262px 52px 0 -2px #8fa5cf,
    318px 30px 0 -1px #cdd9f0;
  pointer-events: none;
  opacity: 0.8;
}

/* style pack: synthwave */
/* Synthwave - neon tubes over a retro grid. */
.profile-card.theme-synthwave {
  --accent: #ff2ea6;
  --profile-frame: transparent;
  --profile-ring: #2ee6ff;
  --profile-tile-bg: rgba(255, 46, 166, 0.10);
  --profile-tile-border: rgba(46, 230, 255, 0.30);
  --profile-hero-overlay: linear-gradient(180deg, rgba(13, 6, 24, 0.35), rgba(255, 46, 166, 0.18));
  --profile-tab-accent: #2ee6ff;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #150a26 0%, #0d0618 100%) padding-box,
    linear-gradient(135deg, #ff2ea6 0%, #7a1d6b 30%, #2ee6ff 60%, #145a80 85%, #ff2ea6 100%) border-box;

  /* v0.7.3.1: same layering contract as the founder pack - the card isolates so
     negative-z decor stays above this background but under every child, dialogs
     included. */
  isolation: isolate;
}
.profile-card.theme-synthwave .profile-name {
  color: #ffd7ef;
  text-shadow: 0 0 12px rgba(255, 46, 166, 0.6);
}
/* Arcade frame: a glowing cyan neon tube runs the inner edge, the hero floor turns
   into a perspective grid with a striped retro sun, the avatar goes sharp-cornered
   neon. */
.profile-card.frame-synthwave .profile-avatar {
  border-radius: 6px;
  border: 2px solid #2ee6ff;
  box-shadow: 0 0 14px rgba(46, 230, 255, 0.55), 0 6px 18px rgba(0, 0, 0, 0.5);
}
.profile-card.theme-synthwave::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(46, 230, 255, 0.75);
  border-radius: 11px;
  box-shadow: 0 0 10px rgba(46, 230, 255, 0.4), inset 0 0 10px rgba(255, 46, 166, 0.2);
}
.profile-card.theme-synthwave .profile-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44%;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='17' fill='%23ff9d5c'/%3E%3Crect x='0' y='22' width='40' height='2.6' fill='%230d0618'/%3E%3Crect x='0' y='28' width='40' height='3.4' fill='%230d0618'/%3E%3Crect x='0' y='35' width='40' height='4' fill='%230d0618'/%3E%3C/svg%3E") right 22px top -8px / 40px 40px no-repeat,
    repeating-linear-gradient(0deg, rgba(255, 46, 166, 0.45) 0px, rgba(255, 46, 166, 0.45) 1px, transparent 1px, transparent 11px),
    repeating-linear-gradient(90deg, rgba(255, 46, 166, 0.3) 0px, rgba(255, 46, 166, 0.3) 1px, transparent 1px, transparent 26px);
}

/* style pack: grimoire */
/* Grimoire - the one LIGHT card: aged parchment + wax. Dark ink text overrides
   keep every sub-element legible on the light surface. */
.profile-card.theme-grimoire {
  --accent: #7a5e2c;
  --profile-frame: transparent;
  --profile-ring: #7a5e2c;
  --profile-tile-bg: rgba(122, 94, 44, 0.10);
  --profile-tile-border: rgba(122, 94, 44, 0.35);
  --profile-hero-overlay: linear-gradient(120deg, rgba(122, 94, 44, 0.28), rgba(233, 219, 182, 0.20));
  --profile-tab-accent: #a32d2d;
  border: 2px solid transparent;
  color: #4a3a1a;
  background:
    /* v0.7.4: crumpled-paper feel per the reference - fractal grain over the
       parchment plus two soft diagonal crease shadows. */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.35 0 0 0 0 0.19 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E") padding-box,
    linear-gradient(112deg, transparent 38%, rgba(93, 69, 32, 0.07) 47%, transparent 56%, transparent 74%, rgba(93, 69, 32, 0.05) 82%, transparent 90%) padding-box,
    linear-gradient(23deg, transparent 30%, rgba(255, 252, 240, 0.35) 40%, transparent 49%) padding-box,
    linear-gradient(180deg, #efe3c2 0%, #e2d2a8 100%) padding-box,
    linear-gradient(135deg, #b39b66 0%, #7a5e2c 40%, #caa96a 70%, #5d4520 100%) border-box;

  /* v0.7.3.1: same layering contract as the founder pack - the card isolates so
     negative-z decor stays above this background but under every child, dialogs
     included. */
  isolation: isolate;
}
.profile-card.theme-grimoire .profile-name,
.profile-card.theme-grimoire .shop-preview-name,
.profile-card.theme-grimoire .profile-stat-value,
.profile-card.theme-grimoire .pet-card-stage,
.profile-card.theme-grimoire .hero-streak-count,
.profile-card.theme-grimoire .hero-streak-word,
.profile-card.theme-grimoire .detail-title { color: #3c2e12; text-shadow: none; }
.profile-card.theme-grimoire .hero-streak-word { color: #6d5836; }
.profile-card.theme-grimoire .profile-rank { color: #a32d2d; }
.profile-card.theme-grimoire .profile-since,
.profile-card.theme-grimoire .profile-stat-label,
.profile-card.theme-grimoire .profile-inventory-title,
.profile-card.theme-grimoire .profile-section-title,
.profile-card.theme-grimoire .profile-section-count,
.profile-card.theme-grimoire .pet-card-title,
.profile-card.theme-grimoire .profile-tab { color: #6d5836; }
.profile-card.theme-grimoire .profile-tab.active { color: #3c2e12; }
.profile-card.theme-grimoire .artifact-name,
.profile-card.theme-grimoire .drop-name { color: #4a3a1a; }
.profile-card.theme-grimoire .profile-stat { text-shadow: none; }
/* Parchment frame: a double ink rule lines the page, an ink flourish crosses the
   hero, a wax seal stamps the lower corner, the hero tears off in soft scallops. */
.profile-card.frame-grimoire .profile-avatar {
  border-radius: 3px;
  border: 2px solid #7a5e2c;
  background: #f5ecd2;
  box-shadow: 0 4px 12px rgba(93, 69, 32, 0.35);
}
.profile-card.frame-grimoire .profile-avatar-initial { color: #5d4520; text-shadow: none; }
/* Postage-stamp inner frame per the reference: a dashed ink rule, and the outer
   perforation row lives on ::before as punched dots along the top and bottom. */
.profile-card.theme-grimoire::after {
  content: "";
  position: absolute;
  inset: 11px;
  z-index: -1;
  pointer-events: none;
  border: 2px dashed rgba(74, 58, 26, 0.55);
  border-radius: 4px;
}
.profile-card.theme-grimoire::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat, no-repeat, repeat-x, repeat-x;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='44'%3E%3Cpath d='M6 32 C28 8 44 38 62 16 C70 8 84 12 102 7' stroke='%235d4520' stroke-width='2' fill='none'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg transform='rotate(-14 28 28)' stroke='%23a32d2d' fill='none'%3E%3Ccircle cx='28' cy='28' r='23' stroke-width='2.2' stroke-dasharray='5 2.4'/%3E%3Ccircle cx='28' cy='28' r='16' stroke-width='1.3'/%3E%3Cpath d='M17 26 H39 M17 31 H39' stroke-width='1.6' stroke-dasharray='3.5 1.8'/%3E%3C/g%3E%3Cg fill='%23a32d2d'%3E%3Ccircle cx='14' cy='14' r='0.9'/%3E%3Ccircle cx='44' cy='12' r='0.7'/%3E%3Ccircle cx='47' cy='40' r='0.9' opacity='0.7'/%3E%3Ccircle cx='10' cy='42' r='0.7' opacity='0.7'/%3E%3Ccircle cx='30' cy='47' r='0.8' opacity='0.6'/%3E%3Ccircle cx='24' cy='9' r='0.6' opacity='0.6'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle 3px at 9px 3px, rgba(61, 46, 18, 0.38) 97%, transparent),
    radial-gradient(circle 3px at 9px 3px, rgba(61, 46, 18, 0.38) 97%, transparent);
  background-position: right 46px top 14px, right 16px bottom 14px, left 4px top 3px, left 4px bottom 3px;
  background-size: auto, auto, 18px 6px, 18px 6px;
  opacity: 0.92;
}
.profile-card.theme-grimoire .profile-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 10px;
  background: #ecdfbc;
  clip-path: polygon(0 100%, 0 30%, 5% 75%, 11% 25%, 18% 70%, 25% 30%, 33% 80%, 41% 35%, 49% 72%, 57% 28%, 65% 78%, 73% 32%, 81% 70%, 89% 26%, 95% 66%, 100% 35%, 100% 100%);
  pointer-events: none;
}

/* v0.4.66.6: grimoire is the ONE light card, but the base profile chrome assumes a
   dark card - white-alpha borders, smoke chips, lavender ink. Everything interactive
   or secondary gets re-inked for parchment here. */

/* Opaque parchment hero: the base hero gradient stayed dark while the streak text
   above it was re-inked dark - now the surface matches the ink. */
.profile-card.theme-grimoire .profile-hero {
  background:
    radial-gradient(circle at 80% 20%, rgba(122, 94, 44, 0.28), transparent 60%),
    linear-gradient(135deg, #e7d7ae 0%, #d9c491 100%);
  border-bottom-color: rgba(122, 94, 44, 0.45);
}
/* A custom uploaded background (inline style) wins over the rule above and brings
   the dark scrim with it - flip the streak ink back to white in that case. */
.profile-card.theme-grimoire .profile-hero-scrim ~ .hero-streak .hero-streak-count {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 6px rgba(0, 0, 0, 0.5);
}
.profile-card.theme-grimoire .profile-hero-scrim ~ .hero-streak .hero-streak-word {
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Buttons and chips: ink-on-parchment instead of smoke-on-dark. */
.profile-card.theme-grimoire .profile-close,
.profile-card.theme-grimoire .profile-hero-edit-btn,
.profile-card.theme-grimoire .profile-hero-share-btn {
  background: rgba(122, 94, 44, 0.14);
  border-color: rgba(122, 94, 44, 0.45);
  color: #3c2e12;
}
.profile-card.theme-grimoire .profile-close:hover,
.profile-card.theme-grimoire .profile-hero-edit-btn:hover,
.profile-card.theme-grimoire .profile-hero-share-btn:hover {
  background: rgba(122, 94, 44, 0.28);
  color: #1f1608;
}
.profile-card.theme-grimoire .profile-inventory-btn {
  background: rgba(122, 94, 44, 0.16);
  border-color: rgba(122, 94, 44, 0.45);
  color: #3c2e12;
}
.profile-card.theme-grimoire .profile-inventory-btn:hover {
  background: rgba(122, 94, 44, 0.30);
}
.profile-card.theme-grimoire .pet-customize {
  background: rgba(122, 94, 44, 0.10);
  border-color: rgba(122, 94, 44, 0.35);
  color: #6d5836;
}
.profile-card.theme-grimoire .pet-action-btn { border-color: rgba(122, 94, 44, 0.35); }
.profile-card.theme-grimoire .profile-avatar-edit { border-color: #e2d2a8; }
.profile-card.theme-grimoire .profile-avatar-clear {
  background: rgba(245, 236, 210, 0.92);
  border-color: rgba(122, 94, 44, 0.45);
}

/* Pet card panel + expedition strings (light lavender/amber vanished on parchment). */
.profile-card.theme-grimoire .profile-pet-card {
  background: rgba(122, 94, 44, 0.08);
  border-color: rgba(122, 94, 44, 0.30);
}
.profile-card.theme-grimoire .profile-pet-card.is-unlocked {
  border-color: rgba(122, 94, 44, 0.45);
}
.profile-card.theme-grimoire .pet-card-art {
  background: rgba(122, 94, 44, 0.12);
  border-color: rgba(122, 94, 44, 0.25);
}
.profile-card.theme-grimoire .pet-card-locked-text,
.profile-card.theme-grimoire .pet-card-stage-away,
.profile-card.theme-grimoire .pet-evo-label { color: #6d5836; }
.profile-card.theme-grimoire .pet-card-stage-injured { color: #a32d2d; }
.profile-card.theme-grimoire .pet-expedition-countdown {
  color: #6d5836;
  border-color: rgba(122, 94, 44, 0.45);
}
.profile-card.theme-grimoire .pet-expedition-result { color: #7a4a10; }
.profile-card.theme-grimoire .pet-expedition-result-injured,
.profile-card.theme-grimoire .pet-expedition-result-injured span { color: #a32d2d; }

/* Badges, hints, errors, empty state. */
.profile-card.theme-grimoire .tier-badge-free {
  background: rgba(122, 94, 44, 0.14);
  border-color: rgba(122, 94, 44, 0.35);
  color: #6d5836;
}
.profile-card.theme-grimoire .profile-showcase-hint { color: #6d5836; }
.profile-card.theme-grimoire .profile-empty {
  color: #6d5836;
  background: rgba(122, 94, 44, 0.06);
  border-color: rgba(122, 94, 44, 0.40);
}
.profile-card.theme-grimoire .profile-empty strong { color: #a32d2d; }
.profile-card.theme-grimoire .profile-img-error,
.profile-card.theme-grimoire .profile-img-error-avatar {
  color: #a32d2d;
  background: rgba(163, 45, 45, 0.08);
  border-color: rgba(163, 45, 45, 0.35);
}

/* Artifact tiles: a solid sepia wash instead of the white-to-dark smoke gradient;
   darken the LIGHT tier colours (common, rare gold) that faded into the page. */
.profile-card.theme-grimoire .artifact-tile {
  background: rgba(122, 94, 44, 0.08);
}
.profile-card.theme-grimoire .artifact-tile.tier-common { border-color: #8a8f98; }
.profile-card.theme-grimoire .artifact-tile.tier-rare { border-color: #b8860b; }
.profile-card.theme-grimoire .artifact-tile-pinned { outline-color: rgba(163, 45, 45, 0.7); }

/* Avatar-initial safety: grimoire STYLE worn with a foreign (dark) frame keeps that
   frame's dark avatar box - the parchment-brown --accent initial needs light ink there. */
.profile-card.theme-grimoire:not(.frame-grimoire) .profile-avatar-initial { color: #f5ecd2; }

/* Public share page (/u/username): its extra text was hardcoded white. */
.profile-card.theme-grimoire .pubprofile-pet-stage { color: #3c2e12; }
.profile-card.theme-grimoire .pubprofile-pet-xp { color: #6d5836; }
.profile-card.theme-grimoire .pubprofile-mark { color: rgba(74, 58, 26, 0.55); }
.profile-card.theme-grimoire .pubprofile-artifact { background: rgba(122, 94, 44, 0.10); }
.profile-card.theme-grimoire .pubprofile-artifact.tier-common { --art-tier: #8a8f98; }
.profile-card.theme-grimoire .pubprofile-artifact.tier-rare { --art-tier: #b8860b; }

/* style pack: abyss */
/* Abyss - deep-sea bioluminescence. */
.profile-card.theme-abyss {
  --accent: #5dcaa5;
  --profile-frame: transparent;
  --profile-ring: #5dcaa5;
  --profile-tile-bg: rgba(93, 202, 165, 0.09);
  --profile-tile-border: rgba(93, 202, 165, 0.28);
  --profile-hero-overlay: linear-gradient(180deg, rgba(4, 22, 28, 0.45), rgba(93, 202, 165, 0.14));
  --profile-tab-accent: #5dcaa5;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #07272c 0%, #04161c 60%, #020e12 100%) padding-box,
    linear-gradient(160deg, #9fe1cb 0%, #0f6e56 35%, #5dcaa5 65%, #085041 90%, #9fe1cb 100%) border-box;

  /* v0.7.3.1: same layering contract as the founder pack - the card isolates so
     negative-z decor stays above this background but under every child, dialogs
     included. */
  isolation: isolate;
}
.profile-card.theme-abyss .profile-name {
  color: #c9f5e5;
  text-shadow: 0 0 12px rgba(93, 202, 165, 0.5);
}
/* Deep-sea frame: the hero floor rolls in a wave, bubbles drift upward along the
   right side, a bioluminescent glow pools at the bottom, the avatar is a jelly blob. */
.profile-card.frame-abyss .profile-avatar {
  border-radius: 50% 50% 44% 56% / 60% 55% 45% 40%;
  box-shadow: 0 0 18px rgba(93, 202, 165, 0.55), 0 6px 18px rgba(0, 0, 0, 0.5);
}
.profile-card.theme-abyss .profile-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 14px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='14' preserveAspectRatio='none'%3E%3Cpath d='M0 14 L0 8 Q19 2 38 8 Q57 13 76 7 Q95 1 114 8 Q133 13 152 7 Q171 2 190 8 Q209 13 228 7 Q247 2 266 8 Q285 12 300 7 L300 14 Z' fill='%23062126'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.profile-card.theme-abyss::before {
  content: "";
  position: absolute;
  bottom: 18%;
  right: 8%;
  width: 6px;
  height: 6px;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(159, 225, 203, 0.6);
  box-shadow:
    -26px -44px 0 -2px rgba(93, 202, 165, 0.4),
    10px -92px 0 -1px rgba(159, 225, 203, 0.35),
    -48px -140px 0 -3px rgba(93, 202, 165, 0.3),
    18px -190px 0 -2px rgba(159, 225, 203, 0.25);
  animation: theme-bubbles 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes theme-bubbles {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(-14px); opacity: 1; }
}
.profile-card.theme-abyss::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 14px;
  box-shadow: inset 0 -36px 44px -26px rgba(93, 202, 165, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .profile-card.theme-abyss::before {
    animation: none;
  }
}

/* style pack: damascus */
/* Damascus - folded steel. */
.profile-card.theme-damascus {
  --accent: #aab2c0;
  --profile-frame: transparent;
  --profile-ring: #aab2c0;
  --profile-tile-bg: rgba(170, 178, 192, 0.09);
  --profile-tile-border: rgba(170, 178, 192, 0.28);
  --profile-hero-overlay: linear-gradient(120deg, rgba(21, 22, 26, 0.55), rgba(170, 178, 192, 0.12));
  --profile-tab-accent: #aab2c0;
  border: 2px solid transparent;
  background:
    /* v0.7.4: real damascus flow per the reference - straight bands run through a
       turbulence displacement, so the layers wander and fold like etched steel.
       One stretched vector field (no tiling seams), plus the perforated-plate dot
       grid and a soft centre sheen from the metallic reference. */
    linear-gradient(rgba(16, 17, 21, 0.30), rgba(16, 17, 21, 0.30)) padding-box,
    radial-gradient(ellipse at 50% 36%, rgba(230, 234, 242, 0.10), transparent 58%) padding-box,
    repeating-radial-gradient(circle at 2px 2px, rgba(170, 178, 192, 0.16) 0 0.7px, transparent 1.6px 100%) padding-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 150'%3E%3Cdefs%3E%3Cfilter id='d' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.026' numOctaves='2' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='26' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23d)'%3E%3Crect x='-30' y='-20' width='300' height='190' fill='%2317181d'/%3E%3Cg fill='none' stroke-width='1.4'%3E%3Cpath d='M-30 4 H270' stroke='%23565d68'/%3E%3Cpath d='M-30 14 H270' stroke='%23262931'/%3E%3Cpath d='M-30 24 H270' stroke='%23767d88'/%3E%3Cpath d='M-30 34 H270' stroke='%231d1f25'/%3E%3Cpath d='M-30 44 H270' stroke='%23636a75'/%3E%3Cpath d='M-30 54 H270' stroke='%23262931'/%3E%3Cpath d='M-30 64 H270' stroke='%23838a95'/%3E%3Cpath d='M-30 74 H270' stroke='%231d1f25'/%3E%3Cpath d='M-30 84 H270' stroke='%23565d68'/%3E%3Cpath d='M-30 94 H270' stroke='%23262931'/%3E%3Cpath d='M-30 104 H270' stroke='%23767d88'/%3E%3Cpath d='M-30 114 H270' stroke='%231d1f25'/%3E%3Cpath d='M-30 124 H270' stroke='%23636a75'/%3E%3Cpath d='M-30 134 H270' stroke='%23262931'/%3E%3Cpath d='M-30 144 H270' stroke='%23838a95'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat padding-box,
    linear-gradient(180deg, #17181d 0%, #101115 100%) padding-box,
    linear-gradient(135deg, #e6eaf2 0%, #6e7480 30%, #aab2c0 55%, #4c525c 80%, #e6eaf2 100%) border-box;

  /* v0.7.3.1: same layering contract as the founder pack - the card isolates so
     negative-z decor stays above this background but under every child, dialogs
     included. */
  isolation: isolate;
}
.profile-card.theme-damascus .profile-name { color: #e6eaf2; }
/* Blade frame: the avatar sits in a rotated tsuba square, the hero's lower edge is
   a slanted steel bevel, a thin steel rail lines the card. */
.profile-card.frame-damascus .profile-avatar {
  border-radius: 8px;
  border: 3px solid transparent;
  background:
    linear-gradient(145deg, #23252c, #14151a) padding-box,
    linear-gradient(135deg, #e6eaf2, #6e7480 45%, #aab2c0) border-box;
}
.profile-card.frame-damascus .profile-avatar::before {
  content: "";
  position: absolute;
  /* -19px keeps the rotated square's edges OUTSIDE the avatar's corners
     (a diamond circumscribing an 88px square needs >= 18px of margin),
     so the tsuba never cuts across the user's photo. */
  inset: -19px;
  z-index: -1;
  border: 2px solid rgba(170, 178, 192, 0.55);
  border-radius: 10px;
  transform: rotate(45deg);
  pointer-events: none;
}
.profile-card.theme-damascus .profile-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 13px;
  background: linear-gradient(90deg, #33363f, #1c1e24 55%);
  clip-path: polygon(0 100%, 0 0, 26% 55%, 74% 55%, 100% 0, 100% 100%);
  pointer-events: none;
}
.profile-card.theme-damascus::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(170, 178, 192, 0.35);
  border-radius: 11px;
}

/* style pack: founder */
/* ============================================================
   Founders Circle cosmetics.

   Four pieces:
     .frame-founder      the frame itself - machined titanium, no colour, no glow
     .founder-engraving  the member's ordinal, cut into the bezel
     .founder-badge      the name badge
     .founder-heart      the Heart of Chronos, beating at the streak's rate

   The palette is deliberately cold and unsaturated. Every other frame competes
   on colour; this one competes on restraint - it should read as a machined
   object among painted ones.
   ============================================================ */

/* The card: a brushed titanium plate. Full token override set, same contract as
   the chronometer / star-chart packs, so tiles, hero, ring and tabs all take the
   cold-steel accent instead of falling back to the default look. */
.profile-card.theme-founder {
  --accent: #c8ccd4;
  --profile-frame: transparent;
  --profile-ring: #dfe4ec;
  --profile-tile-bg: rgba(200, 204, 212, 0.09);
  --profile-tile-border: rgba(200, 204, 212, 0.32);
  --profile-hero-overlay: linear-gradient(120deg, rgba(10, 12, 16, 0.74), rgba(200, 204, 212, 0.15));
  --profile-tab-accent: #dfe4ec;
  border: 2px solid transparent;
  background:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px) padding-box,
    linear-gradient(165deg, #181b21 0%, #23262e 46%, #101216 100%) padding-box,
    conic-gradient(from 210deg,
      #f2f4f8, #878e99 22%, #dfe4ec 38%, #6d747f 55%, #eef1f5 72%, #9aa2ae 88%, #f2f4f8) border-box;
  /* Own stacking context so the negative-z etch/rail layers stay ABOVE this card's
     background while sitting UNDER every child - dialogs and editors included. */
  isolation: isolate;
}
.profile-card.theme-founder .profile-name {
  color: #f2f4f8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7), 0 0 12px rgba(200, 204, 212, 0.28);
}
/* Etched machinery, on the DEEPEST paint layer (z -1 inside the isolated card):
   the gear-and-hourglass cluster, four slotted corner screws, a fine tick ruler
   along the bottom edge and a small hourglass etch top-right. v0.7.3: this used
   to sit at z-index 3 and bled OVER dialogs opened inside the card. */
.profile-card.theme-founder::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Ccircle cx='26' cy='26' r='17' fill='none' stroke='%238d949f' stroke-width='4.5' stroke-dasharray='4.6 3.6'/%3E%3Cpath d='M19 17h14l-7 9 7 9H19l7-9-7-9Z' fill='none' stroke='%23aab2c0' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='9.5' fill='none' stroke='%236d747f' stroke-width='3.6' stroke-dasharray='3.2 2.6'/%3E%3Ccircle cx='16' cy='16' r='3.4' fill='%23262a31'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='4' fill='none' stroke='%237a818c' stroke-width='1.2'/%3E%3Cpath d='M2.6 6.6 L7.4 3.4' stroke='%237a818c' stroke-width='1.1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='4' fill='none' stroke='%237a818c' stroke-width='1.2'/%3E%3Cpath d='M2.6 3.4 L7.4 6.6' stroke='%237a818c' stroke-width='1.1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='4' fill='none' stroke='%237a818c' stroke-width='1.2'/%3E%3Cpath d='M5 1.6 L5 8.4' stroke='%237a818c' stroke-width='1.1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='4' fill='none' stroke='%237a818c' stroke-width='1.2'/%3E%3Cpath d='M1.6 5 L8.4 5' stroke='%237a818c' stroke-width='1.1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='7'%3E%3Cpath d='M2 0v6M12 2v4M22 2v4M32 0v6M42 2v4M52 2v4M62 0v6M72 2v4M82 2v4M92 0v6M102 2v4M112 2v4' stroke='%23555c66' stroke-width='1'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='22'%3E%3Cpath d='M3 2h10M3 20h10M4 3c0 5 8 5 8 8c0 3-8 3-8 8M12 3c0 5-8 5-8 8c0 3 8 3 8 8' fill='none' stroke='%23666d78' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position:
    right 12px bottom 12px,
    right 54px bottom 42px,
    left 9px top 9px,
    right 9px top 9px,
    left 9px bottom 9px,
    right 9px bottom 9px,
    left 26px bottom 13px,
    right 14px top 34px;
  opacity: 0.85;
}
/* Inner rail: a double hairline chased into the plate, like a machined chamfer.
   Same deep layer as the etchings - decor never covers content. */
.profile-card.theme-founder::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(200, 204, 212, 0.34);
  border-radius: 11px;
  box-shadow:
    inset 0 0 0 3px rgba(16, 18, 22, 0.9),
    inset 0 0 0 4px rgba(200, 204, 212, 0.18);
}

/* Titanium bezel: polished conic ring, milled collar, a soft steel bloom so it
   visibly outranks the shard-bought frames on any card. */
.profile-card.frame-founder .profile-avatar {
  border-radius: 50%;
  border: 3px solid transparent;
  background:
    linear-gradient(150deg, #1a1d23, #0e1013) padding-box,
    conic-gradient(from 320deg,
      #ffffff, #9aa2ae 16%, #e6eaf1 30%, #6d747f 47%, #f6f8fb 62%, #878e99 78%, #ffffff) border-box;
  outline: 1px solid rgba(223, 228, 236, 0.5);
  outline-offset: 5px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 22px rgba(200, 210, 225, 0.35),
    inset 0 0 6px rgba(0, 0, 0, 0.55);
}

/* v0.7.3: the sweep is an ORNATE CLOCK HAND - openwork filigree in the antique
   style: arrow tip, pierced diamond, twin pierced eyes, stem, pierced
   counterweight ring. One even-odd path, so the piercings are real holes.
   Rotates around the bezel centre behind the avatar box (chronometer-hand
   idiom), never crossing the photo. theme-spin keyframes come from
   22-profile-themes.css, which loads before the packs. */
.profile-card.frame-founder .profile-avatar::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 112'%3E%3Cpath fill='%23dfe4ec' fill-opacity='0.92' fill-rule='evenodd' d='M12 2 L15.5 11 L13.2 11 L13.2 20 L10.8 20 L10.8 11 L8.5 11 Z M12 20 L16.6 30 L12 40 L7.4 30 Z M12 24.6 L14.4 30 L12 35.4 L9.6 30 Z M6.2 45 a2.8 2.8 0 1 0 5.6 0 a2.8 2.8 0 1 0 -5.6 0 Z M7.8 45 a1.2 1.2 0 1 0 2.4 0 a1.2 1.2 0 1 0 -2.4 0 Z M12.2 45 a2.8 2.8 0 1 0 5.6 0 a2.8 2.8 0 1 0 -5.6 0 Z M13.8 45 a1.2 1.2 0 1 0 2.4 0 a1.2 1.2 0 1 0 -2.4 0 Z M11 48.5 L13 48.5 L13 56 L11 56 Z M11.2 56 L12.8 56 L12.8 60.5 L11.2 60.5 Z M6.5 66 a5.5 5.5 0 1 0 11 0 a5.5 5.5 0 1 0 -11 0 Z M9.4 66 a2.6 2.6 0 1 0 5.2 0 a2.6 2.6 0 1 0 -5.2 0 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: auto 100%;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
  animation: theme-spin 14s linear infinite;
  pointer-events: none;
}

/* Milled collar: the static knurled crown the glint sweeps across. One layer
   deeper than the glint so the highlight reads as light on the ticks. */
.profile-card.frame-founder .profile-avatar::after {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -2;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(226, 231, 238, 0.7) 0deg 1.6deg,
    transparent 1.6deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 60% 100%);
          mask: radial-gradient(circle, transparent 0 58%, #000 60% 100%);
  pointer-events: none;
}

/* Shape cutouts win over the founder bezel - the same contract every other frame
   honours. The collar ::after is not covered by the generic shape reset (no other
   frame uses avatar ::after), so the override is explicit. */
.profile-card.frame-founder .profile-avatar[class*="shape-"] {
  border: none;
  outline: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.profile-card.frame-founder .profile-avatar[class*="shape-"]::before {
  inset: 0;
  z-index: 0;
  background: var(--profile-ring, var(--accent, #7c3aed));
  border-radius: 0;
  -webkit-mask-image: var(--shape-mask);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: var(--shape-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  animation: none;
}
.profile-card.frame-founder .profile-avatar[class*="shape-"]::after {
  content: none;
}

/* The inverted-T fitting extends ~28px below the avatar; whatever sits under the
   head row (the pet strip on /u/username, the pet card in the modal) needs the
   clearance - only when the founder frame is actually worn. */
.profile-card.frame-founder .profile-head { padding-bottom: 30px; }

/* Founder-class artifact tile: steel, not a rarity hue - and brighter steel than
   any rarity glow, so the Heart reads as the shelf's centrepiece. --art-tier feeds
   the public card's caption colour. */
.artifact-tile.tier-founder,
.pubprofile-artifact.tier-founder {
  --art-tier: #dfe4ec;
  border-color: rgba(223, 228, 236, 0.75);
  background: linear-gradient(160deg, rgba(200, 204, 212, 0.10), rgba(16, 18, 22, 0) 55%);
  box-shadow:
    0 0 0 1px rgba(223, 228, 236, 0.35),
    0 0 18px rgba(190, 200, 215, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
/* Grimoire's parchment washes out near-white steel - re-ink to gunmetal there. */
.profile-card.theme-grimoire .artifact-tile.tier-founder {
  border-color: #5a626e;
  box-shadow: 0 0 0 1px rgba(90, 98, 110, 0.45), 0 0 12px rgba(90, 98, 110, 0.3);
}

/* The badge row on the share card: the ordinal (and the heart beside it) live on
   their own line under the name - inline they drift under the streak counter. */
.founder-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 1px;
}
.founder-badge-row .founder-badge { margin-left: 0; }

/* v0.7.2.6: the inverted-T fitting, machined from ONE piece. The silhouette -
   a round head flowing into the wide crossbar - is a single clip-path on one
   plate, so there is no seam anywhere: one continuous fill, one continuous rim
   (drop-shadow on the wrapper follows the clipped outline). The heart's recess
   is not a separate part either - it is a radial darkening cut into the same
   plate. Geometry is fixed-px on purpose: the ordinal is always "#NNN" in
   monospace, so the box never needs to stretch.
     head: circle r15 centred at (28,15); crossbar: y 24..44, corner r4;
     the chord y=24 meets the circle at x=16 and x=40.
   Part of the frame's design, not a shelf tile: the artifact showcases filter
   the heart out and the grant never pins it. The number has to be a real text
   node - CSS cannot emit per-user content. */
.founder-engraving {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  z-index: 3;
  width: 56px;
  height: 44px;
  pointer-events: none;
  white-space: nowrap;
  filter:
    drop-shadow(0 0 1px rgba(230, 234, 241, 0.95))
    drop-shadow(0 0 1px rgba(160, 168, 180, 0.8))
    drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6));
}

/* The plate itself: dark metal clipped to the T silhouette, with the heart's
   recess sunk into the head as a darker pool. */
.founder-engraving::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28px 15px, #0b0d11 0 10px, rgba(11, 13, 17, 0) 12px),
    linear-gradient(180deg, #2c313a 0%, #14171c 100%);
  clip-path: path("M 4 24 H 16 A 15 15 0 1 1 40 24 H 52 Q 56 24 56 28 V 40 Q 56 44 52 44 H 4 Q 0 44 0 40 V 28 Q 0 24 4 24 Z");
}

/* The heart, resting in the recess - content only, no metal of its own. */
.founder-frame-heart {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 0;
}

/* The digits on the crossbar - content only, the plate is behind them.
   DIN-family stack on purpose: Bahnschrift (Windows) / DIN Alternate (Apple) is
   the letterform stamped on real machine serial plates - exactly what this is.
   System fonts only; the repo ships no font files. Tabular figures keep every
   ordinal the same width on the fixed 56px bar. */
.founder-engraving-num {
  position: absolute;
  top: 24px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: "Bahnschrift", "DIN Alternate", "Franklin Gothic Medium", "Arial Narrow", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  color: #eef1f6;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 -1px 1px rgba(0, 0, 0, 0.92);
}

/* Name badge - sits beside the tier badge, same rhythm, colder metal. */
.founder-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2a2f37, #171a1f);
  border: 1px solid rgba(206, 212, 221, 0.5);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #dfe4ec;
  vertical-align: middle;
  box-shadow: 0 0 8px rgba(200, 210, 225, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
/* The word recedes, the number carries the weight - the ordinal is what is scarce. */
.founder-badge-word {
  color: #a8b0bc;
  font-weight: 600;
}
.founder-badge-num {
  /* Same DIN stack as the frame plate - the ordinal reads identically everywhere. */
  font-family: "Bahnschrift", "DIN Alternate", "Franklin Gothic Medium", "Arial Narrow", sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: #f4f7fb;
}

/* ---- The Heart of Chronos ----------------------------------
   Beat rate is the streak phase. The escalation is the message: the closer the
   window is to closing, the harder it works. Broken stops it outright - a dead
   heart is a stronger signal than any colour change.                          */

.founder-heart-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.founder-heart {
  display: inline-block;
  transform-origin: 50% 55%;
  will-change: transform;
}

@keyframes founder-heartbeat {
  0%   { transform: scale(1); }
  8%   { transform: scale(1.13); }
  16%  { transform: scale(1.01); }
  24%  { transform: scale(1.07); }
  34%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* The hourglass sand drifts with the same cadence, a beat behind the shell. */
@keyframes founder-sand {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.founder-heart.heart-safe      { animation: founder-heartbeat 2.6s ease-in-out infinite; }
.founder-heart.heart-counting  { animation: founder-heartbeat 1.5s ease-in-out infinite; }
.founder-heart.heart-urgent    { animation: founder-heartbeat 0.85s ease-in-out infinite; }
.founder-heart.heart-critical  { animation: founder-heartbeat 0.42s ease-in-out infinite; }
.founder-heart.heart-frozen    { animation: founder-heartbeat 4.2s ease-in-out infinite; }
.founder-heart.heart-stopped   { animation: none; }

.founder-heart .fh-sand-top,
.founder-heart .fh-sand-bottom { animation: founder-sand 2.6s ease-in-out infinite; }
.founder-heart.heart-urgent   .fh-sand-top,
.founder-heart.heart-urgent   .fh-sand-bottom { animation-duration: 0.85s; }
.founder-heart.heart-critical .fh-sand-top,
.founder-heart.heart-critical .fh-sand-bottom { animation-duration: 0.42s; }

/* Frozen: the metal goes glacial and the movement slows to a crawl. */
.founder-heart.heart-frozen .fh-shell { fill: #b9d3e2; stroke: #6d8ea3; }
.founder-heart.heart-frozen .fh-glass { opacity: 0.75; }

/* Broken: colour drains out, the bolt reads as a dead pivot. Nothing moves. */
.founder-heart.heart-stopped { filter: grayscale(1) brightness(0.62); }
.founder-heart.heart-stopped .fh-sand-top,
.founder-heart.heart-stopped .fh-sand-bottom { animation: none; opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  /* The heartbeat is applied by .founder-heart.heart-* compounds at (0,2,0), so a
     bare .founder-heart here would lose the specificity fight. List the compounds. */
  .profile-card.frame-founder .profile-avatar::before,
  .founder-heart.heart-safe,
  .founder-heart.heart-counting,
  .founder-heart.heart-urgent,
  .founder-heart.heart-critical,
  .founder-heart.heart-frozen,
  .founder-heart .fh-sand-top,
  .founder-heart .fh-sand-bottom {
    animation: none;
  }
}

/* style pack: companions */
/* ============================================================
   Companions - the referral reward. Granted when BOTH invited
   friends reach a 7-day streak; never sold, never rolled, and
   the one cosmetic even system admins are not handed.

   The meaning is worn as geometry, not as a caption: two small
   lights of two different warmths ride ONE orbit around the
   wearer's avatar. Everything on the card is a pair - the bezel
   is a single ring blending an amber pole into a blue one, the
   plate is lit from two opposite corners, and where the two
   colours meet they mix into the brand violet. Astronomy agrees
   with the palette: in a real binary the cool star burns amber
   and the hot one burns blue.

   Founder competes on machined cold restraint; this pack answers
   with warmth and slow motion, so the two flagship grants never
   read as rivals. Star Chart owns the dashed-outline idiom, so
   the orbit here is a solid hairline with moving bodies.

     .theme-companions   the card: dusk plate lit from two corners
     .frame-companions   the bezel: two-pole ring + twin orbit

   No external assets: inline SVG data URIs only. Motion is one
   slow rotation (theme-spin, shared keyframes) and it dies under
   prefers-reduced-motion, where the companions rest on their own
   colour poles - the composition still reads "two".
   ============================================================ */

/* The card: one plate, two lights. Warm amber leans in from the
   top-left corner, cool blue from the bottom-right, and the base
   dusk gradient walks from a warm brown-black into a cold navy.
   The border does the same diagonal walk, so the frame edge names
   the pair even when the avatar is off-screen. */
.profile-card.theme-companions {
  --accent: #ffbe78;
  --profile-frame: transparent;
  --profile-ring: #ffbe78;
  --profile-tile-bg: rgba(255, 190, 120, 0.08);
  --profile-tile-border: rgba(255, 190, 120, 0.26);
  --profile-hero-overlay: linear-gradient(100deg, rgba(59, 36, 18, 0.58), rgba(20, 32, 54, 0.58));
  --profile-tab-accent: #ffce96;
  border: 2px solid transparent;
  background:
    radial-gradient(130% 100% at 14% 0%, rgba(255, 176, 102, 0.15), transparent 55%) padding-box,
    radial-gradient(130% 100% at 86% 100%, rgba(109, 168, 255, 0.15), transparent 55%) padding-box,
    linear-gradient(135deg, #241a14 0%, #181521 50%, #101c2e 100%) padding-box,
    linear-gradient(150deg, #ffd0a0 0%, #8a6844 28%, #46608e 62%, #a8c8ff 100%) border-box;
  /* Same layering contract as the founder and star-chart packs: the card isolates
     so negative-z decor stays above this background but under every child. */
  isolation: isolate;
}
.profile-card.theme-companions .profile-name {
  color: #ffedd8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65), 0 0 12px rgba(255, 190, 120, 0.25);
}

/* Etched pair-glyphs on the deepest paint layer (z -1 inside the isolated card):
   a vesica piscis bottom-right - two circles, one warm, one cool, drawn through
   each other's centres, the oldest glyph for "two" there is - and a small dashed
   travel arc bottom-left: two dots that walked one path to each other. */
.profile-card.theme-companions::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='38'%3E%3Ccircle cx='20' cy='19' r='14' fill='none' stroke='%23c98a52' stroke-width='1.3'/%3E%3Ccircle cx='34' cy='19' r='14' fill='none' stroke='%236d88b8' stroke-width='1.3'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='18'%3E%3Cpath d='M4 13 C 14 3, 30 3, 40 13' fill='none' stroke='%23907d66' stroke-width='1.1' stroke-dasharray='2.5 2.5'/%3E%3Ccircle cx='4' cy='13' r='2.5' fill='%23d8a76a'/%3E%3Ccircle cx='40' cy='13' r='2.5' fill='%2386a8d8'/%3E%3C/svg%3E");
  background-position:
    right 14px bottom 14px,
    left 16px bottom 48px;
  opacity: 0.7;
}

/* The pack's emblem on the hero: one thin ellipse, two bodies diametrically
   opposed - the whole cosmetic in a 120px diagram. Static on purpose; the
   moving version lives on the avatar. */
.profile-card.theme-companions .profile-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: right 16px top 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='54'%3E%3Cellipse cx='60' cy='27' rx='50' ry='18' fill='none' stroke='rgba(255,226,189,0.4)' stroke-width='1'/%3E%3Ccircle cx='18' cy='16' r='3' fill='%23ffb066'/%3E%3Ccircle cx='102' cy='38' r='3' fill='%2386b3ff'/%3E%3C/svg%3E");
  opacity: 0.85;
}

/* The bezel: ONE ring holding two colours together. Amber pole at the top,
   blue pole at the bottom, and the flanks blend through a muted violet - the
   brand colour appearing exactly where the two people meet. The split glow
   repeats the poles: warm light bleeds upward, cool light downward. */
.profile-card.frame-companions .profile-avatar {
  border-radius: 50%;
  border: 3px solid transparent;
  background:
    linear-gradient(150deg, #241a16, #131a26) padding-box,
    conic-gradient(
      #ffc98a 0deg, #fff0da 22deg, #ffab5e 75deg, #9a8bb0 140deg,
      #86b3ff 180deg, #eaf2ff 205deg, #6d9fe8 262deg, #9a8bb0 322deg,
      #ffc98a 360deg) border-box;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 -6px 18px -6px rgba(255, 176, 102, 0.55),
    0 6px 18px -6px rgba(109, 168, 255, 0.55),
    inset 0 0 6px rgba(0, 0, 0, 0.45);
}

/* The twin orbit. Everything decorative lives on this ONE ::before, so the
   shape reset (27-avatar-shapes-base.css, loads after the packs and wins the
   tie) neutralises the whole act in a single stroke - the same contract every
   other frame honours.

   The ring is a uniform solid hairline: rotating it is invisible, so only the
   two companions are seen to move. Each body is a lit core with a dark rim -
   the rim keeps it readable over light cards (grimoire parchment) when the
   frame is worn unbundled. Full revolution in 16s: presence, not spectacle.
   A stable orbit is the message - they came, and they stayed. */
.profile-card.frame-companions .profile-avatar::before {
  content: "";
  position: absolute;
  inset: -11px;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(255, 222, 184, 0.30);
  box-shadow: 0 0 0 1px rgba(16, 14, 24, 0.35);
  background:
    radial-gradient(circle 10px at 50% 3px, rgba(255, 176, 102, 0.42), transparent 70%),
    radial-gradient(circle 4.5px at 50% 3px,
      #fff3e2 0 1.2px, #ffab5e 1.2px 3.2px, rgba(90, 52, 18, 0.85) 3.2px 4px, transparent 4.5px),
    radial-gradient(circle 10px at 50% calc(100% - 3px), rgba(109, 168, 255, 0.42), transparent 70%),
    radial-gradient(circle 4.5px at 50% calc(100% - 3px),
      #f2f7ff 0 1.2px, #7fb1ff 1.2px 3.2px, rgba(24, 52, 96, 0.85) 3.2px 4px, transparent 4.5px);
  animation: theme-spin 16s linear infinite;
  pointer-events: none;
}

/* Motion off: the orbit stands still and each companion rests on its own
   colour pole - amber on amber, blue on blue. Still two, still one ring. */
@media (prefers-reduced-motion: reduce) {
  .profile-card.frame-companions .profile-avatar::before { animation: none; }
}

/* style pack: circle */
.shape-circle   { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='white'/%3E%3C/svg%3E"); }

/* style pack: squircle */
/* rx/ry 36 out of a 96-wide box (~37.5%), up from the old inset(0 round 30%) - a visible
   softening bump per the owner's "the square too" note, still short of reading as a circle
   (24 units of straight edge remain in the middle of each side). */
.shape-squircle { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='2' y='2' width='96' height='96' rx='36' ry='36' fill='white'/%3E%3C/svg%3E"); }

/* style pack: hexagon */
/* Corner-cut quadratic curve at each of the 6 vertices (30% of each adjacent edge pulled back,
   original vertex as the curve's control point) - rounds every corner without losing the
   hexagon's silhouette. See docs comment in 27-avatar-shapes-base.css for why this is a mask,
   not clip-path: path(...). */
.shape-hexagon  { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M8.90,36.50 L18.10,18.50 Q25.00,5.00 40.00,5.00 L60.00,5.00 Q75.00,5.00 81.90,18.50 L91.10,36.50 Q98.00,50.00 91.10,63.50 L81.90,81.50 Q75.00,95.00 60.00,95.00 L40.00,95.00 Q25.00,95.00 18.10,81.50 L8.90,63.50 Q2.00,50.00 8.90,36.50 Z'/%3E%3C/svg%3E"); }

/* style pack: diamond */
/* Same corner-cut technique as hexagon (28% pull-back) - the diamond's 4 right-angle-ish
   corners get a soft rounded tip instead of a mitred point. */
.shape-diamond  { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M15.44,36.56 L36.56,15.44 Q50.00,2.00 63.44,15.44 L84.56,36.56 Q98.00,50.00 84.56,63.44 L63.44,84.56 Q50.00,98.00 36.56,84.56 L15.44,63.44 Q2.00,50.00 15.44,36.56 Z'/%3E%3C/svg%3E"); }

/* style pack: star */
/* v0.9.8: the owner's exact complaint was this shape ("looks like it was cut with a hatchet") -
   it gets the most tuning of the seven. Corner-cut quadratic curve at each of the 10 vertices,
   asymmetric on purpose: the 5 outer TIPS pull back 22% of their edge (a visibly rounded point,
   not a razor spike) while the 5 inner NOTCHES pull back only 12% (soft, but the notch stays
   deep enough that the outline still reads as a star and not a flower or a gear). See docs
   comment in 27-avatar-shapes-base.css for why this is a mask, not clip-path: path(...). */
.shape-star     { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M40.32,31.92 L47.58,9.48 Q50.00,2.00 52.42,9.48 L59.68,31.92 Q61.00,36.00 65.32,36.00 L89.08,36.00 Q97.00,36.00 90.62,40.84 L71.48,55.36 Q68.00,58.00 69.20,62.08 L75.80,84.52 Q78.00,92.00 71.84,87.38 L53.36,73.52 Q50.00,71.00 46.64,73.52 L28.16,87.38 Q22.00,92.00 24.20,84.52 L30.80,62.08 Q32.00,58.00 28.52,55.36 L9.38,40.84 Q3.00,36.00 10.92,36.00 L34.68,36.00 Q39.00,36.00 40.32,31.92 Z'/%3E%3C/svg%3E"); }

/* style pack: shield */
/* Same corner-cut technique as hexagon, tuned per vertex (24% at the top point and the bottom
   point, 20% at the four side corners) so the badge silhouette stays a shield, not an egg. */
.shape-shield   { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M13.20,16.40 L38.96,6.32 Q50.00,2.00 61.04,6.32 L86.80,16.40 Q96.00,20.00 96.00,27.60 L96.00,50.40 Q96.00,58.00 86.80,66.00 L61.04,88.40 Q50.00,98.00 38.96,88.40 L13.20,66.00 Q4.00,58.00 4.00,50.40 L4.00,27.60 Q4.00,20.00 13.20,16.40 Z'/%3E%3C/svg%3E"); }

/* style pack: heart */
/* Heart - the 20-point outline is kept (it already approximated the lobes closely enough that
   proportions do not need to change), but every straight polygon edge becomes a corner-cut
   quadratic curve so the lobes read as genuinely round instead of faceted. Most vertices pull
   back 45% of their (short) edge, which is a small absolute distance since the points sit close
   together - that is what turns the facets into a smooth curve. The bottom tip and the top
   cleft are the two vertices that are SUPPOSED to read as points on a heart, so they keep a
   much tighter pull-back (12% / 18%) instead of being smoothed away. mask-size: 100% 100% keeps
   the same scale-to-any-box behaviour the old percentage clip-path polygon had (see docs
   comment in 27-avatar-shapes-base.css) - a fixed-pixel clip-path: path() would not. */
.shape-heart    { --shape-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='white' d='M46.15,19.95 L48.74,24.02 Q50.00,26.00 51.26,24.02 L53.85,19.95 Q57.00,15.00 61.05,11.40 L61.95,10.60 Q66.00,7.00 70.95,6.10 L72.05,5.90 Q77.00,5.00 81.50,6.80 L82.50,7.20 Q87.00,9.00 90.15,13.50 L90.85,14.50 Q94.00,19.00 94.90,24.40 L95.10,25.60 Q96.00,31.00 94.20,36.85 L93.80,38.15 Q92.00,44.00 87.50,50.30 L86.50,51.70 Q82.00,58.00 75.70,65.20 L74.30,66.80 Q68.00,74.00 59.90,82.10 L52.16,89.84 Q50.00,92.00 47.84,89.84 L40.10,82.10 Q32.00,74.00 25.70,66.80 L24.30,65.20 Q18.00,58.00 13.50,51.70 L12.50,50.30 Q8.00,44.00 6.20,38.15 L5.80,36.85 Q4.00,31.00 4.90,25.60 L5.10,24.40 Q6.00,19.00 9.15,14.50 L9.85,13.50 Q13.00,9.00 17.50,7.20 L18.50,6.80 Q23.00,5.00 27.95,5.90 L29.05,6.10 Q34.00,7.00 38.05,10.60 L38.95,11.40 Q43.00,15.00 46.15,19.95 Z'/%3E%3C/svg%3E"); }