/* ════════════════════════════════════════════════
   KAZUTO JUEGOS — common.css
   Variables, reset, header, footer, intro, partículas.
   Se carga en TODAS las páginas (home y juegos).
════════════════════════════════════════════════ */

:root{
  --primary:#00f0ff;--secondary:#ff003c;--accent:#ffe000;--rose:#ff6b9d;
  --rose-dim:rgba(255,107,157,0.12);
  --bg-dark:#030912;--bg-card:#0a1628;--bg-mid:#071020;
  --text:#e8f4ff;--text-dim:#7a9ab8;
  --glow-cyan:0 0 20px #00f0ff88,0 0 40px #00f0ff33;
  --glow-red:0 0 20px #ff003c88,0 0 40px #ff003c33;
  --glow-rose:0 0 16px #ff6b9d55,0 0 32px #ff6b9d22;
  --border:rgba(0,240,255,0.15);
  --border-rose:rgba(255,107,157,0.15);
  --header-h:64px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-dark);color:var(--text);
  font-family:'Exo 2',sans-serif;
  overflow-x:hidden;
  min-height:100vh;
  /* evita que el "bounce" de iOS/Android muestre fondo blanco */
  overscroll-behavior-y:none;
}
img{max-width:100%;}
a{-webkit-tap-highlight-color:rgba(0,240,255,.25);}
button{font:inherit;}

/* Respeta accesibilidad: reduce animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

#particles{position:fixed;inset:0;pointer-events:none;z-index:0;}
body::before{
  content:'';position:fixed;inset:0;
  background-image:linear-gradient(rgba(0,240,255,.025) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(0,240,255,.025) 1px,transparent 1px);
  background-size:50px 50px;pointer-events:none;z-index:0;
}

.logo-placeholder{font-family:'Orbitron',sans-serif;font-weight:900;color:var(--primary);line-height:1;}

/* ════ INTRO (solo home) ════ */
#intro{
  position:fixed;inset:0;background:radial-gradient(ellipse at center,#04101e 0%,#000 100%);
  z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;
  text-align:center;animation:introFadeOut .6s ease 3.4s forwards;
}
#intro.gone{display:none;}
.intro-logo-wrap{position:relative;animation:introZoom .8s cubic-bezier(.22,1,.36,1) .3s both;}
.intro-logo{
  width:130px;height:130px;border-radius:50%;
  background:linear-gradient(135deg,#00f0ff18,#ff003c18);border:3px solid var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:3rem;
  box-shadow:var(--glow-cyan),0 0 60px #ff6b9d22;position:relative;z-index:1;overflow:hidden;
}
.intro-ring{position:absolute;inset:-14px;border-radius:50%;border:2px solid transparent;border-top-color:var(--primary);border-right-color:var(--secondary);animation:spinRing 1.2s linear infinite;}
.intro-ring2{position:absolute;inset:-26px;border-radius:50%;border:1.5px solid transparent;border-bottom-color:var(--accent);border-left-color:var(--primary);animation:spinRing 2s linear reverse infinite;}
.intro-ring3{position:absolute;inset:-40px;border-radius:50%;border:1px solid transparent;border-top-color:var(--rose);border-bottom-color:var(--rose);animation:spinRing 3s linear infinite;opacity:.5;}
.intro-title{font-family:'Orbitron',sans-serif;font-size:2.4rem;font-weight:900;color:var(--primary);margin-top:36px;letter-spacing:4px;animation:introText .7s ease 1s both;text-shadow:var(--glow-cyan);width:100%;text-align:center;}
.intro-title span{color:var(--secondary);}
.intro-sub{font-family:'Rajdhani',sans-serif;font-size:.9rem;letter-spacing:5px;color:var(--text-dim);margin-top:8px;animation:introText .7s ease 1.3s both;text-align:center;}
.intro-bar-wrap{margin-top:32px;width:220px;height:2px;background:rgba(255,255,255,.05);border-radius:99px;overflow:hidden;animation:introText .5s ease 1.5s both;}
.intro-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--rose),var(--secondary));animation:loadBar 1.6s ease 1.6s both;box-shadow:0 0 10px var(--primary);}
.intro-hearts{display:flex;gap:16px;margin-top:20px;animation:introText .7s ease 2s both;}
.intro-hearts span{color:var(--rose);font-size:1rem;animation:heartBeat 1.4s ease infinite;opacity:.7;}
.intro-hearts span:nth-child(2){animation-delay:.2s;}
.intro-hearts span:nth-child(3){animation-delay:.4s;}

