button.dexcell { position: relative; border: 0; font: inherit; color: inherit; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease-out); }
button.dexcell:hover { transform: translateY(-.15rem); }
button.dexcell:active { transform: scale(.96); }
.dexcell__type { position: absolute; top: .3rem; left: .3rem; width: 1.1rem; }


.dxs { display: grid; gap: .9rem; }
.dxs__hero { --c: var(--color-web-blue); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6rem 1rem; padding: 1rem 1.1rem; overflow: hidden; isolation: isolate; border-radius: 1.2rem; color: var(--color-web-paper);
  background: radial-gradient(80% 120% at 18% 75%, color-mix(in srgb, var(--c) 72%, transparent), transparent 70%), linear-gradient(135deg, var(--color-web-ink2), var(--color-web-ink)); }
.dxs__rays { position: absolute; left: -12%; top: -45%; z-index: -1; width: 75%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(color-mix(in srgb, var(--color-web-paper) 9%, transparent) 0 6deg, transparent 6deg 18deg); animation: pk-turn 45s linear infinite; }
.dxs__poke { position: relative; display: grid; place-items: end center; min-width: 8rem; min-height: 8rem; padding: 0; border: 0; background: none; cursor: pointer; }
.dxs__poke:active { transform: scale(.97); }
.dxs__who { display: grid; gap: .3rem; align-content: center; min-width: 0; }
.dxs__num { font-family: var(--font-mono), monospace; font-size: .875rem; opacity: .8; }
.dxs__name { margin: 0; font-size: 1.6rem; line-height: 1.05; overflow-wrap: anywhere; }
.dxs__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tychip--big { padding: .15rem .7rem .15rem .15rem; background: color-mix(in srgb, var(--c, var(--color-web-ink3)) 70%, var(--color-web-ink)); color: var(--color-web-paper); }
.tychip--big .tylogo { width: 1.45rem; }
.dxs__tier { align-self: center; padding: .1rem .6rem; border-radius: 99rem; background: var(--color-web-glass-dark); font-size: .875rem; font-weight: 900; }
.dxs__tier--legend { background: var(--color-web-gold); color: var(--color-web-ink); }
.dxs__have { justify-self: start; padding: .1rem .6rem; border-radius: .4rem; background: var(--color-web-glass-dark); font-size: .875rem; font-weight: 900; letter-spacing: .04em; }
.dxs__have.is-on { background: var(--color-web-lime); color: var(--color-web-lime-ink); }
.dxs__hint { right: auto; left: 1rem; top: .8rem; }
.dxs__sec { display: grid; gap: .5rem; padding: .9rem 1rem; border-radius: 1rem; background: var(--color-web-mist); }
.dxs__t { margin: 0; font-size: 1.05rem; }
.dxs__lvtag { justify-self: start; padding: .15rem .8rem; border-radius: 99rem; background: var(--color-web-ink); color: var(--color-web-paper); font-weight: 900; }
.dxs__lvtag.is-mine { background: var(--color-web-lime); color: var(--color-web-lime-ink); }
.dxs__power { font-size: 1.3rem; color: var(--color-web-blue); }
.dxs__bars { display: grid; gap: .35rem; }
.dxs__stat { display: grid; grid-template-columns: 5.8rem minmax(0, 1fr) 3.6rem; align-items: center; gap: .5rem; }
.dxs__k { font-size: .875rem; font-weight: 800; }
.dxs__track { height: .7rem; overflow: hidden; border-radius: 99rem; background: var(--color-web-mist2); }
.dxs__bar { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-web-blue), var(--color-web-violet)); transform-origin: left; transform: scaleX(var(--p)); animation: rv-bar var(--motion-slow) var(--motion-ease-out) calc(var(--i) * 60ms) backwards; }
@keyframes rv-bar { from { transform: scaleX(0); } }
.dxs__v { font-family: var(--font-mono), monospace; text-align: right; }
.dxs__ab { display: grid; gap: .15rem; padding: .5rem .7rem; border-radius: .8rem; background: var(--color-web-paper); }
.dxs__abh { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.dxs__chip { padding: 0 .5rem; border-radius: 99rem; background: var(--color-web-ink2); color: var(--color-web-paper); font-size: .875rem; font-weight: 900; }
.dxs__chip--on { background: var(--color-web-lime); color: var(--color-web-lime-ink); }
.dxs__mv { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: .8rem; background: var(--color-web-paper); }
.dxs__mvlogo { width: 2.1rem; border-radius: .5rem; }
.dxs__mvt { display: grid; gap: .1rem; min-width: 0; }
.dxs__mvl { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
.dxs__learn { padding: .1rem .55rem; border-radius: 99rem; background: var(--color-web-ink); color: var(--color-web-lime); font-size: .875rem; font-weight: 900; white-space: nowrap; }
.dxs__evo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.dxs__arrow { padding: .1rem .55rem; border-radius: 99rem; background: var(--color-web-ink); color: var(--color-web-paper); font-size: .875rem; font-weight: 900; white-space: nowrap; }
.dxs__evog { display: flex; flex-wrap: wrap; align-items: end; gap: .3rem; }
.dxs__evom { display: grid; justify-items: center; gap: .1rem; min-width: 4.6rem; padding: .3rem; border: 0; border-radius: .8rem; background: var(--color-web-paper); color: inherit; font: inherit; font-size: .875rem; font-weight: 800; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease-out); }
.dxs__evom:hover { transform: translateY(-.15rem); }
.dxs__evom:active { transform: scale(.95); }
.dxs__evom.is-me { box-shadow: inset 0 0 0 .18rem var(--color-web-blue); cursor: default; }
.dxs__branch { flex-basis: 100%; }
@media (max-width: 30rem) {
  .dxs__hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .dxs__tags { justify-content: center; }
  .dxs__have { justify-self: center; }
  .dxs__stat { grid-template-columns: 4.8rem minmax(0, 1fr) 3.2rem; }
}


.recp__medals { grid-column: 1 / -1; justify-self: center; padding: .2rem .9rem; border-radius: 99rem; background: var(--color-web-glass-dark); color: var(--color-web-gold); font-weight: 900; }
.recl__row.rec { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic k v" "ic track m" "ic next next"; row-gap: .25rem; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
  animation: rec-in var(--motion-slow) var(--motion-ease-out) calc(var(--i) * 70ms) backwards; transition: transform var(--motion-fast) var(--motion-ease-out); }
@keyframes rec-in { from { opacity: 0; transform: translateY(.6rem); } }
.rec:hover { transform: translateY(-.12rem); }
.rec:active { transform: scale(.98); }
.rec > .ic { grid-area: ic; }
.rec .recl__k { grid-area: k; }
.rec .recl__v { grid-area: v; }
.recm { grid-area: m; position: relative; overflow: hidden; padding: .05rem .6rem; border-radius: 99rem; background: var(--color-web-mist2); color: var(--color-web-muted); font-size: .875rem; font-weight: 900; white-space: nowrap; }
.rec--m1 .recm { background: color-mix(in srgb, var(--color-web-gold-dark) 60%, var(--color-web-red)); color: var(--color-web-paper); }
.rec--m2 .recm { background: var(--color-web-line-dark); color: var(--color-web-ink); }
.rec--m3 .recm { background: var(--color-web-gold); color: var(--color-web-ink); }
.rec--m4 .recm { background: var(--color-web-cyan); color: var(--color-web-ink); }
.rec--m5 .recm { background: var(--color-web-violet-light); color: var(--color-web-ink); }
.rec--m6 .recm { background: linear-gradient(90deg, var(--color-web-pink), var(--color-web-violet), var(--color-web-cyan)); color: var(--color-web-paper); }

.recm__shine { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--color-web-paper) 60%, transparent) 50%, transparent 70%); transform: translateX(-120%); animation: rec-shine 1.1s ease-out calc(var(--i) * 70ms + 500ms) 1 both; }
@keyframes rec-shine { to { transform: translateX(120%); } }
.recl__track { grid-area: track; align-self: center; height: .55rem; overflow: hidden; border-radius: 99rem; background: var(--color-web-mist2); }
.recl__fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-web-lime-dark), var(--color-web-lime)); transform-origin: left; transform: scaleX(var(--p)); animation: rv-bar var(--motion-slow) var(--motion-ease-out) calc(var(--i) * 70ms + 200ms) backwards; }
.recl__next { grid-area: next; color: var(--color-web-muted); font-size: .875rem; font-weight: 700; }
.recstar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; padding: .8rem 1.2rem; border-radius: 1.1rem; color: var(--color-web-paper);
  background: radial-gradient(80% 140% at 14% 62%, color-mix(in srgb, var(--color-web-gold) 45%, transparent), transparent 70%), linear-gradient(120deg, var(--color-web-ink2), var(--color-web-ink)); }
