@font-face { font-family: "YekanX"; src: url("../fonts/IRANYekanXVF.woff2") format("woff2"); font-weight: 100 1000; font-display: swap; }
:root { --ac: #fb8f11; --on-ac: #170c00; --ease: cubic-bezier(.2, .8, .2, 1); color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; font-family: "YekanX", Tahoma, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; border-radius: 8px; }

.np { position: fixed; inset: 0; direction: rtl; user-select: none; -webkit-user-select: none; }
.np__video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }
.np.is-fill .np__video { object-fit: cover; }
.np__video::cue { font-family: "YekanX", Tahoma, sans-serif; background: rgba(0, 0, 0, .55); color: #fff; font-size: var(--cc, 26px); line-height: 1.5; text-shadow: 0 1px 2px #000; }
.np__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 22%, transparent 66%, rgba(0, 0, 0, .85)); transition: opacity .3s; }
.np__top, .np__bar, .np__center, .np__shade { transition: opacity .3s, transform .3s var(--ease); }
.np.is-idle .np__top, .np.is-idle .np__bar, .np.is-idle .np__center, .np.is-idle .np__shade { opacity: 0; pointer-events: none; }
.np.is-idle .np__top { transform: translateY(-10px); }
.np.is-idle .np__bar { transform: translateY(10px); }
.np.is-idle { cursor: none; }

