/* ═══════════════════════════════════════════════════════════════════════
   Basislager — Custom-Sprites (reines CSS, keine Bilddateien)
   Jedes Sprite füllt seine Kachel (position: absolute; inset: 0) und ist
   ausschließlich in Prozent der Kachel gebaut → skaliert mit dem Raster.
   Später lassen sich einzelne Sprites durch eigene Grafiken ersetzen:
   einfach die Regel des jeweiligen .bs-… überschreiben.
   ═══════════════════════════════════════════════════════════════════════ */

.bs {
  filter: drop-shadow(0 4px 0 rgba(28, 66, 22, 0.28));
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.bs::before, .bs::after, .bs > i { content: ""; position: absolute; }

/* ── Zelt (Unterschlupf) ── */
.bs-tent::before {
  background: linear-gradient(90deg, #e39a4a 0 50%, #cf7f31 50% 100%);
  bottom: 8%; clip-path: polygon(50% 0, 100% 100%, 0 100%); left: 6%; right: 6%; top: 8%;
}
.bs-tent::after {
  background: #5a3416; bottom: 8%; clip-path: polygon(50% 0, 100% 100%, 0 100%); left: 36%; right: 36%; top: 44%;
}
.bs-tent > i:nth-child(1) { background: #fff3c4; bottom: 8%; height: 5%; left: 6%; right: 6%; }
.bs-tent > i:nth-child(2) { background: #6b4320; height: 14%; left: 49%; top: 2%; width: 3%; }

/* ── Bett („Dein Unterschlupf“) ── */
.bs-bed::before {
  background: #8a5a2b; border: 3px solid #5a3a1a; border-radius: 5px; bottom: 18%; left: 8%; right: 8%; top: 34%;
}
.bs-bed::after {
  background: linear-gradient(90deg, #ffffff 0 30%, #5aa9e6 30% 100%); border: 2px solid #3b2a14; border-radius: 4px;
  bottom: 26%; left: 14%; right: 14%; top: 40%;
}
.bs-bed > i:nth-child(1) { background: #5a3a1a; border-radius: 2px 2px 0 0; height: 30%; left: 8%; top: 24%; width: 8%; }
.bs-bed > i:nth-child(2) { background: #5a3a1a; bottom: 12%; height: 10%; right: 8%; width: 8%; }

/* ── Lagerfeuer ── */
.bs-fire::before {
  background: radial-gradient(circle, #8f949c 0 46%, transparent 48%) 0 0 / 25% 100% repeat-x;
  bottom: 12%; height: 22%; left: 18%; right: 18%;
}
.bs-fire::after {
  animation: bsFlame 0.8s ease-in-out infinite alternate;
  background: radial-gradient(ellipse at 50% 80%, #fff3a0 0 25%, #ffb52e 26% 55%, #e2491c 56% 100%);
  border-radius: 50% 50% 46% 46% / 70% 70% 30% 30%; bottom: 24%; height: 50%; left: 32%; right: 32%; transform-origin: 50% 100%;
}
.bs-fire > i:nth-child(1) { background: #6b4320; border-radius: 2px; bottom: 20%; height: 8%; left: 24%; right: 24%; transform: rotate(14deg); }
.bs-fire > i:nth-child(2) { background: #5a3a1a; border-radius: 2px; bottom: 20%; height: 8%; left: 24%; right: 24%; transform: rotate(-14deg); }
@keyframes bsFlame { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(1.1, 1.14) rotate(3deg); } }

/* ── Bauplatz ── */
.bs-plot::before {
  background: rgba(255, 255, 255, 0.24); border: 3px dashed #fff8e6; border-radius: 8px; bottom: 16%; left: 12%; right: 12%; top: 16%;
}
.bs-plot::after {
  background:
    linear-gradient(#e0942a, #e0942a) 0 0 / 12% 24% no-repeat,
    linear-gradient(#e0942a, #e0942a) 100% 0 / 12% 24% no-repeat,
    linear-gradient(#e0942a, #e0942a) 0 100% / 12% 24% no-repeat,
    linear-gradient(#e0942a, #e0942a) 100% 100% / 12% 24% no-repeat;
  bottom: 10%; left: 8%; right: 8%; top: 10%;
}

/* ── Bäume (Deko und Wäldchen) ── */
.bs-tree::before {
  background:
    radial-gradient(circle at 28% 62%, #2f8f3a 0 30%, transparent 31%),
    radial-gradient(circle at 72% 62%, #2f8f3a 0 30%, transparent 31%),
    radial-gradient(circle at 50% 36%, #3fae4a 0 34%, transparent 35%);
  bottom: 24%; left: 8%; right: 8%; top: 6%;
}
.bs-tree::after { background: #6b4320; border-radius: 2px; bottom: 6%; height: 26%; left: 43%; width: 14%; }
.bs-tree.v1::before {
  background:
    radial-gradient(circle at 30% 62%, #23763a 0 30%, transparent 31%),
    radial-gradient(circle at 70% 62%, #23763a 0 30%, transparent 31%),
    radial-gradient(circle at 50% 36%, #2f9a48 0 34%, transparent 35%);
}
.bs-tree.v2::before {
  background: linear-gradient(#2c8a44, #1f6b34); bottom: 24%; clip-path: polygon(50% 0, 86% 48%, 68% 48%, 94% 100%, 6% 100%, 32% 48%, 14% 48%); left: 8%; right: 8%; top: 4%;
}
.bs-tree.grove > i:nth-child(1) { background: #c9985a; border-radius: 50%; bottom: 6%; height: 8%; right: 12%; width: 16%; }

/* ── Steine ── */
.bs-rock::before {
  background: linear-gradient(135deg, #c2c6cd 0 45%, #8b9098 45% 100%);
  bottom: 14%; clip-path: polygon(10% 100%, 0 56%, 24% 14%, 70% 0, 100% 46%, 88% 100%); left: 12%; right: 12%; top: 22%;
}
.bs-rock::after {
  background: #a9adb5; bottom: 12%; clip-path: polygon(0 100%, 12% 30%, 70% 0, 100% 100%); height: 26%; left: 58%; width: 28%;
}
.bs-rock.v1::before { background: linear-gradient(135deg, #d0c9bd 0 45%, #9a9184 45% 100%); }

/* ── Kräuter ── */
.bs-herb::before {
  background:
    radial-gradient(circle at 25% 62%, #4caf50 0 36%, transparent 37%),
    radial-gradient(circle at 70% 58%, #43a047 0 38%, transparent 39%),
    radial-gradient(circle at 48% 32%, #66bb6a 0 32%, transparent 33%);
  bottom: 12%; left: 12%; right: 12%; top: 30%;
}
.bs-herb::after {
  background:
    radial-gradient(circle at 30% 60%, #ff8fb1 0 12%, transparent 13%),
    radial-gradient(circle at 66% 48%, #fff3a0 0 12%, transparent 13%),
    radial-gradient(circle at 50% 30%, #ff8fb1 0 11%, transparent 12%);
  bottom: 12%; left: 12%; right: 12%; top: 30%;
}
.bs-herb.v1::after {
  background:
    radial-gradient(circle at 30% 60%, #b39ddb 0 12%, transparent 13%),
    radial-gradient(circle at 66% 48%, #fff 0 12%, transparent 13%),
    radial-gradient(circle at 50% 30%, #b39ddb 0 11%, transparent 12%);
}

/* ── Wasser (Teich) ── */
.dg-cell.base-water {
  background: linear-gradient(180deg, #62bdf2, #3f9be0);
  overflow: hidden;
}
.dg-cell.base-water::after {
  animation: bsWave 4s linear infinite;
  background: repeating-linear-gradient(0deg, transparent 0 22%, rgba(255, 255, 255, 0.32) 22% 27%);
  content: ""; inset: 0; position: absolute;
}
@keyframes bsWave { from { background-position: 0 0; } to { background-position: 0 100%; } }

/* ═══════════════════════════════════════════════════════════════════════
   Funktionsgebäude — je für ihre Feldgröße gezeichnet (Breite W × Höhe H der Fläche):
   2×1: Tauschstand, Lagerraum, Missionsboard, Erfolgstafel, Ehrentafel, Bibliothek, Medaillenshop, Näherei
   1×2: Kleiderschrank      2×2: Perk-Schrein
   Alle Maße in Prozent der jeweiligen Fläche.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tauschstand (2×1): Marktstand mit Schaukasten ── */
.bs-stall {
  background:
    linear-gradient(#6b4320, #6b4320) 5% 34% / 2.2% 58% no-repeat,
    linear-gradient(#6b4320, #6b4320) 95% 34% / 2.2% 58% no-repeat;
}
.bs-stall::before {
  background: repeating-linear-gradient(90deg, #e0492e 0 6.25%, #fff8e6 6.25% 12.5%);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 93.75% 100%, 87.5% 70%, 81.25% 100%, 75% 70%, 68.75% 100%, 62.5% 70%, 56.25% 100%, 50% 70%, 43.75% 100%, 37.5% 70%, 31.25% 100%, 25% 70%, 18.75% 100%, 12.5% 70%, 6.25% 100%, 0 70%);
  height: 38%; left: 1%; right: 1%; top: 4%;
}
.bs-stall::after {
  background: repeating-linear-gradient(90deg, #cfa068 0 9%, #b98a50 9% 10%);
  border: 3px solid #7a4d20; border-radius: 3px; bottom: 6%; left: 6%; right: 6%; top: 56%;
}
.bs-stall > i:nth-child(1) { background: #e8b84a; border: 2px solid #7a4d20; bottom: 40%; height: 22%; left: 14%; width: 11%; }
.bs-stall > i:nth-child(2) {
  background: radial-gradient(circle at 35% 35%, #ff8a7a 0 25%, #d9412e 26% 100%); border: 2px solid #7a1f14; border-radius: 50%;
  bottom: 40%; height: 20%; right: 18%; width: 10%;
}

/* ── Lagerraum (2×1): Schuppen mit Doppeltür und Kisten ── */
.bs-storage {
  background:
    linear-gradient(#e8b84a, #e8b84a) 2% 98% / 7% 26% no-repeat,
    linear-gradient(#6ac46a, #6ac46a) 98% 98% / 7% 20% no-repeat;
}
.bs-storage::before {
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 12%, transparent 12% 24%), #8a5a2b;
  clip-path: polygon(0 100%, 8% 0, 92% 0, 100% 100%); height: 34%; left: 6%; right: 6%; top: 4%;
}
.bs-storage::after {
  background: repeating-linear-gradient(90deg, #d8b070 0 8%, #c4995a 8% 8.6%);
  border: 3px solid #6b4a1e; bottom: 4%; left: 11%; right: 11%; top: 38%;
}
.bs-storage > i:nth-child(1) {
  background: linear-gradient(90deg, transparent 49%, #3b2a14 49% 51%, transparent 51%), #7a4d20;
  border: 2px solid #3b2a14; bottom: 4%; height: 46%; left: 38%; width: 24%; z-index: 1;
}
.bs-storage > i:nth-child(2) { background: #f6d24a; border: 2px solid #7a4d20; border-radius: 50%; bottom: 24%; height: 8%; left: 48%; width: 4%; z-index: 2; }

/* ── Missionsboard (2×1): große Pinnwand auf Pfosten ── */
.bs-board::before {
  background: repeating-linear-gradient(0deg, #b07a3c 0 16%, #9a6830 16% 18%);
  border: 3px solid #6b4320; border-radius: 4px; height: 62%; left: 4%; right: 4%; top: 6%;
}
.bs-board::after {
  background:
    radial-gradient(circle, #e0342a 0 100%) 12% 6% / 2.6% 10% no-repeat,
    radial-gradient(circle, #e0342a 0 100%) 30% 4% / 2.6% 10% no-repeat,
    radial-gradient(circle, #e0342a 0 100%) 50% 8% / 2.6% 10% no-repeat,
    radial-gradient(circle, #e0342a 0 100%) 70% 4% / 2.6% 10% no-repeat,
    linear-gradient(#fffdf0, #fffdf0) 6% 18% / 14% 40% no-repeat,
    linear-gradient(#fff3a0, #fff3a0) 25% 12% / 12% 34% no-repeat,
    linear-gradient(#ffd0d6, #ffd0d6) 44% 20% / 13% 46% no-repeat,
    linear-gradient(#cfe6ff, #cfe6ff) 63% 12% / 14% 38% no-repeat,
    linear-gradient(#fffdf0, #fffdf0) 84% 26% / 10% 36% no-repeat;
  height: 62%; left: 4%; right: 4%; top: 6%;
}
.bs-board > i:nth-child(1) { background: #6b4320; bottom: 4%; height: 32%; left: 16%; width: 3.6%; }
.bs-board > i:nth-child(2) { background: #6b4320; bottom: 4%; height: 32%; right: 16%; width: 3.6%; }

/* ── Erfolgstafel (2×1): Siegerpodest mit Pokal ── */
.bs-trophy::before {
  background:
    linear-gradient(#f2c230, #f2c230) 50% 100% / 26% 58% no-repeat,
    linear-gradient(#cfd4dc, #cfd4dc) 20% 100% / 26% 40% no-repeat,
    linear-gradient(#d99a58, #d99a58) 80% 100% / 26% 28% no-repeat;
  border-radius: 3px; bottom: 4%; height: 60%; left: 10%; right: 10%;
}
.bs-trophy::after {
  background: linear-gradient(90deg, #f2c230, #ffe98a 40%, #e8a920); border: 2px solid #9a7410; border-radius: 6px 6px 50% 50%;
  height: 30%; left: 44%; top: 6%; width: 12%;
}
.bs-trophy > i:nth-child(1) { background: #e8a920; border: 2px solid #9a7410; height: 12%; left: 48%; top: 34%; width: 4%; }
.bs-trophy > i:nth-child(2) { background: #f2c230; border: 2px solid #9a7410; border-radius: 3px; height: 8%; left: 43%; top: 45%; width: 14%; }

/* ── Ehrentafel (2×1): Bestenliste an zwei Pfosten ── */
.bs-plaque::before {
  background: #3b2a1a; border: 3px solid #d9a520; border-radius: 5px; bottom: 26%; left: 6%; right: 6%; top: 8%;
}
.bs-plaque::after {
  background:
    linear-gradient(#f6f0dc, #f6f0dc) 90% 18% / 62% 10% no-repeat,
    linear-gradient(#f6d24a, #f6d24a) 90% 50% / 70% 10% no-repeat,
    linear-gradient(#f6f0dc, #f6f0dc) 90% 82% / 50% 10% no-repeat,
    radial-gradient(circle, #f6d24a 0 100%) 6% 18% / 8% 22% no-repeat,
    radial-gradient(circle, #cfd4dc 0 100%) 6% 50% / 8% 22% no-repeat,
    radial-gradient(circle, #d99a58 0 100%) 6% 82% / 8% 22% no-repeat;
  bottom: 26%; left: 6%; right: 6%; top: 8%;
}
.bs-plaque > i:nth-child(1) { background: #6b4320; bottom: 4%; height: 28%; left: 18%; width: 3.6%; }
.bs-plaque > i:nth-child(2) { background: #6b4320; bottom: 4%; height: 28%; right: 18%; width: 3.6%; }

/* ── Bibliothek (2×1): zweistöckiges Bücherregal ── */
.bs-library::before {
  background: repeating-linear-gradient(90deg, #d9534f 0 3%, #7a2e2c 3% 3.5%, #5b8fd9 3.5% 7%, #2f5fa8 7% 7.5%, #6ac46a 7.5% 10.5%, #3f8a3f 10.5% 11%, #e8b84a 11% 14.5%, #a8802a 14.5% 15%, #c56fd6 15% 18%, #8a3fa0 18% 18.5%);
  bottom: 54%; left: 6%; right: 6%; top: 12%;
}
.bs-library::after {
  background: repeating-linear-gradient(90deg, #5b8fd9 0 4%, #2f5fa8 4% 4.5%, #e8b84a 4.5% 7.5%, #a8802a 7.5% 8%, #d9534f 8% 12%, #7a2e2c 12% 12.5%, #6ac46a 12.5% 15%, #3f8a3f 15% 15.5%);
  bottom: 12%; left: 6%; right: 6%; top: 58%;
}
.bs-library > i:nth-child(1) { border: 4px solid #6b4320; border-radius: 4px; bottom: 6%; left: 3%; right: 3%; top: 6%; }
.bs-library > i:nth-child(2) { background: #6b4320; height: 5%; left: 3%; right: 3%; top: 48%; }

/* ── Medaillenshop / Näherei (2×1): Häuschen mit Schild ── */
.bs-house-gold, .bs-house-green { --roof: #d9a520; --wall: #f3d9a6; }
.bs-house-green { --roof: #3f9a55; --wall: #e4f0d0; }
.bs-house-gold::before, .bs-house-green::before {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.18), transparent 40%), var(--roof);
  clip-path: polygon(0 100%, 18% 0, 82% 0, 100% 100%); height: 40%; left: 8%; right: 8%; top: 4%;
}
.bs-house-gold::after, .bs-house-green::after {
  background:
    linear-gradient(#bfe3ff, #bfe3ff) 10% 34% / 14% 30% no-repeat,
    linear-gradient(#bfe3ff, #bfe3ff) 90% 34% / 14% 30% no-repeat,
    var(--wall);
  border: 3px solid #6b4a1e; bottom: 4%; left: 16%; right: 16%; top: 44%;
}
.bs-house-gold > i:nth-child(1), .bs-house-green > i:nth-child(1) { background: #6b4320; border-radius: 3px 3px 0 0; bottom: 4%; height: 36%; left: 45%; width: 10%; z-index: 1; }
.bs-house-gold > i:nth-child(2) {
  background: radial-gradient(circle, #fff3a0 0 35%, #e8b820 36% 100%); border: 2px solid #9a7410; border-radius: 50%;
  height: 18%; left: 45.5%; top: 24%; width: 9%; z-index: 2;
}
.bs-house-green > i:nth-child(2) {
  background: #e8579b; border: 2px solid #8a2a5a; border-radius: 4px 4px 6px 6px; height: 18%; left: 46%; top: 24%; width: 8%; z-index: 2;
}

/* ── Kleiderschrank (1×2): hoher Doppeltür-Schrank ── */
.bs-wardrobe::before {
  background: linear-gradient(90deg, #a06a30 0 49%, #5a3a1a 49% 51%, #a06a30 51% 100%);
  border: 3px solid #5a3a1a; border-radius: 4px; bottom: 8%; left: 14%; right: 14%; top: 10%;
}
.bs-wardrobe::after {
  background:
    radial-gradient(circle, #ffd84a 0 100%) 44% 50% / 8% 3.5% no-repeat,
    radial-gradient(circle, #ffd84a 0 100%) 56% 50% / 8% 3.5% no-repeat,
    linear-gradient(#7a4d20, #7a4d20) 24% 26% / 22% 22% no-repeat,
    linear-gradient(#7a4d20, #7a4d20) 76% 26% / 22% 22% no-repeat,
    linear-gradient(#7a4d20, #7a4d20) 24% 74% / 22% 30% no-repeat,
    linear-gradient(#7a4d20, #7a4d20) 76% 74% / 22% 30% no-repeat;
  bottom: 10%; left: 19%; right: 19%; top: 14%;
}
.bs-wardrobe > i:nth-child(1) { background: #6b4320; border-radius: 3px; height: 6%; left: 10%; right: 10%; top: 5%; }
.bs-wardrobe > i:nth-child(2) {
  background: #5a3a1a; bottom: 2%; height: 6%; left: 18%; right: 18%;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 78% 100%, 74% 40%, 26% 40%, 22% 100%, 8% 100%);
}

/* ── Perk-Schrein (2×2): Steinaltar zwischen zwei Feuerschalen, darüber ein leuchtender Stern ── */
.bs-shrine {
  background:
    linear-gradient(135deg, #b9bec6, #8b9098) 50% 96% / 88% 16% no-repeat,
    linear-gradient(135deg, #c9cdd4, #9ea3ab) 50% 82% / 70% 14% no-repeat;
}
.bs-shrine::before {
  animation: bsGlow 1.4s ease-in-out infinite alternate;
  background: #ffd84a; height: 26%; left: 41%; top: 6%; width: 18%;
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 82% 100%, 50% 76%, 18% 100%, 30% 60%, 0 38%, 38% 36%);
}
.bs-shrine::after {
  background:
    linear-gradient(135deg, #cfd3da, #969ba3) 50% 54% / 26% 34% no-repeat,
    linear-gradient(#2a2d33, #2a2d33) 50% 42% / 22% 6% no-repeat,
    linear-gradient(135deg, #c2c6cd, #8b9098) 14% 56% / 12% 44% no-repeat,
    linear-gradient(135deg, #c2c6cd, #8b9098) 86% 56% / 12% 44% no-repeat;
  bottom: 14%; left: 0; right: 0; top: 30%;
}
.bs-shrine > i:nth-child(1), .bs-shrine > i:nth-child(2) {
  animation: bsFlame 0.8s ease-in-out infinite alternate;
  background: radial-gradient(ellipse at 50% 80%, #fff3a0 0 25%, #ffb52e 26% 55%, #e2491c 56% 100%);
  border-radius: 50% 50% 46% 46% / 70% 70% 30% 30%; height: 16%; top: 40%; transform-origin: 50% 100%; width: 6%; z-index: 2;
}
.bs-shrine > i:nth-child(1) { left: 11%; }
.bs-shrine > i:nth-child(2) { right: 11%; }
@keyframes bsGlow { from { filter: brightness(0.95); } to { filter: brightness(1.35) drop-shadow(0 0 4px #fff3a0); } }

/* ── Abzeichenschrank (1×2): Glasvitrine mit drei Orden ── */
.bs-medalcase::before {
  background: linear-gradient(90deg, #7a4d20 0 10%, #bfe3ff 10% 90%, #7a4d20 90% 100%);
  border: 3px solid #5a3a1a; border-radius: 4px; bottom: 8%; left: 12%; right: 12%; top: 10%;
}
.bs-medalcase::after {
  background:
    radial-gradient(circle, #fff3a0 0 30%, #e8b820 32% 70%, #9a7410 71% 100%) 50% 24% / 44% 18% no-repeat,
    radial-gradient(circle, #eef1f4 0 30%, #c2c8d0 32% 70%, #7d838b 71% 100%) 30% 52% / 34% 15% no-repeat,
    radial-gradient(circle, #f0c48a 0 30%, #d99a58 32% 70%, #8a5a2a 71% 100%) 68% 68% / 34% 15% no-repeat;
  bottom: 12%; left: 14%; right: 14%; top: 14%;
}
.bs-medalcase > i:nth-child(1) { background: #5a3a1a; height: 6%; left: 16%; right: 16%; top: 5%; }
.bs-medalcase > i:nth-child(2) { background: #5a3a1a; bottom: 3%; height: 6%; left: 16%; right: 16%; }

/* ═══════════════════════════════════════════════════════════════════════
   Bodenschmuck auf den Grasfeldern: Blumen, Büsche, Grasbüschel.
   Rein dekorativ (pointer-events: none) und begehbar — sie blockieren nichts.
   --ox / --oy verschieben jedes Motiv leicht in der Kachel, damit es nicht wie ein Raster aussieht.
   ═══════════════════════════════════════════════════════════════════════ */
.bd { inset: 0; pointer-events: none; position: absolute; }
.bd > i { position: absolute; }

/* Blumen: 3 Blüten mit Stiel; v0 rosa/gelb · v1 lila/weiß · v2 rot/gelb · v3 blau/weiß */
.bd-flower { --c1: #ff8fb1; --c2: #ffe066; }
.bd-flower.v1 { --c1: #b39ddb; --c2: #ffffff; }
.bd-flower.v2 { --c1: #ef5350; --c2: #ffe066; }
.bd-flower.v3 { --c1: #64b5f6; --c2: #ffffff; }
.bd-flower > i {
  background:
    radial-gradient(circle at 50% 50%, var(--c2) 0 20%, transparent 21%),
    radial-gradient(circle at 50% 16%, var(--c1) 0 24%, transparent 25%),
    radial-gradient(circle at 50% 84%, var(--c1) 0 24%, transparent 25%),
    radial-gradient(circle at 16% 50%, var(--c1) 0 24%, transparent 25%),
    radial-gradient(circle at 84% 50%, var(--c1) 0 24%, transparent 25%);
  height: 15%; width: 15%;
}
.bd-flower > i::after { background: #3f8f34; content: ""; height: 90%; left: 44%; position: absolute; top: 88%; width: 12%; }
.bd-flower > i:nth-child(1) { left: calc(12% + var(--ox, 0%)); top: calc(24% + var(--oy, 0%)); }
.bd-flower > i:nth-child(2) { left: calc(44% + var(--ox, 0%)); top: calc(46% + var(--oy, 0%)); transform: scale(0.85); }
.bd-flower > i:nth-child(3) { left: calc(66% + var(--ox, 0%)); top: calc(18% + var(--oy, 0%)); transform: scale(0.7); }

/* Büsche: kleine runde Gruppe, v1 mit roten Beeren, v2 mit weißen Blüten */
.bd-bush {
  filter: drop-shadow(0 3px 0 rgba(28, 66, 22, 0.3));
  height: 34%; inset: auto; left: calc(18% + var(--ox, 0%)); top: calc(46% + var(--oy, 0%)); width: 44%;
}
.bd-bush::before {
  background:
    radial-gradient(circle at 24% 62%, #3f9a3a 0 34%, transparent 35%),
    radial-gradient(circle at 74% 62%, #388e3c 0 36%, transparent 37%),
    radial-gradient(circle at 50% 34%, #52ad4a 0 38%, transparent 39%),
    radial-gradient(circle at 42% 22%, rgba(255, 255, 255, 0.25) 0 10%, transparent 11%);
  content: ""; inset: 0; position: absolute;
}
.bd-bush.v1::after {
  background:
    radial-gradient(circle at 30% 60%, #e53935 0 6%, transparent 7%),
    radial-gradient(circle at 62% 46%, #e53935 0 6%, transparent 7%),
    radial-gradient(circle at 76% 70%, #e53935 0 6%, transparent 7%),
    radial-gradient(circle at 46% 30%, #e53935 0 6%, transparent 7%);
  content: ""; inset: 0; position: absolute;
}
.bd-bush.v2::after {
  background:
    radial-gradient(circle at 30% 58%, #fff 0 7%, transparent 8%),
    radial-gradient(circle at 64% 44%, #fff 0 7%, transparent 8%),
    radial-gradient(circle at 74% 72%, #fff 0 7%, transparent 8%);
  content: ""; inset: 0; position: absolute;
}

/* Grasbüschel: drei dunklere Halme */
.bd-tuft > i { background: #4a9a3a; clip-path: polygon(50% 0, 100% 100%, 0 100%); height: 16%; width: 6%; }
.bd-tuft > i:nth-child(1) { left: calc(30% + var(--ox, 0%)); top: calc(56% + var(--oy, 0%)); transform: rotate(-16deg); }
.bd-tuft > i:nth-child(2) { left: calc(37% + var(--ox, 0%)); top: calc(52% + var(--oy, 0%)); }
.bd-tuft > i:nth-child(3) { left: calc(44% + var(--ox, 0%)); top: calc(56% + var(--oy, 0%)); transform: rotate(16deg); }

/* ═══ Pixel-Grafik (assets/js/pixelart.js): ersetzt die CSS-Sprites oben, wo eine Pixelversion existiert ═══ */
.bsx { filter: drop-shadow(0 3px 0 rgba(28, 66, 22, 0.28)); inset: 0; pointer-events: none; position: absolute; }
.px-svg { display: block; height: 100%; overflow: visible; width: 100%; }
.bdx { inset: 0; pointer-events: none; position: absolute; transform: translate(var(--ox, 0%), var(--oy, 0%)); }
.bsx-fire .px-l-flame, .bsx-kochstelle .px-l-flame { animation: bsFlame 0.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.base-stage[data-light="abend"] .bsx-fire, .base-stage[data-light="nacht"] .bsx-fire { filter: brightness(1.5) drop-shadow(0 0 7px #ffb52e); }

/* ═══ Pixel-Bodenfliesen (Variablen setzt pixelart.js) ═══ */
.base-grid .dg-cell.dg-is-corridor.dg-tile-a:not(.base-path):not(.base-plaza) { background-image: var(--px-grass-a) !important; background-size: 100% 100% !important; image-rendering: pixelated; }
.base-grid .dg-cell.dg-is-corridor.dg-tile-b:not(.base-path):not(.base-plaza) { background-image: var(--px-grass-b) !important; background-size: 100% 100% !important; image-rendering: pixelated; }
.base-grid .dg-cell.dg-is-corridor.base-plaza.dg-tile-a { background: var(--px-plaza-a) center / 100% 100% !important; image-rendering: pixelated; }
.base-grid .dg-cell.dg-is-corridor.base-plaza.dg-tile-b { background: var(--px-plaza-b) center / 100% 100% !important; image-rendering: pixelated; }
.base-grid .dg-cell.base-path.pt-p { background: var(--px-pflaster) center / 100% 100% !important; image-rendering: pixelated; box-shadow: none; }
.base-grid .dg-cell.base-path.pt-h { background: var(--px-holz) center / 100% 100% !important; image-rendering: pixelated; box-shadow: none; }
.base-grid .dg-cell.base-path.pt-k { background: var(--px-kies) center / 100% 100% !important; image-rendering: pixelated; box-shadow: none; }

/* ═══ Wasser: homogene Flächen, Tiefe nach Abstand zum Ufer (wd1 flach … wd4 tief), Schaumsaum am Ufer ═══ */
.dg-cell.base-water { background-color: #58b9e8; overflow: hidden; }
.dg-cell.base-water.wd2 { box-shadow: inset 0 0 0 100px rgba(20, 70, 160, 0.07); }
.dg-cell.base-water.wd3 { box-shadow: inset 0 0 0 100px rgba(20, 70, 160, 0.14); }
.dg-cell.base-water.wd4 { box-shadow: inset 0 0 0 100px rgba(20, 70, 160, 0.22); }
.dg-cell.base-water::after {
  animation: pxWaterDrift 18s linear infinite; animation-delay: var(--wd, 0s);
  background: var(--px-water-fx) 0 0 / 100% 100% repeat; content: ""; image-rendering: pixelated; inset: 0; opacity: 0.8; position: absolute;
}
@keyframes pxWaterDrift { from { background-position: 0 0; } to { background-position: 100% 100%; } }
.wsh { position: absolute; z-index: 1; pointer-events: none; }
.wsh-n { left: 0; right: 0; top: 0; height: 22%; background: linear-gradient(to bottom, rgba(255,255,255,0.78) 0 9%, rgba(255,255,255,0.3) 9% 22%, transparent 22%); }
.wsh-s { left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(to top, rgba(255,255,255,0.78) 0 9%, rgba(255,255,255,0.3) 9% 22%, transparent 22%); }
.wsh-w { top: 0; bottom: 0; left: 0; width: 22%; background: linear-gradient(to right, rgba(255,255,255,0.78) 0 9%, rgba(255,255,255,0.3) 9% 22%, transparent 22%); }
.wsh-e { top: 0; bottom: 0; right: 0; width: 22%; background: linear-gradient(to left, rgba(255,255,255,0.78) 0 9%, rgba(255,255,255,0.3) 9% 22%, transparent 22%); }
@media (prefers-reduced-motion: reduce) { .dg-cell.base-water::after { animation: none; } }

/* Saison-Deko als Pixelart */
.bdx-pumpkin .px-svg { filter: drop-shadow(0 1px 0 rgba(0,0,0,0.3)); }
.base-stage[data-light="abend"] .bdx-pumpkin .px-l-face { filter: brightness(1.4); }
.base-stage[data-light="nacht"] .bdx-pumpkin { filter: drop-shadow(0 0 5px rgba(255,170,40,0.9)); }
.bdx-xmas { transform: translate(var(--ox, 0%), var(--oy, 0%)) scale(1.9); transform-origin: 50% 85%; }
.bdx-xmas .px-l-lights { animation: bdLights 1.1s steps(2) infinite; }
.base-stage[data-light="nacht"] .bdx-xmas { filter: brightness(1.5) drop-shadow(0 0 6px #ffd84a); }

/* ── Wohnhäuser (pixelart-houses.js): 2×2 Baufläche, 3 Kacheln hoch; oberste Reihe = Dach in der Höhen-Ebene über Spieler/Bewohnern ── */
.base-house { inset: auto !important; left: calc(0% - var(--sx, 0) * 100%) !important; top: calc(0% - var(--sy, 0) * 100%) !important;
  width: calc(var(--bw, 2) * 100%) !important; height: calc(var(--bh, 2) * 100%) !important; }
.base-house .bh-body { position: absolute; inset: 0; overflow: hidden; display: block; }
.base-house .bh-art { position: absolute; left: 0; bottom: 0; width: 100%; height: 150%; display: block; }
.base-house .bh-art svg, .base-roof svg { display: block; width: 100%; height: 100%; }
.base-roof-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; will-change: transform; }
.base-roof { position: absolute; overflow: hidden; }
.base-roof svg { position: absolute; left: 0; top: 0; width: 100%; height: 300%; }
.base-house .px-l-flame, .bsx .px-l-flame { animation: bsFlame 0.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.base-roof .px-l-smoke, .base-house .px-l-smoke { animation: bhSmoke 3.6s ease-in-out infinite; }
.base-roof .px-l-bat { animation: bhBat 2.6s ease-in-out infinite; }
@keyframes bhSmoke { 0% { transform: translateY(1px); opacity: 0.2; } 50% { opacity: 0.95; } 100% { transform: translateY(-3px); opacity: 0; } }
@keyframes bhBat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, 2px); } }
/* Aufbau: erst wächst die Wandhälfte von unten, danach das Dach (Verzögerung per --bt = bereits verstrichene Zeit) */
.base-house.building .bh-art { animation: bhRise 2.4s steps(10, end) both; animation-delay: var(--bt, 0s); }
.base-roof.building svg { animation: bhRoof 1.8s steps(8, end) both; animation-delay: calc(2.4s + var(--bt, 0s)); }
.base-house.building::after { content: "🔨"; position: absolute; left: 50%; bottom: 4%; font-size: clamp(0.9rem, 3cqh, 1.6rem); z-index: 7; animation: bhHammer 0.5s ease-in-out infinite alternate; pointer-events: none; }
@keyframes bhRise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bhRoof { from { clip-path: inset(100% 0 0 0); opacity: 0; } 1% { opacity: 1; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes bhHammer { from { transform: rotate(-25deg); } to { transform: rotate(20deg); } }

/* Wegweiser-Schild am Haus: einziger Auslöser für das Menü */
.bh-sign { position: absolute; right: 3%; bottom: 2%; width: calc(42% / var(--bw, 2)); aspect-ratio: 12 / 16; z-index: 4; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35)); }
.bh-sign svg { display: block; width: 100%; height: 100%; }
.base-house:hover, .base-obj:hover .bh-sign { filter: none; transform: none; }
/* Dach-Überlappung 1/16 Kachel: Sprite läuft über die erweiterte Höhe weiter */
.base-roof svg { height: 282.353%; }
/* Brücke über den Bach: Planken quer zur Laufrichtung, Geländer oben/unten */
.base-bridge { position: absolute; inset: 0; z-index: 2; pointer-events: none; image-rendering: pixelated;
  background: repeating-linear-gradient(90deg, #b8864f 0 3px, #8a5a2b 3px 4px);
  border-top: 3px solid #5a3a1a; border-bottom: 3px solid #5a3a1a; box-shadow: 0 2px 0 rgba(0,0,0,0.25); }
.base-roof.ed { opacity: 0.5; }
.base-roof.base-roof-tree svg { height: 100%; }
.base-roof.base-roof-tree { overflow: visible; }
/* Silhouette der Figur hinter einem Dach */
.base-roof-ghost { position: absolute; pointer-events: none; opacity: 0.6; z-index: 5; filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(30,20,10,0.9)); }
.base-roof-ghost[hidden] { display: none; }
.base-roof-ghost .dg-player-wrap { inset: 0; }
/* Sprechblasen über den Dächern (siehe liftBubble in base-freemove.js) */
.base-bubble-layer { position: absolute; inset: 0; z-index: 11; pointer-events: none; will-change: transform; }
.base-lifted-bubble { position: absolute; }
.base-npc.bubble-lifted .dg-speech-bubble { visibility: hidden; }
/* verschlossenes Haus (Vertrauen < 50) */
.bh-lock { position: absolute; left: 12%; bottom: 18%; z-index: 5; font-size: clamp(0.8rem, 2.6cqh, 1.4rem); filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); pointer-events: none; }

/* Wasserglitzer dezenter (die Pixel-Kacheln tragen schon die Wellen) */
.dg-cell.base-water::after { opacity: 0.35; }

/* Kürbisse leuchten, wenn es dunkel wird (Nachtfilter dunkelt den Boden ab → Kürbis hellt gegen, damit er sichtbar leuchtet) */
.bdx-pumpkin::before { content: ""; position: absolute; inset: -55%; pointer-events: none; opacity: 0; transition: opacity 1.6s;
  background: radial-gradient(circle at 50% 62%, rgba(255, 176, 56, 0.65), rgba(255, 140, 30, 0.22) 42%, transparent 68%); }
.base-stage[data-light="abend"] .bdx-pumpkin::before { opacity: 0.45; }
.base-stage[data-light="nacht"] .bdx-pumpkin::before { opacity: 1; animation: bdGlow 2.6s ease-in-out infinite alternate; }
.base-stage[data-light="abend"] .bdx-pumpkin { filter: brightness(1.2) saturate(1.2); }
.base-stage[data-light="nacht"] .bdx-pumpkin { filter: brightness(2.2) saturate(1.3) drop-shadow(0 0 5px rgba(255, 170, 40, 0.95)); }
.base-stage[data-light="nacht"] .bdx-pumpkin .px-l-face { filter: brightness(1.6); }
@keyframes bdGlow { from { transform: scale(0.92); opacity: 0.8; } to { transform: scale(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .base-stage[data-light="nacht"] .bdx-pumpkin::before { animation: none; } }

/* Fluss: Strömung nach Süden, runde Wasserecken statt Kachel-Kanten */
/* Strömung: die Muster-Ebenen sind doppelt so hoch wie die Kachel und gleiten um genau eine Kachelhöhe nach Süden (Prozent-Positionen würden bei 100 % Größe nicht wandern).
   Alle Flusskacheln laufen im Gleichtakt (keine Verzögerung) → die Streifen fließen nahtlos über Kachelgrenzen; steps() gibt den Pixel-Takt. */
@keyframes pxWaterFlow { from { transform: translateY(0); } to { transform: translateY(50%); } }
.dg-cell.base-water.wr::after {
  inset: auto; left: 0; right: 0; top: -100%; height: 200%;
  background-size: 100% 50%; opacity: 0.7;
  animation: pxWaterFlow 4.8s steps(12) infinite;
}
.dg-cell.base-water.wc-ne { border-top-right-radius: 42%; }
.dg-cell.base-water.wc-se { border-bottom-right-radius: 42%; }
.dg-cell.base-water.wc-sw { border-bottom-left-radius: 42%; }
.dg-cell.base-water.wc-nw { border-top-left-radius: 42%; }
@media (prefers-reduced-motion: reduce) { .dg-cell.base-water.wr::after { animation: none; } }
.base-grid .base-cells { background: #6aa84a; }   /* Untergrund für die runden Wasserecken: wirkt wie Gras */
.wcv { position: absolute; width: 50%; height: 50%; z-index: 1; pointer-events: none; }
.wcv-nw { left: 0; top: 0; background: radial-gradient(circle at 0 0, #58b9e8 0 62%, #fff 63% 70%, transparent 71%); }
.wcv-ne { right: 0; top: 0; background: radial-gradient(circle at 100% 0, #58b9e8 0 62%, #fff 63% 70%, transparent 71%); }
.wcv-se { right: 0; bottom: 0; background: radial-gradient(circle at 100% 100%, #58b9e8 0 62%, #fff 63% 70%, transparent 71%); }
.wcv-sw { left: 0; bottom: 0; background: radial-gradient(circle at 0 100%, #58b9e8 0 62%, #fff 63% 70%, transparent 71%); }

/* Brücke: Deck deckt die ganze Kachel, kein Wasser/Schaum darunter sichtbar */
.dg-cell.base-bridge-cell { background: #8e5f30; }
/* Dezente Strömung: helle Strömungsstriche wandern nach Süden */
@keyframes pxWaterStreak { from { transform: translateY(0); } to { transform: translateY(50%); } }
.dg-cell.base-water.wr::before {
  content: ""; position: absolute; left: 0; right: 0; top: -100%; height: 200%; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(180deg, transparent 0 18%, rgba(255, 255, 255, 0.5) 18% 34%, transparent 34% 100%),
    linear-gradient(180deg, transparent 0 58%, rgba(255, 255, 255, 0.36) 58% 70%, transparent 70% 100%);
  background-size: 8% 50%, 6% 50%; background-repeat: repeat-y; background-position: 22% 0, 63% 0;
  animation: pxWaterStreak 2.8s steps(14) infinite;
}
.dg-cell.base-water.wr.wv1::before { background-position: 38% 0, 78% 0; }
.dg-cell.base-water.wr.wv2::before { background-position: 8% 0, 52% 0; }
@media (prefers-reduced-motion: reduce) { .dg-cell.base-water.wr::before { animation: none; } }
/* Dorfplatz-Ausbau: Stufe 1 gepflastert, Stufe 2 Festplatz */
.base-grid .dg-cell.dg-is-corridor.base-plaza:is(.plz1, .plz2) { background: var(--px-pflaster) center / 100% 100% !important; image-rendering: pixelated; }
.base-grid .dg-cell.dg-is-corridor.base-plaza.plz2 { box-shadow: inset 0 0 0 100px rgba(255, 226, 150, 0.16); }

/* Kürbislaterne: Kerzenschein im Gesicht (Ebene "lit"); mit Nachtansicht (.bn) übernimmt base-night.js das Leuchten über der Tönung */
.bdx-pumpkin .px-l-lit { opacity: 0.3; transition: opacity 1.6s; }
.base-stage[data-light="abend"] .bdx-pumpkin .px-l-lit { opacity: 0.85; }
.base-stage[data-light="nacht"] .bdx-pumpkin .px-l-lit { opacity: 1; }
.base-stage.bn .bdx-pumpkin, .base-stage.bn[data-light] .bdx-pumpkin { filter: none; }
.base-stage.bn .bdx-pumpkin::before { display: none; }
.base-stage.bn .bdx-pumpkin .px-l-face { filter: none; }