/* --- GLOBALNE TŁO I WYŚRODKOWANIE CAŁOŚCI --- */

body {

    background-color: #222222; 

    color: white;

    

    display: flex;

    justify-content: center; 

    align-items: center; 

    min-height: 100vh; 

    margin: 0;

    padding: 20px; 

    box-sizing: border-box; 

}


/* --- DEFIINICJA SIATKI (5 kolumn, Zwiększona liczba rzędów) --- */

.video-grid-emulation {

    display: grid;

    grid-template-columns: repeat(5, 1fr); 

    /* Zwiększamy liczbę rzędów, aby pomieścić niższe elementy i dużą przerwę */

    grid-template-rows: repeat(60, 1fr); /* Z 50 na 60 rzędów */

    

    gap: 20px; 

    

    width: 95vw; 

    height: 95vh; 

    max-width: 1400px; 

}


.video-panel {

    position: relative;

    overflow: hidden; 

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

    background-color: black;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer; 

    

    aspect-ratio: 9 / 16; /* Domyślne proporcje pionowe 9:16 dla wideo */

    width: 100%; 

}


/* Styl dla WIDEO */

.video-panel video {

    width: 100%;

    height: 100%;

    object-fit: cover; 

    display: block;

    filter: brightness(0.7); 

}


/* --- PRZYCISK PLAY I NAKŁADKA (Bez zmian) --- */

.play-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.4); 

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1.5em; 

    color: white;

    opacity: 1; 

    transition: opacity 0.3s;

    pointer-events: auto; 

    z-index: 20; 

}


.video-panel.playing .play-overlay {

    opacity: 0; 

    pointer-events: none; 

}


.play-icon::before {

    content: '🔥'; 

    border: 2px solid white; 

    border-radius: 50%;

    padding: 5px 8px; 

    display: block;

    line-height: 1; 

}



/* --- PRECYZYJNE POZYCJONOWANIE NA SIATCE (NOWY UKŁAD) --- */

/* Domyślny rozmiar w pionie: span 7 rzędów */



/* RZĄD 1: POCKETS, THAT, REMAIN (wyższe), BROKEN-TOP, OFTEN */

.panel-pockets { grid-column: 1; grid-row: 1 / span 7; }

.panel-that { grid-column: 2; grid-row: 3 / span 7; } 


/* remain: Zwiększono wysokość (span 10) */

.panel-remain { grid-column: 3; grid-row: 1 / span 10; } 


.panel-broken-top { grid-column: 4; grid-row: 5 / span 7; background-color: black; }

.panel-often { grid-column: 5; grid-row: 2 / span 7; } 



/* --- LOGO BURN (małe, kwadratowe) --- */

/* Bezpośrednio pod remain, w kolumnie 3 */

.central-burn { 

    grid-column: 3; 

    grid-row: 22 / span 4; /* Zaczyna się pod remain (które kończy się w rzędzie 11) */

    aspect-ratio: 1 / 1; 

}



/* RZĄD 2: BLOSSOM, LATE */

/* Rzędy startowe przesunięte do rzędu 28/, aby stworzyć dużą przerwę */

.panel-blossom { grid-column: 1; grid-row: 27 / span 7; }

.panel-late { grid-column: 2; grid-row: 28 / span 7; } 



/* --- BROKEN-MID (mały, kwadratowy, w TRZECIM rzędzie) --- */

/* Umieszczony w trzecim "rzędzie" układu, w kolumnie 3 */

.panel-broken-mid { 

    grid-column: 3; 

    grid-row: 35 / span 4; /* Zaczyna się w rzędzie 26, span 4 = mały kwadrat */

    aspect-ratio: 1 / 1; 

}



/* AT i NIGHT w jednym rzędzie, po prawej */

.panel-at { grid-column: 4; grid-row: 30 / span 7; }

.panel-night { grid-column: 5; grid-row: 28 / span 7; } 



/* --- NAKŁADKI KOLORYSTYCZNE I TEKST (Bez zmian) --- */

.video-panel::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    opacity: 0.5;

    mix-blend-mode: multiply;

    z-index: 5;

}


.red-filter::after { background-color: red; }

.green-filter::after { background-color: lime; }

.purple-filter::after { background-color: purple; }

.blue-filter::after { background-color: blue; }

.orange-filter::after { background-color: orange; }

.dark-filter::after { background-color: black; opacity: 0.5; mix-blend-mode: normal; }


.video-panel::before {

    content: attr(data-text);

    position: absolute;

    top: 5px;

    left: 5px;

    color: white;

    font-size: 1.5em;

    font-family: sans-serif;

    font-weight: bold;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);

    z-index: 10;

}


.central-burn::before {

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 2em; 

}


/* --- STYLIZACJA LOGO (panel BURN) --- */

.central-burn-logo {

    display: flex;

    justify-content: center;

    align-items: center;


}


.central-burn-logo img {

    max-width: 80%; 

    height: auto;

    display: block;

}