.recstar:empty { display: none; }
.recstar__go { padding: 0; border: 0; background: none; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease-out); }
.recstar__go:hover { transform: translateY(-.15rem); }
.recstar__txt { display: grid; gap: .15rem; min-width: 0; }
.recstar__k { color: var(--color-web-gold); font-size: .875rem; font-weight: 900; letter-spacing: .06em; }
.recstar__n { font-size: 1.4rem; }
.recstar .sub { color: var(--color-web-mist2); }


.fbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.fadd { display: grid; gap: .7rem; }
.fadd__steps { display: grid; gap: .35rem; margin: 0; padding-left: 1.3rem; }
.fadd__field { display: flex; align-items: center; gap: .2rem; padding: 0 .7rem; border-radius: .9rem; background: var(--color-web-paper); box-shadow: inset 0 0 0 .15rem var(--color-web-line); transition: box-shadow var(--motion-fast) var(--motion-ease-out); }
.fadd__field:focus-within { box-shadow: inset 0 0 0 .18rem var(--color-web-blue); }
.fadd__at { color: var(--color-web-muted); font-size: 1.1rem; font-weight: 900; }
:root .fadd__in { flex: 1; min-width: 0; padding: .75rem .2rem; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; font-size: 1rem; outline: none; }
.fadd__say { min-height: 1.4rem; margin: 0; }
.fadd__say.is-ok { color: var(--color-web-blue); animation: fadd-ok var(--motion-slow) cubic-bezier(.2, 1.6, .4, 1); }
@keyframes fadd-ok { from { opacity: 0; transform: scale(.85); } }


