.eball { --top: var(--color-ball-red); position: relative; display: inline-block; flex-shrink: 0; width: 4rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--color-ball-white); box-shadow: inset 0 -.3rem 0 var(--color-ball-shade), 0 0 0 .18rem var(--color-web-ink); }
.eball__top { position: absolute; inset: 0 0 50% 0; background: var(--top); }
.eball__band { position: absolute; left: 0; right: 0; top: 45%; height: 10%; background: var(--color-web-ink); }
.eball__btn { position: absolute; left: 34%; top: 34%; width: 32%; height: 32%; border-radius: 50%; background: var(--color-ball-white); box-shadow: 0 0 0 .2rem var(--color-web-ink), inset 0 0 0 .35rem var(--color-ball-white), inset 0 0 0 .5rem var(--color-ball-shade); }
.eball--super .eball__top { background: linear-gradient(90deg, var(--color-great-blue) 0 20%, var(--color-ball-red) 20% 31%, var(--color-great-blue) 31% 69%, var(--color-ball-red) 69% 80%, var(--color-great-blue) 80%); }
.eball--ultra .eball__top { background: linear-gradient(90deg, var(--color-web-gold) 0 27%, var(--color-web-ink) 27% 73%, var(--color-web-gold) 73%); }
.eball--master .eball__top { background: radial-gradient(circle at 28% 52%, var(--color-master-pink) 0 12%, transparent 13%), radial-gradient(circle at 72% 52%, var(--color-master-pink) 0 12%, transparent 13%), var(--color-master-purple); }
.eball--epic .eball__top { background: linear-gradient(160deg, var(--color-web-violet-light), var(--color-web-violet-deep)); }
.eball--featured .eball__top { background: linear-gradient(135deg, var(--color-web-red), var(--color-web-gold) 45%, var(--color-web-cyan)); }

.eball--img { aspect-ratio: auto; height: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none; image-rendering: pixelated; }
.eball--sm { width: 1.6rem; box-shadow: inset 0 -.15rem 0 var(--color-ball-shade), 0 0 0 .1rem var(--color-web-ink); }
.eball--img.eball--sm { box-shadow: none; }
.eball--sm .eball__btn { box-shadow: 0 0 0 .1rem var(--color-web-ink); }

