body {
font-family: "Victor Mono", monospace;
font-weight: 800;
color: #ffffff;
background-color: #f998bf;
line-height: 1.6;
padding: 20px;
display: flex;
justify-content: center;
min-height: 100vh;
}

/* CONTAINER PRINCIPAL - MESMO TAMANHO */
.main-container {
background-color: #e0e0e0;
border-radius: 8px;
max-width: 600px;
width: 100%;
padding: 25px;
}

.container {
margin-bottom: 20px;
text-align: left;
}

.container img {
margin: 0 2px;
max-width: 100%;
height: auto;
}

.back-link {
margin-bottom: 20px;
text-align: left;        
}

.back-link a {
color: #f998bf;
text-decoration: none;
font-size: 10px;
}

.back-link a:hover {
text-decoration: none;
color: #ffd2e6;
}

.players-container {
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start; /* Alinha tudo à esquerda */
min-width: 350px;
}

/* PLAYERS 50% MENORES */
.player {
background: #cccccc;
padding: 8px 12px;
border-radius: 0px;
width: 60%; /* 60% menor que o container */

}

.track-title {
font-weight: 600;
margin-bottom: 6px;
color: #2b2b2b;
font-size: 10px; /* Reduzido */
text-transform: uppercase;
letter-spacing: 0.3px;
text-align: left;
}

.player-content {
display: flex;
align-items: center;
gap: 8px; /* Reduzido */
}

.player-controls {
flex: 1;
display: flex;
align-items: center;
gap: 6px; /* Reduzido */
}

/* BOTÃO PLAY 50% MENOR */
.play-btn {
width: 20px; /* Reduzido ~26% */
height: 20px; /* Reduzido ~26% */
border: none;
background: #b5b5b5;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
flex-shrink: 0;
}

.play-btn:hover {
background: #898989;
}

.play-btn i {
font-size: 9px; /* Reduzido */
color: #565656;
}

.play-btn.playing .fa-play {
display: none;
}

.play-btn.playing .fa-pause {
display: block;
}

.play-btn .fa-pause {
display: none;
}

/* BARRA DE PROGRESSO MENOR */
.progress-container {
flex: 1;
display: flex;
align-items: center;
gap: 6px; /* Reduzido */
min-width: 0; /* Permite que encolha */
}

.progress-bar {
flex: 1;
height: 3px; /* Reduzido */
background: #e0e0e0;
cursor: pointer;
overflow: hidden;
border-radius: 1.5px;
min-width: 0;
}

.progress {
height: 100%;
width: 0%;
background: #2b2b2b;
transition: width 0.1s;
border-radius: 1.5px;
}

/* TEMPO MENOR */
.time {
font-size: 9px; /* Reduzido */
color: #666;
min-width: 28px; /* Reduzido */
font-weight: 500;
flex-shrink: 0;
}

/* CONTROLE DE VOLUME MENOR */
.volume-control {
display: flex;
align-items: center;
gap: 4px; /* Reduzido */
flex-shrink: 0;
}

.mute-btn {
background: none;
border: none;
font-size: 12px; /* Reduzido */
color: #666;
width: 20px; /* Reduzido */
height: 20px; /* Reduzido */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 3px;
flex-shrink: 0;
}

.mute-btn:hover {
background: #898989;
}

.volume-slider {
width: 50px; /* Reduzido ~38% */
height: 3px; /* Reduzido */
background: #e0e0e0;
outline: none;
-webkit-appearance: none;
cursor: pointer;
border-radius: 1.5px;
flex-shrink: 0;
}

.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 10px; /* Reduzido */
height: 10px; /* Reduzido */
border-radius: 50%;
background: #2b2b2b;
cursor: pointer;
border: 1px solid #fff;
}

audio {
display: none;
}

/* RESPONSIVIDADE */
@media (max-width: 768px) {
.main-container {
    padding: 20px;
}

.player {
    width: 80%; /* Um pouco maior em telas menores */
    min-width: 400px;
}

.volume-slider {
    width: 45px;
}
}

@media (max-width: 480px) {
.main-container {
    padding: 15px;
}

.player {
    width: 70%; /* Ainda maior em telas muito pequenas */
    min-width: 350px;
}

.player-controls {
    flex-wrap: wrap;
    gap: 8px;
}

.volume-control {
    margin-top: 6px;
    width: 100%;
    justify-content: left;
}

.volume-slider {
    width: 30px;
    flex-grow: .3;
}

.container img {
    max-width: 100px;
}
}

@media (max-width: 320px) {
.player {
    width: 85%;
    min-width: 200px;
}

.time {
    font-size: 8px;
    min-width: 25px;
}

.progress-container {
    gap: 4px;
}
}