.gtabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.gtabs .ttab { flex: 1 1 6rem; }

.gtab--event:not(.is-on) { background: var(--color-web-paper); color: var(--color-web-violet-deep); box-shadow: inset 0 0 0 .16rem var(--color-web-violet-deep); }
@media (orientation: landscape) and (min-width: 56rem) {
  .gacha > .gtabs, .gacha > .bnr { grid-column: 1 / -1; }
}


.sty, .rar--comun, .rar--raro, .rar--epico, .rar--legendario, .rar--mitico { --rc: var(--color-web-ink3); }
.sty--raro, .rar--raro { --rc: var(--color-web-violet); }
.sty--epico, .rar--epico { --rc: var(--color-web-pink); }
.sty--legendario, .rar--legendario { --rc: var(--color-web-gold); }
.sty--mitico, .rar--mitico { --rc: var(--color-web-red); } 
.rar--comun, .rar--raro, .rar--epico, .rar--legendario, .rar--mitico { padding: 0 .5rem; background: var(--rc); color: var(--color-web-paper); font-size: .75rem; font-weight: 900; }
.sty { display: inline-grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: radial-gradient(circle, var(--color-web-paper) 0 38%, var(--rc) 40% 62%, var(--color-web-mist) 64%); color: var(--color-web-ink); font-weight: 900; }
.sty--finishers { border-radius: .6rem; }


.bnr__text { display: grid; gap: .4rem; }
.bnr .scard__tag { position: static; justify-self: start; }
.bnr__until { justify-self: start; padding: .1rem .6rem; background: var(--color-web-ink); color: var(--color-web-paper); font-size: .875rem; font-weight: 800; }

:root .bnr.has-img { background: linear-gradient(90deg, var(--color-web-glass-dark) 0 38%, transparent 72%), var(--img) right center / cover no-repeat, var(--color-web-ink); }
.bnr--event { background: linear-gradient(135deg, var(--color-web-violet-deep), var(--color-web-ink)); color: var(--color-web-paper); }
.bnr--event .sub { color: var(--color-web-mist2); }


.bpull__pity { display: grid; gap: .2rem; font-size: .875rem; font-weight: 800; }
.bpull__acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.bpull__price { display: inline-flex; align-items: center; gap: .3rem; }


.bcol__shards { font-size: 1.1rem; }
.bcol__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .35rem 0; border-top: .0625rem solid var(--color-web-line); }
.bcol__row:not(.is-owned) .sty { filter: grayscale(.8); opacity: .6; }
.bcol__row.is-on { background: var(--color-web-blue-pale); }
.bcol__txt { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; min-width: 0; }
.bcol__b { padding: .35rem .8rem; border: 0; background: var(--color-web-mist2); color: var(--color-web-ink); font-weight: 800; font-size: .875rem; }
.bcol__b.is-go { background: var(--color-web-ink); color: var(--color-web-paper); }
.bcol__b:disabled { opacity: .45; }
.bcol__b.is-only { background: none; color: var(--color-web-muted); font-weight: 700; } 
.bcol__more { margin-top: .75rem; }


.bhist__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; padding: .3rem 0; border-top: .0625rem solid var(--color-web-line); }
.bhist__pic.ipic, .bhist__pic.sty { width: 2.2rem; height: 2.2rem; }



.bev__candies { display: flex; align-items: center; gap: .5rem; }
.bev__candies b { font-size: 2rem; font-weight: 900; line-height: 1; }
.bev__candy { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--color-web-lime), var(--color-web-gold-dark)); box-shadow: 0 0 0 .2rem var(--color-web-violet-deep), 0 0 0 .32rem var(--color-web-lime); }
.bev__row { display: flex; justify-content: space-between; gap: .6rem; padding: .25rem 0; border-top: .0625rem solid var(--color-web-line); }
.bev__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .5rem 0; border-top: .0625rem solid var(--color-web-line); }
.bev__item .eball, .bev__item .sty { width: 3rem; height: 3rem; }
.bev__txt { display: grid; gap: .1rem; min-width: 0; }


.stgwrap { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: var(--color-web-ink); }
.stgwrap__in { position: absolute; inset: 0; }
.stgwrap__in canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.stgwrap__in.is-loading canvas, .stgwrap__in.is-off canvas { visibility: hidden; }

