/* ===============================================================================================
   Arcade - gemeinsames Layout der 3D-Spiele (Minigolf, 2048 in 3D). Laedt NACH prismPop.css.

   Aus minigolf.css herausgezogen, als mit 2048 in 3D der zweite echte Aufrufer dazukam
   (06.10.2026). Eine Seite nimmt teil, indem body die Klasse szene3d-seite und die Buehne die
   Klasse szene3d-buehne traegt. Die Farben von Himmel und Wasser stehen in den Engines;
   --arcade-flaeche ist nur der Ton, den man sieht, bis das erste Bild gezeichnet ist.
   =============================================================================================== */

.szene3d-buehne {
  --arcade-bg: #12384f;
  --arcade-flaeche: #a9dcf8;
  --arcade-linie: rgba(255, 255, 255, 0.16);
  --arcade-text: #f4f9fc;
  --arcade-text-schwach: rgba(244, 249, 252, 0.78);
}

/* Der Dialog liegt nur leicht abgedunkelt ueber der Szene, damit sie dahinter zu sehen ist. */
.szene3d-buehne .arcade-overlay {
  background: rgba(10, 40, 60, 0.38);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.szene3d-buehne .arcade-karte {
  background: rgba(16, 52, 74, 0.94);
  border-color: #2f7da6;
  box-shadow: 0 24px 60px rgba(4, 24, 38, 0.45);
}

.szene3d-buehne .arcade-knopf--zweit {
  border-color: rgba(255, 255, 255, 0.28);
}

.szene3d-buehne #arcadeCanvas {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Lade- und Fehlerhinweis, liegt unter dem Dialog. */
.szene3d-meldung {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 3;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 2rem);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(10, 40, 60, 0.82);
  color: #f4f9fc;
  font-size: 0.85rem;
  text-align: center;
  pointer-events: none;
}

.szene3d-meldung[hidden] {
  display: none;
}

/* -------------------------------------------------------------------------------------------
   Die Szene fuellt das ganze Fenster, auf dem Handy wie am Schreibtisch (Norbert, 06.10.2026:
   "den verfuegbaren Platz, vor allem die Bildschirmhoehe, noch etwas besser nutzen"). Kein
   Rahmen, keine Breitenbegrenzung; HUD und Knoepfe schweben UEBER dem Bild statt ihm Hoehe zu
   nehmen. Das geht hier, weil die 3D-Engines die Canvasgroesse per ResizeObserver verfolgen -
   die 2D-Spiele rechnen ihr Layout gegen eine feste Hoehe und behalten deshalb den Kasten.

   dvh statt svh: die Hoehe darf mit der Safari-Leiste mitgehen (derselbe ResizeObserver).
   Die Aussparungen (viewport-fit=cover) bezahlen jetzt die schwebenden Teile selbst.
   ------------------------------------------------------------------------------------------- */

body.szene3d-seite {
  margin: 0;
  overflow: hidden;
}

.szene3d-seite .arcade-rahmen {
  max-width: none;
  padding: env(safe-area-inset-top, 0px) 0 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
  .szene3d-seite .arcade-rahmen {
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
  }
}

.szene3d-seite .app-header {
  flex: 0 0 auto;
  margin-bottom: 0;
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  border-bottom: 0;
}

.szene3d-buehne {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.szene3d-buehne .arcade-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 0.6rem max(0.7rem, env(safe-area-inset-right, 0px)) 0 max(0.7rem, env(safe-area-inset-left, 0px));
  border-bottom: 0;
  pointer-events: none;
}

.szene3d-buehne .arcade-fussleiste {
  position: absolute;
  left: max(0.7rem, env(safe-area-inset-left, 0px));
  bottom: max(0.7rem, env(safe-area-inset-bottom, 0px));
  z-index: 1;
  min-height: 0;
  padding: 0;
  border-top: 0;
}

/* Ueber der hellen Szene brauchen die schwebenden Teile einen eigenen dunklen Grund. */
.szene3d-buehne .arcade-wert,
.szene3d-buehne .arcade-symbolknopf {
  background: rgba(14, 46, 66, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.szene3d-buehne .szene3d-meldung {
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}