/* Shared overworld backdrop — sky, drifting clouds, tiled grass (home + play) */

:root {
  --ow-sky-1: #67c1ff;
  --ow-sky-2: #b6e7ff;
  --ow-grass-1: #57c25a;
  --ow-grass-2: #44a64a;
}

.ow-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.ow-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ow-sky-1) 0%, var(--ow-sky-2) 55%, #dff4ff 100%);
}

.ow-grass {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42vh;
  background-color: var(--ow-grass-1);
  background-image:
    linear-gradient(45deg, var(--ow-grass-2) 25%, transparent 25%, transparent 75%, var(--ow-grass-2) 75%),
    linear-gradient(45deg, var(--ow-grass-2) 25%, transparent 25%, transparent 75%, var(--ow-grass-2) 75%);
  background-size: 36px 36px;
  background-position: 0 0, 18px 18px;
  border-top: 6px solid #2e7d32;
  box-shadow: inset 0 7px 0 rgba(255, 255, 255, 0.18);
}

.ow-clouds {
  position: absolute;
  inset: 0 -20% auto -20%;
  height: 60vh;
  background:
    radial-gradient(60px 28px at 12% 22%, #fff 60%, transparent 62%),
    radial-gradient(90px 36px at 16% 26%, #fff 60%, transparent 62%),
    radial-gradient(70px 30px at 70% 14%, #fff 60%, transparent 62%),
    radial-gradient(110px 42px at 76% 18%, #fff 60%, transparent 62%),
    radial-gradient(60px 26px at 45% 30%, #fff 60%, transparent 62%);
  opacity: 0.85;
  animation: ow-drift 60s linear infinite;
}

@keyframes ow-drift {
  from { transform: translateX(0); }
  to { transform: translateX(8%); }
}