@keyframes heartBeat{0%,100%{transform:scale(1);}50%{transform:scale(1.3);}}
@keyframes spinRing{to{transform:rotate(360deg);}}
@keyframes introZoom{from{transform:scale(.3);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes introText{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes loadBar{from{width:0;}to{width:100%;}}
@keyframes introFadeOut{to{opacity:0;pointer-events:none;visibility:hidden;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
@keyframes slideDown{from{transform:translateY(-60px);opacity:0;}to{transform:none;opacity:1;}}

/* ════ HEADER ════ */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(3,9,18,.93);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  padding:12px 32px;display:flex;align-items:center;gap:18px;
  min-height:var(--header-h);
}
.header-logo,.logo{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#00f0ff18,#ff6b9d18);border:2px solid var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
  box-shadow:var(--glow-cyan);cursor:pointer;text-decoration:none;overflow:hidden;
  transition:transform .3s,box-shadow .3s;
  font-family:'Orbitron',sans-serif;font-weight:900;color:var(--primary);
}
.header-logo:hover,.logo:hover{transform:scale(1.1) rotate(-3deg);box-shadow:var(--glow-cyan),var(--glow-rose);}
.header-title,.site-title{font-family:'Orbitron',sans-serif;font-size:1.5rem;font-weight:900;color:var(--primary);text-shadow:var(--glow-cyan);letter-spacing:2px;}
.header-title span,.site-title span{color:var(--secondary);}
.header-spacer{flex:1;}
nav{display:flex;gap:8px;}
nav a{font-family:'Rajdhani',sans-serif;font-size:.9rem;font-weight:600;letter-spacing:1px;color:var(--text-dim);text-decoration:none;padding:6px 14px;border:1px solid transparent;border-radius:20px;transition:all .25s;}
nav a:hover,nav a:focus-visible{color:var(--primary);border-color:var(--border);background:rgba(0,240,255,.06);box-shadow:var(--glow-cyan);}
.back-btn{font-family:'Rajdhani',sans-serif;font-size:.9rem;font-weight:600;letter-spacing:1px;color:var(--text-dim);text-decoration:none;padding:6px 16px;border:1px solid var(--border);border-radius:20px;transition:all .2s;}
.back-btn:hover,.back-btn:focus-visible{color:var(--primary);background:rgba(0,240,255,.06);box-shadow:var(--glow-cyan);}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--rose);outline-offset:2px;}

/* ════ FOOTER ════ */
footer{
  border-top:1px solid var(--border-rose);padding:28px 32px;text-align:center;
  color:var(--text-dim);font-size:.85rem;font-family:'Rajdhani',sans-serif;letter-spacing:1px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;
  position:relative;z-index:1;
  /* espacio seguro para gestos de Android/iOS */
  padding-bottom:max(28px,env(safe-area-inset-bottom));
}
footer a{color:var(--primary);text-decoration:none;}
footer a:hover{text-decoration:underline;}
.footer-heart{color:var(--rose);font-size:1rem;animation:heartBeat 2s ease infinite;}
.footer-links{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.footer-sep{opacity:.4;}

/* ════ Banner de cookies (consentimiento) ════ */
#cookie-banner{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:9998;
  max-width:560px;margin:0 auto;
  background:rgba(7,16,32,.97);border:1px solid var(--border);border-radius:14px;
  padding:16px 18px;box-shadow:0 10px 40px rgba(0,0,0,.5);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  font-family:'Rajdhani',sans-serif;font-size:.85rem;color:var(--text-dim);
  transform:translateY(140%);transition:transform .4s ease;
  padding-bottom:max(16px,env(safe-area-inset-bottom));
}
#cookie-banner.show{transform:translateY(0);}
#cookie-banner p{flex:1 1 240px;line-height:1.5;}
#cookie-banner a{color:var(--primary);}
#cookie-banner button{
  padding:9px 18px;border-radius:20px;border:none;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.5px;font-size:.82rem;
  background:linear-gradient(135deg,var(--primary),#0088ff);color:#001018;
  transition:transform .2s;
}
#cookie-banner button:hover{transform:translateY(-2px);}
#cookie-banner .cb-decline{background:transparent;border:1px solid var(--border);color:var(--text-dim);}

/* ════ TÍTULOS DE SECCIÓN (home + juegos) ════ */
.section-title,.sec-title{
  font-family:'Orbitron',sans-serif;font-size:1.05rem;font-weight:700;letter-spacing:3px;
  color:var(--primary);text-transform:uppercase;display:flex;align-items:center;gap:12px;
  margin-bottom:24px;padding-left:4px;
}
.section-title::before,.sec-title::before{content:'';width:4px;height:20px;background:linear-gradient(180deg,var(--primary),var(--rose));border-radius:2px;flex-shrink:0;}
.section-title small,.sec-title small{font-size:.7rem;color:var(--text-dim);font-family:'Rajdhani',sans-serif;letter-spacing:2px;font-weight:400;}

/* ════ CARRUSEL (home + juegos) ════ */
.recommended-section,.rec-section{position:relative;z-index:1;}
.recommended-section{padding:20px 32px 40px;animation:fadeUp .8s ease 4s both;}
.rec-section{margin-top:48px;}
.carousel-outer{overflow:hidden;position:relative;border-radius:12px;}
.carousel-outer::before,.carousel-outer::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none;}
.carousel-outer::before{left:0;background:linear-gradient(90deg,var(--bg-dark),transparent);}
.carousel-outer::after{right:0;background:linear-gradient(-90deg,var(--bg-dark),transparent);}
.carousel-track{display:flex;gap:16px;animation:carouselScroll 32s linear infinite;width:max-content;}
.carousel-track.paused,.carousel-track:hover{animation-play-state:paused;}
@keyframes carouselScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.carousel-card{width:210px;height:135px;border-radius:12px;overflow:hidden;position:relative;flex-shrink:0;cursor:pointer;text-decoration:none;border:1px solid var(--border);transition:transform .3s,border-color .3s,box-shadow .3s;background:var(--bg-card);}
.carousel-card:hover,.carousel-card:focus-visible{transform:scale(1.05);border-color:var(--rose);box-shadow:var(--glow-rose);}
.carousel-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s;display:block;}
.carousel-card:hover img{transform:scale(1.08);}
.carousel-card-name{position:absolute;bottom:0;left:0;right:0;padding:28px 10px 9px;background:linear-gradient(transparent,rgba(0,0,0,.88));font-family:'Rajdhani',sans-serif;font-size:.88rem;font-weight:600;color:#fff;letter-spacing:.5px;}
@media (max-width:600px){
  .recommended-section{padding:16px 14px 30px;}
  .carousel-card{width:160px;height:105px;}
}

/* ════ Bloques de anuncios ════ */
.ad-slot{
  position:relative;z-index:1;margin:28px auto;max-width:920px;
  min-height:100px;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--border);border-radius:10px;
  color:var(--text-dim);font-family:'Rajdhani',sans-serif;font-size:.75rem;letter-spacing:1px;
  overflow:hidden;
}
.ad-slot::before{content:'PUBLICIDAD';opacity:.5;}

