.screen:not(.lobby) { display: grid; grid-auto-rows: max-content; gap: .8rem; align-content: start; padding-left: max(1rem, calc((100% - 80rem) / 2)); padding-right: max(1rem, calc((100% - 80rem) / 2)); }


.two { grid-template-columns: minmax(0, 1fr); }
.two__list { display: grid; gap: .35rem; align-content: start; }
.two__detail { order: -1; display: grid; gap: .7rem; align-content: start; padding: 1.1rem 1.2rem; background: var(--color-web-glass); box-shadow: inset 0 0 0 .0625rem var(--color-web-line); }
.two__foot { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem .2rem 0; font-size: .875rem; font-weight: 800; color: var(--color-web-muted); }
@media (orientation: landscape) and (min-width: 56rem) {
  .two { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 1.6rem; align-items: start; }
  .two__detail { order: 0; position: sticky; top: 0; min-height: 26rem; }
}
.mrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; width: 100%; padding: .55rem .9rem .55rem .7rem; border: 0; text-align: left; background: var(--color-web-ink); color: var(--color-web-paper); clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% .7rem, 100% 100%, 0 100%); }
.mrow__ic .hub-icon { width: 1.8rem; height: 1.8rem; stroke-width: 1.8; }
.mrow__txt { display: grid; min-width: 0; }
.mrow__txt b { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__date { font-size: .875rem; opacity: .7; }
.mrow__amt { font-weight: 900; color: var(--color-web-lime); font-variant-numeric: tabular-nums; }
.mrow__amt.is-neg { color: var(--color-web-pink); }
.mrow.is-on { background: var(--color-web-blue-light); color: var(--color-web-paper); box-shadow: inset .3rem 0 0 var(--color-web-lime); }
.mrow.is-on .mrow__amt { color: var(--color-web-paper); }
.crow { grid-template-columns: auto auto minmax(0, 1fr); background: var(--color-web-paper); color: var(--color-web-ink); box-shadow: inset 0 0 0 .0625rem var(--color-web-line); }
.crow.is-on { background: var(--color-web-blue-pale); color: var(--color-web-ink); }
.letter__title { font-size: 1.35rem; font-weight: 900; }
.letter__from { color: var(--color-web-muted); font-weight: 700; }
.letter__when { color: var(--color-web-red); font-size: .875rem; font-weight: 700; padding-bottom: .5rem; border-bottom: .0625rem solid var(--color-web-line); }
.letter__body { font-weight: 600; line-height: 1.5; }
.letter__hint { padding-top: .4rem; border-top: .0625rem solid var(--color-web-line); }
.gifts { display: flex; flex-wrap: wrap; gap: .5rem; padding: .6rem 0; }
.gift { display: grid; justify-items: center; align-content: end; gap: .2rem; width: 4.8rem; height: 4.8rem; padding-bottom: .1rem; background: linear-gradient(var(--color-web-gold-pale), var(--color-web-gold)); box-shadow: inset 0 0 0 .14rem var(--color-web-gold-dark); }
.gift b { width: 100%; text-align: center; background: var(--color-web-glass-dark); color: var(--color-web-paper); font-size: .875rem; }


.shop { grid-template-columns: minmax(0, 1fr); }
.cats { display: flex; flex-wrap: wrap; gap: .4rem; align-content: start; }
.cats__b { display: flex; align-items: center; gap: .5rem; padding: .45rem 1.2rem .45rem .7rem; border: 0; background: none; font-size: 1rem; font-weight: 800; clip-path: polygon(0 0, 100% 0, calc(100% - .6rem) 100%, 0 100%); }
.cats__b.is-on { background: var(--color-web-ink); color: var(--color-web-paper); }
.cats__note { flex-basis: 100%; }
@media (orientation: landscape) and (min-width: 56rem) {
  .shop { grid-template-columns: 14rem minmax(0, 1fr); column-gap: 1.6rem; align-items: start; }
  .cats { display: grid; padding-right: 1rem; border-right: .0625rem solid var(--color-web-line-dark); min-height: 24rem; }
}
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .8rem; }
.scard { position: relative; display: grid; justify-items: center; align-content: end; gap: .45rem; min-height: 13rem; padding: 2rem 0 0; border: 0; background: var(--color-web-paper); box-shadow: inset 0 0 0 .0625rem var(--color-web-line), inset -.35rem 0 0 var(--color-web-blue); clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 0 100%); transition: transform .15s; }
.scard:hover { transform: translateY(-.15rem); }
.scard::before { content: ""; position: absolute; left: .6rem; top: .55rem; width: 2.4rem; height: .4rem; background: repeating-linear-gradient(135deg, var(--color-web-line-dark) 0 .12rem, transparent .12rem .35rem); }
.scard__mark { position: absolute; left: .7rem; top: 1.2rem; font-family: var(--font-mono), monospace; font-style: italic; font-size: .875rem; color: var(--color-web-line-dark); }
.scard__tag { position: absolute; right: .6rem; top: .5rem; padding: .05rem .5rem; background: var(--color-web-lime); color: var(--color-web-lime-ink); font-size: .875rem; font-weight: 900; }
.scard__tag.is-owned { background: var(--color-web-ink); color: var(--color-web-lime); }
.scard__name { font-size: .95rem; font-weight: 900; text-align: center; padding: 0 .5rem; }
.scard__price { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; padding: .45rem; background: var(--color-web-ink); color: var(--color-web-paper); font-size: 1.05rem; font-weight: 900; }
.scard.is-owned .scard__price { opacity: .6; }
.scard.is-off { opacity: .6; cursor: default; }
.scard.is-off:hover { transform: none; }
.cos { position: relative; display: grid; place-items: center; width: 5.6rem; height: 5.6rem; }
.cos--frame { border-radius: 50%; background: radial-gradient(closest-side, var(--color-web-paper) 72%, transparent 73%), conic-gradient(var(--c, var(--color-web-blue)), var(--c2, var(--color-web-violet)), var(--c, var(--color-web-blue))); }
.cos--frame.is-glow { filter: drop-shadow(0 0 .45rem var(--c, var(--color-web-gold))); }
.cos--frame .stand { margin-top: .4rem; }
.cos--title { width: auto; height: 5.6rem; }
.cos__plate { padding: .35rem .9rem; background: var(--color-web-ink); color: var(--color-web-gold); font-size: .875rem; font-weight: 900; font-style: italic; text-align: center; clip-path: polygon(.5rem 0, 100% 0, calc(100% - .5rem) 100%, 0 100%); box-shadow: inset 0 -.2rem 0 var(--color-web-gold-dark); }
.cos--sm { width: 2.4rem; height: 2.4rem; }
.cos--sm .cos__plate { padding: .2rem .5rem; font-size: .875rem; }
.cos--ball { border-radius: 50%; background: linear-gradient(var(--b1) 0 46%, var(--color-web-ink) 46% 54%, var(--color-web-paper) 54%); box-shadow: inset 0 0 0 .2rem var(--color-web-ink); }
.cos--ball::after { content: ""; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--color-web-paper); box-shadow: 0 0 0 .2rem var(--color-web-ink); }
.cos--ball-0 { --b1: var(--color-web-red); }
.cos--ball-1 { --b1: var(--color-web-blue); }
.cos--ball-2 { --b1: var(--color-web-gold); }
.cos--ball-3 { --b1: var(--color-web-violet); }


