/* ████████████████████████████████████████████████████████████████████████████
   pm-shell.css — LA CÁSCARA DEL SITIO: el header único + los tokens PlayerMakerTV.

   El header (.pm-topbar) vivía duplicado en index.css y cada página tenía su
   variante, así que no coincidían. Ahora vive SOLO acá y lo cargan todas las
   páginas que lo usan: el inicio, /picker y /chatters. Si hay que tocar el
   header, se toca este archivo y cambia en todas de una.

   Excepción a propósito: /casino usa el OTRO header (la barra flotante redondeada
   .topbar del casino, definida al final de casino.css). Son dos headers, no más.

   Se carga DESPUÉS de la hoja de la página (index.css o picker.css).
   ████████████████████████████████████████████████████████████████████████████ */

/* Las fuentes del header viajan CON el header: picker.css no importaba Bangers y
   los links salían en Bebas, distintos a los del inicio. Que no vuelva a pasar. */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&family=Outfit:wght@500;600;700;800;900&display=swap');

:root {
  --bg-0: #0a090f; --bg-1: #0f0d16;
  --panel: #16141f; --panel-solid: #16141f;
  --border: rgba(255, 255, 255, 0.07); --border-hot: rgba(255, 255, 255, 0.18);
  --red: #ff2fa8; --red-deep: #7c3aed; --red-glow: rgba(255, 47, 168, 0.25);
  --gold: #35e6e6; --cyan: #35e6e6; --violet: #a855f7;
  --green: #00e676;
  --text: #f2f1f6; --text-dim: #9d97a8; --text-mute: #645f70;
}
/* Ojo: --topbar-h NO se toca acá. Cada hoja lo usa para sus propios cálculos de
   alto (index.css lo usa en el dashboard, picker.css en su grilla) y pisarlo
   globalmente les corría el layout. El alto del header va hardcodeado abajo. */

/* Fondo: negro neutro con UN glow violeta suave arriba. Nada mas. */
body { background: var(--bg-0); }
.bg-grid { display: none !important; }
.bg-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 45% at 50% 0%, rgba(124, 58, 237, 0.14), transparent 60%);
}

/* ████████████████████████████████████████████████████████████████████████████
   HEADER DEL SITIO (.pm-topbar) — inicio, /picker, /chatters
   Grilla 1fr auto 1fr: el logo queda SIEMPRE centrado, pase lo que pase con los
   links. Los dos grupos se agrupan hacia el centro (izq: flex-end, der:
   flex-start) y el chip de la cuenta se va al borde con margin-left:auto, para
   que su ancho (chip chico logueado vs boton "Entrar con Twitch" ancho) no
   descentre los links.
   ████████████████████████████████████████████████████████████████████████████ */
.pm-topbar {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 48px;
  width: 100%;
  height: 68px;
  margin: 0;
  padding: 0 32px;
  background: linear-gradient(to bottom, rgba(15, 13, 20, 0.88) 0%, rgba(15, 13, 20, 0.45) 55%, rgba(15, 13, 20, 0) 100%);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
}
/* En la portada el header va MONTADO sobre el video del hero (de ahí el degrade
   que se funde a transparente). En las páginas interiores va en el flujo. */
body.pm-home .pm-topbar { position: absolute; top: 0; left: 0; right: 0; }
.pm-topbar::after { display: none; }

.pm-nav { display: flex; align-items: center; gap: 26px; }
.pm-nav.pm-l { justify-content: flex-end; }
.pm-nav.pm-r { justify-content: flex-start; }
.pm-logo { display: flex; align-items: center; }
.pm-logo img { height: 34px; width: auto; display: block; }

/* Links en grafiti (Bangers), rectos: cian con sombra rosa, como el titulo del
   tracker de la portada. */
.pm-link {
  font-family: 'Bangers', 'Bebas Neue', sans-serif;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #23e5e5;
  text-shadow:
    1.5px 1.5px 0 #1b0b33,
    3px 3px 0 rgba(255, 31, 151, 0.85),
    0 0 12px rgba(35, 229, 229, 0.35);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 8px;
  white-space: nowrap;
}
.pm-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
/* La sección en la que estás: el texto NO cambia de color (pintarlo de rosa
   peleaba con la sombra rosa del grafiti y quedaba sucio). Se ILUMINA la parte
   de abajo: una barrita rosa con halo, como un neón encendido debajo del link. */
.pm-link { position: relative; }
.pm-link.active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: #ff2fa8;
  box-shadow: 0 0 8px rgba(255, 47, 168, 0.95), 0 0 20px rgba(255, 47, 168, 0.6);
}
.pm-link.active::before {
  content: '';
  position: absolute;
  left: 4px; right: 4px; bottom: 0;
  height: 16px;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 47, 168, 0.45), transparent 72%);
  pointer-events: none;
  /* debajo del texto, no encima (el .pm-topbar ya es contexto de apilado) */
  z-index: -1;
}
.pm-soon { opacity: 0.5; cursor: default; }
.pm-soon:hover { color: #e9e6f0; background: none; }
.pm-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #23e5e5;
  margin-left: 6px;
  vertical-align: 2px;
}
/* El chip/boton de cuenta es el TERCER item del grupo derecho: cuenta como un
   link mas (3 a la izquierda, 3 a la derecha) y se queda pegado a los otros dos,
   no empujado al borde. */
.pm-nav.pm-r .account { margin-left: 2px; }