.estars { font-weight: 900; letter-spacing: .04em; white-space: nowrap; color: var(--color-rarity-normal); }
.estars--2 { color: var(--color-rarity-rara); }
.estars--3 { color: var(--color-web-violet); }
.estars--4, .estars--5 { color: var(--color-web-gold-dark); }
.estars--6 { background: linear-gradient(90deg, var(--color-web-red), var(--color-web-gold), var(--color-web-lime-dark), var(--color-web-cyan), var(--color-web-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.gstatus { justify-self: start; padding: .15rem .6rem; background: var(--color-web-ink3); color: var(--color-web-mist); font-size: .875rem; font-weight: 800; clip-path: polygon(.3rem 0, 100% 0, calc(100% - .3rem) 100%, 0 100%); }
.gstatus.is-on { background: var(--color-web-lime); color: var(--color-web-lime-ink); }


.gacha { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); align-content: start; }
@media (orientation: landscape) and (min-width: 56rem) {
  .gacha { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; align-items: start; }
  .gacha > .gbanner, .gacha > .gballs, .gacha > .glink, .gacha > .gwait, .gacha > .ghow { grid-column: 1 / -1; }
}
.gbanner { position: relative; display: grid; gap: .8rem; padding: 1.4rem 1.2rem 1.1rem; overflow: hidden; color: var(--color-web-paper); background: radial-gradient(120% 140% at 85% 15%, var(--color-web-violet-deep), transparent 60%), linear-gradient(135deg, var(--color-web-ink), var(--color-web-blue-deep)); }
.gbanner__text { display: grid; gap: .45rem; align-content: start; }
.gbanner .scard__tag { position: static; justify-self: start; }
.gbanner__t { font-size: 1.7rem; font-weight: 900; font-style: italic; letter-spacing: .02em; line-height: 1.05; }
.gbanner .sub { color: var(--color-web-blue-pale); }
.gbanner__mons { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: .4rem 1.4rem; }
.gbanner__mon { display: grid; justify-items: center; gap: .15rem; text-align: center; }

.gbanner__pics { display: flex; align-items: flex-end; justify-content: center; gap: .2rem .8rem; }
.gbanner__pic { display: grid; justify-items: center; gap: .1rem; }
.gbanner__pic .stand { filter: drop-shadow(0 0 1.2rem var(--color-web-violet-light)); }
.gbanner__pic.is-form .stand { filter: drop-shadow(0 0 1.2rem var(--color-web-gold)); }
.gbanner__cap { padding: .05rem .5rem; background: var(--color-web-glass-dark); color: var(--color-web-mist); font-size: .875rem; font-weight: 800; }
.gbanner__pic.is-form .gbanner__cap { background: var(--color-web-gold); color: var(--color-web-ink); }
.gbanner__arrow { align-self: center; color: var(--color-web-lime); font-size: 1.6rem; font-weight: 900; }
.gbanner__name { font-size: 1.2rem; }
.gbanner__hint { max-width: 22rem; }
.gbanner__mon b { font-size: 1rem; }
.gpity { display: grid; gap: .35rem; align-content: start; padding: .7rem .8rem; background: var(--color-web-glass-dark); }
.gpity__n { font-size: 1.3rem; }
.gpity .sub { color: var(--color-web-mist2); }
@media (orientation: landscape) and (min-width: 56rem) {
  .gbanner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
  .gbanner.has-feat { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
}

.gballs { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .8rem; }
.bcard { --bc: var(--color-web-blue); position: relative; display: grid; justify-items: center; align-content: start; gap: .45rem; padding: 1.1rem .7rem .8rem; background: var(--color-web-paper); box-shadow: inset 0 0 0 .0625rem var(--color-web-line), inset 0 .3rem 0 var(--bc); clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 0 100%); }
.bcard--poke { --bc: var(--color-ball-red); }
.bcard--super { --bc: var(--color-great-blue); }
.bcard--ultra { --bc: var(--color-web-gold); }
.bcard--master { --bc: var(--color-master-purple); }
.bcard--epic { --bc: var(--color-web-violet); }
.bcard--featured { --bc: var(--color-web-pink); }
.bcard__top { position: relative; padding: .2rem 1.8rem 0; }
.bcard__ball { width: 4.6rem; }

@keyframes ball-bob { 50% { transform: translateY(-.25rem) rotate(-6deg); } }
.bcard__have { position: absolute; right: 0; top: 0; padding: .05rem .45rem; background: var(--color-web-ink); color: var(--color-web-lime); font-size: .875rem; font-weight: 900; }
.bcard:not(.has) .bcard__have { color: var(--color-web-line-dark); }
.bcard__name { font-size: 1.1rem; font-weight: 900; }
.bcard > * { max-width: 100%; }
.bcard__what { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem; font-size: .875rem; font-weight: 700; text-align: center; }
.bcard__what .estars { white-space: normal; }
.bcard__up { font-weight: 800; }
.bcard__up::before { content: "· "; color: var(--color-web-muted); }
.bcard__odds { padding: 0; border: 0; background: none; color: var(--color-web-blue); font-size: .875rem; font-weight: 800; text-decoration: underline; }
.bcard__acts { display: grid; justify-items: center; gap: .45rem; width: 100%; margin-top: .2rem; }
.bcard__acts .gb { min-width: 8.5rem; }
.bcard__buy { display: flex; flex-wrap: wrap; gap: .35rem; width: 100%; }
.bcard__b { flex: 1 1 6rem; min-width: 0; display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .45rem .3rem; border: 0; background: var(--color-web-ink); color: var(--color-web-paper); font-size: .875rem; font-weight: 900; white-space: nowrap; clip-path: polygon(.35rem 0, 100% 0, calc(100% - .35rem) 100%, 0 100%); }
.bcard__b span { color: var(--color-web-lime); }
.bcard__b .coin { width: 1rem; height: 1rem; }
.glink { justify-self: start; padding: 0; border: 0; background: none; color: var(--color-web-blue); font-weight: 900; text-decoration: underline; }

.odds__ball { display: grid; gap: .35rem; padding-top: .6rem; border-top: .0625rem solid var(--color-web-line); }
.odds__head { display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.odds__row { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto 3.8rem; align-items: center; gap: .5rem; }
.odds__name { font-weight: 700; }
.odds__n { color: var(--color-web-muted); }
.odds__pct { text-align: right; }

.gladder__steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; }
.gstep { display: grid; gap: .2rem; padding: .55rem .6rem; background: var(--color-web-mist); box-shadow: inset .25rem 0 0 var(--color-web-line); }
.gstep.is-ready { background: var(--color-web-lime); box-shadow: inset .25rem 0 0 var(--color-web-lime-dark); }
.gstep.is-ready .sub { color: var(--color-web-lime-ink); }
.gstep.is-claimed { opacity: .6; }
.gstep__state { font-size: .875rem; font-weight: 900; }
.gdex { display: grid; gap: .35rem; padding-top: .5rem; border-top: .0625rem solid var(--color-web-line); }
.gwait { box-shadow: inset 0 0 0 .0625rem var(--color-web-line), inset .3rem 0 0 var(--color-web-gold); }

.ghist__row { display: grid; grid-template-columns: auto 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .3rem 0; border-top: .0625rem solid var(--color-web-line); }
.ghist__row .stand { height: 2.6rem; }
.ghist__txt { display: grid; min-width: 0; }
.ghist__txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghow { grid-column: 1 / -1; }



.capt { position: fixed; inset: 0; z-index: 45; overflow: hidden; background: var(--color-web-ink); }
.capt::before { content: ""; position: absolute; inset: -2rem; background: var(--capt-bg, none) center / cover no-repeat; filter: blur(1.5rem) brightness(.45); }

.capt__say { position: absolute; left: 0; right: 0; bottom: 22%; z-index: 1; margin: 0; padding: 0 1rem; color: var(--color-web-paper); font-size: 1.1rem; font-weight: 800; text-align: center; text-shadow: 0 .15rem .4rem var(--color-web-ink); pointer-events: none; }
.capt.is-playing .capt__say { display: none; }

.capt--web { background: radial-gradient(120% 90% at 85% 10%, var(--color-web-violet-deep), transparent 60%), linear-gradient(160deg, var(--color-web-ink), var(--color-web-blue-deep)); }

.capt--web::before { mix-blend-mode: luminosity; opacity: .55; }

.capt__side { position: absolute; left: -3rem; top: -3rem; width: calc(100% + 6rem); height: calc(100% + 6rem); object-fit: cover; filter: blur(1.5rem) brightness(.45); pointer-events: none; }
.capt--web .capt__side { mix-blend-mode: luminosity; opacity: .6; }

.capt.is-fill::before { display: none; }
.capt__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--fill-y, 50%); pointer-events: none; }
.capt__tint { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 34% 40% at 50% 47%, transparent, color-mix(in srgb, var(--color-swsh-black, var(--color-web-ink)) 35%, transparent) 100%); }
.capt--web .capt__tint {
  --tint-glow: transparent;
  background:
    radial-gradient(ellipse 30% 36% at 50% 48%, var(--tint-glow), transparent 75%),
    repeating-linear-gradient(0deg, var(--color-web-grid) 0 .125rem, transparent .125rem 6rem),
    repeating-linear-gradient(90deg, var(--color-web-grid) 0 .125rem, transparent .125rem 6rem),
    linear-gradient(160deg, color-mix(in srgb, var(--color-web-ink) 55%, transparent), color-mix(in srgb, var(--color-web-blue-deep) 50%, transparent));
}
.capt--web[data-tier="rara"] .capt__tint { --tint-glow: color-mix(in srgb, var(--color-rarity-rara) 30%, transparent); }
.capt--web[data-tier="ultra"] .capt__tint { --tint-glow: color-mix(in srgb, var(--color-web-violet) 30%, transparent); }
.capt--web[data-tier="legendaria"] .capt__tint { --tint-glow: color-mix(in srgb, var(--color-web-gold) 30%, transparent); }
.capt__frame { position: relative; width: 100%; height: 100%; border: 0; display: block; }
.rv { --rv-c: var(--color-web-blue); position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; align-content: safe center; gap: 1rem; padding: calc(1.2rem + env(safe-area-inset-top)) 1rem calc(1.2rem + env(safe-area-inset-bottom)); overflow: auto; color: var(--color-web-paper); background: radial-gradient(circle at 50% 45%, var(--color-web-ink2), var(--color-web-ink) 70%); }
.rv[data-best="2"] { --rv-c: var(--color-rarity-rara); }
.rv[data-best="3"] { --rv-c: var(--color-web-violet); }
.rv[data-best="4"], .rv[data-best="5"] { --rv-c: var(--color-web-gold); }
.rv[data-best="6"] { --rv-c: var(--color-web-pink); }
.rv__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 42%, var(--rv-c), transparent 55%); opacity: .3; }
@keyframes rv-breathe { 50% { opacity: .5; } }
.rv__flash { position: absolute; inset: 0; pointer-events: none; background: var(--color-web-paper); opacity: 0; }
.rv[data-stage="open"] .rv__flash { animation: rv-flash .7s ease-out; }
@keyframes rv-flash { 30% { opacity: .8; } 100% { opacity: 0; } }
.rv__holder { position: relative; display: grid; place-items: center; min-height: 9rem; }
.rv__ball { width: 7.5rem; transform-origin: 50% 90%; animation: rv-drop .5s cubic-bezier(.3, 1.5, .6, 1) both, rv-shake var(--shake-ms) ease-in-out .5s infinite; }
@keyframes rv-drop { from { transform: translateY(-60vh) rotate(-200deg); } }
@keyframes rv-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
.rv[data-stage="open"] .rv__ball { animation: rv-burst .45s ease-in forwards; }
@keyframes rv-burst { 60% { transform: scale(1.25); filter: brightness(1.8); } 100% { transform: scale(1.7); opacity: 0; filter: brightness(3); } }
.rv[data-stage="fail"] .rv__ball, .rv[data-stage="pending"] .rv__ball { animation: none; opacity: .55; }
.rv__say { position: relative; max-width: 32rem; font-size: 1rem; font-weight: 800; text-align: center; }
.rv__grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); gap: .7rem; width: min(100%, 54rem); perspective: 60rem; }
.rv__grid--one { grid-template-columns: minmax(0, 20rem); justify-content: center; }
.rv__card { --rc: var(--color-rarity-normal); position: relative; display: grid; justify-items: center; gap: .3rem; padding: .9rem .5rem .7rem; overflow: hidden; background: var(--color-web-glass-dark); box-shadow: inset 0 0 0 .14rem var(--rc), 0 0 1.4rem color-mix(in srgb, var(--rc) 40%, transparent); clip-path: polygon(0 0, calc(100% - .8rem) 0, 100% .8rem, 100% 100%, .8rem 100%, 0 calc(100% - .8rem)); animation: rv-card .5s cubic-bezier(.2, 1.3, .5, 1) both; animation-delay: calc(var(--i) * var(--stagger-ms)); }
.rv.is-skip .rv__card { animation-delay: 0s; }
.rv__card--s2 { --rc: var(--color-rarity-rara); }
.rv__card--s3 { --rc: var(--color-web-violet); }
.rv__card--s4, .rv__card--s5 { --rc: var(--color-web-gold); }
.rv__card--s6 { --rc: var(--color-web-pink); }
.rv__card.is-one { padding: 1.4rem 1rem 1rem; }
@keyframes rv-card { from { opacity: 0; transform: translateY(1.2rem) rotateY(80deg) scale(.7); } }
.rv__rays { position: absolute; inset: -40%; z-index: 0; pointer-events: none; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 40%, transparent) 0 8deg, transparent 8deg 22deg); animation: rv-spin 10s linear infinite; }
@keyframes rv-spin { to { transform: rotate(1turn); } }
.rv__card > :not(.rv__rays) { position: relative; z-index: 1; }
.rv__name { font-size: 1rem; font-weight: 900; text-align: center; }
.rv__card.is-one .rv__name { font-size: 1.6rem; }
.rv__card.is-one .estars { font-size: 1.4rem; }
.rv__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.rv__tag { padding: .05rem .45rem; background: var(--color-web-ink3); font-size: .875rem; font-weight: 900; }
.rv__tag--new { background: var(--color-web-lime); color: var(--color-web-lime-ink); }
.rv__tag--up { background: var(--color-web-gold); color: var(--color-web-ink); }
.rv__tag--shiny { background: var(--color-web-pink); color: var(--color-web-paper); }

