:root {
  --lab-bg: #0a0703;
  --lab-accent: var(--pz-accent);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* kein Pull-to-refresh / kein Zoom-Hijack auf der Seite */
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(130% 130% at 50% 30%, #1a120a 0%, #0c0804 60%, #050301 100%);
  color: var(--pz-text);
  font-family: var(--pz-font);
  /* Seite selbst nicht scrollen -> Labyrinth füllt den Viewport */
  overflow: hidden;
}

.lab-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem;
  padding-top: max(0.6rem, env(safe-area-inset-top));
  padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
  min-height: 100dvh;
}

.lab-title {
  color: var(--lab-accent);
  letter-spacing: 3px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(0.95rem, 4vw, 1.15rem);
}

.lab-hint {
  color: var(--pz-text-muted);
  font-size: clamp(0.7rem, 3vw, 0.8rem);
  margin: 0;
  text-align: center;
}

.lab-hint a { color: var(--lab-accent); }

/* Sichtbarer Ausschnitt ("Kamera"). Füllt den verfügbaren Platz und schneidet
   die (größere) Bühne ab. Die Bühne wird per transform verschoben/gezoomt,
   damit die Spielerkugel immer im sichtbaren Bereich bleibt.
   touch-action:none -> Wischgesten scrollen die Seite nicht. */
.lab-view {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  border: 2px solid var(--pz-border);
  box-shadow: 0 0 40px #000 inset, 0 10px 30px rgba(0, 0, 0, 0.6);
  background: #0e0b08;
  touch-action: none;
}

/* Raster-Bühne: Größe wird per JS (cols*TILE x rows*TILE) gesetzt.
   transform-origin oben links -> einfache Kamera-/Zoom-Rechnung.
   Die konkrete Grafik kommt aus js/roomtypes.js. */
#lab-stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* Fog of War: Canvas in Weltgröße über Tiles/Objekten, unter den Prompts.
   Weich hochskaliert+geblurrt -> keine blockartigen Nebelkanten. */
#lab-fog {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  pointer-events: none;
}

@media (max-width: 520px) {
  .lab-wrap { gap: 0.4rem; padding: 0.4rem; }
}

/* Ein Block pro Rasterzelle – austauschbar durch GIF (siehe SVG-Pfade).
   Die konkrete Grafik kommt aus js/roomtypes.js (byValue[kind].img) und wird
   pro Kachel-Klasse unten zugewiesen. */
.tile {
  position: absolute;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Basis-Korridor + Basis-Wand */
.tile.floor { background-image: url("../svg/floor.svg"); }
.tile.wall  { background-image: url("../svg/wall.svg"); }

/* Raumtyp 1: schlichter Raum (room.svg) */
.tile.room-plain { background-image: url("../svg/room.svg"); }

/* Raumtyp 2: befestigter Raum (fortified_*.svg) */
.tile.room-fortified { background-image: url("../svg/fortified_floor.svg"); }
.tile.wall-fortified { background-image: url("../svg/fortified_wall.svg"); }

/* Raumtyp 3+4: Holz (Wohnraum/Laden) und Erde (Rattenloch) */
.tile.room-wood { background-image: url("../svg/wood_floor.svg"); }
.tile.wall-wood { background-image: url("../svg/wood_wall.svg"); }
.tile.room-dirt { background-image: url("../svg/dirt_floor.svg"); }
.tile.wall-dirt { background-image: url("../svg/dirt_wall.svg"); }
/* Raumtyp 5+6: Krypta (Stein) und Höhle (Fels) */
.tile.room-crypt { background-image: url("../svg/crypt_floor.svg"); }
.tile.wall-crypt { background-image: url("../svg/crypt_wall.svg"); }
.tile.room-cavern { background-image: url("../svg/cavern_floor.svg"); }
.tile.wall-cavern { background-image: url("../svg/cavern_wall.svg"); }

/* Türen (geschlossen = Wand, offen = begehbar) + Bodenschalter */
.tile.door { z-index: 3; }
.tile.door-closed  { background-image: url("../svg/fortified_door_closed.svg"); }
.tile.door-open    { background-image: url("../svg/fortified_door_open.svg"); }
.tile.switch {
  z-index: 2;
  background-image: url("../svg/switch.svg");
  background-size: 100% 100%;
  filter: drop-shadow(0 0 4px rgba(255, 210, 74, 0.35));
}
.tile.switch.active { filter: drop-shadow(0 0 10px rgba(255, 210, 74, 0.9)); }
/* Bodenschalter sind zunächst unsichtbar (zeigen nur den Untergrund). */
.tile.switch.switch-hidden { filter: none; animation: none; }
.tile.switch.active .sw-glow,
.tile.switch.active { animation: switchpulse 0.8s ease-in-out infinite; }
@keyframes switchpulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 210, 74, 0.5)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 210, 74, 1)); }
}

/* Chance-basierte Heimat-Features (Blutspur, Fallen, Geheimtür).
   Nur über Theme-Tokens färben (keine hartkodierten Farben). */
.feature-trail {
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(circle at 50% 58%, var(--pz-danger-strong) 0%, transparent 62%);
  opacity: .55;
  animation: feature-pulse 2.4s ease-in-out infinite;
}
.feature-trail.done { opacity: .2; animation: none; }
.feature-trap {
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--pz-danger) 0%, transparent 60%);
  box-shadow: inset 0 0 0 1px var(--pz-danger);
  opacity: .75;
}
@keyframes feature-pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: .8; }
}

/* Start- und Zielfeld (über den Tiles liegend) */
.tile.start, .tile.goal {
  z-index: 2;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);
}
/* Start = Treppe hoch (zurück), Ziel = Treppe runter (tiefer). Die alten
   start.svg/goal.svg bleiben im svg/-Ordner erhalten. */
.tile.start { background-image: url("../svg/stairs_up.svg"); }
.tile.goal  { background-image: url("../svg/stairs_down.svg"); animation: goalpulse 1.6s ease-in-out infinite; }
@keyframes goalpulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(120,255,160,0.25); }
  50%      { box-shadow: inset 0 0 0 3px rgba(120,255,160,0.7); }
}

/* Steuerbare Spieler-Figur (64x64-Basis-Rig; Anker siehe player_base_rig_64x64.svg).
   Die frontale Grafik wird je Blickrichtung horizontal gespiegelt
   (--pz-face-x = 1 rechts / -1 links), damit sich Ausrüstung nicht mitdreht. */
.obj.player {
  z-index: 5;
  background-image: none;
  border-radius: 0;
  box-shadow: none;
}
.obj.player::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../svg/player_rig.svg") center / contain no-repeat;
  transform: scaleX(var(--pz-face-x, 1));
  transform-origin: 50% 50%;
}

/* Angelegte Ausrüstung am Spieler (Waffe/Schild). Ebenen:
   .equip-ov (Position/Basisrotation) > .equip-ov-idle (Sway) > .equip-ov-swing (WAAPI). */
