/* ═══════════════════════════════════════════════════════════════
 * Playfinder Cosmetics CSS
 * ─────────────────────────────────────────────────────────────
 * 1. Avatar overlay system (frame + companion SVGs)
 * 2. Title typography per equipped title
 * 3. Real thematic skins (typography + decorations beyond color)
 * ═══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────
 * 1. AVATAR OVERLAY SYSTEM
 * ────────────────────────────────────────────────────────────── */

/* The shell is a positioned wrapper that holds the avatar plus the
 * absolutely-positioned frame and companion SVGs. It uses inline-block
 * so it lays out naturally next to text in chat rows / header.        */
.pf-avatar-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 0;
  /* Reserve room for the frame which is slightly wider than the avatar.
   * Using the avatar size only would let the frame overflow the layout. */
  width: var(--pf-avatar-size, 32px);
  height: var(--pf-avatar-size, 32px);
}

/* The avatar itself sits inside the shell. We override its margins so
 * it centers and the frame SVG can extend past it. */
.pf-avatar-shell > .chat-avatar,
.pf-avatar-shell > .header-avatar-badge,
.pf-avatar-shell > .profile-card-avatar {
  position: relative;
  z-index: 2;
}

/* Frame: positioned dead-center, sized 1.42x the avatar so it ringed
 * neatly around it without covering the face. pointer-events: none so
 * clicks pass through to the underlying avatar / link. */
.pf-frame-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--pf-frame-size, 46px);
  height: var(--pf-frame-size, 46px);
  pointer-events: none;
  z-index: 3;
  /* Subtle drop shadow so it reads against any background */
  filter: drop-shadow(0 0 4px rgba(0,0,0,.35));
}

/* Companion: small icon floating to the bottom-right of the avatar.
 * For the inline (chat / header) variant it's a corner badge.
 * For the card variant it floats further out and is larger. */
.pf-companion-overlay {
  position: absolute;
  width: var(--pf-companion-size, 20px);
  height: var(--pf-companion-size, 20px);
  pointer-events: auto;
  z-index: 4;
  border-radius: 50%;
  background: var(--panel-strong, rgba(12,15,39,.86));
  border: 1px solid var(--line-strong, rgba(139,92,246,.34));
  padding: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: transform .25s ease;
}
.pf-companion-overlay:hover { transform: scale(1.15); }

.pf-avatar-shell[data-pf-shell="inline"] .pf-companion-overlay {
  right: -4px;
  bottom: -4px;
}
/* When the inline shell is in a row-reverse self-message row, the bubble
   is flush against the right side of the avatar, so the companion would
   visually overlap the bubble. Flip it to bottom-left in that case. */
.chat-bubble-row.self .pf-avatar-shell[data-pf-shell="inline"] .pf-companion-overlay {
  right: auto;
  left: -4px;
}
.pf-avatar-shell[data-pf-shell="header"] .pf-companion-overlay {
  right: -6px;
  bottom: -6px;
}
.pf-avatar-shell[data-pf-shell="card"] .pf-companion-overlay {
  right: -10px;
  bottom: -8px;
  /* On the big profile card the companion gets a soft glow ring */
  box-shadow: 0 0 18px var(--glow, rgba(124,58,237,.22)),
              0 2px 8px rgba(0,0,0,.4);
}


.pf-avatar-shell[data-pf-shell="header"] {
  margin-right: 8px;
}
.pf-avatar-shell[data-pf-shell="header"] > .header-avatar-badge {
  margin-right: 0;
}

/* ──────────────────────────────────────────────────────────────
 * 2. TITLE TYPOGRAPHY
 * ─────────────────────────────────────────────────────────────
 * The legacy .profile-card-title used a fixed purple Orbitron style.
 * Per-title classes override font, size, color, and decoration so the
 * title looks distinctive. The classes only apply when the title is
 * the equipped one (see pfTitleClass() in portal.js).
 * ────────────────────────────────────────────────────────────── */

