/* ========================================
   POKESTATS ULTRA — BASE + COMPATIBILIDAD
   Los componentes nuevos viven en dex.css y los temas en themes.css.
   Aquí: reset, utilidades y las clases antiguas reasignadas a los tokens
   del sistema de diseño (por si algún módulo aún las usa).
   ======================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--dx-font);
    background: var(--dx-bg);
    color: var(--dx-text);
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    line-height: 1.5;
    transition: background var(--dur-2), color var(--dur-2);
}

img {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

.hidden,
[hidden] {
    display: none !important;
}

.page-container {
    animation: fadeIn var(--dur-2) var(--ease);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
}

/* --- Scrollbars --- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--dx-border-strong) transparent;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--dx-border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--dx-text-3); }

/* --- Controles nativos sin clase --- */
/* :where() deja estas reglas con especificidad 0: cualquier clase (.dx-input…) las sobrescribe */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
    background: var(--dx-surface-2);
    border: 1px solid var(--dx-border);
    color: var(--dx-text);
    padding: 8px 12px;
    border-radius: var(--r-md);
    outline: none;
    font-size: var(--fs-md);
    transition: border-color var(--dur-1), box-shadow var(--dur-1);
}

:where(input, select, textarea):focus {
    border-color: var(--dx-accent);
    box-shadow: 0 0 0 3px var(--dx-accent-soft);
}

option {
    background: var(--dx-surface-2);
    color: var(--dx-text);
}

:where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--dx-accent);
}

:where(input[type="range"]) {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--dx-surface-3);
    border: none;
    padding: 0;
    cursor: pointer;
    accent-color: var(--dx-accent);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--dx-accent);
    border: 2px solid var(--dx-surface-1);
    box-shadow: var(--sh-1);
    transition: transform var(--dur-1);
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--dx-accent);
    border: 2px solid var(--dx-surface-1);
}

:where(input[type="number"]) {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ========================================
   CLASES ANTIGUAS → TOKENS
   ======================================== */
.glass {
    background: var(--dx-surface-1);
    border: 1px solid var(--dx-border);
    border-radius: var(--r-lg);
}

.pk-card {
    padding: var(--sp-4);
    border-radius: var(--r-lg);
    background: var(--dx-surface-1);
    border: 1px solid var(--dx-border);
    cursor: pointer;
    transition: transform var(--dur-2) var(--ease), border-color var(--dur-2), box-shadow var(--dur-2);
}

.pk-card:hover {
    transform: translateY(-2px);
    border-color: var(--dx-border-strong);
    box-shadow: var(--sh-2);
}

.btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 40px;
    padding: 0 var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--dx-border);
    background: var(--dx-surface-2);
    color: var(--dx-text);
    font-weight: 600;
    font-size: var(--fs-sm);
    cursor: pointer;
}

.btn-back:hover {
    background: var(--dx-surface-3);
}

.type-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    font: 800 0.6875rem/1 var(--dx-font);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #111827;
}

.type-pill.NORMAL   { background: var(--type-NORMAL); }
.type-pill.FIRE     { background: var(--type-FIRE); }
.type-pill.WATER    { background: var(--type-WATER); }
.type-pill.ELECTRIC { background: var(--type-ELECTRIC); }
.type-pill.GRASS    { background: var(--type-GRASS); }
.type-pill.ICE      { background: var(--type-ICE); }
.type-pill.FIGHTING { background: var(--type-FIGHTING); color: #fff; }
.type-pill.POISON   { background: var(--type-POISON); color: #fff; }
.type-pill.GROUND   { background: var(--type-GROUND); }
.type-pill.FLYING   { background: var(--type-FLYING); }
.type-pill.PSYCHIC  { background: var(--type-PSYCHIC); }
.type-pill.BUG      { background: var(--type-BUG); }
.type-pill.ROCK     { background: var(--type-ROCK); }
.type-pill.GHOST    { background: var(--type-GHOST); color: #fff; }
.type-pill.DRAGON   { background: var(--type-DRAGON); color: #fff; }
.type-pill.STEEL    { background: var(--type-STEEL); }
.type-pill.FAIRY    { background: var(--type-FAIRY); }
.type-pill.DARK     { background: var(--type-DARK); color: #fff; }

.sprite-static,
.sprite-anim {
    width: 96px;
    height: 96px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: auto 100%;
    image-rendering: pixelated;
    margin: 0 auto;
}