html, body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
  }
  /* Wyśrodkowanie canvasa na ekranie */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: #000;
}

#phaser-canvas, canvas {
  display: block;
  margin: auto auto;
  width: 1280px;
  height: 720px;
  image-rendering: smooth; /* Wygładzanie tekstur */
  /* box-shadow: 0 0 32px #000a; */
  background: #000;
  border: none;
  padding: 0;
}
  /* Fullscreen: canvas wypełnia cały ekran */
  @media (min-width: 1281px) and (min-height: 721px) {
    body:fullscreen #phaser-canvas,
    body:-webkit-full-screen #phaser-canvas {
      width: 100vw !important;
      height: 100vh !important;
      max-width: 100vw;
      max-height: 100vh;
    }
  }

#rotate-warning {
  display: none;
  position: fixed;
  z-index: 9999;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  left: 0; top: 0; right: 0; bottom: 0;
  background: #222;
  color: #fff;
  font-size: 2.5em;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding-top: 30vh;
}
@media (orientation: portrait) {
  #rotate-warning { display: flex; }
  #phaser-canvas, canvas { display: none !important; }
}
@media (orientation: landscape) {
  #rotate-warning { display: none; }
  #phaser-canvas, canvas { display: block; }
}