.rv__tag--color { background: hsl(var(--hue, 46) 85% 55%); color: var(--color-web-paper); text-shadow: 0 .06rem 0 var(--color-web-ink); }
.rv__tag--plata { background: var(--color-web-mist2); color: var(--color-web-ink); text-shadow: none; }
.rv__tag--obsidiana { background: var(--color-web-ink); }
.rv__tag--arcoiris { background: linear-gradient(90deg, var(--color-web-red), var(--color-web-gold), var(--color-web-lime), var(--color-web-cyan), var(--color-web-violet), var(--color-web-pink)); }
.rv__tag--dupe { color: var(--color-web-gold-pale); }
.rv__foot { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.rv__btn { min-width: 9rem; padding: .75rem 1.5rem; border: 0; background: var(--color-web-blue); color: var(--color-web-paper); font-size: 1.05rem; font-weight: 900; clip-path: polygon(.7rem 0, 100% 0, calc(100% - .7rem) 100%, 0 100%); }
.rv__btn--more { background: var(--color-web-lime); color: var(--color-web-lime-ink); }


.ibadge { --ic: var(--color-rarity-normal); display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--ic); color: var(--color-web-paper); font-size: 1.15rem; font-weight: 900; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.ibadge--B { --ic: var(--color-rarity-rara); }
.ibadge--A { --ic: var(--color-web-violet); }
.ibadge--S { --ic: linear-gradient(135deg, var(--color-web-gold), var(--color-web-gold-dark)); }

.ipic { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 3.4rem; height: 3.4rem; background: radial-gradient(circle, var(--color-web-mist), transparent 70%); }
.ipic__img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.ipic .ibadge { position: absolute; right: -.2rem; bottom: -.2rem; width: 1.5rem; height: 1.5rem; font-size: .875rem; }
.ipic.is-plain { background: none; }
.ipic.is-plain .ibadge { position: static; width: 2.6rem; height: 2.6rem; font-size: 1.15rem; }
.ipic--sm { width: 2.6rem; height: 2.6rem; }
.ipic--bare .ibadge { display: none; }
.istars { white-space: nowrap; }
.istars i { font-style: normal; color: var(--color-web-line); }
.istars i.on { color: var(--color-web-gold-dark); }
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .7rem; }
.icard { --ic: var(--color-rarity-normal); display: grid; gap: .55rem; align-content: start; padding: .9rem; background: var(--color-web-paper); box-shadow: inset 0 0 0 .0625rem var(--color-web-line), inset .3rem 0 0 var(--ic); clip-path: polygon(0 0, calc(100% - .8rem) 0, 100% .8rem, 100% 100%, 0 100%); }
.icard--B { --ic: var(--color-rarity-rara); }
.icard--A { --ic: var(--color-web-violet); }
.icard--S { --ic: var(--color-web-gold); }

