/* ============================= */
/* PLAYER PANEL */
/* ============================= */

.player-panel{
min-height:100%;
min-width:0;
width:100%;
display:flex;
flex-direction:column;
gap:12px;
}

/* ============================= */
/* VIDEO WRAPPER */
/* ============================= */

.video-wrap{
position:relative;

border-radius:8px;
overflow:hidden;

background:#050a15;
border:1px solid rgba(255,255,255,.08);

max-width:100%;
width:100%;

/* evita glitches de renderizado */
isolation:isolate;

/* mejora performance */
contain:layout paint;
}

/* aspect ratio 16:9 */

.video-wrap::before{
content:"";
display:block;
padding-top:56.25%;
}

/* ============================= */
/* VIDEO ELEMENT */
/* ============================= */

.video-wrap video{

position:absolute;
inset:0;

width:100%;
height:100%;

object-fit:contain;

background:#000;

user-select:none;
-webkit-user-select:none;

/* mejora renderizado */

image-rendering:auto;

/* evita glitch en Safari */

transform:translateZ(0);
}

.player-message{
position:absolute;
inset:0;
z-index:2;
display:grid;
place-items:center;
gap:8px;
padding:24px;
text-align:center;
background:rgba(5,10,21,.86);
color:#f8fafc;
}

.player-message strong{
display:block;
font-size:20px;
margin-bottom:6px;
}

.player-message span{
display:block;
max-width:460px;
color:#cbd5e1;
line-height:1.45;
}

.audio-unlock{
position:absolute;
right:12px;
bottom:12px;
z-index:4;
min-height:38px;
padding:0 12px;
border:1px solid rgba(255,255,255,.18);
border-radius:8px;
background:rgba(2,6,23,.86);
color:#f8fafc;
font-weight:700;
cursor:pointer;
backdrop-filter:blur(8px);
}

.audio-unlock:hover{
border-color:#38bdf8;
}

.audio-unlock[hidden]{
display:none;
}

/* ============================= */
/* PLAYER FOOTER */
/* ============================= */

.player-footer{

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

gap:10px;

margin-top:12px;

flex-wrap:wrap;

width:100%;

}

/* ============================= */
/* MEDIA PLACEHOLDER */
/* ============================= */

.media-placeholder{

display:grid;
place-items:center;

min-height:300px;

background:
linear-gradient(
135deg,
#07101d,
#0e1b33
);

max-width:100%;
width:100%;

border-radius:8px;

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

}

/* ============================= */
/* PLAYER BADGE POSITION */
/* ============================= */

.player-panel .badge{
font-weight:600;
letter-spacing:.3px;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width:900px){

.video-wrap::before{
padding-top:56.25%;
}

.player-footer{
gap:8px;
}

}

@media (max-width:600px){

.media-placeholder{
min-height:220px;
}

.player-footer{
flex-direction:column;
align-items:flex-start;
}

}