.equip-ov {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform;
}
.equip-ov-idle,
.equip-ov-swing {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.equip-ov-idle { animation: equipidle 2.6s ease-in-out infinite; }
.equip-ov-idle.moving { animation-duration: 0.72s; }
@keyframes equipidle {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

/* Ebenen-HUD oben */
.hud {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.hud .lvl {
  color: var(--lab-accent);
  font-weight: 700;
  letter-spacing: 1px;
}
.hud .tag {
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--pz-border);
  color: var(--pz-text-dim);
}
.hud .tag.world { color: var(--pz-accent-soft); border-color: var(--pz-border-strong); }
.hud .tag.dungeon { color: #9ad0ff; border-color: #2a4d6b; }
.hud a { color: var(--lab-accent); text-decoration: none; }
.hud a:hover { text-decoration: underline; }

/* Bewegliche Objekte (Basis) – Hintergrund je Klasse (.player/.obj) */
.obj {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  border-radius: 50%;
  background-image: url("../svg/orb.svg");
  background-size: contain;
  background-repeat: no-repeat;
  will-change: transform;
  box-shadow: 0 0 12px rgba(255, 140, 40, 0.5);
}

/* ---- Themes: Außenwelt vs. Dungeon ----------------------------------- */
/* Außenwelt: warm, erdig, sandig-grün -> hebt sich vom Dungeon ab */
body.mode-world {
  background: radial-gradient(130% 130% at 50% 30%, #2a230f 0%, #161008 60%, #090601 100%);
}
body.mode-world .lab-view {
  border-color: #6b5126;
  box-shadow: 0 0 50px #1a1306 inset, 0 10px 30px rgba(0,0,0,0.6);
}
body.mode-world .tile.goal {
  filter: drop-shadow(0 0 6px rgba(180, 255, 180, 0.5));
}
body.mode-world .lab-title { color: #ffb454; }
body.mode-world .hud .tag.world { color: var(--pz-accent-soft); border-color: var(--pz-border-strong); }

/* Dungeon: kaltes Blau/Violett -> deutlich „eigener Bereich" */
body.mode-dungeon {
  background: radial-gradient(130% 130% at 50% 30%, #0c1726 0%, #06080f 60%, #020306 100%);
}
body.mode-dungeon .lab-view {
  border-color: #2a4d6b;
  box-shadow: 0 0 50px #040a14 inset, 0 10px 30px rgba(0,0,0,0.6);
}
body.mode-dungeon .tile.goal { filter: drop-shadow(0 0 8px rgba(120,200,255,0.6)); }
body.mode-dungeon .lab-title { color: #6fb6ff; }
body.mode-dungeon .hud .tag.dungeon { color: #9ad0ff; border-color: #2a4d6b; }

/* Tor-Link (Außenwelt -> Dungeon) deutlich hervorheben */
.hud a.gate {
  color: #9ad0ff;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(120,200,255,0.6);
}
/* Spieler-Balken (HP / Ausdauer / Aura) oben im Viewport */
.player-hp {
  position: relative;
  width: min(320px, 80vw);
  height: 42px;
  border: 1px solid var(--pz-border);
  border-radius: 8px;
  background: #1a120a;
  overflow: hidden;
}
.player-hp .fill {
  position: absolute;
  left: 0;
  height: 33.334%;
  width: 100%;
}
.player-hp .fill.hp {
  top: 0;
  background: linear-gradient(90deg, #3bd17a, var(--pz-ok));
  transition: width 0.15s linear;
}
.player-hp .fill.stamina {
  top: 33.333%;
  background: linear-gradient(90deg, #8a7420, #c9a227);
  transition: width 0.15s linear;
}
.player-hp .fill.aura {
  top: 66.666%;
  background: linear-gradient(90deg, #2b6fb0, #5a9fd6);
  transition: width 0.15s linear;
}
.player-hp .txt,
.player-hp .stamina-txt,
.player-hp .aura-txt {
  position: absolute;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  pointer-events: none;
}
.player-hp .txt { top: 0; height: 33.334%; }
.player-hp .stamina-txt { top: 33.333%; height: 33.334%; }
.player-hp .aura-txt { top: 66.666%; height: 33.334%; }

/* Miniatur-HP-Bar über den NPC-Kugeln (nur sichtbar, wenn HP < max) */
.hpbar {
  position: absolute;
  top: -6px;
  left: 10%;
  width: 80%;
  height: 4px;
  border-radius: 2px;
  background: #3bd17a;
  display: none;
}

/* Getötet/zerstört: erst durchgestrichen, nach 30s transparent, nach 60s weg */
.dead { pointer-events: none; animation: none !important; }
.killmark {
  position: absolute;
  left: -12%; right: -12%; top: 50%;
  height: 2px; margin-top: -1px;
  background: #e04545;
  box-shadow: 0 0 5px rgba(224, 69, 69, 0.85);
  transform: rotate(-28deg);
  pointer-events: none;
  z-index: 5;
}
.fading { opacity: 0; transition: opacity 30s linear; }

/* Kampfmodus-Button im HUD (Taste C) */
.combat-toggle {
  margin-left: 0.6rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #d0a06f;
  background: #211410;
  border: 1px solid #4a342c;
  border-radius: 6px;
  cursor: pointer;
}
.combat-toggle.on {
  color: #fff;
  background: #a33;
  border-color: #e66;
  box-shadow: 0 0 8px rgba(224, 69, 69, 0.6);
}

/* Angriffs-Blitz: kurzer 120°-Kegel in Schlagrichtung (Kind von .player).
   Rotation setzt JS inline (player.aim); hier nur Aussehen/Weichzeichnung. */
.attack-sweep {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  background: conic-gradient(from 30deg,
    rgba(255, 224, 150, 0.55) 0deg 120deg,
    transparent 120deg 360deg);
  -webkit-mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.95) 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.95) 55%, transparent 100%);
}

/* Impact-Rüttler am getroffenen Objekt (Kind des Ziels). Größe animiert JS. */
.impact {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  height: 90%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 7;
  background: radial-gradient(closest-side,
    rgba(255, 255, 255, 0) 52%,
    rgba(255, 200, 110, 0.55) 80%,
    rgba(255, 140, 60, 0) 100%);
  box-shadow: 0 0 10px rgba(255, 170, 80, 0.55);
}

/* Möbel/Deco (Raum-Archetypen): reine Ausstattung, nicht blockierend. */
.overlay.prop {
  position: absolute;
  z-index: 3;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}
.overlay.prop-bed     { background-image: url("../svg/prop_bed.svg"); }
.overlay.prop-table   { background-image: url("../svg/prop_table.svg"); }
.overlay.prop-bench   { background-image: url("../svg/prop_bench.svg"); }
.overlay.prop-shelf   { background-image: url("../svg/prop_shelf.svg"); }
.overlay.prop-candle  { background-image: url("../svg/prop_candle.svg"); filter: drop-shadow(0 0 5px rgba(255, 200, 90, 0.6)); }
.overlay.prop-crate   { background-image: url("../svg/prop_crate.svg"); }
.overlay.prop-counter { background-image: url("../svg/prop_counter.svg"); }
.overlay.prop-nest    { background-image: url("../svg/prop_nest.svg"); }
.overlay.prop-rubble  { background-image: url("../svg/prop_rubble.svg"); }
.overlay.prop-grave   { background-image: url("../svg/prop_grave.svg"); }
.overlay.prop-bars    { background-image: url("../svg/prop_bars.svg"); }
.overlay.prop-web     { background-image: url("../svg/prop_web.svg"); background-position: left top; }
.overlay.prop-rock    { background-image: url("../svg/prop_rock.svg"); }

/* Hinweis-Ziele/Miniquests: Marker im Spielfeld + Codex-Eintrag */
.quest-marker {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  border: 2px dashed rgba(255, 210, 90, 0.9);
  border-radius: 8px;
  background: radial-gradient(circle at 50% 60%, rgba(255, 210, 90, 0.35), rgba(255, 210, 90, 0) 70%);
  animation: questpulse 1.6s ease-in-out infinite;
}
@keyframes questpulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.codex-entry.quest-entry.done { opacity: 0.6; }
.codex-icon.quest-icon {
  background: radial-gradient(circle, #ffd25a 0 34%, #b98a2e 35% 58%, transparent 59%);
  border-radius: 50%;
}
.codex-section {
  margin: 0.7rem 0 0.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pz-text-muted);
}
.codex-icon.world-icon {
  background: radial-gradient(circle, #7aa7ff 0 34%, #3f5c99 35% 58%, transparent 59%);
  border-radius: 50%;
}

/* Belauschen: In-World-Knopf + kleines Gesprächs-Overlay */
#ambient-prompt {
  position: absolute;
  z-index: 8;
  display: none;
  width: 132px;
  padding: 0.28rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: #0d1524;
  background: rgba(140, 190, 255, 0.86);
  border: 1px solid rgba(200, 225, 255, 0.92);
  border-radius: 7px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.ambient {
  position: absolute;
  inset: 0;
  z-index: 41;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
}
.ambient-box {
  width: min(520px, 92%);
  max-height: 78%;
  display: flex;
  flex-direction: column;
  background: var(--pz-surface);
  border: 1px solid var(--lab-accent);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}
.ambient-title {
  color: var(--lab-accent);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.ambient-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-right: 0.2rem;
}
.ambient-line { display: flex; gap: 0.4rem; align-items: baseline; }
.ambient-who { font-weight: 700; color: var(--pz-accent-soft); flex: 0 0 auto; }
.ambient .event-close { margin-top: 0.8rem; align-self: center; }

/* Gruppenchat: In-World-Knopf + Chatfenster (docs/GROUPCHAT_KONZEPT.md) */
#groupchat-prompt {
  position: absolute;
  z-index: 8;
  display: none;
  width: 148px;
  padding: 0.28rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: #0d1524;
  background: rgba(190, 160, 255, 0.9);
  border: 1px solid rgba(220, 205, 255, 0.95);
  border-radius: 7px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.groupchat {
  position: absolute;
  inset: 0;
  z-index: 42;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
}
.groupchat-box {
  width: min(560px, 92%);
  max-height: 80%;
  display: flex;
  flex-direction: column;
  background: var(--pz-surface);
  border: 1px solid var(--lab-accent);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}
.groupchat-title {
  color: var(--lab-accent);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.groupchat-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-right: 0.2rem;
  flex: 1 1 auto;
}
.groupchat-line { display: flex; gap: 0.4rem; align-items: baseline; }
.groupchat-who { font-weight: 700; color: var(--pz-accent-soft); flex: 0 0 auto; }
.groupchat-line.user .groupchat-who { color: #9fe8d0; }
.groupchat-form { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.groupchat-input { flex: 1 1 auto; }
.groupchat-actions { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.6rem; }
.groupchat-auto.on { outline: 2px solid var(--lab-accent); }
.groupchat-who.clickable { cursor: pointer; text-decoration: underline dotted; }
.groupchat-model {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
}
.groupchat-model-box {
  width: min(420px, 92%);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: var(--pz-surface);
  border: 1px solid var(--lab-accent);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}
.groupchat-model-title { font-weight: 700; color: var(--lab-accent); margin-bottom: 0.3rem; }
.gm-label { font-size: 0.75rem; opacity: 0.85; }
.groupchat-model-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }

/* HUD-Schalter: Rechtsklick abfangen / freigeben */
.rmb-toggle {
  margin-left: 0.6rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6fd08a;
  background: #11210f;
  border: 1px solid #2c4a2c;
  border-radius: 6px;
  cursor: pointer;
}
.rmb-toggle.off {
  color: var(--pz-text-dim);
  background: var(--pz-surface-2);
  border-color: #4a3724;
}
.tilt-toggle {
  margin-left: 0.6rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pz-text-dim);
  background: var(--pz-surface-2);
  border: 1px solid #4a3724;
  border-radius: 6px;
  cursor: pointer;
}
.tilt-toggle.active {
  color: #6fd08a;
  background: #11210f;
  border-color: #2c4a2c;
}

/* Zoom-Regler im HUD (v.a. mobil: näher heran / mehr Überblick) */
.zoom-ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.6rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pz-text-dim);
  background: var(--pz-surface-2);
  border: 1px solid #4a3724;
  border-radius: 6px;
}
.zoom-ctl input[type="range"] {
  width: 90px;
  accent-color: var(--lab-accent);
  cursor: pointer;
}

/* Ebenen-Art-Auswahl im HUD (Layout A/B/C …) */
.type-select {
  margin-left: 0.6rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pz-accent-soft);
  background: var(--pz-surface-2);
  border: 1px solid var(--pz-border-strong);
  border-radius: 6px;
  cursor: pointer;
}
.hud .tag.type { color: #c9a7ff; border-color: #4a3a6b; }

/* Virtuelles Touch-Steuerpad (Joystick) im sichtbaren Ausschnitt.
   Liegt über der Bühne, wird von Kamera/Zoom nicht beeinflusst. */
.joystick {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.07), rgba(0,0,0,0.30) 70%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  z-index: 20;
  display: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.joystick.show { display: block; }
.joystick .knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--pz-accent-text), var(--pz-accent-2) 75%);
  box-shadow: 0 0 16px rgba(255,150,40,0.65);
  will-change: transform;
  pointer-events: none;
}

/* ---- Rechte Spalte: Name (Anker) + Loadout-Karte ------------------------- */
/* top/max-height werden per JS an den Kopfbereich ausgerichtet. */
.lab-side {
  position: fixed;
  top: 72px;
  right: 8px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: min(268px, 80vw);
  max-height: calc(100dvh - 80px);
  pointer-events: none;
}
.lab-side > * { pointer-events: auto; }

/* Mit Textur unterlegte Overlay-Karte */
.loadout {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid #4a3724;
  border-radius: 12px;
  background: #140e07 url("../svg/panel_texture.svg") center / cover no-repeat;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Per Registerreiter eingeklappt (fährt nach rechts aus dem Bild). */
.loadout.collapsed {
  transform: translateX(calc(100% + 12px));
  opacity: 0;
  pointer-events: none;
}
/* Automatisch ausgeblendet, weil die Spielfigur darunter steht. */
.loadout.covered { opacity: 0.12; pointer-events: none; }

/* Registerreiter der rechten Karte: offen links an der Karte, eingeklappt am
   rechten Bildschirmrand (Höhe wird per JS in positionSide() gesetzt). */
.side-bar {
  position: fixed;
  z-index: 71;
  padding: 0.7rem 0.3rem;
  background: rgba(15, 11, 6, 0.85);
  border: 1px solid #4a3724;
  border-right: 0;
  border-radius: var(--pz-radius) 0 0 var(--pz-radius);
  color: var(--pz-accent-soft);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  writing-mode: vertical-rl;
  cursor: pointer;
  backdrop-filter: blur(2px);
  box-shadow: var(--pz-shadow);
}
.side-bar:hover { color: var(--lab-accent); }
.loadout-bars {
  display: flex;
  align-items: center;
  gap: 8px;
}
.loadout-bars .player-hp {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}
.loadout-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.loadout-heading {
  align-self: flex-start;
  margin-bottom: 2px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pz-text-dim);
}
.inv-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0.34rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pz-accent-soft);
  background: rgba(30, 20, 10, 0.72);
  border: 1px solid #4a3724;
  border-radius: 8px;
  cursor: pointer;
}
.inv-toggle:hover { border-color: var(--lab-accent); }
.inv-toggle .inv-arrow { color: var(--lab-accent); font-size: 0.8rem; }
.loadout-inv {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.loadout.inv-open .loadout-inv { display: flex; }

/* Körper/Ausrüstungsslots über einer Silhouette */
.equip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.equip-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 42px);
  justify-content: center;
  gap: 6px;
  padding: 6px;
}
.equip-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../svg/silhouette.svg") center / contain no-repeat;
  opacity: 0.16;
  pointer-events: none;
}
.equip-slot {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 2px;
  border: 1px dashed #4a3724;
  border-radius: 7px;
  background: rgba(15, 12, 8, 0.55);
}
.equip-slot .equip-label {
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--pz-text-dim);
  text-align: center;
  line-height: 1.05;
  pointer-events: none;
}
.equip-slot[data-slot="amulet"] { grid-area: 1 / 1; }
.equip-slot[data-slot="head"]   { grid-area: 1 / 2; }
.equip-slot[data-slot="cloak"]  { grid-area: 1 / 3; }
.equip-slot[data-slot="hand_l"] { grid-area: 2 / 1; }
.equip-slot[data-slot="body"]   { grid-area: 2 / 2; }
.equip-slot[data-slot="hand_r"] { grid-area: 2 / 3; }
.equip-slot[data-slot="bag"]    { grid-area: 3 / 1; }
.equip-slot[data-slot="belt"]   { grid-area: 3 / 2; }
.equip-slot[data-slot="ammo"]   { grid-area: 3 / 3; }
.equip-slot[data-slot="legs"]   { grid-area: 4 / 2; }
.equip-slot[data-slot="ring_l"] { grid-area: 5 / 1; }
.equip-slot[data-slot="feet"]   { grid-area: 5 / 2; }
.equip-slot[data-slot="ring_r"] { grid-area: 5 / 3; }
.loadout .portrait {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--pz-border);
  background: #12100c url("../svg/player_rig.svg") center/78% 78% no-repeat;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.loadout .portrait.active {
  border-color: #4aa3ff;
  box-shadow: 0 0 16px #4aa3ff, 0 0 8px #9fd0ff;
}
.loadout .inventory {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: rgba(10, 8, 5, 0.8);
  border: 1px solid var(--pz-border);
  border-radius: 9px;
  pointer-events: auto;
}
.ability-icon {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  background-color: #1a130a;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #4a3724;
  cursor: grab;
  touch-action: none;
}
.ability-icon.assigned { opacity: 0.45; }
.loadout .slots {
  display: grid;
  grid-template-columns: repeat(5, 40px);
  gap: 4px;
  pointer-events: auto;
}
.ability-slot {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px dashed #4a3724;
  border-radius: 7px;
  background-color: rgba(15, 12, 8, 0.8);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.ability-slot.filled { border-style: solid; border-color: var(--lab-accent); }
.ability-slot.locked { opacity: 0.4; border-style: dotted; }
.ability-slot.drop-target {
  border-color: var(--lab-accent);
  box-shadow: 0 0 10px rgba(255, 102, 0, 0.7);
}
.ability-slot .key {
  position: absolute;
  right: 3px;
  bottom: 1px;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--pz-text-muted);
}
.ability-ghost {
  position: fixed;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgba(255, 180, 80, 0.7));
}