.stgwrap.has-room { overflow: visible; }
.stgwrap.has-room > .stgwrap__in canvas { inset: calc((1 - var(--room)) * 50%); width: calc(var(--room) * 100%); height: calc(var(--room) * 100%); pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, var(--color-web-ink) 62%, transparent); mask-image: radial-gradient(closest-side, var(--color-web-ink) 62%, transparent); }
.bnr .bnr__hero { position: relative; z-index: 1; }
.bnr .bnr__text, .bnr .bnr__side { position: relative; z-index: 2; }
.stgwrap:has(> .stgwrap__in.stg:not(.is-loading):not(.is-off)) > .stgwrap__chip { visibility: hidden; }
.bprev { justify-items: center; text-align: center; }
.bprev__stage { width: min(100%, 26rem); border-radius: 1rem; }
.bcol__see { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.bcol__play { position: absolute; right: -.2rem; bottom: -.2rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--color-web-ink); box-shadow: 0 0 0 .12rem var(--color-web-paper); }
.bcol__play::after { content: ""; position: absolute; left: .36rem; top: .27rem; border-left: .38rem solid var(--color-web-paper); border-top: .23rem solid transparent; border-bottom: .23rem solid transparent; }


@media (orientation: landscape) and (min-width: 56rem) {
  .gacha .bnr.has-feat { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.5fr); align-items: center; }
}
.bnr__text .rar, .bnr__tier { justify-self: start; }
.bnr__tier { width: 2.2rem; height: 2.2rem; font-size: 1rem; }
.bnr__hero { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: 15rem; }
.bnr__stage { width: 19rem; max-width: 100%; padding: 0; border: 0; border-radius: 1.2rem; cursor: pointer; }
.bnr__stage.stgwrap { background: none; } 
.bnr__stage--finishers { aspect-ratio: 1; display: grid; place-items: center; background: none; }
.bart { image-rendering: pixelated; object-fit: contain; }