.sortbar { display: flex; align-items: center; justify-content: flex-end; gap: .3rem 1rem; flex-wrap: wrap; width: 100%; padding-bottom: .4rem; border-bottom: .0625rem solid var(--color-web-line-dark); }
.sortbar__n { margin-right: auto; font-weight: 900; font-size: .9rem; }
.sortbar__b { padding: .1rem 0; border: 0; background: none; font-weight: 800; font-size: .9rem; color: var(--color-web-muted); }
.sortbar__b.is-on { color: var(--color-web-blue); box-shadow: inset 0 -.15rem 0 var(--color-web-blue); }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)); gap: .7rem; }
.rcard { --c: var(--color-rarity-normal); position: relative; display: grid; align-content: end; justify-items: center; aspect-ratio: 3 / 4; padding: 0; border: 0; overflow: hidden;
  background: radial-gradient(var(--color-web-paper) .08rem, transparent .1rem) 0 0 / .6rem .6rem, linear-gradient(160deg, color-mix(in srgb, var(--c) 45%, var(--color-web-paper)), var(--c));
  clip-path: polygon(0 0, calc(100% - .9rem) 0, 100% .9rem, 100% 100%, 0 100%); box-shadow: inset -.3rem 0 0 color-mix(in srgb, var(--c) 70%, var(--color-web-ink)); transition: transform .15s; }
