/* ═══════════════════════════════════════════
   JUSAYN.COM — gaming-galaxy.css
   Location: wp-content/themes/divi-child/css/gaming-galaxy.css
   World: Neon electric — bright, high energy
═══════════════════════════════════════════ */

#j-gaming {
  --g-cyan:    #00ffff;
  --g-magenta: #ff00cc;
  --g-purple:  #7b2fff;
  --g-neon-g:  #39ff14;
  --g-bg:      #020510;
  --g-card:    rgba(5,8,25,0.97);
  --g-dim:     rgba(220,230,255,0.55);
  --g-border:  rgba(0,255,255,0.15);
  width:100%;
  background:var(--g-bg);
  color:#e0e8ff;
}
body { background:var(--g-bg) !important; }

/* ── Grid/scanline overlay ── */
#j-gaming::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,255,255,0.02) 0px, rgba(0,255,255,0.02) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(0,255,255,0.015) 0px, rgba(0,255,255,0.015) 1px, transparent 1px, transparent 80px);
  pointer-events:none; z-index:0;
}

/* ── Scanline sweep ── */
#j-gaming::after {
  content:'';
  position:fixed; top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, transparent, rgba(0,255,255,0.4), transparent);
  animation:g-scan 6s linear infinite;
  pointer-events:none; z-index:1;
}
@keyframes g-scan { from{top:0;} to{top:100vh;} }

/* ── Header ── */
.g-header {
  padding:6rem 4rem 3rem;
  position:relative; z-index:2;
  border-bottom:1px solid var(--g-border);
  text-align:left;
}

.g-eyebrow {
  font-family:'Share Tech Mono',monospace;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--g-cyan); margin-bottom:.75rem;
  display:flex; align-items:center; gap:.6rem;
}
.g-eyebrow::before { content:'> '; color:rgba(0,255,255,0.5); }

.g-title {
  font-family:'Bebas Neue',cursive;
  font-size:clamp(3.5rem,8vw,7.5rem);
  line-height:1; letter-spacing:.05em;
  position:relative; display:inline-block;
  color:#e0e8ff;
  text-shadow: 0 0 40px rgba(0,255,255,0.4), 0 0 80px rgba(0,255,255,0.15);
}
/* Glitch layers */
.g-title::before,
.g-title::after {
  content:attr(data-text);
  position:absolute; top:0; left:0;
  font-family:'Bebas Neue',cursive;
  font-size:inherit; letter-spacing:inherit;
}
.g-title::before { color:var(--g-cyan);    animation:g-glitch-1 4s infinite; clip-path:polygon(0 20%, 100% 20%, 100% 40%, 0 40%); }
.g-title::after  { color:var(--g-magenta); animation:g-glitch-2 4s infinite; clip-path:polygon(0 60%, 100% 60%, 100% 80%, 0 80%); }
@keyframes g-glitch-1 { 0%,90%,100%{transform:none;opacity:0;} 91%{transform:translateX(-3px);opacity:.6;} 95%{transform:translateX(3px);opacity:.6;} }
@keyframes g-glitch-2 { 0%,93%,100%{transform:none;opacity:0;} 94%{transform:translateX(3px);opacity:.5;}  97%{transform:translateX(-3px);opacity:.5;} }

.g-title-sub {
  display:block; font-family:'Bebas Neue',cursive;
  font-size:clamp(3.5rem,8vw,7.5rem); line-height:1; letter-spacing:.05em;
  background:linear-gradient(90deg, var(--g-cyan), var(--g-magenta));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-size:200%; animation:g-hue 4s ease infinite;
}
@keyframes g-hue { 0%,100%{background-position:0%;} 50%{background-position:100%;} }

.g-subtitle { font-family:'DM Sans',sans-serif; font-size:.9rem; color:var(--g-dim); max-width:480px; line-height:1.75; margin-top:.75rem; }