.icard.is-bought .icard__price { opacity: .5; }
.icard__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .1rem .6rem; }
.icard__head .ipic { grid-row: span 2; }
.icard__name { font-size: 1rem; font-weight: 900; }
.icard__price { display: inline-flex; align-items: center; gap: .3rem; }
.icard__done { justify-self: center; padding: .3rem .9rem; background: var(--color-web-ink); color: var(--color-web-lime); font-weight: 900; }
.icard .gb { justify-self: stretch; min-width: 0; }
.iwhat { display: grid; gap: .2rem; }
.iwhat__l { font-size: .875rem; font-weight: 600; }
.irow { --ic: var(--color-rarity-normal); display: grid; gap: .5rem; padding: .8rem 0; border-top: .0625rem solid var(--color-web-line); }
.irow--B { --ic: var(--color-rarity-rara); }
.irow--A { --ic: var(--color-web-violet); }
.irow--S { --ic: var(--color-web-gold); }
.irow__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.irow__head .stand { height: 2.6rem; }
.irow__name { font-size: 1.05rem; font-weight: 900; }
.irow__who { margin-left: auto; color: var(--color-web-muted); font-size: .875rem; font-weight: 800; }
.irow.is-on .irow__who { color: var(--color-web-blue); }
.irow__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.irow__acts .gb { justify-self: start; min-width: 8rem; }
.irow__max { color: var(--color-web-gold-dark); font-weight: 900; }
.irow__drop { margin-left: auto; }
.ipick__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem; width: 100%; padding: .45rem .6rem; border: 0; background: var(--color-web-mist); text-align: left; }
.ipick__row .stand { height: 2.6rem; }
.ipick__row.is-active { box-shadow: inset .25rem 0 0 var(--color-web-lime-dark); }
.ipick__row--none { grid-template-columns: minmax(0, 1fr); }
.ipick__txt { display: grid; min-width: 0; }