.rcard:hover { transform: perspective(40rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-.2rem); } 
.rcard .stand { --fw: 6rem; --fh: 1.6rem; margin-bottom: .6rem; }
.rcard .floor { background: radial-gradient(closest-side, var(--color-web-shade), transparent); box-shadow: none; }
.rcard__hex { position: absolute; left: .4rem; top: .4rem; }
.rcard__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "stars lv"; width: 100%; padding: .3rem .5rem; background: linear-gradient(transparent, var(--color-web-glass-dark) 35%); color: var(--color-web-paper); text-align: left; }
.rcard__name { grid-area: name; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard__stars { grid-area: stars; color: var(--color-web-gold); font-size: .875rem; letter-spacing: -.05em; }
.rcard__lv { grid-area: lv; font-size: .875rem; font-weight: 900; }

.rcard__live { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding: .1rem .35rem; background: var(--color-web-red); color: var(--color-web-paper); font-size: .875rem; font-weight: 900; text-align: center; }
.rcard.is-active .rcard__hex { top: 1.9rem; }
.rcard.is-active { outline: .2rem solid var(--color-web-lime); outline-offset: -.2rem; }


.dexs__head { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.dexs__txt { display: grid; gap: .45rem; }
.dexgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .45rem; }
.dexcell { --c: var(--color-web-line); display: grid; justify-items: center; align-content: end; gap: .1rem; min-height: 6.4rem; padding: .3rem .2rem .35rem; background: var(--color-web-paper); box-shadow: inset 0 -.25rem 0 var(--c), inset 0 0 0 .0625rem var(--color-web-line); --k: .5rem; }
.dexcell.is-off { background: var(--color-web-mist2); }
.dexcell .stand { min-height: 3rem; }
.dexcell .num { font-family: var(--font-mono), monospace; font-size: .875rem; color: var(--color-web-muted); }
.dexcell .name { font-size: .875rem; font-weight: 800; text-align: center; line-height: 1.1; }


.season { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem 1rem; padding: 1rem 1.2rem; background: var(--color-web-paper); box-shadow: inset 0 0 0 .0625rem var(--color-web-line), inset 0 .3rem 0 var(--color-web-blue); }
.season > .gb { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 48rem) { .season { grid-template-columns: auto minmax(0, 1fr) auto; } .season > .gb { grid-column: auto; } }
.season__txt { position: relative; display: grid; gap: .3rem; }
.season__txt .mcard__mark { position: absolute; right: 0; top: -.2rem; font-size: 1.2rem; }
.season__k { font-family: var(--font-mono), monospace; font-size: .875rem; color: var(--color-web-muted); text-transform: uppercase; }
.season__t { font-size: 1.5rem; font-weight: 900; font-style: italic; line-height: 1.05; }
.season__row { display: flex; justify-content: space-between; font-size: .875rem; font-weight: 800; }
.vip { padding: 0 .4rem; background: var(--color-web-violet); color: var(--color-web-paper); font-style: normal; }
.cost { display: flex; align-items: center; gap: .3rem; }
.trackbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; width: 100%; }
.lanes-k { display: grid; grid-template-rows: 1.6rem 1fr 1fr; gap: .4rem; }
.lanes-k .lab { writing-mode: vertical-rl; transform: rotate(180deg); padding: .5rem .1rem; align-self: stretch; text-align: center; clip-path: none; border-left: 0; border-bottom: .25rem solid var(--color-web-lime); grid-row: 2; }
.lanes-k .lab--vip { grid-row: 3; border-bottom-color: var(--color-web-violet-light); }
.track { list-style: none; margin: 0; padding: 0 0 .6rem; display: grid; grid-auto-flow: column; grid-auto-columns: 7.4rem; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; }
.tcol { display: grid; grid-template-rows: 1.6rem 1fr 1fr; gap: .4rem; scroll-snap-align: start; }

