/* scale.css — globalne skalowanie */

:root{
  /* Przeniesione do css w poszczególnych projektach
  --design-w: 1920;
  --design-h: 1080;
*/

  /* rozdzielczość docelowa (nowy ekran) */
  --target-w: 1920;/*720;1920;1040,1920;960;*/
  --target-h: 1080;/*480;1080;600,1080;576;*/

  /* skale anizotropowe — dokładne dopasowanie do 960×576 */
  --scale-x: calc(var(--target-w) / var(--design-w));
  --scale-y: calc(var(--target-h) / var(--design-h));
}

html, body { margin:0; padding:0; width: 100%; height: 100%;overflow:hidden; background:#000; }

/* Scena 1040×600 – to się skaluje w #scaled (zdefiniowanym w scale.css) */
#plansza {
  width:  calc(var(--design-w) * 1px);
  height: calc(var(--design-h) * 1px);
  position: relative;
}

/* zewnętrzne pudełko o ROZMIARZE DOCELOWYM – ucina wszystko do 960×576 */
#fit{
  width:  calc(var(--target-w) * 1px) ;
  height: calc(var(--target-h) * 1px) ;
  position: relative;
  overflow: hidden; /* kryty! bez tego zobaczysz „wystające” tło */
}

/* wewnętrzna scena (1040×600) – dopiero to skalujemy */
#scaled{
  width:  calc(var(--design-w) * 1px);
  height: calc(var(--design-h) * 1px);
  transform-origin: top left;
  transform: scale(var(--scale-x), var(--scale-y));
  position: relative;
  overflow: hidden;
}