/* Spielseite: das Haus füllt den ganzen Bildschirm */

body.spiel #ansicht-haus { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.schild[hidden] { display: none; }

body.spiel {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

.spielleiste {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  flex-wrap: wrap;
  background: var(--karte);
  box-shadow: 0 3px 0 var(--schatten);
  z-index: 20;
}
.marke {
  font-weight: 800;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--akzent-dunkel);
}
.marke { border: none; background: none; cursor: pointer; font-family: inherit; }

/* ---------- Spieler-Leiste ---------- */

.spieler-leiste { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.spieler-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 2px;
  border: 2px solid var(--farbe);
  border-radius: 999px;
  background: var(--karte);
}
.spieler-chip .punkt {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--farbe);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
}
.spieler-chip select {
  font: inherit;
  font-weight: 700;
  max-width: 130px;
  border: none;
  background: transparent;
  color: var(--text);
}
.chip-weg { border: none; background: none; color: var(--leise); padding: 0 4px; }
.spieler-leiste .knopf { font-size: 0.9rem; padding: 4px 12px; }
.raum {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--hintergrund);
  font-weight: 700;
  color: var(--leise);
}
.leisten-knoepfe { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.leisten-knoepfe .knopf { font-size: 0.95rem; padding: 5px 12px; text-decoration: none; }

.welt-rahmen {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #7cc8ff;
  cursor: pointer;
}
.welt {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.hintergrund { position: absolute; left: 0; top: 0; display: block; }

/* ---------- Einrichten ---------- */

.leisten-knoepfe .knopf.aktiv { background: var(--akzent); color: var(--auf-akzent); }
body.einrichten .unten-leiste,
body.einrichten .hinweis,
body.einrichten .touch { display: none; }
body.einrichten .welt-rahmen { touch-action: none; cursor: default; }
body.einrichten .moebel:not(.fest) { cursor: grab; }
body.einrichten .moebel:not(.fest):hover svg { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px #8ecbff); }
body.einrichten .moebel.ausgewaehlt svg { filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #3a86ff) drop-shadow(0 0 4px #3a86ff); }
body.einrichten .raum-flaeche { cursor: pointer; }
body.einrichten .moebel.hinten.nah svg { filter: none; }

.einrichten-panel {
  flex: none;
  max-height: 44vh;
  overflow-y: auto;
  padding: 12px 16px 16px;
  background: var(--karte);
  box-shadow: 0 -3px 0 var(--schatten);
  z-index: 20;
}
.einrichten-panel[hidden] { display: none; }
.einrichten-kopf { display: flex; align-items: center; gap: 8px; }
.einrichten-kopf h2 { margin: 0 auto 0 0; font-size: 1.2rem; }
.einrichten-kopf .knopf { font-size: 0.95rem; padding: 5px 14px; }
.einrichten-inhalt { padding: 8px 0; border-bottom: 2px dashed var(--linie); }
.einrichten-inhalt h3 { margin: 0 0 8px; font-size: 1.05rem; }
.einrichten-inhalt .farben, .einrichten-inhalt .chips { margin-bottom: 10px; }
.einrichten-hilfe, .einrichten-info { margin: 4px 0; color: var(--leise); }
.einrichten-info { color: #7d6b9e; font-weight: 700; }
.einrichten-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.einrichten-knoepfe .knopf { font-size: 0.95rem; padding: 5px 14px; }
.einrichten-katalog-titel { margin: 10px 0 6px; font-weight: 800; }
.einrichten-katalog { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.katalog-teil {
  flex: none;
  width: 88px;
  padding: 6px 4px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--hintergrund);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.8rem;
  font-weight: 700;
}
.katalog-teil:hover { border-color: var(--akzent); }
.katalog-bild { width: 70px; height: 62px; }
.katalog-bild svg { width: 100%; height: 100%; }

/* Fische im Aquarium */
.fisch { animation: schwimmen 4s ease-in-out infinite alternate; }
.fisch.zwei { animation-duration: 3s; animation-direction: alternate-reverse; }
@keyframes schwimmen { from { transform: translateX(-6px); } to { transform: translateX(26px); } }

/* ---------- Stadt ---------- */

.ort-extra { position: absolute; left: 0; top: 0; pointer-events: none; }
.auto { position: absolute; left: 0; top: 0; z-index: 7; animation: fahren-rechts var(--dauer) linear infinite; animation-delay: var(--verz); }
.auto.links { animation-name: fahren-links; }
.auto.links svg { transform: scaleX(-1); }
@keyframes fahren-rechts { from { transform: translate(-200px, 790px); } to { transform: translate(3700px, 790px); } }
@keyframes fahren-links { from { transform: translate(3700px, 794px); } to { transform: translate(-200px, 794px); } }
.brunnen-wasser { animation: spritzen 0.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes spritzen { from { transform: scaleY(0.9); opacity: 0.8; } to { transform: scaleY(1.08); opacity: 1; } }
.blaulicht { animation: blinken 0.5s steps(2) infinite; }
@keyframes blinken { 50% { fill: #e63946; } }

/* Schaukeln: Figur und Sitz pendeln zusammen um die Stange */
.spieler.schaukeln .aktion-huelle { transform-origin: 50% 28px; animation: schaukeln 2.2s ease-in-out infinite; }
.moebel.vorne.schaukelt { transform-origin: 50% 8px; animation: schaukeln 2.2s ease-in-out infinite; }
@keyframes schaukeln { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }

/* ---------- Überraschungen ---------- */

.flug { position: absolute; z-index: 8; font-size: 34px; pointer-events: none; transform: translate(-50%, -50%); }
.flug.gross { font-size: 64px; }
.konfetti { position: absolute; z-index: 8; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; }
.spieler .aktion-huelle.salto { animation: salto 0.9s ease-in-out; }
.aktion-huelle.hupf { animation: hupf 0.5s ease-out; }
@keyframes salto {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-70px) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}
@keyframes hupf { 40% { transform: translateY(-24px) scaleY(1.05); } }
.moebel.wackeln svg { transform-origin: 50% 100%; animation: wackeln 0.25s ease-in-out 8 alternate; }
@keyframes wackeln { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.welt-rahmen.disko .welt { animation: disko 0.8s linear infinite; }
@keyframes disko {
  from { filter: hue-rotate(0deg) saturate(1.5) brightness(1.05); }
  to { filter: hue-rotate(360deg) saturate(1.5) brightness(1.05); }
}

/* ---------- Online ---------- */

.online-status { display: flex; align-items: center; gap: 6px; }
.online-status .knopf { font-size: 0.9rem; padding: 4px 12px; }
.online-chip {
  padding: 3px 12px;
  border-radius: 999px;
  background: #7d6b9e;
  color: #fff;
  font-weight: 800;
  letter-spacing: 1px;
  user-select: text;
}
.online-dialog {
  max-width: min(420px, calc(100vw - 32px));
  padding: 22px;
  border: none;
  border-radius: 24px;
  background: var(--karte);
  color: var(--text);
  box-shadow: 0 6px 0 var(--schatten), 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.online-dialog::backdrop { background: rgba(30, 20, 60, 0.45); }
.online-dialog h2 { margin: 0 0 8px; }
.online-dialog p { margin: 0 0 16px; color: var(--leise); }
.dialog-zu { position: absolute; right: 12px; top: 10px; }
.dialog-zu button { border: none; background: none; font-size: 1.2rem; color: var(--leise); }
.oder { margin: 14px 0 8px; color: var(--leise); font-size: 0.9rem; }
.raum-beitreten { display: flex; gap: 8px; justify-content: center; }
.raum-beitreten input {
  width: 160px;
  font: inherit;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 10px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  outline: none;
}
.raum-beitreten input:focus { border-color: var(--akzent); }
.online-meldung { min-height: 1.4em; margin: 12px 0 0 !important; font-weight: 700; color: var(--akzent-dunkel) !important; }

/* ---------- Möbel ---------- */

.moebel { position: absolute; }
.moebel svg { display: block; }
.moebel.hinten { z-index: 2; }
.moebel.vorne { z-index: 4; }
.moebel.hinten.nah svg { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px #ffd84a); }
.treppe-feld { z-index: 1 !important; }

.tv-an .tv-bild { animation: tvfarben 3s linear infinite; }
.tv-an .tv-ball { transform-box: fill-box; animation: tvball 0.9s ease-in-out infinite alternate; }
@keyframes tvfarben {
  0%, 100% { fill: #9ad5ff; }
  33% { fill: #ffb3d9; }
  66% { fill: #c6f5a6; }
}
@keyframes tvball {
  from { transform: translate(0, 0); }
  to { transform: translate(60px, 10px); }
}
.radio-an { transform-box: fill-box; transform-origin: center; animation: pochen 0.46s ease-in-out infinite; }
@keyframes pochen { 50% { transform: scale(1.2); } }

/* ---------- Spieler ---------- */

.spieler {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
}
.figur-huelle, .figur-huelle svg { width: 100%; height: 100%; display: block; overflow: visible; }
.figur-huelle { transform-origin: 50% 95%; }
.aktion-huelle { width: 100%; height: 100%; }
.aktion-huelle.schlag-rechts { animation: schlag-rechts 0.26s ease-out; }
.aktion-huelle.schlag-links { animation: schlag-links 0.26s ease-out; }
.aktion-huelle.getroffen { animation: getroffen 0.3s ease-out; }
@keyframes schlag-rechts { 40% { transform: translateX(16px) rotate(6deg); } }
@keyframes schlag-links { 40% { transform: translateX(-16px) rotate(-6deg); } }
@keyframes getroffen {
  0%, 100% { transform: none; filter: none; }
  30% { transform: translateX(-6px) rotate(-4deg); filter: brightness(1.6) saturate(0.6); }
  60% { transform: translateX(5px) rotate(3deg); }
}

/* Namensschild mit Energieleiste über dem Kopf */
.schild {
  position: absolute;
  z-index: 7;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.schild-name:not(:empty) {
  padding: 0 8px;
  border-radius: 999px;
  background: var(--farbe);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}
.energie {
  width: 54px;
  height: 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.energie div { height: 100%; background: linear-gradient(90deg, #ff4d4d, #ffd84a 50%, #5ad65a); transition: width 0.2s; }

/* Boxsack schwingt, wenn man ihn trifft */
.moebel.schwingen-rechts svg, .moebel.schwingen-links svg { transform-origin: 50% 0; }
.moebel.schwingen-rechts svg { animation: schwingen 0.7s ease-out; }
.moebel.schwingen-links svg { animation: schwingen 0.7s ease-out reverse; }
@keyframes schwingen {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-14deg); }
  60% { transform: rotate(7deg); }
  85% { transform: rotate(-3deg); }
}
.spieler.laeuft .figur-huelle { animation: laufen 0.36s ease-in-out infinite; }
.spieler.tanzt .figur-huelle { animation: tanzen 0.6s ease-in-out infinite; }
@keyframes laufen {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
@keyframes tanzen {
  0%, 100% { transform: translateY(0) rotate(-8deg) scaleY(1); }
  25% { transform: translateY(-14px) rotate(0) scaleY(1.03); }
  50% { transform: translateY(0) rotate(8deg) scaleY(0.97); }
  75% { transform: translateY(-14px) rotate(0) scaleY(1.03); }
}

.blase {
  position: absolute;
  z-index: 8;
  transform: translate(-50%, -100%) scale(0.6);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  width: max-content;
  max-width: 240px;
  text-align: center;
  padding: 6px 14px;
  border-radius: 16px;
  background: #fff;
  color: #3d2c4e;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}
.blase::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom: none;
  border-top-color: #fff;
}
.blase.sichtbar { opacity: 1; transform: translate(-50%, -100%) scale(1); }

.effekt {
  position: absolute;
  z-index: 7;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-size: 22px;
  animation: aufsteigen 1.6s ease-out forwards;
}
.effekt.note { color: #7b2cbf; font-weight: 800; font-size: 26px; }
.effekt.dampf { opacity: 0.8; }
.effekt.faust { font-size: 30px; animation: faust 0.3s ease-out forwards; }
.effekt.faust.links { scale: -1 1; }
.effekt.treffer { font-size: 34px; animation: treffer 0.5s ease-out forwards; }
@keyframes faust {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes treffer {
  from { opacity: 1; scale: 0.4; }
  40% { opacity: 1; scale: 1.2; }
  to { opacity: 0; scale: 1; }
}
@keyframes aufsteigen {
  from { opacity: 1; translate: 0 0; }
  to { opacity: 0; translate: 10px -60px; }
}

.nacht {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: radial-gradient(circle at 80% 15%, rgba(40, 40, 110, 0.35), rgba(10, 10, 50, 0.65));
  opacity: 0;
  transition: opacity 1.2s;
}
.nacht span { position: absolute; right: 8%; top: 8%; font-size: 48px; }
.nacht.an { opacity: 1; }

/* ---------- Hinweise und Knöpfe ---------- */

.hinweis {
  position: fixed;
  left: 50%;
  bottom: 70px;
  z-index: 20;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  padding: 8px 18px;
  border-radius: 16px;
  background: var(--karte);
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 3px 0 var(--schatten);
}
.hinweis.sichtbar { opacity: 1; transform: translateX(-50%); }
.hinweis span { color: var(--leise); font-weight: 500; }
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--akzent);
  color: var(--auf-akzent);
  text-align: center;
  font-family: inherit;
  font-weight: 800;
}
/* Untere Leiste: Sprechfeld und Tastenhilfe */
.unten-leiste {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.unten-leiste > * { pointer-events: auto; }

/* Eingabe: was der Charakter sagt */
.sagen {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  background: var(--karte);
  box-shadow: 0 3px 0 var(--schatten);
}
.sagen input, .sagen select {
  font: inherit;
  padding: 4px 10px;
  border: 2px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  color: var(--text);
  outline: none;
}
.sagen input { width: 220px; }
.sagen input:focus { border-color: var(--akzent); }
.sagen .knopf { padding: 4px 14px; font-size: 0.95rem; }

.hilfe {
  flex: 1;
  padding: 4px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  color: #3d2c4e;
  font-size: 0.85rem;
  text-align: center;
}

.touch { display: none; }
@media (pointer: coarse) {
  .hilfe { display: none; }
  .hinweis { bottom: 160px; }
  .unten-leiste { bottom: 100px; justify-content: center; }
  .sagen input { width: 160px; }
  .touch {
    display: flex;
    justify-content: space-between;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 20;
    pointer-events: none;
  }
  .touch-gruppe { display: flex; gap: 10px; pointer-events: auto; }
  .touch button {
    width: 64px;
    height: 64px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 3px 0 var(--schatten);
    font-size: 1.6rem;
    touch-action: none;
  }
  .touch button.gross { width: 76px; height: 76px; background: var(--akzent); }
}

@media (max-width: 600px) {
  .spielleiste { gap: 8px; padding: 6px 12px; }
  .raum { display: none; }
  .leisten-knoepfe { margin-left: 0; }
}