/* ════════════════════════════════════════════════
   KAZUTO JUEGOS — home.css (solo index.html)
════════════════════════════════════════════════ */

.hero{position:relative;z-index:1;padding:72px 32px 52px;text-align:center;animation:fadeUp .8s ease 3.8s both;}
.hero-eyebrow{font-family:'Rajdhani',sans-serif;font-size:.85rem;letter-spacing:5px;color:var(--rose);text-transform:uppercase;margin-bottom:14px;}
.hero-headline{font-family:'Orbitron',sans-serif;font-size:clamp(2rem,5vw,3.8rem);font-weight:900;line-height:1.1;color:#fff;margin-bottom:12px;}
.hero-headline .cyan{color:var(--primary);text-shadow:var(--glow-cyan);}
.hero-headline .red{color:var(--secondary);text-shadow:var(--glow-red);}
.hero-sub{font-family:'Rajdhani',sans-serif;font-size:1.05rem;color:var(--text-dim);max-width:520px;margin:0 auto 30px;}

.search-wrap{position:relative;max-width:560px;margin:0 auto;}
.search-input{
  width:100%;background:rgba(10,22,40,.92);border:1.5px solid rgba(0,240,255,.25);
  border-radius:50px;padding:16px 62px 16px 26px;font-family:'Exo 2',sans-serif;
  font-size:1rem;color:var(--text);outline:none;transition:border-color .3s,box-shadow .3s;
}
.search-input::placeholder{color:var(--text-dim);}
.search-input:focus{border-color:var(--primary);box-shadow:var(--glow-cyan);}
.search-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);width:44px;height:44px;
  background:linear-gradient(135deg,var(--primary),#0088ff);border:none;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;
}
.search-btn:hover,.search-btn:focus-visible{transform:translateY(-50%) scale(1.12);box-shadow:var(--glow-cyan);}
.search-btn svg{width:18px;height:18px;}
#search-results-msg{max-width:600px;margin:12px auto 0;font-size:.88rem;color:var(--text-dim);min-height:20px;text-align:left;padding-left:26px;}

/* ════ GRID DE JUEGOS ════ */
.games-section{padding:10px 32px 70px;position:relative;z-index:1;animation:fadeUp .8s ease 4.2s both;}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;}
.game-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden;
  cursor:pointer;text-decoration:none;display:block;position:relative;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.game-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,rgba(255,107,157,.06));opacity:0;transition:opacity .4s;pointer-events:none;}
.game-card:hover::after,.game-card:focus-visible::after{opacity:1;}
.game-card:hover,.game-card:focus-visible{transform:translateY(-7px);border-color:rgba(255,107,157,.4);box-shadow:0 14px 44px rgba(255,107,157,.1),0 4px 16px rgba(0,240,255,.08);}
.game-card-img-wrap{position:relative;padding-top:65%;overflow:hidden;background:var(--bg-mid);}
.game-card-img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.game-card:hover .game-card-img-wrap img{transform:scale(1.07);}
.game-card-overlay-name{position:absolute;bottom:0;left:0;right:0;padding:34px 12px 11px;background:linear-gradient(transparent,rgba(0,0,0,.92));font-family:'Rajdhani',sans-serif;font-size:1rem;font-weight:700;color:#fff;letter-spacing:.5px;}
.game-card-body{padding:12px 14px 14px;}
.game-card-desc{font-size:.82rem;color:var(--text-dim);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.game-card-footer{padding:0 14px 14px;display:flex;gap:7px;flex-wrap:wrap;}
.game-tag{font-size:.7rem;font-family:'Rajdhani',sans-serif;letter-spacing:1px;color:var(--primary);background:rgba(0,240,255,.07);border:1px solid rgba(0,240,255,.18);padding:2px 9px;border-radius:20px;}
.no-results{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-dim);font-size:1rem;}
.game-card-skeleton{background:linear-gradient(100deg,var(--bg-card) 30%,#132542 50%,var(--bg-card) 70%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:14px;aspect-ratio:230/300;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

@media (max-width:600px){
  .hero{padding:40px 16px 30px;}
  .hero-headline{font-size:clamp(1.6rem,8vw,2.4rem);}
  /* 16px mínimo: evita el zoom automático de Safari/Chrome en iOS al enfocar el input */
  .search-input{padding:14px 56px 14px 18px;font-size:16px;}
  .games-section{padding:10px 14px 50px;}
  .games-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .game-card-desc{-webkit-line-clamp:2;}
  .game-card-footer{display:none;}
}
@media (min-width:601px) and (max-width:900px){
  .hero{padding:56px 24px 40px;}
  .recommended-section,.games-section{padding-left:20px;padding-right:20px;}
  .games-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}
}
@media (min-width:1400px){
  .games-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
}