/* Kur'an TV — full-screen page (tv.php). Sizes follow the screen height, so a phone, a laptop and a 4K TV look alike. */
:root { --s: min(1vh, 0.5625vw); --gold: #f3d9a4; --txt: #fbf7ef; --dim: rgba(251, 247, 239, .72); --line: rgba(255, 255, 255, .16); --glass: rgba(8, 10, 18, .38); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #050a18; overflow: hidden; }
body { color: var(--txt); font: 400 calc(var(--s) * 1.8)/1.4 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
/* what the shared scripts add to every page stays out of sight here (their dialogs stay) */
body.tv-page > :not(#tv):not(#mp-overlay):not(#pt-loc-offer):not(#pt-loc-toast):not(script):not(style):not(link) { display: none !important; }
button { font: inherit; color: inherit; }

.tv { position: fixed; inset: 0; overflow: hidden; user-select: none; }
#tv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tv-shade { position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 22%),
        linear-gradient(0deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .2) 22%, rgba(0, 0, 0, 0) 36%),
        rgba(0, 0, 0, var(--dim-bg, 0)); }
.tv-corner { position: absolute; z-index: 3; text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 calc(var(--s) * 2.5) rgba(0, 0, 0, .3); }
.tv-tl { top: calc(var(--s) * 5); left: calc(var(--s) * 5.5); }
.tv-tr { top: calc(var(--s) * 2.8); right: calc(var(--s) * 5.5); text-align: right; }
.tv-bl { bottom: calc(var(--s) * 5); left: calc(var(--s) * 5.5); }
.tv-br { bottom: calc(var(--s) * 5); right: calc(var(--s) * 5.5); }

/* ── logo: the icon, "PrayerTime" + "Live" in a hand-written script (Caveat 600, OFL, only these letters), the domain ── */
@font-face { font-family: 'PT Live'; src: url('../assets/fonts/caveat/caveat-live.woff2') format('woff2'); font-weight: 600; font-display: block; }
.tv-brand { display: flex; align-items: center; gap: calc(var(--s) * 1.2); color: var(--txt); text-decoration: none; direction: ltr; }
.tv-logo { width: calc(var(--s) * 4.2); height: calc(var(--s) * 4.2); background: var(--gold); -webkit-mask: url('../assets/icon/mosque-moon.svg') center / contain no-repeat; mask: url('../assets/icon/mosque-moon.svg') center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); flex: none; }
.tv-brand-t { display: flex; flex-direction: column; justify-content: center; margin-top: calc(var(--s) * .33); }
.tv-brand-n { display: flex; align-items: baseline; font: 700 calc(var(--s) * 2)/1 'Space Grotesk', Inter, sans-serif; letter-spacing: -.005em; white-space: nowrap; }
.tv-brand-n b { font-weight: 700; }
.tv-brand-n i { font: 600 calc(var(--s) * 3)/0 'PT Live', 'Caveat', cursive; font-style: normal; color: var(--gold); margin-left: calc(var(--s) * .55); letter-spacing: .01em; position: relative; top: calc(var(--s) * .08); text-transform: none; }
.tv-brand-t small { display: block; font: 500 calc(var(--s) * .95)/1 Inter, sans-serif; letter-spacing: .26em; color: var(--dim); text-transform: uppercase; margin-top: calc(var(--s) * .75); opacity: .85; }

/* ── clock and dates ── */
.tv-tr { display: flex; align-items: center; gap: calc(var(--s) * 1.8); }
/* the analog clock: a thin ring and the hands, no numbers */
.tv-clock { width: calc(var(--s) * 8.6); height: calc(var(--s) * 8.6); flex: none; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }
.tv-ck-ring { fill: rgba(8, 10, 18, .12); stroke: rgba(255, 255, 255, .6); stroke-width: 2.2; }
.tv-ck-h, .tv-ck-m { stroke: var(--txt); stroke-linecap: round; }
.tv-ck-h { stroke-width: 4; }
.tv-ck-m { stroke-width: 2.6; }
.tv-ck-s { stroke: var(--gold); stroke-width: 1; stroke-linecap: round; }
.tv-ck-c { fill: var(--gold); }
.tv-hijri { font: 500 calc(var(--s) * 1.6)/1.3 Inter, sans-serif; color: var(--gold); letter-spacing: .01em; }
.tv-greg { font-size: calc(var(--s) * 1.3); color: var(--dim); margin-top: calc(var(--s) * .2); letter-spacing: .02em; }

