/* ========================================
   Player theme — identidad premium del jugador.
   Paleta por keys (users.accent, mismas que el tema de salas): el wrapper
   expone --p-accent que consumen el HUD del perfil, el nombre tintado en
   rankings/comentarios (link_to_player → data-player-accent), los marcos
   de avatar (users.avatar_frame), la vitrina de logros y las Stats Pro.
   Markup en profiles/show|edit|_identity|_achievements y players/show.
   ======================================== */

/* ─── Paleta (espejo de .sala-theme[data-accent]) ─── */
[data-player-accent], .profile-hud[data-accent] {
  --p-accent: var(--accent);
  --p-accent-dim: var(--accent-dim);
}
[data-player-accent="gold"],   .profile-hud[data-accent="gold"]   { --p-accent: var(--gold);  --p-accent-dim: rgba(255, 210, 63, 0.16); }
[data-player-accent="peach"],  .profile-hud[data-accent="peach"]  { --p-accent: var(--peach); --p-accent-dim: var(--peach-dim); }
[data-player-accent="sky"],    .profile-hud[data-accent="sky"]    { --p-accent: var(--sky);   --p-accent-dim: var(--sky-dim); }
[data-player-accent="sage"],   .profile-hud[data-accent="sage"]   { --p-accent: var(--sage);  --p-accent-dim: var(--sage-dim); }
[data-player-accent="violet"], .profile-hud[data-accent="violet"] { --p-accent: #c084fc;      --p-accent-dim: rgba(192, 132, 252, 0.16); }

/* ─── Presencia: nombre tintado en rankings/comentarios/sala picks ───
   Solo se emite con premium vigente (ver link_to_player). */
.player-link[data-player-accent] {
  color: var(--p-accent);
  text-shadow: 0 0 14px var(--p-accent-dim);
}

/* ─── HUD del perfil tematizado ─── */
.profile-hud { position: relative; overflow: hidden; }
.profile-hud[data-accent]:not([data-accent=""]) {
  border-color: var(--p-accent-dim);
}
.profile-hud[data-accent]:not([data-accent=""]) .profile-hud__name { color: var(--p-accent); }
.profile-hud[data-accent]:not([data-accent=""]) .profile-hud__section-cap > b { color: var(--p-accent); }

/* La portada (users.cover_image) ahora es la banda superior del banner header:
   ver .profile-hud__cover en profile-page.css (incluye el tint premium/themed). */
.profile-hud { isolation: isolate; }

/* Título equipado («Nostradamus») + lema bajo el nombre */
.player-title {
  display: inline-block;
  font-family: var(--font-scoreboard);
  font-size: 15px; letter-spacing: .08em;
  color: var(--p-accent, var(--gold));
  margin: 2px 0;
}
.profile-hud__motto {
  font-size: 12.5px; font-style: italic; color: var(--fg-2);
  margin: 2px 0 4px;
}

/* ─── Marcos de avatar (users.avatar_frame) — 100% CSS ───
   Bisel metálico acuñado (estático, sin giro): la foto queda "encajada" y el
   anillo grueso vive en ::before (con brillo fijo arriba + sombra abajo = 3D).
   ::after es una capa decorativa opcional (línea grabada en Laureles, enamel
   verde en Césped). Sin emojis. */
.avatar[class*="-frame-"] {
  overflow: visible;
  position: relative;
  border-color: transparent;
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.55));
}
.avatar[class*="-frame-"] > .img {
  position: relative;
  z-index: 1;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6), inset 0 4px 10px rgba(0, 0, 0, 0.5);
}
/* Bisel: anillo grueso por encima del borde de la foto. */
.avatar[class*="-frame-"]::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 74%);
          mask: radial-gradient(farthest-side, transparent 72%, #000 74%);
  /* Capa de brillo (shimmer) que barre por encima del metal del bisel. */
  background:
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%),
    var(--metal, transparent);
  background-size: 250% 250%, 100% 100%;
  background-position: 200% 0, 0 0;
  background-repeat: no-repeat;
  animation: frame-shimmer 3.6s ease-in-out infinite;
  box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.55),
              inset 0 -9px 14px rgba(0, 0, 0, 0.6),
              inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}
