/* =========================================================
   TENDENCE — CSS OFICIAL (VERSIÓN LIMPIA Y OPTIMIZADA)
   Estilo híbrido Rosa + Cian (Cyberpunk)
   Layout híbrido YouTube + AI
   ========================================================= */

/* =========================================================
   VARIABLES GLOBALES
   ========================================================= */
:root {
    --bg-main: #05050a;
    --bg-secondary: #0a0a12;
    --bg-hover: #11111f;

    --text-main: #e8e8ff;
    --text-secondary: #8a8ab3;

    --pink: #ff2d95;
    --pink-glow: rgba(255, 45, 149, 0.6);

    --cyan: #00f2ff;
    --cyan-glow: rgba(0, 242, 255, 0.6);

    --glass-light: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.12);

    --radius: 12px;
}

/* =========================================================
   RESET
   ========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}

html {
    scroll-behavior: auto; /* smooth causa jank — el scroll nativo es fluido */
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* =========================================================
   LAYOUT GENERAL
   ========================================================= */
/* =========================================================
   LAYOUT GENERAL (ACTUALIZADO: MENÚ DESPLAZABLE)
   ========================================================= */
#sidebar-container {
    width: 240px;
    height: 100vh;
    position: fixed;   /* Cambiado a fijo para que flote sobre el contenido */
    top: 0;
    left: 0;
    z-index: 2000;     /* Para que esté por encima de los videos */
    /* Romeo: el scroll vertical del sidebar apenas se movia (unos 15-20px de
       margen, casi nada de contenido real por debajo) y no hacia falta -
       quitado. */
    overflow-y: hidden;
    background: rgba(15, 15, 15, 0.85); /* Fondo oscuro cristalizado */
    backdrop-filter: blur(25px);
    border-right: 1px solid rgba(255, 0, 150, 0.3); /* Borde rosa sutil */
    
    /* EFECTO DE DESPLAZAMIENTO */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-100%); /* Empieza escondido a la IZQUIERDA */
}

/* Clase para que el menú vuelva a la DERECHA al pulsar el botón */
#sidebar-container.active {
    transform: translateX(0);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
}

#content {
    flex: 1;
    width: 100%;
    margin-left: 0;
    overflow-y: auto;
    /* Romeo: al fijar overflow-y:auto sin overflow-x, el navegador computa
       overflow-x como "auto" tambien (lo exige la spec cuando un eje no es
       "visible"), y eso dejaba aparecer una barra horizontal innecesaria
       abajo del todo en cuanto algo desbordaba unos pixeles de ancho.
       Fijado a hidden para quitarla del todo. */
    overflow-x: hidden;
    animation: fadeIn 0.6s ease-out;
    transition: margin-left 0.4s ease;
    /* Romeo: el scroll vertical principal de la pagina (el lateral, recorre
       todo el sitio) en azul moderno, igual que el chat principal, en vez
       del gris por defecto del navegador. */
    scrollbar-width: thin;
    scrollbar-color: rgba(45,140,255,.3) transparent;
}
#content::-webkit-scrollbar { width: 8px; }
#content::-webkit-scrollbar-thumb { background: rgba(45,140,255,.3); border-radius: 4px; }

/* PEGA ESTO JUSTO DEBAJO */
#sidebar-container.active + #content {
    margin-left: 240px;
}

/* =========================================================
   HEADER AI (HÍBRIDO)
   ========================================================= */
.main-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0 20px;
    background: rgba(10, 10, 15, 0.5);
    backdrop-filter: blur(20px);

/* AÑADE ESTO PARA QUE LOS MENÚS FLOTEN POR ENCIMA */
    position: sticky; /* O 'relative' si no quieres que te siga al bajar */
    top: 0;
    z-index: 10000; 
}

.header-left-section {
    width: 200px;
    display: flex;         /* Para alinear el botón y el logo */
    align-items: center;
    gap: 15px;             /* Espacio entre el botón y el logo */
}

.brand-logo {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(120, 80, 255, 0.6);
    
    /* Añade esta línea para moverlo */
    margin-left: 50px; 
}

.header-center-section {
    flex: 1;
    display: flex;
    justify-content: center;
}

.header-right-section {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* =========================================================
   BUSCADOR AI (COMPACTO)
   ========================================================= */
.ai-search-container {
    width: 100%;
    max-width: 620px;
    padding: 1.5px;
    background: linear-gradient(90deg, rgba(120, 80, 255, 0.4), rgba(255, 45, 149, 0.4));
    border-radius: 50px;
}

.search-inner {
    display: flex;
    align-items: center;
    background: rgba(15, 15, 20, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 50px;
    padding: 4px 8px 4px 18px;
    height: 38px;
}

.search-left {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.search-icon {
    width: 18px;
    height: 18px;
    fill: #ffffff;
    opacity: 0.8;
    transition: transform 0.3s ease;
}

.search-left:hover .search-icon {
    transform: scale(1.2);
    opacity: 1;
}

.search-divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.2);
    margin-left: 10px;
}

.ai-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    padding: 0 12px;
    font-size: 14px;
}

.generate-btn {
    background: #e0e0ff;
    border: none;
    border-radius: 40px;
    padding: 6px 18px;
    height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.3s ease;
}

.generate-btn span {
    color: #FF8A00;
    font-weight: 600;
    font-size: 13px;
}

.ai-stars {
    width: 14px;
    fill: #FF8A00;
}

.generate-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(120, 80, 255, 0.4);
}

/* Glow temporal al buscar */
.ai-glow {
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.6);
    transition: box-shadow 0.3s ease;
}

/* =========================================================
   SIDEBAR (HÍBRIDO ROSA + CIAN)
   ========================================================= */
#sidebar-container .item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 10px;
    color: #f1f1f1;
    transition: 0.3s ease;
}

#sidebar-container .item svg {
    width: 22px;
    height: 22px;
    fill: var(--pink);
    filter: drop-shadow(0 0 5px var(--pink-glow));
    transition: 0.3s ease;
}

#sidebar-container .item:hover {
    background: rgba(0, 242, 255, 0.15);
}

#sidebar-container .item:hover svg {
    fill: var(--cyan);
    filter: drop-shadow(0 0 10px var(--cyan-glow));
}

.section-title {
    color: white;
    font-size: 16px;
    padding: 12px 24px 4px 24px;
    font-weight: 500;
}

.yt-sep {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 12px 0;
}

/* =========================================================
   BOTÓN CREAR (HÍBRIDO)
   ========================================================= */
.create-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 45, 149, 0.1);
    border: 1px solid rgba(255, 45, 149, 0.4);
    border-radius: 40px;
    padding: 6px 16px;
    color: var(--pink);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s ease;
    transform: scale(1); /* Estado base */
}

.create-btn:hover {
    transform: scale(1.1); /* Zoom del 10% */
    background: rgba(255, 45, 149, 0.2); /* Se ilumina un poco más el fondo */
}

.create-btn:active {
    transform: scale(0.95); /* Rebote hacia adentro al hacer clic */
}

.create-btn svg {
    width: 20px;
    fill: var(--pink);
}

.sponsors-sidebar {
    /* Dimensiones y Posicionamiento */
    width: 320px;
    height: fit-content;
    position: sticky;
    top: 90px;
    padding: 20px;
    
    /* Capa de prioridad baja para no tapar los menús del header */
    z-index: 1;

    /* EFECTO GLASS (Cristal) */
    background: rgba(20, 10, 20, 0.4); /* Fondo oscuro con tinte rosado muy sutil */
    backdrop-filter: blur(15px);       /* Efecto de cristal empañado */
    -webkit-backdrop-filter: blur(15px);
    border-radius: 16px;

    /* EFECTO GLOW (Contorno Neón Rosa) */
    border: 1px solid rgba(255, 0, 150, 0.4); /* Borde rosa neón al 40% de opacidad */
    box-shadow: 0 0 20px rgba(255, 0, 150, 0.2), 
                inset 0 0 12px rgba(255, 255, 255, 0.05); /* Brillo interior suave */
    
    /* Suavizado de transición si decides ponerle hover luego */
    transition: all 0.3s ease;
}

/* Opcional: Si quieres que brille MÁS cuando pases el ratón por encima */
.sponsors-sidebar:hover {
    border-color: rgba(255, 0, 150, 0.7);
    box-shadow: 0 0 30px rgba(255, 0, 150, 0.4), 
                inset 0 0 15px rgba(255, 255, 255, 0.1);
}

/* =========================================================
   NOTIFICACIONES (GLASS + NEON)
   ========================================================= */
.glass-dropdown,
.glass-notif-card {
    position: absolute;
    top: 50px;
    right: 0;
    background: rgba(15, 15, 20, 0.9);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(120, 80, 255, 0.1);
    border-radius: 15px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 9999;
    transition: 0.3s ease;
}

.glass-notif-card:hover {
    border-color: var(--pink);
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 20px var(--pink-glow);
    background: rgba(20, 20, 25, 0.95);
    transform: translateY(5px) scale(1.01);
}

.notification-btn {
    position: relative;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.notification-btn svg {
    width: 100%;
    height: 100%;
    fill: var(--pink);
    filter: drop-shadow(0 0 5px var(--pink-glow));
}

.notification-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--pink);
    border-radius: 50%;
    border: 2px solid #0f0f14;
    box-shadow: 0 0 8px var(--pink-glow);
}

.notif-header h3 {
    margin: 0;
    color: white;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 700;
    padding-bottom: 20px;
}

.notif-tabs {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.tab-btn {
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.tab-btn.active {
    color: var(--pink);
    font-weight: bold;
}

.tab-line {
    width: 1.5px;
    height: 14px;
    background: rgba(255, 255, 255, 0.1);
}

.notif-scroll-area {
    max-height: 250px;
    overflow-y: auto;
}

.notif-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 15px;
}

.notif-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #222;
}

.notif-info p {
    margin: 0;
    font-size: 14px;
    color: #efefef;
    line-height: 1.3;
}

.notif-info .time-ago {
    font-size: 12px;
    color: #555;
}

.notif-video-preview {
    width: 65px;
    height: 38px;
    background: #1a1a1a;
    border-radius: 6px;
    margin-left: auto;
}

/* =========================================================
   PERFIL
   ========================================================= */
.user-profile-glow {
    position: relative;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.profile-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--pink);
    box-shadow: 0 0 8px var(--pink-glow);
    transition: 0.3s ease;
}

.profile-label:hover .profile-img {
    border-color: var(--cyan);
    box-shadow: 0 0 15px var(--cyan-glow);
}

.profile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 45, 149, 0.4);
    backdrop-filter: blur(2px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s ease;
}

.profile-overlay span {
    font-size: 8px;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
}

.profile-label:hover .profile-overlay {
    opacity: 1;
}

.status-online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    background: #2D8CFF;
    border-radius: 50%;
    border: 1.5px solid #0f0f14;
    box-shadow: 0 0 5px #2D8CFF;
}

.avatar-glow {
    box-shadow: 0 0 25px var(--cyan) !important;
    border-color: var(--cyan) !important;
}

/* =========================================================
   GRID DE VIDEOS (ESTILO YOUTUBE REAL)
   ========================================================= */

/* =========================================================
   GRID DE VIDEOS (ESTILO YOUTUBE REAL - CORREGIDO)
   ========================================================= */

#videosGrid {
    display: grid;
    /* Bajamos a 200px para que los 4 videos entren en la misma fila */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 24px 0; /* Quitamos padding lateral para ganar espacio */
}

/* LA CLAVE: Esto permite que los videos usen todo el espacio y el 4to suba */
.videos-column {
    flex: 1;
    min-width: 0;
}

.content-row {
    display: flex;
    gap: 20px;
    width: 100%;
}

.video-card {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    transition: 0.25s ease;
    padding-bottom: 10px;
}

/* Miniatura horizontal 16:9 */
.thumb, .video-thumbnail-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}

.thumb-img, .video-thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Corta lo vertical para que se vea horizontal */
}

.duration {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,0.8);
    padding: 2px 6px;
    font-size: 12px;
    border-radius: 4px;
    color: white;
}

.video-info {
    display: flex;
    gap: 12px;
    padding: 10px 8px 0 8px;
}

.profile-pic, .avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.video-details h3, .title {
    font-size: 14px;
    margin: 0 0 4px 0;
    color: white;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-details p, .channel, .stats {
    font-size: 12px;
    color: #aaa;
}

/* =========================================================
   PLAYER
   ========================================================= */
#yt-player-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#mainPlayer {
    width: 80%;
    max-width: 900px;
    border-radius: 10px;
}

/* =========================================================
   CHIPS
   ========================================================= */
#chips {
    display: flex;
    gap: 10px;
    padding: 12px 20px;
    overflow-x: auto;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid #303030;
}

.chip {
    padding: 6px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
}

.chip:hover {
    background: var(--pink);
    color: #000;
    box-shadow: 0 0 12px var(--pink-glow);
}

/* =========================================================
   TRENDING (SHORTS)
   ========================================================= */
.trending-section {
    padding: 20px;
}

.trending-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trending-title {
    font-size: 24px;
    font-weight: 700;
}

.trending-icon {
    width: 22px;
    height: 22px;
    fill: var(--cyan);
    filter: drop-shadow(0 0 10px var(--cyan-glow));
}


/* =========================================================
   ANIMACIONES
   ========================================================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ggFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   SCROLLBARS
   ========================================================= */
#sidebar-container::-webkit-scrollbar {
    width: 8px 
}
/* Romeo: que la barra de scroll lateral de la pagina principal sea igual que la de
   la arena (arena.html linea 37) - azul en vez del gris por defecto del navegador,
   que es lo que salia al no tener nunca un color de "thumb" definido aqui. */
#sidebar-container::-webkit-scrollbar-thumb {
    background: rgba(45,140,255,.3);
    border-radius: 4px;
}

/* Romeo: el mismo azul para el scroll del chat en vivo de la seccion "EN DIRECTO"
   en la pagina principal (index.html, #liveChatMsgs) - antes solo tenia un color
   de Firefox (scrollbar-color) gris/blanco y ningun ::-webkit-scrollbar-thumb, asi
   que en Chrome/Edge salia gris por defecto. */
#liveChatMsgs::-webkit-scrollbar {
    width: 4px;
}
#liveChatMsgs::-webkit-scrollbar-thumb {
    background: rgba(45,140,255,.3);
    border-radius: 4px;
}

/* Ocultar elementos */
.hidden {
    display: none !important;
}

/* CONTENEDOR PRINCIPAL */
.content-row {
    display: flex;
    gap: 20px;
    padding: 20px;
}

/* COLUMNA DE VIDEOS */
.videos-column {
    flex: 1;
}

