/* ── Rendering layer phase 1: relic composition styles ─────────────────
 *
 * Light-DOM custom elements: <retro-avatar>, <retro-username>,
 * <retro-profile-effect>. CSS targets the element tags directly so
 * surface-specific overrides (themes, etc.) can still penetrate.
 *
 * Z-order per docs/store-asset-specs.md §2.5:
 *   banner          z:0  (existing surface CSS)
 *   profile-effect  z:1  (pointer-events: none, full-card overlay)
 *   nameplate/avatar/decoration  z:2
 *   badge/flair     inline siblings at z:3 in the flow
 */

retro-avatar,
retro-username,
retro-profile-effect {
  display: inline-block;
}

/* ── <retro-avatar> ─────────────────────────────────────────────────── */

retro-avatar {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  isolation: isolate; /* contains decoration stacking */
}

retro-avatar[size="hero"]    { width: 64px; height: 64px; }
retro-avatar[size="list"]    { width: 36px; height: 36px; }
retro-avatar[size="compact"] { width: 24px; height: 24px; }

retro-avatar .retro-avatar-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

retro-avatar .retro-avatar-placeholder {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2440;
  color: #bda0ff;
  font-family: 'JetBrains Mono', monospace;
  font-weight: bold;
}

retro-avatar .retro-avatar-decoration {
  position: absolute;
  z-index: 3;
  /* Decoration art is designed at 256×256 with avatar mounting at 156×156
   * center (~61% of canvas), so render decoration at 1.5× avatar size,
   * centered. */
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  pointer-events: none;
}

/* Presence-dot safe zone — bottom-right quadrant of the avatar slot,
 * reserved per docs/store-asset-specs.md §3.2. Surfaces with presence
 * indicators position them inside this slot. */
retro-avatar::after {
  content: '';
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  width: 25%;
  height: 25%;
  pointer-events: none;
}

/* ── <retro-username> ───────────────────────────────────────────────── */

retro-username {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  isolation: isolate;
}

/* Hero tier — give the nameplate real presence. The backdrop is a 5:1
 * marquee designed to look like a cabinet plate, so we want it wide
 * and prominent rather than a tiny chip around 5 letters. */
retro-username[size="hero"] {
  padding: 10px 24px;
  min-width: 280px;
  font-size: 20px;
}
retro-username[size="hero"] .retro-username-text {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
retro-username[size="hero"] .retro-username-flair,
retro-username[size="hero"] .retro-username-badge {
  width: 24px;
  height: 24px;
}

retro-username .retro-nameplate-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  /* Bezel-mimic frame so the plate reads as a discrete object even when
   * its dark center matches the surrounding surface (common on
   * midnight/cartridge themes where row bg is also dark). */
  border-radius: 5px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 0 0 2px rgba(0, 0, 0, 0.45),
    0 1px 5px rgba(0, 0, 0, 0.4);
}

retro-username .retro-username-text,
retro-username .retro-username-flair,
retro-username .retro-username-badge {
  position: relative;
  z-index: 1;
}

/* Nameplate art is authored for high-contrast white text per
 * docs/store-asset-specs.md §3.3 (see also the per-asset SVG <desc>
 * lines). When a nameplate is equipped, switch to white text + a soft
 * shadow so any surface theme (light or dark) reads. Surfaces can
 * override by targeting `.retro-username-text` more specifically. */
retro-username:has(.retro-nameplate-bg) .retro-username-text {
  color: #f4f4fb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

retro-username .retro-username-flair,
retro-username .retro-username-badge {
  width: 1em;
  height: 1em;
  display: inline-block;
}

/* ── <retro-banner> ─────────────────────────────────────────────────── */
/* Hero-tier background layer. Sits beneath everything else in the
 * card stack — banner (z:0) → profile-effect (z:1) → avatar/name/badge
 * (z:2+) per the docs/store-asset-specs.md §2.5 z-order spec. Must
 * be mounted inside a position:relative container. */

retro-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: block;
}

retro-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── <retro-profile-effect> ─────────────────────────────────────────── */

retro-profile-effect {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  display: block;
}

retro-profile-effect > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Reduced-motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  retro-avatar *,
  retro-username *,
  retro-profile-effect * {
    animation: none !important;
    transform: none !important;
  }
}