.track { scroll-snap-type: x mandatory; scroll-padding-inline: .6rem; padding-inline: .6rem 2rem; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent, var(--color-web-ink) .6rem, var(--color-web-ink) calc(100% - 2.2rem), transparent); mask-image: linear-gradient(90deg, transparent, var(--color-web-ink) .6rem, var(--color-web-ink) calc(100% - 2.2rem), transparent); }
.tcol.is-now .day__n { background: var(--color-web-blue); color: var(--color-web-lime); }
.tcol.is-reached .day__n i { background: var(--color-web-lime); }
.rw { position: relative; display: grid; justify-items: center; align-content: center; gap: .3rem; min-height: 7rem; padding: .5rem .3rem; text-align: center; font-size: .875rem; background: var(--color-web-paper); box-shadow: inset 0 0 0 .0625rem var(--color-web-line); }
.rw--vip { background: linear-gradient(var(--color-web-paper), var(--color-web-blue-pale)); box-shadow: inset 0 0 0 .0625rem var(--color-web-violet-light), inset 0 -.25rem 0 var(--color-web-violet); }
.rw--none { background: var(--color-web-mist2); box-shadow: none; }
.rw--claimed { background: var(--color-web-ink2); color: var(--color-web-line-dark); }
.rw--locked > :not(.rw__state) { opacity: .45; }
.rw--ready { box-shadow: inset 0 0 0 .2rem var(--color-web-lime), 0 0 .8rem var(--color-web-lime-glow); }
.rw__state { position: absolute; right: .3rem; top: .3rem; color: var(--color-web-lime); }
.rw--locked .rw__state { color: var(--color-web-muted); }
.rw__state .hub-icon { width: 1rem; height: 1rem; stroke-width: 2.6; }
.rw__ready { position: absolute; left: 50%; bottom: -.1rem; transform: translateX(-50%); padding: 0 .4rem; background: var(--color-web-lime); color: var(--color-web-lime-ink); font-size: .875rem; font-weight: 900; white-space: nowrap; }