/* PATROCINADORES A LA DERECHA */
.sponsors-sidebar {
    width: 320px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px;
    height: fit-content;
    position: sticky;
    top: 90px; /* justo debajo del header */
    z-index: 1; 
}

/* TARJETAS DE PATROCINADORES */
.sponsor-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
    text-align: center;
}

.sponsor-img-placeholder {
    width: 100%;
    height: 80px;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-visit {
    margin-top: 10px;
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: none;
    background: var(--pink);
    color: white;
    cursor: pointer;
    transition: 0.2s;
}

.btn-visit:hover {
    background: var(--cyan);
    color: black;
}

/* =========================================================
   TRENDING — tarjetas horizontales estilo YouTube
   ========================================================= */

.shorts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.short-card {
    cursor: pointer;
    transition: 0.25s ease;
}

.short-card:hover {
    transform: translateY(-4px) scale(1.02);
}

.short-thumbnail {
    position: relative;
}

.short-thumbnail img {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    border-radius: 18px;
    display: block;
}

.short-hover-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

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

@media (max-width: 600px) {
    .shorts-grid { grid-template-columns: 1fr; }
}

.short-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,.8);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: .02em;
}

.short-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 0 2px;
}

.short-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 13px;
}

.short-text {
    flex: 1;
    min-width: 0;
}

.short-info h4 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.short-channel {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 3px;
}

.short-views {
    font-size: 12px;
    color: #6b7280;
    margin-top: 1px;
}

/* =========================================================
   MENÚ CREAR — MÁS HORIZONTAL Y MÁS GRANDE
   ========================================================= */

#create-menu {
    position: absolute;
    top: 48px;
    right: 0;
    width: 260px;
    padding: 14px 0;
    background: rgba(20, 20, 20, 0.95);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    
    /* CAMBIA ESTAS DOS LÍNEAS PARA EL EFECTO ROSA */
    border: 1.5px solid rgba(255, 0, 150, 0.5); 
    box-shadow: 0 0 20px rgba(255, 0, 150, 0.3), 
                0 8px 25px rgba(0, 0, 0, 0.6);

    /* SUBE EL Z-INDEX PARA QUE NO SE QUEDE DETRÁS */
    z-index: 10000;
    transition: box-shadow 0.3s ease;
}

#create-menu:hover {
    box-shadow: 0 0 30px rgba(255, 0, 150, 0.5), 0 12px 30px rgba(0, 0, 0, 0.7);
}


/* cada opción del menú */
#create-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    font-size: 16px; /* más grande */
    cursor: pointer;
    transition: 0.2s ease;
}

.create-btn:hover {
    transform: scale(1.1); 
    background: transparent; /* Ahora el fondo no cambiará */
    border-color: var(--pink); /* Opcional: solo el borde se ilumina un poco */
}

/* 1. BOTÓN HAMBURGUESA NORMAL (HORIZONTAL) */
.hamburger-glow {
    position: fixed;
    top: 20px;
    left: 15px;
    z-index: 10001;
    
    /* Reset de estilos verticales */
    writing-mode: horizontal-tb !important; /* Fuerza horizontal */
    transform: none !important;              /* Quita rotaciones */
    display: flex !important;
    align-items: center;
    justify-content: center;
    
    /* Estilo GlowGlass Rosa */
    background: rgba(255, 0, 150, 0.1);
    border: 1px solid rgba(255, 0, 150, 0.5);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    width: 40px;  /* Tamaño fijo para que sea cuadrado */
    height: 40px;
    box-shadow: 0 0 15px rgba(255, 0, 150, 0.3);
    transition: 0.3s;
}

.hamburger-glow:hover {
    background: rgba(255, 0, 150, 0.2);
    box-shadow: 0 0 25px rgba(255, 0, 150, 0.6);
}

.hamburger-glow svg {
    width: 24px;
    height: 24px;
    fill: #ff0096; /* Color rosa del icono */
}

/* 2. ASEGURAR QUE EL SIDEBAR NO TENGA LA LETRA VERTICAL */
#sidebar-container::before, 
#sidebar-container::after {
    display: none !important; /* Esto elimina definitivamente el texto vertical */
}

/* EFECTO GLOWGLASS ROSA PARA LAS TARJETAS */
.video-card, 
.sponsor-card, 
.short-card {
    background: rgba(255, 255, 255, 0.03); /* Fondo tipo cristal oscuro */
    backdrop-filter: blur(10px);           /* Desenfoque de fondo */
    border-radius: 15px;                   /* Esquinas redondeadas */
    
    /* EL CONTORNO ROSA NEÓN */
    border: 1px solid rgba(255, 0, 150, 0.4); 
    
    /* EL RESPLANDOR (GLOW) */
    box-shadow: 0 0 15px rgba(255, 0, 150, 0.2), 
                inset 0 0 5px rgba(255, 0, 150, 0.1);
                
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Para que la imagen no tape el borde */
}

/* Efecto cuando pasas el mouse por encima (opcional) */
.video-card:hover, 
.sponsor-card:hover, 
.short-card:hover {
    transform: translateY(-5px); /* Salta un poquito */
    box-shadow: 0 0 25px rgba(255, 0, 150, 0.5); /* El brillo se intensifica */
    border: 1px solid rgba(255, 0, 150, 0.8);
}

.hidden-input {
    display: none !important;
}

/* Asegura que el contenedor deje espacio para todos */
.search-inner {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-right: 10px;
}

/* El botón del micrófono forzado */
.mic-btn {
    display: flex !important; /* Fuerza la visibilidad */
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px; /* Evita que se encoja */
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 0, 150, 0.5); /* Tu rosa Glow */
    border-radius: 50% !important;
    cursor: pointer;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mic-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 0 15px rgba(255, 0, 150, 0.6);
    background: rgba(255, 0, 150, 0.2);
}

/* Micrófono dentro de la cápsula de búsqueda */
.mic-inline-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5); /* Color discreto inicial */
    cursor: pointer;
    padding: 0 12px;
    display: flex;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mic-inline-btn:hover {
    color: #ff2d95; /* Se vuelve rosa al tocarlo */
    transform: scale(1.2);
}

/* Asegura que el buscador sea una cápsula limpia */
.search-inner {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 2px 4px 2px 16px;
}

#ai-input {
    flex: 1;
    background: none;
    border: none;
    color: white;
    padding: 10px;
    outline: none;
    font-size: 14px;
}

@keyframes bounce-effect {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); } /* Se agranda un 10% */
}

.menu-item:hover {
  animation: bounce-effect 0.4s ease;
  cursor: pointer;
  color: #ff0096; /* Opcional: cambia el color para resaltar más */
}

/* Esto quita el fondo de todos los botones del menú */
.item {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: transparent !important; /* Quita el recuadro de Inicio/Historial */
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Este es el efecto de REBOTE al pasar el ratón */
.item:hover {
    transform: scale(1.1); /* Crece un 10% */
    background: transparent !important; /* Asegura que no salga el recuadro al pasar el puntero */
}

/* 1. Ajusta el Grid para que los videos sean anchos */
#videosGrid {
    display: grid;
    /* Al poner 320px como mínimo, obligas a que sean horizontales */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    padding: 20px 0;
}

/* 2. Corrige el contenedor de la miniatura (Usa la clase .thumb de tu HTML) */
.thumb {
    width: 100%;
    aspect-ratio: 16 / 9; /* ESTO ES LO MÁS IMPORTANTE */
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
}

/* 3. Evita que la imagen original (si es vertical) rompa el diseño */
.thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* RECORTA los bordes de fotos verticales para que encajen en el 16:9 */
    display: block;
}

/* 4. Asegura que la info del video esté bien alineada */
.video-info {
    display: flex;
    gap: 12px;
    padding-top: 12px;
}

/* FEATURED GRID: 3 vídeos + patrocinadores (4 columnas iguales) */
.featured-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  align-items: start;
  width: 100%;
  padding: 16px 20px;
  box-sizing: border-box;
}

/* Cada vídeo ocupa 1 columna y hereda el estilo de .video-card */
.featured-video {
  width: 100%;
  min-height: 1px; /* evita colapso en algunos navegadores */
}

/* Si quieres que las tarjetas destacadas usen exactamente el mismo markup
   que tus video-cards, el JS inyectará .video-card dentro de cada .featured-video */

/* Patrocinadores como tarjeta del grid: mismo look que .video-card */
.sponsor-card-as-grid {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

/* Elementos internos de patrocinadores */
.sponsor-item {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}

.sponsor-img-placeholder {
  width: 72px;
  height: 56px;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sponsor-meta { display:flex; gap:8px; align-items:center; }

/* Responsividad: en pantallas pequeñas pasa a 1 columna */
@media (max-width: 900px) {
  .featured-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Oculta únicamente la sidebar de patrocinadores inferior */
.sponsors-sidebar {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* === ZOOM SUAVE PARA LA VENTANA DE PATROCINADORES === */

.sponsor-card-as-grid {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s ease;
    transform-origin: center;
}

.sponsor-card-as-grid:hover {
    transform: scale(1.04);
    box-shadow: 0 12px 32px rgba(255, 0, 150, 0.25);
}

/* === ZOOM SUAVE PARA CADA ELEMENTO INTERNO === */

.sponsor-card-as-grid .sponsor-item {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s ease;
    transform-origin: center;
}

.sponsor-card-as-grid .sponsor-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 26px rgba(255, 0, 150, 0.25);
}

/* Romeo: la fila de chips de categoria (Todo/FPS/Battle Royale/...) tenia una
   barrita de scroll horizontal visible que apenas se movia - quitada del todo,
   igual que ya se hizo con .button-row mas abajo; el usuario sigue pudiendo
   arrastrar/hacer scroll con el raton o el dedo, solo desaparece la barra. */
.chips-container {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 12px 20px;
    white-space: nowrap;
    -ms-overflow-style: none;  /* IE y Edge */
    scrollbar-width: none;  /* Firefox */
}
.chips-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari y Opera */
}

.chip {
    padding: 8px 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    cursor: pointer;
    transition: 0.25s ease;
    color: white;
    font-size: 14px;
}

.chip:hover {
    background: rgba(255,0,150,0.25);
    border-color: rgba(255,0,150,0.5);
    transform: scale(1.05);
}

/* Contenedor principal para alinear flechas y botones */
.navigation-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    position: relative;
    padding: 10px 0;
}

/* Hilera de botones: quitamos el scroll visual */
.button-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
    flex-grow: 1;
    -ms-overflow-style: none;  /* IE y Edge */
    scrollbar-width: none;  /* Firefox */
}

.button-row::-webkit-scrollbar {
    display: none; /* Chrome, Safari y Opera */
}

/* Estilo Glowglass para las flechas y botones */
.nav-btn, .chip {
    background: transparent; /* QUITAMOS EL COLOR DE FONDO */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde suave */
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    backdrop-filter: none; /* QUITAMOS EL BLUR QUE OSCURECE */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    position: relative; 
    z-index: 10;
}

/* Refuerzo para que las flechas siempre estén al frente */
.nav-btn {
    z-index: 999;
}

/* Efecto Neón Azul al poner el puntero (Hover) */
.nav-btn:hover, .chip:hover {
    background: rgba(0, 212, 255, 0.15);
    border-color: #00d4ff;
    color: #00d4ff;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.6), 
                inset 0 0 10px rgba(0, 212, 255, 0.3);
    text-shadow: 0 0 5px #00d4ff;
}

/* Ocultar botones cuando no son necesarios */
.nav-btn.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.arrow { font-size: 1.1rem; }

.navigation-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    position: relative;
    background: transparent !important; /* Asegúrate de que sea transparente */
}

.button-row {
    display: flex;
    gap: 10px;
    overflow-x: auto; /* ESTO ACTIVA EL SCROLL */
    scroll-behavior: smooth;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
}


/* ═══════════════════════════════════════════════════
   NUEVAS FUNCIONALIDADES — AÑADIDAS LIMPIAMENTE
   ═══════════════════════════════════════════════════ */

/* ── Generate btn activo ── */
#generateBtn.active { background:linear-gradient(135deg,var(--pink),#FF8A00)!important; box-shadow:0 0 18px rgba(255,45,149,0.5); }
#generateBtn.active span { color:#fff!important; }
#generateBtn.active .ai-stars { fill:#fff!important; }

