/* =====================================================================
   punchet — capa de estilo GAMER compartida (neón rosa + cian)
   Se carga DESPUÉS de styles.css en cada página. Es aditiva: no cambia la
   estructura ni la lógica, solo unifica el look (HUD, brillos, tipografía).
   ===================================================================== */
:root{
  --gg-pink:#ff2d95; --gg-cyan:#00f2ff; --gg-violet:#7c3aed;
  --gg-panel:rgba(14,14,28,.78); --gg-line:rgba(255,45,149,.28);
  --gg-font:'Orbitron','Roboto',sans-serif;
}

/* Fondo ambiental: rejilla tenue + resplandores en las esquinas */
#content{
  background-image:
    radial-gradient(900px 420px at 8% -8%, rgba(255,45,149,.10), transparent 60%),
    radial-gradient(900px 420px at 96% 4%, rgba(0,242,255,.09), transparent 60%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
  background-attachment:local;
}
#content::-webkit-scrollbar-thumb{background:linear-gradient(var(--gg-pink),var(--gg-cyan));border-radius:4px;}
#content{scrollbar-color:rgba(255,45,149,.55) transparent;}

/* Títulos de sección: barra neón + tipografía arcade */
.gofg-section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding-left:14px;position:relative;}
.gofg-section-header::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:2px;background:linear-gradient(var(--gg-pink),var(--gg-cyan));box-shadow:0 0 12px rgba(255,45,149,.6);}
.gofg-section-title{font-family:var(--gg-font);font-size:17px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:#fff;}
.gofg-section-title span{color:var(--gg-cyan);text-shadow:0 0 12px rgba(0,242,255,.5);}
.gofg-see-all{font-weight:700;color:var(--gg-cyan)!important;opacity:.85;cursor:pointer;white-space:nowrap;}
.gofg-see-all:hover{opacity:1;text-shadow:0 0 10px rgba(0,242,255,.6);}
.gofg-section{padding:22px 20px 0;}

/* Botones principales */
.btn-gaming-primary{background:linear-gradient(135deg,var(--gg-pink),var(--gg-violet) 55%,var(--gg-cyan))!important;color:#fff!important;border:none!important;font-family:var(--gg-font);font-weight:800;letter-spacing:.5px;box-shadow:0 0 22px rgba(255,45,149,.38);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);}
.btn-gaming-primary:hover{box-shadow:0 0 30px rgba(0,242,255,.5);}
.btn-gaming-secondary{background:rgba(0,242,255,.07)!important;color:var(--gg-cyan)!important;border:1px solid rgba(0,242,255,.4)!important;font-weight:700;}
.btn-gaming-secondary:hover{background:rgba(0,242,255,.16)!important;box-shadow:0 0 18px rgba(0,242,255,.3);}

/* Tarjetas: borde HUD y brillo al pasar el puntero */
.tournament-card,.lfg-card,.sidebar-widget,.live-card,.quickly-card,.creator-item,.top-item{transition:border-color .2s,box-shadow .2s,transform .2s;}
.tournament-card:hover,.lfg-card:hover,.sidebar-widget:hover{border-color:var(--gg-line)!important;box-shadow:0 0 22px rgba(255,45,149,.14);}
.live-card:hover,.quickly-card:hover{box-shadow:0 0 24px rgba(255,45,149,.28);}

/* ===== HERO de bienvenida (portada) ===== */
.gofg-hero{position:relative;margin:18px 20px 6px;padding:34px 34px 28px;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,rgba(255,45,149,.16),rgba(124,58,237,.12) 45%,rgba(0,242,255,.14));border:1px solid var(--gg-line);box-shadow:0 0 40px rgba(255,45,149,.12),inset 0 0 60px rgba(0,0,0,.35);}
.gofg-hero::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);pointer-events:none;mix-blend-mode:overlay;}
.gofg-hero::after{content:'';position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(0,242,255,.28),transparent 65%);pointer-events:none;}
.gofg-hero-tag{position:relative;display:inline-block;font-family:var(--gg-font);font-size:11px;font-weight:700;letter-spacing:2px;color:var(--gg-cyan);margin-bottom:12px;padding:4px 10px;border:1px solid rgba(0,242,255,.35);border-radius:4px;background:rgba(0,0,0,.35);}
.gofg-hero-title{position:relative;font-family:var(--gg-font);font-size:clamp(26px,4.2vw,46px);font-weight:900;line-height:1.08;color:#fff;margin:0 0 10px;text-shadow:0 0 24px rgba(255,45,149,.35);}
.gofg-hero-title span{background:linear-gradient(120deg,var(--gg-pink),var(--gg-cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 10px rgba(255,45,149,.4));}
.gofg-hero-sub{position:relative;max-width:640px;font-size:15px;line-height:1.55;color:#cfcfee;margin-bottom:18px;}
.gofg-hero-cta{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.gofg-hero-cta button{padding:12px 20px;font-size:13px;border-radius:10px;cursor:pointer;}
.gofg-pillars{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.gofg-pillar{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border-radius:12px;background:var(--gg-panel);border:1px solid rgba(255,255,255,.09);cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;}
.gofg-pillar:hover{transform:translateY(-3px);border-color:var(--gg-cyan);box-shadow:0 0 20px rgba(0,242,255,.22);}
.gofg-pillar-ico{font-size:24px;line-height:1;filter:drop-shadow(0 0 8px rgba(255,45,149,.5));}
.gofg-pillar b{display:block;font-family:var(--gg-font);font-size:12px;letter-spacing:.5px;color:#fff;margin-bottom:3px;}
.gofg-pillar small{display:block;font-size:11.5px;line-height:1.4;color:#a9a9cf;}
@media(max-width:900px){.gofg-pillars{grid-template-columns:repeat(2,1fr);}.gofg-hero{padding:24px 20px 20px;margin:14px 12px 4px;}}
@media(max-width:520px){.gofg-pillars{grid-template-columns:1fr;}}
body.light-theme .gofg-hero-title,body.light-theme .gofg-pillar b{color:#111;}
body.light-theme .gofg-hero-sub,body.light-theme .gofg-pillar small{color:#444;}
body.light-theme .gofg-pillar{background:rgba(255,255,255,.85);}

/* ===== Cómo funciona (3 pasos) ===== */
.gofg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gofg-step{position:relative;padding:18px 16px 16px;border-radius:14px;background:var(--gg-panel);border:1px solid rgba(255,255,255,.09);}
.gofg-step-n{font-family:var(--gg-font);font-size:30px;font-weight:900;background:linear-gradient(135deg,var(--gg-pink),var(--gg-cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:8px;}
.gofg-step b{display:block;color:#fff;font-size:14px;margin-bottom:4px;}
.gofg-step p{font-size:12.5px;line-height:1.5;color:#a9a9cf;}
@media(max-width:700px){.gofg-steps{grid-template-columns:1fr;}}
body.light-theme .gofg-step{background:rgba(255,255,255,.85);}
body.light-theme .gofg-step b{color:#111;}

/* Sidebar: indicador neón del ítem activo + etiquetas de grupo */
#sidebar-container .item.active{box-shadow:inset 3px 0 0 var(--gg-pink);background:linear-gradient(90deg,rgba(255,45,149,.14),transparent)!important;}
#sidebar-container .item:hover{background:linear-gradient(90deg,rgba(0,242,255,.10),transparent);}
.sidebar-divider-label{font-family:var(--gg-font);letter-spacing:1.2px;color:var(--gg-cyan)!important;}

/* Videos a todo el ancho una vez retirados los patrocinadores de relleno */
.content-row #videosGrid{flex:1;min-width:0;}

/* =====================================================================
   PORTADA v2 — orden, ritmo vertical y jerarquía de secciones
   Orden: Hero → En directo → Torneos → Quicklys → (Punches | Equipo) →
          Comunidad → Lo más visto / Creadores → Trending
   ===================================================================== */
/* Ritmo uniforme: mismo margen lateral y mismo aire entre secciones */
.live-arenas-section,.quicklys-section,.tournaments-section,.gofg-section,.lfg-section,.widgets-row{margin:0;padding:30px 20px 0;}
.trending-section{padding:30px 20px 24px;}

/* Todos los títulos de sección con el mismo look (barra neón + arcade) */
.live-header-row,.trending-header{position:relative;padding-left:14px;}
.live-header-row::before,.trending-header::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:2px;background:linear-gradient(var(--gg-pink),var(--gg-cyan));box-shadow:0 0 12px rgba(255,45,149,.6);}
.live-label{font-size:17px!important;letter-spacing:.6px!important;}
.trending-header{margin-bottom:14px;}
.trending-title{margin:0;font-family:var(--gg-font);font-size:17px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:#fff;}
.trending-title span{color:var(--gg-cyan);text-shadow:0 0 12px rgba(0,242,255,.5);}
.trending-icon{display:none;}
.quicklys-head{margin-bottom:14px;}
body.light-theme .trending-title{color:#111;}

/* Torneos: rejilla de 2 columnas, premio protagonista, los LIVE destacan */
.tournaments-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.tournaments-section>.gofg-section-header{grid-column:1/-1;margin-bottom:2px;}
.tournament-card{position:relative;overflow:hidden;margin:0;padding:16px 18px;border-radius:14px;background:linear-gradient(135deg,rgba(255,45,149,.07),rgba(13,13,30,.96) 42%,rgba(0,242,255,.05));border:1px solid rgba(255,255,255,.09);}
.tournament-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--gg-pink),var(--gg-cyan));opacity:.6;}
.tournament-card:has(.tournament-status-live){border-color:rgba(239,68,68,.45);box-shadow:0 0 22px rgba(239,68,68,.13);}
.tournament-card:has(.tournament-status-live)::before{background:#ef4444;opacity:1;}
.tournament-game{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:28px;background:rgba(255,255,255,.05);border-radius:12px;}
.tournament-name{font-size:15px;}
.tournament-meta{color:#9a9ac0;}
.tournament-prize{display:flex;align-items:center;gap:6px;font-size:14px;padding:7px 14px;box-shadow:0 0 16px rgba(255,180,0,.18);}
body.light-theme .tournament-card{background:rgba(255,255,255,.9);}
body.light-theme .tournament-name{color:#111;}
@media(max-width:900px){.tournaments-section{grid-template-columns:1fr;}}

/* Fila doble: Cómo ganar Punches (ancha) + Buscar equipo (llamada a la acción) */
.gofg-duo{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px;padding:30px 20px 0;align-items:stretch;}
.gofg-duo>.gofg-section,.gofg-duo>.lfg-section{padding:0;margin:0;display:flex;flex-direction:column;}
.gofg-duo .gofg-steps{flex:1;}
.gofg-duo .lfg-card{flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;}
.gofg-duo .lfg-btn{width:100%;padding:12px 18px;border-radius:12px;font-family:var(--gg-font);letter-spacing:.4px;background:linear-gradient(135deg,var(--gg-pink),var(--gg-violet) 55%,var(--gg-cyan));box-shadow:0 0 22px rgba(255,45,149,.3);}
@media(max-width:1000px){.gofg-duo{grid-template-columns:1fr;gap:0;}.gofg-duo>.lfg-section{padding-top:30px;}}

/* Videos de la comunidad: con título, y la sección desaparece si aún no hay ninguno */
.gofg-community-videos:has(#videosGrid:empty):has(#tendence-loader.hidden){display:none;}
.gofg-community-videos #videosGrid{padding:0;}

/* Separador neón en vez de la línea blanca */
.glass-separator{border:0;height:1px;margin:30px 20px 0;background:linear-gradient(90deg,transparent,var(--gg-pink),var(--gg-cyan),transparent);opacity:.55;}

/* Estado vacío amable en "Lo más visto" */
#topViewedList:empty::after{content:'Aún no hay vídeos. ¡Sube tu jugada y sé el primero!';display:block;padding:22px 8px;color:#8a8ab0;font-size:13px;}

/* Fila doble: contenido centrado verticalmente para que no queden huecos */
.gofg-duo .gofg-step{display:flex;flex-direction:column;justify-content:center;}
.gofg-duo .lfg-card{padding:20px 22px;}
.gofg-duo .lfg-icon{font-size:34px;}

/* ===== Móvil: que nada se salga de la pantalla ===== */
@media(max-width:768px){
  .laf-thumb{min-height:0;}                       /* el min-height forzaba un ancho mayor al de la pantalla */
}
@media(max-width:960px){
  .main-header-wrapper{height:auto!important;min-height:64px;flex-wrap:wrap;row-gap:8px;padding:8px 12px 8px 62px!important;}
  .main-header-wrapper img[alt="punchet"]{height:44px!important;}
  .main-header-wrapper>div:nth-child(2){order:3;flex:1 1 100%!important;padding:0!important;min-width:0;}
  .main-header-wrapper .ai-search-container{max-width:none;min-width:0;}
  .main-header-wrapper .ai-input{min-width:0;flex:1 1 0;width:auto;}
  .main-header-wrapper>div:nth-child(3){margin-left:auto;}
}