/* ─────────────────────────────────────────────────────────────────────────────
 * mibl_ytdesk.css — the YouTube Desk television (mibl_ytdesk.js). 7 Oct 2026.
 * The cabinet copies NOVA's Watch set (members/player.css .nw-tv) so the two read as one product; the screen adds
 * what an analog set does with a weak signal — lines, a rolling band, a slow wave, snow between channels.
 * Logical properties throughout: the set runs right-to-left in Persian, Arabic and Urdu.
 * Everything animated stops under prefers-reduced-motion.
 * ───────────────────────────────────────────────────────────────────────────── */
html.ytd-open { overflow: hidden }
.ytd-ov {
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; overflow-y: auto;
    background: rgba(4, 3, 10, .72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .22s ease;
    font-family: inherit; color: #eef0f6;
}
.ytd-ov.in { opacity: 1 }
.ytd-set {
    width: min(760px, 100%); margin: auto;
    border: 1px solid rgba(255,255,255,.10); border-radius: 20px; overflow: hidden;
    background: #14121c; box-shadow: 0 24px 80px rgba(0,0,0,.6);
    transform: translateY(10px) scale(.985); transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.ytd-ov.in .ytd-set { transform: none }

/* the bar */
.ytd-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.08) }
.ytd-title { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ytd-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 900; letter-spacing: .08em; color: #fecaca;
    padding: 3px 9px; border-radius: 999px; background: rgba(239,68,68,.16); border: 1px solid rgba(239,68,68,.45) }
.ytd-live i { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: ytdPulse 1.6s ease-in-out infinite }
.ytd-yt { display: inline-flex; flex: 0 0 auto }
.ytd-iconbtn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #cbd5e1; cursor: pointer; text-decoration: none }
.ytd-iconbtn:hover { color: #fff; border-color: rgba(255,255,255,.3) }
.ytd-iconbtn:focus-visible, .ytd-btn:focus-visible, .ytd-knob:focus-visible, .ytd-dot:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px }