/* ── Eye Care ── */
.eye-care-btn { background:none; border:none; color:var(--text-secondary); cursor:pointer; padding:6px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:color .25s,transform .25s; flex-shrink:0; }
.eye-care-btn:hover { color:#ffb347; transform:scale(1.18); }
.eye-care-btn.active { color:#ffb347; filter:drop-shadow(0 0 6px rgba(255,160,40,0.7)); }
#eye-care-overlay { display:none; position:fixed; inset:0; background:rgba(255,140,30,0.18); pointer-events:none; z-index:99998; mix-blend-mode:multiply; }
#eye-care-overlay.active { display:block; animation:eyeOn .4s ease-out; }
@keyframes eyeOn { from{opacity:0} to{opacity:1} }
#eye-care-toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(16px); background:rgba(20,20,30,0.92); border:1px solid rgba(255,140,0,0.35); color:#ffb347; border-radius:20px; padding:9px 20px; font-size:13px; font-weight:500; font-family:inherit; pointer-events:none; z-index:99999; opacity:0; transition:opacity .3s,transform .3s; white-space:nowrap; }
#eye-care-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Notificaciones ── */
.notification-btn { position:relative; }
.glass-notif-card { position:absolute; top:54px; right:0; width:360px; background:rgba(15,15,20,0.97); backdrop-filter:blur(25px); border:1px solid rgba(120,80,255,0.2); border-radius:16px; padding:16px 18px 14px; box-shadow:0 16px 48px rgba(0,0,0,0.65); z-index:10001; overflow:hidden; }
.notif-header { margin-bottom:8px; }
.notif-header h3 { margin:0; color:white; font-size:16px; font-weight:700; }
.notif-tabs { display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid rgba(255,255,255,0.06); margin-bottom:4px; }
.tab-btn { font-size:13px; color:var(--text-secondary); cursor:pointer; font-family:inherit; background:none; border:none; padding:0; }
.tab-btn.active { color:var(--pink); font-weight:600; }
.notif-scroll-area { max-height:200px; overflow-y:auto; scrollbar-width:thin; }
.notif-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.notif-row:last-child { border-bottom:none; }
.notif-user-avatar { width:38px; height:38px; border-radius:50%; background:#222; flex-shrink:0; }
.notif-video-preview { width:58px; height:34px; background:#1a1a1a; border-radius:5px; flex-shrink:0; }
.notif-info { flex:1; min-width:0; }
.notif-info p { margin:0; font-size:13px; color:#efefef; line-height:1.35; }
.notif-info .time-ago { font-size:11px; color:#555; }

/* ── Create menu ── */
.create-container { position:relative; }
#create-menu { position:absolute; top:48px; right:0; width:200px; transition:box-shadow 0.3s ease; }
#create-menu:hover { box-shadow:0 0 30px rgba(255,0,150,0.5), 0 12px 30px rgba(0,0,0,0.7); }

/* ── Chat IA ── */
#ai-chat-panel { position:fixed; bottom:24px; right:24px; width:380px; height:560px; background:rgba(10,10,18,0.97); border:1px solid rgba(255,45,149,0.3); border-radius:20px; display:flex; flex-direction:column; z-index:99990; box-shadow:0 20px 60px rgba(0,0,0,0.6); backdrop-filter:blur(20px); transform:translateY(20px) scale(0.95); opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; }
#ai-chat-panel.open { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
.chat-header { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--glass-border); flex-shrink:0; }
.chat-header-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--pink),#FF8A00); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.chat-header-name { font-size:14px; font-weight:600; color:var(--text-main); }
.chat-header-status { font-size:11px; color:#3ddc84; }
.chat-close-btn { background:none; border:none; color:var(--text-secondary); cursor:pointer; padding:4px; border-radius:50%; display:flex; align-items:center; margin-left:auto; transition:color .2s; }
.chat-close-btn:hover { color:var(--pink); }
.chat-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; scrollbar-width:thin; scrollbar-color:rgba(45,140,255,.3) transparent; }
/* Romeo: mismo azul del scroll del chat principal (#liveChatMsgs) en vez del gris que
   salia en Chrome/Edge por no tener nunca un ::-webkit-scrollbar-thumb definido aqui. */
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(45,140,255,.3); border-radius: 4px; }
.chat-msg { display:flex; gap:8px; align-items:flex-end; animation:msgIn .2s ease-out; }
.chat-msg.user { flex-direction:row-reverse; }
@keyframes msgIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.chat-bubble { max-width:78%; padding:10px 14px; border-radius:16px; font-size:13px; line-height:1.55; color:var(--text-main); }
.chat-msg.ai .chat-bubble { background:rgba(255,255,255,0.06); border:1px solid var(--glass-border); border-bottom-left-radius:4px; }
.chat-msg.user .chat-bubble { background:linear-gradient(135deg,var(--pink),#c0006e); border-bottom-right-radius:4px; color:#fff; }
.chat-msg-av { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.chat-msg.ai .chat-msg-av { background:linear-gradient(135deg,var(--pink),#FF8A00); }
.chat-msg.user .chat-msg-av { background:rgba(255,255,255,0.1); }
.chat-typing .chat-bubble { display:flex; gap:4px; align-items:center; padding:12px 16px; }
.chat-typing .dot { width:7px; height:7px; border-radius:50%; background:var(--pink); animation:typeDot 1.2s infinite ease-in-out; }
.chat-typing .dot:nth-child(2){animation-delay:.2s} .chat-typing .dot:nth-child(3){animation-delay:.4s}
@keyframes typeDot { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }
.chat-suggestions { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 10px; flex-shrink:0; }
.chat-suggestion { background:rgba(255,45,149,0.08); border:1px solid rgba(255,45,149,0.25); color:var(--pink); border-radius:14px; padding:5px 11px; font-size:12px; cursor:pointer; font-family:inherit; transition:background .2s; white-space:nowrap; }
.chat-suggestion:hover { background:rgba(255,45,149,0.2); }
.chat-input-row { display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--glass-border); flex-shrink:0; }
.chat-input { flex:1; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:20px; padding:9px 14px; color:var(--text-main); font-size:13px; font-family:inherit; outline:none; transition:border-color .2s; }
.chat-input:focus { border-color:var(--pink); }
.chat-input::placeholder { color:var(--text-secondary); }
.chat-send-btn { width:36px; height:36px; border-radius:50%; background:var(--pink); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .2s,transform .15s; }
.chat-send-btn:hover { background:#ff4fa0; transform:scale(1.08); }
.chat-send-btn:disabled { background:rgba(255,45,149,0.3); cursor:not-allowed; transform:none; }

/* ── Mic ── */
.mic-inline-btn.listening { color:var(--pink)!important; animation:micPulse .8s ease-in-out infinite; }
@keyframes micPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

/* ── WIDGETS ── */
.widgets-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:20px 20px 0; }
.sidebar-widget { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:16px; transition:border-color .3s; }
.sidebar-widget:hover { border-color:rgba(255,45,149,0.25); }
.widget-header { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.widget-dot { width:8px; height:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 8px var(--pink-glow); animation:pulseDot 2s infinite; flex-shrink:0; }
@keyframes pulseDot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.7} }
.widget-title { font-size:14px; font-weight:700; color:var(--text-main); }
.top-item { display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:10px; cursor:pointer; transition:background .25s,transform .3s cubic-bezier(.16,1,.3,1); margin-bottom:4px; }
.top-item:hover { background:rgba(255,255,255,0.05); transform:scale(1.03) translateX(4px); }
.top-rank { font-size:18px; font-weight:800; color:rgba(255,255,255,0.15); width:18px; text-align:center; flex-shrink:0; }
.top-item[data-rank="1"] .top-rank { color:var(--pink); text-shadow:0 0 10px var(--pink-glow); }
.top-item[data-rank="2"] .top-rank { color:var(--cyan); }
.top-item[data-rank="3"] .top-rank { color:#ffb347; }
.top-item[data-rank="4"] .top-rank { color:#FFC98A; }
.top-item[data-rank="5"] .top-rank { color:#60a5fa; }
.top-thumb { width:72px; aspect-ratio:16/9; border-radius:7px; overflow:hidden; flex-shrink:0; background:var(--bg-secondary); }
.top-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.top-info { flex:1; min-width:0; }
.top-title { font-size:12px; font-weight:600; color:var(--text-main); line-height:1.35; margin-bottom:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.top-views { font-size:11px; color:var(--text-secondary); margin-bottom:5px; }
.top-bar-wrap { height:3px; background:rgba(255,255,255,0.07); border-radius:3px; overflow:hidden; }
.top-bar { height:100%; background:linear-gradient(90deg,var(--pink),var(--cyan)); border-radius:3px; animation:barGrow 1s cubic-bezier(.16,1,.3,1) forwards; transform-origin:left; }
@keyframes barGrow { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.creators-list { display:flex; flex-direction:column; gap:6px; }
.creator-item { display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:10px; cursor:pointer; transition:background .25s,transform .3s cubic-bezier(.16,1,.3,1); }
.creator-item:hover { background:rgba(255,255,255,0.05); transform:scale(1.03) translateX(4px); }
.creator-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#fff; flex-shrink:0; }
.creator-name { font-size:13px; font-weight:600; color:var(--text-main); }
.creator-subs { font-size:11px; color:var(--text-secondary); margin-top:1px; }
.creator-info { flex:1; min-width:0; }
.creator-badge { font-size:16px; flex-shrink:0; }
@media(max-width:900px){ .widgets-row{grid-template-columns:1fr;} }

/* ── Hover preview ── */
#video-hover-preview { position:absolute; z-index:8000; border-radius:14px; overflow:hidden; background:#000; pointer-events:none; opacity:0; transform:scale(0.88) translateY(10px); filter:blur(6px) brightness(0.6); transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1),filter .4s cubic-bezier(.16,1,.3,1); }
#video-hover-preview.visible { opacity:1; transform:scale(1.05) translateY(-8px); filter:blur(0) brightness(1); box-shadow:0 0 0 1px rgba(255,45,149,.35),0 24px 60px rgba(0,0,0,.75); }
#video-hover-preview.hiding { opacity:0; transform:scale(0.92) translateY(6px); filter:blur(4px) brightness(0.5); transition:opacity .22s ease,transform .25s ease,filter .22s ease; }
#video-hover-preview video { width:100%; aspect-ratio:16/9; display:block; object-fit:cover; }
.hover-preview-info { display:flex; flex-direction:column; gap:3px; padding:8px 12px 10px; background:linear-gradient(to bottom,rgba(10,10,18,.85),rgba(10,10,18,.98)); }
.hover-preview-title { font-size:13px; font-weight:600; color:var(--text-main); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hover-preview-views { font-size:11px; color:var(--text-secondary); }
.video-card { transition:transform .3s cubic-bezier(.16,1,.3,1); }
.video-card:hover { transform:translateY(-3px); }

/* ══════════════════════════════════════════════
   REPRODUCTOR PERSONALIZADO
   ══════════════════════════════════════════════ */
#yt-player-modal { position:fixed; inset:0; background:rgba(0,0,0,0.92); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:99999; animation:tpFadeIn .2s ease-out; }
#yt-player-modal.hidden { display:none!important; }
@keyframes tpFadeIn { from{opacity:0} to{opacity:1} }
.tp-overlay { position:absolute; inset:0; cursor:pointer; }
/* Wrapper: contiene el video y todos los controles superpuestos */
.tp-wrapper {
    position: relative;
    width: 90vw;
    max-width: 1100px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(255,45,149,.15);
    z-index: 1;
    flex-shrink: 0;
}
/* El video SIEMPRE llena el wrapper completamente */
#mainPlayer {
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    cursor: pointer;
    background: #000;
}
/* Pantalla completa: el video llena toda la pantalla */
.tp-wrapper:fullscreen { border-radius:0; width:100vw; max-width:none; height:100vh; }
.tp-wrapper:-webkit-full-screen { border-radius:0; width:100vw; max-width:none; height:100vh; }
.tp-wrapper:fullscreen #mainPlayer,
.tp-wrapper:-webkit-full-screen #mainPlayer { object-fit:cover !important; }

.tp-controls { position:absolute; bottom:0; left:0; right:0; padding:0 0 6px; background:linear-gradient(transparent,rgba(0,0,0,.85)); opacity:0; transition:opacity .25s; z-index:10; }
.tp-wrapper:hover .tp-controls, .tp-wrapper.tp-paused .tp-controls { opacity:1; }
.tp-wrapper:fullscreen .tp-controls, .tp-wrapper:-webkit-full-screen .tp-controls { opacity:1; }
.tp-progress-wrap { padding:10px 14px 4px; position:relative; cursor:pointer; }
.tp-progress-bg { height:4px; background:rgba(255,255,255,.2); border-radius:4px; position:relative; transition:height .15s; }
.tp-progress-wrap:hover .tp-progress-bg { height:6px; }
.tp-buffered { position:absolute; left:0; top:0; bottom:0; background:rgba(255,255,255,.35); border-radius:4px; width:0%; }
.tp-played  { position:absolute; left:0; top:0; bottom:0; background:var(--pink); border-radius:4px; width:0%; }
.tp-thumb-dot { position:absolute; top:50%; transform:translate(-50%,-50%) scale(0); width:14px; height:14px; background:var(--pink); border-radius:50%; transition:transform .15s; left:0%; }
.tp-progress-wrap:hover .tp-thumb-dot { transform:translate(-50%,-50%) scale(1); }
.tp-hover-preview { position:absolute; bottom:28px; transform:translateX(-50%); left:0%; background:#000; border-radius:6px; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .15s; border:1px solid rgba(255,45,149,.3); box-shadow:0 8px 24px rgba(0,0,0,.6); }
.tp-progress-wrap:hover .tp-hover-preview { opacity:1; }
.tp-hover-preview canvas { display:block; }
.tp-hover-time { display:block; text-align:center; font-size:11px; font-weight:700; color:#fff; padding:4px 0; background:rgba(0,0,0,.8); }
.tp-ctrl-row { display:flex; align-items:center; justify-content:space-between; padding:4px 10px 6px; gap:4px; }
.tp-ctrl-left, .tp-ctrl-right { display:flex; align-items:center; gap:4px; }
.tp-btn { background:none; border:none; color:#fff; cursor:pointer; padding:6px; border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:.85; transition:opacity .15s,background .15s,transform .1s; }
.tp-btn:hover { opacity:1; background:rgba(255,255,255,.12); transform:scale(1.1); }
.tp-btn svg { width:20px; height:20px; fill:currentColor; }
.tp-close-btn:hover { background:rgba(255,45,149,.25); color:var(--pink); }
.tp-vol-wrap { display:flex; align-items:center; gap:2px; }
.tp-vol-slider-wrap { width:0; overflow:hidden; transition:width .2s; }
.tp-vol-wrap:hover .tp-vol-slider-wrap { width:72px; }
.tp-vol-slider { width:68px; height:4px; accent-color:var(--pink); cursor:pointer; -webkit-appearance:none; appearance:none; background:rgba(255,255,255,.3); border-radius:4px; outline:none; }
.tp-vol-slider::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--pink); cursor:pointer; }
.tp-time { font-size:13px; color:#fff; white-space:nowrap; margin-left:4px; font-weight:500; font-variant-numeric:tabular-nums; }
.tp-menu-wrap { position:relative; }
.tp-menu { position:absolute; bottom:42px; right:0; background:rgba(18,18,24,.97); border:1px solid rgba(255,255,255,.12); border-radius:10px; min-width:140px; overflow:hidden; backdrop-filter:blur(12px); box-shadow:0 8px 28px rgba(0,0,0,.6); animation:tpMenuIn .15s ease-out; }
@keyframes tpMenuIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.tp-menu.hidden { display:none; }
.tp-menu-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.4); padding:10px 14px 6px; }
.tp-menu-item { font-size:13px; color:#fff; padding:9px 14px; cursor:pointer; transition:background .15s; display:flex; align-items:center; gap:8px; }
.tp-menu-item:hover { background:rgba(255,255,255,.08); }
.tp-menu-item.active { color:var(--pink); font-weight:600; }
.tp-menu-item.active::before { content:"✓"; font-size:11px; }
.tp-center-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:5; }
.tp-center-ripple { width:72px; height:72px; background:rgba(255,45,149,.8); border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.5); transition:opacity .2s,transform .2s; }
.tp-center-ripple svg { width:32px; height:32px; fill:#fff; margin-left:4px; }
.tp-center-ripple.show { opacity:1; transform:scale(1); }
.tp-center-ripple.hide { opacity:0; transform:scale(1.3); transition:opacity .3s,transform .3s; }
.tp-buffering { position:absolute; inset:0; display:none; align-items:center; justify-content:center; pointer-events:none; z-index:6; }
.tp-buffering.active { display:flex; }
.tp-spinner { width:48px; height:48px; border:4px solid rgba(255,255,255,.2); border-top-color:var(--pink); border-radius:50%; animation:tpSpin .8s linear infinite; }
@keyframes tpSpin { to{transform:rotate(360deg)} }
::cue { background:rgba(0,0,0,.75); color:#fff; font-size:1em; padding:2px 6px; border-radius:3px; }
@media(max-width:600px){ .tp-wrapper{width:100vw;border-radius:0;} .tp-time{font-size:11px;} .tp-btn svg{width:18px;height:18px;} }

/* ═══════════════════════════════════════════════
   MENÚ PERFIL ESTILO YOUTUBE
   ═══════════════════════════════════════════════ */
.user-profile-glow { position:relative; }
#profile-menu {
    position: absolute;
    top: 54px;
    right: 0;
    width: 300px;
    background: rgba(14,14,22,0.99);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(24px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.8);
    z-index: 10002;
    animation: pmIn .18s ease-out;
}
#profile-menu.hidden { display:none!important; }
@keyframes pmIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* Cabecera con foto y nombre */
.pm-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pm-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--pink); flex-shrink: 0;
}
.pm-uname { font-size:14px; font-weight:700; color:var(--text-main); }
.pm-handle { font-size:12px; color:var(--text-secondary); margin-top:1px; }
.pm-view-channel {
    display: inline-block; margin-top:6px;
    font-size:12px; color:var(--cyan); cursor:pointer;
    border:1px solid rgba(0,242,255,0.3); border-radius:14px;
    padding:3px 10px; transition:background .15s;
}
.pm-view-channel:hover { background:rgba(0,242,255,0.1); }

/* Grupos de opciones */
.pm-section { border-bottom:1px solid rgba(255,255,255,0.07); padding:6px 0; }
.pm-section:last-child { border-bottom:none; }

/* Ítem del menú */
.pm-item {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 16px; cursor: pointer; font-size:13px;
    color: var(--text-main); transition: background .15s;
}
.pm-item:hover { background: rgba(255,255,255,0.06); }
.pm-item svg { width:20px; height:20px; fill:currentColor; color:var(--text-secondary); flex-shrink:0; }
.pm-item .pm-label { flex:1; }
.pm-item .pm-value { font-size:12px; color:var(--text-secondary); }
.pm-item.pm-danger { color:#ff6b6b; }
.pm-item.pm-danger svg { color:#ff6b6b; }
.pm-item.pm-danger:hover { background:rgba(255,80,80,0.08); }
/* ══════════════════════════════════════════════
   GAMING THEME & COMMUNITY — TENDENCE
   ══════════════════════════════════════════════ */

/* Gaming sidebar dot */
.game-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:8px; flex-shrink:0; }

/* ─── COMMUNITY PAGE LAYOUT ─────────────────── */
body.community-page { display:flex; flex-direction:column; overflow:hidden; }
body.community-page .main-header-wrapper { position:sticky; top:0; z-index:99999; }

.community-layout {
    display: grid;
    grid-template-columns: 72px 240px 1fr 240px;
    height: calc(100vh - 70px);
    overflow: hidden;
    background: #1a1a2e;
}

/* SERVERS column */
.comm-servers {
    background: #111122;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 8px;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,0.05);
}
.comm-server-home, .comm-server-add, .comm-server-explore {
    width: 48px; height: 48px; border-radius: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: border-radius .2s, background .2s;
    background: #1e1e3a; color: #2D8CFF;
}
.comm-server-home:hover, .comm-server-add:hover, .comm-server-explore:hover,
.comm-server-home.active { border-radius: 16px; background: #2D8CFF; color: #000; }
.comm-server-home svg, .comm-server-add svg, .comm-server-explore svg { width:24px; height:24px; fill:currentColor; }
.comm-server-item {
    width: 48px; height: 48px; border-radius: 24px;
    overflow: hidden; cursor: pointer;
    transition: border-radius .2s; flex-shrink:0;
    border: 2px solid transparent;
}
.comm-server-item:hover { border-radius: 16px; border-color: #2D8CFF; }
.comm-server-item.active { border-radius: 16px; border-color: #2D8CFF; }
.comm-server-item img { width:100%; height:100%; object-fit:cover; }
.comm-server-divider { width:32px; height:2px; background:rgba(255,255,255,0.1); border-radius:2px; }

/* CHANNELS column */
.comm-channels {
    background: #16162a;
    display: flex; flex-direction: column;
    overflow-y: auto;
    border-right: 1px solid rgba(255,255,255,0.05);
}
.comm-server-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px; font-weight: 700; color: #fff; font-size:15px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    position:sticky; top:0; background:#16162a; z-index:1;
}
.comm-server-settings { background:none; border:none; color:#aaa; cursor:pointer; padding:4px; }
.comm-server-settings svg { width:18px; height:18px; fill:currentColor; }
.comm-server-settings:hover { color:#fff; }

.comm-channel-section { padding: 8px 0; }
.comm-channel-label {
    display: flex; align-items: center; gap:4px;
    padding: 4px 8px 4px 16px; font-size:11px; font-weight:700;
    color: #888; text-transform:uppercase; letter-spacing:.05em;
    cursor:pointer;
}
.comm-channel-label:hover { color: #ccc; }
.comm-channel-label svg { width:14px; height:14px; fill:currentColor; }
.comm-channel-add {
    margin-left:auto; background:none; border:none; color:#888;
    cursor:pointer; font-size:16px; padding:0 4px;
}
.comm-channel-add:hover { color:#fff; }
.comm-channel-item {
    display: flex; align-items: center; gap:6px;
    padding: 6px 8px 6px 16px; color: #888; font-size:14px;
    cursor: pointer; border-radius:6px; margin:1px 8px;
    transition: background .15s, color .15s; position:relative;
}
.comm-channel-item:hover { background:rgba(255,255,255,0.06); color:#ccc; }
.comm-channel-item.active { background:rgba(45,140,255,0.12); color:#2D8CFF; }
.comm-channel-item.voice { color:#777; }
.comm-channel-item.voice svg { width:16px; height:16px; fill:currentColor; flex-shrink:0; }
.comm-ch-icon { font-size:16px; font-weight:700; color:inherit; }
.comm-ch-notif {
    margin-left:auto; background:#ef4444; color:#fff;
    font-size:10px; font-weight:700; padding:1px 5px;
    border-radius:10px; min-width:16px; text-align:center;
}
.comm-voice-count { margin-left:auto; font-size:11px; color:#666; }

.comm-user-panel {
    margin-top: auto;
    display: flex; align-items: center; gap:8px;
    padding: 10px 12px;
    background: #111122; border-top: 1px solid rgba(255,255,255,0.05);
    position:sticky; bottom:0;
}
.comm-user-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; }
.comm-user-name { font-size:13px; font-weight:600; color:#fff; }
.comm-user-status { font-size:11px; color:#888; display:flex; align-items:center; gap:4px; }
.comm-user-actions { margin-left:auto; display:flex; gap:4px; }
.comm-user-actions button { background:none; border:none; color:#888; cursor:pointer; padding:4px; border-radius:4px; }
.comm-user-actions button:hover { color:#fff; background:rgba(255,255,255,0.1); }
.comm-user-actions button svg { width:18px; height:18px; fill:currentColor; display:block; }

/* STATUS DOTS */
.status-dot { width:10px; height:10px; border-radius:50%; border:2px solid #16162a; flex-shrink:0; }
.status-dot.online { background:#2D8CFF; }
.status-dot.idle { background:#f59e0b; }
.status-dot.offline { background:#666; }

/* CHAT main */
.comm-chat {
    display: flex; flex-direction: column;
    background: #1e1e38; overflow:hidden;
}
.comm-chat-header {
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.07);
    background:#1e1e38; flex-shrink:0;
}
.comm-ch-icon-lg { font-size:22px; font-weight:700; color:#2D8CFF; }
.comm-chat-title { font-size:15px; font-weight:700; color:#fff; }
.comm-chat-desc { font-size:12px; color:#888; }
.comm-chat-actions { margin-left:auto; display:flex; gap:4px; }
.comm-chat-actions button { background:none; border:none; color:#888; cursor:pointer; padding:6px; border-radius:6px; }
.comm-chat-actions button:hover { color:#fff; background:rgba(255,255,255,0.08); }
.comm-chat-actions button svg { width:20px; height:20px; fill:currentColor; display:block; }

.comm-messages {
    flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:4px;
    scrollbar-width:thin; scrollbar-color:#333 transparent;
}
.comm-welcome {
    text-align:center; padding:32px 16px; color:#888;
    border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:16px;
}
.comm-welcome-icon { font-size:48px; margin-bottom:12px; }
.comm-welcome h2 { color:#fff; font-size:22px; margin-bottom:8px; }
.comm-welcome p { font-size:14px; line-height:1.6; }

.comm-msg-group {
    display:flex; gap:12px; padding:4px 8px; border-radius:8px;
    transition:background .15s;
}
.comm-msg-group:hover { background:rgba(255,255,255,0.03); }
.comm-msg-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; margin-top:2px; object-fit:cover; }
.comm-msg-content { flex:1; min-width:0; }
.comm-msg-header { display:flex; align-items:center; gap:8px; margin-bottom:3px; flex-wrap:wrap; }
.comm-msg-name { font-size:14px; font-weight:700; cursor:pointer; }
.comm-msg-name:hover { text-decoration:underline; }
.comm-msg-role {
    font-size:10px; font-weight:700; padding:1px 6px;
    border-radius:4px; color:#000; text-transform:uppercase;
}
.comm-msg-time { font-size:11px; color:#555; }
.comm-msg-text { font-size:14px; color:#ccc; line-height:1.5; word-break:break-word; }

/* Clip in message */
.comm-msg-clip {
    display:flex; gap:10px; margin-top:8px;
    background:#111122; border-radius:10px; overflow:hidden;
    border:1px solid rgba(45,140,255,0.15); max-width:400px; cursor:pointer;
}
.comm-msg-clip:hover { border-color:rgba(45,140,255,0.4); }
.comm-clip-thumb { position:relative; width:120px; height:68px; flex-shrink:0; }
.comm-clip-thumb img { width:100%; height:100%; object-fit:cover; }
.comm-clip-play {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.5); font-size:20px; color:#fff;
}
.comm-clip-info { padding:10px 12px; }
.comm-clip-title { font-size:13px; font-weight:600; color:#fff; }
.comm-clip-meta { font-size:11px; color:#888; margin-top:4px; }

/* Reactions */
.comm-msg-reactions { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.comm-reaction {
    display:flex; align-items:center; gap:4px;
    background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1);
    border-radius:8px; padding:2px 8px; font-size:13px; color:#ccc;
    cursor:pointer; transition:background .15s;
}
.comm-reaction:hover { background:rgba(255,255,255,0.12); }
.comm-reaction.active { background:rgba(45,140,255,0.15); border-color:rgba(45,140,255,0.4); color:#2D8CFF; }

.comm-date-divider {
    display:flex; align-items:center; gap:12px;
    color:#555; font-size:11px; font-weight:700; text-transform:uppercase;
    padding:12px 8px;
}
.comm-date-divider::before, .comm-date-divider::after {
    content:''; flex:1; height:1px; background:rgba(255,255,255,0.07);
}

/* Chat input */
.comm-input-area {
    display:flex; align-items:center; gap:8px;
    padding:12px 16px; background:#1e1e38; flex-shrink:0;
}
.comm-attach-btn {
    background:none; border:none; color:#888; cursor:pointer;
    padding:6px; border-radius:6px; flex-shrink:0;
}
.comm-attach-btn:hover { color:#2D8CFF; }
.comm-attach-btn svg { width:22px; height:22px; fill:currentColor; display:block; }
.comm-input {
    flex:1; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1);
    border-radius:10px; padding:10px 14px; color:#fff; font-size:14px;
    outline:none; transition:border-color .15s;
}
.comm-input:focus { border-color:rgba(45,140,255,0.4); }
.comm-input::placeholder { color:#555; }
.comm-input-actions { display:flex; gap:4px; flex-shrink:0; }
.comm-input-actions button {
    background:none; border:none; color:#888; cursor:pointer;
    padding:6px 8px; border-radius:6px; font-size:13px; font-weight:600;
}
.comm-input-actions button:hover { color:#2D8CFF; background:rgba(45,140,255,0.1); }
.comm-input-actions button svg { width:20px; height:20px; fill:currentColor; display:block; }

/* MEMBERS column */
.comm-members {
    background: #16162a; overflow-y:auto; padding:12px 8px;
    border-left:1px solid rgba(255,255,255,0.05);
}
.comm-members.hidden { display:none; }
.comm-members-section { margin-bottom:16px; }
.comm-members-label {
    font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:#666; padding:4px 8px; margin-bottom:4px;
}
.comm-member-item {
    display:flex; align-items:center; gap:8px;
    padding:6px 8px; border-radius:6px; cursor:pointer; transition:background .15s;
}
.comm-member-item:hover { background:rgba(255,255,255,0.05); }
.comm-member-item.offline { opacity:.5; }
.comm-member-avatar-wrap { position:relative; flex-shrink:0; }
.comm-member-avatar-wrap img { width:32px; height:32px; border-radius:50%; object-fit:cover; display:block; }
.comm-member-avatar-wrap .status-dot { position:absolute; bottom:-1px; right:-1px; border-color:#16162a; }
.comm-member-info { flex:1; min-width:0; }
.comm-member-name { font-size:13px; font-weight:600; color:#ccc; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.comm-member-status { font-size:11px; color:#666; }
.comm-member-rank { font-size:16px; flex-shrink:0; }

/* Gaming chips in main feed */
.gaming-banner {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #0a1a0a 100%);
    border: 1px solid rgba(45,140,255,0.2);
    border-radius:16px; padding:24px 32px; margin:16px;
    display:flex; align-items:center; gap:24px;
    position:relative; overflow:hidden;
}
.gaming-banner::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at top left, rgba(45,140,255,0.08), transparent 60%),
               radial-gradient(ellipse at bottom right, rgba(139,92,246,0.08), transparent 60%);
}
.gaming-banner-text { position:relative; z-index:1; }
.gaming-banner-text h2 { font-size:24px; font-weight:900; color:#fff; margin-bottom:6px; }
.gaming-banner-text h2 span { color:#2D8CFF; }
.gaming-banner-text p { color:#888; font-size:14px; }
.gaming-banner-actions { position:relative; z-index:1; display:flex; gap:10px; margin-left:auto; flex-shrink:0; }
.btn-gaming-primary {
    background:linear-gradient(135deg,#2D8CFF,#1868D6); color:#000;
    border:none; border-radius:20px; padding:10px 20px;
    font-weight:700; font-size:14px; cursor:pointer; transition:transform .15s;
}
.btn-gaming-primary:hover { transform:scale(1.05); }
.btn-gaming-secondary {
    background:rgba(45,140,255,0.1); color:#2D8CFF;
    border:1px solid rgba(45,140,255,0.3); border-radius:20px; padding:10px 20px;
    font-weight:700; font-size:14px; cursor:pointer; transition:background .15s;
}
.btn-gaming-secondary:hover { background:rgba(45,140,255,0.18); }

/* Quicklys section */
.quicklys-section { padding:0 16px 8px; }
.quicklys-title {
    font-size:18px; font-weight:800; color:#fff; margin-bottom:12px;
    display:flex; align-items:center; gap:10px;
}
.quicklys-title::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.08); }
.quicklys-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.quickly-card {
    position:relative; border-radius:12px; overflow:hidden;
    aspect-ratio:9/16; background:#111; cursor:pointer;
    border:2px solid transparent; transition:border-color .2s, transform .2s;
}
.quickly-card:hover { border-color:#2D8CFF; transform:scale(1.03); }
.quickly-card img { width:100%; height:100%; object-fit:cover; }
.quickly-card-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
}
.quickly-card-info { position:absolute; bottom:8px; left:8px; right:8px; }
.quickly-card-title { font-size:12px; font-weight:700; color:#fff; line-height:1.3; }
.quickly-card-user { font-size:11px; color:#2D8CFF; margin-top:2px; }
.quickly-card-stats { display:flex; gap:8px; margin-top:4px; }
.quickly-stat { font-size:10px; color:#ccc; display:flex; align-items:center; gap:3px; }
.quickly-play-btn {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:40px; height:40px; background:rgba(45,140,255,0.8); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .2s;
}
.quickly-card:hover .quickly-play-btn { opacity:1; }
.quickly-play-btn svg { width:20px; height:20px; fill:#000; margin-left:2px; }

/* Live badge */
.live-badge {
    background:#ef4444; color:#fff; font-size:10px; font-weight:800;
    padding:2px 6px; border-radius:4px; text-transform:uppercase; letter-spacing:.05em;
}

/* Stats bar gaming */
.gaming-stats-bar {
    display:flex; gap:16px; padding:12px 16px;
    background:rgba(0,0,0,0.3); border-radius:12px; margin:8px 16px;
}
.gaming-stat-item { text-align:center; flex:1; }
.gaming-stat-num { font-size:20px; font-weight:900; color:#2D8CFF; }
.gaming-stat-label { font-size:10px; color:#666; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }

@media(max-width:1100px) {
    .community-layout { grid-template-columns:72px 200px 1fr; }
    .comm-members { display:none; }
}
@media(max-width:768px) {
    .community-layout { grid-template-columns:72px 1fr; }
    .comm-channels { display:none; }
    .quicklys-grid { grid-template-columns:repeat(2,1fr); }
}

/* ── FRAGG AVATAR FIX ── */
.fragg-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2D8CFF, #1868D6);
    color: #000;
    font-weight: 900;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    user-select: none;
}
.fragg-avatar:hover {
    transform: scale(1.08);
    box-shadow: 0 0 12px rgba(45,140,255,0.5);
}

/* ── QUICKLYS GRID: más columnas ── */
.quicklys-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
}


/* ══════════════════════════════════════════════════════
   punchet — HEADER COMPLETO (Gang of Gamers)
   Sobreescribe todo el header anterior
   ══════════════════════════════════════════════════════ */

/* Resetea el wrapper antiguo dentro del header */
.main-header-wrapper { all: unset; display: block; }

/* HEADER PRINCIPAL */
.gofg-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 0 20px !important;
    height: 64px !important;
    background: #0d0d1a !important;
    border-bottom: 1px solid rgba(45,140,255,0.12) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* LOGO GofG */
.gofg-logo {
    display: flex;
    align-items: baseline;
    gap: 0;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    line-height: 1;
    text-decoration: none;
}
.gofg-g1, .gofg-g2 {
    font-size: 28px;
    font-weight: 900;
    color: #2D8CFF;
    letter-spacing: -1px;
    text-shadow: 0 0 20px rgba(45,140,255,0.5);
    font-family: Arial Black, sans-serif;
    line-height: 1;
}
.gofg-of {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.5px;
    padding: 0 2px;
    font-style: italic;
    align-self: center;
    margin-bottom: 1px;
}
.gofg-tagline {
    position: absolute;
    bottom: -11px;
    left: 0;
    font-size: 8px;
    font-weight: 600;
    color: rgba(45,140,255,0.5);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}
.gofg-logo:hover .gofg-g1,
.gofg-logo:hover .gofg-g2 { text-shadow: 0 0 28px rgba(45,140,255,0.8); }

/* BUSCADOR */
.gofg-search-wrap {
    flex: 1;
    max-width: 580px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 0 12px 0 16px;
    height: 40px;
    transition: border-color .2s;
}
.gofg-search-wrap:focus-within {
    border-color: rgba(45,140,255,0.4);
    background: rgba(45,140,255,0.04);
}
.gofg-search-icon {
    width: 18px; height: 18px; fill: #666; flex-shrink: 0;
}
.gofg-search-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: #fff; font-size: 14px;
}
.gofg-search-input::placeholder { color: #555; }
.gofg-mic-btn {
    background: none; border: none; color: #666; cursor: pointer;
    padding: 4px; display: flex; align-items: center;
}
.gofg-mic-btn:hover { color: #2D8CFF; }
.gofg-mic-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ACCIONES DERECHA */
.gofg-header-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}
.gofg-upload-btn {
    display: flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #2D8CFF, #1868D6);
    color: #000; border: none; border-radius: 20px;
    padding: 8px 16px; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: transform .15s, box-shadow .15s;
    white-space: nowrap;
}
.gofg-upload-btn:hover { transform: scale(1.04); box-shadow: 0 0 16px rgba(45,140,255,0.4); }
.gofg-upload-btn svg { width: 16px; height: 16px; fill: currentColor; }
.gofg-icon-btn {
    background: none; border: none; color: #888; cursor: pointer;
    padding: 8px; border-radius: 8px; display: flex; align-items: center;
    transition: color .15s, background .15s;
}
.gofg-icon-btn:hover { color: #2D8CFF; background: rgba(45,140,255,0.08); }
.gofg-icon-btn svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.gofg-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #2D8CFF, #1868D6);
    color: #000; font-weight: 900; font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; user-select: none;
    transition: transform .15s, box-shadow .15s;
}
.gofg-avatar:hover { transform: scale(1.08); box-shadow: 0 0 12px rgba(45,140,255,0.5); }

/* Banner: actualizar texto a GofG */
.gaming-banner h2 span { color: #2D8CFF; }

/* ══════════════════════════════════════════════════════
   punchet — NUEVAS FUNCIONALIDADES
   T-Coins · Tiendas · Torneos · Logros · Sidebar Pro
   ══════════════════════════════════════════════════════ */

/* ── T-COINS en header ── */
.tcoins-display {
    display: flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, rgba(255,180,0,0.15), rgba(255,120,0,0.1));
    border: 1px solid rgba(255,180,0,0.3);
    border-radius: 20px; padding: 5px 12px;
    cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.tcoins-display:hover { background: rgba(255,180,0,0.25); border-color: rgba(255,180,0,0.6); transform: scale(1.03); }
.tcoins-icon { font-size: 16px; }
.tcoins-amount { font-size: 13px; font-weight: 800; color: #ffb400; }
.tcoins-label { font-size: 10px; color: rgba(255,180,0,0.7); font-weight: 600; letter-spacing: .05em; }

/* ── SIDEBAR MEJORADO ── */
.sidebar-tcoins-card {
    margin: 12px; border-radius: 12px;
    background: linear-gradient(135deg, #1a1200, #2a1800);
    border: 1px solid rgba(255,180,0,0.25);
    padding: 14px; text-align: center;
}
.sidebar-tcoins-balance { font-size: 26px; font-weight: 900; color: #ffb400; }
.sidebar-tcoins-sub { font-size: 11px; color: #888; margin-top: 2px; }
.sidebar-earn-row { display: flex; gap: 6px; margin-top: 10px; }
.sidebar-earn-btn {
    flex: 1; background: rgba(255,180,0,0.12); border: 1px solid rgba(255,180,0,0.2);
    color: #ffb400; border-radius: 8px; padding: 6px 4px; font-size: 10px;
    font-weight: 700; cursor: pointer; text-align: center; transition: background .15s;
}
.sidebar-earn-btn:hover { background: rgba(255,180,0,0.25); }
.sidebar-divider-label {
    padding: 8px 16px 4px; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: #444;
}
.sidebar-badge {
    background: #2D8CFF; color: #000; font-size: 9px;
    font-weight: 800; padding: 1px 6px; border-radius: 10px; margin-left: auto;
}
.sidebar-badge.red { background: #ef4444; color: #fff; }
.sidebar-badge.gold { background: #ffb400; color: #000; }

/* ── SECCIÓN T-COINS CENTRAL ── */
.tcoins-section {
    margin: 16px; border-radius: 16px;
    background: linear-gradient(135deg, #0d0a00, #1a1000, #0d0a00);
    border: 1px solid rgba(255,180,0,0.2);
    padding: 20px 24px; position: relative; overflow: hidden;
}
.tcoins-section::before {
    content: '🪙'; position: absolute; right: 24px; top: 50%;
    transform: translateY(-50%); font-size: 64px; opacity: 0.08;
}
.tcoins-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.tcoins-section-title { font-size: 18px; font-weight: 800; color: #ffb400; }
.tcoins-section-sub { font-size: 12px; color: #666; margin-top: 2px; }
.tcoins-ways { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.tcoins-way {
    background: rgba(255,180,0,0.07); border: 1px solid rgba(255,180,0,0.15);
    border-radius: 12px; padding: 14px 10px; text-align: center;
    cursor: pointer; transition: all .2s;
}
.tcoins-way:hover { background: rgba(255,180,0,0.14); transform: translateY(-2px); border-color: rgba(255,180,0,0.4); }
.tcoins-way-icon { font-size: 28px; margin-bottom: 6px; }
.tcoins-way-name { font-size: 12px; font-weight: 700; color: #fff; }
.tcoins-way-reward { font-size: 11px; color: #ffb400; font-weight: 600; margin-top: 3px; }

/* ── TIENDAS ── */
.stores-section { margin: 16px; }
.stores-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.store-card {
    border-radius: 16px; overflow: hidden; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform .2s, border-color .2s; position: relative;
}
.store-card:hover { transform: translateY(-3px); border-color: rgba(45,140,255,0.3); }
.store-card-bg {
    height: 120px; display: flex; align-items: center; justify-content: center;
    font-size: 48px; position: relative;
}
.store-card-bg.merch { background: linear-gradient(135deg, #1a0a2e, #2e0a1a); }
.store-card-bg.community { background: linear-gradient(135deg, #0a1a2e, #0a2e1a); }
.store-card-info { background: #111122; padding: 12px 14px; }
.store-card-name { font-size: 15px; font-weight: 700; color: #fff; }
.store-card-desc { font-size: 12px; color: #666; margin-top: 3px; }
.store-card-badge {
    position: absolute; top: 8px; right: 8px;
    background: #ffb400; color: #000; font-size: 10px;
    font-weight: 800; padding: 2px 8px; border-radius: 10px;
}

/* ── TORNEOS ── */
.tournaments-section { margin: 16px; }
.tournament-card {
    background: #0d0d1e; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 8px;
    display: flex; align-items: center; gap: 14px; cursor: pointer;
    transition: border-color .2s, background .2s;
}
.tournament-card:hover { border-color: rgba(45,140,255,0.3); background: rgba(45,140,255,0.03); }
.tournament-game { font-size: 28px; flex-shrink: 0; }
.tournament-info { flex: 1; min-width: 0; }
.tournament-name { font-size: 14px; font-weight: 700; color: #fff; }
.tournament-meta { font-size: 12px; color: #666; margin-top: 2px; }
.tournament-prize {
    background: linear-gradient(135deg, rgba(255,180,0,0.15), rgba(255,120,0,0.1));
    border: 1px solid rgba(255,180,0,0.3); color: #ffb400;
    font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 20px; flex-shrink: 0;
}
.tournament-status-live {
    background: #ef4444; color: #fff; font-size: 9px; font-weight: 800;
    padding: 2px 6px; border-radius: 6px; text-transform: uppercase; margin-left: 6px;
    animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ── BUSCAR EQUIPO ── */
.lfg-section { margin: 16px; }
.lfg-card {
    background: linear-gradient(135deg, #0a0a1e, #1a0a2e);
    border: 1px solid rgba(139,92,246,0.2); border-radius: 16px; padding: 20px;
    display: flex; align-items: center; gap: 16px;
}
.lfg-icon { font-size: 40px; flex-shrink: 0; }
.lfg-info { flex: 1; }
.lfg-title { font-size: 16px; font-weight: 800; color: #fff; }
.lfg-desc { font-size: 12px; color: #888; margin-top: 4px; line-height: 1.5; }
.lfg-btn {
    background: linear-gradient(135deg, #FFA84D, #E0620A); color: #fff;
    border: none; border-radius: 20px; padding: 10px 18px;
    font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
    transition: transform .15s; flex-shrink: 0;
}
.lfg-btn:hover { transform: scale(1.05); }

/* ── LOGROS ── */
.achievements-strip { margin: 16px; }
.achievements-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.achievement-badge {
    flex-shrink: 0; width: 80px; text-align: center;
    background: #0d0d1e; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: 12px 8px; cursor: pointer; transition: all .2s;
}
.achievement-badge:hover { border-color: #ffb400; transform: scale(1.05); }
.achievement-badge.locked { opacity: .4; filter: grayscale(1); }
.achievement-icon { font-size: 28px; margin-bottom: 4px; }
.achievement-name { font-size: 9px; font-weight: 600; color: #ccc; line-height: 1.3; }
.achievement-coins { font-size: 9px; color: #ffb400; margin-top: 2px; font-weight: 700; }

/* ── SECTION TITLE ── */
.gofg-section-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.gofg-section-title { font-size: 18px; font-weight: 800; color: #fff; }
.gofg-section-title span { color: #2D8CFF; }
.gofg-see-all {
    margin-left: auto; font-size: 12px; color: #2D8CFF; cursor: pointer;
    font-weight: 600; opacity: .8; transition: opacity .15s;
}
.gofg-see-all:hover { opacity: 1; }

@media(max-width:768px) {
    .tcoins-ways { grid-template-columns: repeat(2,1fr); }
    .stores-grid { grid-template-columns: 1fr; }
}

.gofg-logo-wrap { cursor:pointer; flex-shrink:0; display:flex; align-items:center; transition:transform .2s,filter .2s; }
.gofg-logo-wrap:hover { transform:scale(1.05); filter:drop-shadow(0 0 14px rgba(0,200,255,0.7)); }
.gofg-logo-img { height:52px; width:auto; object-fit:contain; display:block; }

/* ══════════════════════════════════════════════════════
   punchet — HEADER TENDEN-C STYLE
   Theme Changer · IO Knob · Búsqueda AI · Create · Notif
   ══════════════════════════════════════════════════════ */

/* ── Barra de búsqueda AI ── */
.ai-search-container { width:100%; max-width:580px; padding:1.5px; background:linear-gradient(90deg,rgba(45,140,255,0.3),rgba(0,180,255,0.3)); border-radius:50px; }
.search-inner { display:flex; align-items:center; background:rgba(15,15,20,0.85); backdrop-filter:blur(20px); border-radius:50px; padding:4px 8px 4px 18px; height:38px; overflow:hidden; }
.search-left { display:flex; align-items:center; justify-content:center; padding:4px; border-radius:50%; cursor:pointer; transition:transform 0.3s ease; flex-shrink:0; }
.search-icon { width:17px; height:17px; fill:#fff; opacity:0.8; }
.search-left:hover .search-icon { transform:scale(1.2); opacity:1; }
.search-divider { width:1px; height:16px; background:rgba(255,255,255,0.2); margin-left:8px; flex-shrink:0; }
.ai-input { flex:1; background:transparent; border:none; outline:none; color:white; padding:0 10px; font-size:14px; min-width:0; }
.ai-input::placeholder { color:#555; }
.mic-inline-btn { background:none; border:none; color:rgba(255,255,255,0.5); cursor:pointer; padding:0 8px; display:flex; align-items:center; flex-shrink:0; transition:all 0.3s; }
.mic-inline-btn:hover { color:#2D8CFF; transform:scale(1.2); }
.mic-inline-btn.listening { color:#2D8CFF!important; animation:micPulse .8s ease-in-out infinite; }
@keyframes micPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
.generate-btn { background:#e3f1ff; border:none; border-radius:40px; padding:5px 13px; height:27px; display:flex; align-items:center; gap:5px; cursor:pointer; transition:0.3s ease; white-space:nowrap; flex-shrink:0; }
.generate-btn span { color:#1565c0; font-weight:700; font-size:12px; }
.ai-stars { width:12px; fill:#1565c0; flex-shrink:0; }
.generate-btn:hover { transform:scale(1.05); box-shadow:0 0 16px rgba(45,140,255,0.4); }

/* ── Botón Tienda header ── */
.store-btn { transition:all .2s!important; }
.store-btn:hover { background:rgba(45,140,255,0.12)!important; border-color:rgba(45,140,255,0.3)!important; color:#2D8CFF!important; }

/* ── Theme Changer (Sol/Luna) ── */
.theme-changer { background:none; border:none; padding:2px; cursor:pointer; outline:none; flex-shrink:0; }
.tc-track { display:flex; align-items:center; width:46px; height:24px; border-radius:999px; background:linear-gradient(180deg,#0d1020,#1a1f2e); border:1px solid rgba(255,255,255,0.08); box-shadow:inset 0 2px 4px rgba(0,0,0,0.6); position:relative; transition:all .35s ease; }
.tc-thumb { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 30% 28%,#fff 0%,#d4d8e0 45%,#8e94a1 100%); box-shadow:0 2px 5px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; transition:left .38s cubic-bezier(.65,.05,.36,1.5),background .35s ease; }
.tc-ico { position:absolute; transition:opacity .25s ease,transform .3s ease; color:#6b7280; }
.tc-ico-moon { opacity:1; }
.tc-ico-sun  { opacity:0; transform:scale(0.6); }
body.light-theme .tc-track { background:linear-gradient(180deg,#e8f4ff,#c8e0f8); border-color:rgba(100,160,255,0.3); }
body.light-theme .tc-thumb { left:calc(100% - 22px); background:radial-gradient(circle at 30% 28%,#fff8e0 0%,#ffd060 50%,#e8900a 100%); box-shadow:0 2px 6px rgba(0,0,0,0.3),0 0 10px rgba(255,180,0,0.5); }
body.light-theme .tc-ico-moon { opacity:0; transform:scale(0.6); }
body.light-theme .tc-ico-sun  { opacity:1; transform:scale(1); color:#f59e0b; }

/* ── Modo Claro ── */
body.light-theme { background-color:#f0f2f5!important; color:#111827!important; }
body.light-theme .main-header-wrapper { background:rgba(255,255,255,0.95)!important; border-bottom:1px solid rgba(0,0,0,0.08); }
body.light-theme #sidebar-container { background:rgba(255,255,255,0.97)!important; border-right-color:rgba(0,0,0,0.1); }
body.light-theme #content { background:#f0f2f5; }
body.light-theme .gaming-banner { background:linear-gradient(135deg,#e8fef3,#e8f4ff); border-color:rgba(0,200,100,0.3); }
body.light-theme .gaming-banner h2 { color:#111; }
body.light-theme .gaming-banner p { color:#444; }
body.light-theme .sidebar-widget { background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.1); }
body.light-theme .tcoins-section { background:linear-gradient(135deg,#fffbe8,#fff5d0); border-color:rgba(255,180,0,0.3); }
body.light-theme .tournament-card { background:#fff; border-color:rgba(0,0,0,0.1); }
body.light-theme .achievement-badge { background:#fff; border-color:rgba(0,0,0,0.1); }
body.light-theme .ai-input { color:#111; }
body.light-theme .search-inner { background:rgba(255,255,255,0.92)!important; }
body.light-theme .ai-search-container { background:linear-gradient(90deg,rgba(0,180,100,0.4),rgba(0,140,200,0.4)); }
body.light-theme .item { color:#111; }
body.light-theme .gofg-section-title { color:#111; }

/* ── IO Knob (filtro luz azul) ── */
.io-knob { position:relative; background:none; border:none; padding:4px; cursor:pointer; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; outline:none; }
.io-knob-track { position:relative; width:52px; height:26px; border-radius:999px; background:linear-gradient(180deg,#0a0d14,#14181f); border:1px solid rgba(255,255,255,0.07); box-shadow:inset 0 2px 5px rgba(0,0,0,0.7); display:flex; align-items:center; justify-content:space-between; padding:0 7px; transition:all .35s ease; }
.io-ico { color:rgba(255,255,255,0.35); transition:all .3s ease; }
.io-ico-off { opacity:1; }
.io-ico-on  { opacity:.35; }
.io-knob-thumb { position:absolute; top:50%; left:2px; transform:translateY(-50%); width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 30% 28%,#fff 0%,#d4d8e0 45%,#8e94a1 100%); box-shadow:0 2px 5px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.9); display:flex; align-items:center; justify-content:center; transition:left .38s cubic-bezier(.65,.05,.36,1.5),background .35s ease; color:#2a2f3a; }
.io-thumb-ico { position:absolute; transition:opacity .25s ease,transform .3s ease; }
.io-thumb-on  { opacity:0; transform:scale(.6); }
.io-thumb-off { opacity:1; transform:scale(1); }
.io-knob.active .io-knob-track, .io-knob[aria-checked='true'] .io-knob-track { background:linear-gradient(180deg,#3a1f05,#5b2d07); border-color:rgba(255,160,40,0.5); box-shadow:inset 0 2px 6px rgba(0,0,0,0.6),0 0 14px rgba(255,160,40,0.5); }
.io-knob.active .io-ico-off, .io-knob[aria-checked='true'] .io-ico-off { opacity:.3; }
.io-knob.active .io-ico-on,  .io-knob[aria-checked='true'] .io-ico-on  { opacity:1; color:#ffd28a; filter:drop-shadow(0 0 4px rgba(255,160,40,0.8)); }
.io-knob.active .io-knob-thumb, .io-knob[aria-checked='true'] .io-knob-thumb { left:calc(100% - 24px); background:radial-gradient(circle at 30% 28%,#fff4dd 0%,#ffc47a 50%,#d97a1a 100%); box-shadow:0 2px 6px rgba(0,0,0,0.55),0 0 10px rgba(255,160,40,0.7); }
.io-knob.active .io-thumb-off, .io-knob[aria-checked='true'] .io-thumb-off { opacity:0; transform:scale(.6); }
.io-knob.active .io-thumb-on,  .io-knob[aria-checked='true'] .io-thumb-on  { opacity:1; transform:scale(1); }
#eye-care-overlay { display:none; position:fixed; inset:0; background:rgba(255,140,30,0.18); pointer-events:none; z-index:99998; mix-blend-mode:multiply; }
#eye-care-overlay.active { display:block; animation:eyeOn .4s ease-out; }
@keyframes eyeOn { from{opacity:0} to{opacity:1} }
#eye-care-toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(16px); background:rgba(20,20,30,0.92); border:1px solid rgba(255,140,0,0.35); color:#ffb347; border-radius:20px; padding:9px 20px; font-size:13px; font-weight:500; pointer-events:none; z-index:99999; opacity:0; transition:opacity .3s,transform .3s; white-space:nowrap; }
#eye-care-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── Botón Crear ── */
.create-btn { display:flex; align-items:center; gap:7px; background:rgba(45,140,255,0.1); border:1px solid rgba(45,140,255,0.3); border-radius:40px; padding:6px 15px; color:#2D8CFF; cursor:pointer; font-size:13px; font-weight:600; transition:all 0.3s cubic-bezier(.175,.885,.32,1.275); }
.create-btn:hover { transform:scale(1.08); background:rgba(45,140,255,0.2); box-shadow:0 0 16px rgba(45,140,255,0.3); }
.create-btn svg { width:17px; fill:currentColor; flex-shrink:0; }
.create-container { position:relative; }

/* ── Notificaciones ── */
.notification-btn { position:relative; width:24px; height:24px; cursor:pointer; flex-shrink:0; }
.notification-btn svg { width:100%; height:100%; fill:#2D8CFF; filter:drop-shadow(0 0 5px rgba(45,140,255,0.4)); }
.notification-dot { position:absolute; top:-2px; right:-2px; width:8px; height:8px; background:#ef4444; border-radius:50%; border:2px solid #0f0f14; box-shadow:0 0 6px rgba(239,68,68,0.6); }

/* ── T-Coins header display ── */
.tcoins-display { display:flex; align-items:center; gap:5px; background:linear-gradient(135deg,rgba(255,180,0,0.12),rgba(255,120,0,0.08)); border:1px solid rgba(255,180,0,0.25); border-radius:20px; padding:4px 10px; cursor:pointer; transition:all .2s; flex-shrink:0; }
.tcoins-display:hover { background:rgba(255,180,0,0.22); border-color:rgba(255,180,0,0.5); }
.tcoins-icon { font-size:14px; }
.tcoins-amount { font-size:13px; font-weight:800; color:#ffb400; line-height:1; }
.tcoins-label { font-size:9px; color:rgba(255,180,0,0.6); font-weight:700; letter-spacing:.05em; line-height:1; }

/* ── Community sidebar shortcuts ── */
.comm-server-shortcut {
    width: 48px; height: 48px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; margin: 4px auto;
    transition: border-radius .25s cubic-bezier(.16,1,.3,1), transform .2s, box-shadow .2s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    position: relative;
    flex-shrink: 0;
}
.comm-server-shortcut:hover {
    border-radius: 12px;
    transform: scale(1.1);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.15), 0 6px 20px rgba(0,0,0,0.5);
}
.comm-server-shortcut::before {
    content: attr(title);
    position: absolute; left: 60px; top: 50%; transform: translateY(-50%);
    background: rgba(20,20,30,0.97); color: #fff;
    font-size: 12px; font-weight: 700; white-space: nowrap;
    padding: 6px 12px; border-radius: 8px;
    pointer-events: none; opacity: 0;
    transition: opacity .15s; z-index: 9999;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.comm-server-shortcut:hover::before { opacity: 1; }

/* ══════════════════════════════════════════════════════
   punchet — ORBIT FAB + SCROLL-TO-TOP
   ══════════════════════════════════════════════════════ */

/* ── Orbit FAB (menú flotante orbital) ── */
.gofg-fab-wrap {
    position: fixed;
    bottom: 32px;
    right: 100px; /* Romeo: como en tenden-c (public/index.html, .w-community-fab) -
                     alejado de la esquina para que el abanico de opciones no se
                     corte al desplegarse (antes estaba a solo 32px, y la burbuja
                     mas a la derecha del abanico quedaba casi fuera de pantalla). */
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* oculto por defecto, aparece al scrollar */
    opacity: 0;
    pointer-events: none;
    transform: scale(0.7) translateY(20px);
    transition: opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
.gofg-fab-wrap.visible {
    opacity: 1;
    pointer-events: all;
    transform: scale(1) translateY(0);
}
/* Botón central */
.gofg-fab-btn {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #2D8CFF, #00c4ff);
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 0 rgba(45,140,255,0.5), 0 8px 24px rgba(0,0,0,0.5);
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .3s;
    position: relative; z-index: 2;
    animation: fabPulse 3s ease-in-out infinite;
}
@keyframes fabPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(45,140,255,0.4), 0 8px 24px rgba(0,0,0,0.5); }
    50%      { box-shadow: 0 0 0 12px rgba(45,140,255,0), 0 8px 32px rgba(45,140,255,0.3); }
}
.gofg-fab-btn:hover { transform: scale(1.12); }
.gofg-fab-btn.open  { transform: scale(1.08); animation: none;
    box-shadow: 0 0 0 14px rgba(45,140,255,0), 0 8px 32px rgba(45,140,255,0.35); }
.gofg-fab-letter {
    font-size: 26px; font-weight: 900; color: #000;
    font-family: 'Roboto', sans-serif; letter-spacing: -1px;
    line-height: 1; user-select: none;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform .3s;
}
.gofg-fab-btn.open .gofg-fab-letter { transform: scale(0.85); }
/* Insignia de notificaciones (p.ej. mensajes nuevos del chat de comunidad) */
.gofg-fab-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    border: 2px solid #05050a;
    color: #fff;
    font-size: 11px; font-weight: 800;
    font-family: 'Roboto', sans-serif;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(239,68,68,0.65);
    z-index: 3;
    animation: fabBadgePop .3s cubic-bezier(.16,1,.3,1);
}
@keyframes fabBadgePop {
    0% { transform: scale(0); }
    70% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
/* Insignia pequeña sobre la burbuja orbital que tiene notificaciones (p.ej. Comunidad) */
.gofg-orbit-item .gofg-orbit-badge {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    border: 2px solid #05050a;
    color: #fff;
    font-size: 10px; font-weight: 800;
    font-family: 'Roboto', sans-serif;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(239,68,68,0.65);
    z-index: 4;
}
/* Tooltip que muestra de que son las notificaciones al pasar el mouse
   (sobre la G o sobre la burbuja de Comunidad), igual que en tenden-c */
.gofg-fab-tooltip {
    position: fixed;
    z-index: 9500;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 10px)) scale(0.95);
    transition: opacity .18s ease, transform .18s ease;
    background: #111122;
    color: #fff;
    font-size: 12px; font-weight: 700;
    font-family: 'DM Sans', Arial, sans-serif;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(239,68,68,0.4);
    box-shadow: 0 10px 28px rgba(0,0,0,0.55);
    white-space: nowrap;
}
.gofg-fab-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #111122;
}
.gofg-fab-tooltip.visible {
    opacity: 1;
    transform: translate(-50%, calc(-100% - 10px)) scale(1);
}
/* Halo glow detrás del FAB */
.gofg-fab-halo {
    position: absolute; width: 80px; height: 80px; border-radius: 50%;
    background: radial-gradient(circle, rgba(45,140,255,0.25) 0%, transparent 70%);
    animation: fabHalo 2.5s ease-in-out infinite;
}
@keyframes fabHalo { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.4);opacity:0} }

/* Burbuja individual del orbit */
.gofg-orbit-item {
    position: absolute;
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none;
    opacity: 0; pointer-events: none;
    transform: translate(0,0) scale(0.4);
    transition: transform .45s cubic-bezier(.16,1,.3,1),
                opacity .35s ease,
                box-shadow .25s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    border: 2px solid rgba(255,255,255,0.12);
}
.gofg-orbit-item.open {
    opacity: 1; pointer-events: all;
}
.gofg-orbit-item:hover {
    filter: brightness(1.25) drop-shadow(0 0 14px rgba(255,255,255,0.35));
    /* NO cambiamos transform — el JS lo gestiona con translate */
}
.gofg-orbit-icon { font-size: 20px; line-height: 1; }
@keyframes coin3dspin{
  0%  {transform:translate(3px,0) rotateY(0deg) scale(1);}
  24% {transform:translate(0.2px,3px) rotateY(86deg) scaleX(.12);}
  25% {transform:translate(0,3px) rotateY(90deg) scaleX(.05);}
  26% {transform:translate(-0.2px,3px) rotateY(94deg) scaleX(.12);}
  50% {transform:translate(-3px,0) rotateY(180deg) scale(1);}
  74% {transform:translate(-0.2px,-3px) rotateY(266deg) scaleX(.12);}
  75% {transform:translate(0,-3px) rotateY(270deg) scaleX(.05);}
  76% {transform:translate(0.2px,-3px) rotateY(274deg) scaleX(.12);}
  100%{transform:translate(3px,0) rotateY(360deg) scale(1);}
}
.gcoin-inline-icon { width: 14px; height: 14px; vertical-align: -2px; margin: 0 1px; animation: coin3dspin 3s linear infinite; }
.gofg-orbit-label {
    font-size: 9px; font-weight: 700; color: #fff;
    margin-top: 2px; white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
/* Backdrop cuando orbit está abierto */
.gofg-fab-backdrop {
    position: fixed; inset: 0; z-index: 8999;
    background: rgba(0,0,0,0.35); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
}
.gofg-fab-backdrop.open { opacity: 1; pointer-events: all; }

/* ── Scroll-to-top button ── */
.gofg-scroll-top {
    position: fixed;
    bottom: 102px;
    right: 36px;
    z-index: 8998;
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(0,180,255,0.15);
    border: 1.5px solid rgba(0,180,255,0.4);
    color: #00b4ff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0; pointer-events: none;
    transform: translateY(12px);
    transition: opacity .3s, transform .3s, background .2s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.gofg-scroll-top.visible {
    opacity: 1; pointer-events: all;
    transform: translateY(0);
}
.gofg-scroll-top:hover {
    background: rgba(0,180,255,0.3);
    box-shadow: 0 0 16px rgba(0,180,255,0.5);
    transform: translateY(-2px);
}
.gofg-scroll-top svg { width: 18px; height: 18px; fill: currentColor; }

/* ══════════════════════════════════════════
   ARENAS EN DIRECTO — sección única punchet
══════════════════════════════════════════ */
.live-arenas-section{
  padding: 28px 20px 0;
  margin-bottom: 0;
}
.live-header-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:18px;
}
.live-title-wrap{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.live-pulse-ring{
  width:14px;height:14px;border-radius:50%;background:#ef4444;
  box-shadow:0 0 0 0 rgba(239,68,68,.7);
  animation:livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.7);}
  70%{box-shadow:0 0 0 10px rgba(239,68,68,0);}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}
}
.live-label{
  font-family:'Orbitron',monospace;font-size:15px;font-weight:900;
  color:#fff;letter-spacing:2px;
}
.live-count-badge{
  background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.4);
  color:#ef4444;font-size:11px;font-weight:800;padding:2px 10px;
  border-radius:20px;letter-spacing:.5px;
}
.live-filter-pills{
  display:flex;gap:6px;flex:1;
}
.lpill{
  padding:5px 14px;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:#9ca3af;font-size:12px;font-weight:700;cursor:pointer;
  transition:all .2s;
}
.lpill:hover,.lpill.active{
  background:rgba(45,140,255,.12);border-color:rgba(45,140,255,.4);
  color:#2D8CFF;
}

/* Featured arena */
.live-arena-featured{
  display:grid;grid-template-columns:1.6fr 1fr;
  gap:16px;margin-bottom:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;overflow:hidden;
  transition:border-color .2s;
}
.live-arena-featured:hover{border-color:rgba(45,140,255,.25);}
.laf-avatar{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#2D8CFF,#1868D6);
  color:#000;font-weight:900;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid rgba(45,140,255,.4);
}
.laf-thumb{
  position:relative;aspect-ratio:16/9;min-height:220px;overflow:hidden;
}
.laf-img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s;
}
.live-arena-featured:hover .laf-img{transform:scale(1.04);}
.laf-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to right, rgba(0,0,0,.1), rgba(0,0,0,.5));
}
.laf-live-badge{
  position:absolute;top:12px;left:12px;
  background:#ef4444;color:#fff;
  font-size:10px;font-weight:900;letter-spacing:1.5px;
  padding:3px 10px;border-radius:4px;
  display:flex;align-items:center;gap:6px;
}
.laf-live-dot{
  width:6px;height:6px;border-radius:50%;background:#fff;
  animation:liveDot .8s ease-in-out infinite alternate;
}
@keyframes liveDot{from{opacity:1;}to{opacity:.3;}}
.laf-heat{
  position:absolute;bottom:48px;left:12px;
  font-size:12px;font-weight:700;color:#fff;
  display:flex;align-items:center;gap:6px;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.laf-heat span{font-size:10px;color:rgba(255,255,255,.75);}
.laf-drops{
  position:absolute;top:12px;right:12px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
  border:1px solid rgba(255,215,0,.4);color:#ffd700;
  font-size:10px;font-weight:800;padding:3px 10px;border-radius:20px;
  animation:dropPulse 2s ease-in-out infinite;
}
@keyframes dropPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,.3);}50%{box-shadow:0 0 0 6px rgba(255,215,0,0);}}
.laf-viewers{
  position:absolute;bottom:12px;left:12px;
  background:rgba(0,0,0,.65);backdrop-filter:blur(6px);
  color:#fff;font-size:12px;font-weight:700;
  padding:4px 12px;border-radius:20px;
  display:flex;align-items:center;gap:5px;
}
.laf-watch-btn,.laf-challenge-btn{
  position:absolute;bottom:12px;
  padding:8px 18px;border-radius:8px;
  font-size:13px;font-weight:800;cursor:pointer;
  transition:all .2s;border:none;
}
.laf-watch-btn{
  right:12px;
  background:linear-gradient(135deg,#2D8CFF,#1868D6);
  color:#000;
}
.laf-watch-btn:hover{transform:scale(1.05);box-shadow:0 0 16px rgba(45,140,255,.5);}
.laf-challenge-btn{
  right:130px;
  background:rgba(239,68,68,.2);border:1px solid rgba(239,68,68,.5);color:#ef4444;
}
.laf-challenge-btn:hover{background:rgba(239,68,68,.35);transform:scale(1.05);}
/* Info panel del featured */
/* Info panel del featured */
.laf-info{
  display:flex;flex-direction:column;overflow:hidden;
  /* Altura fija igual al thumbnail para que el chat no crezca */
  height:0; /* se estira por el grid */
  min-height:0;
}
/* La featured arena tiene altura fija */
.live-arena-featured{
  display:grid;grid-template-columns:1.6fr 1fr;
  gap:16px;margin-bottom:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;overflow:hidden;
  transition:border-color .2s;
  /* CLAVE: altura fija para que el chat no se expanda */
  align-items:stretch;
}
.live-arena-featured:hover{border-color:rgba(45,140,255,.25);}
.laf-meta{flex:1;}
.laf-name{
  font-size:18px;font-weight:900;color:#fff;margin-bottom:6px;
}
.laf-verified{
  background:rgba(45,140,255,.2);color:#2D8CFF;
  font-size:10px;font-weight:900;padding:2px 6px;
  border-radius:4px;margin-left:6px;vertical-align:middle;
}
.laf-game-tag{
  display:inline-block;font-size:12px;font-weight:700;
  padding:3px 10px;border-radius:6px;margin-bottom:12px;
}
.laf-game-tag.fps{background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#ef4444;}
.laf-game-tag.br{background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.3);color:#FFA84D;}
.laf-game-tag.rpg{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);color:#f59e0b;}
.laf-game-tag.sports{background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);color:#10b981;}
.laf-stats-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.laf-stat-pill{
  display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;color:#ccc;
}
.laf-stat-pill.coins{border-color:rgba(255,215,0,.3);color:#ffd700;background:rgba(255,215,0,.08);}
.laf-progress-label{font-size:11px;color:#6b7280;margin-bottom:6px;font-weight:600;}
.laf-progress-bar{
  background:rgba(255,255,255,.07);border-radius:20px;
  height:6px;position:relative;margin-bottom:10px;
  overflow:hidden;
}
.laf-progress-fill{
  height:100%;border-radius:20px;
  background:linear-gradient(90deg,#2D8CFF,#1868D6);
  box-shadow:0 0 8px rgba(45,140,255,.4);
  transition:width .6s;
}
.laf-progress-bar span{
  position:absolute;right:0;top:10px;
  font-size:10px;color:#6b7280;
}
.laf-squad-row{display:flex;align-items:center;gap:10px;margin-top:8px;}
.laf-squad-label{font-size:11px;color:#6b7280;font-weight:600;}
.laf-squad-avatars{display:flex;}
.squad-av{
  width:26px;height:26px;border-radius:50%;
  color:#fff;font-weight:900;font-size:11px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #0d0d1e;margin-left:-6px;
}
.squad-av:first-child{margin-left:0;}
.squad-av.more{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);
  font-size:9px;color:#9ca3af;
}

/* Live grid (carrusel de arenas) */
.live-grid-wrap{
  position:relative;
  display:flex;align-items:center;gap:0;
}
.live-grid{
  display:flex;gap:14px;overflow:hidden;
  scroll-behavior:smooth;padding:4px 2px;
  flex:1;
}
.live-arrow{
  width:38px;height:38px;flex-shrink:0;
  border-radius:50%;background:rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;z-index:5;backdrop-filter:blur(4px);
}
.live-arrow:hover{
  background:rgba(45,140,255,.2);border-color:rgba(45,140,255,.4);
  color:#2D8CFF;
}
.live-card{
  flex-shrink:0;width:200px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;overflow:hidden;
  transition:all .25s;cursor:pointer;
}
.live-card:hover{
  border-color:rgba(45,140,255,.3);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.live-card.lc-onair{
  border-color:#2D8CFF;
  box-shadow:0 0 0 2px rgba(45,140,255,.5),0 8px 24px rgba(45,140,255,.25);
}
.live-card.lc-onair .lc-badge{background:#2D8CFF;}

.lc-thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;
}
.lc-thumb img{
  width:100%;height:100%;object-fit:cover;transition:transform .3s;
}
.live-card:hover .lc-thumb img{transform:scale(1.06);}
.lc-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 50%);
}
.lc-badge{
  position:absolute;top:6px;left:6px;
  background:#ef4444;color:#fff;
  font-size:9px;font-weight:900;letter-spacing:1px;
  padding:2px 7px;border-radius:3px;
  display:flex;align-items:center;gap:4px;
}
.lc-dot{
  width:5px;height:5px;border-radius:50%;background:#fff;
  animation:liveDot .8s ease-in-out infinite alternate;
}
.lc-viewers{
  position:absolute;bottom:6px;left:6px;
  background:rgba(0,0,0,.65);
  color:#fff;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:10px;
}
.lc-heat-bar{
  position:absolute;bottom:0;left:0;right:0;height:3px;
  background:rgba(255,255,255,.1);
}
.lc-heat-bar div{
  height:100%;border-radius:0;
  transition:width .4s;
}
.lc-info{
  padding:10px;display:flex;align-items:center;gap:8px;
}
.lc-av{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  color:#000;font-weight:900;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.lc-meta{flex:1;min-width:0;}
.lc-name{
  font-size:12px;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lc-game{
  font-size:10px;font-weight:600;margin:2px 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lc-game.fps{color:#ef4444;}
.lc-game.br{color:#FFA84D;}
.lc-game.rpg{color:#f59e0b;}
.lc-game.sports{color:#10b981;}
.lc-drops{font-size:10px;color:#6b7280;}
.lc-reto-btn{
  background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.25);
  color:#ef4444;width:28px;height:28px;border-radius:50%;
  flex-shrink:0;cursor:pointer;font-size:12px;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.lc-reto-btn:hover{
  background:rgba(239,68,68,.3);transform:scale(1.15);
}

/* Quicklys upgrade */
.quicklys-section{
  padding: 28px 20px 0;
}
.quicklys-title{
  font-family:'Orbitron',monospace;font-size:14px;font-weight:900;
  color:#fff;letter-spacing:1.5px;margin-bottom:12px;
  display:flex;align-items:center;gap:8px;
}
.quicklys-grid{
  display:flex;gap:12px;
  overflow:hidden;
  scroll-snap-type:x mandatory;
}
.quickly-card{
  flex-shrink:0;width:160px;
  border-radius:12px;overflow:hidden;
  position:relative;cursor:pointer;
  scroll-snap-align:start;
  transition:transform .25s,box-shadow .25s;
  background:#111;
}
.quickly-card:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 8px 28px rgba(0,0,0,.55);
}
.quickly-card img{
  width:100%;aspect-ratio:9/16;object-fit:cover;display:block;
  transition:transform .35s;
}
.quickly-card:hover img{transform:scale(1.06);}
.quickly-card-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.1) 50%,transparent 100%);
}
.quickly-play-btn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.2);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;
}
.quickly-play-btn svg{width:18px;height:18px;fill:#fff;margin-left:2px;}
.quickly-card:hover .quickly-play-btn{opacity:1;}
.quickly-card-info{
  position:absolute;bottom:0;left:0;right:0;padding:10px;
}
.quickly-card-title{
  font-size:11px;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:3px;line-height:1.2;
}
.quickly-card-user{
  font-size:10px;color:rgba(255,255,255,.6);
  margin-bottom:4px;
}
.quickly-card-stats{
  display:flex;gap:8px;
}
.quickly-stat{font-size:10px;color:rgba(255,255,255,.55);}
.live-badge{
  background:#ef4444;color:#fff;
  font-size:9px;font-weight:900;letter-spacing:1px;
  padding:2px 6px;border-radius:3px;
}

@media(max-width:768px){
  .live-arena-featured{grid-template-columns:1fr;}
  .laf-challenge-btn{display:none;}
  .live-grid-wrap .live-arrow{display:none;}
}

/* =================================================
   PERFORMANCE — scroll fluido sin entrecortes
   ================================================= */

/* Contenedor principal: el único que hace scroll */
#content{
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
  /* Evita que el motor recalcule paint en cada frame */
  contain: style;
}

/* Promueve las cards al compositor de GPU sin forzar paint */
.quickly-card,
.live-card,
.tournament-card,
.achievement-badge,
.top-item,
.creator-item,
.gofg-orbit-item {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0,0,0); /* promueve a capa GPU sin overdraw */
}

/* Solo activar will-change al hover real, no permanentemente en cada card */
.quickly-card:hover,
.live-card:hover,
.tournament-card:hover {
  will-change: transform, box-shadow;
}
.quickly-card:not(:hover),
.live-card:not(:hover),
.tournament-card:not(:hover) {
  will-change: auto;
}

/* Animaciones que NO eran GPU: las reescribimos solo con opacity/transform */
@keyframes livePulse{
  0%  { box-shadow:0 0 0 0   rgba(239,68,68,.7); }
  70% { box-shadow:0 0 0 10px rgba(239,68,68,0); }
  100%{ box-shadow:0 0 0 0   rgba(239,68,68,0); }
}
.live-pulse-ring{
  /* Cambia de box-shadow a scale+opacity — 100% GPU */
  animation: livePulseGPU 1.4s ease-in-out infinite;
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
}
@keyframes livePulseGPU{
  0%  { transform:scale(1);   opacity:1; }
  70% { transform:scale(2);   opacity:0; }
  100%{ transform:scale(1);   opacity:0; }
}

/* Drops badge: solo opacity en lugar de box-shadow */
.laf-drops{
  animation: dropPulseGPU 2s ease-in-out infinite;
  will-change: opacity;
}
@keyframes dropPulseGPU{
  0%,100%{ opacity:1; }
  50%    { opacity:.6; }
}

/* Reduce backdrop-filter del header de 20px a 10px (el 80% del coste) */
.main-header-wrapper{
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* El sidebar blur también es caro durante el scroll */
#sidebar-container{
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Contenedores del carrusel: overflow hidden para evitar repaints fuera de pantalla */
.quicklys-grid,
.live-grid {
  overflow: hidden;
  transform: translateZ(0);
  scroll-behavior: auto;
  /* Carrusel horizontal: flex row forzado */
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px;
}

/* Quicklys: tarjetas verticales 9/16 */
.quicklys-grid .quickly-card {
  flex-shrink: 0;
  width: 160px;
}

/* Live grid: tarjetas 16/9 */
.live-grid .live-card {
  flex-shrink: 0;
  width: 210px;
}

/* Imágenes: GPU decoding, no bloquea el hilo principal */
.quickly-card img,
.laf-img,
.lc-thumb img {
  decoding: async;
  loading: lazy;
  will-change: transform;
  transform: translateZ(0);
}

/* Lazy load nativo para imágenes fuera de viewport */
.video-card img,
.short-thumbnail img,
.top-thumb img {
  content-visibility: auto;
}

/* Widget row: no necesita GPU layers, desactiva will-change */
.widgets-row,
.gaming-stats-bar,
.achievements-row {
  will-change: auto;
  transform: none;
}

/* Stickers pegados: contiene el repaint dentro del mensaje */
.msg {
  contain: layout style;
  isolation: isolate;
}

/* FAB y scroll-to-top: GPU porque se animan */
.gofg-fab-btn,
.gofg-fab-halo,
.gofg-scroll-top,
.gofg-orbit-item {
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
}

/* ==============================================
   LIVE CHAT: altura fija, mensajes con scroll
   ============================================== */
/* El panel derecho del featured (laf-info) debe
   tener una altura determinada por el grid, no
   por el contenido. El truco: align-items:stretch
   + height:100% en el hijo. */
.live-arena-featured {
  align-items: stretch !important;
}
.laf-info {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
/* El bloque del chat ocupa lo que sobre tras el info del streamer */
#liveChat {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* Los mensajes: scroll dentro de un contenedor de altura fija */
#liveChatMsgs {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden;
}

/* =========================================================
   REDISEÑO HOME ESTILO TWITCH/KICK (fusión) — Romeo
   1) Sidebar: lista de canales en directo arriba (estilo Twitch)
   2) Tira de categorías con box-art (estilo Kick)
   3) Orden: categorías -> HERO en directo -> resumen rápido
   ========================================================= */

/* --- 1) Sidebar: canales en directo (estilo Twitch) --- */
.gofg-sidebar-live-section { padding: 8px 0 4px; }
.gofg-sidebar-live-title {
    font-size: 11px; font-weight: 800; color: #6b7280;
    letter-spacing: .08em; padding: 6px 20px 8px; text-transform: uppercase;
}
.gofg-sidebar-live-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 20px; cursor: pointer; transition: background .15s;
}
.gofg-sidebar-live-item:hover { background: rgba(255,255,255,0.06); }
.gofg-sidebar-live-avatar {
    position: relative; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 13px; color: #fff; flex-shrink: 0;
}
.gofg-sidebar-live-dot {
    position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px;
    border-radius: 50%; background: #ef4444; border: 2px solid #0f0f0f;
    animation: liveDot .8s ease-in-out infinite alternate;
}
.gofg-sidebar-live-info { flex: 1; min-width: 0; }
.gofg-sidebar-live-name {
    font-size: 12.5px; font-weight: 700; color: #e8e8ff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gofg-sidebar-live-game {
    font-size: 10.5px; color: #6b7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gofg-sidebar-live-viewers { font-size: 11px; font-weight: 700; color: #ef4444; flex-shrink: 0; }
.gofg-sidebar-live-more {
    display: block; font-size: 11px; font-weight: 700; color: #2D8CFF;
    padding: 8px 20px 4px; cursor: pointer;
}
.gofg-sidebar-live-more:hover { text-decoration: underline; }

/* --- 2) Tira de categorías con box-art (estilo Kick) --- */
.gofg-category-strip {
    display: flex; gap: 12px; padding: 4px 16px 14px;
    overflow-x: auto; scrollbar-width: none;
}
.gofg-category-strip::-webkit-scrollbar { display: none; }
.gofg-category-card {
    position: relative; flex-shrink: 0; width: 130px; height: 160px;
    border-radius: 12px; overflow: hidden; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.08);
    transition: transform .2s, border-color .2s;
}
.gofg-category-card:hover { transform: translateY(-4px); border-color: rgba(45,140,255,0.5); }
.gofg-category-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--cc1,#2D8CFF), var(--cc2,#00f2ff)); z-index: 2;
}
.gofg-category-card img { width: 100%; height: 100%; object-fit: cover; }
.gofg-category-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
}
.gofg-category-card-name {
    position: absolute; bottom: 10px; left: 10px; right: 10px;
    font-size: 13px; font-weight: 800; color: #fff; z-index: 1;
}

/* --- 3) Resumen rápido (antes: banner + stats por separado) --- */
.gofg-quick-strip {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #0a1a0a 100%);
    border: 1px solid rgba(45,140,255,0.15); border-radius: 14px;
    padding: 14px 20px; margin: 16px;
}
.gofg-quick-strip-text h2 { font-size: 16px; font-weight: 900; color: #fff; margin-bottom: 2px; }
.gofg-quick-strip-text h2 span { color: #2D8CFF; }
.gofg-quick-strip-text p { font-size: 11.5px; color: #8a8ab3; }
.gofg-quick-strip-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.gqs-pill {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px; padding: 5px 12px; font-size: 11.5px; font-weight: 700;
    color: #e8e8ff; white-space: nowrap;
}
.gqs-pill.red { color: #ef4444; border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.08); }
.gqs-pill.gold { color: #ffd700; border-color: rgba(255,215,0,.3); background: rgba(255,215,0,.08); }
.gofg-quick-strip-actions { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }

@media (max-width: 700px) {
    .gofg-category-card { width: 108px; height: 136px; }
    .gofg-quick-strip-actions { margin-left: 0; width: 100%; }
}


/* ===== LIVE-CATS: categorías que no son juegos en "En Directo" ===== */
.live-filter-pills{flex-wrap:nowrap;overflow-x:auto;min-width:0;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0;}
.live-filter-pills::-webkit-scrollbar{display:none;}
.lpill{flex-shrink:0;white-space:nowrap;}
.lc-game.charlando{color:#ec4899;}
.laf-game-tag.charlando{background:rgba(236,72,153,.15);border:1px solid rgba(236,72,153,.3);color:#ec4899;}
.lc-game.podcast{color:#a855f7;}
.laf-game-tag.podcast{background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.3);color:#a855f7;}
.lc-game.irl{color:#22d3ee;}
.laf-game-tag.irl{background:rgba(34,211,238,.15);border:1px solid rgba(34,211,238,.3);color:#22d3ee;}
.lc-game.viajes{color:#2dd4bf;}
.laf-game-tag.viajes{background:rgba(45,212,191,.15);border:1px solid rgba(45,212,191,.3);color:#2dd4bf;}
.lc-game.musica{color:#facc15;}
.laf-game-tag.musica{background:rgba(250,204,21,.15);border:1px solid rgba(250,204,21,.3);color:#facc15;}
.lc-game.arte{color:#e879f9;}
.laf-game-tag.arte{background:rgba(232,121,249,.15);border:1px solid rgba(232,121,249,.3);color:#e879f9;}
.lc-game.cocina{color:#84cc16;}
.laf-game-tag.cocina{background:rgba(132,204,22,.15);border:1px solid rgba(132,204,22,.3);color:#84cc16;}
.lc-game.fitness{color:#fb923c;}
.laf-game-tag.fitness{background:rgba(251,146,60,.15);border:1px solid rgba(251,146,60,.3);color:#fb923c;}


/* ══════════════════════════════════════════════════════
   MENÚ RÁPIDO (G flotante azul) — siempre visible, opciones en columna
   ══════════════════════════════════════════════════════ */
.gofg-fab-wrap{opacity:1!important;pointer-events:all!important;transform:none!important;right:28px;bottom:26px}
@media (min-width:1100px){.gofg-fab-wrap{right:36px}}
.gofg-fab-wrap .gofg-fab-btn{box-shadow:0 0 0 0 rgba(45,140,255,.5),0 8px 26px rgba(0,0,0,.55),0 0 22px rgba(45,140,255,.35)}
.gofg-fab-letter{color:#fff!important;font-family:'Orbitron','Roboto',sans-serif!important;font-size:25px!important;text-shadow:0 0 10px rgba(255,255,255,.5)!important}
.gofg-fab-menu{position:absolute;right:0;bottom:72px;display:flex;flex-direction:column;align-items:flex-end;gap:9px;
  max-height:calc(100vh - 190px);overflow-y:auto;overflow-x:hidden;padding:6px 4px 10px 12px;pointer-events:none;
  scrollbar-width:none;overscroll-behavior:contain}
.gofg-fab-menu::-webkit-scrollbar{display:none}
.gofg-fab-wrap.menu-open .gofg-fab-menu{pointer-events:auto}
.gofg-fab-opt{--d:0ms;display:flex;align-items:center;gap:11px;flex-shrink:0;min-width:176px;padding:7px 18px 7px 7px;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,rgba(24,26,48,.96),rgba(14,15,30,.96));border:1px solid rgba(255,255,255,.12);color:#fff;
  font:700 13.5px 'Rajdhani','DM Sans',sans-serif;letter-spacing:.03em;text-align:left;white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.5);backdrop-filter:blur(10px);
  opacity:0;transform:translate3d(14px,18px,0) scale(.9);transform-origin:100% 100%;
  transition:opacity .2s ease calc(var(--i) * 14ms),transform .26s cubic-bezier(.4,0,.6,1) calc(var(--i) * 14ms),border-color .2s,box-shadow .2s,background .2s}
.gofg-fab-wrap.menu-open .gofg-fab-opt{opacity:1;transform:none;
  transition:opacity .28s ease calc((var(--n) - 1 - var(--i)) * 38ms),transform .5s cubic-bezier(.2,.95,.25,1.12) calc((var(--n) - 1 - var(--i)) * 38ms),border-color .2s,box-shadow .2s,background .2s}
.gofg-fab-opt:hover,.gofg-fab-opt:focus-visible{border-color:rgba(var(--g-rgb,0,196,255),.6);outline:none;
  background:linear-gradient(135deg,rgba(34,38,70,.98),rgba(20,22,44,.98));box-shadow:0 10px 26px rgba(0,0,0,.55),0 0 18px rgba(45,140,255,.25);transform:translate3d(-5px,0,0)}
.gofg-fab-wrap.menu-open .gofg-fab-opt:hover,.gofg-fab-wrap.menu-open .gofg-fab-opt:focus-visible{transform:translate3d(-5px,0,0);transition-delay:0s}
.gofg-fab-opt:active{transform:scale(.97)!important}
.gofg-fab-opt-ico{position:relative;width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-size:17px;line-height:1;
  background:var(--g);box-shadow:0 3px 10px rgba(0,0,0,.4),inset 0 0 0 1.5px rgba(255,255,255,.18)}
.gofg-fab-opt-lbl{flex:1}
.gofg-fab-opt .gofg-orbit-badge{top:-4px;right:-4px}
.gofg-fab-btn.open{background:linear-gradient(135deg,#1e6fe0,#00a8e8)}
.gofg-fab-btn.open .gofg-fab-letter{transform:rotate(-8deg) scale(.9)}
@media (max-height:860px){
  .gofg-fab-menu{display:grid;grid-template-columns:repeat(2,auto);justify-content:end;gap:8px 9px;max-height:calc(100vh - 120px)}
  .gofg-fab-opt{min-width:150px;padding-right:12px;font-size:12.5px}
}
@media (max-width:640px){
  .gofg-fab-wrap{right:14px;bottom:18px}
  .gofg-fab-opt{min-width:150px}
  .gofg-scroll-top{right:14px!important;bottom:86px!important}
}
@media (prefers-reduced-motion:reduce){.gofg-fab-opt,.gofg-fab-wrap.menu-open .gofg-fab-opt{transition-duration:.01s!important;transition-delay:0s!important}}