* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow: hidden;
    font-family: Arial, sans-serif;
    color: #fff;
    background:#0e131d;
    text-align: center;
    position:relative;
    min-height:100dvh;
}

#bg-video {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

#countdown {
    font-size: 4rem;
    margin-top: 20vh;
    text-shadow: 0 0 20px black;
}

#popup {
    position: fixed;
    top:0; left:0;
    width:100%;height:100%;
    background: #000;
    color:white;
    font-size:5rem;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index: 10;
    overflow: hidden; /* évite tout débordement */
}

#popup video {
    width:100%;
    height:100%;
    object-fit: contain; /* garde toute la vidéo sans crop */
}


.hidden {
    display: none!important;
}

#happy-new-year {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:6rem;
    animation: flash 1s infinite alternate;
    background: rgba(0,0,0,0.6);
    z-index: 20;
}

@keyframes flash {
    0% { color: yellow; text-shadow: 0 0 30px red; }
    100% { color: red; text-shadow: 0 0 30px yellow; }
}

/* Canvas et flash */
#lightCanvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 8;
    pointer-events: none;
}

#lightFlash {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    opacity: 0;
    z-index: 7;
    pointer-events: none;
    transition: opacity 0.1s;
}

.logo {
    width:150px;
    height:150px;
    position:absolute;
    top:25px;
    left:25px;
}

.avatar {
    width:300px;
    height:auto;
    position:absolute;
    bottom:0;
    right:25px;
}