.bag__lead { grid-column: 1 / -1; margin: 0; }
.bagp { display: grid; gap: .6rem; align-content: start; }
.bagp__n { font-family: var(--font-display); font-size: 1.1rem; }
.bagp > .gb { justify-self: start; }


.bags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.bags__t { --k: var(--color-web-blue); position: relative; display: grid; justify-items: start; gap: .35rem; padding: .7rem .8rem .8rem; border-radius: .8rem; background: var(--color-web-mist); }
.bags__t--auras { --k: var(--color-web-violet); }
.bags__patch { position: absolute; right: .7rem; top: .7rem; width: 2.2rem; height: 2.2rem; border: .14rem dashed var(--k); border-radius: .45rem; background: color-mix(in srgb, var(--k) 16%, transparent); transform: rotate(8deg); animation: bag-patch var(--motion-slow) var(--motion-ease-back) both; }
.bags__k { padding-right: 2.6rem; font-weight: 800; color: var(--color-web-muted); }
.bags__t > .gb { justify-self: stretch; min-width: 0; }
.bags__t > .gb .in { padding-inline: 1rem; }
.bags__n { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--k); }
@keyframes bag-patch { from { opacity: 0; transform: rotate(-30deg) scale(.4); } }


.bagg { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .5rem; }
.bagc { display: grid; justify-items: center; align-content: start; gap: .2rem; padding: .55rem .4rem .5rem; border-radius: .8rem; background: var(--color-web-mist); text-align: center; animation: bag-in var(--motion-slow) var(--motion-ease-back) both; animation-delay: calc(var(--i, 0) * var(--motion-stagger)); }
.bagc__art { display: grid; place-items: center; width: 3rem; height: 3rem; }
.bagc__art > * { max-width: 100%; max-height: 100%; }
.bagc__art .hub-icon { width: 2rem; height: 2rem; color: var(--color-web-blue); }
.bagc__img { width: 2.8rem; height: 2.8rem; object-fit: contain; }
.bagc__name { font-size: .875rem; font-weight: 700; line-height: 1.15; }
.bagc__n { font-family: var(--font-display); font-size: 1.15rem; line-height: 1; }
.bagc__use { font-size: .875rem; line-height: 1.2; color: var(--color-web-muted); }
.bagc__stars { color: var(--color-web-gold); letter-spacing: .05em; }
@keyframes bag-in { from { opacity: 0; transform: translateY(.45rem) scale(.92); } }


.bagst { display: grid; gap: .55rem; }
.bagst__r { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .2rem .6rem; padding: .5rem .7rem; border-radius: .8rem; background: var(--color-web-mist); }
.bagst__k { font-family: var(--font-display); font-size: 1rem; }
.bagst__chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.bagst__chip { width: 1.9rem; height: 1.9rem; font-size: .875rem; }
.bagst__on { grid-column: 1 / -1; font-size: .875rem; color: var(--color-web-muted); }


.retal { --k: var(--color-web-muted); display: inline-block; flex-shrink: 0; width: .9rem; height: .9rem; border: .1rem dashed var(--k); border-radius: .22rem; background: color-mix(in srgb, var(--k) 18%, transparent); transform: rotate(8deg); }
.retal--auras { --k: var(--color-web-violet); }
.retal--finishers { --k: var(--color-web-blue); }
.bcol__shards { display: inline-flex; align-items: center; gap: .35rem; }


.bagp__help, .bcol__help { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; }
.sguide { display: grid; gap: .8rem; }
.sguide__s { display: grid; gap: .4rem; animation: bag-in var(--motion-slow) var(--motion-ease-back) both; animation-delay: calc(var(--i, 0) * var(--motion-stagger)); }
.sguide__s .sub { margin: 0; }
.sguide__h { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.sguide__n { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--color-web-ink); color: var(--color-web-paper); font-family: var(--font-display); font-size: 1rem; }
.sguide__t { display: grid; gap: .3rem; padding: .45rem .7rem; border-radius: .8rem; background: var(--color-web-mist); }
.sguide__r { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.sguide__v { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-display); font-size: 1rem; }
.sguide__have { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.sguide__bag { display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem; border-radius: .8rem; background: var(--color-web-mist); }
.sguide__bag b { font-family: var(--font-display); font-size: 1.3rem; }
.sguide__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.sguide__acts .gb { min-width: 0; }

.bcol.is-focus { animation: bcol-focus calc(var(--motion-slow) * 3) var(--motion-ease-out) 1; }
@keyframes bcol-focus { from { box-shadow: 0 0 0 .35rem var(--color-web-lime); } to { box-shadow: 0 0 0 0 transparent; } }