table{ margin-top: 3vh; border-collapse: collapse; width: 100%; }
table * { text-align: center; }
tr{ font-weight: bold; }
td{ font-size: 2cqw; border: 1px solid #d9d9d9; padding: 8px; }

.icon-play{
    width: 1.65cqw;
    height: 1.65cqw;
}

.overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
.overlay.open { display: flex; }

.modal {
width: 425px;
height: 625px;
background: #fff;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 10px 35px rgba(0,0,0,0.35);
position: relative;
display: flex;
flex-direction: column;
}

.modal-bar {
height: 44px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 10px;
border-bottom: 1px solid #eee;
flex-shrink: 0;
}

.modal-close {
border: 0;
background: transparent;
cursor: pointer;
font-size: 18px;
line-height: 1;
padding: 6px 10px;
border-radius: 10px;
}
.modal-close:hover { background: #f3f4f6; }

#playerFrame {
width: 100%;
height: 100%;
border: 0;
flex: 1;
}