/* ── HUD Stats Bar ── */
.g-hud {
  display:grid; grid-template-columns:repeat(4,1fr);
  margin:0 4rem 0; border:1px solid var(--g-border);
  background:rgba(0,255,255,0.03); position:relative; z-index:2;
}
.g-hud::before { content:'HUD'; position:absolute; top:-1px; left:1rem; font-family:'Share Tech Mono',monospace; font-size:.55rem; letter-spacing:.15em; background:var(--g-bg); color:var(--g-cyan); padding:0 .4rem; }
.g-hud-item { padding:1.25rem 1.5rem; border-right:1px solid var(--g-border); text-align:center; }
.g-hud-item:last-child { border-right:none; }
.g-hud-label { font-family:'Share Tech Mono',monospace; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(0,255,255,0.5); display:block; margin-bottom:.4rem; }
.g-hud-val { font-family:'Bebas Neue',cursive; font-size:2rem; letter-spacing:.05em; color:var(--g-cyan); line-height:1; text-shadow:0 0 20px rgba(0,255,255,0.5); }
.g-hud-item:nth-child(2) .g-hud-val { color:var(--g-magenta); text-shadow:0 0 20px rgba(255,0,204,0.4); }
.g-hud-item:nth-child(3) .g-hud-val { color:var(--g-neon-g);  text-shadow:0 0 20px rgba(57,255,20,0.4); }
.g-hud-item:nth-child(4) .g-hud-val { color:#e0e8ff; text-shadow:none; }

/* ── Filter bar ── */
.g-filter-wrap { position:sticky; top:0; z-index:50; background:rgba(2,5,16,0.95); backdrop-filter:blur(20px); border-bottom:1px solid var(--g-border); padding:.85rem 4rem; }
.g-filter-bar { display:flex; gap:.6rem; flex-wrap:wrap; }
.g-filter-btn { padding:.4rem 1.1rem; background:transparent; color:var(--g-dim); border:1px solid rgba(0,255,255,0.2); font-family:'Share Tech Mono',monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer !important; transition:all .25s; }
.g-filter-btn:hover, .g-filter-btn.active { background:rgba(0,255,255,0.1); color:var(--g-cyan); border-color:var(--g-cyan); box-shadow:0 0 12px rgba(0,255,255,0.2); }

/* ── Content ── */
.g-content { padding:3rem 4rem 6rem; max-width:1280px; margin:0 auto; position:relative; z-index:2; }
.g-section-eye { font-family:'Share Tech Mono',monospace; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--g-cyan); margin-bottom:.6rem; display:flex; align-items:center; gap:.6rem; }
.g-section-eye::before { content:'//'; color:rgba(0,255,255,0.4); }
.g-section-title { font-family:'Playfair Display',serif; font-size:clamp(1.5rem,3vw,2rem); color:#e0e8ff; margin-bottom:1.75rem; line-height:1.2; }
.g-section-title em { color:var(--g-cyan); font-style:italic; }

/* ── Video grid ── */
.g-video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-bottom:4rem; }

.g-video-card {
  background:var(--g-card);
  border:1px solid var(--g-border);
  position:relative; overflow:hidden;
  transition:transform .3s, border-color .3s, box-shadow .3s;
  cursor:pointer; display:flex; flex-direction:column;
}
.g-video-card.g-featured { grid-column:span 2; }
.g-video-card:hover { transform:translateY(-5px); border-color:rgba(0,255,255,0.5); box-shadow:0 0 30px rgba(0,255,255,0.1); }

.g-video-thumb {
  height:180px; position:relative;
  background:linear-gradient(135deg, rgba(0,255,255,0.06), rgba(123,47,255,0.08));
  border-bottom:1px solid var(--g-border);
  display:flex; align-items:center; justify-content:center;
}
.g-video-card.g-featured .g-video-thumb { height:240px; }

.g-game-badge {
  position:absolute; top:.75rem; left:.75rem;
  font-family:'Share Tech Mono',monospace;
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.25rem .65rem;
}
.g-badge-fortnite { background:rgba(0,255,255,0.12); color:var(--g-cyan); border:1px solid rgba(0,255,255,0.25); }
.g-badge-dbd      { background:rgba(255,0,204,0.1);  color:var(--g-magenta); border:1px solid rgba(255,0,204,0.25); }
.g-badge-comp     { background:rgba(57,255,20,0.08); color:var(--g-neon-g); border:1px solid rgba(57,255,20,0.2); }

.g-play-btn {
  width:56px; height:56px;
  border:2px solid rgba(0,255,255,0.4);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; padding-left:4px; color:var(--g-cyan);
  transition:all .3s;
  box-shadow:0 0 20px rgba(0,255,255,0.15);
}
.g-video-card:hover .g-play-btn { background:rgba(0,255,255,0.15); box-shadow:0 0 35px rgba(0,255,255,0.35); transform:scale(1.1); }

.g-video-dur { position:absolute; bottom:.65rem; right:.75rem; font-family:'Share Tech Mono',monospace; font-size:.58rem; letter-spacing:.1em; background:rgba(2,5,16,0.85); color:var(--g-dim); padding:.2rem .5rem; border:1px solid var(--g-border); }

.g-video-inner { padding:1.5rem; flex:1; }
.g-video-meta { display:flex; align-items:center; gap:.6rem; margin-bottom:.65rem; }
.g-video-title { font-family:'Playfair Display',serif; font-size:1.1rem; color:#e0e8ff; margin-bottom:.4rem; line-height:1.3; transition:color .25s; }
.g-video-card:hover .g-video-title { color:var(--g-cyan); }
.g-video-desc { font-size:.8rem; color:var(--g-dim); line-height:1.7; }

/* ── Mobile ── */
@media (max-width:768px) {
  .g-header { padding:5rem 1.5rem 2.5rem; }
  .g-hud { margin:0 1.5rem 0; grid-template-columns:repeat(2,1fr); }
  .g-hud-item:nth-child(2) { border-right:none; }
  .g-filter-wrap { padding:.75rem 1.5rem; }
  .g-content { padding:2rem 1.5rem 4rem; }
  .g-video-grid { grid-template-columns:1fr; }
  .g-video-card.g-featured { grid-column:span 1; }
}