/* Menú lateral de cuenta — Neo Puzzle Lovers */

/* ── Botón disparador (borde izquierdo, bajo el header) ── */
#pl-account-trigger {
  position: fixed;
  top: calc(var(--nav-height, 84px) + 1rem);
  left: 1rem;
  z-index: 900;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--pl-border, rgba(255, 255, 255, 0.12));
  background: var(--pl-panel, rgba(17, 10, 26, 0.76));
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-glow, 0 22px 60px rgba(0, 0, 0, 0.42));
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.22s ease, border-color 0.22s ease;
}

#pl-account-trigger:hover {
  transform: scale(1.07);
  border-color: var(--pl-lilac, #a96ae7);
}

#pl-account-trigger:focus-visible {
  outline: 2px solid var(--pl-cyan, #8deeff);
  outline-offset: 3px;
}

/* Botón como píldora con texto (modo invitado) */
#pl-account-trigger.has-label {
  width: auto;
  height: auto;
  border-radius: 999px;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  gap: 0.55rem;
  display: inline-flex;
  align-items: center;
}

.pl-trigger-label {
  font-family: var(--font-body, "Nunito", system-ui, sans-serif);
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--pl-text, #f8f2ff);
  white-space: nowrap;
}

@media (max-width: 480px) {
  /* Solo círculo, sin texto */
  .pl-trigger-label { display: none; }
  #pl-account-trigger.has-label { padding: 0; }
}

/* Móvil: botón en la esquina inferior */
@media (max-width: 640px) {
  #pl-account-trigger {
    top: auto;
    bottom: 1.1rem;
  }
}