/* Beutel: Item-Inventar mit 4 Plätzen (Pilze) */
.loadout .bag {
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: 4px;
  padding: 4px;
  background: rgba(10, 8, 5, 0.8);
  border: 1px solid var(--pz-border);
  border-radius: 9px;
  pointer-events: auto;
}
.bag-slot {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  border: 1px dashed #4a3724;
  background-color: #1a130a;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bag-slot.filled {
  border-style: solid;
  border-color: rgba(200, 120, 255, 0.8);
  cursor: pointer;
}

/* Aktiver Beutel: zusätzliche, optisch abgesetzte Plätze unter dem Inventar */
.bag-extra {
  margin-top: 6px;
  border-style: dashed;
  border-color: #4a6b3a;
  background: rgba(12, 18, 10, 0.85);
}
.bag-slot.extra {
  border-color: #4a6b3a;
  background-color: #10160c;
}
.bag-slot.is-bag {
  box-shadow: inset 0 0 0 1px rgba(224, 178, 94, 0.5);
}

/* Beutel-Slot in der Körper-Ansicht */
.equip-slot[data-slot="bag"] { cursor: pointer; }
.equip-slot.equip-bag.filled {
  border-style: solid;
  border-color: rgba(255, 200, 90, 0.8);
  background-size: 62% 62%;
  background-position: center 28%;
  background-repeat: no-repeat;
}

