/* ==========================================================================
   ДРІМОПОЛІЯ v3.2 — МОДУЛЬНІ ІЗОМЕТРИЧНІ ТАЙЛИ (.board-tile-v2)
   Дизайн-система за макетом: 4 колірні зони, 3-рівнева анатомія
   ========================================================================== */

:root {
  /* 1. Блакитна зона (Стратегія / Люди / DREAM) */
  --tile-bg-blue: #E6F6F8;
  --tile-accent-blue: #0E7490;
  
  /* 2. Зелена зона (Екологія / Альтернативи) */
  --tile-bg-green: #EAF7ED;
  --tile-accent-green: #15803D;

  /* 3. Жовта / Бурштинова зона (Фінанси / Чекпоїнти / МІР) */
  --tile-bg-yellow: #FEF7E6;
  --tile-accent-yellow: #B45309;

  /* 4. Коралова / Червона зона (Пастки / Ризики / Аудит) */
  --tile-bg-red: #FDEEEE;
  --tile-accent-red: #B91C1C;
}

/* Модульний тайл у стилі макета */
.board-tile-v2 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border-radius: 10px !important;
  background: #0E192B !important;
  border: 1.5px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
}

.board-tile-v2:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25) !important;
  z-index: 20 !important;
}

.board-tile-v2.highlighted {
  border-color: #F59E0B !important;
  box-shadow: 0 0 0 3px #F59E0B, 0 8px 24px rgba(245, 158, 11, 0.5) !important;
  transform: scale(1.05) translateZ(10px) !important;
  z-index: 50 !important;
}

/* 1. Верхній бейдж-заголовок (Плашка) */
.tile-top-pill {
  width: 100% !important;
  padding: 3px 4px !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  text-align: center !important;
  color: #FFFFFF !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
}

/* Кольори верхніх плашок */
.tile-blue .tile-top-pill { background: var(--tile-accent-blue) !important; }
.tile-green .tile-top-pill { background: var(--tile-accent-green) !important; }
.tile-yellow .tile-top-pill { background: var(--tile-accent-yellow) !important; }
.tile-red .tile-top-pill { background: var(--tile-accent-red) !important; }

/* 2. Центральна зона: фон + 3D асет */
.tile-asset-body {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  position: relative !important;
  overflow: hidden !important;
}

.tile-blue .tile-asset-body { background: var(--tile-bg-blue) !important; }
.tile-green .tile-asset-body { background: var(--tile-bg-green) !important; }
.tile-yellow .tile-asset-body { background: var(--tile-bg-yellow) !important; }
.tile-red .tile-asset-body { background: var(--tile-bg-red) !important; }

.tile-asset-img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.18)) !important;
  transition: transform 0.2s ease !important;
}

.board-tile-v2:hover .tile-asset-img {
  transform: scale(1.08) !important;
}

/* 3. Нижній рядок: назва та індекс */
.tile-bottom-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 3px 5px !important;
  background: #0E192B !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-sizing: border-box !important;
  min-height: 20px !important;
}

.tile-short-title {
  font-size: 8px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  max-width: 65% !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}

/* Нижній квадратний бейдж з номером / EXP */
.tile-corner-tag {
  font-size: 8px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  min-width: 14px !important;
  text-align: center !important;
  line-height: 1.3 !important;
  flex-shrink: 0 !important;
}

.tile-blue .tile-corner-tag { background: var(--tile-accent-blue) !important; }
.tile-green .tile-corner-tag { background: var(--tile-accent-green) !important; }
.tile-yellow .tile-corner-tag { background: var(--tile-accent-yellow) !important; }
.tile-red .tile-corner-tag { background: var(--tile-accent-red) !important; }

/* Фішки гравців на тайлах v2 */
.board-tile-v2 .player-token {
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #2563eb !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  z-index: 30 !important;
  animation: tokenBounce 0.3s ease-out !important;
}

@keyframes tokenBounce {
  0% { transform: scale(0.5) translateY(-8px); }
  60% { transform: scale(1.15) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}