.xt-zone { grid-template-columns: minmax(0, 1fr) auto; column-gap: .8rem; transition: transform var(--motion-fast) var(--motion-ease-out), box-shadow var(--motion-fast) var(--motion-ease-out); }
.xt-zone > :not(.xt-diff, .xt-zone__deco) { grid-column: 1; }
.xt-zone:hover { transform: translateY(-.18rem); box-shadow: 0 .55rem 1.2rem var(--color-web-faint); }
.xt-diff { --dc: var(--color-web-lime); grid-column: 2; grid-row: 1 / span 6; align-self: start; display: grid; justify-items: center; gap: .3rem; min-width: 6.6rem; padding: .65rem .7rem; border-radius: .9rem; background: var(--color-web-glass-dark); color: var(--color-web-paper); text-align: center; box-shadow: inset 0 0 0 .14rem var(--dc); }
.xt-diff--mid { --dc: var(--color-web-gold); }
.xt-diff--high { --dc: var(--color-web-red); }
.xt-diff--max { --dc: var(--color-web-pink); }
.xt-diff__k { font-size: .875rem; font-weight: 900; letter-spacing: .08em; opacity: .85; }
.xt-diff__meter { display: flex; align-items: end; gap: .2rem; }
.xt-diff__meter i { width: .5rem; height: calc(.55rem + var(--i) * .3rem); border-radius: .15rem; background: color-mix(in srgb, var(--color-web-paper) 22%, transparent); }
.xt-diff__meter i.is-on { background: var(--dc); box-shadow: 0 0 .5rem var(--dc); transform-origin: bottom; animation: xt-diff-bar var(--motion-slow) cubic-bezier(.2, 1.6, .4, 1) calc(var(--i) * 90ms + 150ms) backwards; }
@keyframes xt-diff-bar { from { transform: scaleY(0); } }
.xt-diff__v { color: var(--dc); font-size: 1.15rem; }
.xt-diff__types { display: flex; gap: .2rem; }
.xt-diff__type { width: 1.45rem; }
.xt-diff__h { font-size: .875rem; font-weight: 800; opacity: .85; }
@media (max-width: 30rem) { .xt-diff { min-width: 5.4rem; padding: .5rem; } }


.xt-art.is-game .xt-art__img { image-rendering: pixelated; object-fit: contain; }