{
box-sizing: border-box;
}

html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
font-family: Arial, sans-serif;
}

/* =========================================
VISIONNEUSE
========================================= */

#viewer {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
touch-action: none;
background: #000;
}

canvas {
display: block;
width: 100%;
height: 100%;
}


button svg {
    width: 22px;
    height: 22px;

    display: block;

    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#gyro svg {
    width: 23px;
    height: 23px;
}

#mute .icon-mute {
    display: none;
}

#mute.muted .icon-volume {
    display: none;
}

#mute.muted .icon-mute {
    display: block;
}


#preview {
    position: fixed;
    inset: 0;
    z-index: 30;

    width: 100%;
    height: 100%;

    object-fit: cover;

    background: #000;
}

#preview.hidden {
    display: none;
}

/* =========================================
VIDÉO
========================================= */

#video {
display: none;
}

/* =========================================
LOADING
========================================= */

#loading {
position: fixed;
inset: 0;
z-index: 100;

display: flex;
align-items: center;
justify-content: center;

background: #000;
color: #fff;

font-size: 16px;
text-align: center;

padding: 30px;


}

#loading.hidden {
display: none;
}

/* =========================================
PLAY 
========================================= */






.play-icon {
    display: block;
    width: 0;
    height: 0;

    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid white;

    margin-left: 0px;
}

#centerPlay {
position: fixed;

left: 50%;
top: 50%;

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

z-index: 40;

width: 95px;
height: 95px;

border: 0;
border-radius: 50%;

display: flex;
align-items: center;
justify-content: center;

background: rgba(0, 0, 0, .65);
color: #fff;

font-size: 40px;

cursor: pointer;

backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);

box-shadow:
    0 5px 35px rgba(0, 0, 0, .5);

transition:
    transform .2s,
    background .2s,
    opacity .25s;


}

#play svg {
    width: 22px;
    height: 22px;

    display: block;

    fill: currentColor;
    stroke: none;
}





#centerPlay .play-icon {
    border-top-width: 15px;
    border-bottom-width: 15px;
    border-left-width: 22px;
    margin-left: 5px;
}

#centerPlay:hover {
transform:
translate(-50%, -50%)
scale(1.08);

background:
    rgba(0, 0, 0, .82);


}

#centerPlay:active {
transform:
translate(-50%, -50%)
scale(.94);
}

#centerPlay.hidden {
opacity: 0;
pointer-events: none;
}
#volume {
    width: 90px;
    height: 5px;
    accent-color: white;
    cursor: pointer;
}
/* =========================================
MESSAGE
========================================= */

#hint {
position: fixed;

z-index: 20;

top: 20px;
left: 50%;

transform: translateX(-50%);

padding: 10px 17px;

color: #fff;

background:
    rgba(0, 0, 0, .55);

border-radius: 30px;

font-size: 13px;

pointer-events: none;

transition: opacity .8s;


}

#hint.hidden {
opacity: 0;
}

/* =========================================
CONTRÔLES
========================================= */

#controls {
position: fixed;

z-index: 50;

left: 50%;
bottom: 20px;

transform: translateX(-50%);


width: min(95%, 760px);

display: flex;
align-items: center;

gap: 8px;
padding: 8px;

background:
    rgba(0, 0, 0, .65);

border:
    1px solid rgba(255, 255, 255, .12);

border-radius: 14px;

backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);


}

/* =========================================
BOUTONS
========================================= */

button {
flex: 0 0 auto;

width: 42px;
height: 42px;

border: 0;
border-radius: 9px;

color: #fff;

background:
    rgba(255, 255, 255, .14);

font-size: 18px;

cursor: pointer;

transition:
    background .2s,
    transform .1s;


}

button {
    display: flex;
    align-items: center;
    justify-content: center;
}

button svg {
    display: block;
    flex-shrink: 0;
}

button:hover {
background:
rgba(255, 255, 255, .27);
}

button:active {
transform: scale(.92);
}

/* =========================================
PROGRESSION
========================================= */

#progress {
flex: 1;

min-width: 50px;

height: 5px;

cursor: pointer;

accent-color: white;


}

/* =========================================
TEMPS
========================================= */

#time {
color: #fff;

font-size: 12px;

min-width: 85px;

text-align: center;


}

/* =========================================
MOBILE
========================================= */

@media (max-width: 600px) {

#controls {
    bottom: 10px;
    width: 96%;
    gap: 5px;
    padding: 6px;
}

#controls button {
    width: 38px;
    height: 38px;
    font-size: 16px;
}

#time {
    display: none;
}

#hint {
    top: 12px;
    font-size: 12px;
}

#centerPlay {
    width: 80px;
    height: 80px;
    font-size: 32px;
}

}
#controls {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#controls.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
}