/* ── next prayer ── */
.tv-prayer { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: calc(var(--s) * 3.2); }
.tv-np-head { grid-column: 1; grid-row: 1; }
.tv-np-cd { grid-column: 1; grid-row: 2; }
.tv-np-at { grid-column: 1; grid-row: 3; }
.tv-np-head { display: flex; align-items: center; gap: calc(var(--s) * .8); }
.tv-np-ic { width: calc(var(--s) * 2.8); height: calc(var(--s) * 2.8); background: var(--gold); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; flex: none; }
.tv-np-head small { display: block; font-size: calc(var(--s) * 1); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.tv-np-head b { display: block; font: 600 calc(var(--s) * 2)/1.15 'Space Grotesk', Inter, sans-serif; }
.tv-np-cd { font: 600 calc(var(--s) * 4.2)/1.05 'Space Grotesk', Inter, sans-serif; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: calc(var(--s) * .7); min-height: 1.05em; }
.tv-np-at { font-size: calc(var(--s) * 1.3); color: var(--dim); letter-spacing: .02em; }
.tv-times { grid-column: 2; grid-row: 2; list-style: none; margin: calc(var(--s) * .7) 0 0; padding: calc(var(--s) * .2) 0 calc(var(--s) * .2) calc(var(--s) * 3); display: flex; gap: calc(var(--s) * 1.9); border-left: 1px solid rgba(255, 255, 255, .14); }
.tv.no-cd .tv-np { display: none; }
.tv.no-cd .tv-times { grid-column: 1; grid-row: 1; border: 0; padding: 0; margin: 0; }
.tv.no-cd.no-times .tv-prayer { display: none; }
.tv-times li { display: flex; flex-direction: column; font-size: calc(var(--s) * .98); color: var(--dim); letter-spacing: .06em; }
.tv-times li b { font: 600 calc(var(--s) * 1.45)/1.3 'Space Grotesk', Inter, sans-serif; color: var(--txt); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tv-times li.on, .tv-times li.on b { color: var(--gold); }
.tv-times li.past { opacity: .55; }
.tv.no-times .tv-times { display: none; }
.tv-skel { display: inline-block; width: 4.6em; height: .8em; border-radius: .2em; background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .2), rgba(255, 255, 255, .08)); background-size: 200% 100%; animation: tvsk 1.4s linear infinite; vertical-align: middle; }
@keyframes tvsk { to { background-position: -200% 0; } }