.profile-card-title.pf-title-night-runner {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #8b5cf6, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.profile-card-title.pf-title-quest-breaker {
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fb923c, #f43f5e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}
.profile-card-title.pf-title-quest-breaker::before {
  content: '⛓‍💥';
  font-size: .85em;
  margin-right: .35em;
  filter: hue-rotate(20deg) saturate(1.4);
  -webkit-text-fill-color: initial;
}

.profile-card-title.pf-title-lore-hunter {
  font-family: 'Orbitron', monospace;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #a78bfa, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile-card-title.pf-title-lore-hunter::before,
.profile-card-title.pf-title-lore-hunter::after {
  content: '⟁';
  display: inline-block;
  margin: 0 .4em;
  color: #a78bfa;
  -webkit-text-fill-color: #a78bfa;
  opacity: .7;
}

.profile-card-title.pf-title-ace-pilot {
  font-family: 'Orbitron', monospace;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fbbf24, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile-card-title.pf-title-ace-pilot::before {
  content: '✦';
  margin-right: .35em;
  color: #fbbf24;
  -webkit-text-fill-color: #fbbf24;
}

.profile-card-title.pf-title-speed-demon {
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-style: italic;
  background: linear-gradient(90deg, #f43f5e, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile-card-title.pf-title-speed-demon::after {
  content: '⚡';
  margin-left: .35em;
  color: #fbbf24;
  -webkit-text-fill-color: #fbbf24;
}

.profile-card-title.pf-title-squire {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #06b6d4, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile-card-title.pf-title-squire::before {
  content: '🛡️';
  margin-right: .35em;
  -webkit-text-fill-color: initial;
}

.profile-card-title.pf-title-knight {
  font-family: 'Orbitron', monospace;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile-card-title.pf-title-knight::before {
  content: '⚔️';
  margin-right: .35em;
  -webkit-text-fill-color: initial;
}

.profile-card-title.pf-title-master {
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile-card-title.pf-title-master::before {
  content: '👑';
  margin-right: .35em;
  -webkit-text-fill-color: initial;
}

.profile-card-title.pf-title-recruit {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #b45309, #d97706);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile-card-title.pf-title-recruit::before {
  content: '🎖️';
  margin-right: .35em;
  -webkit-text-fill-color: initial;
}

.profile-card-title.pf-title-skirmisher {
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile-card-title.pf-title-skirmisher::before {
  content: '🏹';
  margin-right: .35em;
  -webkit-text-fill-color: initial;
}

.profile-card-title.pf-title-veteran {
  font-family: 'Orbitron', monospace;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #64748b, #cbd5e1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile-card-title.pf-title-veteran::before {
  content: '🛡️';
  margin-right: .35em;
  -webkit-text-fill-color: initial;
}

.profile-card-title.pf-title-champion {
  font-family: 'Orbitron', monospace;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.profile-card-title.pf-title-champion::before {
  content: '🏆';
  margin-right: .35em;
  -webkit-text-fill-color: initial;
}

.profile-card-title.pf-title-legend {
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ef4444, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 10px rgba(236, 72, 153, 0.3);
}
.profile-card-title.pf-title-legend::before {
  content: '⭐';
  margin-right: .35em;
  -webkit-text-fill-color: initial;
}

.profile-card-title.pf-title-mythic {
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fbbf24, #d946ef, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(217, 70, 239, 0.4);
}
.profile-card-title.pf-title-mythic::before {
  content: '✨';
  margin-right: .35em;
  -webkit-text-fill-color: initial;
}

/* ──────────────────────────────────────────────────────────────
 * Profile card background slot
 * ─────────────────────────────────────────────────────────────
 * When the user has equipped a background, .profile-card-with-bg
 * gets an inline background-image set by JS. These rules just make
 * sure the embedded text stays readable on top.
 * ────────────────────────────────────────────────────────────── */
.profile-card-with-bg[style*="background-image"] {
  background-blend-mode: normal;
  border-color: var(--line-strong, rgba(139,92,246,.34));
}
.profile-card-with-bg[style*="background-image"] .profile-card-name {
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.profile-card-with-bg[style*="background-image"] .profile-card-frame-label {
  color: rgba(255,255,255,.78);
}

/* Loadout card unequip action */
.loadout-card .loadout-actions {
  margin-top: 10px;
}
.loadout-card .loadout-actions .btn-small {
  font-size: 12px;
  padding: 6px 12px;
}

/* ──────────────────────────────────────────────────────────────
 * Theme dropdown opacity fix
 * ─────────────────────────────────────────────────────────────
 * The theme dropdown lives inside .site-header which has its own
 * backdrop-filter:blur(20px). That creates a stacking context that
 * prevents the dropdown's *own* backdrop-filter from doing anything,
 * which makes the dropdown look like a translucent ghost. Painting
 * a solid color underneath the translucent panel layer fixes it.
 * Using background-color + background-image instead of multi-layer
 * shorthand so older browsers can't drop the property.
 * ────────────────────────────────────────────────────────────── */
.theme-dropdown {
  background-color: var(--bg, #050713) !important;
  background-image: linear-gradient(180deg, var(--panel-strong, var(--panel)), var(--panel-strong, var(--panel))) !important;
  z-index: 70 !important;
}
html.light .theme-dropdown {
  background-color: var(--bg, #ece8f4) !important;
}


/* ──────────────────────────────────────────────────────────────
 * 3. REAL THEMATIC SKINS
 * ─────────────────────────────────────────────────────────────
 * The base color tokens are in themes.css. This layer adds the
 * *thematic* parts: typography swaps, decoration patterns, panel
 * texture overlays. The user explicitly asked for skins to feel
 * like distinct skins, not just palette flips.
 * ────────────────────────────────────────────────────────────── */

/* ─── NEON SKIN ────────────────────────────────────────────────
 * Synthwave: chunky Orbitron headings everywhere, grid backdrop
 * pinned to the body, slight chromatic feel on panels.
 * ────────────────────────────────────────────────────────────── */
html[data-theme="neon"] body {
  position: relative;
}
html[data-theme="neon"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Perspective grid floor at the bottom of the viewport */
  background-image:
    /* Horizontal grid lines */
    linear-gradient(to bottom,
      transparent 0%,
      transparent 70%,
      rgba(233,70,189,.05) 70%,
      rgba(233,70,189,.05) 71%,
      transparent 71%,
      transparent 76%,
      rgba(0,240,255,.06) 76%,
      rgba(0,240,255,.06) 77%,
      transparent 77%,
      transparent 84%,
      rgba(233,70,189,.07) 84%,
      rgba(233,70,189,.07) 85%,
      transparent 85%),
    /* Diagonal perspective lines, faint */
    repeating-linear-gradient(105deg,
      transparent 0,
      transparent 80px,
      rgba(0,240,255,.025) 80px,
      rgba(0,240,255,.025) 81px),
    repeating-linear-gradient(75deg,
      transparent 0,
      transparent 80px,
      rgba(233,70,189,.025) 80px,
      rgba(233,70,189,.025) 81px);
  mix-blend-mode: screen;
}
html[data-theme="neon"] .hero-title,
html[data-theme="neon"] .section-title,
html[data-theme="neon"] .panel-title,
html[data-theme="neon"] .header-brand {
  font-family: 'Orbitron', 'Arial Black', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: .05em;
  text-shadow: 0 0 24px rgba(233,70,189,.4), 0 0 8px rgba(0,240,255,.25);
}
html[data-theme="neon"] .header-brand span {
  color: #00f0ff;
}
/* Pink/cyan double-edge on buttons */
html[data-theme="neon"] .btn-primary,
html[data-theme="neon"] .hero-cta,
html[data-theme="neon"] .cta-btn {
  border: 1px solid rgba(0,240,255,.4) !important;
  text-shadow: 0 0 8px rgba(255,255,255,.4);
}

/* ─── OCEAN SKIN ───────────────────────────────────────────────
 * Underwater: italic serif display type, drifting bubble decoration,
 * caustic-light highlights on panels.
 * ────────────────────────────────────────────────────────────── */
html[data-theme="ocean"] .hero-title,
html[data-theme="ocean"] .section-title,
html[data-theme="ocean"] .hero-title-simple {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}
html[data-theme="ocean"] .panel-title {
  font-family: Georgia, serif !important;
  font-style: italic;
  font-weight: 600;
  letter-spacing: .02em;
}
html[data-theme="ocean"] .header-brand {
  font-family: Georgia, serif !important;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
}
/* Caustic god-ray light through panels
 * NOTE: explore-modal-dialog is also a .surface-panel but needs to scroll
 * (it sets overflow-y:auto + max-height). overflow:hidden here would
 * clobber that, so the modal is excluded. The caustic ::after still
 * renders inside the modal — it just doesn't clip the dialog.
 */
html[data-theme="ocean"] .surface-panel:not(.explore-modal-dialog),
html[data-theme="ocean"] .hero-panel {
  position: relative;
  overflow: hidden;
}
html[data-theme="ocean"] .explore-modal-dialog.surface-panel {
  position: relative;
}
html[data-theme="ocean"] .surface-panel::after,
html[data-theme="ocean"] .hero-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 30% at 30% 0%, rgba(125,211,252,.08), transparent 60%),
    radial-gradient(ellipse 50% 25% at 75% 0%, rgba(125,211,252,.05), transparent 60%);
  z-index: 1;
}
/* Bubble decoration pinned to viewport */
html[data-theme="ocean"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle 3px at 10% 70%, rgba(125,211,252,.25), transparent 4px),
    radial-gradient(circle 2px at 15% 50%, rgba(125,211,252,.2),  transparent 3px),
    radial-gradient(circle 4px at 8%  30%, rgba(125,211,252,.18), transparent 5px),
    radial-gradient(circle 2px at 88% 65%, rgba(125,211,252,.22), transparent 3px),
    radial-gradient(circle 3px at 92% 45%, rgba(125,211,252,.18), transparent 4px),
    radial-gradient(circle 2px at 85% 25%, rgba(125,211,252,.16), transparent 3px);
}

/* ─── NATURE SKIN ──────────────────────────────────────────────
 * Forest: humanist serif headings, leaf accent on panels, warm paper
 * grain texture overlay.
 * ────────────────────────────────────────────────────────────── */
html[data-theme="nature"] .hero-title,
html[data-theme="nature"] .section-title,
html[data-theme="nature"] .hero-title-simple,
html[data-theme="nature"] .panel-title {
  font-family: Georgia, 'Cambria', 'Times New Roman', serif !important;
  font-weight: 700 !important;
  letter-spacing: .005em !important;
}
html[data-theme="nature"] .header-brand {
  font-family: Georgia, serif !important;
  font-weight: 700;
  letter-spacing: 0;
}
html[data-theme="nature"] .header-brand span { color: #a3e635; }
/* Leaf-paper grain over panels (subtle) */
html[data-theme="nature"] .surface-panel::after,
html[data-theme="nature"] .hero-panel::after,
html[data-theme="nature"] .mini-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(74,222,128,.05) 0%, transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(163,230,53,.04) 0%, transparent 35%);
  border-radius: inherit;
  z-index: 1;
}
html[data-theme="nature"] .surface-panel,
html[data-theme="nature"] .hero-panel,
html[data-theme="nature"] .mini-panel {
  position: relative;
}
/* Firefly speckle on the body */
html[data-theme="nature"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle 2px at 12% 24%, rgba(163,230,53,.5), transparent 3px),
    radial-gradient(circle 1.5px at 20% 60%, rgba(74,222,128,.45), transparent 2px),
    radial-gradient(circle 2px at 80% 40%, rgba(163,230,53,.4),  transparent 3px),
    radial-gradient(circle 1.5px at 88% 78%, rgba(74,222,128,.4), transparent 2px),
    radial-gradient(circle 2px at 50% 20%, rgba(163,230,53,.35),  transparent 3px);
  animation: pf-firefly-drift 12s ease-in-out infinite alternate;
}
@keyframes pf-firefly-drift {
  from { transform: translateY(0); opacity: .85; }
  to   { transform: translateY(-6px); opacity: 1; }
}

/* ─── DEFAULT (COSMIC) SKIN ──────────────────────────────────
 * The default theme stays clean. No extra decoration beyond what
 * portal.css already provides.
 * ─────────────────────────────────────────────────────────── */

/* Light mode tones for skin decorations — ease them down so they
 * don't overwhelm a bright background. */
html[data-theme="neon"].light body::after,
html[data-theme="ocean"].light body::after,
html[data-theme="nature"].light body::after {
  opacity: .55;
}

/* ─── BODY CONTENT STAYS ABOVE THE DECOR LAYER ───
 * The body::after decor is at z-index 0. We need content elements
 * to sit above it. We do NOT touch positioning of fixed/absolute
 * elements (.site-header, .ambient, #stars-bg) since changing their
 * positioning would yank them out of their layout role. Targeting
 * <main>, <header.site-header> kept as-is, <section>, and footer.
 */
html[data-theme="neon"] body > main,
html[data-theme="ocean"] body > main,
html[data-theme="nature"] body > main,
html[data-theme="neon"] body > section,
html[data-theme="ocean"] body > section,
html[data-theme="nature"] body > section,
html[data-theme="neon"] body > footer,
html[data-theme="ocean"] body > footer,
html[data-theme="nature"] body > footer {
  position: relative;
  z-index: 1;
}