@keyframes frame-shimmer {
  0%       { background-position: 200% 0, 0 0; }
  55%, 100% { background-position: -90% 0, 0 0; }
}
/* Capa decorativa opcional (off por defecto). */
.avatar[class*="-frame-"]::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  display: none;
}

/* Gradiente de oro pulido reutilizado (Dorado + Laureles). */
.avatar.-frame-dorado::before,
.avatar.-frame-laureles::before {
  --metal: conic-gradient(from 270deg, #5a3f06, #a8801c, #e3bb46, #fff4c8, #e3bb46, #a8801c, #5a3f06, #a8801c, #e3bb46, #fff4c8, #e3bb46, #a8801c, #5a3f06);
}

/* Dorado · pulido */
.avatar.-frame-dorado { box-shadow: 0 0 16px rgba(255, 210, 63, 0.30); }

/* Laureles · doble bisel (línea grabada interior) */
.avatar.-frame-laureles { box-shadow: 0 0 16px rgba(255, 210, 63, 0.30); }
.avatar.-frame-laureles::after {
  display: block;
  background: rgba(0, 0, 0, 0.55);
  -webkit-mask: radial-gradient(farthest-side, transparent 75%, #000 76%, #000 78%, transparent 79%);
          mask: radial-gradient(farthest-side, transparent 75%, #000 76%, #000 78%, transparent 79%);
}

/* En llamas · brasas (anillo oscuro con vetas incandescentes) */
.avatar.-frame-fuego { box-shadow: 0 0 16px rgba(255, 120, 70, 0.35); }
.avatar.-frame-fuego::before {
  --metal: conic-gradient(from 0deg, #1a0a0a, #ff6a3c, #2a0d0d, #ffe07a, #1a0a0a, #ff6a3c, #2a0d0d, #ffe07a, #1a0a0a);
}

/* Césped · acero + esmeralda (bisel plata con enamel verde) */
.avatar.-frame-cesped { box-shadow: 0 0 14px rgba(47, 207, 106, 0.28); }
.avatar.-frame-cesped::before {
  --metal: conic-gradient(from 270deg, #2b3038, #7e8896, #eef2f6, #5a6470, #2b3038, #7e8896, #eef2f6, #5a6470, #2b3038);
}
.avatar.-frame-cesped::after {
  display: block;
  background: conic-gradient(from 270deg, #0d4d24, #2f9e57, #9ff0c0, #15743a, #0d4d24, #2f9e57, #9ff0c0, #15743a, #0d4d24);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  -webkit-mask: radial-gradient(farthest-side, transparent 75%, #000 77%, #000 86%, transparent 88%);
          mask: radial-gradient(farthest-side, transparent 75%, #000 77%, #000 86%, transparent 88%);
}

/* ─── Marcos ilustrados (Frame render_kind=image) ───
   La foto va en .avatar__photo, encajada en el hueco medido (--fr-*), y el PNG
   del marco se superpone al 100%. Un solo asset sirve para cualquier tamaño. */
.avatar.-framed {
  position: relative;
  overflow: visible;
  background: none;
  border: 0;
}
.avatar.-framed > .avatar__photo {
  position: absolute;
  top: var(--fr-top, 52%);
  left: var(--fr-left, 50%);
  transform: translate(-50%, -50%);
  width: var(--fr-sz, 55%);
  height: var(--fr-sz, 55%);
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--bg-2, #1a1d1b);
  z-index: 1;
}
.avatar.-framed > .avatar__photo > .img { width: 100%; height: 100%; object-fit: cover; }
.avatar.-framed > .avatar__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* ── Animaciones de marcos imagen (configurable por marco, usa --glow) ── */
/* Aura: glow del marco que respira detrás. */
.avatar.-framed.-anim-aura::before {
  content: "";
  position: absolute; inset: -12%;
  border-radius: 50%;
  z-index: 0;
  background: radial-gradient(circle, var(--glow, rgba(255, 255, 255, 0.4)), transparent 70%);
  animation: frame-aura 2.6s ease-in-out infinite;
}
@keyframes frame-aura {
  0%, 100% { opacity: 0.45; transform: scale(0.96); }
  50%      { opacity: 0.9;  transform: scale(1.08); }
}
/* Halo: anillo de luz girando detrás (rareza alta). */
.avatar.-framed.-anim-halo::before {
  content: "";
  position: absolute; inset: -10%;
  border-radius: 50%;
  z-index: 0;
  filter: blur(6px);
  background: conic-gradient(from 0deg, transparent, var(--glow, rgba(255, 255, 255, 0.5)), transparent 45%, var(--glow, rgba(255, 255, 255, 0.5)), transparent);
  animation: frame-spin 4s linear infinite;
}
@keyframes frame-spin { to { transform: rotate(360deg); } }
/* Orbit: chispas orbitando. */
.avatar.-framed > .avatar__orbit {
  position: absolute; inset: -2%;
  z-index: 4;
  pointer-events: none;
  animation: frame-spin 6s linear infinite;
}
.avatar.-framed > .avatar__orbit > i {
  position: absolute; top: -3px; left: 50%;
  width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--glow, #fff) 60%, transparent);
  box-shadow: 0 0 8px var(--glow, #fff);
}
.avatar.-framed > .avatar__orbit > i:nth-child(2) { top: auto; bottom: -3px; left: 18%; }
.avatar.-framed > .avatar__orbit > i:nth-child(3) { top: 50%; right: -3px; left: auto; margin-top: -3.5px; }

@media (prefers-reduced-motion: reduce) {
  .avatar[class*="-frame-"]::before,
  .avatar.-framed.-anim-aura::before,
  .avatar.-framed.-anim-halo::before,
  .avatar.-framed > .avatar__orbit { animation: none; }
}

/* ─── Vitrina de logros (badges fijados) ─── */
.profile-hud__showcase .row {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
}
.profile-hud__showcase-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 104px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255, 210, 63, 0.10), rgba(255, 210, 63, 0.03));
  border: 1px solid rgba(255, 210, 63, 0.35);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 18px rgba(255, 210, 63, 0.10);
}
.profile-hud__showcase-item > .icon { color: var(--gold); }
.profile-hud__showcase-item > .nm {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-2); text-align: center;
}
.profile-hud__showcase-item > .unpin {
  position: absolute; top: 4px; right: 4px;
}
.profile-hud__showcase-item > .unpin > button {
  border: none; background: none; color: var(--muted);
  font-size: 11px; cursor: pointer; padding: 2px 5px;
}
.profile-hud__showcase-item > .unpin > button:hover { color: var(--coral); }

/* Toggle "Destacar" sobre cada logro desbloqueado (perfil propio premium) */
.profile-hud__ach { position: relative; }
.profile-hud__ach > .pin {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  opacity: 0; transition: opacity 120ms;
}
.profile-hud__ach:hover > .pin,
.profile-hud__ach:focus-within > .pin { opacity: 1; }
.profile-hud__ach > .pin > button {
  border: 1px solid var(--line-strong); background: var(--bg-2);
  color: var(--fg-2); font-family: var(--mono); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; cursor: pointer;
}
.profile-hud__ach > .pin > button:hover { color: var(--gold); border-color: var(--gold); }
.profile-hud__ach > .pin.-on > button { color: var(--gold); border-color: rgba(255, 210, 63, 0.5); }
.profile-hud__ach.-pinned { outline: 1px solid rgba(255, 210, 63, 0.45); outline-offset: 2px; border-radius: var(--radius); }

/* ─── Stats Pro (perfil propio premium) ─── */
.stats-pro { display: flex; flex-direction: column; gap: 14px; }
.stats-pro .cap {
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.stats-pro__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.stats-pro__grid > .stat {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px;
}
.stats-pro__grid > .stat > .lbl { font-size: 11px; color: var(--muted); }
.stats-pro__grid > .stat > .val {
  font-family: var(--font-scoreboard); font-size: 26px; line-height: 1; color: var(--ink-bright);
}
.stats-pro__grid > .stat > .val.-hot { color: var(--coral); }

.stats-pro__versus .bars { display: flex; flex-direction: column; gap: 8px; }
.stats-pro__versus .bar {
  position: relative; height: 26px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line); overflow: hidden;
}
.stats-pro__versus .bar > i {
  position: absolute; inset: 0 auto 0 0; display: block;
  border-radius: 999px;
}
.stats-pro__versus .bar.-you > i { background: linear-gradient(90deg, var(--accent-2), var(--accent)); opacity: .55; }
.stats-pro__versus .bar.-app > i { background: var(--line-strong); }
.stats-pro__versus .bar > .tag {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; height: 100%;
  padding: 0 12px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}

.stats-pro__dist .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stats-pro__dist .chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px;
}
.stats-pro__dist .chip > b { font-family: var(--font-scoreboard); font-size: 16px; letter-spacing: .06em; }
.stats-pro__dist .chip > i { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--muted); }

.stats-pro__trn .trow {
  display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto auto;
  align-items: center; gap: 10px; padding: 5px 0;
}
.stats-pro__trn .nm { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-pro__trn .track {
  height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden;
}
.stats-pro__trn .track > i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green2)); }
.stats-pro__trn .pct { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--ink); min-width: 38px; text-align: right; }
.stats-pro__trn .n { font-family: var(--mono); font-size: 10px; color: var(--muted); }