/* ── player ── */
.tv-player { width: calc(var(--s) * 30); padding: 0; background: none; border: 0; }
.tv-pl-top { display: flex; align-items: center; gap: calc(var(--s) * 1.2); }
.tv-pl-ar { font: 400 calc(var(--s) * 2.7)/1.25 'Amiri Quran', Amiri, serif; color: var(--gold); min-width: calc(var(--s) * 6.5); text-align: center; }
.tv-pl-meta { min-width: 0; }
.tv-pl-meta b { display: block; font: 600 calc(var(--s) * 1.55)/1.25 'Space Grotesk', Inter, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-pl-meta small { display: block; font-size: calc(var(--s) * 1.12); letter-spacing: .02em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-pl-bar { height: 2px; border-radius: 99px; background: rgba(255, 255, 255, .18); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); margin: calc(var(--s) * 1.2) 0 calc(var(--s) * .9); overflow: hidden; }
.tv-pl-bar i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 99px; transition: width .6s ease; }
.tv-pl-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--s) * 1.4); }
.tv-pl-ayah { font-size: calc(var(--s) * 1.1); color: var(--dim); font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.tv-pl-btns { display: flex; align-items: center; gap: calc(var(--s) * .7); }
.tv-ib { width: calc(var(--s) * 3.2); height: calc(var(--s) * 3.2); border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s; }
.tv-ib svg { width: 44%; height: 44%; }
.tv-ib:hover, .tv-ib:focus-visible { background: rgba(255, 255, 255, .22); outline: none; }
.tv-ib-main { width: calc(var(--s) * 4.2); height: calc(var(--s) * 4.2); background: var(--gold); color: #2a1f10; }
.tv-ib-main:hover, .tv-ib-main:focus-visible { background: #fff0cf; transform: scale(1.04); }
.tv-ib-main .i-pause { display: none; }
.tv.playing .tv-ib-main .i-play { display: none; }
.tv.playing .tv-ib-main .i-pause { display: block; }
.tv-ib:focus-visible { box-shadow: 0 0 0 3px rgba(243, 217, 164, .7); }

/* ── the ayah in the middle ── */
.tv-ayah { position: absolute; z-index: 2; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(78vw, calc(var(--s) * 140)); text-align: center; pointer-events: none; transition: opacity .9s ease; text-shadow: 0 2px 4px rgba(0, 0, 0, .55), 0 0 calc(var(--s) * 4) rgba(0, 0, 0, .45); }
.tv-ayah.out { opacity: 0; }
.tv.no-ayah .tv-ayah { display: none; }
.tv-ayah-ar { font: 400 var(--ar, calc(var(--s) * 5.2))/2 'Amiri Quran', Amiri, serif; color: #fff; }
.tv-ayah-tr { font: 400 var(--tr, calc(var(--s) * 2.2))/1.5 Inter, sans-serif; color: rgba(255, 255, 255, .86); margin: calc(var(--s) * 2) auto 0; max-width: calc(var(--s) * 120); }
.tv.no-tr .tv-ayah-tr { display: none; }

/* ── a surah begins ── */
.tv-title { position: absolute; z-index: 4; left: 50%; top: 45%; transform: translate(-50%, -50%) scale(.98); text-align: center; opacity: 0; pointer-events: none; transition: opacity 1.2s ease, transform 1.2s ease; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.tv-title.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tv-title small { display: block; font-size: calc(var(--s) * 1.6); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.tv-title-ar { font: 400 calc(var(--s) * 12)/1.5 'Amiri Quran', Amiri, serif; color: #fff; }
.tv-title b { display: block; font: 700 calc(var(--s) * 4.4)/1.15 'Space Grotesk', Inter, sans-serif; }
.tv-title span { display: block; font-size: calc(var(--s) * 2); color: var(--dim); margin-top: calc(var(--s) * .8); }

/* ── a prayer time has come ── */
.tv-alert { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--s) * 2); padding: calc(var(--s) * 4) calc(var(--s) * 6); border-radius: calc(var(--s) * 3); background: rgba(8, 10, 18, .62); border: 1px solid var(--line); text-align: center; }
.tv-alert[hidden] { display: none; }
.tv-alert-ic { width: calc(var(--s) * 8); height: calc(var(--s) * 8); background: var(--gold); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.tv-alert b { font: 700 calc(var(--s) * 4)/1.2 'Space Grotesk', Inter, sans-serif; }

/* ── buttons ── */
.tv-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; height: 2.8em; padding: 0 1.4em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: var(--txt); font-weight: 600; cursor: pointer; font-size: calc(var(--s) * 1.8); }
.tv-btn:hover, .tv-btn:focus-visible { background: rgba(255, 255, 255, .18); outline: none; }
.tv-btn svg { width: 1.1em; height: 1.1em; }
.tv-btn-p { background: var(--gold); border-color: var(--gold); color: #2a1f10; }
.tv-btn-p:hover, .tv-btn-p:focus-visible { background: #fff0cf; }
.tv-btn-s { height: 2.4em; padding: 0 1.1em; font-size: calc(var(--s) * 1.5); }

.tv-tools { position: absolute; z-index: 5; top: calc(var(--s) * 4.6); left: 50%; transform: translateX(-50%); display: flex; gap: calc(var(--s) * .8); padding: calc(var(--s) * .7); border-radius: 999px; background: rgba(8, 10, 18, .5); border: 1px solid var(--line); transition: opacity .5s, transform .5s; }
.tv-tool { display: inline-flex; align-items: center; gap: .55em; height: calc(var(--s) * 3.4); padding: 0 calc(var(--s) * 1.4); border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-size: calc(var(--s) * 1.25); font-weight: 500; white-space: nowrap; }
.tv-tool svg { width: calc(var(--s) * 1.7); height: calc(var(--s) * 1.7); }
.tv-tool:hover, .tv-tool:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }
.tv-tool .i-fsx { display: none; }
.tv.fs .tv-tool .i-fs { display: none; }
.tv.fs .tv-tool .i-fsx { display: block; }
/* idle: the buttons and the mouse go away */
.tv.idle .tv-tools { opacity: 0; transform: translate(-50%, -12px); pointer-events: none; }
.tv.idle { cursor: none; }
.tv.idle .tv-pl-btns { opacity: .0; transition: opacity .6s; }
.tv.rec .tv-tools, .tv.rec .tv-pl-btns { display: none; }
.tv.rec { cursor: none; }

/* ── settings panel ── */
.tv-panel { position: absolute; z-index: 8; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: rgba(12, 14, 22, .97); border-left: 1px solid var(--line); transform: translateX(105%); transition: transform .35s ease; display: flex; flex-direction: column; font-size: 15px; text-shadow: none; cursor: auto; }
.tv-panel.on { transform: none; }
.tv-panel-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); font-size: 17px; }
.tv-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); cursor: pointer; display: grid; place-items: center; }
.tv-x svg { width: 18px; height: 18px; }
.tv-panel-b { overflow-y: auto; padding: 6px 20px 30px; }
.tv-panel h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 22px 0 10px; font-weight: 600; }
.tv-scenes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tv-scene { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; border: 2px solid transparent; cursor: pointer; overflow: hidden; display: flex; align-items: flex-end; padding: 8px 10px; font-weight: 600; font-size: 13px; text-align: left; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.tv-scene.on { border-color: var(--gold); }
.tv-scene[data-id=sky] { background: linear-gradient(180deg, #0a1433, #2a2f62 55%, #b6667a 85%, #1a1426 86%); }
.tv-scene[data-id=rain] { background: radial-gradient(circle at 30% 60%, rgba(255, 160, 80, .5), transparent 30%), radial-gradient(circle at 70% 40%, rgba(110, 170, 255, .45), transparent 28%), #121a26; }
.tv-scene[data-id=snow] { background: linear-gradient(180deg, #0a1430, #2d4570 60%, #a9bbd8 61%, #8295b8); }
.tv-scene[data-id=fire] { background: radial-gradient(ellipse at 50% 80%, #ffb347 0, #e0571c 18%, #3a1a0b 45%, #120906 75%); }
.tv-sel { width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--txt); font: 15px Inter, sans-serif; }
.tv-sel option { background: #1a1d28; }
.tv-sw { display: flex; align-items: center; gap: 12px; padding: 9px 0; cursor: pointer; }
.tv-sw input { width: 18px; height: 18px; accent-color: #e9c27f; flex: none; }
.tv-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.tv-row input { width: 160px; accent-color: #e9c27f; }
.tv-loc { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.tv-loc span { font-weight: 600; }
.tv-search { position: relative; margin-top: 10px; }
.tv-search input { width: 100%; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--txt); font: 15px Inter, sans-serif; }
.tv-search ul { list-style: none; margin: 6px 0 0; padding: 0; }
.tv-search li button { width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.tv-search li button:hover { background: rgba(255, 255, 255, .08); }
.tv-search li small { color: var(--dim); margin-left: 6px; }
.tv-hint { color: var(--dim); font-size: 13px; margin: 6px 0 0; }

/* ── start screen ── */
.tv-start { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(5, 8, 18, .35), rgba(5, 8, 18, .75)); transition: opacity .8s; }
.tv-start.out { opacity: 0; pointer-events: none; }
.tv-start-card { text-align: center; max-width: calc(var(--s) * 90); padding: calc(var(--s) * 3); }
.tv-logo-lg { display: inline-block; width: calc(var(--s) * 10); height: calc(var(--s) * 10); }
.tv-start h1 { font: 700 calc(var(--s) * 6.4)/1.1 'Space Grotesk', Inter, sans-serif; margin: calc(var(--s) * 1.5) 0 calc(var(--s) * 1.2); letter-spacing: -.02em; }
.tv-start p { font-size: calc(var(--s) * 2.1); color: var(--dim); margin: 0 auto calc(var(--s) * 4); max-width: calc(var(--s) * 70); }
.tv-start-btns { display: flex; flex-wrap: wrap; gap: calc(var(--s) * 1.5); justify-content: center; }
.tv-start .tv-btn { font-size: calc(var(--s) * 2.1); }

/* ── RTL: Arabic-script interface text in Noto Sans Arabic (as on the rest of the site); Qur'anic text keeps Amiri Quran ── */
[dir=rtl] body, [dir=rtl] .tv :not(svg):not(svg *):not(.tv-ayah-ar):not(.tv-pl-ar):not(.tv-title-ar):not(.tv-brand *) { font-family: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; letter-spacing: 0; }
[dir=rtl] .tv-np-cd, [dir=rtl] .tv-times li b { font-family: 'Space Grotesk', 'Noto Sans Arabic', sans-serif; }
[dir=rtl] .tv *:not(.tv-brand *) { text-transform: none; }

[dir=rtl] .tv-tl { left: auto; right: calc(var(--s) * 5); }
[dir=rtl] .tv-tr { right: auto; left: calc(var(--s) * 5); text-align: left; }
[dir=rtl] .tv-bl { left: auto; right: calc(var(--s) * 5); }
[dir=rtl] .tv-br { right: auto; left: calc(var(--s) * 5); }
[dir=rtl] .tv-panel { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--line); transform: translateX(-105%); }
[dir=rtl] .tv-panel.on { transform: none; }
[dir=rtl] .tv-scene, [dir=rtl] .tv-search li button { text-align: right; }

/* ── narrow screens (phone upright): the corners stack ── */
@media (max-aspect-ratio: 1/1) {
    :root { --s: min(0.85vh, 1.4vw); }
    .tv-player { width: calc(100vw - var(--s) * 10); }
    .tv-bl { bottom: calc(var(--s) * 22); }
    .tv-ayah { top: 40%; width: 88vw; }
    .tv-tools { top: auto; bottom: calc(var(--s) * 60); }
    .tv-times { gap: calc(var(--s) * 1.6); grid-column: 1; grid-row: 4; border-left: 0; padding: calc(var(--s) * 1.1) 0 0; margin-top: calc(var(--s) * 1.4); border-top: 1px solid rgba(255, 255, 255, .14); }
}
/* the translation picker */
.tv-pick { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 12px; margin: 2px 0 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); cursor: pointer; text-align: left; }
.tv-pick:hover, .tv-pick:focus-visible { border-color: rgba(243, 217, 164, .6); outline: none; }
.tv-pick > svg { width: 16px; height: 16px; flex: none; opacity: .7; }
.tv-pick-cur { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tv-pick-cur span { min-width: 0; }
.tv-pick-cur span, .tv-pick-cur small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-pick-cur small { color: var(--dim); font-size: 12px; }
.tv-pick img, .tv-trg img { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.tv-flag-none { display: inline-block; width: 20px; height: 15px; border-radius: 2px; background: rgba(255, 255, 255, .14); flex: none; }
.tv-trlist { margin: -2px 0 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.tv-trlist[hidden] { display: none; }
.tv-trlist input { width: 100%; height: 40px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--txt); font: 14px Inter, sans-serif; outline: none; }
.tv-tritems { max-height: 320px; overflow-y: auto; padding: 4px 6px 10px; }
.tv-trg { display: flex; align-items: center; gap: 10px; padding: 14px 8px 6px; }
.tv-trg b { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: .02em; }
.tv-tri { display: block; width: 100%; text-align: left; padding: 8px 10px 8px 38px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 14px; color: rgba(251, 247, 239, .88); }
.tv-tri:hover, .tv-tri:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.tv-tri.on { background: rgba(243, 217, 164, .14); color: var(--gold); font-weight: 600; }
[dir=rtl] .tv-pick, [dir=rtl] .tv-tri { text-align: right; }
[dir=rtl] .tv-tri { padding: 8px 38px 8px 10px; }
[dir=rtl] .tv-times { padding: calc(var(--s) * .2) calc(var(--s) * 3) calc(var(--s) * .2) 0; border-left: 0; border-right: 1px solid rgba(255, 255, 255, .14); }