/* ══════════════════════════════════════════════════════════════════════
   ADVANCED PLAYER — MX Player / VLC স্টাইল
   ══════════════════════════════════════════════════════════════════════ */

#player-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* কিছু ব্রাউজার (পুরনো Safari/Chrome/Firefox) fullscreen এ যাওয়ার সময় এলিমেন্টের
   width/height নিজে থেকে 100vw/100vh করে দেয় না — এখানে জোর করে সেট করে দেওয়া হচ্ছে,
   নাহলে "ফুলস্ক্রিন করলেও পুরো স্ক্রিন জুড়ে হয় না" সমস্যা হয় */
#player-modal:fullscreen,
#player-modal:-webkit-full-screen,
#player-modal:-moz-full-screen,
#player-modal:-ms-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
}
#player-modal:fullscreen #player-viewport,
#player-modal:-webkit-full-screen #player-viewport,
#player-modal:-moz-full-screen #player-viewport,
#player-modal:-ms-fullscreen #player-viewport {
    width: 100vw !important;
    height: 100vh !important;
    /* মোবাইলের নচ/পাঞ্চ-হোল ক্যামেরার জায়গাটা (safe-area-inset) বাদ দিয়ে ভিডিও বসানো
       হচ্ছে — নাহলে ভিডিও ক্যামেরার নিচেও ঢুকে যেত। কালো ব্যাকগ্রাউন্ড (#player-modal)
       পুরো স্ক্রিন জুড়েই থাকবে, শুধু আসল ভিডিও কনটেন্টটা নিরাপদ জায়গায় সরে থাকবে */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
             env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
    box-sizing: border-box !important;
}
#player-modal:fullscreen #vid-player,
#player-modal:-webkit-full-screen #vid-player,
#player-modal:-moz-full-screen #vid-player,
#player-modal:-ms-fullscreen #vid-player {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    /* fullscreen এ object-fit: contain থাকলে ভিডিওর অ্যাসপেক্ট রেশিওর কারণে
       উপরে-নিচে/পাশে কালো বর্ডার (letterbox) থেকে যায় — zoom না করলে এই বর্ডার
       থাকতোই, zoom করলে ধীরে ধীরে সেটা কেটে বের হতো। এখন fullscreen এ অটোমেটিক
       cover ব্যবহার করা হচ্ছে, তাই manual zoom ছাড়াই ভিডিও পুরো স্ক্রিন এজ-টু-এজ
       ফিল করবে (সামান্য crop হতে পারে প্রয়োজনে, যেটা স্বাভাবিক ফুলস্ক্রিন প্লেয়ারের আচরণ) */
    object-fit: cover !important;
}

/* ভিডিওকে rotate/pan/zoom করার জন্য viewport wrapper — overflow hidden থাকবে */
#player-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#vid-player {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    object-fit: contain;
    outline: none;
    background: #000;
    transform-origin: center center;
    will-change: transform;
    /* zoom/pan হবে transform দিয়ে, transition শুধু pinch/wheel শেষ হলে snap-back এ */
}
#vid-player.zoom-animate { transition: transform .15s ease-out; }

.close-vid {
    position: absolute;
    top: 20px; right: 24px;
    font-size: 34px !important;
    color: #fff;
    cursor: pointer;
    z-index: 10050;
    background: rgba(0,0,0,.35);
    border-radius: 50%;
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, opacity .25s, transform .25s;
}
.close-vid:hover { background: rgba(229,9,20,.6); }

/* ── কার্সার লুকানো (নিষ্ক্রিয় অবস্থায়) ─────────────────────────────── */
.hide-cursor, .hide-cursor * { cursor: none !important; }

/* ── কন্ট্রোল বার সহ সব UI ওভারলে — নিষ্ক্রিয় থাকলে fade আউট হবে ───── */
.hide-cursor .player-controls,
.hide-cursor .close-vid,
.hide-cursor .player-topbar {
    opacity: 0;
    pointer-events: none;
}
.player-controls, .close-vid, .player-topbar { transition: opacity .3s ease; }

