/* ==========================================================================
   FarmVerse 2.0 - World Viewport, 12 Fields (5x5 Grid = 300 Tiles), Zoom & Pan Camera
   ========================================================================== */

.world-viewport {
  flex: 1;
  width: 100vw;
  height: calc(100vh - 64px);
  overflow: hidden;
  position: relative;
  cursor: grab;
  background: radial-gradient(circle at center, #68d391 0%, #38a169 60%, #276749 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.world-viewport:active {
  cursor: grabbing;
}

/* Transformable World Canvas containing all 12 Field Islands */
.world-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  display: grid;
  grid-template-columns: repeat(4, 330px);
  gap: 30px;
  padding: 60px;
  transition: transform 0.05s ease-out;
  margin-left: -740px;
  margin-top: -620px;
  width: 1480px;
}

/* Individual Field Island (5x5 Grid = 25 Tiles) */
.field-island {
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  border: 4px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 330px;
  height: 360px;
  box-sizing: border-box;
}

.field-island.locked {
  background: rgba(30, 41, 59, 0.78);
  border-color: rgba(245, 158, 11, 0.7);
  justify-content: center;
}

.field-unlock-card {
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.field-lock-icon {
  font-size: 2.8rem;
  animation: pulseLock 2s infinite ease-in-out;
}

@keyframes pulseLock {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.field-unlock-title {
  font-weight: 800;
  font-size: 1.1rem;
}

.field-unlock-reqs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.85rem;
  color: #cbd5e1;
}

.field-unlock-reqs .price-tag {
  color: #fbbf24;
  font-weight: 800;
  font-size: 0.95rem;
}

.field-header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.field-name-badge {
  background: #2e7d32;
  color: white;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* 5x5 Field Grid */
.field-5x5-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 4px;
  width: 300px;
  height: 300px;
  background: #558b2f;
  padding: 6px;
  border-radius: var(--radius-md);
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.25);
}

/* Individual Farm Tile */
.farm-tile {
  background: #7cb342;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.farm-tile:hover {
  transform: translateY(-2px) scale(1.04);
  z-index: 10;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.farm-tile:active {
  transform: scale(0.95);
}

/* Tile States */
.farm-tile.tile-empty {
  background: #689f38;
}

.farm-tile.tile-plowed {
  background: #6d4c41;
  border: 1px solid #4e342e;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.farm-tile.tile-growing {
  background: #5d4037;
}

.farm-tile.tile-growing.tile-watered {
  background: #3e2723;
  box-shadow: inset 0 0 6px rgba(56, 189, 248, 0.5);
}

.farm-tile.tile-ready {
  background: #8bc34a;
  border: 2px solid #facc15;
  box-shadow: 0 0 8px rgba(250, 204, 21, 0.7);
}

/* Inside Tile Content */
.tile-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1px;
}

.plow-hint {
  font-size: 1.1rem;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.farm-tile.tile-empty:hover .plow-hint {
  opacity: 0.9;
  transform: scale(1.1);
}

.plow-icon {
  font-size: 1.1rem;
}

.crop-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.tile-sublabel {
  font-size: 0.52rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  margin-top: 1px;
}

.tile-progress {
  width: 80%;
  height: 3px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  margin-top: 2px;
  overflow: hidden;
}

.tile-progress-fill {
  height: 100%;
  background: #4ade80;
  width: 0%;
  transition: width 0.3s;
}

.tile-timer {
  font-size: 0.52rem;
  color: #fff;
  font-weight: 700;
  margin-top: 1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.water-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 0.7rem;
  animation: pulseWater 1.5s infinite;
}

.watered-indicator {
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 0.6rem;
}

.tile-ready-badge {
  font-size: 0.52rem;
  font-weight: 900;
  background: #f59e0b;
  color: white;
  padding: 1px 3px;
  border-radius: 4px;
  margin-top: 1px;
  animation: bounceReady 1s infinite alternate;
}

/* Animations */
@keyframes pulseWater {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

@keyframes bounceReady {
  0% { transform: translateY(0); }
  100% { transform: translateY(-2px); }
}

.ready-pulse {
  animation: readyGlow 1.2s infinite alternate;
}

@keyframes readyGlow {
  0% { transform: scale(0.98); }
  100% { transform: scale(1.05); }
}

.growing-anim {
  animation: growBreath 2s infinite ease-in-out;
}

@keyframes growBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}