/* styles/tiles.css - Tile-specific styles */

/* Base tile styles */
.tile {
  position: absolute;
  border: 3px solid #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 29px;
  font-style: italic;
  font-family: Times New Roman, serif;
  color: white;
  cursor: grab;
  user-select: none;
  transition: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Adjust vertical positioning of tile content */
.tile > * {
  transform: translateY(-8%);
}

/* Tile type backgrounds */
.tile.unit-pos { 
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
}

.tile.unit-neg { 
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}

.tile.x-pos { 
  background: linear-gradient(135deg, #9933ff 0%, #7a29cc 100%);
}

.tile.x-neg { 
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}

.tile.x2-pos { 
  background: linear-gradient(135deg, #00cc66 0%, #00a352 100%);
}

.tile.x2-neg { 
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}

/* Spawn button styles (matching tile colors) */
.spawn-btn.unit-pos { 
  background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
}

.spawn-btn.unit-neg { 
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}

.spawn-btn.x-pos { 
  background: linear-gradient(135deg, #9933ff 0%, #7a29cc 100%);
}

.spawn-btn.x-neg { 
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}

.spawn-btn.x2-pos { 
  background: linear-gradient(135deg, #00cc66 0%, #00a352 100%);
}

.spawn-btn.x2-neg { 
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}

/* Tile states */
.tile.dragging {
  opacity: 0.7;
  z-index: 1000;
}

.tile.invalid-position {
  opacity: 0.5;
  border-color: #ff4444;
}

.tile.in-valid-group {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.tile.selected {
  box-shadow: 0 0 0 4px #fbbf24, 0 4px 8px rgba(0, 0, 0, 0.3) !important;
  z-index: 100 !important;
}

/* Corner dots for negative x values */
.corner-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
}

/* Ghost arrow for zero pairs */
.ghost-arrow {
  position: absolute;
  width: 60px;
  height: 60px;
  cursor: grab;
  z-index: 1000;
  pointer-events: all;
  transition: opacity 0.3s;
}

.ghost-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  border-top: 4px dashed rgba(255, 255, 255, 0.6);
  border-right: 4px dashed rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Hover effects for tiles */
.tile:hover {
  z-index: 99;
}

.tile:active {
  cursor: grabbing;
}

/* Special tile modifiers */
.tile.highlight {
  animation: pulse 1s ease-in-out infinite;
}

.tile.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.tile.fade-in {
  opacity: 0;
  animation: fadeIn 0.3s ease-in forwards;
}

/* Tile group indicators */
.tile.group-member {
  border-color: #4ade80;
}

.tile.group-anchor {
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
}

/* Responsive tile sizes */
@media (max-width: 600px) {
  .tile {
    font-size: 24px;
  }
}

@media (max-width: 400px) {
  .tile {
    font-size: 20px;
    border-width: 2px;
  }
}