/* ============================================================
   ARKADE-WELT — Welt-Engine (Wave 1, "Fundament")
   Stylt die begehbare Weltkarte aus js/features/world.js: eine breite,
   ziehbare Landschaft mit antippbaren Gebäude-Sprites. Gleiches Muster wie
   css/farm.css (reine DOM-Sprites + CSS-Keyframes, kein Canvas/rAF) — hier
   in einer eigenen Datei, weil die Klassen rein welt-spezifisch sind.
   Diese Datei fehlte bisher komplett (index.html verlinkte sie schon,
   css/world.css existierte aber nie) — dadurch war die ganze Weltkarte
   bislang unstyled: keine Gebäude-Karten, kein Boden/Himmel, keine Wolken.
   ============================================================ */

@keyframes worldCloudDrift { from { transform: translateX(0); } to { transform: translateX(50px); } }
@keyframes worldBob { 0%, 100% { transform: translate(-50%, -100%) translateY(0); } 50% { transform: translate(-50%, -100%) translateY(-6px); } }
@keyframes worldHomeGlow { 0%, 100% { box-shadow: 0 0 0 3px var(--accent-glow), var(--sh-md); } 50% { box-shadow: 0 0 0 6px var(--accent-glow), var(--sh-md); } }

.world-strip {
  position: relative; height: 100%; min-height: 340px;
  background: linear-gradient(180deg, #35407a 0%, #4d5aa8 32%, #7f8fd4 55%, #6fae6f 55%, #4f8f52 100%);
}
[data-theme="light"] .world-strip { background: linear-gradient(180deg, #7fa3e8 0%, #9db6ef 32%, #c9d8f5 55%, #a8d89a 55%, #7fbf6f 100%); }

.world-tint { position: absolute; inset: 0; pointer-events: none; transition: background .6s var(--ease); z-index: 1; }

.world-cloud {
  position: absolute; font-size: 30px; opacity: .8; pointer-events: none; z-index: 1;
  animation: worldCloudDrift 22s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .1));
}

.world-building {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 116px; padding: 12px 10px 10px; text-align: center; cursor: pointer;
  border-radius: var(--r-lg); border: var(--border-w) solid var(--border);
  background: var(--surface); box-shadow: var(--sh-md), var(--lift);
  backdrop-filter: blur(var(--glass-blur));
  transition: transform .18s var(--ease-spring), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.world-building:hover { transform: translate(-50%, -50%) translateY(-4px); border-color: var(--border-hi); box-shadow: var(--sh-lg), var(--lift); }
.world-building:active { transform: translate(-50%, -50%) scale(.95); }
.world-building.home { border-color: var(--accent); animation: worldHomeGlow 2.6s ease-in-out infinite; }
.wb-icon { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.wb-name { font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; }
.wb-sub { font-size: 11px; color: var(--text-dim); white-space: nowrap; }

.world-char {
  position: absolute; z-index: 3; pointer-events: none; transform: translate(-50%, -100%);
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .3));
}
.world-char.bob { animation: worldBob 2.6s ease-in-out infinite; }

/* Performance-Modus (js/core/perf.js setzt .low-power auf <html>) — dekorative Dauer-Animationen aus */
.low-power .world-cloud,
.low-power .world-char.bob,
.low-power .world-building.home { animation: none; }
.low-power .world-building { transition: none; }

@media (max-width: 480px) {
  .world-building { width: 92px; padding: 9px 6px 7px; }
  .wb-icon { font-size: 26px; }
  .wb-name { font-size: 11.5px; }
  .wb-sub { font-size: 10px; }
}