/* Base condivisa: token, tipi, componenti minimi. Nessuna dipendenza esterna. */
:root {
  color-scheme: light dark;
  --bg: #f4f5f8; --surface: #fff; --surface-2: #eceef3; --line: #dfe2ea;
  --text: #171a22; --muted: #667085; --accent: #e5483b; --accent-ink: #fff;
  --radius: 12px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 14px rgba(16,24,40,.06);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1116; --surface: #181b23; --surface-2: #232733; --line: #2b3040;
    --text: #eceef4; --muted: #98a2b3; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --bg: #0f1116; --surface: #181b23; --surface-2: #232733; --line: #2b3040;
  --text: #eceef4; --muted: #98a2b3; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 var(--font); }
img { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn:focus-visible, .field:focus-visible, .chip:focus-visible, .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.field {
  min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); width: 100%;
}
select.field { padding-right: 6px; }

/* ---- Tipi ---- */
[data-t] { --c: #999; }
[data-t="Normal"] { --c: #a8a77a; } [data-t="Fire"] { --c: #ee8130; } [data-t="Water"] { --c: #6390f0; }
[data-t="Electric"] { --c: #f7d02c; } [data-t="Grass"] { --c: #7ac74c; } [data-t="Ice"] { --c: #96d9d6; }
[data-t="Fighting"] { --c: #c22e28; } [data-t="Poison"] { --c: #a33ea1; } [data-t="Ground"] { --c: #e2bf65; }
[data-t="Flying"] { --c: #a98ff3; } [data-t="Psychic"] { --c: #f95587; } [data-t="Bug"] { --c: #a6b91a; }
[data-t="Rock"] { --c: #b6a136; } [data-t="Ghost"] { --c: #735797; } [data-t="Dragon"] { --c: #6f35fc; }
[data-t="Dark"] { --c: #705746; } [data-t="Steel"] { --c: #b7b7ce; } [data-t="Fairy"] { --c: #d685ad; }

.tb {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase; background: var(--c); color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.35); line-height: 1.6;
}
.pix { image-rendering: pixelated; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.banner { background: #fff4d6; color: #5a4300; padding: 8px 16px; font-size: 13px; text-align: center; }