/* DIE LEINWAND PASST SICH DEM RAHMEN AN, NICHT UMGEKEHRT.

   Die Unity-Standardvorlage schreibt eine feste Groesse in die Seite
   (bei uns 605x880). Steckt das Spiel in einem kleineren Rahmen, etwa im
   Spieler von PixelPicked, wird es abgeschnitten und bekommt Rollbalken.
   Gemeldet am 18.09.2026.

   Hier ist stattdessen alles fest auf Rahmengroesse, overflow versteckt,
   und das Einpassen macht das Skript in der index.html. */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b1210;          /* Waldnacht, dieselbe wie auf der Website */
  touch-action: none;
}

#unity-container {
  position: fixed;
  inset: 0;
  /* Ausdruecklich, damit eine spaeter zugefuegte Unity-Klasse die
     Zentrierung nicht per translate(-50%,-50%) verschiebt. */
  left: 0;
  top: 0;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#unity-canvas {
  display: block;
  background: #0b1210;
  outline: none;
}

/* Der Ladebalken sitzt in der Mitte, sonst nichts. Kein Fussbereich und
   kein Rahmen: in einem Einbettfenster ist jeder Pixel Bildflaeche. */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

#unity-progress-bar-empty {
  width: 141px;
  height: 18px;
  background: url("progress-bar-empty-dark.png") no-repeat center;
}

#unity-progress-bar-full {
  width: 0%;
  height: 18px;
  margin-top: 10px;
  background: url("progress-bar-full-dark.png") no-repeat center;
}

#unity-warning {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translate(-50%, 0);
  background: rgba(11, 18, 16, 0.85);
  color: #ede4ce;
  padding: 10px;
  display: none;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  text-align: center;
  border-radius: 6px;
  max-width: 80%;
}