/* Belegbare Körper-Slots (Kopf, linke/rechte Hand): Drag & Drop */
.equip-slot.equip-open {
  cursor: pointer;
  border-style: solid;
  border-color: #574227;
}
.equip-slot.equip-open.filled {
  border-color: rgba(224, 178, 94, 0.9);
  background-size: 74% 74%;
  background-position: center 30%;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(224, 178, 94, 0.35);
}

/* Schlüsselbund: gehaltene Schlüssel */
.loadout .keyring {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(10, 8, 5, 0.8);
  border: 1px solid var(--pz-border);
  border-radius: 9px;
  pointer-events: auto;
}
.key-icon {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  border: 1px solid #4a3724;
  background-color: #1a130a;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: grab;
  touch-action: none;
}

/* Truhen-Panel (nicht modal): 5 Slots als Drag&Drop-Ziel */
.chest-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 34;
  display: none;
  padding: 0.7rem 0.9rem;
  background: var(--pz-surface);
  border: 1px solid var(--lab-accent);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  text-align: center;
}
.chest-title { color: var(--lab-accent); font-weight: 700; letter-spacing: 1px; margin-bottom: 0.5rem; }
.chest-slots { display: flex; gap: 6px; justify-content: center; }
.chest-slot {
  width: 42px;
  height: 42px;
  border-radius: 7px;
  border: 1px dashed #4a3724;
  background-color: #1a130a;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.chest-slot.filled { border-style: solid; border-color: rgba(255, 200, 90, 0.8); cursor: grab; }
.chest-panel .event-close { margin-top: 0.7rem; }

/* Fallengelassene Gegenstände auf dem Feld */
.overlay.ground-item {
  position: absolute;
  z-index: 3;
  background-size: 70% 70%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(255, 220, 140, 0.6));
}

/* "Aufsammeln"-Prompt über einem Boden-Gegenstand */
#ground-prompt {
  position: absolute;
  z-index: 8;
  display: none;
  padding: 3px;
  background: rgba(20, 16, 10, 0.85);
  border: 1px solid var(--lab-accent);
  border-radius: 7px;
}
#ground-prompt button {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.24rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 230, 150, 0.8);
  background: rgba(255, 200, 90, 0.9);
  color: #1a120a;
  cursor: pointer;
}

/* Kurzhilfe-Overlay (links oben im Sichtfeld): Steuerung + Hinweise.
   Klick auf das Panel klappt es zu einem seitlichen Balken zusammen. */
.help-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  max-width: min(360px, 52%);
  padding: 0.5rem 0.7rem;
  background: rgba(15, 11, 6, 0.78);
  border: 1px solid var(--pz-border-strong);
  border-radius: var(--pz-radius);
  color: var(--pz-text);
  font-size: 0.76rem;
  line-height: 1.35;
  cursor: pointer;
  backdrop-filter: blur(2px);
  box-shadow: var(--pz-shadow);
  transition: opacity 0.15s ease;
}
.help-overlay.collapsed { display: none; }
/* Automatisch ausgeblendet, weil die Spielfigur darunter steht. */
.help-overlay.covered { opacity: 0.12; pointer-events: none; }
.help-head {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.3rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--pz-accent-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.help-kbd {
  font-family: monospace;
  font-size: 0.7rem;
  color: var(--pz-accent-text);
  border: 1px solid var(--pz-border-strong);
  border-radius: 4px;
  padding: 0 0.25rem;
}
.help-list { margin: 0; padding-left: 1rem; }
.help-list li { margin: 0.12rem 0; }
.help-list li.help-rumor { color: var(--pz-accent-text); }
/* Eingeklappter Seitenbalken (links): Klick klappt die Kurzhilfe wieder aus. */
.help-bar {
  position: absolute;
  top: 8px;
  left: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 0.3rem;
  background: rgba(15, 11, 6, 0.85);
  border: 1px solid var(--pz-border-strong);
  border-left: 0;
  border-radius: 0 var(--pz-radius) var(--pz-radius) 0;
  color: var(--pz-accent-soft);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  writing-mode: vertical-rl;
  cursor: pointer;
  backdrop-filter: blur(2px);
  box-shadow: var(--pz-shadow);
}
.help-bar:hover { color: var(--pz-accent-text); }

/* Effekt-Badge (Countdown, z.B. Pilzrausch) – unten links im Sichtfeld */
.effect-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 30;
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #f0e0ff;
  background: rgba(60, 20, 90, 0.85);
  border: 1px solid rgba(200, 120, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(180, 90, 255, 0.6);
  pointer-events: none;
}

/* Pilzrausch: Spielfeld invertieren (nur die Bühne, nicht die UI) */
#lab-stage.invert { filter: invert(1); }

/* Sprechblase für kurze Hinweise (z.B. Schalter-Geräusch) */
.toast {
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%) translateY(10px);
  max-width: 84%;
  padding: 0.5rem 0.85rem;
  background: rgba(20, 16, 10, 0.94);
  border: 1px solid var(--lab-accent);
  border-radius: 12px;
  color: var(--pz-text);
  font-size: 0.82rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 35;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
.toast::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--lab-accent);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Buttons in der Ereigniskarte (z.B. "Essen") */
.event-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.1rem;
}
.event-actions button { margin-top: 0; }
.bag-eat {
  background: #b070ff;
  color: #14081f;
  border: 0;
  padding: 0.5rem 1.3rem;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

/* Beschreibungszeilen in Popups (Wirkung/Struktur) */
.info-desc { color: var(--pz-text); margin-bottom: 0.4rem; }
.info-line { font-size: 0.84rem; color: var(--pz-text-dim); margin-top: 0.15rem; }
.info-k { color: var(--pz-accent-soft); font-weight: 700; margin-right: 0.3rem; }
.info-hint { font-size: 0.8rem; color: var(--pz-text-dim); font-style: italic; margin-bottom: 0.3rem; }
.event-mini {
  background: #2a2016;
  color: var(--pz-text);
  border: 1px solid #5a4630;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}
.event-mini:hover { border-color: var(--lab-accent); }

/* Untersuchungsliste (Q halten) */
.inspect-panel {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 32;
  min-width: 150px;
  max-width: 220px;
  max-height: 60%;
  overflow: auto;
  padding: 6px;
  background: rgba(10, 8, 5, 0.9);
  border: 1px solid #4a3724;
  border-radius: 9px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}
.inspect-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--pz-accent-soft);
  margin-bottom: 4px;
  text-transform: uppercase;
}
.inspect-empty { font-size: 0.72rem; color: var(--pz-text-muted); }
.inspect-item {
  display: block;
  width: 100%;
  text-align: left;
  margin: 3px 0;
  padding: 0.3rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--pz-text);
  background: var(--pz-surface-3);
  border: 1px solid var(--pz-border);
  border-radius: 6px;
  cursor: pointer;
}
.inspect-item:hover { border-color: var(--lab-accent); }

