/* ============================================================
   ARKADE 2.0 — Farm-Hofszene (Runde 20: große Farm-Erweiterung)
   DOM-Sprites + reine CSS-Keyframes (kein Canvas/rAF), nach dem gleichen
   Muster wie der Levelpfad (js/features/levelpath.js, lvlSway/lvlCloudDrift/
   lvlRain in components.css) — hier in einer eigenen Datei, weil die
   Keyframes/Klassen rein farm-spezifisch sind.
   ============================================================ */

@keyframes farmSway { 0%, 100% { transform: translate(-50%, -100%) rotate(-3deg); } 50% { transform: translate(-50%, -100%) rotate(3deg); } }
@keyframes farmBob { 0%, 100% { transform: translate(-50%, -100%) translateY(0); } 50% { transform: translate(-50%, -100%) translateY(-4px); } }
@keyframes farmCloudDrift { from { transform: translateX(0); } to { transform: translateX(60px); } }
@keyframes farmRain { 0% { transform: translateY(-10px); opacity: 0; } 15% { opacity: .7; } 100% { transform: translateY(70px); opacity: 0; } }
@keyframes farmGrowPop { 0% { transform: translate(-50%, -100%) scale(.6); } 60% { transform: translate(-50%, -100%) scale(1.25); } 100% { transform: translate(-50%, -100%) scale(1); } }
@keyframes farmSparkle { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes farmFirefly { 0%, 100% { opacity: .15; transform: translate(0, 0) scale(.8); } 50% { opacity: 1; transform: translate(5px, -6px) scale(1.2); } }

.farm-scene-wrap { position: relative; margin-bottom: 16px; }
.farm-scene {
  position: relative; width: 100%; aspect-ratio: 16 / 8; border-radius: var(--r-lg);
  border: var(--border-w) solid var(--border); overflow: hidden; box-shadow: var(--sh-md);
  background: linear-gradient(180deg, #7fbfe8 0%, #bfe3c8 55%, #7fbf6f 55%, #5aa859 100%);
}
/* Runde 21 (Responsive-Audit): 16:8 wird auf schmalen Handys zu einem gequetschten Streifen (bei
   340px Breite nur ~170px Höhe) — Sprites/Gebäude/Deko hätten kaum Platz. Schmaleres Verhältnis
   sorgt für mehr nutzbare Höhe, ohne dass die Szene horizontal überläuft. */
@media (max-width: 480px) { .farm-scene { aspect-ratio: 4 / 3; } }
.farm-scene[data-season="herbst"] { background: linear-gradient(180deg, #e8b97f 0%, #e0cf9a 55%, #c98f4a 55%, #a8703a 100%); }
.farm-scene[data-season="winter"] { background: linear-gradient(180deg, #cfe4f0 0%, #eef4f7 55%, #e8eef2 55%, #cfd8dd 100%); }
.farm-scene[data-season="fruehling"] { background: linear-gradient(180deg, #a9d8ee 0%, #d8f0c8 55%, #8fce6f 55%, #6bab55 100%); }
.farm-scene-layer { position: absolute; inset: 0; pointer-events: none; }
.farm-scene-tint { position: absolute; inset: 0; pointer-events: none; transition: background .6s var(--ease); }
.farm-cloud { position: absolute; font-size: 34px; opacity: .85; animation: farmCloudDrift 26s ease-in-out infinite alternate; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .08)); }
.farm-rain-drop { position: absolute; width: 2px; height: 16px; background: linear-gradient(rgba(190, 210, 255, 0), rgba(210, 225, 255, .55)); animation: farmRain 1s linear infinite; }
.farm-firefly { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffe873; box-shadow: 0 0 6px #ffe873; animation: farmFirefly 2.4s ease-in-out infinite; }
.farm-sprite {
  position: absolute; transform: translate(-50%, -100%); font-size: 26px; line-height: 1; text-align: center;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .25)); transition: left 3.5s ease-in-out, top 1.2s ease-in-out;
}
/* Runde 23 (Nutzer-Wunsch: echte Interaktivität statt nur Deko-Bild) — antippbare Sprites bekommen
   eine großzügigere unsichtbare Trefferfläche (Touch-Ziel), damit kleine Emoji-Glyphen auf dem
   Handy trotzdem gut treffbar sind, plus sichtbares Antipp-Feedback. */
.farm-sprite.interactive { pointer-events: auto; cursor: pointer; padding: 10px; margin: -10px; transition: transform .12s ease, left 3.5s ease-in-out, top 1.2s ease-in-out; }
.farm-sprite.interactive:active { transform: translate(-50%, -100%) scale(.88); }
.farm-sprite.plot { font-size: 24px; }
.farm-sprite.plot.ready-glow { animation: farmSparkle 1.1s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--accent-2)) drop-shadow(0 2px 1px rgba(0, 0, 0, .25)); }
.farm-sprite.building { font-size: 30px; }
.farm-sprite.decor { font-size: 22px; opacity: .95; }
.farm-sprite.sway { animation: farmSway 3.2s ease-in-out infinite; }
.farm-sprite.bob { animation: farmBob 2.4s ease-in-out infinite; }
.farm-sprite.grow-pop { animation: farmGrowPop .4s var(--ease); }
.farm-scene-badge {
  position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2;
  padding: 5px 10px; border-radius: var(--r-md); background: rgba(11, 12, 14, .72); border: 1px solid rgba(255, 255, 255, .18);
  font-size: 11.5px; font-weight: 700; color: #fff; pointer-events: none;
}
.farm-scene-toggle { margin-bottom: 10px; }
.farm-golden-banner {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 12px;
  border: var(--border-w) solid var(--accent-2); border-radius: var(--r-md); background: rgba(255, 212, 0, .12);
  font-weight: 700; font-size: 13px;
}
.farm-golden-banner .spark { animation: farmSparkle 1.4s ease-in-out infinite; }

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