.np__top { position: absolute; top: 0; inset-inline: 0; display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); z-index: 3; }
.np__back, .np__ib { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; transition: background .18s, color .18s; }
.np__back:hover, .np__ib:hover { background: rgba(255, 255, 255, .12); }
.np__ib.is-on { color: var(--ac); }
.np__title { flex: 1; min-width: 0; display: grid; line-height: 1.5; }
.np__title b { font-size: 1.05rem; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np__title span { font-size: .84rem; color: rgba(255, 255, 255, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.np__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(28px, 8vw, 80px); z-index: 2; pointer-events: none; }
.np__center > * { pointer-events: auto; }
.np__big { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.np__big svg { width: 30px; height: 30px; }
.np__big--play { width: 80px; height: 80px; background: var(--ac); color: var(--on-ac); box-shadow: 0 12px 40px -8px color-mix(in srgb, var(--ac) 70%, transparent); }
.np__big--play svg { width: 36px; height: 36px; }
.np .i-pause { display: none; }
.np.is-playing .i-play { display: none; }
.np.is-playing .i-pause { display: block; }
.np.is-playing .np__big--play { background: rgba(0, 0, 0, .35); color: #fff; box-shadow: none; }

.np__spin { position: absolute; top: 50%; left: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--ac); animation: npSpin .9s linear infinite; opacity: 0; pointer-events: none; z-index: 2; transition: opacity .2s; }
.np.is-wait .np__spin { opacity: 1; }
.np.is-wait .np__big--play { opacity: 0; }
@keyframes npSpin { to { transform: rotate(360deg); } }
.np__seekhint { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; padding: 10px 16px; border-radius: 99px; background: rgba(0, 0, 0, .55); font-weight: 900; font-size: 1.05rem; opacity: 0; pointer-events: none; transition: opacity .2s; }
.np__seekhint.is-on { opacity: 1; }
.np__seekhint.is-l { left: 12%; }
.np__seekhint.is-r { right: 12%; }

.np__bar { position: absolute; bottom: 0; inset-inline: 0; z-index: 3; padding: 0 max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.np__track { position: relative; height: 26px; display: flex; align-items: center; cursor: pointer; touch-action: none; direction: ltr; }
.np__track::before { content: ""; position: absolute; inset-inline: 0; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); transition: height .15s; }
.np__track:hover::before, .np__track.is-drag::before { height: 6px; }
.np__buf, .np__fill { position: absolute; left: 0; height: 4px; border-radius: 4px; transition: height .15s; }
.np__track:hover .np__buf, .np__track:hover .np__fill, .np__track.is-drag .np__fill, .np__track.is-drag .np__buf { height: 6px; }
.np__buf { background: rgba(255, 255, 255, .35); width: 0; }
.np__fill { background: var(--ac); width: 0; }
.np__knob { position: absolute; left: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ac) 30%, transparent); transform: scale(0); transition: transform .15s; }
.np__track:hover .np__knob, .np__track.is-drag .np__knob, .np__track:focus-visible .np__knob { transform: scale(1); }
.np__tip { position: absolute; bottom: 28px; padding: 3px 8px; border-radius: 7px; background: rgba(0, 0, 0, .8); font-size: .8rem; font-weight: 800; transform: translateX(-50%); opacity: 0; pointer-events: none; white-space: nowrap; }
.np__track:hover .np__tip, .np__track.is-drag .np__tip { opacity: 1; }
.np__row { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.np__volr { width: 86px; accent-color: var(--ac); direction: ltr; }
.np__time { font-size: .86rem; font-weight: 700; color: rgba(255, 255, 255, .85); direction: ltr; margin-inline: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.np__time b { color: #fff; }
.np__sp { flex: 1; }
.np__chip { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 11px; background: rgba(255, 255, 255, .14); font-weight: 800; font-size: .88rem; }
.np__chip svg { width: 18px; height: 18px; }
.np__chip:hover { background: var(--ac); color: var(--on-ac); }
@media (max-width: 640px) { .np__volr, .np__vol { display: none; } .np__time { font-size: .8rem; margin-inline: 4px; } .np__ib { width: 40px; height: 40px; } .np__big { width: 52px; height: 52px; } .np__big--play { width: 70px; height: 70px; } }

.np__menu { position: absolute; top: calc(64px + env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); z-index: 5; width: 270px; max-height: calc(100% - 140px); overflow-y: auto; padding: 14px; border-radius: 18px; background: rgba(28, 28, 28, .94); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); display: grid; gap: 8px; animation: npPop .18s var(--ease); }
.np__menu b { font-size: .82rem; color: rgba(255, 255, 255, .6); font-weight: 800; }
.np__opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.np__opts > * { flex: 1 0 auto; height: 36px; padding: 0 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-weight: 800; font-size: .84rem; display: grid; place-items: center; }
.np__opts > [aria-pressed="true"] { background: var(--ac); color: var(--on-ac); }
.np__opts > *:hover { background: rgba(255, 255, 255, .16); }
.np__opts--col { flex-direction: column; }
@keyframes npPop { from { opacity: 0; transform: translateY(-6px); } }

.np__dialog { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(360px, calc(100% - 32px)); padding: 18px; border-radius: 20px; background: rgba(28, 28, 28, .95); border: 1px solid rgba(255, 255, 255, .12); text-align: center; display: grid; gap: 12px; animation: npPop .2s var(--ease); }
.np__dialog p { margin: 0; font-weight: 700; }
.np__dialog p b { color: var(--ac); }
.np__dialog > div { display: flex; gap: 8px; }
.np__dialog--next { top: auto; bottom: calc(90px + env(safe-area-inset-bottom)); left: auto; right: max(16px, env(safe-area-inset-right)); transform: none; text-align: start; }
.np__dialog--next span { font-size: .84rem; color: rgba(255, 255, 255, .7); }
.np__dialog--next strong { font-size: 1.05rem; }
.np__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); font-weight: 900; font-size: .9rem; }
.np__btn:hover { background: rgba(255, 255, 255, .18); }
.np__btn--ac { background: var(--ac); color: var(--on-ac); }
.np__btn--ac:hover { background: var(--ac); filter: brightness(1.1); }
.np [hidden] { display: none !important; }

.np__err { position: absolute; inset: 0; z-index: 7; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; background: rgba(0, 0, 0, .86); }
.np__err.is-on { display: flex; }
.np__err b { font-size: 1.25rem; font-weight: 900; }
.np__err span { max-width: 52ch; color: rgba(255, 255, 255, .72); line-height: 1.9; }
.np__err > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.np__err > div > * { flex: none; min-width: 120px; }
.np__err a:not(.np__btn) { color: var(--ac); font-weight: 800; }
.np__toast { position: absolute; top: calc(70px + env(safe-area-inset-top)); left: 50%; z-index: 8; transform: translate(-50%, -8px); padding: 9px 16px; border-radius: 12px; background: rgba(240, 240, 240, .95); color: #111; font-weight: 800; font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; }
.np__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ───── تماشای گروهی ───── */
.np__top .np__ib { position: relative; }
.np__badge { position: absolute; top: 4px; inset-inline-end: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--ac); color: var(--on-ac); font: 800 .66rem/16px inherit; font-style: normal; text-align: center; }
.np__party { position: absolute; z-index: 9; top: calc(64px + env(safe-area-inset-top)); inset-inline-end: max(12px, env(safe-area-inset-right)); width: min(340px, calc(100% - 24px)); max-height: calc(100% - 150px); overflow-y: auto; display: grid; gap: 12px; padding: 14px; border-radius: 18px; background: rgba(18, 18, 20, .94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .1); color: #fff; }
.np__party > header { display: flex; align-items: center; justify-content: space-between; }
.np__party > header button { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.2rem; line-height: 1; }
.np__party p { color: rgba(255, 255, 255, .75); font-size: .86rem; line-height: 1.9; margin: 0 0 10px; }
.np__party [data-party-off] .np__btn { width: 100%; }
.np__pcode { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.np__pcode span { font-size: .8rem; color: rgba(255, 255, 255, .65); }
.np__pcode b { font-size: 1.3rem; letter-spacing: .25em; direction: ltr; }
.np__prow { display: flex; gap: 8px; margin-top: 10px; }
.np__pnote { margin: 10px 0 6px !important; }
.np__pmem { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.np__pmem li { padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .09); font-size: .8rem; }
.np__pmem li.is-host { background: var(--ac); color: var(--on-ac); font-weight: 800; }
.np__pmem small { opacity: .8; }
.np__pchat { max-height: 150px; min-height: 60px; overflow-y: auto; display: grid; gap: 4px; align-content: start; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .35); font-size: .84rem; }
.np__pchat p { margin: 0; color: #fff; line-height: 1.7; word-break: break-word; }
.np__pchat b { color: var(--ac); }
.np__psend { display: flex; gap: 8px; margin-top: 8px; }
.np__psend input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; }
.np__psend .np__btn { flex: none; height: 40px; }
.np.is-party [data-resume] { display: none !important; }

/* ─── زیرنویس (۲.۱۳.۱) ─── */
.np__subs { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.np__subs-top, .np__subs-bot { position: absolute; inset-inline: 4%; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; transition: bottom .2s ease; }
.np__subs-top { top: 7%; }
.np__subs-bot { bottom: 7%; }
.np:not(.is-idle) .np__subs-bot { bottom: calc(7% + 64px); }
.np__subs span { display: inline-block; max-width: 100%; padding: 1px 10px; border-radius: 6px; background: rgba(0, 0, 0, .38); color: #fff; font-family: "YekanX", Tahoma, sans-serif; font-weight: 700; font-size: var(--cc, 26px); line-height: 1.55; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000; unicode-bidi: plaintext; white-space: normal; overflow-wrap: anywhere; }
.np__subs i { font-style: italic; }
.np__subsec small { margin-inline-start: 8px; font-size: .72rem; opacity: .6; font-weight: 600; }
.np__file { display: flex; align-items: center; justify-content: center; height: 38px; margin: 6px 0 2px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .25); color: #ddd; font-size: .84rem; font-weight: 700; cursor: pointer; }
.np__file:hover { border-color: rgba(255, 255, 255, .5); color: #fff; }
[data-sync] { align-items: center; }
[data-sync] span { min-width: 44px; text-align: center; color: #fff; font-weight: 800; font-size: .85rem; direction: ltr; }
.np:not(.is-idle) .np__subs-top { top: calc(7% + 54px); }
/* ۲.۱۵.۱ · امضای فارس‌انیمه: کارتِ شیشه‌ای با لوگو، چند ثانیه‌ی اولِ پخش */
.np__credit { position: absolute; top: 7%; left: 50%; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 9px 18px 9px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(14, 14, 18, .72), rgba(28, 22, 14, .62)); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; pointer-events: none; overflow: hidden; direction: rtl; opacity: 0; visibility: hidden; transform: translate(-50%, -14px) scale(.96); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .9, .25, 1.2), visibility 0s linear .7s; font-family: "YekanX", Tahoma, sans-serif; }
.np__credit.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .9, .25, 1.2), visibility 0s; }
.np:not(.is-idle) .np__credit { top: calc(7% + 54px); }
.np__credit img { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; background: #fff; padding: 3px; flex: none; }
.np__credit-mark { width: 34px; height: 34px; border-radius: 10px; flex: none; background: radial-gradient(circle at 35% 35%, #ffd28a, #fb8f11 60%, #b85f00); }
.np__credit-tx { display: grid; line-height: 1.25; }
.np__credit-tx b { font-size: clamp(15px, 2.1vw, 22px); font-weight: 900; letter-spacing: .5px; background: linear-gradient(90deg, #fff 0%, #ffe2b3 35%, #fb8f11 55%, #fff 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: npCrBrand 3.2s ease-in-out infinite; }
.np__credit-tx small { font-size: clamp(11px, 1.3vw, 14px); font-weight: 700; color: rgba(255, 255, 255, .78); letter-spacing: 2px; }
.np__credit::after { content: ""; position: absolute; inset-inline: 18px; bottom: 5px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fb8f11, transparent); transform: scaleX(0); transform-origin: center; }
.np__credit.is-on::after { animation: npCrLine 1.2s .35s ease forwards; }
.np__credit-shine { position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-18deg); }
.np__credit.is-on .np__credit-shine { animation: npCrShine 1.6s .5s ease forwards; }
@keyframes npCrBrand { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes npCrLine { to { transform: scaleX(1); } }
@keyframes npCrShine { to { left: 130%; } }
@media (max-width: 600px) { .np__credit { gap: 8px; padding: 6px 12px 6px 10px; } .np__credit img, .np__credit-mark { width: 26px; height: 26px; border-radius: 8px; } }
@media (prefers-reduced-motion: reduce) { .np__credit, .np__credit.is-on { transition: opacity .3s; transform: translate(-50%, 0); } .np__credit-tx b { animation: none; } }
@media (max-height: 280px) { .np__credit { top: 4%; padding: 5px 10px 5px 8px; gap: 6px; } .np__credit-tx small { display: none; } .np__credit img, .np__credit-mark { width: 22px; height: 22px; } }