/* Gelöschte Fackel: dunkler, keine Animation/Glühen */
.overlay.torch.off { opacity: 0.25; filter: none; animation: none; }
.overlay.torch.off::after { display: none; }

/* Wissen-Panel (Codex): anfangs leer, füllt sich mit untersuchtem Wissen */
.codex {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
}
.codex-box {
  width: min(560px, 92%);
  max-height: 82%;
  display: flex;
  flex-direction: column;
  background: var(--pz-surface);
  border: 1px solid var(--lab-accent);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}
.codex-title {
  color: var(--lab-accent);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.codex-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 0.2rem;
}
.codex-empty { color: var(--pz-text-muted); font-size: 0.85rem; padding: 0.6rem 0; }
.codex-entry {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: var(--pz-surface-3);
  border: 1px solid var(--pz-border);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
}
.codex-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.codex-body { flex: 1 1 auto; min-width: 0; }
.codex-name { font-weight: 700; color: var(--pz-accent-soft); margin-bottom: 0.2rem; }
.codex-cat {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--pz-text-dim);
  border: 1px solid var(--pz-border);
  border-radius: 999px;
  padding: 0 0.4rem;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.codex-box .event-close { margin-top: 0.8rem; align-self: center; }
@media (max-width: 520px) {
  .loadout .slots { grid-template-columns: repeat(5, 34px); }
  .ability-slot, .ability-icon, .bag-slot { width: 34px; height: 34px; }
  .loadout .bag { grid-template-columns: repeat(4, 34px); }
  .loadout .portrait { width: 46px; height: 46px; }
}

/* Fackel-Overlay: liegt über einzelnen Wandfeldern, transparent (nur Fackel +
   Lichtschein). Flackert durch leicht variierende Helligkeit/Position. */
.overlay.torch {
  position: absolute;
  z-index: 4;
  background-image: url("../svg/wall_torch.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  transform-origin: 50% 80%;
  animation: torchflicker 1.9s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(255, 170, 60, 0.45));
}
@keyframes torchflicker {
  0%   { opacity: 0.92; filter: drop-shadow(0 0 4px rgba(255,170,60,0.35)) brightness(1.00); transform: scaleY(1.00) rotate(0deg); }
  18%  { opacity: 1.00; filter: drop-shadow(0 0 9px rgba(255,190,80,0.70)) brightness(1.12); transform: scaleY(1.03) rotate(-0.6deg); }
  37%  { opacity: 0.86; filter: drop-shadow(0 0 5px rgba(255,160,50,0.40)) brightness(0.96); transform: scaleY(0.98) rotate(0.5deg); }
  55%  { opacity: 1.00; filter: drop-shadow(0 0 11px rgba(255,200,90,0.85)) brightness(1.16); transform: scaleY(1.04) rotate(0deg); }
  73%  { opacity: 0.90; filter: drop-shadow(0 0 6px rgba(255,170,60,0.50)) brightness(1.02); transform: scaleY(1.01) rotate(0.4deg); }
  88%  { opacity: 0.97; filter: drop-shadow(0 0 8px rgba(255,185,75,0.65)) brightness(1.08); transform: scaleY(1.02) rotate(-0.4deg); }
  100% { opacity: 0.92; filter: drop-shadow(0 0 4px rgba(255,170,60,0.35)) brightness(1.00); transform: scaleY(1.00) rotate(0deg); }
}
/* Truhe-Overlay: eine Truhe pro geschlossenem Raum, auf freiem Bodentile.
   Leichtes Glühen, damit sie auffällt (Loot-Hinweis). */
.overlay.chest {
  position: absolute;
  z-index: 3;
  background-image: url("../svg/chest_overlay.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  transform-origin: 50% 80%;
  animation: chestglow 2.7s ease-in-out infinite;
}
@keyframes chestglow {
  0%   { filter: drop-shadow(0 0 3px rgba(255, 200, 90, 0.30)) brightness(1.00); }
  50%  { filter: drop-shadow(0 0 8px rgba(255, 215, 110, 0.65)) brightness(1.10); }
  100% { filter: drop-shadow(0 0 3px rgba(255, 200, 90, 0.30)) brightness(1.00); }
}
.overlay.torch::after {
  content: "";
  position: absolute;
  inset: -40% -40% -10% -40%;
  background: radial-gradient(50% 50% at 50% 38%,
              rgba(255, 180, 70, 0.22) 0%,
              rgba(255, 150, 50, 0.08) 45%,
              rgba(255, 150, 50, 0) 70%);
  mix-blend-mode: screen;
  animation: torchglow 2.7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes torchglow {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  45%      { opacity: 0.95; transform: scale(1.06); }
  70%      { opacity: 0.70; transform: scale(1.0); }
}

/* Geöffnete Truhe: SVG wechseln (chest_open.svg) + Glühen stoppen */
.overlay.chest.opened {
  background-image: url("../svg/chest_open.svg");
  animation: none;
  filter: drop-shadow(0 0 6px rgba(255, 210, 90, 0.5));
}

/* Pilz-Overlay: sammel-/essbar, leichtes Wippen + Glühen */
.overlay.mushroom {
  position: absolute;
  z-index: 3;
  background-image: url("../svg/mushroom_overlay.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  transform-origin: 50% 80%;
  animation: mushroombob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(200, 120, 255, 0.5));
}
@keyframes mushroombob {
  0%, 100% { transform: scale(1.0) rotate(-2deg); }
  50%      { transform: scale(1.05) rotate(2deg); }
}

/* Hocker-Overlay: Mobiliar in befestigten Räumen; Hinsetzen lässt ausruhen. */.overlay.hocker {
  position: absolute;
  z-index: 3;
  background-image: url("../svg/hocker.svg");
  background-size: 84% 84%;
  background-repeat: no-repeat;
  background-position: center bottom;
  pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}

/* Busch-Overlay: dekoratives Gebüsch auf Rasen/Wildgras der Wiese. */
.overlay.bush {
  position: absolute;
  z-index: 3;
  background-image: url("../svg/busch.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  transform-origin: 50% 82%;
  animation: bushsway 3.6s ease-in-out infinite;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
}
@keyframes bushsway {
  0%, 100% { transform: rotate(-1deg) scale(1.0); }
  50%      { transform: rotate(1deg) scale(1.02); }
}

/* Baum-Overlay: steht neben jedem Pilz, leichte Schwankung. */
.overlay.tree {
  position: absolute;
  z-index: 3;
  background-image: url("../svg/baum.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  transform-origin: 50% 88%;
  animation: treesway 4.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.45));
}
@keyframes treesway {
  0%, 100% { transform: rotate(-0.7deg); }
  50%      { transform: rotate(0.7deg); }
}

/* Dialog-NPCs: stationär, ruhig atmend; geklickt wird die Sprechblase. */
.overlay.npc {
  position: absolute;
  z-index: 3;
  background-size: 90% 90%;
  background-repeat: no-repeat;
  background-position: center bottom;
  pointer-events: none;
  transform-origin: 50% 88%;
  animation: npcidle 3.2s ease-in-out infinite;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45));
}
@keyframes npcidle {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3%) scale(1.01); }
}
/* W9: Verblassens-/Winterschlaf-Optik + sichtbares Nachgeben. */
.overlay.npc.npc-decayed { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)) grayscale(0.55); opacity: 0.72; }
.overlay.npc.dormant     { opacity: 0.5; animation-duration: 6.5s; }
.overlay.npc.yielded     { filter: drop-shadow(0 0 10px rgba(120, 200, 120, 0.55)); }
.overlay.npc.npc-hermit   { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45)) hue-rotate(200deg); }
.overlay.npc.npc-hooded   {
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 8px rgba(90, 130, 180, 0.28));
  animation-duration: 4.6s;
}
/* Kreaturen: Ratte klein, Mutterratte groß + roter Schimmer. */
.overlay.npc.npc-rat { background-size: 72% 72%; animation-duration: 1.6s; }
.overlay.npc.npc-mother-rat {
  background-size: 98% 98%;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 9px rgba(200, 40, 40, 0.45));
  animation-duration: 3.8s;
}
.overlay.npc.npc-spider { background-size: 70% 70%; animation-duration: 1.4s; }
.overlay.npc.npc-wraith {
  background-size: 92% 92%;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 9px rgba(120, 150, 220, 0.4));
  animation-duration: 5s;
}

