/* Pokédex stampato in stile manuale DS: fondo scuro, pagine destra (recto) / sinistra (verso) speculari.
   Recto: barra laterale sul bordo destro, rilegatura a sinistra. Verso: tutto specchiato. Misure in mm. */
.sheet.dx {
  --dx-panel: #161a23; --dx-ink: #e9ecf3; --dx-mute: #8e97aa; --dx-line: rgba(255,255,255,.08);
  --cell: 16.4mm; /* cella della griglia sprite 3×3: (52 − 1.6 − 1.2) / 3 */
  display: flex; padding: 0; color: var(--dx-ink); font-size: 6pt; line-height: 1.3;
  background:
    radial-gradient(rgba(255,255,255,.045) .22mm, transparent .28mm) 0 0 / 2.4mm 2.4mm,
    linear-gradient(160deg, #151a26, #0c0f15 62%);
}
.dx.verso { flex-direction: row-reverse; }
.dx .tb { font-size: 4.4pt; padding: 0 1.3mm; line-height: 1.75; }

/* ---- area principale ---- */
.dx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 6mm 4mm 6mm 10mm; }
.dx.verso .dx-main { padding: 6mm 10mm 6mm 4mm; }
.dx.noidx.recto .dx-main { padding-right: 8mm; }
.dx.noidx.verso .dx-main { padding-left: 8mm; }
.dx-head {
  flex: none; height: 5mm; margin-bottom: 2.5mm; display: flex; justify-content: space-between; align-items: center;
  border-bottom: .3mm solid var(--dx-line); font-size: 5.6pt; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--dx-mute);
}
.dx.verso .dx-head { flex-direction: row-reverse; }
.dx-title { display: flex; align-items: center; gap: 2mm; color: var(--dx-ink); }
.dx-title i { width: 3.6mm; height: 3.6mm; border-radius: 50%; box-sizing: border-box; border: .4mm solid #11141b; background: linear-gradient(#e5483b 0 42%, #11141b 42% 58%, #f4f4f4 58%); box-shadow: 0 0 0 .3mm rgba(255,255,255,.35); }
.dx-range { font-variant-numeric: tabular-nums; }
.dx-list { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 2.5mm; }
.dx-foot { position: absolute; bottom: 2.5mm; font-size: 8pt; font-weight: 800; color: var(--dx-mute); }
.dx.recto .dx-foot { right: 8mm; } .dx.verso .dx-foot { left: 8mm; }
.dx-note {
  border-radius: 3.5mm; border: .3mm dashed rgba(255,255,255,.12); padding: 3mm 4mm;
  background: repeating-linear-gradient(transparent 0 7mm, rgba(255,255,255,.06) 7mm 7.2mm) 0 8mm / 100% calc(100% - 10mm) no-repeat;
}
.dx-note h4 { margin: 0; font-size: 5pt; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--dx-mute); }

/* ---- scheda ---- */
.dx-e {
  --c2: color-mix(in srgb, var(--c) 62%, #fff);
  position: relative; min-height: 0; overflow: hidden; display: grid; column-gap: 3mm; row-gap: 2.5mm;
  grid-template-rows: minmax(0, 1fr); align-items: center;
  padding: 2.2mm; border-radius: 3.5mm; border: .25mm solid var(--dx-line);
}
.dx-e.al { grid-template-columns: 46mm minmax(0, 1fr) 52mm; grid-template-areas: "art info spr";
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 26%, var(--dx-panel)), var(--dx-panel) 42%); }
.dx-e.ar { grid-template-columns: 52mm minmax(0, 1fr) 46mm; grid-template-areas: "spr info art";
  background: linear-gradient(270deg, color-mix(in srgb, var(--c) 26%, var(--dx-panel)), var(--dx-panel) 42%); }
.dx-e.big { grid-row: span 2; grid-template-rows: 63mm minmax(0, 1fr); }
.dx-e.big.al { grid-template-areas: "art info spr" "tree tree tree"; }
.dx-e.big.ar { grid-template-areas: "spr info art" "tree tree tree"; }
.dx-e::after { content: ""; position: absolute; top: 4mm; bottom: 4mm; width: .8mm; border-radius: .4mm; background: var(--c); }
.dx-e.al::after { left: 0; } .dx-e.ar::after { right: 0; }

