/* ============================================================
   KANO GAMER · THEME & DESIGN SYSTEM (theme.css)
   Enterprise Design Tokens, Theme Presets, Typography, Reset,
   Scrollbars, Global Keyframes & Skeleton Utilities
   ============================================================ */

/* ============================================================
   KANO GAMER · ENTERPRISE DESIGN TOKENS (8pt Grid System)
   ============================================================ */
:root{
  --bg:#06080d;
  --bg-2:#0c0f17;
  --panel:rgba(14,18,25,.88);
  --panel-soft:rgba(255,255,255,.035);
  --panel-border:rgba(255,173,47,.20);
  --line:rgba(255,173,47,.20);
  --line:rgba(229, 195, 127, 0.35);
  --line-soft:rgba(255,255,255,.12);
  --text:#f8fafc;
  --muted:#94a3b8;
  --muted-dim:#64748b;

  --gold:#e5c37f;
  --gold-2:#f7e3af;
  --gold-gradient:linear-gradient(135deg, #f7e3af 0%, #e5c37f 50%, #b89047 100%);
  --silver:#e2e8f0;
  --twitch:#9146ff;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --space-12:48px;
  --space-16:64px;

  --radius-lg:6px;
  --radius-md:4px;
  --radius-sm:3px;

  --shadow:0 24px 80px rgba(0,0,0,.85), inset 0 1px 0 rgba(255, 238, 185, 0.25);
  --shadow-lg:0 32px 100px rgba(0,0,0,.92), 0 0 40px rgba(229, 195, 127, 0.20);
  --font-display:'Rajdhani',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}

*{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  background-color:#07090e !important;
  overflow-x:hidden !important;
}
[id]{scroll-margin-top:110px;}

:focus-visible{
  outline:2px solid var(--gold) !important;
  outline-offset:3px !important;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *:not(#radioVinylDisc):not(.radio-vinyl-disc):not(.radio-vinyl-disc-pro):not(.ticker-track):not(.ticker-dot){animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

body{
  margin:0;
  background-color:#07090e !important;
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden !important;
  -webkit-font-smoothing:antialiased;
}


/* ============================================================
   KANO GAMER · THEME PRESETS (Diseño Élite Cálido / Obsidian)
   ============================================================ */

/* 1. Kano Nexus & Gold Forge (Fondo Obsidiana Élite Enterprise) */
body, body.theme-default_hud, body.theme-gold_forge{
  background:
    radial-gradient(ellipse 80% 45% at 50% -5%, rgba(255,173,47,.12), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 55%, rgba(255,173,47,.03), transparent 60%),
    radial-gradient(ellipse 50% 35% at 15% 45%, rgba(255,173,47,.03), transparent 60%),
    linear-gradient(180deg, #07090e 0%, #05070b 50%, #030407 100%) !important;
}
body::before, body.theme-default_hud::before, body.theme-gold_forge::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.025;
  background-image:
    linear-gradient(rgba(255,255,255,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.30) 1px, transparent 1px);
  background-size:48px 48px;
}


/* 3. Rust RadZone (Apocalipsis Gaming) */
body.theme-rust_wasteland{
  background:
    radial-gradient(circle at 80% 10%, rgba(255,80,30,.20), transparent 45%),
    radial-gradient(circle at 20% 70%, rgba(75,255,138,.12), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(180,60,10,.11), transparent 50%),
    linear-gradient(180deg, #0a0705 0%, #040302 100%) !important;
}
body.theme-rust_wasteland::before{
  opacity:.07;
  background-image:
    linear-gradient(60deg, rgba(255,100,40,.35) 1px, transparent 1px),
    linear-gradient(120deg, rgba(255,100,40,.35) 1px, transparent 1px);
  background-size:48px 84px;
}

/* 4. Cyber Stream (Twitch & Kick Neon) */
body.theme-cyber_stream{
  background:
    radial-gradient(circle at 15% 15%, rgba(145,70,255,.26), transparent 46%),
    radial-gradient(circle at 85% 30%, rgba(83,252,24,.20), transparent 44%),
    radial-gradient(circle at 50% 85%, rgba(145,70,255,.16), transparent 48%),
    linear-gradient(180deg, #07030e 0%, #030805 100%) !important;
}
body.theme-cyber_stream::before{
  opacity:.065;
  background-image:
    linear-gradient(rgba(145,70,255,.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,252,24,.35) 1px, transparent 1px);
  background-size:36px 36px;
}

/* 5. Deep Abyss (Minimalista Dark Ultra) */
body.theme-deep_abyss{
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(20,20,30,.25), transparent 50%),
    #030205 !important;
}
body.theme-deep_abyss::before{
  opacity:.025;
  background-image:
    linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size:64px 64px;
}

/* 6. Aurora Aguililla (Nebulosa Mística) */
body.theme-aurora_borealis{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(75,255,200,.20), transparent 50%),
    radial-gradient(ellipse at 80% 15%, rgba(169,112,255,.22), transparent 50%),
    radial-gradient(circle at 50% 70%, rgba(255,173,47,.13), transparent 45%),
    linear-gradient(180deg, #05080c 0%, #040207 100%) !important;
}
body.theme-aurora_borealis::before{
  opacity:.06;
  background-image:
    radial-gradient(rgba(75,255,200,.65) 1px, transparent 1px),
    radial-gradient(rgba(169,112,255,.55) 1px, transparent 1px);
  background-size:56px 56px;
  background-position:0 0, 28px 28px;
}

/* 7. Custom Image */
body.theme-custom{
  background:#07040a !important;
}


a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:rgba(255,173,47,.35);}

h1,h2,h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:-.03em;
  margin:0;
  font-weight:700;
}

/* ============================================================
   HERO HEADER — CYBER-LUXURY MASTERPIECE (TOP 1 MUNDIAL)
   ============================================================ */

.hero-header-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  position: relative;
}

/* 1. Status Pill (Eliminado por petición) */
.hero-status-pill {
  display: none !important;
}

/* 2. Title Container, Atmospheric Aura, Starburst Lens Flare & Cyber Wings */
.hero-title-container {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 36px 14px;
  margin: 0 auto 12px;
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
  transform: perspective(1000px) rotateX(calc(var(--tilt-y, 0) * 8deg)) rotateY(calc(var(--tilt-x, 0) * 10deg));
}

.hero-title-aura {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 180%;
  background: radial-gradient(
    circle at var(--hero-mx, 50%) var(--hero-my, 50%),
    rgba(229, 195, 127, 0.32) 0%,
    rgba(255, 173, 47, 0.14) 36%,
    rgba(0, 0, 0, 0) 70%
  );
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  animation: heroAuraPulse 4.5s ease-in-out infinite alternate;
}

@keyframes heroAuraPulse {
  0% {
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* --- CINEMATIC STARBURST LENS FLARE (TOP 1 MUNDIAL EFFECT) --- */
.hero-starburst-flare {
  position: absolute;
  top: 14%;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10;
  animation: starburstTravel 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.flare-core {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 10px 4px #FFFFFF,
              0 0 22px 10px #FFD700,
              0 0 45px 18px #FFA500;
  animation: flareCorePulse 1.2s ease-in-out infinite alternate;
}

.flare-ray.horizontal {
  position: absolute;
  top: -1.5px;
  left: -65px;
  width: 130px;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
  filter: drop-shadow(0 0 6px #FFD700);
}

.flare-ray.vertical {
  position: absolute;
  top: -45px;
  left: -1.5px;
  width: 3px;
  height: 90px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
  filter: drop-shadow(0 0 6px #FFD700);
}

.flare-halo {
  position: absolute;
  top: -24px;
  left: -24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 245, 200, 0.7) 0%, rgba(255, 215, 0, 0.3) 45%, transparent 70%);
}

@keyframes flareCorePulse {
  0% { transform: scale(0.85); opacity: 0.85; }
  100% { transform: scale(1.25); opacity: 1; }
}

@keyframes starburstTravel {
  0%, 15% {
    left: 4%;
    opacity: 0;
    transform: scale(0.2);
  }
  20% {
    opacity: 1;
    transform: scale(0.9);
  }
  42% {
    left: 48%;
    opacity: 1;
    transform: scale(1.6);
  }
  65% {
    left: 94%;
    opacity: 1;
    transform: scale(0.85);
  }
  72%, 100% {
    left: 96%;
    opacity: 0;
    transform: scale(0);
  }
}

/* 3. Title Typography: 3D Beveled Solid Gold & Platinum (Chiseled Extrusion) */
#heroTitle {
  position: relative;
  z-index: 2;
  font-family: var(--font-display) !important;
  font-size: clamp(52px, 8vw, 92px) !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.35s ease;
  user-select: none;
  filter: drop-shadow(0 2px 0px rgba(255, 245, 215, 0.6))
          drop-shadow(0 4px 0px #b8860b)
          drop-shadow(0 6px 1px #593e03)
          drop-shadow(0 10px 22px rgba(0, 0, 0, 0.95))
          drop-shadow(0 0 32px rgba(229, 195, 127, 0.45)) !important;
}

#heroTitle:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 2px 0px rgba(255, 255, 255, 0.8))
          drop-shadow(0 5px 0px #d4af37)
          drop-shadow(0 8px 2px #593e03)
          drop-shadow(0 14px 28px rgba(0, 0, 0, 0.95))
          drop-shadow(0 0 45px rgba(229, 195, 127, 0.75)) !important;
}

#heroTitle span {
  display: inline-block;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF6EE 28%, #E5DAC4 52%, #BFA065 78%, #785A1D 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.45);
}

#heroTitle em {
  display: inline-block;
  font-style: normal !important;
  margin-left: 14px !important;
  background: linear-gradient(180deg, #FFFDE8 0%, #FFE98A 24%, #F5CE58 50%, #D4AF37 74%, #9E7412 88%, #523701 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 1px rgba(255, 240, 180, 0.55);
}

/* 4. Cyber Energy Wings / Conduits */
.hero-title-wings {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  width: 100%;
  max-width: 480px;
  z-index: 2;
}

.wing-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e5c37f, #ffd700);
  box-shadow: 0 0 8px rgba(229, 195, 127, 0.6);
  position: relative;
}

.wing-line.right {
  background: linear-gradient(90deg, #ffd700, #e5c37f, transparent);
}

.wing-diamond {
  font-size: 8px;
  color: #ffd700;
  text-shadow: 0 0 8px #ffd700, 0 0 14px #ffa500;
}

.wing-badge {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .25em;
  color: var(--gold-light);
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 4px;
  background: rgba(20, 15, 10, 0.85);
  border: 1px solid rgba(229, 195, 127, 0.35);
  box-shadow: 0 0 12px rgba(229, 195, 127, 0.15);
  white-space: nowrap;
}

/* 5. Subtitle: Elegant Frosted Glass Chip */
#heroSubtitle {
  margin: 0 auto 16px !important;
  font-size: 14px !important;
  color: #e2e8f0 !important;
  max-width: 680px !important;
  line-height: 1.55 !important;
  text-align: center !important;
  padding: 4px 18px !important;
  background: rgba(10, 8, 6, 0.35) !important;
  border: 1px solid rgba(229, 195, 127, 0.14) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
  letter-spacing: .02em !important;
  font-weight: 500 !important;
  transition: border-color 0.3s ease, background 0.3s ease;
}

#heroSubtitle:hover {
  background: rgba(14, 11, 8, 0.55) !important;
  border-color: rgba(229, 195, 127, 0.32) !important;
}

@media (max-width: 600px) {
  .hero-title-container {
    padding: 6px 14px;
  }
  .hero-title-wings {
    max-width: 320px;
  }
  #heroSubtitle {
    border-radius: 12px !important;
    padding: 6px 14px !important;
    font-size: 12.5px !important;
  }
}


/* --- Custom Scrollbar Styling --- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(10, 8, 6, 0.95);
}
::-webkit-scrollbar-thumb {
  background: rgba(229, 195, 127, 0.35);
  border-radius: 4px;
  border: 1px solid rgba(255, 240, 195, 0.15);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(229, 195, 127, 0.65);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(229, 195, 127, 0.35) rgba(10, 8, 6, 0.95);
}

/* ============================================================
   GLOBAL KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes pulseDotGold {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: .75; box-shadow: 0 0 12px var(--gold); }
}

@keyframes pulseDotGreen {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.22); opacity: .8; box-shadow: 0 0 15px #23a55a, 0 0 28px rgba(35, 165, 90, .85); }
}

@keyframes pulseDotRed {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: .8; box-shadow: 0 0 16px #ef4444, 0 0 30px rgba(239, 68, 68, .95); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .5; transform: scale(.82); }
}

@keyframes hudPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.9); }
}

@keyframes pulseLiveBorder {
  0%, 100% { border-color: rgba(229, 195, 127, 0.65); }
  50% { border-color: rgba(255, 240, 195, 0.95); box-shadow: 0 0 18px rgba(229, 195, 127, 0.35); }
}

@keyframes userPop {
  from { transform: scale(.95) translateY(-8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes navLinksSlideDown {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes streamBtnGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(83, 252, 24, 0.35); }
  50% { box-shadow: 0 0 32px rgba(83, 252, 24, 0.65); }
}

@keyframes newsPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.15); }
}

@keyframes cookieSlideUp {
  from { transform: translateY(120%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes equalizerBounce {
  0% { transform: scaleY(0.2); }
  100% { transform: scaleY(1.0); }
}

@keyframes soundwaveExpand {
  0% { transform: scale(0.88); opacity: 0.85; border-color: rgba(255, 240, 195, 0.8); }
  50% { opacity: 0.35; }
  100% { transform: scale(1.18); opacity: 0; border-color: rgba(229, 195, 127, 0); }
}

@keyframes kgVinylSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================================
   REVEAL & PAGE SKELETON UTILITIES
   ============================================================ */
/* ============================================================
   REVEAL (Estático sin desplazamientos verticales)
   ============================================================ */
.reveal{opacity:1;transform:none;}
.reveal.in{opacity:1;transform:none;}

/* empty state, used whenever a repeater array from AdminHub is empty */
.empty-state{
  padding:36px 28px;border-radius:var(--radius-md);
  text-align:center;color:var(--muted-dim);font-size:13.5px;font-weight:600;
  border:1px dashed var(--line);
  grid-column:1/-1;
}

/* pantalla de carga inicial: se desvanece en cuanto llegan los datos */
.page-skeleton{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);
  transition:opacity .4s ease;
}
.page-skeleton.hidden{opacity:0;pointer-events:none;}
.page-skeleton-inner{display:flex;flex-direction:column;align-items:center;gap:16px;}
.page-skeleton-logo{
  width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg, rgba(255,173,47,.25), rgba(255,173,47,.05));
  border:1px solid var(--line);
  animation:skeletonPulse 1.4s ease-in-out infinite;
}
.page-skeleton-bar{width:120px;height:3px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;}
.page-skeleton-bar::after{
  content:"";display:block;width:40%;height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  animation:skeletonBar 1.1s ease-in-out infinite;
}
@keyframes skeletonPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.55;transform:scale(.94);}}
@keyframes skeletonBar{0%{transform:translateX(-120%);}100%{transform:translateX(340%);}}

/* botón flotante volver arriba: aparece solo tras hacer scroll */