/* Solaryx Store */
.st{--rc:#9b98a6}
.r-basica,.r-comun{--rc:#a19eac}
.r-rara{--rc:#5fb2ff}
.r-evolutivo{--rc:#6fd6a8}
.r-epica{--rc:#b78cff}
.r-legendaria{--rc:#ffc15e}
.r-mitica{--rc:#ff5c8a}

/* Cabecera */
.st-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:12px 18px;border:1px solid #4c2e20;border-radius:var(--radius);background:radial-gradient(ellipse at 85% 0%,#ffc15e1a,transparent 55%),radial-gradient(ellipse at 0% 100%,#ff782f14,transparent 50%),#141216}
.st-head-text{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;min-width:0}
.st-head h1{font-size:30px;line-height:1}
.st-head p{font-size:12px}
.st-head-side{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.st-wallet,.st-collection{display:inline-flex;align-items:baseline;gap:6px;padding:7px 14px;border-radius:22px;border:1px solid #5a4330;background:#1d1713;white-space:nowrap}
.st-wallet i{font-style:normal;font-size:14px;color:var(--gold)}
.st-wallet strong{font:700 22px/1 Rajdhani,Arial,sans-serif;color:var(--gold)}
.st-wallet span,.st-collection span{font-size:11px;color:#bfae9c}
.st-collection{border-color:var(--line);background:#16161b;color:var(--text)}
.st-collection strong{font:700 22px/1 Rajdhani,Arial,sans-serif;color:#fff}
.st-collection:hover{border-color:#6c4d38;color:var(--text)}
.st-collection:hover span{color:var(--fire)}

/* Destacados: una sola fila baja */
.st-featured{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);grid-auto-rows:150px;gap:12px;margin-top:12px}
.st-feat{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:#121116;transition:transform .2s,border-color .2s,box-shadow .2s}
.st-feat:hover{transform:translateY(-2px);border-color:#7a5a3e;box-shadow:0 14px 34px #0009}
.st-feat-big{border-color:#6c4d2e;box-shadow:0 0 0 1px #ffc15e1a}
.st-feat-art{position:absolute;inset:0;height:auto;border:0}
.st-feat:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#0b0a0df2 0%,#0b0a0d8c 45%,transparent 75%)}
.st-feat-text{position:absolute;z-index:2;left:18px;right:18px;bottom:14px}
.st-feat-kicker{display:block;font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--gold)}
.st-feat-big h2{font-size:30px;line-height:1;margin:4px 0 4px;text-shadow:0 4px 20px #000}
.st-feat-big p{max-width:440px;font-size:12px;color:#ddd3cf;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-feat-small h3{font-size:18px;line-height:1.1;margin:3px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-feat-price{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:700 18px Rajdhani,Arial,sans-serif;color:var(--gold)}
.st-feat-price i{font-style:normal;font-size:13px}
.st-feat-price span{font:700 11.5px Noto,Arial,sans-serif;color:#1d0f07;background:var(--fire);padding:6px 12px;border-radius:20px;margin-left:8px}
.st-feat-small .st-feat-price{margin-top:0;font-size:16px}
.st-feat-small.cat-marco:after{background:linear-gradient(90deg,transparent 28%,#0b0a0de0 60%)}
.st-feat-small.cat-marco .st-frame-stage{right:auto;width:48%}
.st-feat-small.cat-marco .arena-avatar{--av-size:118px}
.st-feat-small.cat-marco .st-feat-text{left:48%;right:14px;top:50%;bottom:auto;transform:translateY(-50%)}
.st-feat-small.cat-placa .np-stage{align-items:flex-start;padding:16px 12px 0;background:radial-gradient(ellipse at 50% 30%,#2c2532,#111015)}
.st-feat-small.cat-placa .np-stage .arena-avatar{--av-size:46px}

/* Barra de herramientas fija */
.st-toolbar{position:sticky;top:0;z-index:30;display:flex;flex-direction:column;gap:10px;margin:18px 0 0;padding:12px 0;background:linear-gradient(#101013f7,#101013ef);border-bottom:1px solid var(--line)}
.st-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.st-tabs::-webkit-scrollbar{display:none}
.st-tabs button{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#15151a;color:#c6c1cf;border-radius:22px;padding:8px 14px;font-size:12.5px;transition:all .15s}
.st-tabs button span{font-size:10px;font-weight:700;color:#8f8a99;background:#24222a;border-radius:10px;padding:1px 7px}
.st-tabs button:hover{border-color:#5b4537;color:#fff}
.st-tabs button[aria-selected=true]{background:#ff782f1f;border-color:#a3542d;color:var(--fire)}
.st-tabs button[aria-selected=true] span{background:#ff782f33;color:#ffb07c}
.st-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.st-search{flex:1 1 260px;display:flex;align-items:center;gap:8px;background:#111115;border:1px solid #3a3642;border-radius:10px;padding:0 12px}
.st-search:focus-within{border-color:#8a4b2b;box-shadow:0 0 0 3px #ff782f14}
.st-search span{font-size:17px;color:var(--muted)}
.st-search input{flex:1;min-width:0;background:none;border:0;color:var(--text);padding:10px 0;font-size:13px}
.st-search input:focus-visible{outline:none}
.st-tools select{background:#111115;color:var(--text);border:1px solid #3a3642;border-radius:10px;padding:10px 12px;font-size:12.5px}
.st-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#d0cbd8;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#15151a;cursor:pointer;white-space:nowrap}
.st-toggle:has(input:checked){border-color:#a3542d;background:#ff782f17;color:#ffd2b3}
.st-toggle input{accent-color:var(--fire)}
.st-tools .motion-toggle{padding:10px 12px;border-radius:10px}

/* Secciones y cuadrícula */
.st-section{margin-top:26px}
.st-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px}
.st-section-head h2{font-size:26px}
.st-section-head p{font-size:12px;margin-top:4px}
.st-more{display:none;border:1px solid var(--line);background:#15151a;color:#e0dae6;border-radius:20px;padding:7px 14px;font-size:12px;white-space:nowrap}
.st-more:hover{border-color:#a3542d;color:var(--fire)}
.st[data-view=home] .st-more{display:inline-flex}
.st:not([data-view=home]) [data-featured]{display:none}
.st[data-view=home] .st-grid>.st-card:nth-child(n+9){display:none}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}

/* Tarjeta */
.st-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:14px;border:1px solid var(--line);background:#15151a;transition:transform .2s,border-color .2s,box-shadow .2s}
.st-card:before{content:"";position:absolute;inset:0 0 auto;height:2px;z-index:5;background:linear-gradient(90deg,transparent,var(--rc),transparent);opacity:.9}
.st-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--rc) 50%,var(--line));box-shadow:0 14px 34px #0008,0 0 24px color-mix(in srgb,var(--rc) 14%,transparent)}
.st-card[hidden]{display:none}
/* Cards outside the screen are not styled, laid out or painted until they get close (same look, far less work). */
.st-card{content-visibility:auto;contain-intrinsic-size:auto 300px}
.st-art{height:186px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--rc) 13%,#26222b),#111015 75%)}
.st-card.cat-placa .st-art{height:134px}
.st-frame-stage{position:absolute;inset:0;display:grid;place-items:center}
.st-art .st-frame-stage .arena-avatar{--av-size:152px}
.st-art .np-stage{padding:0 12px}
.st-art .np-stage .arena-avatar{--av-size:54px}
/* Títulos y roles: el texto se ajusta al ancho de la tarjeta según el largo del nombre (hasta 13 letras). */
.st-art .title-plate,.st-stage-art .title-plate{container-type:inline-size}
.st-art .title-row{gap:8px;max-width:calc(100% - 30px)}
.st-art .title-orn{width:16px}
.st-art .title-kicker{letter-spacing:2px}
.st-art .title-plate .title-text{font-size:clamp(13px,calc((100cqi - 84px) / (var(--len) * .64)),28px)}
.st-type{position:absolute;top:10px;left:10px;z-index:4;display:inline-flex;align-items:center;gap:5px;font-size:8.5px;font-weight:700;letter-spacing:1px;padding:4px 7px;border-radius:5px;background:#0d0c10d9;color:#ddd5c8}
.st-type.is-live:before{content:"";width:5px;height:5px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 6px #ff3b3b;animation:av-twinkle 1.4s ease-in-out infinite}
.st-flag{position:absolute;top:10px;right:10px;z-index:4;font-size:8.5px;font-weight:800;letter-spacing:1px;padding:4px 8px;border-radius:5px}
.st-flag.own{background:#173226;color:#a5e8c4;border:1px solid #2f5a44}
.st-flag.eq{background:var(--fire);color:#1d0f07}
.st-flag.soon{background:#2a2633;color:#d6cfe1;border:1px solid #433c4f}
.st-body{display:flex;flex-direction:column;gap:2px;flex:1;padding:12px 14px 13px}
.st-rarity{font-size:9.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--rc)}
.st-body h3{font-size:19px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:9px;min-height:32px}
.st-price{font:700 18px/1 Rajdhani,Arial,sans-serif;color:var(--gold);white-space:nowrap}
.st-price i{font-style:normal;font-size:13px}
.st-short{font-size:10px;color:#e8a294;white-space:nowrap}
.st-owned{font-size:11.5px;font-weight:700;color:var(--green)}
.st-cta{margin-left:auto;font-size:11px;font-weight:700;color:#8f8a99;transition:color .2s,transform .2s}
.st-card:hover .st-cta{color:var(--fire);transform:translateX(2px)}
.st-card.is-soon .st-art{filter:saturate(.6)}
.st-hit{position:absolute;inset:0;z-index:6;border:0;padding:0;background:transparent;cursor:pointer;border-radius:inherit}
.st-hit:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
.st-empty{text-align:center;padding:50px 20px;margin-top:20px;border:1px dashed #3b3741;border-radius:14px}
.st-empty strong{display:block;margin-bottom:6px}.st-empty p{font-size:12px;margin-bottom:14px}
.st-fine{display:block;font-size:10.5px;color:var(--muted);margin-top:26px}
.st .plate-credits{margin-top:8px}

/* Animaciones fuera de pantalla en pausa (96 artículos animados a la vez pesan) */
.st-card.frame-offscreen .np *,.st-card.frame-offscreen .np-name::before,.st-card.frame-offscreen .np-name::after,.st-card.frame-offscreen .np::after,.st-card.frame-offscreen .bnx-l,.st-card.frame-offscreen .bnx-fx,.st-card.frame-offscreen .bnr i,.st-card.frame-offscreen .pfx i,.st-card.frame-offscreen .title-text,.st-card.frame-offscreen .title-sparks{animation-play-state:paused!important}

/* Ficha del artículo */
.st-modal{width:min(940px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;overflow:auto;border:1px solid #5a4535;border-radius:18px;background:#17171c;box-shadow:0 40px 110px #000e}
.st-modal::backdrop{background:#07060acc;backdrop-filter:blur(8px)}
.st-modal[open]{animation:stPop .22s ease-out}
@keyframes stPop{from{opacity:0;transform:translateY(14px) scale(.985)}}
@keyframes stSheet{from{opacity:.4;transform:translateY(60px)}}
.st-modal-close{position:absolute;top:12px;right:12px;z-index:8;width:36px;height:36px;border-radius:50%;border:1px solid #ffffff1a;background:#0d0c10c9;color:#fff;font-size:22px;line-height:1}
.st-modal-close:hover{background:#2a2228}
.st-modal-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.st-stage{display:flex;flex-direction:column;gap:12px;padding:18px;background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--rc) 20%,#221d26),#0f0e12 78%);border-right:1px solid var(--line)}
.st-stage-art{height:360px;border-radius:14px;border:1px solid #ffffff12;background:radial-gradient(ellipse at 50% 45%,#2b2530,#111015 75%)}
.st-stage[data-backdrop=light] .st-stage-art{background:radial-gradient(ellipse,#fff,#ddd6e2)}
.st-stage[data-backdrop=light] .st-stage-art .np-stage,.st-stage[data-backdrop=light] .st-stage-art .effect-stage{background:radial-gradient(ellipse,#fff,#ddd6e2)}
.st-stage[data-backdrop=light] .av-face{background:linear-gradient(140deg,#4c455b,#272231)}
.st-stage-art .st-frame-stage .arena-avatar{--av-size:270px}
.st-stage-art .np-stage{padding:0 22px}
.st-stage-art .np-stage .arena-avatar{--av-size:74px}
.st-stage-art .effect-stage .arena-avatar{--av-size:160px}
.st-stage-art .title-plate .title-text{font-size:clamp(18px,calc((100cqi - 120px) / (var(--len) * .64)),44px)}
.st-stage-controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.st-stage-controls button{border:1px solid #48404f;background:#15141a;color:#cfc7d9;border-radius:20px;padding:7px 13px;font-size:11.5px}
.st-stage-controls button[aria-pressed=true]{border-color:#a3542d;color:#ffd2b3;background:#ff782f17}
.st-modal-info{display:flex;flex-direction:column;gap:12px;padding:30px 26px 24px}
.st-modal-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.st-modal-tags .st-rarity{padding:4px 9px;border-radius:6px;border:1px solid color-mix(in srgb,var(--rc) 45%,transparent);background:color-mix(in srgb,var(--rc) 12%,transparent)}
.st-modal-cat{font-size:10px;letter-spacing:1.2px;font-weight:700;color:var(--muted);text-transform:uppercase}
.st-modal-info h2{font-size:36px;line-height:1.05;padding-right:30px}
.st-modal-desc{font-size:13.5px;color:#cfc8d2;line-height:1.65}
.st-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0}
.st-facts div{padding:12px 14px;border-radius:12px;background:#111115;border:1px solid var(--line)}
.st-facts dt{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.st-facts dd{margin:4px 0 0;font:700 24px/1 Rajdhani,Arial,sans-serif;color:#fff}
.st-facts dd i{font-style:normal;font-size:16px;color:var(--gold)}
.st-facts dd.neg{color:#ff9b87}
.st-actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.st-modal-info .st-fine{margin-top:0}
.st-buy{display:flex;flex-direction:column;gap:8px}
.st-buy .button{padding:15px 20px;font-size:14px}
.st-buy .button.armed{background:#ffd27a;border-color:#ffd27a;color:#1d0f07;box-shadow:0 0 0 4px #ffc15e33}
.st-hint{font-size:11px;color:#ffd9b0;text-align:center}
.st-state{margin:0;font-size:12.5px;line-height:1.55;padding:12px 14px;border-radius:12px;background:#2a1f1a;border:1px solid #5a3f2e;color:#f0d9c8}
.st-state.ok{background:#15251d;border-color:#375943;color:#cfe9da}
.st-state a{color:var(--fire);font-weight:700}
form[data-equip-form]{display:flex;flex-direction:column;gap:10px}
form[data-equip-form][hidden]{display:none}

@media(max-width:1150px){.st-featured{grid-auto-rows:140px}.st-feat-big h2{font-size:26px}.st-head p{display:none}}
@media(max-width:820px){
    /* Destacados en carrusel horizontal: no empujan el catálogo hacia abajo */
    .st-featured{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;grid-auto-rows:140px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
    .st-featured::-webkit-scrollbar{display:none}
    .st-feat{scroll-snap-align:start}
    .st-feat:hover{transform:none}
    .st-toolbar{position:static}
    .st-modal-grid{grid-template-columns:1fr}
    .st-stage{border-right:0;border-bottom:1px solid var(--line);padding:12px 12px 10px;gap:8px}
    .st-stage-art{height:clamp(150px,30dvh,230px)}
    .st-stage-art .st-frame-stage .arena-avatar{--av-size:clamp(130px,26dvh,190px)}
    .st-stage-art .np-stage{padding:0 12px}.st-stage-art .np-stage .arena-avatar{--av-size:58px}
    .st-stage-controls button{padding:5px 11px;font-size:11px}
    /* El botón de compra queda siempre visible al pie de la ficha. */
    .st-actions{position:sticky;bottom:0;z-index:3;margin:0 -18px;padding:12px 18px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(#17171c00,#17171c 22%);border-top:1px solid #ffffff0d}
    .st-facts{gap:8px}.st-facts div{padding:10px 12px}.st-facts dd{font-size:20px}
    .st-modal{width:100%;margin:auto 0 0;border-radius:18px 18px 0 0;max-height:94dvh}
    .st-modal[open]{animation:stSheet .25s ease-out}
    .st-modal-info{padding:16px 18px 0;gap:10px}
    .st-modal-info h2{font-size:26px}
    .st-modal-desc{font-size:13px}
}
@media(max-width:600px){
    .st-head{padding:12px 14px}
    .st-head h1{font-size:26px}
    .st-feat-big p{display:none}
    .st-card.cat-placa .st-art{height:118px}
    .st-search{flex-basis:100%}
    .st-tools select{flex:1 1 100%}
    .st-toggle{flex:1;justify-content:center;padding:8px 6px;font-size:11.5px}
    .st-tools .motion-toggle{display:none}
    .st-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .st-card.cat-placa,.st-card.cat-banner{grid-column:span 2}
    .st-art{height:140px}
    .st-art .st-frame-stage .arena-avatar{--av-size:112px}
    .st-body{padding:10px 11px 11px}.st-body h3{font-size:16px}
    .st-price{font-size:16px}.st-cta{display:none}
    .st-section-head h2{font-size:22px}
}
.st-admin{border-color:#6c432e;background:#2a1a12}.st-admin strong{color:var(--gold)}