.bart-fx { --rc: var(--color-web-gold); position: relative; display: grid; place-items: center; isolation: isolate; }
.bart-fx--epico { --rc: var(--color-web-pink); } .bart-fx--raro { --rc: var(--color-web-violet-light); } .bart-fx--comun { --rc: var(--color-web-mist2); }
.bart-fx--mitico { --rc: var(--color-web-red); }
.bart-fx > .bart { position: relative; z-index: 1; width: 100%; height: 100%; filter: drop-shadow(0 0 .6rem var(--rc)); }
.bart-fx__glow { position: absolute; inset: 12%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, var(--rc), transparent 70%); opacity: .45; }
.bart-fx__ring { position: absolute; inset: 20%; z-index: 0; border-radius: 50%; box-shadow: 0 0 0 .2rem var(--rc); opacity: 0; }
.bart-fx.is-still > .bart { animation: bart-hit 2.8s ease-in-out infinite; }
.bart-fx.is-still > .bart-fx__ring { animation: bart-ring 2.8s ease-out infinite; }
@keyframes bart-glow { 50% { opacity: .8; scale: 1.08; } }
@keyframes bart-hit { 0%, 60%, 100% { translate: 0 0; scale: 1; filter: drop-shadow(0 0 .6rem var(--rc)); } 30% { translate: 0 -.4rem; } 70% { scale: 1.18; filter: drop-shadow(0 0 1.2rem var(--rc)) brightness(1.6); } 76% { scale: .96; translate: .15rem 0; } 82% { translate: -.15rem 0; } }
@keyframes bart-ring { 0%, 66% { opacity: 0; scale: .6; } 70% { opacity: .9; scale: .8; } 100% { opacity: 0; scale: 1.6; } }
.bnr__big.bart-fx { width: min(16rem, 85%); aspect-ratio: 1; }
.ipic.bnr__big { width: 13rem; height: 13rem; background: radial-gradient(circle, var(--color-web-gold-pale), transparent 68%); }
.ipic.bnr__big .ipic__img { width: 75%; height: 75%; image-rendering: pixelated; filter: drop-shadow(0 0 1rem var(--color-web-gold)); }
.ipic.bnr__big .ibadge { width: 3rem; height: 3rem; font-size: 1.3rem; }
@keyframes bnr-float { 50% { translate: 0 -.5rem; } }
.bnr__side { display: grid; gap: .5rem; align-content: start; }
.bnr__also { color: var(--color-web-paper); font-size: .875rem; letter-spacing: .04em; }
.bnr__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.8rem, 1fr)); gap: .45rem; }
.bnr__tile { display: grid; gap: .2rem; justify-items: center; padding: 0; border: 0; background: none; color: var(--color-web-paper); text-align: center; cursor: pointer; }
.bnr__tile:disabled { cursor: default; opacity: 1; }
.bnr__tile small { font-size: .875rem; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.bnr__mini { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: .8rem; background: radial-gradient(closest-side, var(--color-web-ink2), var(--color-web-ink)); box-shadow: inset 0 0 0 .14rem var(--rc, var(--color-web-line-dark)); }
.bnr__mini > .stgwrap { position: absolute; inset: 0; }
.bnr__mini .bart-fx { width: 78%; height: 78%; }
.bnr__mini .ipic { width: 80%; height: 80%; }
.bnr__tile:is(:hover, :focus-visible) .bnr__mini { box-shadow: inset 0 0 0 .2rem var(--color-web-lime); }
.rar--S { --rc: var(--color-web-gold); } .rar--A { --rc: var(--color-web-violet); }
.bnr__tile.rar--S, .bnr__tile.rar--A, .bnr__tile.rar--comun, .bnr__tile.rar--raro, .bnr__tile.rar--epico, .bnr__tile.rar--legendario, .bnr__tile.rar--mitico { padding: 0; background: none; color: var(--color-web-paper); font-size: inherit; }
.bcol__art.bart-fx { width: 2.6rem; height: 2.6rem; }

.bcol__aura.stgwrap { width: 3.6rem; border-radius: .8rem; background: radial-gradient(closest-side, var(--color-web-ink2), var(--color-web-ink)); }
.bcol__row:not(.is-owned) .bcol__aura { opacity: .8; }

@media (max-width: 30rem) {
  .bnr__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bnr__tile small { font-size: .875rem; }
}


:root .bnr--event.gbanner { background: radial-gradient(90% 120% at 70% 30%, var(--color-master-purple), transparent 65%), radial-gradient(60% 80% at 12% 95%, var(--color-form-primal), transparent 70%), linear-gradient(150deg, var(--color-master-purple-dark), var(--color-web-ink)); }
.bnr--event .bnr__text, .bnr--event .bnr__hero, .bnr--event .bnr__side { position: relative; z-index: 1; }

.bev__decor { position: absolute; z-index: 0; width: 3.4rem; aspect-ratio: 1; background: var(--img) center / contain no-repeat; image-rendering: pixelated; opacity: .85; pointer-events: none; }
.bev__decor--0 { left: 34%; top: 8%; animation: bev-fly var(--motion-bat-fly) ease-in-out infinite, bev-flap var(--motion-bat-flap) ease-in-out infinite alternate; }
.bev__decor--1 { left: 4%; bottom: 6%; width: 2.8rem; opacity: .55; animation: bev-ghost var(--motion-ghost-float) ease-in-out infinite alternate; }
.bev__decor--2 { right: 6%; top: 4%; width: 2.6rem; animation: bev-fly-b calc(var(--motion-bat-fly) * .85) ease-in-out calc(var(--motion-bat-fly) * -.3) infinite, bev-flap calc(var(--motion-bat-flap) * .9) ease-in-out infinite alternate; }
@keyframes bev-fly { 0%, 100% { translate: 0 0; rotate: -8deg; } 25% { translate: 2.2rem -1rem; rotate: 6deg; } 50% { translate: 3.6rem .4rem; rotate: -4deg; } 75% { translate: 1.4rem 1.1rem; rotate: 8deg; } }
@keyframes bev-fly-b { 0%, 100% { translate: 0 0; rotate: 8deg; } 30% { translate: -2.4rem .9rem; rotate: -6deg; } 60% { translate: -3.4rem -.6rem; rotate: 4deg; } 80% { translate: -1.2rem -1rem; rotate: -8deg; } }
@keyframes bev-flap { from { scale: 1 1; } to { scale: 1.08 .72; } }
@keyframes bev-ghost { from { translate: 0 0; opacity: .45; } to { translate: .4rem -.9rem; opacity: .7; } }
.bnr__price { color: var(--color-web-lime); font-size: .875rem; font-weight: 900; }
.bnr__mini .bev__ball { width: 70%; height: 70%; object-fit: contain; }


.bprev__ctitle { font-size: .875rem; }
.bprev__colors { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.bprev__color { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border: 0; border-radius: 99rem; background: var(--color-web-mist); color: var(--color-web-ink); font-size: .875rem; font-weight: 800; cursor: pointer; }
.bprev__color.is-on { background: var(--color-web-ink); color: var(--color-web-paper); }
.bprev__dot { width: .8rem; height: .8rem; border-radius: 50%; background: hsl(var(--hue, 0) 85% 55%); box-shadow: 0 0 0 .1rem var(--color-web-paper); }
.bprev__color--original .bprev__dot { background: var(--color-web-line-dark); }
.bprev__color--plata .bprev__dot { background: var(--color-web-mist2); }
.bprev__color--obsidiana .bprev__dot { background: var(--color-web-ink); }
.bprev__color--arcoiris .bprev__dot { background: conic-gradient(var(--color-web-red), var(--color-web-gold), var(--color-web-lime), var(--color-web-cyan), var(--color-web-violet), var(--color-web-pink), var(--color-web-red)); }


.rv__gem { display: block; width: 6.5rem; aspect-ratio: 1; border-radius: 1.2rem; rotate: 45deg; background: linear-gradient(135deg, var(--color-web-paper), var(--rv-c) 45%, var(--color-web-ink) 120%); box-shadow: 0 0 2.4rem var(--rv-c), inset 0 0 1.2rem var(--color-web-paper); }
.rv--banner[data-stage="wait"] .rv__gem { --rv-c: var(--color-web-violet-light); }
.rv__art { display: grid; place-items: center; width: 6rem; aspect-ratio: 1; }
.rv__art--one { width: 12rem; }
.rv__live { position: relative; border-radius: 1rem; overflow: hidden; }
.rv__live.stgwrap { background: none; }
.rv__item { width: 4.6rem; height: 4.6rem; }
.rv__item--one { width: 9rem; height: 9rem; }


.bpull__pity.is-hot .bar { box-shadow: 0 0 .6rem var(--color-web-gold); animation: bpull-hot 1.2s ease-in-out 3; }
.bpull__hot { color: var(--color-web-gold-dark); font-weight: 900; }
@keyframes bpull-hot { 50% { box-shadow: 0 0 1.2rem var(--color-web-gold); } }



.stgwait { position: relative; display: grid; place-items: end center; width: 100%; height: 100%; padding-bottom: 12%; }
.stgwait__mon { position: relative; z-index: 1; --fw: max(2.6rem, calc(var(--sw, 6rem) * .95)); --fh: calc(var(--fw) * .32); }
:root .stgwait .stgwait__mon .floor { background: radial-gradient(closest-side, var(--color-web-shade), transparent); box-shadow: 0 0 0 .18rem var(--rc, var(--color-web-line-dark)), 0 0 1.2rem var(--rc, var(--color-web-line-dark)); animation: stgwait calc(var(--motion-slow) * 2.6) ease-in-out infinite; }
.stgwait__t { position: absolute; top: .6rem; left: 0; right: 0; color: var(--color-web-paper); font-size: .875rem; font-weight: 800; opacity: .85; }
@keyframes stgwait { 50% { opacity: .45; transform: scale(.92); } }

.bnr__tile small { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: normal; hyphens: auto; text-wrap: balance; }


.bfx { isolation: isolate; }
.bfx__layer { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit; }

:root .bfx.has-img { background: var(--color-web-ink); }
.bfx__cam { position: absolute; inset: -6%; background: var(--img) right center / cover no-repeat; animation: bfx-cam 16s ease-in-out infinite alternate; }
.bfx__cam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-web-glass-dark) 0 38%, transparent 72%); }
@keyframes bfx-cam { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-2%, 1%); } }

