.ficha { grid-template-columns: minmax(0, 1fr); }
@media (orientation: landscape) and (min-width: 56rem) { .ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 1.4rem; align-items: start; } .fart { position: sticky; top: 0; } }

.fart { --c: var(--color-rarity-normal); --k: 1.4rem; position: relative; display: grid; grid-template-rows: auto minmax(14rem, 1fr) auto; padding: 1rem 1.1rem .8rem; overflow: hidden; color: var(--color-web-paper);
  background: radial-gradient(var(--color-web-paper) .08rem, transparent .1rem) 0 0 / .7rem .7rem, linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, var(--color-web-ink)), color-mix(in srgb, var(--c) 25%, var(--color-web-ink)) 70%);
  box-shadow: inset -.4rem 0 0 var(--c); }
.fart::after { content: ""; position: absolute; left: 50%; bottom: 3.4rem; width: 70%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border: .12rem dashed var(--color-web-paper); opacity: .25; pointer-events: none; }
.fart__head { position: relative; z-index: 1; display: grid; justify-items: start; gap: .25rem; }
.fart__name { font-size: 2.1rem; font-weight: 900; font-style: italic; line-height: 1; text-shadow: .1rem .1rem 0 var(--color-web-ink); }
.fart__lv { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fart__lvchip { padding: 0 .7rem 0 .4rem; background: var(--color-web-lime); color: var(--color-web-lime-ink); font-weight: 900; clip-path: polygon(0 0, 100% 0, calc(100% - .4rem) 100%, 0 100%); }
.fart__power { font-family: var(--font-mono), monospace; font-size: .95rem; }
.fart__power b { color: var(--color-web-lime); }
.fart__art { position: relative; z-index: 1; display: grid; align-items: end; justify-items: center; padding-top: 1rem; }
.fart__art .stand { --fw: 13rem; --fh: 3.4rem; }

.fart__poke { position: relative; z-index: 1; display: grid; justify-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.fart__hint { position: absolute; right: 8%; top: 18%; z-index: 2; padding: .05rem .6rem; background: var(--color-web-lime); color: var(--color-web-lime-ink); font-size: .875rem; font-weight: 900; clip-path: polygon(.35rem 0, 100% 0, calc(100% - .35rem) 100%, 0 100%); animation: hint 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes hint { 50% { transform: translateY(-.25rem); } }
.fart__hit { position: absolute; left: 50%; bottom: 30%; z-index: 2; width: 7rem; aspect-ratio: 1; margin-left: -3.5rem; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 .35rem var(--color-web-lime), 0 0 1.2rem var(--color-web-lime-glow); animation: hit .45s ease-out forwards; }
@keyframes hit { from { opacity: 1; transform: scale(.3); } to { opacity: 0; transform: scale(1.9); } }

.fart__poke.is-power { animation: fart-power var(--motion-slow) var(--motion-ease-back); }
.fart__power { position: absolute; left: 50%; bottom: 18%; z-index: 0; width: 9rem; aspect-ratio: 1; margin-left: -4.5rem; border-radius: 50%; box-shadow: inset 0 0 0 .3rem var(--color-web-violet-light), 0 0 1.6rem var(--color-web-violet); opacity: 0; pointer-events: none; animation: fart-ring var(--motion-slow) var(--motion-ease-out); }
.fart__plus { position: absolute; left: 50%; bottom: 58%; z-index: 3; padding: .15rem .7rem; border-radius: 1rem; background: var(--color-web-violet); color: var(--color-web-paper); font-size: 1.1rem; font-weight: 900; white-space: nowrap; translate: -50% 0; box-shadow: 0 .3rem .8rem var(--color-web-shade); pointer-events: none; animation: fart-plus calc(var(--motion-slow) * 2) var(--motion-ease-out) forwards; }
@keyframes fart-power { 20% { transform: scale(1.08, .86); } 55% { transform: translateY(-1.8rem) scale(.95, 1.07); } 80% { transform: scale(1.05, .93); } }
@keyframes fart-ring { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes fart-plus { 0% { opacity: 0; transform: translateY(.6rem) scale(.6); } 20% { opacity: 1; transform: none; } 70% { opacity: 1; transform: translateY(-1.4rem); } 100% { opacity: 0; transform: translateY(-2.2rem); } }
.fart__nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 1rem; padding-top: .6rem; }
.fart__count { font-family: var(--font-mono), monospace; font-weight: 700; }
.arrow { display: grid; place-items: center; width: 2.6rem; height: 2.3rem; padding: 0; border: 0; background: var(--color-web-paper); color: var(--color-web-ink); clip-path: polygon(.5rem 0, 100% 0, calc(100% - .5rem) 100%, 0 100%); }
.arrow .hub-icon { stroke-width: 3; }
.arrow--next .hub-icon { transform: scaleX(-1); }
.stars { color: var(--color-web-line-dark); letter-spacing: -.05em; }
.stars i { font-style: normal; }
.stars .on { color: var(--color-web-gold); }
.rar { padding: 0 .5rem; background: var(--color-web-ink); color: var(--c); font-size: .875rem; font-weight: 900; }
.types { display: flex; flex-wrap: wrap; gap: .3rem; }
.type { padding: 0 .45rem; background: var(--color-web-glass-dark); font-size: .875rem; font-weight: 900; letter-spacing: .04em; }
.type--live { background: var(--color-web-red); }
.type--shiny { background: var(--color-web-gold); color: var(--color-web-ink); }

.finfo { display: grid; gap: .8rem; }
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.skill { display: grid; justify-items: center; gap: .2rem; padding: .7rem .3rem .6rem; border: 0; background: var(--color-web-ink); color: var(--color-web-paper); clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% .7rem, 100% 100%, .7rem 100%, 0 calc(100% - .7rem)); transition: transform .15s; }
.skill:hover { transform: translateY(-.15rem); }
.skill__c { display: grid; place-items: center; width: 3.2rem; aspect-ratio: 1.12; background: var(--color-web-blue); font-size: 1.15rem; font-weight: 900; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.skill--special .skill__c { background: var(--color-web-pink); }
.skill--passive .skill__c { background: var(--color-web-violet); color: var(--color-web-lime); }
.skill__k { font-family: var(--font-mono), monospace; font-size: .875rem; color: var(--color-web-lime); text-transform: uppercase; }
.skill__n { font-size: .875rem; font-weight: 800; text-align: center; line-height: 1.15; }
.skills__ab { font-size: .875rem; }
.radar { width: min(100%, 24rem); justify-self: center; }
.radar svg { display: block; width: 100%; height: auto; overflow: visible; }
.radar__ring { fill: var(--color-web-mist); stroke: var(--color-web-ink); stroke-width: 2; }
.radar__ring--in { fill: none; stroke: var(--color-web-line-dark); stroke-width: 1.2; stroke-dasharray: 4 4; }
.radar__shape { fill: var(--color-web-blue); fill-opacity: .55; stroke: var(--color-web-blue); stroke-width: 2.5; stroke-linejoin: round; }
.radar__label { font-family: var(--font-web-body), var(--font-swsh), sans-serif; font-weight: 800; fill: var(--color-web-muted); text-anchor: middle; }
.radar__value { font-family: var(--font-web-body), var(--font-swsh), sans-serif; font-weight: 900; fill: var(--color-web-ink); text-anchor: middle; }
.move { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; padding: .35rem .2rem; border-bottom: .0625rem solid var(--color-web-line); font-size: .88rem; }
.move:last-child { border-bottom: 0; }
.pw { font-size: .875rem; color: var(--color-web-muted); }
.pw--n { min-width: 2.2rem; padding: 0 .4rem; background: var(--color-web-ink); color: var(--color-web-lime); font-family: var(--font-mono), monospace; text-align: center; }


.gear { position: absolute; left: 6%; bottom: .6rem; z-index: 3; display: grid; justify-items: center; gap: .2rem; padding: 0; border: 0; background: none; color: var(--color-web-ink); font: inherit; cursor: pointer; }
.gear__box { display: grid; place-items: center; width: 4.4rem; aspect-ratio: 1; border: .2rem dashed var(--color-web-line-dark); border-radius: 1rem; background: var(--color-web-glass); box-shadow: 0 .3rem .8rem var(--color-web-faint); transition: transform var(--motion-fast) var(--motion-ease-out); }
.gear:hover .gear__box { transform: translateY(-.15rem); }
.gear__plus { color: var(--color-web-blue); font-size: 2.6rem; line-height: 1; }
.gear.is-on .gear__box { border: .2rem solid var(--color-web-gold); background: var(--color-web-paper); box-shadow: 0 0 0 .2rem var(--color-web-gold-pale), 0 .3rem .8rem var(--color-web-faint); }
.gear__pic { width: 70%; height: 70%; }
.gear__stars { display: flex; gap: .05rem; color: var(--color-web-line); font-size: .875rem; line-height: 1; }
.gear__stars .on { color: var(--color-web-gold); }
.gear__k { padding: .05rem .6rem; border-radius: 1rem; background: var(--color-web-ink); color: var(--color-web-paper); font-size: .875rem; font-weight: 900; letter-spacing: .04em; }

.gearpick { display: grid; gap: .7rem; }
.gearpick.is-busy { pointer-events: none; opacity: .6; }

.gearpick__now { display: grid; gap: .55rem; padding: .7rem .8rem .8rem; border-radius: .9rem; background: var(--color-web-gold-pale); }
.gearpick__nowhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; }
.gearpick__nowtxt { display: grid; gap: .15rem; min-width: 0; }
.gearpick__nowhead .gb { min-width: 0; }
.gearpick__now .gear__stars { font-size: 1.25rem; }
.gearpick__now .gear__stars .is-new { display: inline-block; animation: gear-star var(--motion-slow) var(--motion-ease-back) both; text-shadow: 0 0 .6rem var(--color-web-gold); }
@keyframes gear-star { 0% { opacity: 0; transform: scale(2.6) rotate(-40deg); } 60% { opacity: 1; transform: scale(.85); } }
.gearpick__does { display: grid; gap: .15rem; padding: .45rem .6rem; border-radius: .7rem; background: var(--color-web-paper); }
.gearpick__does small { color: var(--color-web-muted); font-size: .875rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; }
.gearpick__does p { margin: 0; font-size: .9375rem; line-height: 1.3; }
.gearpick__does.is-next { box-shadow: inset 0 0 0 .14rem var(--color-web-violet-light); }
.gearpick__does.is-next small { color: var(--color-web-violet); }
.gearpick__now > .gb { justify-self: stretch; }
.gearpick__max { justify-self: center; padding: .2rem .8rem; border-radius: 1rem; background: var(--color-web-gold); color: var(--color-web-ink); font-weight: 900; }
.gearpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .55rem; }
.gearpick__it { position: relative; display: grid; justify-items: center; align-content: start; gap: .25rem; padding: .9rem .5rem .7rem; border: 0; border-radius: 1rem; background: var(--color-web-mist); color: var(--color-web-ink); font: inherit; text-align: center; cursor: pointer; }
.gearpick__it .ipic { width: 3.6rem; height: 3.6rem; }
.gearpick__it.is-best { background: var(--color-web-gold-pale); box-shadow: inset 0 0 0 .18rem var(--color-web-gold); }
.gearpick__n { font-size: .9375rem; }
.gearpick__l { color: var(--color-web-muted); font-size: .875rem; line-height: 1.25; }
.gearpick__best { position: absolute; top: -.5rem; left: 50%; translate: -50% 0; padding: .05rem .55rem; border-radius: 1rem; background: var(--color-web-gold); color: var(--color-web-ink); font-size: .875rem; font-weight: 900; white-space: nowrap; }
.gearpick__has { padding: .05rem .5rem; border-radius: 1rem; background: var(--color-web-mist2); color: var(--color-web-muted); font-size: .875rem; font-weight: 800; }


.type.type--logo { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem .1rem .15rem; background: color-mix(in srgb, var(--c, var(--color-web-ink3)) 60%, var(--color-web-ink)); color: var(--color-web-paper); }
.skill__n .skill__logo { width: 1rem; margin-right: .3rem; }
.move .tychip { justify-self: start; color: var(--color-web-ink); }