/* artwork + shiny */
.dx-art { grid-area: art; position: relative; align-self: stretch; }
.dx-wm { position: absolute; top: -1.5mm; font-size: 30pt; font-weight: 900; letter-spacing: -.04em; line-height: 1; color: rgba(255,255,255,.06); }
.dx-e.al .dx-wm { left: -.5mm; } .dx-e.ar .dx-wm { right: -.5mm; }
.dx-circ {
  position: absolute; top: .5mm; left: 1mm; width: 44mm; height: 44mm; border-radius: 50%; overflow: hidden; box-sizing: border-box;
  border: .7mm solid color-mix(in srgb, var(--c) 60%, #000);
  background: radial-gradient(circle at 50% 38%, #fff 0, color-mix(in srgb, var(--c) 28%, #e8ecf4) 72%);
  box-shadow: 0 0 0 .6mm rgba(255,255,255,.1), 0 1.5mm 4mm rgba(0,0,0,.5);
}
.dx-circ img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 2mm; box-sizing: border-box; }
.dx-shiny { position: absolute; top: 40mm; width: 21mm; height: 21mm; }
.dx-e.al .dx-shiny { right: -1.5mm; } .dx-e.ar .dx-shiny { left: -1.5mm; }
.dx-shiny img {
  width: 100%; height: 100%; object-fit: contain; display: block; box-sizing: border-box; padding: 1.2mm; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #313849, #12151d 80%); border: .6mm solid #f2c14e; box-shadow: 0 1mm 3mm rgba(0,0,0,.6);
}
.dx-shiny span {
  position: absolute; bottom: -1.3mm; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 4pt; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; background: #f2c14e; color: #2a1d00; padding: .15mm 1.4mm; border-radius: 1mm;
}

/* testo */
.dx-info { grid-area: info; align-self: stretch; min-width: 0; display: flex; flex-direction: column; }
.dx-name { display: flex; align-items: center; gap: 2mm; min-width: 0; height: 6mm; flex: none; }
.dx-no { flex: none; font-size: 6.5pt; font-weight: 900; letter-spacing: .04em; background: var(--c); color: #0e1117; padding: .3mm 1.6mm; border-radius: 1mm; font-variant-numeric: tabular-nums; }
.dx-name h3 { margin: 0; min-width: 0; font-size: 14pt; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-form { flex: none; font-size: 4.8pt; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c2); border: .25mm solid var(--c2); padding: .1mm 1.2mm; border-radius: 1mm; }
.dx-sub { flex: none; display: flex; align-items: center; gap: 1mm; margin: .8mm 0 1.6mm; white-space: nowrap; }
.dx-sub > span:not(.tb) { margin-left: 1mm; color: var(--dx-mute); font-size: 5.4pt; }
.dx-cols { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.dx-cols > div { min-width: 0; }
.dx-info h4, .dx-tree h4 {
  display: flex; align-items: center; gap: 1mm; margin: 0 0 .7mm;
  font-size: 4.5pt; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--c2);
}
.dx-info h4::after, .dx-tree h4::after { content: ""; flex: 1; height: .2mm; background: var(--dx-line); }
.dx-info h4 em { order: 1; font-style: normal; letter-spacing: .06em; color: var(--dx-ink); }
.dx-none { margin: 0; color: var(--dx-mute); font-size: 5pt; }

/* statistiche: 8 spicchi pieni o vuoti */
.st { display: grid; grid-template-columns: 5.4mm 1fr 5.2mm; align-items: center; gap: 1mm; height: 2.55mm; font-size: 5.3pt; }
.st b { font-size: 4.5pt; color: var(--dx-mute); letter-spacing: .06em; }
.st span { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.st u { display: grid; grid-template-columns: repeat(8, 1fr); gap: .35mm; height: 1.6mm; }
.st u i { border-radius: .25mm; background: rgba(255,255,255,.09); }
.st u i.on { background: var(--c); }
.wk { display: flex; flex-wrap: wrap; gap: .5mm; align-items: center; margin-top: 1mm; }
.wk b { font-size: 4.3pt; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--c2); margin-right: .5mm; }
.wk i { font-style: normal; font-size: 4.8pt; font-weight: 800; color: var(--dx-mute); margin-left: .3mm; }
.wk .tb { font-size: 3.9pt; padding: 0 1mm; }

.ab { margin-bottom: .9mm; font-size: 5.5pt; }
.ab b { font-weight: 800; }
.ab small { font-size: 4.5pt; color: var(--dx-mute); }
.ab i { font-style: normal; font-size: 3.9pt; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.13); padding: .1mm .8mm; border-radius: .6mm; vertical-align: .2mm; }
.ab p { margin: .2mm 0 0; font-size: 4.9pt; line-height: 1.26; color: #b4bccb; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* evoluzioni: ogni sprite grande quanto una cella della griglia 3×3 */
.dx-evo { flex: none; margin-top: auto; }
.evs { display: flex; align-items: flex-start; gap: .8mm; }
.ev { width: var(--cell); min-width: 0; flex: none; text-align: center; }
.ev-img { position: relative; width: var(--cell); height: calc(var(--cell) - 1.6mm); overflow: hidden; border-radius: 1.6mm; background: rgba(255,255,255,.035); }
.ev-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(1.05); }
.ev b { display: block; margin-top: .3mm; font-size: 4.4pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev em { display: block; font-style: normal; font-size: 3.8pt; color: var(--dx-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.me .ev-img { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c) 34%, #0a0d12), #0f131b 75%); box-shadow: inset 0 0 0 .3mm color-mix(in srgb, var(--c) 70%, transparent); }
.ev.me b { color: var(--c2); }
.arw { align-self: flex-start; margin-top: calc((var(--cell) - 1.6mm) / 2 - 2mm); font-size: 9pt; line-height: 1; color: var(--dx-mute); }

/* albero evolutivo delle schede doppie */
.dx-tree { grid-area: tree; align-self: stretch; min-height: 0; display: flex; flex-direction: column; padding: 2mm 3mm; border-radius: 2.6mm; background: rgba(0,0,0,.22); border: .25mm solid var(--dx-line); }
.dx-tree .tr { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2mm 6mm; }
.tn { display: flex; align-items: center; gap: 1.2mm; }
.tn > .arw { align-self: center; margin-top: -3mm; }
.tk { display: flex; flex-direction: column; gap: 1.2mm; }
.tk.wide { display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 1.2mm 3mm; }

/* ---- sprite delle generazioni ---- */
.dx-spr {
  grid-area: spr; width: 52mm; height: 52mm; box-sizing: border-box; padding: .8mm; gap: .6mm;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
  border-radius: 2.6mm; background: #0a0d12; border: .25mm solid var(--dx-line);
}
.dx-e.al .dx-spr:not(.l-grid) { direction: rtl; } /* lo sprite grande sta verso il bordo esterno; la griglia 3×3 resta in ordine cronologico */
.dx-spr figure { position: relative; margin: 0; min-width: 0; min-height: 0; overflow: hidden; direction: ltr; border-radius: 1.6mm; background: rgba(255,255,255,.035); }
.dx-spr figure img { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 1.6mm); object-fit: contain; transform: scale(var(--k, 1)); }
.dx-spr figcaption { position: absolute; left: 0; right: 0; bottom: .35mm; text-align: center; white-space: nowrap; font-size: 3.5pt; letter-spacing: .05em; text-transform: uppercase; color: #7f889b; }
.dx-spr .hero { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c) 34%, #0a0d12), #0f131b 75%); box-shadow: inset 0 0 0 .3mm color-mix(in srgb, var(--c) 70%, transparent); }
.dx-spr .hero figcaption { color: var(--c2); font-weight: 900; font-size: 4.2pt; }
.dx-spr .nil { background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 .8mm, transparent .8mm 1.6mm); }
.l-solo .hero { grid-area: 1 / 1 / 4 / 4; }
.l-ell .hero { grid-area: 1 / 1 / 3 / 3; }
.l-side { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.l-side .side { min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: .6mm; }
.l-side .side figure { flex: none; height: calc((100% - 1.2mm) / 3); }
.l-none { display: grid; place-items: center; color: var(--dx-mute); }

/* ---- barra laterale (bordo esterno): pagina precedente, corrente, successiva ---- */
.dx-idx {
  flex: none; width: 22mm; box-sizing: border-box; padding: 6mm 0; display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, #1c212c, #11151d); border-left: .3mm solid rgba(255,255,255,.07);
}
.dx.verso .dx-idx { border-left: 0; border-right: .3mm solid rgba(255,255,255,.07); }
.dx-idx-gen { flex: none; text-align: center; font-size: 10pt; font-weight: 900; line-height: 1; margin-bottom: 2mm; }
.dx-idx-gen small { display: block; margin-bottom: .6mm; font-size: 4.2pt; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--dx-mute); }
.dx-idx-grps { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: 3mm; }
.dx-idx .grp { flex: 1; min-height: 0; margin: 0 1.2mm; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); border-radius: 3mm; }
.dx-idx .grp.on { background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 .3mm rgba(255,255,255,.14); }
.dx-idx .sl { min-height: 0; display: grid; place-items: center; }
.dx-idx .sl img { width: 18mm; height: 18mm; }
.dx-idx .grp:not(.on) .sl img { opacity: .45; }
.dx-idx .grp.on .sl img { background: #eef1f6; border-radius: 50%; box-shadow: 0 0 0 .4mm var(--c); }
.dx-idx-pg { flex: none; margin-top: 2mm; font-size: 15pt; font-weight: 900; font-variant-numeric: tabular-nums; }