/* Sprechblasen: eigene Ebene über dem Nebel (z-index 8 > #lab-fog 6).
   Blase erscheint nur in Sprechreichweite (.visible). */
#npc-bubble-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  pointer-events: none;
}
.npc-bubble {
  position: absolute;
  transform: translateX(-50%);
  display: none;
  pointer-events: auto;
  padding: 2px 7px;
  border: 1px solid rgba(255, 230, 150, 0.9);
  border-radius: 10px;
  background: rgba(20, 16, 10, 0.92);
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
  filter: none;
}
.npc-bubble.visible {
  display: block;
  animation: npcbubble 1.6s ease-in-out infinite;
}
@keyframes npcbubble {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-12%); }
}

/* NPC-Profilpanel (nicht modal, über dem Spielfeld). */
.npc-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 35;
  display: none;
  width: min(340px, 88%);
  padding: 0.9rem 1rem;
  background: var(--pz-surface);
  border: 1px solid var(--lab-accent);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  text-align: center;
}
.npc-portrait {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 0.3rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 0 6px rgba(255, 200, 90, 0.4));
}
/* Generiertes Steckbrief-Foto (Pixel-/Porträtstil) statt SVG-Silhouette. */
.npc-portrait.pixel {
  width: 128px;
  height: 128px;
  border-radius: 8px;
  border: 1px solid var(--lab-accent);
  background-color: #120d08;
  image-rendering: pixelated;
}
/* Freigestelltes Alpha-PNG (Avatar): keine Kachel, Figur vollständig sichtbar. */
.npc-portrait.cutout {
  width: 128px;
  height: 160px;              /* hochkant: mehr Figur sichtbar */
  border: none;
  border-radius: 0;
  background-color: transparent;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}
/* Großes freigestelltes Avatar-Layer rechts neben dem Profilpanel (nur
   Alpha-PNG): Figur steht als große Silhouette neben dem Fenster; das kleine
   Porträt im Panel bleibt unverändert. Mobil ausgeblendet. */
.npc-portrait-large {
  position: absolute;
  left: calc(100% + 0.85rem);
  top: 50%;
  transform: translateY(-50%);
  display: none;
  width: clamp(180px, 24vw, 300px);
  height: 160%;              /* ~1,6x Panel-Höhe */
  min-height: 240px;
  max-height: 60vh;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
  pointer-events: none;
  z-index: 36;
}
.npc-portrait-large.show { display: block; }
@media (max-width: 640px) {
  .npc-portrait-large.show { display: none; }
}
/* Banderole/Stempel: Porträt wird im Batch noch erzeugt (Platzhalter sichtbar). */
.npc-portrait-pending {
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  transform: translateX(-50%) rotate(-3deg);
  white-space: nowrap;
  background: rgba(20, 12, 6, 0.9);
  color: var(--lab-accent);
  border: 1px solid var(--lab-accent);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}
