/* ═══════════════════════════════════════════════════
   Reskin de MC Shop para que combine con pkmn-online:
   misma paleta azul marino/dorado y tipografía VT323.

   Es un archivo APARTE a propósito: para volver al look
   original (ámbar/carbón) basta con quitar (o comentar)
   el <link> a este fichero en index.html. No toca nada
   del build (assets/index-*.css / *.js).

   Nota técnica: MC Shop usa Tailwind, que compila cada
   clase de color con su valor final ya "horneado" (no
   variables CSS compartidas), así que aquí se pisa clase
   a clase -con !important- en vez de redefinir variables.
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ── Fondo, superficies y bordes ── */
.bg-base       { background-color:#080d1a !important; }
.bg-base\/95   { background-color:rgba(8,13,26,.95) !important; }
.bg-base\/80   { background-color:rgba(8,13,26,.8) !important; }
.bg-base-elevated,
.hover\:bg-base-elevated:hover { background-color:#14203a !important; }
.bg-base-surface { background-color:#23345c !important; }
.border-base-border { border-color:#1e3060 !important; }
.text-base { color:#000000 !important; }

/* ── Texto (mismos 3 tonos que --text/--text-mid/--text-dim de pkmn-online;
   ink-600 es un cuarto tono más apagado que pkmn no necesita pero mc-shop sí) ── */
.text-ink-100, .hover\:text-ink-100:hover { color:#e8f0fe !important; }
.text-ink-300 { color:#9aaace !important; }
.text-ink-400 { color:#5a6a8a !important; }
.text-ink-600 { color:#3d4a66 !important; }

/* ── Acento (antes ámbar, ahora azul pkmn) ── */
.bg-ember-500 { background-color:#4a9eff !important; }
.text-ember-500,
.group:hover .group-hover\:text-ember-500,
.hover\:text-ember-500:hover { color:#4a9eff !important; }
.border-ember-500,
.hover\:border-ember-500:hover,
.focus\:border-ember-500:focus { border-color:#4a9eff !important; }
.hover\:bg-ember-400:hover { background-color:#6ab4ff !important; }
.hover\:text-ember-400:hover { color:#6ab4ff !important; }
.active\:bg-ember-600:active { background-color:#1a4aaa !important; }
.focus-visible\:ring-ember-500:focus-visible { --tw-ring-color:#4a9eff !important; }

/* ── Monedas / éxito (antes verde xp, ahora dorado como en pkmn) ── */
.bg-xp-500\/10 { background-color:rgba(255,215,0,.12) !important; }
.text-xp-500 { color:#ffd700 !important; }
.hover\:text-xp-400:hover { color:#ffe066 !important; }
.border-xp-500\/30 { border-color:rgba(255,215,0,.35) !important; }

/* ── Peligro / admin destructivo ── */
.bg-poke-500 { background-color:#ff1744 !important; }
.text-poke-500, .text-poke-600 { color:#ff1744 !important; }
.hover\:bg-poke-600:hover { background-color:#c4102f !important; }
.hover\:text-poke-600:hover { color:#c4102f !important; }

/* ── Componentes (definidos con @apply, no heredan de las clases de arriba) ── */
.slot-card { background-color:#23345c !important; box-shadow: inset 0 0 0 1px #2a4a8a !important; }
.slot-card:hover { box-shadow: inset 0 0 0 1px #4a9eff !important; }

.btn-primary { background-color:#4a9eff !important; color:#000000 !important; }
.btn-primary:hover { background-color:#6ab4ff !important; }
.btn-primary:active { background-color:#1a4aaa !important; }

.btn-secondary { background-color:#14203a !important; color:#e8f0fe !important; border-color:#1e3060 !important; }
.btn-secondary:hover { border-color:#4a9eff !important; }

.btn-danger { background-color:#ff1744 !important; color:#e8f0fe !important; }
.btn-danger:hover { background-color:#c4102f !important; }

.input-field { background-color:#14203a !important; border-color:#1e3060 !important; color:#e8f0fe !important; }
.input-field:focus { border-color:#4a9eff !important; }
.input-field::placeholder { color:#5a6a8a !important; }

.label { color:#5a6a8a !important; }
.eyebrow { color:#4a9eff !important; }

.coin-badge { background-color:rgba(255,215,0,.12) !important; color:#ffd700 !important; border-color:rgba(255,215,0,.35) !important; }

/* ── Fondo general y detalles ── */
body {
  font-family:'VT323', monospace !important;
  font-size:18px !important;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(74,158,255,.08), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(255,215,0,.05), transparent 35%) !important;
}
::selection { background:rgba(74,158,255,.3); color:#e8f0fe; }
:focus-visible { outline-color:#4a9eff !important; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:#080d1a; }
::-webkit-scrollbar-thumb { background:#2a4a8a; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#4a9eff; }
* { scrollbar-width:thin; scrollbar-color:#2a4a8a #080d1a; }