/* ════ Páginas de texto (privacidad, términos, 404) ════ */
.legal-content{
  position:relative;z-index:1;max-width:760px;margin:0 auto;padding:48px 24px 80px;
  font-family:'Exo 2',sans-serif;line-height:1.8;color:var(--text);
}
.legal-content h1{font-family:'Orbitron',sans-serif;color:var(--primary);font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:8px;text-shadow:var(--glow-cyan);}
.legal-content .updated{color:var(--text-dim);font-size:.85rem;margin-bottom:32px;font-family:'Rajdhani',sans-serif;letter-spacing:1px;}
.legal-content h2{font-family:'Rajdhani',sans-serif;color:var(--rose);font-size:1.2rem;letter-spacing:1px;margin:32px 0 10px;}
.legal-content p,.legal-content li{color:var(--text-dim);font-size:.95rem;margin-bottom:10px;}
.legal-content ul{padding-left:22px;margin-bottom:16px;}
.legal-content a{color:var(--primary);}
.notfound{position:relative;z-index:1;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px;gap:14px;}
.notfound h1{font-family:'Orbitron',sans-serif;font-size:5rem;color:var(--primary);text-shadow:var(--glow-cyan);}
.notfound p{color:var(--text-dim);max-width:420px;}
.notfound a{display:inline-block;margin-top:8px;padding:12px 28px;border-radius:30px;background:linear-gradient(135deg,var(--primary),#0088ff);color:#001018;text-decoration:none;font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:1px;}

@media (max-width:600px){
  header{padding:10px 14px;gap:12px;}
  .header-logo,.logo{width:44px;height:44px;font-size:1.1rem;}
  .header-title,.site-title{font-size:1.1rem;letter-spacing:1px;}
  nav{display:none;}
  .back-btn{padding:5px 12px;font-size:.85rem;}
  .intro-logo{width:100px;height:100px;font-size:2.2rem;}
  .intro-title{font-size:1.6rem;letter-spacing:2px;margin-top:24px;}
  footer{padding:20px 14px;font-size:.8rem;padding-bottom:max(20px,env(safe-area-inset-bottom));}
}