/* Reusable component styles. Minimal-but-warm spine; next phase enriches.
   All color via vars; no hardcoded hex. */

/* ---- ORing ---- */
.oring { display: inline-grid; place-items: center; position: relative; }
.oring--sm { width: 44px; height: 44px; }
.oring--md { width: 96px; height: 96px; }
.oring--lg { width: 184px; height: 184px; }
.oring svg { width: 100%; height: 100%; overflow: visible; }
.oring--glow::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 999px;
  box-shadow: var(--glow-gold);
  opacity: .5;
  pointer-events: none;
}
.oring--animated .oring__ring { transform-origin: 50% 50%; animation: oring-breathe 4.6s var(--ease-warm) infinite; }
@keyframes oring-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.035); opacity: .92; }
}

/* ---- AvatarRing ---- */
.avatar-ring { position: relative; display: inline-grid; place-items: center; border-radius: 999px; padding: 3px; background: var(--o-grad); }
.avatar-ring__inner { width: 100%; height: 100%; border-radius: 999px; overflow: hidden; background: var(--cream); display: grid; place-items: center; }
.avatar-ring__img { width: 100%; height: 100%; object-fit: cover; }
.avatar-ring--sm { width: 44px; height: 44px; }
.avatar-ring--md { width: 72px; height: 72px; }
.avatar-ring--lg { width: 128px; height: 128px; }
.avatar-ring__fallback { color: var(--deep-purple); font-weight: 800; }

/* ---- PrimaryButton ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 22px;
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: 1rem;
  transition: transform var(--dur-fast) var(--ease-warm), box-shadow var(--dur-fast) var(--ease-warm);
}
.btn:active { transform: scale(.985); }
.btn--coral { background: var(--coral); color: var(--cream); box-shadow: var(--glow-coral); }
.btn--ghost { background: transparent; color: var(--deep-purple); font-weight: 600; box-shadow: none; }

/* ---- DoorCard (a world "door") ---- */
.door-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--glass-light);
  box-shadow: var(--shadow-warm);
  border: 1px solid rgba(74, 63, 99, .06);
  position: relative;
  overflow: hidden;
  text-align: start;
}
.door-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: var(--door-hint, var(--soft-purple));
}
.door-card__label { font-weight: 700; color: var(--deep-purple); }
.door-card__hint { font-size: .82rem; color: var(--warm-ink); opacity: .72; }

/* ---- Warm placeholder block (hero / world placeholders, never blank/gray) ---- */
.warm-block {
  position: relative;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 100% at 30% 0%, rgba(255, 196, 122, .55) 0%, rgba(255, 248, 242, 0) 70%),
    var(--o-grad);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.warm-block__glyph { opacity: .9; filter: drop-shadow(var(--glow-gold)); }

/* ---- Reassurance row (soft-purple, calming) ---- */
.reassure {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(139, 124, 246, .10);
  color: var(--deep-purple);
  font-size: .84rem;
  line-height: 1.45;
}