/* ===========================================
   GALLERY MODE (fullscreen presentation)
   Tryb wystawowy: cały viewport pokazuje wyłącznie planszę (16:9),
   wyśrodkowaną z czarnymi pasami (pillarbox/letterbox) dla innych proporcji.
   Aktywowany przyciskiem #fullscreen-toggle (requestFullscreen) lub ESC.
   =========================================== */

body.gallery-mode {
  background: #000;
  overflow: hidden;
}

body.gallery-mode #header,
body.gallery-mode #day-story,
body.gallery-mode .kpo-banner-strip,
body.gallery-mode #below-plansza,
body.gallery-mode #tuning-container {
  display: none !important;
}

body.gallery-mode #app {
  width: 100vw;
  max-width: none;
  height: 100vh;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #000;
  transform: none !important;
  transition: none !important;
}

body.gallery-mode .timeline-viewport {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  background: #000;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.gallery-mode #timeline {
  width: auto;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  aspect-ratio: var(--canvas-aspect-ratio);
  margin: 0;
}

body.gallery-mode .archive-image {
  width: auto;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  background: #000;
}