* { margin: 0; padding: 0; box-sizing: border-box; }

/* Fundo premium no Desktop */
html, body {
    height: 100%; width: 100%;
    background: radial-gradient(circle at center, #2a0000 0%, #000000 80%);
    color: #fff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden; display: flex; justify-content: center;
}

/* Feed centralizado e com aspecto de "aparelho" no desktop */
.feed-container {
    width: 100%; max-width: 420px; height: 100dvh;
    background: #000; position: relative;
    overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth;
    -ms-overflow-style: none; scrollbar-width: none;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}
.feed-container::-webkit-scrollbar { display: none; }

.video-wrapper {
    width: 100%; height: 100dvh; position: relative;
    scroll-snap-align: start; scroll-snap-stop: always;
    display: flex; justify-content: center; align-items: center; background: #000;
}

.video-player { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }

/* Overlay e Informações */
.video-overlay {
    position: absolute; bottom: 65px; left: 0; width: 100%; padding: 20px 15px;
    display: flex; justify-content: space-between; align-items: flex-end;
    pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
}

.video-info { pointer-events: auto; max-width: 70%; }
.club-name { font-size: 16px; font-weight: bold; margin-bottom: 5px; text-shadow: 1px 1px 3px #000; }
.video-desc { font-size: 14px; margin-bottom: 15px; line-height: 1.3; text-shadow: 1px 1px 3px #000; }
.btn-vip { display: inline-block; background: #b30000; color: #fff; padding: 8px 16px; border-radius: 20px; text-decoration: none; font-weight: bold; font-size: 13px; }

/* Botões da Direita */
.action-sidebar { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 25px; padding-bottom: 5px; z-index: 50;}
.btn-action { background: none; border: none; color: #fff; font-size: 32px; cursor: pointer; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(1px 1px 3px #000); }
.like-count { font-size: 13px; margin-top: 5px; font-weight: bold; }
.btn-like.liked i { color: #ff0050; animation: pop 0.3s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* Controle de Volume com Slider */
.volume-control-wrapper { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.volume-slider {
    width: 60px; height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px;
    outline: none; -webkit-appearance: none; cursor: pointer; display: none; /* Só mostra quando desmuta */
}
.volume-slider.active { display: block; }
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; cursor: pointer;
}

/* Rodapé */
.bottom-nav {
    position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 100%; max-width: 420px; height: 60px; background: #000;
    border-top: 1px solid #222; display: flex; justify-content: space-around; align-items: center; z-index: 100;
}
.nav-item { color: #aaa; text-decoration: none; display: flex; flex-direction: column; align-items: center; font-size: 11px; gap: 4px; z-index: 100; pointer-events: auto;}
.nav-item:hover { color: #fff; }
.nav-item i { font-size: 22px; }
.nav-center .center-icon { background: #b30000; width: 46px; height: 46px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-top: -24px; border: 3px solid #000; box-shadow: 0 0 10px rgba(179,0,0,0.5); }
.nav-center .center-icon i { color: #fff; font-size: 24px; }