@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Nunito:wght@700;800;900&display=swap');
/* SECREWARS /recargas v3 — diseño arcade divertido y profesional.
   Solo se carga en /recargas (layout styles). No toca precios ni estados.
   Principales arriba (5 por línea), demás abajo al abrir un principal,
   buscador en la principal, letras Bungee/Nunito, avatares al costado. */

/* Hero a ancho completo (ya no lleva el catálogo destacado adentro) */
.rx-hero{grid-template-columns:1fr !important;}
.rx-hero{
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
}
.rx-hero .hw-decor{display:none !important;}
.rx-status{background:#22c55e !important; color:#07130a !important; border:none !important; box-shadow:0 4px 16px rgba(34,197,94,.45);}
.rx-status .rx-dot{background:#07130a !important; box-shadow:none !important;}
.rx-title em{
  background:linear-gradient(90deg,#facc15,#fb923c 35%,#f472b6 65%,#22d3ee) !important;
  -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important;
}
.rx-trust li{background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:16px !important; transition:transform .2s ease;}
.rx-trust li:hover{transform:translateY(-2px);}
.rx-ti{background:rgba(250,204,21,.22) !important;}

/* Letras */
.rx-hero, .rx-catalog, .rx-all{font-family:'Nunito', system-ui, sans-serif !important;}
.rx-title{font-family:'Bungee', 'Nunito', sans-serif !important; letter-spacing:0 !important; line-height:1.15 !important;}
.rx-title em{font-family:'Bungee', 'Nunito', sans-serif !important;}
.rx-all-head h2, .rx-cat-head{font-family:'Bungee', 'Nunito', sans-serif !important; letter-spacing:.02em !important;}
.rx-card-txt b, .rx-price{font-family:'Nunito', system-ui, sans-serif !important; font-weight:900 !important;}

/* Tarjetas */
.rx-card{border-radius:20px !important; border:1px solid rgba(255,255,255,.18) !important; box-shadow:0 10px 28px rgba(0,0,0,.35); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;}
.rx-card::after{background:linear-gradient(180deg,rgba(7,9,26,0) 30%,rgba(7,9,26,.55) 62%,rgba(7,9,26,.96) 100%) !important;}
.rx-card:hover,.rx-card:focus-visible{transform:translateY(-6px) rotate(-.4deg) !important; border-color:var(--c1,#a78bfa) !important; box-shadow:0 22px 44px rgba(0,0,0,.5), 0 0 0 2px var(--c1,#a78bfa), 0 0 28px var(--c1,#a78bfa) !important;}
.rx-price{background:#facc15 !important; color:#1a0f1f !important; border:none !important; font-weight:900 !important; box-shadow:0 4px 14px rgba(0,0,0,.45); backdrop-filter:none !important;}
.rx-card-txt b{font-size:18px !important; letter-spacing:-.01em;}
.rx-card-txt small{display:inline-block !important; margin-top:6px; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); color:#fff !important; font-size:12px !important; font-weight:700;}

/* Catálogo de principales */
.rx-catalog{background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:24px !important; margin:18px 0 0;}
.rx-cat-head{color:#fff !important;}
.rx-cat-head>span:last-child{color:#facc15 !important;}
.rx-principals{display:grid; gap:16px;}
.rx-principals .rx-card{aspect-ratio:4/5 !important;}
.rx-principal{cursor:pointer;}
.rx-principal.is-selected{border-color:#facc15 !important; box-shadow:0 22px 44px rgba(0,0,0,.5), 0 0 0 3px #facc15, 0 0 28px rgba(250,204,21,.55) !important; transform:translateY(-6px) !important;}
.rx-demas{display:none;}
.rx-demas.open{display:block; animation:rx-pop .45s ease both;}
.rx-demas-hint{margin:14px 2px 0; font-size:14px; font-weight:800; color:#e9d5ff;}
.rx-demas-hint button{background:#facc15; color:#1a0f1f; border:none; border-radius:999px; padding:6px 14px; font-family:'Nunito', sans-serif; font-weight:900; cursor:pointer;}
.rx-card.rx-mini{border-radius:20px !important;}

/* Buscador en la principal */
.rx-search{width:100%; display:flex; gap:10px; align-items:center; margin:18px 0 0; padding:12px 16px; border-radius:999px; background:rgba(255,255,255,.1); border:2px solid rgba(255,255,255,.22); box-shadow:0 8px 24px rgba(0,0,0,.25);}
.rx-search:focus-within{border-color:#facc15; box-shadow:0 8px 24px rgba(0,0,0,.25), 0 0 0 3px rgba(250,204,21,.35);}
.rx-search input{flex:1; min-width:0; background:transparent; border:none; outline:none; color:#fff; font-family:'Nunito', sans-serif; font-size:16px; font-weight:800;}
.rx-search input::placeholder{color:#c3c7e4;}
.rx-search-count{font-size:13px; font-weight:900; color:#facc15; white-space:nowrap;}
.rx-no-results{display:none; padding:18px; border-radius:16px; background:rgba(255,255,255,.07); border:1px dashed rgba(255,255,255,.25); text-align:center; font-weight:800;}
.rx-no-results.show{display:block;}

/* Avatares al costado */
.rx-layout{display:grid; grid-template-columns:minmax(0,1fr) 92px; gap:18px; align-items:start;}
.rx-avatars{position:sticky; top:16px; display:flex; flex-direction:column; gap:10px; padding:10px; border-radius:20px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);}
.rx-avatars-title{font-family:'Bungee', sans-serif; font-size:11px; text-align:center; color:#facc15; letter-spacing:.05em;}
.rx-avatar{width:64px; height:64px; padding:0; border-radius:50%; overflow:hidden; border:3px solid rgba(255,255,255,.25); background:#0b1030; cursor:pointer; transition:transform .2s ease, border-color .2s ease; flex:0 0 auto;}
.rx-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.rx-avatar:hover{transform:scale(1.1) rotate(-3deg);}
.rx-avatar.is-selected{border-color:#facc15; box-shadow:0 0 0 3px rgba(250,204,21,.4);}
@media (max-width:900px){
  .rx-layout{grid-template-columns:1fr;}
  .rx-avatars{position:static; flex-direction:row; overflow-x:auto; padding:10px;}
  .rx-avatars-title{display:none;}
}

/* 5 juegos por línea, para que las tarjetas sean más grandes */
@media (min-width:1100px){
  .rx-all-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
  .rx-principals{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
}
@media (min-width:700px) and (max-width:1099px){
  .rx-all-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
  .rx-principals{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media (max-width:699px){
  .rx-all-grid, .rx-principals{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
/* Roblox usa arte apaisado: con contain se ve entera, sin recorte. */
.rx-card.rx-roblox.has-card-bg{background-size:contain !important; background-repeat:no-repeat !important; background-color:#0b1030 !important;}

/* Entrada escalonada */
@keyframes rx-pop{from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;}}
.rx-all-grid .rx-card{animation:rx-pop .45s cubic-bezier(.2,.9,.3,1.25) both;}
.rx-all-grid .rx-card:nth-child(2){animation-delay:.04s;}
.rx-all-grid .rx-card:nth-child(3){animation-delay:.08s;}
.rx-all-grid .rx-card:nth-child(4){animation-delay:.12s;}
.rx-all-grid .rx-card:nth-child(5){animation-delay:.16s;}
.rx-all-grid .rx-card:nth-child(6){animation-delay:.20s;}
@media (prefers-reduced-motion:reduce){
  .rx-card,.rx-trust li{transition:none !important;}
  .rx-all-grid .rx-card{animation:none !important;}
  .rx-card:hover{transform:none !important;}
}
@media (max-width:560px){
  .rx-hero{padding:22px 16px !important; border-radius:20px !important;}
  .rx-card-txt b{font-size:15px !important;}
}