/* ==========================================================================
   VELVET JUEGOS — portal (mobile-first, sin dependencias)
   ========================================================================== */
:root{
  --cream:#FCF4E8; --cream2:#FBEBDA; --ink:#3A2A2E; --muted:#8c7d76;
  --teal:#0F4C44; --teal2:#2C7C7D; --pink:#EE7DA0; --gold:#E0A92E; --sun:#F2C84B;
  --purple:#8455A6; --blue:#48A6C7; --red:#E5544B; --orange:#F5972B; --green:#5FAE5F;
  --card:#ffffff;
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --fd:"Fraunces",serif; --fb:"Nunito",system-ui,sans-serif; --fs:"Dancing Script",cursive;
  --r:22px; --shadow:0 18px 34px -22px rgba(80,50,30,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--fb); color:var(--ink); background:var(--cream);
  background-image:
    radial-gradient(1200px 500px at 80% -8%, #FBD9E6 0%, transparent 60%),
    radial-gradient(900px 450px at -5% 0%, #DFF0EC 0%, transparent 55%),
    linear-gradient(180deg,#FDF6EC 0%, #FCF1E5 100%);
  background-attachment:fixed; min-height:100vh; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit}
img{display:block; max-width:100%}
.wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 clamp(1rem,4vw,2rem)}

/* ---------- Topbar ---------- */
.top{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:.7rem clamp(1rem,4vw,2rem); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  background:rgba(253,246,236,.72); border-bottom:1px solid rgba(120,80,40,.08)}
.brand{display:flex; align-items:baseline; gap:.4rem; text-decoration:none}
.brand__v{font-family:var(--fs); font-weight:700; font-size:1.7rem; color:var(--gold); line-height:1}
.brand__j{font-family:var(--fd); font-weight:700; font-size:1.05rem; color:var(--teal); letter-spacing:.02em}
.top__back{font-weight:700; font-size:.86rem; color:var(--teal2); text-decoration:none; background:#fff;
  padding:.5em 1em; border-radius:100px; box-shadow:0 8px 18px -12px rgba(0,0,0,.3); transition:transform .25s var(--spring)}
.top__back:active{transform:scale(.94)}

/* ---------- Hero ---------- */
.hero{position:relative; text-align:center; padding:clamp(2.2rem,7vw,4rem) 0 clamp(1rem,3vw,2rem); overflow:hidden}
.hero__badge{display:inline-flex; align-items:center; gap:.4em; font-weight:800; font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal); background:#fff; padding:.5em 1em; border-radius:100px;
  box-shadow:var(--shadow); margin-bottom:1rem}
.hero__badge b{color:var(--pink)}
.hero h1{font-family:var(--fd); font-weight:700; color:var(--teal); line-height:1; margin:0;
  font-size:clamp(2.6rem,10vw,5rem); letter-spacing:-.02em}
.hero h1 em{font-style:normal; color:var(--pink)}
.hero__sub{font-weight:600; color:var(--muted); font-size:clamp(1rem,2.4vw,1.25rem); margin:.9rem auto 0; max-width:30ch}
.hero__treat{position:absolute; width:clamp(56px,12vw,120px); pointer-events:none; z-index:-1; filter:drop-shadow(0 12px 16px rgba(0,0,0,.22))}
.t1{top:8%; left:4%; animation:float 6s ease-in-out infinite}
.t2{top:14%; right:5%; width:clamp(60px,13vw,130px); animation:float 7s ease-in-out infinite reverse}
.t3{bottom:4%; left:9%; width:clamp(46px,9vw,90px); animation:float 5.5s ease-in-out infinite .6s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(4deg)}}

/* ---------- Controls (search + chips) ---------- */
.controls{position:sticky; top:56px; z-index:40; padding:.7rem 0 .5rem; margin-top:.5rem;
  background:linear-gradient(180deg, rgba(253,246,236,.96) 70%, rgba(253,246,236,0))}