@media (max-width: 559px) {
  .stats-pro__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Pickers del form de personalización (profiles/edit) ─── */
.accent-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.accent-picker .accent-opt { cursor: pointer; }
.accent-picker input { position: absolute; opacity: 0; pointer-events: none; }
.accent-picker .sw {
  display: block; width: 30px; height: 30px; border-radius: 50%;
  background: var(--p-accent, var(--accent));
  border: 2px solid transparent;
  transition: transform 120ms, border-color 120ms;
}
.accent-picker .sw.-none {
  background: var(--bg-2);
  border-color: var(--line-strong);
}
.accent-picker .accent-opt:hover .sw { transform: scale(1.1); }
.accent-picker input:checked + .sw { border-color: var(--ink-bright); transform: scale(1.1); }

/* Grid responsive: en mobile las opciones llenan el ancho en vez de
   envolver con huecos desparejos. */
.frame-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}
.frame-picker .frame-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); cursor: pointer; text-align: center;
  transition: border-color 150ms, transform 150ms;
}
.frame-picker .frame-opt:hover:not(.-locked) { transform: translateY(-1px); border-color: var(--line-strong); }
.frame-picker .frame-opt:has(input:checked) { border-color: var(--accent); }
.frame-picker .frame-opt.-locked { opacity: .45; cursor: not-allowed; }
.frame-picker input { position: absolute; opacity: 0; pointer-events: none; }
.frame-picker .fp-ava {
  width: 40px; height: 40px; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--card); color: var(--fg-2);
  margin: 4px;
}
.frame-picker .nm { font-size: 11px; font-weight: 600; }
.frame-picker .req { font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.cover-current { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.cover-current .th { width: 120px; height: 48px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line-strong); }
.cover-current .rm { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-2); cursor: pointer; }

/* Divider "— Personalización" dentro de la card única del edit. */
.boleteria-form__divider {
  display: block;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px dashed var(--line-strong);
}