.face { display: grid; place-items: center; flex: none; width: 2.8rem; height: 2.8rem; overflow: hidden; background: var(--color-web-blue); color: var(--color-web-paper); font-weight: 900; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.face img { width: 100%; height: 100%; object-fit: cover; }

.clan-logo { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; overflow: hidden; border-radius: .55rem; background: var(--color-web-mist); box-shadow: inset 0 0 0 .0625rem var(--color-web-line); color: var(--color-web-ink); font-size: .875rem; }
.clan-logo img { width: 100%; height: 100%; padding: .12rem; object-fit: contain; }

.crow.has-act { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.crow__act { display: flex; align-items: center; gap: .5rem; }
.crow__act .gb { min-width: 0; }
.crow__sent { font-size: .875rem; font-weight: 800; color: var(--color-web-muted); }
.clan-asks { display: grid; gap: .5rem; padding: .7rem; background: var(--color-web-gold-pale); }

.person.has-end > .person__acts { grid-column: 1 / -1; }
.person__acts { display: flex; flex-wrap: wrap; gap: .4rem; }
.person__acts .gb { flex: 1 1 0; }
.person__acts .gb { min-width: 0; }
.person__tag { justify-self: start; padding: 0 .45rem; background: var(--color-web-gold); color: var(--color-web-ink); font-size: .75rem; font-weight: 900; }
.clan-logo--big { width: 5rem; height: 5rem; font-size: 1.2rem; clip-path: polygon(0 0, calc(100% - .8rem) 0, 100% .8rem, 100% 100%, 0 100%); }
.clan-mine { position: relative; }
.clan-mine > .mcard__mark { position: absolute; right: 1rem; top: .6rem; font-size: 1.4rem; }
.clan-mine__head { display: flex; align-items: center; gap: 1rem; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .5rem; } 
.person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .5rem .7rem; background: var(--color-web-paper); box-shadow: inset 0 0 0 .0625rem var(--color-web-line); --k: .6rem; }
.person:has(.person__lv) { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.person__who { display: grid; min-width: 0; }
.person__who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { justify-self: start; margin-top: .15rem; padding: 0 .4rem; background: var(--color-web-mist2); color: var(--color-web-muted); font-size: .875rem; font-weight: 900; }
.status--online { background: var(--color-web-lime); color: var(--color-web-lime-ink); }
.status--playing { background: var(--color-web-red); color: var(--color-web-paper); }
.status--queue { background: var(--color-web-blue); color: var(--color-web-paper); }

.recp { position: relative; display: grid; grid-template-columns: auto auto; justify-content: space-around; align-items: center; gap: 1rem; padding: 1.3rem 1.2rem 1.1rem; background: linear-gradient(115deg, var(--color-web-ink) 0 68%, var(--color-web-ink2) 68%); color: var(--color-web-paper); box-shadow: inset 0 0 0 .16rem var(--color-web-blue), 0 .26rem 0 var(--color-web-blue-deep); }
.recp .mcard__mark { position: absolute; top: .4rem; right: .8rem; color: var(--color-web-paper); opacity: .3; }
.recp__lv, .recp__dex { display: grid; justify-items: center; gap: .25rem; }
.recp__n { display: grid; place-items: center; width: 5.6rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--color-web-gold-pale), var(--color-web-gold) 55%, var(--color-web-gold-dark)); color: var(--color-web-ink); font-size: 2.4rem; line-height: 1; box-shadow: 0 0 0 .3rem var(--color-web-paper), 0 .4rem 1.2rem var(--color-web-shade); }
.recp__k { font-size: .875rem; font-weight: 800; text-align: center; opacity: .9; }
.recp__sub { font-size: .875rem; opacity: .75; }
.recp__ring { --p: 0; display: grid; place-items: center; width: 5.6rem; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--color-web-lime) calc(var(--p) * 1%), var(--color-web-ink3) 0); box-shadow: 0 .4rem 1.2rem var(--color-web-shade); }
.recp__pct { display: grid; place-items: center; width: calc(100% - 1.1rem); aspect-ratio: 1; border-radius: 50%; background: var(--color-web-ink); font-size: 1.4rem; }
.recl { display: grid; gap: .4rem; }
@media (min-width: 48rem) { .recl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.recl__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .6rem .9rem; border-radius: .9rem; background: var(--color-web-paper); box-shadow: inset 0 0 0 .0625rem var(--color-web-line); }
.recl__row .ic { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: .45rem; border-radius: 50%; background: var(--color-web-blue-pale); color: var(--color-web-blue-deep); }
.recl__row .hub-icon, .empty__ic .hub-icon { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recl__k { font-weight: 800; }
.recl__v { font-size: 1.4rem; font-variant-numeric: tabular-nums; }

.empty { display: grid; justify-items: center; gap: .6rem; padding: 1.6rem 1.2rem 1.4rem; background: var(--color-web-paper); box-shadow: inset 0 0 0 .0625rem var(--color-web-line); text-align: center; }
.empty__ic { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; padding: 1rem; border-radius: 50%; background: var(--color-web-blue-pale); color: var(--color-web-blue-deep); }
.empty__t { margin: 0; font-size: 1.3rem; }
.empty__b { max-width: 26rem; margin: 0; }
.empty__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.empty__acts .gb { min-width: 9rem; }


.soon { position: relative; display: grid; gap: .5rem; padding: 2.2rem 1.2rem 1.2rem; background: var(--color-web-paper); box-shadow: inset 0 0 0 .0625rem var(--color-web-line), inset 0 .3rem 0 var(--color-web-lime); }
.soon .scard__tag { left: 1.2rem; right: auto; top: .9rem; }
.sgrid--soon .scard { min-height: 11rem; }


.fart__use { justify-self: center; margin-top: .4rem; }
.fart__using { justify-self: center; margin: .4rem 0 0; padding: .25rem .8rem; border-radius: 99rem; background: var(--color-web-lime); color: var(--color-web-lime-ink); font-size: .875rem; font-weight: 800; text-align: center; }


.two > .mgift, .two > .mstep { grid-column: 1 / -1; order: -2; }
.mgift__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .6rem; margin-top: .6rem; }
.mgift__card { position: relative; display: grid; gap: .45rem; align-content: start; padding: .9rem 1rem 1rem; border-radius: 1rem; background: linear-gradient(160deg, var(--color-web-gold-pale), var(--color-web-paper) 70%); box-shadow: inset 0 0 0 .14rem var(--color-web-gold), 0 .3rem 0 var(--color-web-gold-dark); animation: mgift-in var(--motion-slow) var(--motion-ease-back) calc(var(--i, 0) * var(--motion-stagger)) both; }
.mgift__card.is-game { background: linear-gradient(160deg, var(--color-web-blue-pale), var(--color-web-paper) 70%); box-shadow: inset 0 0 0 .14rem var(--color-web-blue), 0 .3rem 0 var(--color-web-blue-deep); }
.mgift__top { display: flex; align-items: center; gap: .4rem; }
.mgift__ic { width: 1.6rem; height: 1.6rem; color: var(--color-web-gold-dark); animation: mgift-wiggle calc(var(--motion-slow) * 2) var(--motion-ease-out) calc(var(--motion-slow) + var(--i, 0) * var(--motion-stagger)) 2; }
.mgift__card.is-game .mgift__ic { color: var(--color-web-blue); }
.mgift__from { color: var(--color-web-muted); font-size: .875rem; font-weight: 800; text-transform: uppercase; }
.mgift__title { font-size: 1.15rem; font-weight: 900; }
.mgift__text { margin: 0; font-size: .9375rem; }
.mgift__gifts { display: flex; flex-wrap: wrap; gap: .35rem; }
.mgift__chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem .25rem .3rem; border-radius: 1rem; background: var(--color-web-paper); box-shadow: inset 0 0 0 .0625rem var(--color-web-line); font-size: .875rem; }
.mgift__chip .pz-gift__n { display: none; } 
.mgift__take { justify-self: start; margin-top: .2rem; }
.mgift__all { margin-top: .7rem; }
@keyframes mgift-in { from { opacity: 0; transform: translateY(.8rem) scale(.96); } }
@keyframes mgift-wiggle { 0%, 100% { transform: none; } 20% { transform: rotate(-12deg) scale(1.1); } 40% { transform: rotate(10deg) scale(1.1); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }


.mstep__hint { margin: .2rem 0 .5rem; }
.mstep__bar { height: .5rem; overflow: hidden; border-radius: 1rem; background: var(--color-web-mist2); }
.mstep__bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--color-web-gold), var(--color-web-gold-dark)); transform: scaleX(var(--p, 0)); transform-origin: left center; transition: transform var(--motion-slow) var(--motion-ease-out); }
.mstep__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; padding: .6rem 0; border-top: .0625rem solid var(--color-web-line); animation: mgift-in var(--motion-slow) var(--motion-ease-back) calc(var(--i, 0) * var(--motion-stagger)) both; }
.mstep__ic { width: 2rem; height: 2rem; padding: .35rem; border-radius: 50%; background: var(--color-web-ink); color: var(--color-web-paper); }
.mstep__row.is-done .mstep__ic { background: var(--color-web-gold); color: var(--color-web-ink); }
.mstep__txt { display: grid; gap: .1rem; min-width: 0; }
.mstep__txt b { font-weight: 900; }
.mstep__txt small { color: var(--color-web-muted); font-size: .875rem; }
.mstep__row.is-done .mstep__txt b { text-decoration: line-through; opacity: .7; }
.mstep__oro { color: var(--color-web-gold-dark); font-weight: 900; white-space: nowrap; }
.mstep__done { color: var(--color-web-gold-dark); font-weight: 900; }
.mstep__end { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; } 
@media (max-width: 30rem) {
  .mstep__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mstep__end { grid-column: 2 / -1; }
}