.search{display:flex; align-items:center; gap:.6rem; background:#fff; border-radius:100px; padding:.7em 1.1em;
  box-shadow:var(--shadow); max-width:520px; margin:0 auto}
.search svg{flex:none; color:var(--muted)}
.search input{border:0; outline:0; flex:1; font-family:var(--fb); font-weight:600; font-size:1rem; color:var(--ink); background:none; min-width:0}
.search input::placeholder{color:#bcae9f}
.chips{display:flex; gap:.5rem; overflow-x:auto; padding:.8rem .2rem .3rem; scrollbar-width:none; -ms-overflow-style:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; border:0; cursor:pointer; font-family:var(--fb); font-weight:800; font-size:.85rem; color:var(--teal);
  background:#fff; padding:.5em 1em; border-radius:100px; box-shadow:0 8px 16px -12px rgba(0,0,0,.3);
  transition:transform .2s var(--spring), background .2s, color .2s}
.chip:active{transform:scale(.94)}
.chip.is-active{background:var(--teal); color:#fff}

/* ---------- Grid + cards ---------- */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.8rem,2.5vw,1.3rem); padding:.6rem 0 3rem}
@media(min-width:560px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:900px){ .grid{grid-template-columns:repeat(4,1fr)} }

.game{position:relative; display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:var(--card); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .3s var(--spring), box-shadow .3s ease; will-change:transform}
.game:active{transform:scale(.96)}
@media(hover:hover){ .game:hover{transform:translateY(-6px) rotate(-1deg); box-shadow:0 26px 40px -22px rgba(80,50,30,.5)} }
.game__art{position:relative; aspect-ratio:1/.82; display:grid; place-items:center; overflow:hidden;
  background:var(--c, var(--teal2))}
.game__art::after{content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 25% 20%, rgba(255,255,255,.35), transparent 45%),
  repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 8px, transparent 8px 16px)}
.game__art img{width:64%; height:64%; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(0,0,0,.28));
  transition:transform .45s var(--spring); z-index:1}
@media(hover:hover){ .game:hover .game__art img{transform:scale(1.1) rotate(4deg)} }
.game__art .emoji-ico{font-size:clamp(2.4rem,10vw,3.4rem); z-index:1}
.game__body{padding:.7rem .8rem .9rem}
.game__name{font-family:var(--fd); font-weight:700; font-size:1rem; line-height:1.1; color:var(--teal)}
.game__cat{display:inline-block; margin-top:.3rem; font-weight:800; font-size:.66rem; text-transform:uppercase;
  letter-spacing:.08em; color:#fff; background:var(--c,var(--teal2)); padding:.28em .7em; border-radius:100px}
.game__badge{position:absolute; top:.6rem; right:.6rem; z-index:2; font-weight:800; font-size:.64rem; letter-spacing:.03em;
  padding:.32em .7em; border-radius:100px; background:#fff; color:var(--teal); box-shadow:0 6px 12px -6px rgba(0,0,0,.4)}
.game__badge--soon{background:rgba(58,42,46,.72); color:#fff}
.game.is-soon{opacity:.72}
.game.is-soon .game__art{filter:grayscale(.35)}

/* entrada escalonada */
@media (prefers-reduced-motion:no-preference){
  .game{opacity:0; transform:translateY(24px) scale(.9)}
  .game.in{opacity:1; transform:none; transition:opacity .5s ease, transform .7s var(--spring)}
}

.empty{grid-column:1/-1; text-align:center; color:var(--muted); font-weight:700; padding:2.5rem 0}

/* ---------- Footer ---------- */
.foot{text-align:center; padding:2.5rem 1rem 3rem; color:var(--muted); font-weight:600; font-size:.9rem}
.foot a{color:var(--teal2); font-weight:800; text-decoration:none}
.foot .mark{font-family:var(--fs); color:var(--gold); font-size:1.5rem; display:block; margin-bottom:.3rem}

@media(prefers-reduced-motion:reduce){ .hero__treat{animation:none} }