.bfx__sweep { position: absolute; top: -20%; bottom: -20%; left: -40%; width: 35%; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--color-web-paper) 24%, transparent), transparent); opacity: 0; animation: bfx-sweep 6.5s cubic-bezier(.4, 0, .2, 1) 1.2s infinite; }
@keyframes bfx-sweep { 0% { transform: translateX(0) skewX(-12deg); opacity: 0; } 8% { opacity: 1; } 32%, 100% { transform: translateX(520%) skewX(-12deg); opacity: 0; } }

.bfx__spark { position: absolute; left: var(--x); bottom: -1rem; width: .45rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-web-gold-pale); box-shadow: 0 0 .6rem var(--color-web-gold); scale: var(--z); opacity: 0; animation: bfx-spark 5.5s ease-in var(--d) infinite; }
@keyframes bfx-spark { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-26rem); opacity: 0; } }
.bnr--event .bfx__spark { background: var(--color-web-violet-light); box-shadow: 0 0 .6rem var(--color-web-pink); }

.bfx :is(.bnr__hero, .gbanner__mons) { position: relative; isolation: isolate; }
.bfx__rays { position: absolute; left: 50%; top: 50%; z-index: -1; width: 26rem; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--color-web-gold-pale) 16%, transparent) 0 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, var(--color-web-ink) 0 18%, transparent 64%); mask-image: radial-gradient(circle, var(--color-web-ink) 0 18%, transparent 64%);
  animation: pk-turn 50s linear infinite; }

.bfx .bnr__hero > :not(.bfx__rays), .bfx .gbanner__mons > :not(.bfx__rays) { animation: bfx-push 9s ease-in-out infinite; }
@keyframes bfx-push { 50% { scale: 1.045; } }

.bfx .ipic.bnr__big { animation: bfx-glow 3.8s ease-in-out infinite; }
.bfx .ipic.bnr__big .ipic__img { animation: bfx-item 3.8s ease-in-out infinite; }
@keyframes bfx-item { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -.7rem; rotate: 4deg; } }
@keyframes bfx-glow { 50% { scale: 1.06; } }

.bfx__sheen { position: absolute; inset: 0; z-index: 2; background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--color-web-paper) 22%, transparent) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; animation: bfx-tile 7s ease-in-out calc(var(--i, 0) * .25s) infinite; }
@keyframes bfx-tile { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.bnr__mini { transition: translate var(--motion-fast) var(--motion-ease-out); }
.bnr__tile:not(:disabled):is(:hover, :focus-visible) .bnr__mini { translate: 0 -.2rem; }