/* Game-Specific Customization */
/* Game Area Layout */
.castle-container {
  position: absolute;
  top: 48px; /* Match the SDK's game area top position */
  left: 0;
  width: 100%;
  height: 70%;
  overflow: hidden;
}

.tray-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.7);
  border-top: 2px solid #c2994b;
}

/* Castle and Repair Spots */
.castle {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("damaged-castle.png") no-repeat center center/contain;
}

.repair-spot {
  position: absolute !important;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 0, 0, 0.3);
  border: 2px dashed #f00;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: repairPulse 1.5s infinite ease-in-out;
  z-index: 10;
}

@keyframes repairPulse {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0.7; }
}

.repair-label {
  font-size: 10px;
  color: white;
  text-align: center;
  text-shadow: 0 0 3px #000;
  pointer-events: none;
}

/* Position repair spots in visually pleasing arrangement using class selectors with data attributes */
/* Wall spots */
.repair-spot.wall-spot[data-count="1"] { left: 30%; top: 60%; }
.repair-spot.wall-spot[data-count="2"] { left: 45%; top: 65%; }
.repair-spot.wall-spot[data-count="3"] { left: 60%; top: 60%; }

/* Tower spots */
.repair-spot.tower-spot[data-count="1"] { left: 20%; top: 40%; }
.repair-spot.tower-spot[data-count="2"] { left: 70%; top: 40%; }

/* Window spots */
.repair-spot.window-spot[data-count="1"] { left: 35%; top: 30%; }
.repair-spot.window-spot[data-count="2"] { left: 55%; top: 30%; }

/* Banner spots */
.repair-spot.banner-spot[data-count="1"] { left: 25%; top: 20%; }
.repair-spot.banner-spot[data-count="2"] { left: 65%; top: 20%; }

/* Battlement spots */
.repair-spot.battlement-spot[data-count="1"] { left: 25%; top: 50%; }
.repair-spot.battlement-spot[data-count="2"] { left: 65%; top: 50%; }

/* Chamber spots */
.repair-spot.chamber-spot[data-count="1"] { left: 40%; top: 40%; }
.repair-spot.chamber-spot[data-count="2"] { left: 50%; top: 40%; }

/* Keep spot */
.repair-spot.keep-spot { left: 45%; top: 15%; }

/* Repaired spots */
.repaired {
  background-color: rgba(0, 255, 0, 0.2);
  border: 2px solid #0f0;
  animation: none;
}

.repaired::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.wall-spot.repaired::after {
  background-image: url('wall-icon.png');
}

.tower-spot.repaired::after {
  background-image: url('tower-icon.png');
}

.window-spot.repaired::after {
  background-image: url('window-icon.png');
}

.banner-spot.repaired::after {
  background-image: url('banner-icon.png');
}

.battlement-spot.repaired::after {
  background-image: url('battlement-icon.png');
}

.chamber-spot.repaired::after {
  background-image: url('chamber-icon.png');
}

.keep-spot.repaired::after {
  background-image: url('keep-icon.png');
}

/* Material and Component Trays */
.material-tray, .component-tray {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 5px;
  position: relative;
}

.tray-title {
  position: absolute;
  left: 10px;
  top: 5px;
  font-size: 14px;
  color: #c2994b;
  text-shadow: 0 0 2px #000;
}

.material-slot, .component-slot {
  width: 40px;
  height: 40px;
  margin: 5px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid #c2994b;
  position: relative;
  cursor: pointer;
}

.empty {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Material types */
.stone {
  background-image: url('stone-icon.png');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.wood {
  background-image: url('wood-icon.png');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.iron {
  background-image: url('iron-icon.png');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.glass {
  background-image: url('glass-icon.png');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.fabric {
  background-image: url('fabric-icon.png');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Component types */
.wall {
  background-image: url('wall-icon.png');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.tower {
  background-image: url('tower-icon.png');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.banner {
  background-image: url('banner-icon.png');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.window {
  background-image: url('window-icon.png');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.battlement {
  background-image: url('battlement-icon.png');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.chamber {
  background-image: url('chamber-icon.png');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.keep {
  background-image: url('keep-icon.png');
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Quantity display */
.quantity {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background-color: #c2994b;
  border-radius: 10px;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: #000;
  font-weight: bold;
}

/* Dragged Elements */
.dragged-material, .dragged-component {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  z-index: 1000;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
  /* Adjust these values to change the offset from your finger/cursor */
  transform: translate(-1px, -1px); /* Center the element, or use other values to offset */
}

/* Score Popup */
.score-popup {
  position: absolute;
  font-size: 22px;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 0 0 10px #ffd700;
  animation: fadeOut 1s ease-in-out forwards;
  z-index: 100;
}

/* Bonus Popup */
.bonus-popup {
  position: absolute;
  width: 200px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #ffd700;
  text-shadow: 0 0 10px #ffd700;
  background-color: rgba(0, 0, 0, 0.7);
  border: 2px solid #c2994b;
  border-radius: 10px;
  padding: 10px;
  z-index: 200;
  animation: bonusPulse 1.5s ease-in-out forwards;
}

@keyframes bonusPulse {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  70% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* Crafting Effect */
.crafting-effect {
  position: absolute;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  border: 2px solid #c2994b;
  border-radius: 10px;
  padding: 10px;
  z-index: 200;
  animation: craftPulse 1s ease-in-out forwards;
}

.crafted-item {
  width: 60px;
  height: 60px;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 10px;
}

.crafted-text {
  color: #ffd700;
  text-shadow: 0 0 5px #ffd700;
  font-size: 16px;
  text-align: center;
}

@keyframes craftPulse {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  70% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

/* Placement particles */
.placement-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #ffd700;
  z-index: 50;
}