/* ============================================================
   Growvia — Farm: base world farming (grid + gerak + tanam).
   Base pertama (sandbox lokal). Lihat public/screens/farm.js.
   ============================================================ */

.world { display: grid; gap: 12px; }

.world-stage {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #1b2a1a;
  aspect-ratio: 16 / 11;
}

.world-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  touch-action: none;
  cursor: pointer;
}

.world-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.world-hud .grow { flex: 1 1 auto; }

.world-seeds { display: flex; flex-wrap: wrap; gap: 6px; }
.world-seeds button { display: inline-flex; align-items: center; gap: 6px; }
.world-seeds button.on { outline: 2px solid #7fd15a; outline-offset: 1px; }

.world-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }

.world-dpad { display: grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); gap: 4px; }
.world-dpad button { font-size: 18px; line-height: 1; }
.world-dpad .sp { visibility: hidden; }

.world-actions { display: flex; gap: 8px; }
.world-actions .big { min-width: 84px; }

.world-tip { color: var(--muted, #9fb0a0); font-size: 12px; }

.world-store { display: flex; flex-wrap: wrap; gap: 10px; }
.world-store span { opacity: 0.9; }