:root { --voltti-red: #ff0000; }
* { margin: 0; padding: 0; box-sizing: border-box; }

body { background: #000; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; overflow: hidden; font-family: sans-serif; }

.video-container { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: #000; overflow: hidden; }

/* Ajuste do vídeo para não vazar da tela */
video { max-width: 100%; max-height: 100%; object-fit: contain; z-index: 1; }

.voltti-watermark {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 50px; /* Menor para ser discreta */
    opacity: 0.3; /* Bem transparente para não atrapalhar */
    z-index: 50;
    pointer-events: none;
    transition: opacity 0.3s;
}

.controls-overlay { 
    position: absolute; bottom: 0; width: 100%; 
    background: linear-gradient(transparent, rgba(0,0,0,0.9)); 
    padding: 15px 25px; z-index: 100; transition: opacity 0.3s;
}

.progress-area { height: 5px; background: rgba(255,255,255,0.2); cursor: pointer; margin-bottom: 12px; border-radius: 10px; }
.progress-bar { height: 100%; width: 0%; background: var(--voltti-red); border-radius: 10px; }

.buttons-row { display: flex; justify-content: space-between; align-items: center; }
.left-side, .right-side { display: flex; align-items: center; gap: 15px; }

#playPauseBtn { width: 18px; height: 18px; background: white; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); border: none; cursor: pointer; }
#playPauseBtn.paused { clip-path: none; background: transparent; border-left: 6px solid white; border-right: 6px solid white; width: 16px; }

.time-text { color: white; font-size: 13px; font-family: monospace; min-width: 100px; }
.volume-icon { background: none; border: none; color: white; cursor: pointer; font-size: 14px; }
input[type="range"] { accent-color: var(--voltti-red); width: 70px; cursor: pointer; }
.fs-btn { background: none; border: none; color: white; font-size: 18px; cursor: pointer; }

/* Sistema de esconder controles */
.video-container.hide-controls { cursor: none; }
.video-container.hide-controls .controls-overlay { opacity: 0; pointer-events: none; }

/* Aumenta levemente a visibilidade quando os controles estão ativos */
.video-container:not(.hide-controls) .voltti-watermark {
    opacity: 0.6;
}