/* ALPlayer v2.0 - Fresh Player Styles (mobile-first) */
.universal-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 85vh;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.player-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

.embed-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.embed-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Controls */
.player-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.92));
    padding: 28px 12px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 1;
    transition: opacity .25s ease;
    z-index: 50;
}

.ctrl-btn {
    background: rgba(20,22,28,.6);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    cursor: pointer;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctrl-btn:active { background: rgba(255,193,7,.3); }

.ctrl-btn svg { width: 22px; height: 22px; fill: currentColor; }

/* Progress */
.progress-bar {
    flex: 1;
    height: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    touch-action: none;
}

.progress-bar::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 5px;
    background: rgba(255,255,255,.25);
    border-radius: 3px;
}

.progress-filled {
    position: absolute;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, #FFC107, #F5C75B);
    border-radius: 3px;
    width: 0%;
}

.progress-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #FFC107;
    border: 2px solid #fff;
    border-radius: 50%;
    left: 0%;
    transform: translateX(-50%);
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
    z-index: 2;
}

/* Time */
.time-display {
    color: #fff;
    font-size: 12px;
    min-width: 92px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Speed */
.speed-select {
    background: rgba(20,22,28,.7);
    color: #fff;
    border: 1px solid rgba(255,255,255,.15);
    height: 40px;
    border-radius: 10px;
    padding: 0 8px;
    font-size: 12px;
}
.speed-select option { background: #1a1a1a; }

/* Big Play Button */
.big-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    background: linear-gradient(135deg, #FFC107, #F5C75B);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    animation: alpulse 2.2s infinite;
}

.big-play-btn svg { width: 38px; height: 38px; fill: #14161c; margin-left: 5px; }

@keyframes alpulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,193,7,.55), 0 10px 30px rgba(0,0,0,.5); }
    70%  { box-shadow: 0 0 0 22px rgba(255,193,7,0), 0 10px 30px rgba(0,0,0,.5); }
    100% { box-shadow: 0 0 0 0 rgba(255,193,7,0), 0 10px 30px rgba(0,0,0,.5); }
}

/* Loading */
.player-loading {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 45;
}

.spinner {
    width: 48px; height: 48px;
    border: 4px solid rgba(255,255,255,.2);
    border-top-color: #FFC107;
    border-radius: 50%;
    animation: alspin 1s linear infinite;
}

@keyframes alspin { to { transform: rotate(360deg); } }

/* Fullscreen */
.universal-player:fullscreen { border-radius: 0; aspect-ratio: auto; height: 100%; }

/* Mobile */
@media (max-width: 620px) {
    .time-display { min-width: 78px; font-size: 11px; }
    .speed-select { display: none; }
    .ctrl-btn { width: 38px; height: 38px; min-width: 38px; }
    .big-play-btn { width: 68px; height: 68px; }
    .big-play-btn svg { width: 30px; height: 30px; }
}