/* the cabinet — walnut, as in NOVA */
.ytd-tv {
    position: relative; padding: 28px 32px 0;
    background:
        repeating-linear-gradient(97deg, rgba(255,255,255,.020) 0 2px, rgba(0,0,0,.030) 2px 6px),
        linear-gradient(165deg, #4a3826 0%, #33261a 38%, #211910 72%, #15100a 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.ytd-screen {
    position: relative; container-type: inline-size;
    border-radius: 30px / 42px; overflow: hidden; background: #000;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.95), inset 0 0 38px 14px rgba(0,0,0,.5),
        0 0 0 3px #0b0906, 0 0 0 14px #1d160e, 0 0 0 15px rgba(255,255,255,.07), 0 20px 40px rgba(0,0,0,.6);
}
.ytd-frame { aspect-ratio: 16 / 9; width: 100%; background: #000 }
.ytd-frame iframe { width: 100%; height: 100%; border: 0; display: block }

/* the advert: channels stacked in ONE grid cell, so the screen is as tall as the longest channel and never cuts a
   sentence in a long language; 4:3 is the floor (an analog set's own shape) */
.ytd-chs {
    display: grid; min-height: auto; aspect-ratio: 4 / 3;   /* auto: 4:3 is the FLOOR — a longer channel (a phone, a long language) makes the screen taller instead of being cut off */
    background:
        radial-gradient(120% 90% at 50% 40%, rgba(80, 60, 140, .28), rgba(0,0,0,0) 60%),
        linear-gradient(180deg, #0c1022 0%, #120a1e 60%, #07060c 100%);
    filter: url(#ytdWave) contrast(1.06) saturate(1.1);
    animation: ytdFlicker 5.5s steps(1) infinite;
}
.ytd-ch {
    grid-area: 1 / 1; align-self: center; justify-self: stretch;
    padding: 7% 9%; text-align: center;
    opacity: 0; visibility: hidden; transform: scale(1.02);
    transition: opacity .28s ease, transform .5s ease, visibility 0s linear .28s;
    color: #f6efdc;
    text-shadow: -1px 0 rgba(255, 0, 72, .38), 1px 0 rgba(0, 220, 255, .38), 0 0 14px rgba(255,255,255,.16);
}
.ytd-ch.on { opacity: 1; visibility: visible; transform: none; transition: opacity .28s ease, transform .5s ease, visibility 0s }
.ytd-kick { font-size: clamp(11px, 2.4cqw, 15px); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #e6c77e; margin-bottom: .7em }
.ytd-h1 { font-size: clamp(19px, 5.4cqw, 36px); font-weight: 900; line-height: 1.25; margin-bottom: .55em }
.ytd-lead { font-size: clamp(12.5px, 2.85cqw, 18px); line-height: 1.75; color: #e9e3f5; margin: 0 auto; max-width: 34em }
.ytd-ico { font-size: clamp(32px, 9cqw, 66px); line-height: 1; margin-bottom: .25em; filter: drop-shadow(0 0 14px rgba(255,255,255,.18)) }
.ytd-h2 { font-size: clamp(17px, 4.6cqw, 30px); font-weight: 900; line-height: 1.3; margin-bottom: .5em; color: #fff4d6 }
.ytd-d { font-size: clamp(12.5px, 2.85cqw, 18px); line-height: 1.75; margin: 0 auto; max-width: 34em; color: #ece6f6 }
.ytd-plans { display: flex; gap: 4%; justify-content: center; flex-wrap: wrap; margin-top: .6em }
.ytd-plan { flex: 1 1 40%; max-width: 46%; padding: 4% 3%; border-radius: 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05) }
.ytd-plan.gold { border-color: rgba(230,199,126,.6); background: rgba(230,199,126,.10) }
.ytd-plan b { display: block; font-size: clamp(16px, 4.4cqw, 28px); font-weight: 900; color: #fff4d6 }
.ytd-plan span { display: block; font-size: clamp(14px, 3.6cqw, 22px); font-weight: 800; margin-top: .25em }
.ytd-plan em { display: block; font-style: normal; font-size: clamp(11px, 2.4cqw, 14px); color: #d8d0e8; margin-top: .3em }

/* the on-screen channel number, green like a set from the eighties */
.ytd-osd { position: absolute; top: 7%; inset-inline-end: 7%; font: 800 clamp(13px, 3cqw, 20px)/1 ui-monospace, Consolas, monospace;
    color: #6bff8f; text-shadow: 0 0 8px rgba(107,255,143,.7); letter-spacing: .08em; direction: ltr; opacity: 0; pointer-events: none }
.ytd-osd.show { animation: ytdOsd 1.8s ease forwards }

/* snow: faint all the time, a burst between channels */
.ytd-snow { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .055; mix-blend-mode: screen; pointer-events: none; image-rendering: pixelated; transition: opacity .12s }
.ytd-snow.burst { opacity: .85 }

/* the glass: lines, a reflection, the vignette of curved glass — and a band that rolls down the picture.
   ⚠️ pointer-events:none, always: over the live embed it would otherwise swallow YouTube's play button. */
.ytd-glass { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background:
        repeating-linear-gradient(180deg, rgba(0,0,0,.20) 0 1px, rgba(255,255,255,0) 1px 3px),
        linear-gradient(198deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.035) 15%, rgba(255,255,255,0) 33%),
        radial-gradient(118% 118% at 50% 46%, rgba(0,0,0,0) 52%, rgba(0,0,0,.5) 100%) }
.ytd-glass::after { content: ''; position: absolute; inset-inline: 0; height: 22%; top: -25%;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.07), rgba(255,255,255,0));
    animation: ytdRoll 6.5s linear infinite }
.ytd-screen.is-live .ytd-glass::after { display: none }
/* 7 Oct 2026, the owner: «فقط اون برفک رو لطفا از روی ویدئوی من بردار» — no snow over a live picture (the burst between
   channels stays). Then «خط‌های تلویزیون قشنگ بودن»: the scan lines, reflection and curved-glass edge stay on it. */
.ytd-screen.is-live .ytd-snow:not(.burst) { opacity: 0 }

/* the face: knobs that really change the channel */
.ytd-face { display: flex; align-items: center; gap: 16px; padding: 20px 32px 24px }
.ytd-knob { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
    background: radial-gradient(circle at 33% 26%, #6b573f 0%, #3a2d1f 55%, #1a140d 100%);
    box-shadow: 0 3px 7px rgba(0,0,0,.8), inset 0 1px 1px rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.55);
    transform: rotate(-120deg); transition: transform .35s cubic-bezier(.3,1.4,.5,1) }
.ytd-knob::after { content: ''; position: absolute; top: 6px; left: 50%; width: 3px; height: 11px; border-radius: 2px;
    background: #e2cda2; transform: translateX(-50%); box-shadow: 0 0 4px rgba(226,205,162,.5) }
.ytd-knob.small { width: 30px; height: 30px; transform: none }
.ytd-knob.small::after { height: 8px; top: 5px }
.ytd-knob.small:active { transform: rotate(40deg) }
.ytd-knob:disabled { cursor: default; opacity: .75 }
.ytd-grille { flex: 1 1 auto; height: 30px; border-radius: 5px;
    background: repeating-linear-gradient(90deg, rgba(0,0,0,.72) 0 3px, rgba(255,255,255,.055) 3px 7px);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.05) }
.ytd-plate { flex: 0 0 auto; font-size: 12px; font-weight: 800; letter-spacing: 4px; color: #d4b475; direction: ltr;
    text-shadow: 0 1px 0 rgba(0,0,0,.9), 0 0 12px rgba(212,180,117,.25) }
.ytd-led { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffd88a, #f59e0b 60%, #78350f); box-shadow: 0 0 10px rgba(245,158,11,.9) }
.ytd-led.on { background: radial-gradient(circle at 35% 30%, #ff8080, #ef4444 60%, #7f1d1d); box-shadow: 0 0 10px rgba(239,68,68,.95) }

/* under the set: the channel dots, the action, the honest small print */
.ytd-under { padding: 14px 18px 18px; text-align: center }
.ytd-dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 13px }
.ytd-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.22); transition: background .2s, transform .2s }
.ytd-dot.on { background: #e6c77e; transform: scale(1.3) }
.ytd-acts { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap }
.ytd-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 22px; border-radius: 999px; cursor: pointer;
    font: inherit; font-weight: 900; font-size: 14.5px; text-decoration: none; border: 0;
    color: #1a1206; background: linear-gradient(135deg, #f4d58d, #d9b96a 55%, #b8923f); box-shadow: 0 6px 20px rgba(217,185,106,.28) }
.ytd-btn:hover { filter: brightness(1.06) }
.ytd-btn.ghost { color: #e5e7eb; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); box-shadow: none }
.ytd-hint { font-size: 12.5px; color: #a8b0c4; margin-bottom: 11px }
.ytd-fine { margin: 13px auto 0; max-width: 46em; font-size: 11.5px; line-height: 1.7; color: #8e96ab }
.ytd-defs { position: absolute; width: 0; height: 0; overflow: hidden }

@keyframes ytdRoll { 0% { top: -25% } 100% { top: 105% } }
@keyframes ytdFlicker { 0%, 100% { opacity: 1 } 47% { opacity: .96 } 48% { opacity: 1 } 83% { opacity: .975 } 84% { opacity: 1 } }
@keyframes ytdPulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes ytdOsd { 0% { opacity: 0 } 8% { opacity: 1 } 75% { opacity: 1 } 100% { opacity: 0 } }

@media (max-width: 620px) {
    .ytd-ov { padding: 8px }
    .ytd-tv { padding: 14px 14px 0 }
    .ytd-screen { border-radius: 20px / 28px;
        box-shadow: inset 0 0 0 2px rgba(0,0,0,.95), inset 0 0 26px 10px rgba(0,0,0,.5),
            0 0 0 2px #0b0906, 0 0 0 8px #1d160e, 0 0 0 9px rgba(255,255,255,.07), 0 12px 26px rgba(0,0,0,.6) }
    .ytd-ch { padding: 8% 7% }
    .ytd-face { padding: 13px 14px 15px; gap: 10px }
    .ytd-knob { width: 28px; height: 28px }
    .ytd-knob.small { width: 24px; height: 24px }
    .ytd-grille { height: 20px }
    .ytd-plan { max-width: 100%; flex-basis: 100%; margin-bottom: 3% }
}
@media (prefers-reduced-motion: reduce) {
    .ytd-chs { filter: none; animation: none }
    .ytd-glass::after, .ytd-live i { animation: none; display: none }
    .ytd-ch, .ytd-ov, .ytd-set, .ytd-knob { transition: none }
}

/* the pill on /r/<slug> and My Station (NOVA draws its own) */
.ytd-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 10px; border-radius: 999px; cursor: pointer;
    font: inherit; font-weight: 800; font-size: 13.5px; color: #fde2e2; background: rgba(255,0,51,.09); border: 1px solid rgba(255,0,51,.38) }
.ytd-pill:hover { background: rgba(255,0,51,.16); color: #fff }
.ytd-pill .ytd-pdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35) }
.ytd-pill.is-live .ytd-pdot { background: #ef4444; box-shadow: 0 0 8px #ef4444; animation: ytdPulse 1.6s ease-in-out infinite }
a.ytd-pill { text-decoration: none }
.ytd-row { display: flex; justify-content: center; margin: 12px 0 4px }

/* Persian, Arabic and Urdu letters join: letter-spacing tears the word apart, so the two spaced labels lose it there. */
html[dir="rtl"] .ytd-kick, html[dir="rtl"] .ytd-osd { letter-spacing: 0 }
/* Host pages colour every link (My Station paints them cyan); the pill keeps its own colour wherever it sits. */
.ytd-pill, .ytd-pill:visited, .ytd-pill:hover { color: #fde2e2 !important; text-decoration: none !important }

/* ── the tuner (7 Oct 2026, «مثل رادیوی آنالوگ یه دکمه چرخان عوض کردن کانال»): a big knob inside a ring of detent
   marks, a green channel window beside it, and the channel guide under the set ─────────────────────────────────────── */
.ytd-dialwrap { position: relative; flex: 0 0 auto; width: 66px; height: 66px; border-radius: 50% }
.ytd-dialwrap::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: repeating-conic-gradient(from -2deg, rgba(226,205,162,.6) 0 4deg, transparent 4deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 0 28px, #000 29px 33px, transparent 33.5px);
            mask: radial-gradient(circle, transparent 0 28px, #000 29px 33px, transparent 33.5px) }
.ytd-dial { position: absolute; inset: 8px; border-radius: 50%; cursor: grab; touch-action: none; outline: none;
    background:
        repeating-conic-gradient(rgba(0,0,0,.28) 0 6deg, rgba(255,255,255,.04) 6deg 12deg),
        radial-gradient(circle at 33% 26%, #7a6448 0%, #3e3020 55%, #1a140d 100%);
    box-shadow: 0 4px 10px rgba(0,0,0,.85), inset 0 1px 1px rgba(255,255,255,.2), inset 0 -3px 6px rgba(0,0,0,.6);
    transition: transform .28s cubic-bezier(.3,1.35,.5,1) }
.ytd-dial.grab { cursor: grabbing; transition: none }
.ytd-dial::after { content: ''; position: absolute; inset: 12px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #5a4a35, #241b12); box-shadow: inset 0 1px 2px rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.6) }
.ytd-dial-mark { position: absolute; top: 4px; left: 50%; width: 4px; height: 13px; margin-left: -2px; border-radius: 2px; z-index: 1;
    background: #f1dcab; box-shadow: 0 0 6px rgba(241,220,171,.7) }
.ytd-dial:focus-visible { box-shadow: 0 0 0 3px #22d3ee, 0 4px 10px rgba(0,0,0,.85) }
.ytd-window { flex: 0 1 auto; min-width: 0; max-width: 42%; display: flex; align-items: baseline; gap: 8px; padding: 6px 11px; border-radius: 7px;
    background: linear-gradient(180deg, #06140b, #0a1f12); border: 1px solid rgba(0,0,0,.8);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06);
    color: #7dffa0; text-shadow: 0 0 8px rgba(125,255,160,.55); font: 800 13px/1.2 ui-monospace, Consolas, monospace }
.ytd-wch { flex: 0 0 auto; font-size: 17px; letter-spacing: .04em }
.ytd-wname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: inherit; font-weight: 700 }
html[dir="rtl"] .ytd-wch { letter-spacing: 0 }
.ytd-snow.soft { opacity: .45 }

.ytd-guide-h { font-size: 12px; color: #a8b0c4; margin: 0 0 8px }
.ytd-guide { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 8px; scrollbar-width: thin; scroll-snap-type: x proximity }
.ytd-gch { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px; border-radius: 999px; cursor: pointer;
    scroll-snap-align: center; font: inherit; font-size: 12.5px; font-weight: 700; color: #d6dbe7;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12) }
.ytd-gch:hover { border-color: rgba(255,255,255,.3); color: #fff }
.ytd-gch.on { color: #1a1206; background: linear-gradient(135deg, #f4d58d, #d9b96a); border-color: transparent }
.ytd-gch img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #0c0c1c }
.ytd-gno { font: 800 11px ui-monospace, Consolas, monospace; opacity: .75 }
.ytd-gname { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ytd-glive { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 7px #ef4444; animation: ytdPulse 1.6s ease-in-out infinite }
.ytd-gch:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px }
@media (max-width: 620px) {
    .ytd-dialwrap { width: 54px; height: 54px }
    .ytd-dialwrap::before { -webkit-mask: radial-gradient(circle, transparent 0 22px, #000 23px 27px, transparent 27.5px);
                                    mask: radial-gradient(circle, transparent 0 22px, #000 23px 27px, transparent 27.5px) }
    .ytd-dial { inset: 7px }
    .ytd-dial::after { inset: 10px }
    .ytd-window { max-width: 50%; padding: 5px 8px; font-size: 12px }
    .ytd-wch { font-size: 15px }
    .ytd-plate { display: none }
}
@media (prefers-reduced-motion: reduce) { .ytd-dial { transition: none } .ytd-glive { animation: none } }

/* [hidden] must win over every display rule above (the advert grid, the dots, the icon buttons) — without this the
   advert showed under a live picture and the open-on-YouTube icon stayed on advert channels. */
.ytd-ov [hidden] { display: none !important }

/* watch-hours mode on a station: the screen links to the channel's live page (7 Oct 2026) */
.ytd-ext .ytd-ico svg { display: inline-block; filter: drop-shadow(0 0 18px rgba(255,0,51,.45)) }
.ytd-extbtn { margin-top: 1.1em; color: #fff !important; background: linear-gradient(135deg, #ff3355, #cc0022); box-shadow: 0 6px 22px rgba(255,0,51,.35) }

/* the two ways to make the picture (Track Studio / online) and the «only at MIBL» list — 7 Oct 2026 */
.ytd-ways { display: flex; gap: 4%; justify-content: center; margin-top: .3em }
.ytd-way { flex: 1 1 0; min-width: 0; padding: 3.2% 3%; border-radius: 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05) }
.ytd-way:first-child { border-color: rgba(230,199,126,.6); background: rgba(230,199,126,.10) }
.ytd-way i { display: block; font-style: normal; font-size: clamp(20px, 5.6cqw, 38px); line-height: 1; margin-bottom: .2em }
.ytd-way b { display: block; font-size: clamp(13.5px, 3.5cqw, 22px); font-weight: 900; color: #fff4d6 }
.ytd-way span { display: block; font-size: clamp(10.5px, 2.2cqw, 13.5px); font-weight: 800; color: #e6c77e; margin: .2em 0 .5em }
.ytd-way p { margin: 0; font-size: clamp(11px, 2.35cqw, 14.5px); line-height: 1.6; color: #ece6f6 }
.ytd-only { list-style: none; margin: .1em auto .6em; padding: 0; max-width: 30em; text-align: start; display: grid; gap: .35em }
.ytd-only li { position: relative; padding-inline-start: 1.6em; font-size: clamp(12px, 2.7cqw, 17px); line-height: 1.5; color: #f6efdc }
.ytd-only li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: #6bff8f; font-weight: 900; text-shadow: 0 0 8px rgba(107,255,143,.6) }
.ytd-onote { margin: 0 auto; max-width: 34em; font-size: clamp(10.5px, 2.2cqw, 13px); line-height: 1.6; color: #cfc6e0 }
@container (max-width: 520px) {
    .ytd-ways { gap: 3% }
    .ytd-way { padding: 3% 2.5%; border-radius: 10px }
    .ytd-way i { font-size: 18px }
    .ytd-way p { font-size: 10.5px; line-height: 1.5 }
}