/* Nahansicht beweglicher Möbel (js/moebel.js): Schrank, Rollcontainer, Regal groß von vorn, im Stil der Abenteuer-Fenster */
#moebel-nah {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: center;
  background: rgba(16, 20, 30, 0); transition: background 0.25s;
}
#moebel-nah.auf { background: rgba(16, 20, 30, 0.62); }
.mn-fenster {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px 12px;
  max-width: calc(100vw - 16px); box-sizing: border-box;
  background: #fffdf3; color: #141414; border: 3px solid #141414; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
  font: 15px/1.4 system-ui, sans-serif; transform: scale(0.92); opacity: 0; transition: transform 0.22s ease-out, opacity 0.22s;
}
#moebel-nah.auf .mn-fenster { transform: none; opacity: 1; }
.mn-kopf { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mn-titel {
  padding: 3px 10px; background: #ffd400; border: 2px solid #141414;
  font: 800 18px/1.1 "Barlow Condensed", "Arial Narrow", sans-serif; text-transform: uppercase;
}
.mn-zu { width: 34px; height: 34px; background: #fff; border: 2px solid #141414; font-size: 16px; font-weight: 800; cursor: pointer; }
.mn-zu:hover, .mn-zu:focus-visible { background: #ffd400; outline: none; }
.mn-rahmen { position: relative; overflow: visible; }
.mn-buehne { position: absolute; left: 0; top: 0; transform-origin: 0 0; perspective: 1400px; }
.mn-buehne > img, .mn-buehne .mn-grund { position: absolute; pointer-events: none; user-select: none; }
.mn-text { min-height: 1.4em; font-weight: 700; text-align: center; }
.mn-hilfe { font-size: 12px; color: #5d6474; text-align: center; }

/* Schranktüren: drehen sich am Scharnier nach vorn auf */
.mn-tuer { position: absolute; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.3, 0.1, 0.25, 1); z-index: 20; }
.mn-tuer img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; pointer-events: none; }
.mn-tuer .mn-hinten { transform: rotateY(180deg) scaleX(-1); filter: brightness(0.86) contrast(0.95); }
.mn-tuer-l { transform-origin: 0 50%; }
.mn-tuer-r { transform-origin: 100% 50%; }
#moebel-nah.auf .mn-tuer-l { transform: rotateY(-112deg); }
#moebel-nah.auf .mn-tuer-r { transform: rotateY(112deg); }

/* Fächer in Schrank und Regal: Dinge stehen auf dem Boden */
.mn-fach { position: absolute; display: flex; justify-content: space-evenly; align-items: flex-end; pointer-events: none; z-index: 10; }
.mn-ding {
  pointer-events: auto; background: none; border: 0; padding: 0 4px; cursor: pointer; line-height: 1;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.28)); transition: transform 0.15s;
}
.mn-ding:hover, .mn-ding:focus-visible { transform: translateY(-4px) scale(1.12); outline: none; }
.mn-ding img { width: 1.3em; height: 1.3em; image-rendering: pixelated; display: block; }
.mn-ding.mn-bild svg { width: 1.25em; height: 1.25em; display: block; filter: drop-shadow(0 2px 1px rgba(0,0,0,.35)); }
.mn-fund { animation: mn-glanz 1.2s ease-in-out infinite; }
.mn-fund.weg { animation: none; transform: translateY(-60px) scale(0.3); opacity: 0; transition: transform 0.4s ease-in, opacity 0.4s; }
@keyframes mn-glanz { 50% { filter: drop-shadow(0 0 10px #ffd400) drop-shadow(0 0 4px #ffd400); } }

/* Rollcontainer: Kisten lassen sich herausziehen (kommen nach vorn und werden größer), oben sieht man den Inhalt */
.mn-kiste {
  position: absolute; padding: 0; background: none; border: 0; cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.3, 0.1, 0.25, 1.2);
}
.mn-kiste > img { width: 100%; height: 100%; display: block; pointer-events: none; }
.mn-kiste:hover:not(.raus), .mn-kiste:focus-visible:not(.raus) { transform: translateY(-3px); outline: none; filter: brightness(1.08); }
.mn-kiste.raus { transform: translateY(26%) scale(1.22); }
/* Kiste in drei Schichten: Kiste hinten, Inhalt, Vorderwand (ab dem Rand) – herausgezogen wird die Vorderwand durchsichtig */
.mn-kiste > img.mn-kiste-vorn { position: absolute; inset: 0; clip-path: inset(30% 0 0 0); z-index: 2; transition: opacity 0.25s 0.1s; }
/* Vorderwand wird durchsichtig, sobald man die Kiste auswählt (Maus drüber, Tastatur/Controller-Fokus) oder herauszieht */
.mn-kiste.raus > img.mn-kiste-vorn, .mn-kiste:hover > img.mn-kiste-vorn, .mn-kiste:focus-visible > img.mn-kiste-vorn { opacity: 0.42; }
.mn-kiste:hover .mn-kisteninhalt, .mn-kiste:focus-visible .mn-kisteninhalt { opacity: 1; transform: none; }
.mn-kisteninhalt {
  position: absolute; z-index: 1; left: 12%; right: 12%; bottom: 14%; display: flex; justify-content: center; align-items: flex-end;
  opacity: 0; transform: translateY(14px); transition: opacity 0.2s 0.15s, transform 0.25s 0.15s; pointer-events: none;
}
.mn-kiste.raus .mn-kisteninhalt { opacity: 1; transform: none; }
.mn-kisteninhalt .mn-ding { pointer-events: none; }
.mn-kiste.raus .mn-kisteninhalt .mn-ding { pointer-events: auto; }

/* Maschinen (js/maschine.js): gleiches Fenster wie die Nahansicht, darin die Seite der Maschine */
#maschine-nah { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; background: rgba(16, 20, 30, 0); transition: background 0.25s; }
#maschine-nah.hidden { display: none; }
#maschine-nah.auf { background: rgba(16, 20, 30, 0.62); }
#maschine-nah.auf .mn-fenster { transform: none; opacity: 1; }
.ma-fenster { width: min(1080px, calc(100vw - 16px)); height: min(720px, calc(100vh - 24px)); }
.ma-fenster iframe { flex: 1; width: 100%; min-height: 0; border: 2px solid #141414; background: #1d232b; }