/* ── টপবার (টাইটেল) ─────────────────────────────────────────────────── */
.player-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 18px 90px 40px 24px;
    background: linear-gradient(to bottom, rgba(0,0,0,.75), transparent);
    z-index: 10040;
    pointer-events: none;
    font-size: 15px;
    color: #eee;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── বটম কন্ট্রোল বার ────────────────────────────────────────────────── */
.player-controls {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 30px 20px 14px;
    background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
    z-index: 10040;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* progress bar — রেফারেন্স ডিজাইন অনুযায়ী:
   ► দেখা হয়ে যাওয়া অংশ (played) = wavy/zigzag নীল লাইন
   ► এখনো না-দেখা অংশ (বাকি ট্র্যাক) = সাধারণ চিকন সোজা লাইন (কোনো wave নেই)
   played অংশের নিচে বাকি ট্র্যাকের সোজা লাইন যাতে উঁকি না দেয়, তাই CSS variable
   (--played-pct, JS থেকে সেট হয়) দিয়ে clip-path করে সেই অংশ লুকানো হচ্ছে। */
.progress-wrap {
    position: relative;
    height: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    --played-pct: 0%;
}
.progress-track {
    position: absolute;
    top: 50%; left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    background-color: rgba(255,255,255,.4);
    border-radius: 2px;
    /* played অংশের নিচে থেকে এই সোজা লাইনটা কাটা/লুকানো থাকে */
    clip-path: inset(0 0 0 var(--played-pct));
    transition: height .12s ease;
}
.progress-buffered {
    position: absolute;
    top: 50%; left: 0;
    width: 0%;
    height: 2px;
    transform: translateY(-50%);
    background-color: rgba(255,255,255,.65);
    border-radius: 2px;
    clip-path: inset(0 0 0 var(--played-pct));
}
.progress-wrap:hover .progress-track,
.progress-wrap.scrubbing .progress-track,
.progress-wrap:hover .progress-buffered,
.progress-wrap.scrubbing .progress-buffered { height: 3px; }

.progress-played {
    position: absolute;
    top: 50%; left: 0;
    width: 0%;
    height: 14px;
    transform: translateY(-50%);
    overflow: hidden;
    background-color: #4b83e7;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Cpath d='M0,7 L6,1 L12,7 L18,13 L24,7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Cpath d='M0,7 L6,1 L12,7 L18,13 L24,7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-position: 0 center;
    mask-position: 0 center;
    -webkit-mask-size: 24px 14px;
    mask-size: 24px 14px;
    animation: waveFlow 2.4s linear infinite;
}
@keyframes waveFlow {
    from { -webkit-mask-position: 0 center; mask-position: 0 center; }
    to   { -webkit-mask-position: -24px center; mask-position: -24px center; }
}
@media (prefers-reduced-motion: reduce) {
    .progress-played { animation: none; }
}
.progress-knob {
    position: absolute;
    top: 50%; transform: translate(-50%, -50%);
    left: 0%;
    width: 12px; height: 12px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,.5);
    opacity: 1;
    transition: opacity .12s ease;
    z-index: 2;
}

/* controls row */
.controls-row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
}
.controls-row .spacer { flex: 1; }
.ctrl-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    transition: background .18s;
    font-family: inherit;
}
.ctrl-btn:hover { background: rgba(255,255,255,.12); }
.ctrl-btn .material-icons-outlined { font-size: 24px; }
.ctrl-time {
    font-size: 13px;
    color: #ddd;
    min-width: 108px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}

.speed-btn, .zoom-btn {
    font-size: 13px;
    font-weight: 600;
    width: auto;
    padding: 0 10px;
    border-radius: 16px;
}

