/* Fortnite eShop Oficial v3 - estilos unificados */
.fsp-root{font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; padding:24px; max-width:1200px; margin:20px auto; border-radius:14px; position:relative;}
.fsp-root .fsp-header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px;}
.fsp-title{color:#ffffff; font-size:26px; margin:0 0 4px 0; letter-spacing:0.5px;}
.fsp-sub{color:rgba(255,255,255,0.65); font-size:13px;}

/* fondo degradado y efectos de luz */
.fsp-root{background: radial-gradient(1200px 400px at 10% 10%, rgba(7,22,58,0.6), transparent 10%), linear-gradient(120deg,#071534 0%, #02102a 60%); box-shadow: 0 20px 60px rgba(2,6,23,0.7);}

/* controls */
.fsp-controls{display:flex; gap:8px; align-items:center;}
#fsp-search{padding:8px 10px; border-radius:999px; border:none; min-width:180px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);}
#fsp-filter{padding:8px 10px; border-radius:999px; border:none; background:rgba(255,255,255,0.03); color:#fff;}

/* items grid */
.fsp-items{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; align-items:start;}

/* tarjeta */
.fsp-card{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border-radius:14px; padding:12px; box-shadow: 0 8px 24px rgba(2,6,23,0.6); border:1px solid rgba(255,255,255,0.04); overflow:hidden; position:relative; transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;}
.fsp-card:hover{transform:translateY(-8px) scale(1.02); box-shadow: 0 18px 40px rgba(2,6,23,0.75);}

/* imagen con overlay y rareza */
.fsp-card .image{height:180px; border-radius:10px; background-size:cover; background-position:center; position:relative; margin-bottom:12px; overflow:hidden;}
.fsp-card .image::after{content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.4) 100%);}

/* badge "Termina hoy" */
.fsp-tag{position:absolute; right:12px; top:12px; background:linear-gradient(180deg,#ff5b5b,#e43c3c); color:#fff; padding:6px 10px; border-radius:12px; font-weight:800; font-size:12px; text-transform:uppercase; box-shadow:0 4px 12px rgba(0,0,0,0.4);}

/* info */
.fsp-card h3{margin:0 0 6px 0; color:var(--fsp-accent); font-size:16px;}
.fsp-price{font-weight:800; font-size:15px; color:#fff; display:flex; gap:8px; align-items:center;}
.fsp-vbucks{color:var(--fsp-neon); font-weight:900; font-size:13px;}

/* buttons */
.fsp-btn{display:inline-block; padding:10px 14px; border-radius:999px; text-decoration:none; background:linear-gradient(180deg,var(--fsp-button),#0562a6); color:#fff; font-weight:800; box-shadow:0 10px 24px rgba(2,6,23,0.6); border:none; cursor:pointer;}

/* modal */
.fsp-modal{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); max-width:980px; width:90%; background:linear-gradient(180deg, rgba(10,16,28,0.98), rgba(6,10,18,0.98)); border-radius:14px; box-shadow:0 30px 80px rgba(2,6,23,0.8); z-index:99999; padding:18px; color:#fff; display:none;}
.fsp-modal .close{position:absolute; right:14px; top:10px; cursor:pointer; font-weight:800;}

/* cart floating */
.fsp-cart-btn{position:fixed; right:20px; bottom:24px; z-index:99998; padding:12px 16px; border-radius:999px; background:linear-gradient(180deg,#0db1ff,#006fb8); color:#fff; font-weight:800; box-shadow:0 16px 40px rgba(2,6,23,0.6); border:none; cursor:pointer;}
#fsp-cart-count{background:#ff3b3b; color:#fff; border-radius:999px; padding:2px 8px; margin-left:8px; font-weight:900;}

/* responsive */
@media (max-width:600px){
  .fsp-items{grid-template-columns:1fr;}
  .fsp-card .image{height:140px;}
  .fsp-controls{flex-direction:column; align-items:stretch;}
}

/* CSS variables default */
:root{ --fsp-accent:#00ffd5; --fsp-neon:#7cfffb; --fsp-button:#18a0ff; --fsp-bg1:#02040a; --fsp-bg2:#071534; }