.scard__ball { width: 4.8rem; }
.scard__boost { object-fit: contain; width: 4.8rem; } 
.scard__item { width: 4.6rem; height: 4.6rem; }
.buyrow { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.buyrow .gb { min-width: 8rem; }


.fup__k { font-weight: 900; }
.fup__row { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr) 3rem auto; align-items: center; gap: .15rem .6rem; }
.fup__stat { font-weight: 800; }
.fup__n { font-family: var(--font-mono), monospace; text-align: right; }
.fup__per { grid-column: 2 / 4; }
.fup__add { grid-row: span 2; min-width: 3.2rem; padding: .35rem .6rem; border: 0; background: var(--color-web-violet); color: var(--color-web-paper); font-weight: 900; clip-path: polygon(.3rem 0, 100% 0, calc(100% - .3rem) 100%, 0 100%); }
.fup__add:disabled { background: var(--color-web-mist2); color: var(--color-web-muted); }

.fup__add { position: relative; overflow: hidden; transition: transform var(--motion-fast) var(--motion-ease-out); }
.fup__add:active { transform: scale(.92); }
.fup__add.is-busy:disabled { background: var(--color-web-violet); color: var(--color-web-paper); }
.fup__busy { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 20%, var(--color-web-glass) 50%, transparent 80%); animation: fup-busy var(--motion-slow) linear infinite; }
.fup__bar { position: relative; overflow: hidden; }
.fup__gain { position: absolute; top: 0; bottom: 0; left: var(--from); width: var(--w); background: var(--color-web-gold); transform-origin: left center; pointer-events: none; animation: fup-gain calc(var(--motion-slow) * 1.5) var(--motion-ease-out) forwards; }
.fup__n.is-pop { animation: fup-pop var(--motion-base) var(--motion-ease-back); }
@keyframes fup-busy { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes fup-gain { 0% { opacity: 1; transform: scaleX(0); } 55% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes fup-pop { 50% { transform: scale(1.35); } }
.fup__foot { display: grid; gap: .4rem; }
.fup__cost { display: flex; align-items: center; gap: .3rem; }
.fup__foot .gb { justify-self: start; }


.mcard__soon.is-due { background: var(--color-web-violet); color: var(--color-web-paper); }