@charset "UTF-8";

/* ==========================================================
   PARADICE - ESTILOS OFICIALES BATTLEROUND
   ========================================================== */

body {
  background-color: #040814;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(244, 63, 94, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(0, 240, 255, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(147, 51, 234, 0.15) 0%, transparent 50%);
  background-attachment: fixed;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Tablero de Batalla 6x6 y 7x7 */
.battle-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  perspective: 1000px;
  transition: all 0.3s ease;
}

.battle-grid.grid-7x7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

@media (min-width: 640px) {
  .battle-grid {
    gap: 8px;
  }
  .battle-grid.grid-7x7 {
    gap: 6px;
  }
}

/* Ajuste de escala para casillas en tablero 7x7 (6 jugadores) */
.battle-grid.grid-7x7 .tile-front-icon {
  font-size: 1.15rem;
}
.battle-grid.grid-7x7 .tile-back-icon {
  font-size: 1.3rem;
}
@media (min-width: 640px) {
  .battle-grid.grid-7x7 .tile-front-icon {
    font-size: 1.4rem;
  }
  .battle-grid.grid-7x7 .tile-back-icon {
    font-size: 1.6rem;
  }
}
.battle-grid.grid-7x7 .battle-tile-front span:last-child {
  font-size: 8px;
}
.battle-grid.grid-7x7 .battle-tile-back span:last-child {
  font-size: 8px;
}

/* Ocultar barra de scroll para el selector horizontal de avatares */
#avatar-selector {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
#avatar-selector::-webkit-scrollbar {
  display: none;
}

/* Temas Dinámicos de Color para la Rebancha */
.battle-grid.theme-rebancha-1 {
  border-color: rgba(251, 191, 36, 0.75) !important;
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.45) !important;
  background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.12), rgba(15, 23, 42, 0.95)) !important;
}
.battle-grid.theme-rebancha-1 .battle-tile-front {
  border-color: rgba(251, 191, 36, 0.4) !important;
  box-shadow: inset 0 0 10px rgba(245, 158, 11, 0.2) !important;
}

.battle-grid.theme-rebancha-2 {
  border-color: rgba(236, 72, 153, 0.75) !important;
  box-shadow: 0 0 35px rgba(217, 70, 239, 0.45) !important;
  background: radial-gradient(circle at 50% 50%, rgba(217, 70, 239, 0.12), rgba(15, 23, 42, 0.95)) !important;
}
.battle-grid.theme-rebancha-2 .battle-tile-front {
  border-color: rgba(236, 72, 153, 0.4) !important;
  box-shadow: inset 0 0 10px rgba(217, 70, 239, 0.2) !important;
}

.battle-grid.theme-rebancha-3 {
  border-color: rgba(52, 211, 153, 0.75) !important;
  box-shadow: 0 0 35px rgba(16, 185, 129, 0.45) !important;
  background: radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.12), rgba(15, 23, 42, 0.95)) !important;
}
.battle-grid.theme-rebancha-3 .battle-tile-front {
  border-color: rgba(52, 211, 153, 0.4) !important;
  box-shadow: inset 0 0 10px rgba(16, 185, 129, 0.2) !important;
}

.battle-grid.theme-rebancha-4 {
  border-color: rgba(168, 85, 247, 0.75) !important;
  box-shadow: 0 0 35px rgba(147, 51, 234, 0.45) !important;
  background: radial-gradient(circle at 50% 50%, rgba(147, 51, 234, 0.12), rgba(15, 23, 42, 0.95)) !important;
}
.battle-grid.theme-rebancha-4 .battle-tile-front {
  border-color: rgba(168, 85, 247, 0.4) !important;
  box-shadow: inset 0 0 10px rgba(147, 51, 234, 0.2) !important;
}

/* Animación de Transición de Rebancha */
@keyframes rebanchaTileWave {
  0% {
    transform: scale(0.5) rotateY(180deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.1) rotateY(-10deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }
}

.battle-tile.rebancha-anim {
  animation: rebanchaTileWave 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

/* Casilla de Hielo 3D */
.battle-tile {
  aspect-ratio: 1 / 1;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.battle-tile.revealed {
  transform: rotateY(180deg) !important;
  animation: none !important;
  cursor: default;
}

.battle-tile-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Cara Frontal: Hielo Oculto */
.battle-tile-front {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.22) 0%, rgba(2, 132, 199, 0.12) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.35);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(56, 189, 248, 0.2);
}

.battle-tile-front:hover:not(.revealed) {
  border-color: rgba(0, 240, 255, 0.85);
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.5), inset 0 0 12px rgba(0, 240, 255, 0.3);
  transform: translateY(-2px);
}

.battle-tile-front.mine-planted-by-me {
  border-color: #f43f5e !important;
  box-shadow: 0 0 15px rgba(244, 63, 94, 0.6), inset 0 0 8px rgba(244, 63, 94, 0.4) !important;
}

.battle-tile-front.planting-target {
  animation: pulse 1s infinite;
  border-color: #facc15 !important;
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.8) !important;
}

.battle-tile.planting-target .battle-tile-back {
  animation: pulse 1.2s infinite ease-in-out;
  border-color: #facc15 !important;
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.85), inset 0 0 12px rgba(250, 204, 21, 0.4) !important;
}

/* Cara Trasera */
.battle-tile-back {
  transform: rotateY(180deg);
}

/* Destapado Seguro */
.battle-tile-safe {
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.85) 0%, rgba(4, 120, 87, 0.9) 100%);
  border: 2px solid #34d399;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.5), inset 0 0 12px rgba(52, 211, 153, 0.3);
}

/* Destapado Mina */
.battle-tile-mine {
  background: linear-gradient(135deg, rgba(136, 19, 55, 0.95) 0%, rgba(225, 29, 72, 0.95) 100%);
  border: 2px solid #f43f5e;
  box-shadow: 0 0 25px rgba(244, 63, 94, 0.8), inset 0 0 15px rgba(244, 63, 94, 0.5);
}