/* ─────────────────────────────────────────────────────────────────────────────
 * perfil.css — Perfil de jugador (/u/<usuario> y /profile/) y sus diseños.
 *
 * La estructura es la misma para todos (la arma /js/perfil.js); cada diseño
 * se elige con <body data-tema="…"> y aquí define sus variables (--pf-*) y
 * sus detalles propios. La capa decorativa va en #pf-fondo (fija, detrás).
 * Diseños: nebula (por defecto) · arcade · portada · tapete · aurora.
 * ──────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh; overflow-x: hidden;
  background: var(--pf-bg); color: var(--pf-fg);
  font-family: var(--pf-f-texto); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--pf-acento); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ── Capa de fondo y barra superior ─────────────────────────────────────── */
.pf-fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pf-fondo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 32px;
  background: var(--pf-top-bg); border-bottom: 1px solid var(--pf-top-borde);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.pf-logo {
  font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 21px; letter-spacing: -.01em;
  text-decoration: none; color: #fff;
}
.pf-logo span { color: #f0c060; }
.tj-auth-widget { display: flex; align-items: center; }

.pf-main { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 36px 24px 90px; }

/* ── Estados ─────────────────────────────────────────────────────────────── */
.pf-cargando { display: grid; place-items: center; gap: 14px; padding: 90px 0; }
.pf-cargando i {
  display: block; border-radius: 12px;
  background: linear-gradient(90deg, rgba(128,128,128,.12) 25%, rgba(128,128,128,.24) 50%, rgba(128,128,128,.12) 75%);
  background-size: 200% 100%; animation: pf-brillo 1.4s infinite;
}
@keyframes pf-brillo { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
.pf-error { text-align: center; padding: 90px 16px; }
.pf-error .pf-error-ico { font-size: 54px; line-height: 1; margin-bottom: 16px; color: var(--pf-fg3); }
.pf-error h2 { font-family: var(--pf-f-titulo); font-size: 26px; margin-bottom: 8px; }
.pf-error p { color: var(--pf-fg2); }
.pf-error a { display: inline-block; margin-top: 18px; color: var(--pf-acento); }

/* ── Tarjetas base ───────────────────────────────────────────────────────── */
.pf-hero, .pf-cifra, .pf-bloque {
  position: relative;
  background: var(--pf-card); border: var(--pf-card-borde);
  border-radius: var(--pf-radio); box-shadow: var(--pf-sombra);
}

/* ── Portada del perfil (hero) ───────────────────────────────────────────── */
.pf-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "av id acc" "av xp xp";
  align-items: center; gap: 12px 30px;
  padding: 34px 36px; margin-bottom: 20px;   /* sin overflow:hidden: la burbuja y la corona asoman por arriba */
}
.pf-marquesina { display: none; grid-area: marq; }
.pf-avatar { grid-area: av; position: relative; width: var(--pf-av, 136px); height: var(--pf-av, 136px); flex-shrink: 0; }
.pf-avatar-marco { position: relative; width: 100%; height: 100%; border-radius: var(--pf-av-radio, 50%); }
.pf-avatar-marco img, .pf-inicial {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--pf-av-radio, 50%);
}
.pf-avatar-marco img { cursor: zoom-in; }
.pf-inicial {
  display: grid; place-items: center;
  font-family: var(--pf-f-titulo); font-weight: 900; font-size: calc(var(--pf-av, 136px) * .42);
  background: var(--pf-inicial-bg); color: var(--pf-inicial-fg);
}
.pf-avatar-editar {
  position: absolute; left: 2px; bottom: 2px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 16px;
  background: var(--pf-btn1-bg); color: var(--pf-btn1-fg);
  border: 3px solid var(--pf-bg); box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.pf-sello {
  position: absolute; right: -6px; bottom: -4px; z-index: 2;
  min-width: 50px; height: 50px; padding: 0 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  border-radius: 16px; background: var(--pf-sello-bg); color: var(--pf-sello-fg);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.pf-sello small { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.pf-sello b { font-family: var(--pf-f-num, var(--pf-f-titulo)); font-size: 21px; font-weight: 900; }
.pf-pie-foto { display: none; }

.pf-id { grid-area: id; min-width: 0; }
.pf-kicker {
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pf-acento); margin-bottom: 8px;
}
.pf-nombre {
  font-family: var(--pf-f-titulo); font-weight: 900;
  font-size: clamp(30px, 4.6vw, 48px); line-height: 1.04; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.pf-handle { margin-top: 8px; color: var(--pf-fg2); font-size: 15px; }
.pf-sep { margin: 0 8px; opacity: .5; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--pf-chip-radio, 100px);
  font-size: 12.5px; font-weight: 600; line-height: 1.2;
  background: var(--pf-chip-bg); color: var(--pf-chip-fg); border: 1px solid var(--pf-chip-borde);
}
.pf-chip.en-linea::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.22);
  animation: pf-late 2s ease-in-out infinite;
}
@keyframes pf-late { 50% { box-shadow: 0 0 0 6px rgba(34,197,94,.05); } }

.pf-acciones { grid-area: acc; align-self: start; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 330px; }
.pf-btn {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: var(--pf-btn-radio, 12px);
  font-family: var(--pf-f-texto); font-size: 13.5px; font-weight: 700; line-height: 1.1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--pf-btn-bg); color: var(--pf-btn-fg); border: 1px solid var(--pf-btn-borde);
  transition: transform .15s, filter .15s, background .2s, box-shadow .2s;
}
.pf-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.pf-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.pf-btn.primario { background: var(--pf-btn1-bg); color: var(--pf-btn1-fg); border-color: transparent; }
.pf-btn.fantasma { background: transparent; border-color: transparent; color: var(--pf-fg2); padding-left: 8px; padding-right: 8px; }
.pf-btn.exito { background: var(--pf-chip-bg); color: var(--pf-ok); border-color: var(--pf-chip-borde); }
.pf-btn.espera { background: var(--pf-chip-bg); color: var(--pf-empate); border-color: var(--pf-chip-borde); }
.pf-btn .tji, .pf-chip .tji { font-size: 1.15em; }   /* íconos de /js/iconos.js, un poco más grandes que la letra */
.pf-insignia {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 100px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center; border: 2px solid var(--pf-bg);
}

.pf-xp { grid-area: xp; }
.pf-xp-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: var(--pf-fg2); margin-bottom: 8px; }
.pf-xp-barra { height: 10px; border-radius: 100px; background: var(--pf-pista); overflow: hidden; }
.pf-xp-relleno { height: 100%; width: 0; border-radius: inherit; background: var(--pf-barra); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.pf-xp-meta { font-size: 12px; color: var(--pf-fg3); margin-top: 7px; }

/* ── Cifras ──────────────────────────────────────────────────────────────── */
.pf-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.pf-cifra { padding: 20px 22px; border-radius: var(--pf-radio-sm); }
.pf-cifra-num {
  font-family: var(--pf-f-num, var(--pf-f-titulo)); font-weight: 900; font-size: 34px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--pf-cifra-fg, var(--pf-fg));
}
.pf-cifra-lbl { margin-top: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pf-fg3); }
.pf-cifra-sub { margin-top: 3px; font-size: 12.5px; color: var(--pf-fg2); }

/* ── Columnas y bloques ──────────────────────────────────────────────────── */
.pf-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.pf-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pf-bloque { padding: 24px 26px; }
.pf-titulo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--pf-f-titulo); font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  margin-bottom: 18px;
}
.pf-contador {
  font-family: var(--pf-f-texto); font-size: 12px; font-weight: 700; letter-spacing: 0;
  padding: 4px 10px; border-radius: 100px; white-space: nowrap;
  background: var(--pf-chip-bg); color: var(--pf-fg2); border: 1px solid var(--pf-chip-borde);
}
.pf-vacio { color: var(--pf-fg3); font-size: 14px; list-style: none; }
.pf-vacio a, .pf-enlace { color: var(--pf-acento); background: none; border: 0; cursor: pointer; text-decoration: underline; font-weight: 700; }
.pf-mas { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--pf-acento); text-decoration: none; }

.pf-aviso {
  margin-bottom: 16px; padding: 12px 14px; border-radius: var(--pf-radio-sm);
  font-size: 13.5px; line-height: 1.5;
  background: rgba(234,179,8,.1); border: 1px solid rgba(234,179,8,.4); color: var(--pf-fg);
}
.pf-aviso .tji { color: #eab308; }
.pf-aviso .tji.ok { color: #22c55e; }
#pf-avisos:empty { display: none; }
#pf-avisos { margin-bottom: 18px; }

/* Juegos */
.pf-juegos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pf-juego {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px 14px; border-radius: var(--pf-radio-sm);
  background: var(--pf-card2); border: 1px solid var(--pf-linea); color: var(--pf-fg);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pf-juego:hover { transform: translateY(-2px); }
.pf-juego .pf-juego-esq { display: none; }   /* ícono en las esquinas del naipe: solo en Tapete */
.pf-juego-cab { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-juego-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 24px; background: var(--pf-chip-bg);
}
.pf-juego-nombre { flex: 1; min-width: 0; font-family: var(--pf-f-titulo); font-size: 16px; font-weight: 800; line-height: 1.15; }
.pf-juego-rango { font-size: 13px; font-weight: 900; color: var(--pf-acento); white-space: nowrap; }
.pf-juego-rango small { font-size: 11px; font-weight: 600; color: var(--pf-fg3); }
.pf-juego-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pf-juego-datos div { display: flex; flex-direction: column; min-width: 0; }
.pf-juego-datos b { font-family: var(--pf-f-num, inherit); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pf-juego-datos span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-fg3); }
.pf-juego-barra { height: 6px; border-radius: 100px; background: var(--pf-pista); overflow: hidden; }
.pf-juego-barra i, .pf-logros-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--pf-barra2, var(--pf-barra)); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.pf-juego-pie { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--pf-fg3); margin-top: -4px; }
.pf-juego-jugar { font-weight: 800; color: var(--pf-acento); text-decoration: none; }
.pf-juego-jugar:hover { text-decoration: underline; }

