@font-face {
  font-family: 'DwarvenTodcraft';
  src: url('../assets/fonts/DwarvenTodcraft.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'HouseofTerror';
  src: url('../assets/fonts/HouseofTerror.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'BrianneTod';
  src: url('../assets/fonts/BRIANNETOD.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ContinuumBold';
  src: url('../assets/fonts/ContinuumBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

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

button, a, input, select, textarea {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}
button:focus, button:focus-visible, a:focus, a:focus-visible, [role="button"]:focus {
  outline: none !important;
  box-shadow: none !important;
}

body {
  font-family: 'ContinuumBold', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: #0d0f15;
  color: #f0f3fc;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Fondo oficial PvZ (Jardín de Día por defecto) */
.ambient-bg {
  position: fixed;
  inset: 0;
  background-image: url('../assets/pvz/lawn_day.webp');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: blur(0px);
  z-index: -10;
  pointer-events-none;
  transition: filter 0.3s ease, background-image 0.4s ease;
}

.ambient-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.6) 100%);
  z-index: -9;
  pointer-events-none;
}

/* Marco Oficial PopCap LawnDialog (Ventana de Piedra Azul-Gris) */
.pvz-dialog {
  border-style: solid;
  border-width: 28px 32px 30px 28px;
  border-image-source: url('../assets/pvz/pvz_dialog_atlas.png');
  border-image-slice: 97 120 114 107 fill;
  border-image-repeat: repeat;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.8));
  position: relative;
  background-color: #222434;
}

/* Cajas y ranuras interiores de piedra (sin café) */
.pvz-stone-box {
  background-color: #171924;
  background-image: url('../assets/pvz/dialog_centermiddle.png');
  background-repeat: repeat;
  border: 2px solid #3d425c;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

/* Botón oficial de piedra PopCap PvZ (DrawStoneButton) - Cero glow, textura pura */
.pvz-btn-stone {
  border-style: solid;
  border-width: 0 35px 0 36px;
  border-image-source: url('../assets/pvz/pvz_stone_button.png');
  border-image-slice: 0 35 0 36 fill;
  border-image-repeat: stretch;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DwarvenTodcraft', sans-serif;
  color: #39ff14;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  cursor: pointer;
  user-select: none;
  transition: transform 0.05s ease;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding: 0 12px;
  text-decoration: none;
  outline: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.pvz-btn-stone:hover {
  filter: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.pvz-btn-stone:active, .pvz-btn-stone:focus {
  border-image-source: url('../assets/pvz/pvz_stone_button_down.png');
  transform: translateY(2px);
  filter: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Botón de piedra dorado - Cero glow */
.pvz-btn-stone-gold {
  border-style: solid;
  border-width: 0 35px 0 36px;
  border-image-source: url('../assets/pvz/pvz_stone_button.png');
  border-image-slice: 0 35 0 36 fill;
  border-image-repeat: stretch;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'DwarvenTodcraft', sans-serif;
  color: #ffe169;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  cursor: pointer;
  user-select: none;
  transition: transform 0.05s ease;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  padding: 0 12px;
  text-decoration: none;
  outline: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.pvz-btn-stone-gold:hover {
  filter: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.pvz-btn-stone-gold:active, .pvz-btn-stone-gold:focus {
  border-image-source: url('../assets/pvz/pvz_stone_button_down.png');
  transform: translateY(2px);
  filter: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Botón cuadrado oficial PopCap (button_small.png) para iconos - Cero glow */
.pvz-btn-small {
  width: 52px;
  height: 46px;
  background-image: url('../assets/pvz/button_small.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.05s ease;
  flex-shrink: 0;
  outline: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.pvz-btn-small:hover {
  filter: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.pvz-btn-small:active, .pvz-btn-small:focus {
  background-image: url('../assets/pvz/button_down_small.png');
  transform: translateY(2px);
  filter: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Botón de acción pequeño oficial PopCap (para reordenar, editar, eliminar, borrar) */
.pvz-btn-action {
  width: 32px !important;
  height: 32px !important;
  background-image: url('../assets/pvz/button_small.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.05s ease;
  flex-shrink: 0;
  outline: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.pvz-btn-action:hover {
  filter: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.pvz-btn-action:active, .pvz-btn-action:focus {
  background-image: url('../assets/pvz/button_down_small.png');
  transform: translateY(1px);
  filter: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Botón de cerrar [X] de modales PopCap */
.pvz-btn-close {
  width: 32px !important;
  height: 32px !important;
  background-image: url('../assets/pvz/button_small.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.05s ease;
  flex-shrink: 0;
  outline: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.pvz-btn-close:hover {
  filter: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.pvz-btn-close:active, .pvz-btn-close:focus {
  background-image: url('../assets/pvz/button_down_small.png');
  transform: translateY(1px);
  filter: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Pestañas de categorías - Cero glow */
.cat-btn-active {
  border-style: solid !important;
  border-width: 0 35px 0 36px !important;
  border-image-source: url('../assets/pvz/pvz_stone_button.png') !important;
  border-image-slice: 0 35 0 36 fill !important;
  border-image-repeat: stretch !important;
  color: #ffe169 !important;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000 !important;
  filter: none !important;
  outline: none !important;
  box-shadow: none !important;
  height: 44px !important;
  padding: 0 12px !important;
}
.cat-btn-inactive {
  background-color: #1a1d29 !important;
  background-image: url('../assets/pvz/dialog_centermiddle.png') !important;
  border: 1.5px solid #3d425c !important;
  color: #c4cae0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  outline: none !important;
  filter: none !important;
  height: 44px !important;
}
.cat-btn-inactive:hover {
  background-color: #26293a !important;
  border-color: #5d658c !important;
  color: #ffffff !important;
  outline: none !important;
  filter: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Tarjetas de Mods (Ranuras de Semillas en Piedra) - Cero glow */
.pvz-seed-card {
  background-color: #1a1d29;
  background-image: url('../assets/pvz/dialog_centermiddle.png');
  background-repeat: repeat;
  border: 2px solid #3d425c;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background-color 0.15s ease, border-color 0.15s ease;
  outline: none !important;
  filter: none !important;
}
.pvz-seed-card:hover {
  border-color: #636b94;
  background-color: #242838;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  outline: none !important;
  filter: none !important;
}
.pvz-seed-card-active {
  background-color: #2b3046;
  background-image: url('../assets/pvz/dialog_centermiddle.png');
  border: 2px solid #ffe169;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  outline: none !important;
  filter: none !important;
}

/* Tipografías especiales PvZ */
.pvz-title {
  font-family: 'HouseofTerror', 'DwarvenTodcraft', sans-serif;
}
.pvz-dwarven {
  font-family: 'DwarvenTodcraft', sans-serif;
}
.pvz-brianne {
  font-family: 'BrianneTod', cursive, sans-serif;
}
.pvz-gold-text {
  color: #ffe169;
  text-shadow: 2px 2px 0 #1b1e2e, -1px -1px 0 #1b1e2e, 1px -1px 0 #1b1e2e, -1px 1px 0 #1b1e2e;
}
.pvz-green-text {
  color: #39ff14;
  text-shadow: 2px 2px 0 #0a240c, -1px -1px 0 #0a240c, 1px -1px 0 #0a240c, -1px 1px 0 #0a240c;
}

/* Scrollbars auténticas estilo piedra PvZ */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #141722;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #3d425c;
  border-radius: 4px;
  border: 1px solid #5c6488;
}
::-webkit-scrollbar-thumb:hover {
  background: #565d82;
}
.custom-scrollbar::-webkit-scrollbar {
  display: none;
}
.custom-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==================== RESPONSIVE ANDROID & MÓVILES ==================== */
@media (max-width: 640px) {
  /* Escala de marcos de piedra para que no consuman todo el ancho de la pantalla */
  .pvz-dialog {
    border-width: 14px 16px 16px 14px !important;
    border-image-slice: 97 120 114 107 fill !important;
    padding: 8px !important;
  }

  /* Botones de piedra con escala compacta */
  .pvz-btn-stone, .pvz-btn-stone-gold {
    border-width: 0 22px 0 23px !important;
    border-image-slice: 0 35 0 36 fill !important;
    height: 40px !important;
    font-size: 0.85rem !important;
    padding: 0 6px !important;
  }

  /* Botón cuadrado de icono en móvil */
  .pvz-btn-small:not(.pvz-btn-action):not(.pvz-btn-close) {
    width: 44px !important;
    height: 38px !important;
    background-size: 100% 100% !important;
  }

  /* Pestañas de categorías compactas */
  .cat-btn-active {
    border-width: 0 22px 0 23px !important;
    border-image-slice: 0 35 0 36 fill !important;
    height: 38px !important;
    padding: 0 8px !important;
    font-size: 0.75rem !important;
  }
  .cat-btn-inactive {
    height: 38px !important;
    padding: 0 8px !important;
    font-size: 0.75rem !important;
  }

  /* Scroll horizontal suave en navegación */
  nav {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Cajas de detalle y tarjetas con padding optimizado */
  .pvz-stone-box {
    padding: 8px !important;
  }

  /* Evitar desbordamiento de títulos en tarjetas */
  .pvz-seed-card {
    padding: 8px !important;
  }
}