.pl-trigger-avatar {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--pl-grad, linear-gradient(135deg, #8deeff 0%, #7f99ff 28%, #a96ae7 62%, #e559b1 100%));
  color: #12001f;
  font-family: var(--font-heading, "Orbitron", monospace);
  font-size: 0.85rem;
  font-weight: 900;
  overflow: hidden;
}

.pl-trigger-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Volver al inicio */
#pl-home-link {
  position: fixed;
  top: calc(var(--nav-height, 84px) + 1rem);
  left: 1rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem 0.6rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--pl-border, rgba(255, 255, 255, 0.12));
  background: var(--pl-panel, rgba(17, 10, 26, 0.76));
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-glow, 0 22px 60px rgba(0, 0, 0, 0.42));
  color: var(--pl-soft, #d8c9ff);
  font-family: var(--font-body, "Nunito", system-ui, sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

#pl-home-link:hover {
  transform: translateX(-3px);
  border-color: var(--pl-lilac, #a96ae7);
  color: var(--pl-text, #f8f2ff);
}

#pl-home-link:focus-visible {
  outline: 2px solid var(--pl-cyan, #8deeff);
  outline-offset: 3px;
}

.pl-home-arrow { font-size: 1rem; line-height: 1; }

body.theme-pixel #pl-home-link { border-radius: 0; backdrop-filter: none; }

/* Enlace corrido cuando conviven botón de menú y enlace de inicio */
#pl-home-link.con-menu-al-lado { left: 5rem; }

/* Móvil: enlace en la esquina inferior */
@media (max-width: 640px) {
  #pl-home-link {
    top: auto;
    bottom: 1.1rem;
    left: 1.1rem;
  }
  #pl-home-link.con-menu-al-lado { left: 5.1rem; }
  /* Solo flecha, sin texto */
  .pl-home-text { display: none; }
  #pl-home-link { padding: 0.7rem 0.85rem; }
}

/* ── Fondo oscurecido ── */
.pl-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(4, 2, 10, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.26s ease;
}

#pl-account.is-open .pl-drawer-overlay { opacity: 1; }

/* ── Panel deslizante ─────────────────────────────────────────────
   Estilo «menú de Persona»: etiquetas inclinadas en bandas de color
   (P3 Reload), opciones gruesas en mayúsculas, escalonadas en zigzag,
   que al señalarlas se invierten con un bloque de color desplazado
   detrás (P5). Los colores salen del tema activo:
     --p-acc / --p-acc2  acentos (cian y rosa del tema)
     --p-papel / --p-tinta  texto y fondo del tema, para invertirlos
   ─────────────────────────────────────────────────────────────── */
.pl-drawer {
  --p-acc: var(--pl-cyan, #8deeff);
  --p-acc2: var(--pl-pink, #e559b1);
  --p-papel: var(--pl-text, #f8f2ff);
  --p-tinta: var(--pl-deep, #15071f);
  --p-oscuro: #0b0612;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 950;
  width: min(25rem, 92vw);
  background: var(--p-tinta);
  /* Una franja diagonal del segundo acento cruzando el fondo */
  background:
    linear-gradient(118deg, transparent 58%, color-mix(in srgb, var(--p-acc2) 13%, transparent) 58%, color-mix(in srgb, var(--p-acc2) 13%, transparent) 66%, transparent 66%),
    linear-gradient(118deg, transparent 69%, color-mix(in srgb, var(--p-acc) 9%, transparent) 69%, color-mix(in srgb, var(--p-acc) 9%, transparent) 71%, transparent 71%),
    var(--p-tinta);
  border-right: 3px solid var(--p-acc);
  box-shadow: 12px 0 48px rgba(0, 0, 0, 0.5);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Trama de puntos de cómic en la esquina de arriba */
.pl-drawer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 75%;
  height: 20rem;
  pointer-events: none;
  background: radial-gradient(circle, var(--p-acc) 1.1px, transparent 1.7px) 0 0 / 10px 10px;
  opacity: 0.16;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse at 100% 0, #000 10%, transparent 70%);
}

#pl-account.is-open .pl-drawer { transform: translateX(0); }

.pl-drawer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.15rem 2rem;
  min-height: 100%;
  font-family: var(--font-body, "Nunito", system-ui, sans-serif);
}

body.pl-drawer-open { overflow: hidden; }

/* ── Cabecera: avatar + nick + correo, con la campanita al lado ──
   Estas reglas vivían en css/perfil/inbox.css. Como el markup lo genera
   account-menu.js, si aquella hoja no llegaba a aplicarse la fila
   dejaba de ser flex y la campanita caía debajo del recuadro, fuera
   de su sitio. El layout va junto al markup que lo necesita. */
.pl-head-row { display: flex; align-items: stretch; gap: 0.5rem; }
.pl-head-row .pl-drawer-head { flex: 1; min-width: 0; }

.pl-bell {
  position: relative;
  flex-shrink: 0;
  width: 3.1rem;
  border: 0;
  border-radius: 0;
  clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
  background: var(--pl-panel-alt, rgba(255, 255, 255, 0.04));
  background: color-mix(in srgb, var(--p-papel) 9%, transparent);
  color: var(--pl-soft, #d8c9ff);
  font-size: 1.15rem;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.pl-bell:hover { background: var(--p-acc); transform: rotate(-6deg); }

.pl-bell-dot {
  position: absolute; top: 0.5rem; right: 0.75rem;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: #ff5d73; box-shadow: 0 0 0 2px var(--p-tinta);
}

/* La tarjeta de quien eres: una placa con las esquinas cortadas */
.pl-drawer-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 0;
  border-left: 5px solid var(--p-acc);
  background: var(--pl-panel-alt, rgba(255, 255, 255, 0.04));
  background: color-mix(in srgb, var(--p-papel) 7%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.9rem), calc(100% - 0.9rem) 100%, 0 100%);
  text-decoration: none;
  transition: transform 0.22s ease, background 0.22s ease;
}

a.pl-drawer-head:hover {
  background: color-mix(in srgb, var(--p-papel) 13%, transparent);
  transform: translateX(3px);
}

.pl-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--pl-grad, linear-gradient(135deg, #8deeff 0%, #7f99ff 28%, #a96ae7 62%, #e559b1 100%));
  box-shadow: 0 0 0 3px var(--p-tinta), 4px 4px 0 3px var(--p-acc2);
  color: #12001f;
  font-family: var(--font-heading, "Orbitron", monospace);
  font-size: 1.1rem;
  font-weight: 900;
  overflow: hidden;
}

.pl-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pl-avatar-anon {
  background: var(--pl-panel-alt, rgba(255, 255, 255, 0.04));
  border: 1px dashed var(--pl-border, rgba(255, 255, 255, 0.12));
  color: var(--pl-muted, #bba9df);
}

.pl-identity { min-width: 0; }

/* Nick */
.pl-nick {
  margin: 0;
  font-family: var(--font-heading, "Orbitron", monospace);
  font-size: 1rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--p-papel);
  overflow-wrap: anywhere;
}

/* Correo */
.pl-email {
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  color: var(--pl-muted, #bba9df);
  opacity: 0.7;
  overflow-wrap: anywhere;
}

/* El rango, como una etiqueta inclinada */
.pl-role {
  display: inline-block;
  margin-top: 0.45rem;
  padding: 0.18rem 0.9rem 0.18rem 0.6rem;
  border: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.45rem) 100%, 0 100%);
  transform: rotate(-2deg);
  background: var(--p-papel);
  color: var(--p-tinta);
  font-size: 0.66rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pl-role-moderator { background: var(--p-acc2); color: var(--p-oscuro); }
.pl-role-creator   { background: var(--p-acc); color: var(--p-oscuro); }

/* ── La acción principal: el cartel grande de arriba ── */
.pl-hero-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0.35rem 0.6rem 0.4rem 0.1rem;
  padding: 1rem 1.1rem 1rem 1rem;
  color: var(--p-oscuro);
  text-decoration: none;
  transform: rotate(-1.6deg);
  transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.25, 1.3);
}
.pl-hero-cta::before,
.pl-hero-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0 7%, 100% 0, 97% 100%, 2% 92%);
}
.pl-hero-cta::before { z-index: -1; background: var(--pl-grad, linear-gradient(135deg, #8deeff, #a96ae7 60%, #e559b1)); }
/* El bloque desplazado de detrás, que da el golpe de cartel */
.pl-hero-cta::after  { z-index: -2; background: var(--p-papel); transform: translate(7px, 6px); }

.pl-hero-ico { font-size: 1.8rem; line-height: 1; transform: rotate(-10deg); transition: transform 0.22s ease; }
.pl-hero-txt { display: grid; gap: 0.25rem; min-width: 0; }
.pl-hero-tit {
  font: italic 900 1.12rem/1.05 var(--font-heading, "Orbitron", sans-serif);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pl-hero-sub { font-size: 0.74rem; font-weight: 800; line-height: 1.3; opacity: 0.82; }
.pl-hero-flecha {
  margin-left: auto;
  font: 900 2.1rem/1 var(--font-heading, "Orbitron", sans-serif);
  transition: transform 0.22s ease;
}

.pl-hero-cta:hover,
.pl-hero-cta:focus-visible {
  transform: rotate(-1.6deg) translateX(0.3rem) scale(1.02);
  outline: none;
}
.pl-hero-cta:hover .pl-hero-ico,
.pl-hero-cta:focus-visible .pl-hero-ico { transform: rotate(6deg) scale(1.12); }
.pl-hero-cta:hover .pl-hero-flecha,
.pl-hero-cta:focus-visible .pl-hero-flecha { transform: translateX(0.3rem); }
.pl-hero-cta:focus-visible::after { background: var(--p-acc); }

/* ── Lista de opciones ── */
.pl-links {
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
}

/* Encabezado de sección: una etiqueta inclinada en banda de color */
.pl-section {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 1.15rem 0 0.4rem -0.15rem;
  padding: 0.32rem 1.5rem 0.32rem 0.75rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.75rem) 100%, 0 100%);
  transform: rotate(-2.5deg);
  background: var(--p-acc);
  color: var(--p-oscuro);
  font: italic 900 0.74rem/1 var(--font-heading, "Orbitron", sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pl-links > .pl-section:first-child { margin-top: 0.2rem; }
/* Una sí y otra no, con el segundo acento */
.pl-links > .pl-section:nth-of-type(even) { background: var(--p-acc2); transform: rotate(-1.5deg); }

/* Cada opción: una tira inclinada. El fondo y el bloque desplazado van en
   ::before y ::after para poder recortarlos sin recortar el foco. */
.pl-link {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: calc(100% - 0.9rem);
  padding: 0.62rem 1.1rem 0.62rem 0.95rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--p-papel);
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.035em;
  line-height: 1.15;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.25, 1.4), color 0.12s ease;
}
.pl-link::before,
.pl-link::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(0.6rem 0, 100% 0, calc(100% - 0.6rem) 100%, 0 100%);
  transition: background 0.12s ease, transform 0.18s ease, opacity 0.18s ease;
}
.pl-link::before { z-index: -1; background: var(--pl-panel-alt, rgba(255, 255, 255, 0.04)); background: color-mix(in srgb, var(--p-papel) 6%, transparent); }
.pl-link::after  { z-index: -2; background: var(--p-acc2); opacity: 0; transform: translate(0, 0); }

/* Zigzag: una a la izquierda, la siguiente un poco más adentro */
.pl-links > .pl-link:nth-child(even) { margin-left: 0.9rem; }

/* Señalada: se invierte, y salta el bloque de color de detrás */
.pl-link:hover,
.pl-link:focus-visible {
  color: var(--p-tinta);
  transform: translateX(0.3rem) rotate(-1.2deg) scale(1.02);
  outline: none;
}
.pl-link:hover::before,
.pl-link:focus-visible::before { background: var(--p-papel); }
.pl-link:hover::after,
.pl-link:focus-visible::after { opacity: 1; transform: translate(6px, 4px); }
/* El foco de teclado, además, con el otro acento: que se vea sin ratón */
.pl-link:focus-visible::after { background: var(--p-acc); }

.pl-ico {
  flex-shrink: 0;
  width: 1.45rem;
  text-align: center;
  font-size: 1.05rem;
  font-style: normal;
  transition: transform 0.18s ease;
}
.pl-link:hover .pl-ico,
.pl-link:focus-visible .pl-ico { transform: rotate(-10deg) scale(1.18); }
.pl-link-txt { min-width: 0; }

/* El inicio de sesión del invitado (pl-link-cta) se queda por si alguna
   página lo usa: mismo aire que el cartel principal */
.pl-link-cta { color: var(--p-oscuro); }
.pl-link-cta::before { background: var(--pl-grad, linear-gradient(135deg, #8deeff, #e559b1)); }

.pl-link-mod::after { background: var(--p-acc); }
.pl-link-danger {
  width: auto;
  align-self: flex-start;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: var(--pl-muted, #bba9df);
}
.pl-link-danger::before { background: transparent; }
.pl-link-danger:hover,
.pl-link-danger:focus-visible { color: #fff; }
.pl-link-danger:hover::before,
.pl-link-danger:focus-visible::before { background: #d6334a; }
.pl-link-danger::after { background: var(--p-oscuro); }

.pl-sep {
  display: block;
  height: 3px;
  margin: 0.9rem 2.5rem 0.4rem 0.2rem;
  background: linear-gradient(90deg, var(--p-acc), var(--p-acc2) 60%, transparent);
  transform: rotate(-1.5deg);
  opacity: 0.6;
}

.pl-drawer-foot {
  margin: auto 0 0;
  padding-top: 1rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--pl-muted, #bba9df);
  opacity: 0.8;
}

/* ── Entrada: las opciones llegan de lado, una tras otra ── */
@keyframes plEntra {
  from { opacity: 0; transform: translateX(-2.4rem) rotate(-5deg); }
}
#pl-account.is-open .pl-hero-cta,
#pl-account.is-open .pl-section,
#pl-account.is-open .pl-link {
  animation: plEntra 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.2) backwards;
  animation-delay: calc(var(--i, 0) * 26ms + 70ms);
}

/* ── Ajustes por tema ── */
/* Tema claro */
body.theme-light .pl-drawer         { box-shadow: 12px 0 40px rgba(15, 23, 42, 0.16); }
body.theme-light .pl-drawer-overlay { background: rgba(15, 23, 42, 0.34); }

/* Tema pixel */
body.theme-pixel .pl-drawer,
body.theme-pixel .pl-drawer-head,
body.theme-pixel .pl-bell,
body.theme-pixel .pl-link,
body.theme-pixel #pl-account-trigger {
  border-radius: 0;
  backdrop-filter: none;
}

body.theme-pixel .pl-avatar,
body.theme-pixel .pl-trigger-avatar { border-radius: 0; }

/* Persona sin inclinaciones raras en pixel: cortes rectos, sin giro */
body.theme-pixel .pl-section,
body.theme-pixel .pl-role,
body.theme-pixel .pl-hero-cta { transform: none; }

body.theme-pixel .pl-drawer { box-shadow: 8px 0 0 rgba(0, 160, 30, 0.35); }

/* ── Responsive ── */
@media (max-width: 640px) {
  #pl-account-trigger {
    top: auto;
    bottom: 1.1rem;
    left: 1.1rem;
    width: 3.25rem;
    height: 3.25rem;
  }
}

/* ── Accesibilidad ── */
@media (prefers-reduced-motion: reduce) {
  .pl-drawer,
  .pl-drawer-overlay,
  #pl-account-trigger,
  .pl-link, .pl-link::before, .pl-link::after, .pl-ico,
  .pl-hero-cta, .pl-hero-ico, .pl-hero-flecha { transition: none; }
  #pl-account.is-open .pl-hero-cta,
  #pl-account.is-open .pl-section,
  #pl-account.is-open .pl-link { animation: none; }
  /* Se sigue invirtiendo al señalar, pero sin saltar */
  .pl-link:hover, .pl-link:focus-visible { transform: none; }
  .pl-hero-cta:hover, .pl-hero-cta:focus-visible { transform: rotate(-1.6deg); }
}

/* ── Saldo de piezas ── */
.pl-pieces {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.1rem 0 0;
  padding: 0.6rem 1.1rem 0.6rem 0.95rem;
  border: 0;
  border-bottom: 3px solid var(--p-acc2, #e559b1);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.7rem) 100%, 0 100%);
  background: rgba(255, 255, 255, 0.05);
  background: color-mix(in srgb, var(--p-papel, #fff) 7%, transparent);
}

.pl-pieces-ico {
  font-size: 1.05rem;
}

/* El saldo lleva al Emporio de Piezas */
a.pl-pieces-link {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
a.pl-pieces-link:hover,
a.pl-pieces-link:focus-visible {
  border-color: var(--p-acc, #8deeff);
  background: rgba(141, 238, 255, 0.12);
  background: color-mix(in srgb, var(--p-acc, #8deeff) 18%, transparent);
  outline: none;
}
.pl-pieces-ir {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 800;
  opacity: 0.7;
}
a.pl-pieces-link:hover .pl-pieces-ir { opacity: 1; }

.pl-pieces-num {
  font-family: var(--font-heading, "Orbitron", sans-serif);
  font-style: italic;
  font-weight: 900;
  font-variant-numeric: tabular-nums;   /* ancho fijo de dígitos */
}

.pl-pieces-label {
  color: var(--pl-muted, rgba(255, 255, 255, 0.62));
  font-size: 0.82rem;
}

/* Destello al cambiar el saldo */
.pl-pieces.is-cambio {
  animation: piezasPulso 0.5s ease-out;
}

@keyframes piezasPulso {
  0%   { transform: none; }
  45%  { transform: scale(1.04); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-pieces.is-cambio { animation: none; }
}