/* Historial */
.pf-partidas { list-style: none; display: flex; flex-direction: column; }
.pf-partida {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid var(--pf-linea); font-size: 14px;
}
.pf-partida:last-child { border-bottom: 0; }
.pf-partida-n { font-size: 11px; font-weight: 800; color: var(--pf-fg3); font-variant-numeric: tabular-nums; width: 18px; }
.pf-partida-ico { display: flex; font-size: 22px; }
.pf-partida-info { min-width: 0; display: flex; flex-direction: column; }
.pf-partida-info b { font-weight: 700; }
.pf-partida-info span { font-size: 12.5px; color: var(--pf-fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-partida-info a { color: var(--pf-fg2); text-decoration: none; font-weight: 600; }
.pf-partida-info a:hover { color: var(--pf-acento); }
.pf-resultado {
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; white-space: nowrap;
  color: var(--pf-res); background: color-mix(in srgb, var(--pf-res) 14%, transparent);
}
.pf-partida.es-victoria { --pf-res: var(--pf-ok); }
.pf-partida.es-derrota { --pf-res: var(--pf-mal); }
.pf-partida.es-empate { --pf-res: var(--pf-empate); }

/* Presentación */
.pf-cita { font-size: 15.5px; line-height: 1.7; color: var(--pf-fg2); white-space: pre-line; overflow-wrap: anywhere; }
.pf-candado p { color: var(--pf-fg2); font-size: 14px; }
.pf-candado a { color: var(--pf-acento); font-weight: 700; }

/* Logros */
.pf-logros-barra { height: 6px; border-radius: 100px; background: var(--pf-pista); overflow: hidden; margin: -6px 0 16px; }
.pf-medallas { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.pf-medalla {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 12px 6px 10px; border-radius: var(--pf-radio-sm);
  background: var(--pf-card2); border: 1px solid var(--pf-linea); cursor: default;
}
.pf-medalla-ico { font-size: 34px; line-height: 1; display: grid; }   /* insignia del logro (/js/iconos.js) */
.pf-medalla-info .pf-medalla-mini { font-size: 1.35em; vertical-align: -.3em; }
.pf-medalla-nombre { font-size: 11px; font-weight: 700; line-height: 1.25; color: var(--pf-fg2); }
.pf-medalla.falta { opacity: .38; }
.pf-medalla.falta .pf-medalla-ico { filter: grayscale(1); }
.pf-medalla[data-accion] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pf-medalla.sel, .pf-medalla:focus-visible { outline: 2px solid var(--pf-acento); outline-offset: 2px; }
.pf-medalla.falta.sel { opacity: .8; }
.pf-medalla.pf-oculta { display: none; }
.pf-medalla-info { margin-top: 14px; min-height: 2.7em; font-size: 13px; line-height: 1.4; color: var(--pf-fg3); }
.pf-medalla-info b { color: var(--pf-fg); font-weight: 700; }
.pf-medalla-info .ok { color: var(--pf-acento); font-weight: 700; }
button.pf-mas { margin-top: 6px; padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }

/* Amigos */
.pf-amigos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 12px 8px; }
.pf-amigo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; min-width: 0; }
.pf-amigo-av { position: relative; width: 56px; height: 56px; }
.pf-amigo-av img, .pf-amigo-av .pf-amigo-ini {
  width: 100%; height: 100%; border-radius: var(--pf-av-radio-mini, 50%); object-fit: cover;
  border: 2px solid var(--pf-linea);
}
.pf-amigo-ini { display: grid; place-items: center; font-weight: 900; font-size: 21px; background: var(--pf-inicial-bg); color: var(--pf-inicial-fg); }
.pf-amigo-av.en-linea::after {
  content: ''; position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%;
  background: #22c55e; border: 2.5px solid var(--pf-bg);
}
.pf-amigo-nombre { max-width: 100%; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-amigo-nivel { font-size: 11px; color: var(--pf-fg3); font-weight: 600; margin-top: -4px; }
.pf-amigo:hover .pf-amigo-nombre { color: var(--pf-acento); }
.pf-amigo-mas .pf-amigo-ini { background: var(--pf-chip-bg); color: var(--pf-fg2); font-size: 15px; }
.pf-buscar {
  width: 100%; margin-bottom: 14px; padding: 10px 14px; border-radius: var(--pf-btn-radio, 12px);
  background: var(--pf-chip-bg); border: 1px solid var(--pf-chip-borde); color: var(--pf-fg); font: inherit; font-size: 14px; outline: none;
}

/* Nombres anteriores */
.pf-nombres { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pf-nombres li { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.pf-nombres span { font-weight: 700; color: var(--pf-fg2); }
.pf-nombres time { color: var(--pf-fg3); font-size: 12.5px; }

.pf-pie { text-align: center; margin-top: 36px; }
.pf-pie a { color: var(--pf-fg3); font-size: 13px; text-decoration: none; }
.pf-pie a:hover { color: var(--pf-acento); }

/* ── Piezas neutras (iguales en todos los diseños) ───────────────────────── */
.pf-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 99994; display: flex; flex-direction: column; gap: 8px; }
.pf-toast {
  max-width: 320px; padding: 12px 18px; border-radius: 12px;
  font: 600 14px/1.4 'Space Grotesk', system-ui, sans-serif;
  background: #111827; color: #f3f4f6; border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 30px rgba(0,0,0,.35); animation: pf-entra .25s ease;
}
.pf-toast.ok { border-color: rgba(34,197,94,.5); color: #86efac; }
.pf-toast.err { border-color: rgba(239,68,68,.5); color: #fca5a5; }
@keyframes pf-entra { from { opacity: 0; transform: translateY(10px); } }

.pf-foto {
  position: fixed; inset: 0; z-index: 99993; display: grid; place-items: center;
  background: rgba(0,0,0,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  cursor: zoom-out; animation: pf-entra .2s ease;
}
.pf-foto img { max-width: min(92vw, 680px); max-height: 88vh; border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.8); }
.pf-foto button {
  position: fixed; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 18px; cursor: pointer;
}

/* Selector de diseño (hoja inferior; deja ver el perfil detrás) */
.pf-selector {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99991;   /* sobre el chat (#tj-chat-dock: 99990) */
  display: flex; justify-content: center; padding: 0 12px 12px;
  font-family: 'Space Grotesk', system-ui, sans-serif; color: #f3f4f6;
  animation: pf-sube .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes pf-sube { from { transform: translateY(100%); } }
.pf-selector-caja {
  width: 100%; max-width: 1040px; border-radius: 22px; padding: 18px 18px 14px;
  background: rgba(12,14,22,.94); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -10px 60px rgba(0,0,0,.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.pf-selector-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.pf-selector-cab h2 { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 800; }
.pf-selector-cab p { font-size: 13px; color: #9ca3af; margin-top: 2px; }
.pf-selector-x { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.pf-selector-lista { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory; }
.pf-opcion {
  scroll-snap-align: start; text-align: left; cursor: pointer; padding: 8px 8px 12px;
  border-radius: 16px; background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; transition: border-color .2s, transform .15s;
}
.pf-opcion:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.25); }
.pf-opcion[aria-pressed="true"] { border-color: #f0c060; background: rgba(240,192,96,.08); }
.pf-opcion-nombre { font-weight: 800; font-size: 14.5px; margin-top: 6px; padding: 0 4px; }
.pf-opcion-desc { font-size: 12px; color: #9ca3af; line-height: 1.35; padding: 0 4px; }
.pf-selector-pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.pf-btn-s {
  padding: 11px 18px; border-radius: 12px; font-weight: 700; font-size: 14px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #e5e7eb;
}
.pf-btn-s.primario { background: #f0c060; color: #1a1204; border-color: transparent; }
.pf-btn-s:disabled { opacity: .6; cursor: wait; }

/* Miniatura de cada diseño en el selector: usa las variables del tema. Los
   valores de aquí son los de por defecto, para que una miniatura no herede
   los del diseño que tiene puesto la página (las variables se heredan). */
.pf-mini {
  --pf-av-radio: 50%; --pf-mini-radio: 10px; --pf-mini-sombra: none; --pf-mini-av-sombra: none; --pf-mini-estilo: normal;
  position: relative; display: block; width: 100%; height: 104px; border-radius: 11px; overflow: hidden;
  background: var(--pf-mini-fondo);
}
.pf-mini-card {
  position: absolute; left: 10px; right: 10px; top: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 10px; padding: 10px;
  background: var(--pf-mini-card); border: var(--pf-mini-borde); border-radius: var(--pf-mini-radio, 10px);
  box-shadow: var(--pf-mini-sombra, none);
}
.pf-mini-av { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--pf-av-radio, 50%); background: var(--pf-mini-av); box-shadow: var(--pf-mini-av-sombra, none); }
.pf-mini-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.pf-mini-nombre { font-family: var(--pf-f-titulo); font-weight: 900; font-size: 22px; line-height: 1; color: var(--pf-mini-nombre); font-style: var(--pf-mini-estilo, normal); }
.pf-mini-linea { height: 6px; border-radius: 6px; background: var(--pf-mini-linea); width: 85%; }
.pf-mini-linea.corta { width: 50%; background: var(--pf-mini-acento); }

/* Marco de la foto (/css/marcos.css): reemplaza el aro propio de cada diseño */
.pf-avatar .tjm { --tjm-s: var(--pf-av, 136px); width: 100%; height: 100%; }
.pf-avatar.con-marco .pf-avatar-marco { padding: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; }
.pf-avatar.con-marco .pf-avatar-marco img, .pf-avatar.con-marco .pf-inicial { border: 0 !important; }
.pf-amigo-av .tjm img, .pf-amigo-av .tjm .pf-amigo-ini { border: 0; }

/* Selector de marco: grilla por grupos, con candado en los que faltan */
.pf-marcos { max-height: min(54vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 0 2px 4px; }
.pf-marcos-grupo { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9ca3af; margin: 14px 2px 8px; }
.pf-marcos-grupo:first-child { margin-top: 2px; }
.pf-marcos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.pf-marco-op {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px 8px 12px; border-radius: 16px; cursor: pointer; text-align: center; color: #e5e7eb;
  background: rgba(255,255,255,.04); border: 2px solid rgba(255,255,255,.08); transition: border-color .2s, transform .15s;
}
.pf-marco-op:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); }
.pf-marco-op[aria-pressed="true"] { border-color: #f0c060; background: rgba(240,192,96,.08); }
.pf-marco-foto { width: 64px; height: 64px; display: grid; place-items: center; margin: 4px 0 10px; }
.pf-marco-foto img, .pf-marco-ini { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; }
.pf-marco-ini { display: grid; place-items: center; font: 900 26px/1 'Outfit', sans-serif; color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); }
.pf-marco-nombre { font-weight: 800; font-size: 13.5px; }
.pf-marco-etq { font-size: 11.5px; color: #9ca3af; line-height: 1.3; }
.pf-marco-op.bloqueado .pf-marco-foto { filter: grayscale(.9) brightness(.65); }
.pf-marco-op.bloqueado .pf-marco-nombre { color: #9ca3af; }
.pf-marco-op .pf-marco-candado { position: absolute; top: 8px; right: 9px; font-size: 14px; color: #9ca3af; }
.pf-marco-animado { position: absolute; top: 8px; left: 10px; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: #f0c060; }
.pf-marco-estado { min-height: 20px; margin-top: 10px; font-size: 13px; color: #d1d5db; }

/* Burbuja de la foto: el dueño la toca para cambiarla; selector de frases */
.pf-avatar button.tjb { pointer-events: auto; cursor: pointer; }
.pf-avatar button.tjb:not(.tjb-vacia) { border: 0; }
.pf-burbujas-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-burbuja-op {
  padding: 8px 13px; border-radius: 100px; cursor: pointer; color: #e5e7eb;
  font: 700 13px/1.2 'Space Grotesk', system-ui, sans-serif;
  background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.1); transition: transform .15s, border-color .2s;
}
.pf-burbuja-op:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.25); }
.pf-burbuja-op[aria-pressed="true"] { background: #fff; color: #111827; border-color: #f0c060; }
.pf-burbuja-op.bloqueada { opacity: .45; }
.pf-duracion { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: #9ca3af; }
.pf-duracion button { padding: 7px 12px; border-radius: 10px; cursor: pointer; font: 700 13px/1 'Space Grotesk', system-ui, sans-serif; color: #e5e7eb; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
.pf-duracion button[aria-pressed="true"] { background: #f0c060; color: #1c1305; border-color: transparent; }

/* Modales del perfil propio (neutros) */
.pf-modal { position: fixed; inset: 0; z-index: 99992; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-family: 'Space Grotesk', system-ui, sans-serif; }
.pf-modal.oculto { display: none; }
.pf-modal-caja { width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; padding: 30px; border-radius: 20px; background: #0e1422; border: 1px solid rgba(255,255,255,.1); color: #e8eaf0; }
.pf-modal-caja h2 { font-family: 'Outfit', sans-serif; font-size: 21px; font-weight: 800; margin-bottom: 20px; }
.pf-campo { margin-bottom: 16px; }
.pf-campo > label { display: block; font-size: 13px; font-weight: 600; color: #8892a4; margin-bottom: 6px; }
.pf-campo input[type=text], .pf-campo input[type=password], .pf-campo textarea {
  width: 100%; padding: 11px 14px; border-radius: 10px; font: inherit; font-size: 14px;
  background: #141c2e; border: 1px solid rgba(255,255,255,.09); color: #e8eaf0; outline: none;
}
.pf-campo input:focus, .pf-campo textarea:focus { border-color: #a78bfa; }
.pf-campo textarea { resize: vertical; min-height: 90px; }
.pf-campo-nota { font-size: 11.5px; color: #64708a; margin-top: 5px; }
.pf-campo-nota a { color: #a78bfa; }
.pf-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: #9aa3b6; cursor: pointer; margin-top: 8px; }
.pf-check input { margin-top: 3px; }
.pf-modal-acciones { display: flex; gap: 10px; margin-top: 8px; }
.pf-modal-acciones .pf-btn-s.primario { flex: 1; background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #fff; }
.pf-alerta { display: none; padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; }
.pf-alerta.ver { display: block; }
.pf-alerta.err { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }
.pf-alerta.ok { background: rgba(22,163,74,.1); border: 1px solid rgba(22,163,74,.3); color: #86efac; }
.pf-verificar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-verificar button { padding: 7px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer; background: rgba(234,179,8,.18); border: 1px solid rgba(234,179,8,.45); color: inherit; }

/* ── Celular ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .pf-top { padding: 11px 16px; }
  .pf-main { padding: 18px 16px 70px; }
  .pf-hero {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "av" "id" "acc" "xp";
    justify-items: center; text-align: center; gap: 16px; padding: 28px 18px 22px;
  }
  .pf-avatar { --pf-av: 118px; }
  .pf-chips, .pf-acciones { justify-content: center; }
  .pf-acciones { max-width: none; }
  .pf-xp { width: 100%; text-align: left; }
  .pf-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  .pf-cifra { padding: 16px; }
  .pf-cifra-num { font-size: 28px; }
  .pf-cols { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .pf-col { display: contents; }
  .pf-bio { order: 1; } .pf-juegos { order: 2; } .pf-logros { order: 3; }
  .pf-historial { order: 4; } .pf-amigos { order: 5; } .pf-usernames { order: 6; }
  .pf-bloque { padding: 20px 18px; }
  .pf-juegos-lista { grid-template-columns: minmax(0, 1fr); }
  .pf-medallas { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .pf-partida { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pf-partida-n { display: none; }
  .pf-selector { padding: 0; }
  .pf-selector-caja { border-radius: 20px 20px 0 0; padding: 16px 14px calc(12px + env(safe-area-inset-bottom)); }
  .pf-selector-lista { grid-template-columns: repeat(5, 150px); }
  .pf-toasts { left: 16px; right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}


/* ═════════════════════════════════════════════════════════════════════════════
 * 1 · NÉBULA — espacio profundo, oro y violeta, cristal esmerilado
 * ═══════════════════════════════════════════════════════════════════════════ */
[data-tema="nebula"] {
  --pf-bg: #070a13; --pf-fg: #eef0f6; --pf-fg2: #a1a9bb; --pf-fg3: #64708a;
  --pf-card: rgba(13,18,32,.62); --pf-card2: rgba(255,255,255,.035);
  --pf-card-borde: 1px solid rgba(255,255,255,.08); --pf-linea: rgba(255,255,255,.08);
  --pf-radio: 24px; --pf-radio-sm: 18px;
  --pf-sombra: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px -30px rgba(0,0,0,.9);
  --pf-acento: #f0c060; --pf-acento2: #a78bfa;
  --pf-f-titulo: 'Outfit', sans-serif; --pf-f-texto: 'Space Grotesk', sans-serif;
  --pf-chip-bg: rgba(255,255,255,.05); --pf-chip-fg: #d3d8e4; --pf-chip-borde: rgba(255,255,255,.09);
  --pf-pista: rgba(255,255,255,.07);
  --pf-barra: linear-gradient(90deg, #7c3aed, #c084fc 45%, #f0c060);
  --pf-barra2: linear-gradient(90deg, #a78bfa, #f0c060);
  --pf-btn-bg: rgba(255,255,255,.05); --pf-btn-fg: #e8eaf0; --pf-btn-borde: rgba(255,255,255,.12);
  --pf-btn1-bg: linear-gradient(135deg, #f7d27e, #e0a93a); --pf-btn1-fg: #1c1305;
  --pf-top-bg: rgba(7,10,19,.72); --pf-top-borde: rgba(255,255,255,.07);
  --pf-inicial-bg: linear-gradient(135deg, #7c3aed, #2563eb); --pf-inicial-fg: #fff;
  --pf-sello-bg: linear-gradient(160deg, #fbe3a1, #e0a93a 60%, #b9832a); --pf-sello-fg: #231704;
  --pf-ok: #4ade80; --pf-mal: #f87171; --pf-empate: #facc15;
  --pf-mini-fondo: radial-gradient(circle at 15% 15%, rgba(240,192,96,.45), transparent 45%), radial-gradient(circle at 90% 100%, rgba(124,58,237,.6), transparent 55%), #070a13;
  --pf-mini-card: rgba(13,18,32,.7); --pf-mini-borde: 1px solid rgba(255,255,255,.12);
  --pf-mini-av: conic-gradient(#f0c060, #a78bfa, #60a5fa, #f0c060); --pf-mini-nombre: #fbe3a1;
  --pf-mini-linea: rgba(255,255,255,.18); --pf-mini-acento: linear-gradient(90deg, #7c3aed, #f0c060);
}
[data-tema="nebula"] .pf-fondo::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(240,192,96,.07) 1px, transparent 1.6px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 80%);
}
[data-tema="nebula"] .pf-hero, [data-tema="nebula"] .pf-cifra, [data-tema="nebula"] .pf-bloque {
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
[data-tema="nebula"] .pf-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(620px 260px at 0% 0%, rgba(124,58,237,.26), transparent 70%),
              radial-gradient(520px 240px at 100% 110%, rgba(240,192,96,.14), transparent 70%);
}
[data-tema="nebula"] .pf-hero::after {   /* filo de luz arriba */
  content: ''; position: absolute; left: 8%; right: 8%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,192,96,.7), rgba(167,139,250,.7), transparent);
}
[data-tema="nebula"] .pf-hero > * { position: relative; }
@property --pf-giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes pf-giro { to { --pf-giro: 360deg; } }
[data-tema="nebula"] .pf-avatar-marco {
  padding: 4px; background: conic-gradient(from var(--pf-giro), #f0c060, #a78bfa, #60a5fa, #f472b6, #f0c060);
  animation: pf-giro 9s linear infinite; box-shadow: 0 0 40px rgba(167,139,250,.35);
}
[data-tema="nebula"] .pf-avatar-marco img, [data-tema="nebula"] .pf-inicial { border: 3px solid #0b0f1c; }
[data-tema="nebula"] .pf-sello { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); border-radius: 0; min-width: 58px; height: 52px; box-shadow: none; }
[data-tema="nebula"] .pf-nombre {
  background: linear-gradient(180deg, #ffffff 35%, #f7d88c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-tema="nebula"] .pf-xp-relleno { position: relative; box-shadow: 0 0 14px rgba(192,132,252,.6); }
[data-tema="nebula"] .pf-xp-relleno::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); background-size: 40% 100%; background-repeat: no-repeat;
  animation: pf-reflejo 2.6s ease-in-out infinite;
}
@keyframes pf-reflejo { from { background-position: -60% 0; } to { background-position: 160% 0; } }
[data-tema="nebula"] .pf-cifra-num { background: linear-gradient(180deg, #fff 40%, #c9b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-tema="nebula"] .pf-cifra::before {
  content: ''; position: absolute; left: 22px; top: 0; width: 34px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #f0c060, #a78bfa);
}
[data-tema="nebula"] .pf-juego:hover { border-color: rgba(240,192,96,.35); box-shadow: 0 14px 34px -18px rgba(240,192,96,.35); }
[data-tema="nebula"] .pf-medalla.ganada { background: radial-gradient(circle at 50% 0%, rgba(240,192,96,.16), rgba(255,255,255,.03) 70%); border-color: rgba(240,192,96,.3); }


/* ═════════════════════════════════════════════════════════════════════════════
 * 2 · ARCADE — neón ochentero: sol retro, piso de rejilla, cifras en píxel
 * ═══════════════════════════════════════════════════════════════════════════ */
[data-tema="arcade"] {
  --pf-bg: #0a0314; --pf-fg: #f6f3ff; --pf-fg2: #d0c4ff; --pf-fg3: #9587c9;
  --pf-card: rgba(15,5,32,.8); --pf-card2: rgba(34,211,238,.05);
  --pf-card-borde: 2px solid #ff2bd6; --pf-linea: rgba(34,211,238,.32);
  --pf-radio: 6px; --pf-radio-sm: 4px; --pf-av-radio: 6px; --pf-av-radio-mini: 4px; --pf-btn-radio: 4px; --pf-chip-radio: 3px;
  --pf-sombra: 0 0 0 1px rgba(255,43,214,.3), 0 0 26px rgba(255,43,214,.38), inset 0 0 26px rgba(255,43,214,.12);
  --pf-acento: #22d3ee; --pf-acento2: #ff2bd6;
  --pf-f-titulo: 'Orbitron', sans-serif; --pf-f-texto: 'Space Grotesk', sans-serif; --pf-f-num: 'VT323', monospace;
  --pf-chip-bg: rgba(34,211,238,.08); --pf-chip-fg: #a5f3fc; --pf-chip-borde: rgba(34,211,238,.55);
  --pf-pista: rgba(255,255,255,.06);
  --pf-barra: repeating-linear-gradient(90deg, #a3e635 0 12px, transparent 12px 16px);
  --pf-barra2: repeating-linear-gradient(90deg, #22d3ee 0 8px, transparent 8px 11px);
  --pf-btn-bg: rgba(34,211,238,.06); --pf-btn-fg: #a5f3fc; --pf-btn-borde: #22d3ee;
  --pf-btn1-bg: #ff2bd6; --pf-btn1-fg: #1a0020;
  --pf-top-bg: rgba(8,2,18,.86); --pf-top-borde: #ff2bd6;
  --pf-inicial-bg: linear-gradient(135deg, #ff2bd6, #7c3aed 60%, #22d3ee); --pf-inicial-fg: #fff;
  --pf-sello-bg: #fde047; --pf-sello-fg: #1a0020;
  --pf-ok: #a3e635; --pf-mal: #ff4d6d; --pf-empate: #fde047;
  --pf-cifra-fg: #22d3ee;
  --pf-mini-fondo: linear-gradient(180deg, #0a0314 45%, #3b0a4f 70%, #ff2bd6 71%, #0a0314 72%, #1a0633 100%);
  --pf-mini-card: rgba(15,5,32,.85); --pf-mini-borde: 2px solid #ff2bd6; --pf-mini-radio: 4px;
  --pf-mini-sombra: 0 0 14px rgba(255,43,214,.6);
  --pf-mini-av: linear-gradient(135deg, #ff2bd6, #22d3ee); --pf-mini-av-sombra: 0 0 0 2px #22d3ee;
  --pf-mini-nombre: #fde047; --pf-mini-linea: rgba(34,211,238,.45); --pf-mini-acento: repeating-linear-gradient(90deg, #a3e635 0 6px, transparent 6px 8px);
}
body[data-tema="arcade"] { background: #0a0314 radial-gradient(ellipse at 50% 0%, #2a0a4a 0%, #0a0314 60%) fixed; }
[data-tema="arcade"] .pf-estrellas {
  position: absolute; inset: 0 0 45% 0; opacity: .8;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 18%, #fff, transparent), radial-gradient(1px 1px at 22% 42%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 37% 12%, #fde047, transparent), radial-gradient(1px 1px at 51% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 66% 9%, #fff, transparent), radial-gradient(1px 1px at 79% 36%, #a5f3fc, transparent),
    radial-gradient(1.5px 1.5px at 91% 16%, #fff, transparent), radial-gradient(1px 1px at 14% 64%, #fff, transparent),
    radial-gradient(1px 1px at 86% 58%, #fff, transparent), radial-gradient(1px 1px at 45% 55%, #f0abfc, transparent);
  animation: pf-titila 4s steps(2) infinite;
}
@keyframes pf-titila { 50% { opacity: .45; } }
[data-tema="arcade"] .pf-sol {
  position: absolute; left: 50%; bottom: 36vh; width: min(64vmin, 540px); aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; opacity: .78;
  background: linear-gradient(180deg, #fde047 0%, #fb923c 36%, #ff2bd6 70%, #9d174d 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 50%, transparent 50%), repeating-linear-gradient(180deg, #000 0 13px, transparent 13px 20px);
  mask-image: linear-gradient(180deg, #000 0 50%, transparent 50%), repeating-linear-gradient(180deg, #000 0 13px, transparent 13px 20px);
  filter: drop-shadow(0 0 50px rgba(255,43,214,.6));
}
[data-tema="arcade"] .pf-piso {
  position: absolute; left: -50%; right: -50%; bottom: 0; height: 40vh;
  background: linear-gradient(180deg, rgba(255,43,214,.25), transparent 30%),
              linear-gradient(to top, rgba(255,43,214,.85) 2px, transparent 2px),
              linear-gradient(to right, rgba(255,43,214,.85) 2px, transparent 2px);
  background-size: 100% 100%, 70px 70px, 70px 70px;
  transform: perspective(300px) rotateX(64deg); transform-origin: 50% 100%;
  animation: pf-avanza 1.3s linear infinite; opacity: .6;
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 90%); mask-image: linear-gradient(to top, #000 15%, transparent 90%);
}
@keyframes pf-avanza { to { background-position: 0 0, 0 70px, 0 70px; } }
[data-tema="arcade"] .pf-fondo::before {   /* línea de horizonte */
  content: ''; position: absolute; left: 0; right: 0; bottom: 40vh; height: 2px;
  background: #ff2bd6; box-shadow: 0 0 18px 4px rgba(255,43,214,.7);
}
[data-tema="arcade"] .pf-fondo::after {    /* líneas de barrido de monitor */
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
}
[data-tema="arcade"] .pf-top { box-shadow: 0 0 22px rgba(255,43,214,.45); }
[data-tema="arcade"] .pf-bloque:nth-child(even), [data-tema="arcade"] .pf-cifra:nth-child(even) {
  border-color: #22d3ee;
  box-shadow: 0 0 0 1px rgba(34,211,238,.3), 0 0 26px rgba(34,211,238,.32), inset 0 0 26px rgba(34,211,238,.1);
}
[data-tema="arcade"] .pf-kicker { font-family: 'VT323', monospace; font-size: 26px; letter-spacing: .08em; color: #fde047; text-shadow: 0 0 10px rgba(253,224,71,.7); margin-bottom: 4px; }
[data-tema="arcade"] .pf-kicker::after { content: ''; display: inline-block; width: .45em; height: .8em; margin-left: 8px; vertical-align: -.05em; background: currentColor; animation: pf-cursor 1s steps(1) infinite; }
@keyframes pf-cursor { 50% { opacity: 0; } }
[data-tema="arcade"] .pf-nombre {
  font-size: clamp(24px, 3.8vw, 40px); text-transform: uppercase; letter-spacing: .04em; line-height: 1.12; color: #fff;
  text-shadow: 3px 3px 0 #22d3ee, -2px -2px 0 #ff2bd6, 0 0 24px rgba(255,43,214,.75);
}
[data-tema="arcade"] .pf-handle { font-family: 'VT323', monospace; font-size: 22px; color: #a5f3fc; }
[data-tema="arcade"] .pf-avatar .tjm { --tjm-r: 6px; --tjm-rb: calc(6px + var(--g)); }
[data-tema="arcade"] .pf-avatar-marco { box-shadow: 0 0 0 3px #0a0314, 0 0 0 6px #22d3ee, 0 0 34px rgba(34,211,238,.8); }
[data-tema="arcade"] .pf-avatar-marco::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px), linear-gradient(135deg, rgba(255,43,214,.2), transparent 60%);
}
[data-tema="arcade"] .pf-sello { border-radius: 4px; font-family: 'VT323', monospace; box-shadow: 0 0 18px rgba(253,224,71,.7); }
[data-tema="arcade"] .pf-sello b { font-size: 30px; font-weight: 400; }
[data-tema="arcade"] .pf-btn { font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border-width: 2px; }
[data-tema="arcade"] .pf-btn:hover { box-shadow: 0 0 16px currentColor; filter: none; }
[data-tema="arcade"] .pf-btn.primario { box-shadow: 0 0 18px rgba(255,43,214,.7); }
[data-tema="arcade"] .pf-xp-fila { font-family: 'VT323', monospace; font-size: 20px; font-weight: 400; color: #a5f3fc; letter-spacing: .04em; }
[data-tema="arcade"] .pf-xp-barra { height: 18px; border-radius: 2px; border: 2px solid #a3e635; padding: 2px; background: #0a0314; }
[data-tema="arcade"] .pf-xp-relleno { border-radius: 0; filter: drop-shadow(0 0 6px #a3e635); }
[data-tema="arcade"] .pf-xp-meta { font-family: 'VT323', monospace; font-size: 18px; color: #9587c9; }
[data-tema="arcade"] .pf-cifra-num { font-size: 58px; font-weight: 400; text-shadow: 0 0 14px rgba(34,211,238,.8); }
[data-tema="arcade"] .pf-cifra:nth-child(even) .pf-cifra-num { color: #ff2bd6; text-shadow: 0 0 14px rgba(255,43,214,.8); }
[data-tema="arcade"] .pf-cifra-lbl { font-family: 'Orbitron', sans-serif; color: #fde047; font-size: 10.5px; letter-spacing: .2em; margin-top: 4px; }
[data-tema="arcade"] .pf-cifra-sub { font-family: 'VT323', monospace; font-size: 18px; color: #9587c9; }
[data-tema="arcade"] .pf-titulo { font-size: 15px; text-transform: uppercase; letter-spacing: .2em; color: #fde047; text-shadow: 0 0 12px rgba(253,224,71,.55); }
[data-tema="arcade"] .pf-titulo > span:first-child::before { content: ''; display: inline-block; margin-right: .6em; vertical-align: .05em; border-left: .55em solid #ff2bd6; border-top: .34em solid transparent; border-bottom: .34em solid transparent; filter: drop-shadow(0 0 6px #ff2bd6); }
[data-tema="arcade"] .pf-contador { font-family: 'VT323', monospace; font-size: 18px; font-weight: 400; border-radius: 2px; color: #a5f3fc; }
[data-tema="arcade"] .pf-juego { border-width: 1px; }
[data-tema="arcade"] .pf-juego:hover { border-color: #ff2bd6; box-shadow: 0 0 20px rgba(255,43,214,.5); }
[data-tema="arcade"] .pf-juego-ico { border-radius: 4px; border: 1px solid rgba(34,211,238,.4); }
[data-tema="arcade"] .pf-juego-nombre { font-size: 13.5px; text-transform: uppercase; letter-spacing: .08em; }
[data-tema="arcade"] .pf-juego-datos b { font-size: 30px; font-weight: 400; color: #22d3ee; }
[data-tema="arcade"] .pf-juego-rango { font-family: 'VT323', monospace; font-size: 22px; font-weight: 400; color: #fde047; }
[data-tema="arcade"] .pf-juego-barra { height: 10px; border-radius: 0; }
[data-tema="arcade"] .pf-juego-barra i { border-radius: 0; }
[data-tema="arcade"] .pf-partida { font-family: 'VT323', monospace; font-size: 21px; border-bottom-style: dashed; }
[data-tema="arcade"] .pf-partida-n { font-size: 20px; width: 26px; color: #ff2bd6; }
[data-tema="arcade"] .pf-partida-info span { font-size: 17px; }
[data-tema="arcade"] .pf-partida-info b { font-weight: 400; letter-spacing: .04em; }
[data-tema="arcade"] .pf-resultado { font-family: 'VT323', monospace; font-size: 20px; font-weight: 400; border-radius: 0; background: transparent; text-shadow: 0 0 10px var(--pf-res); padding: 0; }
[data-tema="arcade"] .pf-medalla { border-radius: 4px; border-color: rgba(34,211,238,.45); }
[data-tema="arcade"] .pf-medalla.ganada { box-shadow: inset 0 0 14px rgba(34,211,238,.25); }
[data-tema="arcade"] .pf-medalla.falta { border-style: dashed; }
[data-tema="arcade"] .pf-medalla-nombre { font-family: 'VT323', monospace; font-size: 15px; font-weight: 400; }
[data-tema="arcade"] .pf-logros-barra { height: 10px; border-radius: 0; }
[data-tema="arcade"] .pf-cita { font-family: 'VT323', monospace; font-size: 22px; line-height: 1.35; color: #e9e3ff; }


/* ═════════════════════════════════════════════════════════════════════════════
 * 3 · PORTADA — revista: papel, tipografía editorial, retrato en blanco y negro
 * ═══════════════════════════════════════════════════════════════════════════ */
[data-tema="portada"] {
  --pf-bg: #f2ede3; --pf-fg: #15120f; --pf-fg2: #4f4841; --pf-fg3: #8b8378;
  --pf-card: transparent; --pf-card2: transparent; --pf-card-borde: 0; --pf-linea: rgba(21,18,15,.18);
  --pf-radio: 0; --pf-radio-sm: 0; --pf-av-radio: 0; --pf-btn-radio: 0; --pf-chip-radio: 0; --pf-sombra: none;
  --pf-acento: #c8201a; --pf-acento2: #15120f;
  --pf-f-titulo: 'Playfair Display', Georgia, serif; --pf-f-texto: 'Inter', system-ui, sans-serif; --pf-f-num: 'Playfair Display', Georgia, serif;
  --pf-chip-bg: transparent; --pf-chip-fg: #15120f; --pf-chip-borde: #15120f;
  --pf-pista: rgba(21,18,15,.12); --pf-barra: #c8201a; --pf-barra2: #15120f;
  --pf-btn-bg: transparent; --pf-btn-fg: #15120f; --pf-btn-borde: #15120f;
  --pf-btn1-bg: #15120f; --pf-btn1-fg: #f2ede3;
  --pf-top-bg: #15120f; --pf-top-borde: #15120f;
  --pf-inicial-bg: #15120f; --pf-inicial-fg: #f2ede3;
  --pf-sello-bg: #c8201a; --pf-sello-fg: #fff;
  --pf-ok: #1d6b36; --pf-mal: #c8201a; --pf-empate: #8a6a12;
  --pf-mini-fondo: #f2ede3; --pf-mini-card: transparent; --pf-mini-borde: 0; --pf-mini-radio: 0;
  --pf-mini-av: linear-gradient(135deg, #3a3531, #8b8378); --pf-mini-av-sombra: 5px 5px 0 #c8201a;
  --pf-mini-nombre: #15120f; --pf-mini-estilo: italic; --pf-mini-linea: #15120f; --pf-mini-acento: #c8201a;
}
body[data-tema="portada"] {
  background-color: #f2ede3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08  0 0 0 0 .06  0 0 0 0 .04  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-tema="portada"] .pf-main { max-width: 1180px; }
[data-tema="portada"] .pf-top { backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-tema="portada"] .pf-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "marq marq" "id av" "acc av" "xp av";
  align-items: end; gap: 18px 44px; padding: 0 0 34px; overflow: visible;
  border-bottom: 1px solid #15120f; margin-bottom: 0;
}
[data-tema="portada"] .pf-marquesina {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 0 10px; margin-bottom: 18px;
  border-top: 5px solid #15120f; border-bottom: 1px solid #15120f;
  font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
}
[data-tema="portada"] .pf-marquesina span:last-child { color: #c8201a; }
[data-tema="portada"] .pf-kicker { color: #c8201a; font-size: 12px; letter-spacing: .28em; }
[data-tema="portada"] .pf-nombre {
  font-style: italic; font-size: clamp(52px, 8.6vw, 116px); line-height: .9; letter-spacing: -.035em;
}
[data-tema="portada"] .pf-handle { font-family: 'Playfair Display', serif; font-style: italic; font-size: 20px; color: #4f4841; margin-top: 16px; }
[data-tema="portada"] .pf-chips { margin-top: 20px; }
[data-tema="portada"] .pf-chip { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; }
[data-tema="portada"] .pf-acciones { justify-content: flex-start; max-width: none; }
[data-tema="portada"] .pf-btn { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; padding: 11px 16px; }
[data-tema="portada"] .pf-btn:hover { transform: none; background: #15120f; color: #f2ede3; filter: none; }
[data-tema="portada"] .pf-btn.primario:hover { background: #c8201a; }
[data-tema="portada"] .pf-btn.fantasma:hover { background: transparent; color: #c8201a; }
[data-tema="portada"] .pf-avatar { --pf-av: 290px; height: 360px; align-self: stretch; }
[data-tema="portada"] .pf-avatar-marco { height: 100%; }
[data-tema="portada"] .pf-avatar-marco::before {   /* bloque rojo desplazado detrás del retrato */
  content: ''; position: absolute; inset: 0; transform: translate(16px, 16px); background: #c8201a; z-index: -1;
}
[data-tema="portada"] .pf-avatar .tjm { --tjm-r: 0; --tjm-rb: 0; }
[data-tema="portada"] .pf-avatar-marco img { filter: grayscale(1) contrast(1.18) brightness(1.04); border: 1px solid #15120f; }
[data-tema="portada"] .pf-inicial { font-style: italic; font-size: 150px; }
[data-tema="portada"] .pf-pie-foto {
  display: block; position: absolute; left: 0; bottom: -30px;
  font-family: 'Playfair Display', serif; font-style: italic; font-size: 13px; color: #8b8378;
}
[data-tema="portada"] .pf-sello {
  right: auto; left: -26px; top: 22px; bottom: auto; width: 78px; height: 78px; min-width: 0;
  border-radius: 50%; transform: rotate(-12deg); box-shadow: none; font-family: 'Playfair Display', serif;
}
[data-tema="portada"] .pf-sello small { font-family: 'Inter', sans-serif; letter-spacing: .2em; }
[data-tema="portada"] .pf-sello b { font-size: 30px; font-style: italic; }
[data-tema="portada"] .pf-avatar-editar { left: 10px; bottom: 10px; border-color: #f2ede3; }
[data-tema="portada"] .pf-xp-fila { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #15120f; }
[data-tema="portada"] .pf-xp-barra { height: 4px; border-radius: 0; }
[data-tema="portada"] .pf-xp-relleno { border-radius: 0; }
[data-tema="portada"] .pf-xp-meta { font-family: 'Playfair Display', serif; font-style: italic; font-size: 14px; }
[data-tema="portada"] .pf-cifras { gap: 0; margin: 0 0 40px; border-bottom: 3px solid #15120f; }
[data-tema="portada"] .pf-cifra { padding: 26px 22px 24px; border-left: 1px solid rgba(21,18,15,.25); }
[data-tema="portada"] .pf-cifra:first-child { border-left: 0; padding-left: 0; }
[data-tema="portada"] .pf-cifra-num { font-size: clamp(44px, 5.2vw, 70px); letter-spacing: -.03em; }
[data-tema="portada"] .pf-cifra-lbl { color: #c8201a; letter-spacing: .24em; font-size: 10.5px; }
[data-tema="portada"] .pf-cifra-sub { font-family: 'Playfair Display', serif; font-style: italic; }
[data-tema="portada"] .pf-cols { gap: 48px; }
[data-tema="portada"] .pf-col { gap: 40px; }
[data-tema="portada"] .pf-bloque { padding: 18px 0 0; border-top: 1px solid #15120f; }
[data-tema="portada"] .pf-titulo {
  display: block; font-style: italic; font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1; margin-bottom: 22px;
}
[data-tema="portada"] .pf-titulo::before {
  content: attr(data-num); display: block; margin-bottom: 10px;
  font-family: 'Inter', sans-serif; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .26em; color: #c8201a;
}
[data-tema="portada"] .pf-titulo[data-num=""]::before { content: '·'; }
[data-tema="portada"] .pf-contador { display: inline-block; vertical-align: middle; margin-left: 10px; border: 0; background: none; padding: 0; font-style: normal; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8b8378; }
[data-tema="portada"] .pf-juegos-lista { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 28px; }
[data-tema="portada"] .pf-juego { padding: 16px 0 18px; border: 0; border-top: 1px solid rgba(21,18,15,.3); }
[data-tema="portada"] .pf-juego:hover { transform: none; }
[data-tema="portada"] .pf-juego-ico { background: none; width: auto; height: auto; font-size: 24px; }
[data-tema="portada"] .pf-juego-nombre { font-size: 24px; font-style: italic; }
[data-tema="portada"] .pf-juego-rango { font-family: 'Playfair Display', serif; font-size: 22px; font-style: italic; }
[data-tema="portada"] .pf-juego-datos b { font-size: 28px; font-weight: 900; }
[data-tema="portada"] .pf-juego-barra { height: 3px; border-radius: 0; }
[data-tema="portada"] .pf-juego-barra i { border-radius: 0; }
[data-tema="portada"] .pf-juego-jugar { color: #c8201a; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
[data-tema="portada"] .pf-partida { border-bottom-color: rgba(21,18,15,.18); padding: 13px 0; }
[data-tema="portada"] .pf-partida-n { font-family: 'Playfair Display', serif; font-style: italic; font-size: 17px; color: #c8201a; width: 24px; }
[data-tema="portada"] .pf-partida-info b { font-family: 'Playfair Display', serif; font-size: 17px; }
[data-tema="portada"] .pf-resultado { background: none; padding: 0; font-size: 10.5px; letter-spacing: .2em; }
[data-tema="portada"] .pf-bio { border-top: 0; padding-top: 0; }
[data-tema="portada"] .pf-bio .pf-titulo { display: none; }
[data-tema="portada"] .pf-cita {
  position: relative; padding: 38px 0 0 0;
  font-family: 'Playfair Display', serif; font-style: italic; font-weight: 700; font-size: 25px; line-height: 1.3; color: #15120f;
}
[data-tema="portada"] .pf-cita::before { content: '“'; position: absolute; top: -26px; left: -6px; font-size: 110px; line-height: 1; color: #c8201a; font-style: normal; }
[data-tema="portada"] .pf-cita::after { content: '— @' attr(data-autor); display: block; margin-top: 14px; font-family: 'Inter', sans-serif; font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8b8378; }
[data-tema="portada"] .pf-logros-barra { height: 3px; border-radius: 0; }
[data-tema="portada"] .pf-medallas { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0 14px; }
[data-tema="portada"] .pf-medalla { flex-direction: row; text-align: left; gap: 8px; padding: 9px 0; border: 0; border-bottom: 1px solid rgba(21,18,15,.14); }
[data-tema="portada"] .pf-medalla-ico { font-size: 28px; }
[data-tema="portada"] .pf-medalla-nombre { font-size: 12px; color: #15120f; }
[data-tema="portada"] .pf-medalla.falta { opacity: .35; }
[data-tema="portada"] .pf-amigo-av img, [data-tema="portada"] .pf-amigo-av .pf-amigo-ini { filter: grayscale(1); border-color: #15120f; }
[data-tema="portada"] .pf-amigo:hover img { filter: none; }
[data-tema="portada"] .pf-pie a { font-family: 'Playfair Display', serif; font-style: italic; font-size: 15px; }


/* ═════════════════════════════════════════════════════════════════════════════
 * 4 · TAPETE — mesa de juego: paño verde, baranda de madera, oro y naipes
 * ═══════════════════════════════════════════════════════════════════════════ */
[data-tema="tapete"] {
  --pf-bg: #0d3b26; --pf-fg: #f7f1e0; --pf-fg2: #d3e6d8; --pf-fg3: #93b9a0;
  --pf-card: rgba(4,28,17,.5); --pf-card2: #fbf7ec;
  --pf-card-borde: 1px solid rgba(233,196,106,.38); --pf-linea: rgba(233,196,106,.24);
  --pf-radio: 20px; --pf-radio-sm: 14px;
  --pf-sombra: 0 22px 44px -22px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
  --pf-acento: #e9c46a; --pf-acento2: #b3261e;
  --pf-f-titulo: 'Cinzel', Georgia, serif; --pf-f-texto: 'Manrope', system-ui, sans-serif;
  --pf-chip-bg: rgba(233,196,106,.1); --pf-chip-fg: #f3dfa2; --pf-chip-borde: rgba(233,196,106,.42);
  --pf-pista: rgba(0,0,0,.4);
  --pf-barra: linear-gradient(180deg, #fff3c1, #e9c46a 45%, #b0802a);
  --pf-oro: linear-gradient(180deg, #fff6d1 0%, #f1d27a 34%, #b98a2d 60%, #f5dc8e 100%);
  --pf-btn-bg: rgba(233,196,106,.08); --pf-btn-fg: #f3dfa2; --pf-btn-borde: rgba(233,196,106,.55);
  --pf-btn1-bg: linear-gradient(180deg, #fbe7a3, #e2b552 55%, #b8862e); --pf-btn1-fg: #2b1b05;
  --pf-top-bg: linear-gradient(180deg, #3b2412, #26160a); --pf-top-borde: rgba(233,196,106,.5);
  --pf-inicial-bg: radial-gradient(circle at 35% 30%, #2f8f5f, #0d3b26); --pf-inicial-fg: #f3dfa2;
  --pf-sello-bg: #b3261e; --pf-sello-fg: #fff;
  --pf-ok: #e9c46a; --pf-mal: #ff8a7a; --pf-empate: #cfe3d4;
  --pf-mini-fondo: radial-gradient(ellipse at 50% 30%, #23875a, #0a3322 80%); --pf-mini-card: #fbf7ec; --pf-mini-borde: 1px solid #e2d8bf; --pf-mini-radio: 8px;
  --pf-mini-sombra: 0 6px 14px rgba(0,0,0,.4), inset 0 0 0 5px #0d3b26;
  --pf-mini-av: radial-gradient(circle, #b3261e 52%, #fff 53% 58%, #b3261e 59%); --pf-mini-av-sombra: 0 0 0 2px #e9c46a;
  --pf-mini-nombre: #0d3b26; --pf-mini-linea: #cdbf9c; --pf-mini-acento: linear-gradient(90deg, #b98a2d, #f1d27a);
}
body[data-tema="tapete"] { background: #0d3b26; }
[data-tema="tapete"] .pf-pano {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 115% 78% at 50% 16%, #25895b 0%, #145a3a 42%, #0b3524 74%, #061d13 100%);
}
[data-tema="tapete"] .pf-pano::before {   /* textura del paño */
  content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}
[data-tema="tapete"] .pf-pano::after {    /* baranda de madera en los bordes */
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 10px #4a2c14, inset 0 0 0 12px #1f1208, inset 0 0 0 14px rgba(233,196,106,.45), inset 0 0 160px rgba(0,0,0,.7);
}
[data-tema="tapete"] .pf-top { border-bottom-width: 2px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
[data-tema="tapete"] .pf-hero, [data-tema="tapete"] .pf-bloque { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
[data-tema="tapete"] .pf-hero::before {    /* filete dorado interior */
  content: ''; position: absolute; inset: 8px; border: 1px solid rgba(233,196,106,.28); border-radius: 14px; pointer-events: none;
}
[data-tema="tapete"] .pf-kicker { font-family: 'Cinzel', serif; letter-spacing: .3em; color: #e9c46a; font-size: 11.5px; }
[data-tema="tapete"] .pf-kicker::before, [data-tema="tapete"] .pf-kicker::after { content: ''; display: inline-block; width: 5px; height: 5px; background: currentColor; transform: rotate(45deg); vertical-align: 2px; margin: 0 10px; opacity: .85; }
[data-tema="tapete"] .pf-kicker::before { margin-left: 0; }
[data-tema="tapete"] .pf-nombre {
  font-weight: 800; letter-spacing: .03em;
  background: var(--pf-oro); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.45));
}
[data-tema="tapete"] .pf-avatar-marco { box-shadow: 0 0 0 4px #0d3b26, 0 0 0 7px #e9c46a, 0 0 0 9px #7a5a1c, 0 16px 34px rgba(0,0,0,.55); }
[data-tema="tapete"] .pf-sello {   /* ficha de póquer */
  width: 58px; height: 58px; min-width: 0; border-radius: 50%; font-family: 'Cinzel', serif;
  background: radial-gradient(circle, #b3261e 0 50%, #fff 51% 54%, #b3261e 55% 66%, transparent 67%),
              repeating-conic-gradient(#f7f1e0 0 15deg, #b3261e 15deg 30deg);
  box-shadow: 0 6px 14px rgba(0,0,0,.5);
}
[data-tema="tapete"] .pf-sello small { font-size: 8px; }
[data-tema="tapete"] .pf-sello b { font-size: 19px; }
[data-tema="tapete"] .pf-btn { letter-spacing: .02em; }
[data-tema="tapete"] .pf-btn.primario { box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5); }
[data-tema="tapete"] .pf-xp-barra { height: 12px; border: 1px solid rgba(233,196,106,.45); box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
[data-tema="tapete"] .pf-cifras { gap: 18px; }
[data-tema="tapete"] .pf-cifra {   /* fichas de póquer */
  --ficha: #b3261e;
  aspect-ratio: 1; max-width: 172px; width: 100%; justify-self: center; border-radius: 50%; border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px;
  background: radial-gradient(circle, var(--ficha) 0 57%, rgba(255,255,255,.85) 57.5% 59%, var(--ficha) 59.5% 69%, transparent 69.5%),
              repeating-conic-gradient(from 7deg, #f7f1e0 0 12deg, var(--ficha) 12deg 30deg);
  box-shadow: 0 10px 22px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.25);
}
[data-tema="tapete"] .pf-cifra:nth-child(2) { --ficha: #1f4e8c; }
[data-tema="tapete"] .pf-cifra:nth-child(3) { --ficha: #1b1b1b; }
[data-tema="tapete"] .pf-cifra:nth-child(4) { --ficha: #6b3fa0; }
[data-tema="tapete"] .pf-cifra-num { font-family: 'Cinzel', serif; font-size: clamp(22px, 3vw, 32px); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
[data-tema="tapete"] .pf-cifra-lbl { color: rgba(255,255,255,.85); font-size: 9.5px; margin-top: 6px; }
[data-tema="tapete"] .pf-cifra-sub { color: rgba(255,255,255,.7); font-size: 10.5px; max-width: 80%; line-height: 1.2; }
[data-tema="tapete"] .pf-titulo { color: #e9c46a; font-weight: 700; letter-spacing: .08em; font-size: 18px; }
[data-tema="tapete"] .pf-titulo > span:first-child::before { content: '\2660\FE0E  '; color: rgba(233,196,106,.7); }
[data-tema="tapete"] .pf-juegos .pf-titulo > span:first-child::before { content: '\2660\FE0E  '; }
[data-tema="tapete"] .pf-historial .pf-titulo > span:first-child::before { content: '\2665\FE0E  '; color: #ff8a7a; }
[data-tema="tapete"] .pf-logros .pf-titulo > span:first-child::before { content: '\2666\FE0E  '; color: #ff8a7a; }
[data-tema="tapete"] .pf-amigos .pf-titulo > span:first-child::before { content: '\2663\FE0E  '; }
[data-tema="tapete"] .pf-juego {   /* naipe */
  --pf-fg: #1d1a14; --pf-fg2: #4a443a; --pf-fg3: #857c6a; --pf-acento: #b3261e;
  --pf-pista: #ebe2cb; --pf-chip-bg: #f1e9d4; --pf-linea: #e2d8bf;
  --pf-barra2: linear-gradient(90deg, #b3261e, #e05a4f);
  padding: 20px 18px 16px 30px; border-color: #e2d8bf;
  box-shadow: 0 12px 24px -8px rgba(0,0,0,.55), inset 0 0 0 5px #fbf7ec, inset 0 0 0 6px rgba(179,38,30,.35);
}
[data-tema="tapete"] .pf-juego .pf-juego-esq { display: block; position: absolute; top: 12px; left: 11px; font-size: 14px; }
[data-tema="tapete"] .pf-juego .pf-juego-esq.abajo { top: auto; left: auto; bottom: 12px; right: 11px; transform: rotate(180deg); }
[data-tema="tapete"] .pf-juego:nth-child(odd) { transform: rotate(-.6deg); }
[data-tema="tapete"] .pf-juego:nth-child(even) { transform: rotate(.5deg); }
[data-tema="tapete"] .pf-juego:hover { transform: translateY(-4px) rotate(0); box-shadow: 0 20px 34px -10px rgba(0,0,0,.65), inset 0 0 0 5px #fbf7ec, inset 0 0 0 6px rgba(179,38,30,.35); }
[data-tema="tapete"] .pf-juego-nombre { font-family: 'Cinzel', serif; font-weight: 700; }
[data-tema="tapete"] .pf-juego-ico { border-radius: 50%; }
[data-tema="tapete"] .pf-juego-pie { padding-right: 16px; }
[data-tema="tapete"] .pf-partida-info b { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .02em; }
[data-tema="tapete"] .pf-resultado { border: 1px solid color-mix(in srgb, var(--pf-res) 55%, transparent); }
[data-tema="tapete"] .pf-medalla { background: rgba(0,0,0,.18); }
[data-tema="tapete"] .pf-medalla-ico { font-size: 36px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
[data-tema="tapete"] .pf-medalla.falta .pf-medalla-ico { filter: grayscale(1); }
[data-tema="tapete"] .pf-amigo-av img, [data-tema="tapete"] .pf-amigo-av .pf-amigo-ini { border: 2px solid #e9c46a; }
[data-tema="tapete"] .pf-cita { font-size: 16px; color: #f7f1e0; }


/* ═════════════════════════════════════════════════════════════════════════════
 * 5 · AURORA — cristal esmerilado sobre colores suaves en movimiento
 * ═══════════════════════════════════════════════════════════════════════════ */
[data-tema="aurora"] {
  --pf-bg: #eef1f8; --pf-fg: #0f172a; --pf-fg2: #475569; --pf-fg3: #8a97ab;
  --pf-card: rgba(255,255,255,.56); --pf-card2: rgba(255,255,255,.62);
  --pf-card-borde: 1px solid rgba(255,255,255,.9); --pf-linea: rgba(15,23,42,.08);
  --pf-radio: 30px; --pf-radio-sm: 22px;
  --pf-sombra: inset 0 1px 0 rgba(255,255,255,.95), 0 24px 60px -28px rgba(51,65,120,.35);
  --pf-acento: #7c3aed; --pf-acento2: #db2777;
  --pf-f-titulo: 'Plus Jakarta Sans', system-ui, sans-serif; --pf-f-texto: 'Plus Jakarta Sans', system-ui, sans-serif;
  --pf-chip-bg: rgba(255,255,255,.72); --pf-chip-fg: #334155; --pf-chip-borde: rgba(15,23,42,.07);
  --pf-pista: rgba(15,23,42,.07);
  --pf-barra: linear-gradient(90deg, #8b5cf6, #ec4899 55%, #f59e0b);
  --pf-btn-bg: rgba(255,255,255,.78); --pf-btn-fg: #0f172a; --pf-btn-borde: rgba(15,23,42,.08);
  --pf-btn1-bg: #0f172a; --pf-btn1-fg: #fff;
  --pf-top-bg: rgba(15,23,42,.8); --pf-top-borde: transparent;
  --pf-inicial-bg: linear-gradient(135deg, #8b5cf6, #ec4899); --pf-inicial-fg: #fff;
  --pf-sello-bg: linear-gradient(135deg, #8b5cf6, #ec4899); --pf-sello-fg: #fff;
  --pf-ok: #059669; --pf-mal: #e11d48; --pf-empate: #d97706;
  --pf-mini-fondo: radial-gradient(circle at 20% 20%, #c4b5fd, transparent 55%), radial-gradient(circle at 85% 30%, #f9a8d4, transparent 55%), radial-gradient(circle at 50% 100%, #7dd3fc, transparent 60%), #eef1f8;
  --pf-mini-card: rgba(255,255,255,.62); --pf-mini-borde: 1px solid rgba(255,255,255,.95); --pf-mini-radio: 14px;
  --pf-mini-sombra: 0 8px 20px -8px rgba(51,65,120,.35);
  --pf-mini-av: linear-gradient(135deg, #8b5cf6, #ec4899); --pf-mini-av-sombra: 0 0 0 3px #fff;
  --pf-mini-nombre: #0f172a; --pf-mini-linea: rgba(15,23,42,.14); --pf-mini-acento: linear-gradient(90deg, #8b5cf6, #ec4899, #f59e0b);
}
body[data-tema="aurora"] { background: #eef1f8; }
[data-tema="aurora"] .pf-mancha { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .6; animation: pf-deriva 28s ease-in-out infinite alternate; }
[data-tema="aurora"] .pf-mancha.m1 { width: 62vmax; height: 62vmax; top: -24vmax; left: -18vmax; background: #c4b5fd; }
[data-tema="aurora"] .pf-mancha.m2 { width: 52vmax; height: 52vmax; top: 4vh; right: -22vmax; background: #f9a8d4; animation-duration: 34s; }
[data-tema="aurora"] .pf-mancha.m3 { width: 56vmax; height: 56vmax; bottom: -30vmax; left: 8vw; background: #7dd3fc; animation-duration: 31s; }
[data-tema="aurora"] .pf-mancha.m4 { width: 38vmax; height: 38vmax; bottom: -8vmax; right: 2vw; background: #a7f3d0; animation-duration: 38s; }
@keyframes pf-deriva { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(7vw, 5vh) scale(1.1); } 100% { transform: translate(-5vw, 9vh) scale(.94); } }
[data-tema="aurora"] .pf-fondo::after {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .2  0 0 0 0 .3  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
[data-tema="aurora"] .pf-top { position: sticky; top: 12px; margin: 12px 16px 0; border-radius: 100px; padding: 10px 14px 10px 24px; box-shadow: 0 12px 30px -12px rgba(15,23,42,.45); }
@media (min-width: 1152px) { [data-tema="aurora"] .pf-top { max-width: 1072px; margin: 12px auto 0; } }
[data-tema="aurora"] .pf-hero, [data-tema="aurora"] .pf-cifra, [data-tema="aurora"] .pf-bloque {
  backdrop-filter: blur(26px) saturate(1.7); -webkit-backdrop-filter: blur(26px) saturate(1.7);
}
[data-tema="aurora"] .pf-kicker { color: #7c3aed; letter-spacing: .12em; }
[data-tema="aurora"] .pf-nombre {
  font-weight: 800; letter-spacing: -.045em;
  background: linear-gradient(115deg, #0f172a 30%, #6d28d9 62%, #db2777 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-tema="aurora"] .pf-avatar-marco { box-shadow: 0 0 0 6px #fff, 0 22px 44px -12px rgba(139,92,246,.55); }
[data-tema="aurora"] .pf-sello { border-radius: 100px; min-width: 56px; height: 34px; flex-direction: row; gap: 4px; right: -10px; bottom: 6px; border: 3px solid #fff; }
[data-tema="aurora"] .pf-sello b { font-size: 16px; }
[data-tema="aurora"] .pf-btn { border-radius: 100px; }
[data-tema="aurora"] .pf-btn.primario { box-shadow: 0 10px 22px -10px rgba(15,23,42,.6); }
[data-tema="aurora"] .pf-xp-barra { height: 12px; background: rgba(255,255,255,.7); box-shadow: inset 0 1px 2px rgba(15,23,42,.08); }
[data-tema="aurora"] .pf-cifra-num { background: linear-gradient(135deg, #0f172a, #6d28d9); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-tema="aurora"] .pf-cifra:nth-child(2) .pf-cifra-num { background-image: linear-gradient(135deg, #0f172a, #db2777); }
[data-tema="aurora"] .pf-cifra:nth-child(3) .pf-cifra-num { background-image: linear-gradient(135deg, #0f172a, #d97706); }
[data-tema="aurora"] .pf-cifra:nth-child(4) .pf-cifra-num { background-image: linear-gradient(135deg, #0f172a, #0891b2); }
[data-tema="aurora"] .pf-titulo { font-weight: 800; letter-spacing: -.02em; }
[data-tema="aurora"] .pf-juego { border-color: rgba(255,255,255,.9); box-shadow: 0 8px 24px -16px rgba(51,65,120,.4); }
[data-tema="aurora"] .pf-juego:hover { box-shadow: 0 18px 34px -16px rgba(124,58,237,.35); }
[data-tema="aurora"] .pf-juego-ico { background: linear-gradient(135deg, #ede9fe, #fce7f3); border-radius: 14px; }
[data-tema="aurora"] .pf-medalla { border-color: rgba(255,255,255,.9); }
[data-tema="aurora"] .pf-medalla.ganada { background: linear-gradient(160deg, rgba(237,233,254,.9), rgba(252,231,243,.8)); }
[data-tema="aurora"] .pf-amigo-av img, [data-tema="aurora"] .pf-amigo-av .pf-amigo-ini { border: 3px solid #fff; box-shadow: 0 6px 14px -6px rgba(51,65,120,.4); }
[data-tema="aurora"] .pf-amigo-av.en-linea::after { border-color: #fff; }
[data-tema="aurora"] .pf-avatar-editar, [data-tema="aurora"] .pf-insignia { border-color: #fff; }


/* ── Ajustes de celular por diseño (sus reglas pesan más que las de base) ── */
@media (max-width: 760px) {
  [data-tema="portada"] .pf-hero {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "marq" "av" "id" "acc" "xp";
    justify-items: stretch; text-align: left; gap: 16px; padding-bottom: 26px;
  }
  [data-tema="portada"] .pf-marquesina { margin-bottom: 4px; font-size: 10px; letter-spacing: .16em; }
  [data-tema="portada"] .pf-avatar { --pf-av: min(74vw, 280px); height: calc(min(74vw, 280px) * 1.2); margin: 0 0 30px; justify-self: start; }
  [data-tema="portada"] .pf-sello { left: auto; right: -12px; top: -12px; width: 66px; height: 66px; }
  [data-tema="portada"] .pf-nombre { font-size: clamp(46px, 14vw, 72px); }
  [data-tema="portada"] .pf-chips, [data-tema="portada"] .pf-acciones { justify-content: flex-start; }
  [data-tema="portada"] .pf-cifras { margin-bottom: 28px; }
  [data-tema="portada"] .pf-cifra { padding: 18px 14px; }
  [data-tema="portada"] .pf-cifra:nth-child(odd) { border-left: 0; padding-left: 0; }
  [data-tema="portada"] .pf-cifra:nth-child(n+3) { border-top: 1px solid rgba(21,18,15,.25); }
  [data-tema="portada"] .pf-cols { gap: 30px; }
  [data-tema="portada"] .pf-bloque { padding: 16px 0 0; }
  [data-tema="portada"] .pf-titulo { font-size: 28px; }
  [data-tema="portada"] .pf-cita { font-size: 21px; }

  [data-tema="arcade"] .pf-kicker { font-size: 22px; }
  [data-tema="arcade"] .pf-cifra-num { font-size: 46px; }
  [data-tema="arcade"] .pf-sol { bottom: 30vh; }
  [data-tema="arcade"] .pf-piso { height: 32vh; }
  [data-tema="arcade"] .pf-fondo::before { bottom: 32vh; }

  [data-tema="tapete"] .pf-pano::after { box-shadow: inset 0 0 0 6px #4a2c14, inset 0 0 0 7px #1f1208, inset 0 0 0 8px rgba(233,196,106,.45), inset 0 0 90px rgba(0,0,0,.7); }
  [data-tema="tapete"] .pf-cifras { gap: 12px; }
  [data-tema="tapete"] .pf-cifra { max-width: 150px; padding: 14px; }
  [data-tema="tapete"] .pf-kicker::before, [data-tema="tapete"] .pf-kicker::after { margin: 0 6px; }

  [data-tema="aurora"] .pf-top { margin: 10px 10px 0; top: 10px; padding: 8px 10px 8px 18px; }
  .pf-marcos-lista { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
  .pf-marcos { max-height: 50vh; }
  [data-tema="aurora"] .pf-mancha { filter: blur(60px); }
}