/* =========================
   Base Layout
========================= */
body {
    margin: 0;
    background: #000;
    color: #fff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.player-wrap {
    width: 100%;
    max-width: 900px;
    margin: auto;
    padding: 10px;
}

/* Large desktop screens */
@media (min-width: 1200px) {
    .player-wrap {
        max-width: 1000px;
    }
}

/* =========================
   Video & Aspect Ratio
========================= */
video {
    width: 100%;
    height: auto;
    background: #000;
}

.plyr__video-wrapper,
.player-wrap video {
    aspect-ratio: 16 / 9;
    background: #000;
}

/* =========================
   Video Title
========================= */
.video-title {
    font-size: clamp(15px, 2vw, 18px);
    font-weight: 600;
    margin: 8px 0 12px;
}

/* =========================
   Plyr Theme (JW Style)
========================= */
.plyr {
    --plyr-color-main: #1e90ff;
}

/* Big center play button */
.plyr__control--overlaid {
    background: rgba(0,0,0,.6);
    border: 2px solid #1e90ff;
    width: 76px;
    height: 76px;
    box-shadow: 0 0 25px rgba(30,144,255,.35);
}

/* Control bar */
.plyr__controls {
    background: linear-gradient(
        to top,
        rgba(0,0,0,.95),
        rgba(0,0,0,.25)
    );
}

/* Hover glow */
.plyr__control:hover {
    background: rgba(30,144,255,.15);
}

/* =========================
   Mobile Optimizations
========================= */
@media (max-width: 480px) {
    .plyr__volume {
        display: none;
    }
}

@media (max-width: 360px) {
    .player-wrap {
        padding: 6px;
    }
}