html, body {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    background: #181a1b;
    color: #e8e6e3;

    /* background-color: #121212;
    color: #ffffff; */
}


#screenshot-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.85);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 1000;
    display: none;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


[id^=stage] {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}

.row {
    display: flex;
    flex-direction: row;
    align-items: center; justify-content: center;
    gap: 10px;
}

button {
    padding: 0.6em 1.4em;
    font-size: 1em;
    font-family: inherit;
    border: 2px solid transparent;
    border-radius: 8px;
    /* background-color: inherit; */
    color: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

button#yes {
    background-color: #3d8c40; /* Green */
}
button#no {
    background-color: #a91409; /* Red */
}


video#pidor-video {
    position: absolute;
    width: 300px;
    transform: translateZ(0px) scale(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0;
}
@keyframes flyTowardsCamera {
    0% {
    transform: translateZ(0px) scale(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0;
    }
    30%, 70% {
    transform: translateZ(400px) scale(1.2) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    opacity: 1;
    }
    100% {
    transform: translateZ(0px) scale(0) rotateX(1440deg) rotateY(1440deg) rotateZ(1440deg);
    opacity: 0;
    }
}


.yt_grid {
    height: 100%; width: 100%;
    /* border: 1px solid red; */

    align-items: center; justify-items: center;
    
    /* default to 1×1 just in case */
    --n: 1;

    display: grid;
    grid-template-columns: repeat(var(--n), 1fr); /* same # rows & cols   */
    grid-auto-rows: 1fr;                           /* make every cell 1 : 1 */
    gap: 0;
}

/* 2.  Bump --n as soon as the grid has “at least the k-th child”  */
/*    ( :has(> :nth-child(k)) means “this element contains a child in position k or beyond”) */
.yt_grid:has(> :nth-child(2))  { --n: 2; }  /* 2–4  items  →  2×2 */
.yt_grid:has(> :nth-child(5))  { --n: 3; }  /* 5–9  items  →  3×3 */
.yt_grid:has(> :nth-child(10)) { --n: 4; }  /* 10–16 items  →  4×4 */
.yt_grid:has(> :nth-child(17)) { --n: 5; }  /* 17–25 items  →  5×5 */
.yt_grid:has(> :nth-child(26)) { --n: 6; }  /* …and so on           */
.yt_grid:has(> :nth-child(37)) { --n: 7; }
.yt_grid:has(> :nth-child(50)) { --n: 8; }