/* ==================== CHIP DE USUARIO (todas las páginas) ====================
   Solo la foto, cuadrada redondeada: sin aro de color, sin nombre y sin
   flechita. El desplegable abre al clickear la foto. */
.account-trigger {
  background: none;
  border: none;
  border-radius: 10px;
  padding: 0;
  gap: 0;
}
.account-trigger:hover,
.account-user.open .account-trigger { background: none; border-color: transparent; }
.account-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
}
.account-trigger:hover .account-avatar { outline: 2px solid rgba(255, 255, 255, 0.25); }
.account-trigger .account-name,
.account-trigger .account-caret { display: none; }
.account-menu { background: #16141f; border-color: rgba(255, 255, 255, 0.08); }

/* Login: morado Twitch (era el verde de Kick) */
.kick-login {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: #fff;
  background: #9146ff;
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(145, 70, 255, 0.35);
}
.kick-login:hover { background: #a970ff; box-shadow: 0 5px 18px rgba(145, 70, 255, 0.5); }
.kick-login-dot { background: #fff; box-shadow: none; }

/* ==================== MOBILE: burger + panel desplegable ====================
   Header en UNA fila (burger | logo | cuenta); los links van al panel. */
.pm-burger { display: none; }
.pm-mobile-menu { display: none; }
@media (max-width: 760px) {
  .pm-topbar {
    display: flex;
    justify-content: space-between;
    height: 58px;
    padding: 0 12px;
    gap: 10px;
  }
  .pm-logo img { height: 28px; }
  /* las navs de desktop se van; la cuenta (login/avatar) se queda a la derecha */
  .pm-nav.pm-l { display: none; }
  .pm-nav.pm-r .pm-link { display: none; }
  .pm-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .pm-burger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #23e5e5;
    box-shadow: 0 0 8px rgba(35, 229, 229, 0.5);
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .pm-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .pm-burger.open span:nth-child(2) { opacity: 0; }
  .pm-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .pm-mobile-menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 8px 0 12px;
    background: rgba(15, 13, 20, 0.97);
    border-bottom: 1px solid rgba(255, 47, 168, 0.35);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  }
  .pm-mobile-menu[hidden] { display: none; }
  .pm-mobile-menu a {
    font-family: 'Bangers', 'Bebas Neue', sans-serif;
    font-size: 21px;
    letter-spacing: 2px;
    color: #23e5e5;
    text-shadow: 1.5px 1.5px 0 #1b0b33, 3px 3px 0 rgba(255, 31, 151, 0.85);
    text-decoration: none;
    text-align: center;
    padding: 13px 16px;
  }
  .pm-mobile-menu a:active { background: rgba(255, 255, 255, 0.06); }
  /* la sección en la que estás: mismo neón rosa encendido abajo */
  .pm-mobile-menu a.active {
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 47, 168, 0.28), transparent 72%);
    box-shadow: inset 0 -3px 0 #ff2fa8, 0 0 14px rgba(255, 47, 168, 0.35);
  }
}

/* ████████████████████████████████████████████████████████████████████████████
   HEADER DEL CASINO (.topbar) — solo /casino/vip lo usa desde acá.
   Es la MISMA barra que casino.css pinta al final ("CAPA PMTV SOBRIA"): negra
   redondeada, centrada, 1150 de ancho, con el logo real. Si se cambia allá,
   cambiarlo acá.
   ████████████████████████████████████████████████████████████████████████████ */
.topbar {
  background: #1a1725;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  width: min(1150px, calc(100% - 28px));
  margin: 10px auto 0;
  height: 54px;
  padding: 0 18px;
  flex-shrink: 0;
}
.topbar::after { display: none; }
.brand-img { height: 34px; width: auto; display: block; }
.brand { flex-shrink: 0; }

.nav-link {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  background: transparent;
  border-color: transparent;
  color: #fff;
  box-shadow: none;
  padding: 8px 15px;
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: transparent;
  transform: none;
  box-shadow: none;
}
.nav-link.active {
  background: linear-gradient(135deg, #ff2fa8 0%, #7c3aed 100%);
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(255, 47, 168, 0.3);
  color: #fff;
}

/* Mobile del header del casino: el panel del burger sale del topbar flotante
   (index.css lo posiciona absolute contra .topbar); acá solo el fondo neutro. */
@media (max-width: 720px) {
  .nav-collapse {
    background: #16141f;
    border-color: rgba(255, 255, 255, 0.1);
  }
}

/* ==================== PIEZAS COMPARTIDAS ====================
   Cabecera de página y píldoras, iguales en /chatters y /casino/vip. */
.pm-page-head { text-align: center; margin-bottom: 22px; }
.pm-page-head h1 {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 900;
  font-size: 42px;
  letter-spacing: 1px;
  color: #fff;
  line-height: 1.05;
  text-transform: uppercase;
}
.pm-page-head p {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
  margin: 10px auto 0;
  max-width: 620px;
}

.pm-pill {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  background: #16141f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pm-pill:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, 0.06); }
.pm-pill.active {
  color: #fff;
  background: linear-gradient(135deg, #ff2fa8 0%, #7c3aed 100%);
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(255, 47, 168, 0.28);
}
.pm-pill svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 700px) {
  .topbar { width: calc(100% - 16px); margin: 8px auto 0; padding: 0 12px; }
  .brand-img { height: 28px; }
  .pm-page-head h1 { font-size: 30px; }
}