/* volume slider (desktop hover popout) */
.volume-wrap {
    display: flex;
    align-items: center;
}
.volume-slider {
    width: 0;
    opacity: 0;
    transition: width .2s ease, opacity .2s ease, margin .2s ease;
    accent-color: var(--primary, #e50914);
    margin-left: 0;
}
.volume-wrap:hover .volume-slider,
.volume-wrap.active .volume-slider {
    width: 80px;
    opacity: 1;
    margin-left: 4px;
}

/* speed dropdown menu */
.speed-menu {
    position: absolute;
    bottom: 60px;
    right: 20px;
    background: rgba(24,24,24,.97);
    border-radius: 10px;
    padding: 6px;
    display: none;
    flex-direction: column;
    z-index: 10060;
    box-shadow: 0 4px 20px rgba(0,0,0,.5);
    min-width: 90px;
}
.speed-menu.open { display: flex; }
.speed-menu button {
    background: none;
    border: none;
    color: #ddd;
    padding: 8px 14px;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}
.speed-menu button:hover { background: rgba(255,255,255,.08); }
.speed-menu button.active { color: var(--primary, #e50914); font-weight: 700; }

/* ── জেসচার / স্ট্যাটাস ওভারলে (zoom %, seek +5s, brightness, volume) ── */
.gesture-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,.6);
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    display: none;
    align-items: center;
    gap: 8px;
    z-index: 10070;
    pointer-events: none;
    white-space: nowrap;
}
.gesture-overlay.show { display: flex; }
.gesture-overlay .material-icons-outlined { font-size: 20px; }

/* সাইড ইন্ডিকেটর (ব্রাইটনেস/ভলিউম বার — বাম/ডান পাশে) */
.side-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    padding: 10px 8px;
    background: rgba(0,0,0,.55);
    border-radius: 24px;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10070;
    pointer-events: none;
}
.side-indicator.show { display: flex; }
.side-indicator.left { left: 26px; }
.side-indicator.right { right: 26px; }
.side-indicator .material-icons-outlined { color: #fff; font-size: 20px; }
.side-indicator .bar-track {
    width: 4px;
    height: 90px;
    background: rgba(255,255,255,.25);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}
.side-indicator .bar-fill {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: #fff;
    border-radius: 3px;
    height: 60%;
}

/* seek +/- flash (দুইপাশে ডাবল-ট্যাপে) */
.seek-flash {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    opacity: 0;
    z-index: 10065;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%);
}
.seek-flash.left { left: 0; }
.seek-flash.right { right: 0; }
.seek-flash.flash { animation: seekFlashAnim .5s ease; }
@keyframes seekFlashAnim { 0% { opacity: 1; } 100% { opacity: 0; } }
.seek-flash .material-icons-outlined { font-size: 30px; margin: 0 4px; }
.seek-flash .flash-inner { display: flex; align-items: center; }

/* long-press 2x speed badge */
.speed-boost-badge {
    position: absolute;
    top: 24px; left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.65);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    display: none;
    align-items: center;
    gap: 6px;
    z-index: 10070;
    pointer-events: none;
}
.speed-boost-badge.show { display: flex; }

/* centre big play/pause bump animation */
.center-bump {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 74px; height: 74px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10068;
    pointer-events: none;
}
.center-bump.pulse { display: flex; animation: bumpAnim .45s ease; }
.center-bump .material-icons-outlined { font-size: 38px; color: #fff; }
@keyframes bumpAnim {
    0% { transform: translate(-50%, -50%) scale(.6); opacity: .3; }
    40% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* loading spinner — ঘূর্ণায়মান "ফুল/পিনহুইল" (curved flame-blade) ডিজাইন,
   রেফারেন্স স্ক্রিনশটের কমলা flower spinner-এর সাথে মিলিয়ে বানানো */
.player-spinner {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    display: none;
    z-index: 10066;
    pointer-events: none;
}
.player-spinner.show { display: block; }

.player-spinner .flower-svg {
    width: 100%; height: 100%;
    animation: petalSpin 1s linear infinite;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 4px rgba(255,106,0,.55));
}
@keyframes petalSpin { to { transform: rotate(360deg); } }

/* পুরনো ব্রাউজার/ফলব্যাক — SVG JS দিয়ে বসানো না হলে সাধারণ রিং স্পিনার দেখাবে */
.player-spinner:not(.flower-built) {
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: var(--primary, #e50914);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 720px) {
    .player-controls { padding: 22px 10px 10px; }
    .ctrl-time { min-width: 92px; font-size: 12px; }
    .volume-wrap { display: none; } /* মোবাইলে সোয়াইপ জেসচারে ভলিউম কন্ট্রোল হয় */
    .close-vid { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 28px !important; }
}