.npc-name  { color: var(--lab-accent); font-weight: 700; font-size: 1.05rem; }
.npc-title { color: #b9a98a; font-size: 0.8rem; margin-bottom: 0.5rem; }
.npc-body  { text-align: left; }
.npc-desc  { color: var(--pz-text-dim); font-size: 0.85rem; margin-bottom: 0.4rem; }
.npc-greeting { font-style: italic; color: #e7d9bd; margin: 0.4rem 0; }
.npc-line  { font-size: 0.85rem; color: var(--pz-text); }
.npc-sec   { margin-top: 0.6rem; color: var(--lab-accent); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.5px; }
.npc-trait { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0; }
.npc-trait-k   { width: 80px; font-size: 0.78rem; color: var(--pz-text-dim); }
.npc-trait-bar { flex: 1; height: 8px; background: #241a10; border-radius: 5px; overflow: hidden; }
.npc-trait-fill { display: block; height: 100%; background: linear-gradient(90deg, #8a6b2f, #ffd15a); }
.npc-actions { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.7rem; flex-wrap: wrap; }
.npc-actions .npc-talk,
.npc-actions .npc-trade {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--lab-accent);
  border-radius: 8px;
  background: rgba(255, 200, 90, 0.12);
  color: var(--pz-accent-text);
  font-weight: 700;
  cursor: pointer;
}
.npc-actions .npc-talk:disabled,
.npc-actions .npc-trade:disabled { opacity: 0.5; }
.npc-mem { font-size: 0.8rem; color: #c9b89a; }

/* NPC-Chat (LLM-Dialog) */
.npc-chat-log {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 240px;
  overflow-y: auto;
  margin: 0.3rem 0;
  padding: 0.35rem;
  background: #120d07;
  border: 1px solid #2a2013;
  border-radius: 8px;
}
.npc-chat-line {
  max-width: 85%;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.3;
  white-space: pre-wrap;
  word-break: break-word;
}
.npc-chat-line.npc    { background: #241a10; color: #e7d9bd; align-self: flex-start; }
.npc-chat-line.user   { background: #2c3a24; color: #dff0d0; align-self: flex-end; }
.npc-chat-line.system { background: #3a1414; color: #fdd; align-self: center; font-size: 0.78rem; }
.npc-chat-line.pending { opacity: 0.6; font-style: italic; }
.npc-chat-cost-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0.2rem 0;
  color: #c9b89a;
  font-size: 0.72rem;
  line-height: 1.25;
  cursor: pointer;
}
.npc-chat-cost-toggle input { margin: 0.08rem 0 0; accent-color: var(--lab-accent); }
.npc-chat-cost { display: block; margin-top: 0.2rem; color: #c9b89a; font-size: 0.68rem; }
.npc-chat-cost-total { margin: 0.2rem 0; color: var(--pz-accent-soft); font-size: 0.72rem; text-align: right; }
.npc-chat-form { display: flex; gap: 0.5rem; margin-top: 0.3rem; }
.npc-chat-form input {
  flex: 1;
  padding: 0.5rem 0.6rem;
  background: #111;
  color: #e0e0e0;
  border: 1px solid #333;
  border-radius: 7px;
}
.npc-chat-form button { margin-top: 0; }
/* TTS (BYOK): Vorlesen + Stimme je NPC. */
.npc-chat-line .npc-speak {
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  font-size: 0.7rem;
  line-height: 1.4;
  background: transparent;
  color: var(--pz-accent-text);
  border: 1px solid var(--pz-border-strong);
  border-radius: 999px;
  cursor: pointer;
}
.npc-chat-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
}
.npc-chat-autoread {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #c9b89a;
  font-size: 0.72rem;
  cursor: pointer;
}
.npc-chat-autoread input { accent-color: var(--lab-accent); }
.npc-voice-open { font-size: 0.72rem; }
.npc-voice-panel {
  margin: 0.3rem 0;
  padding: 0.5rem 0.6rem;
  background: #120d07;
  border: 1px solid #2a2013;
  border-radius: 8px;
  font-size: 0.78rem;
}
.npc-voice-title { color: var(--pz-accent-text); margin-bottom: 0.3rem; }
.npc-voice-modes { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.4rem; }
.npc-voice-modes label { display: flex; align-items: center; gap: 0.25rem; color: #c9b89a; }
.npc-voice-voices .npc-voice-row { display: flex; gap: 0.4rem; margin-top: 0.25rem; }
.npc-voice-voices input[type="text"] { flex: 2 1 0; min-width: 0; }
.npc-voice-voices input[type="number"] { flex: 1 1 0; min-width: 0; }
.npc-voice-speed { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; color: #c9b89a; }
.npc-voice-speed input { width: 5rem; }
.npc-voice-panel .pz-msg { color: #f9a; min-height: 0; }
/* Prozeduraler Dialog: Themen-Knöpfe im Verlauf. */
.npc-chat-topic {
  align-self: flex-start;
  margin-top: 0.1rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.78rem;
  background: var(--pz-surface-2);
  color: var(--pz-accent-text);
  border: 1px solid var(--pz-border-strong);
  border-radius: 999px;
  cursor: pointer;
}
.npc-chat-topic:hover { border-color: var(--pz-accent); color: var(--pz-accent-soft); }
.npc-trade-open {
  align-self: flex-start;
  margin-top: 0.3rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--lab-accent);
  border-radius: 8px;
  background: rgba(255, 200, 90, 0.15);
  color: var(--pz-accent-text);
  font-weight: 700;
  cursor: pointer;
}

/* Münzen-Anzeige in der Inventar-Sektion */
.coin-purse { margin-top: 0.4rem; font-size: 0.8rem; color: var(--pz-accent-text); font-weight: 700; }

/* Charakter-Sektion in der Spielerkarte */
.char-badge {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--pz-border-strong);
  border-radius: 20px;
  background: rgba(255, 200, 90, 0.12);
  color: var(--pz-accent-text);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: help;
}
.char-link {
  display: block;
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--lab-accent);
  border-radius: 8px;
  background: rgba(255, 200, 90, 0.1);
  color: var(--pz-accent-text);
  font-weight: 700;
  cursor: pointer;
}
.char-hint { color: var(--pz-text-muted); font-size: 0.72rem; }

/* Handelsfenster */
.trade-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 36;
  display: none;
  width: min(560px, 94%);
  padding: 0.9rem 1rem;
  background: var(--pz-surface);
  border: 1px solid var(--lab-accent);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  text-align: center;
}
.trade-title { color: var(--lab-accent); font-weight: 700; }
.trade-portrait {
  width: 96px;
  height: 96px;
  margin: 0 auto 0.4rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
}
.trade-portrait:not([style*="url"]) { display: none; }
.trade-portrait.cutout {
  height: 120px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}
.trade-purse { color: var(--pz-text); font-size: 0.82rem; margin: 0.2rem 0 0.6rem; }
.trade-cols { display: flex; gap: 1rem; text-align: left; }
.trade-col { flex: 1; min-width: 0; }
.trade-col-h { color: var(--pz-accent-text); font-size: 0.8rem; font-weight: 700; margin-bottom: 0.35rem; }
.trade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 0.4rem;
  min-height: 60px;
  padding: 0.4rem;
  background: #120d07;
  border: 1px solid #2a2013;
  border-radius: 8px;
}
.trade-slot {
  position: relative;
  min-height: 76px;
  border: 1px solid var(--pz-border);
  border-radius: 8px;
  background-color: var(--pz-input-bg);
  background-size: 70% 70%;
  background-position: center 34%;
  background-repeat: no-repeat;
  cursor: pointer;
}
.trade-slot.filled { border-color: rgba(255, 200, 90, 0.7); }
.trade-slot.refused { opacity: 0.5; cursor: not-allowed; }
.trade-cap { position: absolute; left: 2px; right: 2px; bottom: 2px; font-size: 0.62rem;
             color: var(--pz-text-dim); text-align: center; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.trade-price { position: absolute; top: 2px; right: 4px; font-size: 0.62rem; font-weight: 700;
               color: #ffd15a; }
.trade-empty { color: var(--pz-text-muted); font-size: 0.75rem; grid-column: 1 / -1; }
.trade-hint { color: var(--pz-text-muted); font-size: 0.72rem; margin-top: 0.5rem; }
.trade-panel .event-close { margin-top: 0.7rem; }

/* Hinweise in NPC-/Truhen-Panel */
.npc-hint {
  margin-top: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px dashed #5a4326;
  border-radius: 8px;
  color: #d8b98a;
  font-size: 0.78rem;
  line-height: 1.35;
}
.chest-hint { color: var(--pz-text-muted); font-size: 0.72rem; margin-top: 0.45rem; }

/* "Kiste öffnen?"-Knopf: klein, durchscheinend, schwebt über der Kiste */
#chest-prompt, #examine-prompt {
  position: absolute;
  z-index: 8;
  display: none;
  width: 90px;
  padding: 0.28rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: #1a120a;
  background: rgba(255, 200, 90, 0.82);
  border: 1px solid rgba(255, 230, 150, 0.9);
  border-radius: 7px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* "Ebene hoch/runter?"-Knopf: erscheint auf Start-/Zielfeld, verschwindet
   automatisch, sobald man das Feld verlässt. */
#level-prompt {
  position: absolute;
  z-index: 8;
  display: none;
  width: 112px;
  padding: 0.28rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: #1a120a;
  background: rgba(255, 200, 90, 0.85);
  border: 1px solid rgba(255, 230, 150, 0.95);
  border-radius: 7px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
#level-prompt.down {
  background: rgba(120, 200, 255, 0.85);
  border-color: rgba(180, 225, 255, 0.95);
}

/* Pilz-Prompt: "Essen" / "Aufsammeln" über dem Pilz */
#mushroom-prompt {
  position: absolute;
  z-index: 8;
  display: none;
  gap: 4px;
  padding: 4px;
  background: rgba(20, 12, 26, 0.85);
  border: 1px solid rgba(200, 120, 255, 0.8);
  border-radius: 8px;
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
#mushroom-prompt button {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.24rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(220, 180, 255, 0.6);
  cursor: pointer;
}
#mushroom-prompt .mp-eat { background: #b070ff; color: #14081f; }
#mushroom-prompt .mp-take { background: #2a1d3a; color: #dcc4ff; }

/* Hocker-Prompt: "Untersuchen" / "Hinsetzen" bzw. "Aufstehen" */
#hocker-prompt {
  position: absolute;
  z-index: 8;
  display: none;
  gap: 4px;
  padding: 4px;
  background: rgba(26, 20, 12, 0.85);
  border: 1px solid rgba(214, 176, 116, 0.8);
  border-radius: 8px;
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
#hocker-prompt button {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.24rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(228, 200, 152, 0.6);
  cursor: pointer;
}
#hocker-prompt .hk-inspect { background: #3a2f1d; color: #e8d3ac; }
#hocker-prompt .hk-sit { background: #d6b074; color: #241a0c; }

/* Spieler-Sprechblase (z.B. "Du setzt dich hin und ruhst dich aus.") */
.player-bubble {
  position: absolute;
  z-index: 7;
  transform: translate(-50%, -100%);
  max-width: 190px;
  padding: 0.3rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.25;
  text-align: center;
  color: #f3e6cf;
  background: rgba(28, 22, 14, 0.92);
  border: 1px solid rgba(214, 176, 116, 0.8);
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  animation: playerbubble 3.6s ease-in-out forwards;
}
@keyframes playerbubble {
  0%   { opacity: 0; transform: translate(-50%, -90%); }
  12%  { opacity: 1; transform: translate(-50%, -100%); }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Narr: kursiver Selbst-Kommentar über dem Kopf (*kichert*, *lacht*). */
.npc-mutter {
  position: absolute;
  z-index: 7;
  transform: translate(-50%, -100%);
  max-width: 200px;
  padding: 0.25rem 0.5rem;
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.25;
  text-align: center;
  color: #f3e6cf;
  background: rgba(28, 22, 14, 0.9);
  border: 1px solid rgba(214, 176, 116, 0.7);
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  animation: playerbubble 2.6s ease-in-out forwards;
}

/* Regal-/Kisten-Prompt: "Bücher ansehen?" */
#container-prompt {
  position: absolute;
  z-index: 8;
  display: none;
  width: 110px;
  padding: 0.28rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: #10160c;
  background: var(--pz-ok);
  border: 1px solid var(--pz-ok);
  border-radius: 7px;
  cursor: pointer;
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Bücher-Panel: Liste + Leseansicht */
.book-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 35;
  display: none;
  width: min(560px, 92vw);
  max-height: 78vh;
  overflow: auto;
  padding: 0.9rem 1.1rem;
  background: var(--pz-surface);
  border: 1px solid var(--lab-accent);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
  text-align: center;
}
.book-title { color: var(--lab-accent); font-weight: 700; letter-spacing: 1px; margin-bottom: 0.6rem; }
.book-list { display: flex; flex-direction: column; gap: 0.4rem; text-align: left; }
.book-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  background: var(--pz-surface-3);
  border: 1px solid var(--pz-border);
  border-radius: 8px;
  color: var(--pz-text);
  cursor: pointer;
  text-align: left;
}
.book-row.read { border-color: var(--pz-border-strong); }
.book-row-title { font-weight: 700; font-size: 0.86rem; }
.book-row-meta { color: var(--pz-text-muted); font-size: 0.72rem; }
.book-row-state { color: var(--pz-danger); }
.book-empty { color: var(--pz-text-muted); font-size: 0.8rem; padding: 0.6rem; }
.book-body { text-align: left; }
.book-body-title { color: var(--lab-accent); font-weight: 700; font-size: 1rem; margin-bottom: 0.2rem; }
.book-body-meta { color: var(--pz-text-muted); font-size: 0.72rem; margin-bottom: 0.6rem; }
.book-body-text { white-space: pre-wrap; line-height: 1.5; font-size: 0.88rem; }
.book-body-actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.book-body-actions button {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.32rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--pz-border-strong);
}
.book-back { background: var(--pz-surface-2); color: var(--pz-accent-text); }
.book-mark { background: var(--pz-accent); color: #241a0c; border-color: var(--pz-accent); }
.book-destroy { background: var(--pz-surface-2); color: var(--pz-danger); border-color: var(--pz-danger); }

/* Boden-Artefakte/Quest-Objekte: sichtbarer Marker (Glow) */
.overlay.ground-item.artifact {
  filter: drop-shadow(0 0 6px var(--pz-accent-soft)) drop-shadow(0 0 2px var(--pz-accent));
}
.gp-scatter { background: #2a2013; color: #d8b98a; border-color: #5a4326; }
.book-hint { color: var(--pz-text-muted); font-size: 0.72rem; margin-top: 0.6rem; }
.book-panel .event-close { margin-top: 0.7rem; }

/* Ereigniskarte (Vollbild-Overlay) – zeigt Kisten-Inventar o.ä. */
.event-card {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, 0.62);
  z-index: 60;
}
.event-box {
  background: var(--pz-surface);
  border: 1px solid var(--lab-accent);
  border-radius: 12px;
  padding: 1.4rem 1.8rem;
  text-align: center;
  max-width: 86vw;
  color: var(--pz-text);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
}
.event-title {
  color: var(--lab-accent);
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}
.event-body { font-size: 0.9rem; line-height: 1.4; }
.event-close {
  margin-top: 1.1rem;
  background: var(--lab-accent);
  color: #1a120a;
  border: 0;
  padding: 0.5rem 1.3rem;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
}

/* ---- Lobby (M2): Realtime-Overlay über der Bühne ------------------------- */
.lobby-panel {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem;
  background: rgba(8, 6, 3, 0.92);
  color: var(--pz-text);
}
.lobby-bar { display: flex; align-items: center; gap: 0.6rem; }
.lobby-title { font-weight: 700; color: var(--pz-accent-soft); }
.lobby-count { flex: 1 1 auto; color: var(--pz-text-muted); font-size: 0.85rem; }
.lobby-close {
  background: transparent;
  color: var(--pz-text);
  border: 1px solid var(--pz-border);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}
.lobby-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lobby-svg { width: 100%; height: 100%; }
.lobby-wall-path { fill: var(--pz-border-strong, #4a3a28); }
.lobby-player { fill: var(--pz-accent); }
.lobby-player.self { fill: #6fe08a; }
.lobby-mob { fill: #8a4a3a; }
.lobby-bubble-bg { fill: rgba(0, 0, 0, 0.72); }
.lobby-bubble-txt { fill: var(--pz-text); font-size: 0.9px; }
.lobby-status { min-height: 1em; color: var(--pz-text-muted); font-size: 0.85rem; }
.lobby-pad { position: relative; width: 120px; height: 120px; margin: 0 auto; }
.lobby-dir {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--pz-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--pz-text);
  cursor: pointer;
}
.lobby-dir-up { left: 41px; top: 0; }
.lobby-dir-down { left: 41px; top: 82px; }
.lobby-dir-left { left: 0; top: 41px; }
.lobby-dir-right { left: 82px; top: 41px; }
.lobby-emotes { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; }
.lobby-emote {
  border: 1px solid var(--pz-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--pz-text);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-size: 0.82rem;
}

/* Safezone (WORLD_PERMISSIONS �2): Schutzzone des Wirts, nur sichtbar. */
#pz-safezone-overlay.pz-safezone {
  position: absolute;
  pointer-events: none;
  border: 2px dashed rgba(255, 215, 90, 0.9);
  background: rgba(255, 215, 90, 0.08);
  box-sizing: border-box;
  z-index: 5;
}

/* ---- Spezial-NPC „Lâsûr" (SIGIL_KONZEPT.md) ------------------------------- */
.sigil {
  position: absolute;
  z-index: 7;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: pointer;
  filter: drop-shadow(0 0 8px rgba(242, 165, 122, 0.75));
  animation: sigilFloat 3.2s ease-in-out infinite;
}
.sigil:focus-visible { outline: 2px solid var(--pz-accent, #d97757); border-radius: 50%; }
.sigil.emerging { opacity: 0; animation: sigilEmerge 1.5s ease-out forwards; }
@keyframes sigilFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes sigilEmerge {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

.lasur-title { margin: 0 0 0.2rem; }
.lasur-mode {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  opacity: 0.8;
  color: var(--pz-accent-soft, #f2a57a);
}
.lasur-line { margin: 0 0 0.8rem; font-style: italic; }
.lasur-opts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }
.lasur-hint { font-size: 0.82rem; opacity: 0.85; margin: 0 0 0.4rem; }
.lasur-books { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.7rem; }
.lasur-log {
  max-height: 34vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}
.lasur-form { display: flex; gap: 0.4rem; }
.lasur-input { flex: 1 1 auto; }
.lasur-kw {
  color: var(--pz-accent-soft, #f2a57a);
  cursor: pointer;
  text-decoration: underline dotted;
}
.lasur-kw:hover { color: var(--pz-accent, #d97757); }