/* ═══════════════════════════════════════════════════════════════════════════
 *  v512 · «خزانهٔ سلطنتی» — برگهٔ خانوادهٔ مدال، کاشی‌ها و مدال سربرگ صفحهٔ «سطح من»
 *  مالک (با عکس برگهٔ خانواده): «اگر بخواهی سوپر حرفه‌ای‌تر، قدرتمندتر و خیلی خفن‌تر از اینش کنی چی؟»
 *  راه‌حل: برگهٔ خانواده صحنهٔ تیرهٔ سینمایی می‌شود (رنگ تیرهٔ خانواده ← سرمه‌ای/بادمجانی تقریباً سیاه): پرتوهای طلایی،
 *  هالهٔ رنگ خانواده که نفس می‌کشد، ستاره‌ریزه‌ها، سکوی نورانی زیر مدال و رونمایی یک‌باره (باز کردن/قبلی/بعدی کامل، انتخاب
 *  تراشه سبک، رسم دوباره با دادهٔ تازه بی رونمایی). عنوان ورق‌طلا با تزئین و بازهٔ «Lv» در قرص طلایی؛ مهر «مال توست» یا
 *  مهر قفل با سکهٔ لازم + درصد + نوار پیشرفت (بی آستانه: «به Lv N برس»)؛ تراشه‌های شیشهٔ تیره با لبهٔ طلا (برچسب «تو» با تاج،
 *  حلقهٔ طلای انتخاب، قفل‌ها کم‌رنگ ولی عددشان روشن و خوانا)، دکمهٔ بستن مینای تیرهٔ خانواده با قاب طلا. کاشی‌های باز صحنهٔ
 *  تیرهٔ خانواده با لبهٔ طلا و مهر تیک طلایی (خانوادهٔ کامل)؛ کاشی فعلی قاب طلا با برق تپنده؛ مدال سربرگ هالهٔ طلایی ایستا.
 *  مدال برداری خود برنامه (جذابیت/رشد/بازی، ‎.bi‎) روی سکو می‌نشیند، بی شناوری و ستاره (انیمیشن خودش را دارد).
 *  پلاک شمارهٔ سطح: 409 (plate512 و DEFS512 در 295). نشانه‌گذاری صحنه و کلاس‌های pl/bi/nr/pk/me: 295.
 *  روانی: حرکت‌های بی‌پایان فقط transform/opacity روی عنصر HTML یا شبه‌عنصر (هاله، دو دستهٔ ستاره، شناوری مدال، حلقهٔ تراشهٔ
 *  انتخابی، برق کاشی فعلی؛ برق پلاک در 409)؛ بی backdrop-filter، بی :has، بی اسکریپت. هیچ لایهٔ بزرگی نمی‌چرخد (لایهٔ چرخانِ
 *  بزرگ‌تر از برگه در Chromium هر فریم دوباره رَستر می‌شد). پرتو و هاله روی ‎.lv-fsc::before/::after‎ (با تراشه عوض نمی‌شوند، پس
 *  انیمیشن نمی‌پرد). گوشی کوتاه (ارتفاع ≤۷۰۰px): صحنه کوچک‌تر. حالت سبک (html.lite366) و «کاهش حرکت» (296): همه ایستا، طرح ثابت کامل.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── برگه: صحنهٔ تیرهٔ خزانه؛ اندازه‌های صحنه یک‌جا (مرکز پرتو/هاله --cy از همین‌ها حساب می‌شود) ─── */
#lv306 .lv-fs{ --ray:rgba(255,212,128,.3); --pt:16px; --hh:46px; --mt:12px; --md:208px; --cy:calc(var(--pt) + var(--hh) + var(--mt) + var(--md) / 2);
  --h1:color-mix(in srgb, var(--f1) 62%, #fff); --h2:color-mix(in srgb, var(--f2) 72%, transparent); --h3:color-mix(in srgb, var(--f2) 26%, transparent) }
#lv306 .lv-fsb{ background:rgba(8,4,22,.62) }
/*  زمینه: غبار طلایی ثابت (دو ردیف بالای صحنه، ردیف دوم کم‌رنگ‌تر) + نور رنگ خانواده پشت مدال + سرمه‌ای/بادمجانی تیره */
#lv306 .lv-fs .lv-fsc{ isolation:isolate; overflow-x:hidden; padding-top:var(--pt); color:#F4E7CC;
  background:
    radial-gradient(1.3px 1.3px at 18px 22px, rgba(255,241,200,.6) 50%, transparent 52%), radial-gradient(1px 1px at 74px 61px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 121px 14px, rgba(255,226,154,.6) 50%, transparent 52%), radial-gradient(1px 1px at 152px 92px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 43px 104px, rgba(255,233,176,.6) 50%, transparent 52%), radial-gradient(.9px .9px at 98px 118px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 18px 22px, rgba(255,241,200,.28) 50%, transparent 52%), radial-gradient(1px 1px at 74px 61px, rgba(255,255,255,.28) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 121px 14px, rgba(255,226,154,.28) 50%, transparent 52%), radial-gradient(1px 1px at 152px 92px, rgba(255,255,255,.28) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 43px 104px, rgba(255,233,176,.28) 50%, transparent 52%), radial-gradient(.9px .9px at 98px 118px, rgba(255,255,255,.28) 50%, transparent 52%),
    radial-gradient(60% 27% at 50% var(--cy), color-mix(in srgb, var(--f2) 52%, transparent), transparent 72%),
    radial-gradient(130% 52% at 50% 0%, color-mix(in srgb, var(--f3) 72%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--f3) 44%, #0C0820) 0%, #0D0920 48%, #080613 100%);
  background-size:170px 132px, 170px 132px, 170px 132px, 170px 132px, 170px 132px, 170px 132px, 170px 132px, 170px 132px, 170px 132px, 170px 132px, 170px 132px, 170px 132px, auto, auto, auto;
  background-position:0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 132px, 0 132px, 0 132px, 0 132px, 0 132px, 0 132px, 0 0, 0 0, 0 0;
  background-repeat:repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat, no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,222,150,.6), inset 0 0 0 1px rgba(255,214,140,.1), 0 -20px 44px -18px rgba(6,2,20,.8) }
/*  پرتوهای طلایی ایستا، مرکز = مرکز مدال بزرگ. پهنای جعبه = پهنای برگه (بی سرریز افقی). عمداً نمی‌چرخد: لایهٔ ۴۶۰پیکسلیِ
 *  چرخان که لبه‌اش بیرون برگه است، در Chromium هر فریم دوباره رَستر می‌شد (+۲۵٪ کار رشتهٔ اصلی در برگهٔ باز). جانِ صحنه از هاله‌ای است
 *  که روی ‎::after‎ نفس می‌کشد. هر دو روی ‎.lv-fsc‎ اند که با تراشه/قبلی/بعدی عوض نمی‌شود، پس انیمیشن از نو شروع نمی‌شود. */
#lv306 .lv-fs .lv-fsc::before{ content:""; position:absolute; z-index:-1; left:0; right:0; top:calc(var(--cy) - 230px); height:460px; pointer-events:none;
  background:repeating-conic-gradient(from 4deg at 50% 50%, transparent 0deg, var(--ray) 4.5deg, transparent 9deg, transparent 22.5deg),
    repeating-conic-gradient(from 15deg at 50% 50%, transparent 0deg, color-mix(in srgb, var(--ray) 55%, transparent) 2deg, transparent 4deg, transparent 22.5deg);
  -webkit-mask:radial-gradient(230px circle at 50% 50%, #000 22%, rgba(0,0,0,.55) 50%, transparent 86%);
          mask:radial-gradient(230px circle at 50% 50%, #000 22%, rgba(0,0,0,.55) 50%, transparent 86%) }
/*  هالهٔ رنگ خانواده که نفس می‌کشد (opacity/transform)؛ مدال قفل: نقره‌ای (--h1..3 از 295) */
#lv306 .lv-fs .lv-fsc::after{ content:""; position:absolute; z-index:-1; left:50%; top:var(--cy); width:calc(var(--md) * 1.4); height:calc(var(--md) * 1.4);
  margin:calc(var(--md) * -.7) 0 0 calc(var(--md) * -.7); border-radius:50%; pointer-events:none; opacity:.8;
  background:radial-gradient(closest-side, var(--h1) 0%, var(--h2) 30%, var(--h3) 58%, transparent 100%);
  animation:rv512-halo 4.8s ease-in-out infinite }
@keyframes rv512-halo{ 0%, 100%{ opacity:.55; transform:scale(.93) } 50%{ opacity:.95; transform:scale(1.04) } }

/* ─── سربرگ: دکمه‌های شیشهٔ تیره، عنوان ورق‌طلا با تزئین، بازهٔ سطح در قرص طلایی ─── */
#lv306 .lv-fs .lv-fsh{ position:relative; z-index:2; height:var(--hh) }
#lv306 .lv-fs .lv-fsh .lv-ib{ width:38px; height:38px; border-radius:50%; color:#F9D77F;
  background:radial-gradient(circle at 50% 28%, rgba(255,255,255,.16), rgba(255,255,255,.03) 64%), rgba(16,10,36,.55);
  border:1px solid rgba(255,214,140,.42) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 8px 16px -10px rgba(0,0,0,.9) }
#lv306 .lv-fs .lv-fsh .lv-ib svg{ width:19px; height:19px }
#lv306 .lv-fs .lv-fsh .lv-ib[disabled]{ opacity:.26 }
#lv306 .lv-fs .lv-fsh .lv-ib:focus-visible, #lv306 .lv-fs .lv-fsx:focus-visible{ outline:2px solid #FFE29A; outline-offset:2px }
#lv306 .lv-fs .lv-fsh b{ display:inline-flex; align-items:center; justify-content:center; gap:8px; align-self:center; max-width:100%; white-space:nowrap;
  font-size:18.5px; line-height:1.3; letter-spacing:.1px;
  background:linear-gradient(180deg, #FFFDF2 0%, #FFE7A6 40%, #F0B444 64%, #FFE3A0 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,190,80,.26)) }
/*  تزئین دو طرف عنوان: خط محو + لوزی کوچک رو به متن */
#lv306 .lv-fs .lv-fsh b::before, #lv306 .lv-fs .lv-fsh b::after{ content:""; flex:none; width:22px; height:7px;
  background:linear-gradient(90deg, rgba(255,214,130,0), #F5C863 70%, #FFF1C4);
  clip-path:polygon(0 42%, 60% 42%, 76% 0, 100% 50%, 76% 100%, 60% 58%, 0 58%) }
#lv306[dir=rtl] .lv-fs .lv-fsh b::before, #lv306[dir=ltr] .lv-fs .lv-fsh b::after{ transform:scaleX(-1) }
/*  بازهٔ سطح: قرص طلایی کوچک (خوانا روی هر رنگ خانواده) */
#lv306 .lv-fs .lv-fsh small{ align-self:center; margin-top:2px; padding:1px 10px 2px; border-radius:99px; font-size:10.5px; font-weight:900; line-height:1.35; letter-spacing:.3px;
  color:#FFE3A1; background:linear-gradient(180deg, rgba(255,214,140,.2), rgba(255,214,140,.07)); border:1px solid rgba(255,214,140,.45);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.18) }
/*  گوشی خیلی باریک: نام بلند انگلیسی به دکمه‌ها نخورد */
@media (max-width:359px){ #lv306 .lv-fs .lv-fsh b{ font-size:16.5px } #lv306 .lv-fs .lv-fsh b::before, #lv306 .lv-fs .lv-fsh b::after{ display:none } }

/* ─── مدال بزرگ: هاله، سکو، رونمایی، شناوری ─── */
#lv306 .lv-fs .lv-fsm{ position:relative; z-index:1; isolation:isolate; width:var(--md); height:var(--md); margin:var(--mt) auto 0;
  --rv:rv512-in .72s cubic-bezier(.2,.9,.3,1) .1s both; --bob:rv512-bob 5.6s ease-in-out .9s infinite }
/*  (هالهٔ پشت مدال روی ‎.lv-fsc::after‎ بالاست — اینجا بود و با هر تراشه از نو شروع می‌شد و یک لحظه کم‌نور می‌پرید)
 *  سکوی نورانی: صفحهٔ شیشهٔ تیره با لبهٔ طلا و ضخامت؛ پلاک روی آن می‌نشیند */
#lv306 .lv-fs .lv-fsm::after{ content:""; position:absolute; z-index:-1; left:-3%; right:-3%; bottom:-31px; height:42px; border-radius:50%; pointer-events:none;
  border:1.5px solid transparent;
  background:radial-gradient(closest-side, transparent 56%, color-mix(in srgb, var(--f1) 70%, transparent) 74%, transparent 90%) padding-box,
    radial-gradient(closest-side, rgba(255,246,214,.78), color-mix(in srgb, var(--f2) 62%, transparent) 52%, transparent 100%) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--f3) 55%, #0B0719), #07050F) padding-box,
    linear-gradient(90deg, rgba(150,96,24,.5), #FFE7A3 28%, #F2C35A 50%, #FFE7A3 72%, rgba(150,96,24,.5)) border-box;
  box-shadow:0 6px 0 -1px #3A2408, 0 6px 0 0 rgba(255,214,140,.38), 0 18px 34px 4px color-mix(in srgb, var(--f2) 42%, transparent) }
/*  مدال بی‌پلاک (جایگزین پنل، مدال برداری): سکو بالاتر تا پای مدال رویش بنشیند */
#lv306 .lv-fs .lv-fsm:not(.pl)::after{ bottom:-17px }
#lv306 .lv-fs .lv-fsm.bi::after{ bottom:-4px }
/*  مدال: رونمایی یک‌باره (--rv: scale/opacity) + شناوری آرام (--bob: translate) — دو ویژگی جدا، روی هم می‌نشینند */
#lv306 .lv-fs .lv-fsm > .lv-mdo, #lv306 .lv-fs .lv-fsm > .md425{ position:relative; z-index:1; animation:var(--rv), var(--bob) }
#lv306 .lv-fs .lv-fsm.pk{ --rv:rv512-pk .46s cubic-bezier(.2,.9,.3,1) both }
#lv306 .lv-fs .lv-fsm.nr{ --rv:none }
/*  مدال قفل «خفته» است و مدال برداری خود برنامه انیمیشن خودش را دارد ← بی شناوری */
#lv306 .lv-fs .lv-fsm.lock, #lv306 .lv-fs .lv-fsm.bi{ --bob:none }
/*  مدال برداری خود برنامه (354) پایینش خالی‌تر است ← کمی پایین‌تر، روی سکو */
#lv306 .lv-fs .lv-fsm > .md425{ top:7% }
@keyframes rv512-in{ 0%{ opacity:0; scale:.55 } 55%{ opacity:1; scale:1.07 } 78%{ scale:.98 } 100%{ opacity:1; scale:1 } }
@keyframes rv512-pk{ 0%{ opacity:.35; scale:.88 } 60%{ opacity:1; scale:1.03 } 100%{ opacity:1; scale:1 } }
@keyframes rv512-bob{ 0%, 100%{ translate:0 0 } 50%{ translate:0 -5px } }
/*  درخشش رونمایی: برق سفید-طلایی + حلقهٔ طلایی که باز می‌شود (یک بار)؛ انتخاب تراشه فقط حلقه؛ رسم دوباره هیچ.
 *  پرشدگی backwards (نه both): بعد از پایان به حالت پایه (بی scale) برمی‌گردد — ‎scale(1.55)‎ ماندگار، برگه را در گوشی‌های
 *  باریک‌تر از ۴۶۵px سرریز افقی می‌داد (scrollWidth بزرگ‌تر از پهنا) */
#lv306 .lv-fs .rv-fl{ position:absolute; left:50%; top:50%; z-index:2; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,236,170,.7) 26%, color-mix(in srgb, var(--f2) 40%, transparent) 52%, transparent 74%);
  animation:rv512-fl .9s ease-out .14s backwards }
#lv306 .lv-fs .rv-fl::after{ content:""; position:absolute; inset:24%; border-radius:50%; border:2px solid rgba(255,224,150,.95); box-shadow:0 0 14px rgba(255,214,130,.8) }
/*  مدال قفل: همان رونمایی، نقره‌ای */
#lv306 .lv-fs .lv-fsm.lock > .rv-fl{ background:radial-gradient(closest-side, rgba(255,255,255,.9), rgba(214,222,240,.6) 26%, rgba(150,160,190,.28) 52%, transparent 74%) }
#lv306 .lv-fs .lv-fsm.lock > .rv-fl::after{ border-color:rgba(228,233,244,.95); box-shadow:0 0 14px rgba(206,214,234,.75) }
#lv306 .lv-fs .lv-fsm.pk > .rv-fl{ background:none; animation:rv512-fl .62s ease-out backwards }
#lv306 .lv-fs .lv-fsm.nr > .rv-fl{ display:none }
@keyframes rv512-fl{ 0%{ opacity:0; transform:scale(.25) } 22%{ opacity:1 } 100%{ opacity:0; transform:scale(1.55) } }
/*  ستاره‌ریزه‌ها: دو دسته که با نیم دور فاصله چشمک می‌زنند (opacity)؛ در حالت ایستا هر دو پیدا */
#lv306 .lv-fs .rv-sps{ position:absolute; left:50%; top:50%; z-index:3; width:320px; height:260px; margin:-130px 0 0 -160px; pointer-events:none }
#lv306 .lv-fs .rv-sp{ position:absolute; inset:0; display:block }
#lv306 .lv-fs .rv-sp > svg{ display:block; width:100%; height:100%; overflow:visible }
#lv306 .lv-fs .rv-sp.a{ opacity:.9; animation:rv512-tw 3.6s ease-in-out infinite }
#lv306 .lv-fs .rv-sp.b{ opacity:.55; animation:rv512-tw 3.6s ease-in-out -1.8s infinite }
@keyframes rv512-tw{ 0%, 100%{ opacity:0 } 16%{ opacity:1 } 30%{ opacity:.2 } 44%{ opacity:.95 } 66%{ opacity:0 } }
#lv306 .lv-fs .lv-fsm.bi > .rv-sps, #lv306 .lv-fs .lv-fsm.lock .rv-sp.b{ display:none }
/*  مدال بزرگِ قفل: صحنهٔ سردتر — پرتو و هالهٔ نقره‌ای از متغیرهای 295 (--ray، --h1..3)؛ پلاک نقره‌ای با نشان قفل (409/295)
 *  مدال قفل بی‌پلاک (جایگزین پنل، مدال برداری): نشان قفل نقره‌ای گوشهٔ بالا */
#lv306 .lv-fs .rv-lk{ position:absolute; top:4%; inset-inline-end:3%; z-index:4; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; pointer-events:none;
  color:#262B36; background:linear-gradient(180deg, #FFFFFF, #C9CFDA 55%, #8D96A6); border:1.5px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 1.5px rgba(40,46,60,.65), 0 6px 14px -4px rgba(0,0,0,.7), 0 0 16px rgba(206,214,234,.35) }
#lv306 .lv-fs .rv-lk svg{ width:17px; height:17px; stroke-width:2.6 }

/* ─── وضعیت: مهر طلایی «مال توست» / مهر قفل (سکهٔ لازم + درصد + نوار، یا «به Lv N برس») ─── */
#lv306 .lv-fs .lv-fsl{ position:relative; z-index:2; gap:7px }
#lv306 .lv-fs .lv-fsm + .lv-fsl{ margin-top:38px }
#lv306 .lv-fs .lv-fsm:not(.pl) + .lv-fsl{ margin-top:22px }
#lv306 .lv-fs .lv-fsm.bi + .lv-fsl{ margin-top:12px }
#lv306 .lv-fs .lv-fsl > b{ font-size:20px; background:linear-gradient(180deg, #FFFDF2, #FFE39A 45%, #E9A93A 66%, #FFE7AE); -webkit-background-clip:text; background-clip:text;
  color:transparent; filter:drop-shadow(0 1px 0 rgba(0,0,0,.6)) }
#lv306 .lv-fs .lv-fst{ position:relative; gap:7px; padding-block:5px; padding-inline:6px 15px; font-size:12px; font-weight:900; letter-spacing:.1px; color:#E9E1F8;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 1px 0 rgba(255,255,255,.08) }
#lv306 .lv-fs .lv-fst.ok{ color:#FFE6A4; border-color:rgba(255,210,120,.55);
  background:linear-gradient(180deg, rgba(255,205,96,.22), rgba(255,205,96,.07));
  box-shadow:0 0 20px -6px rgba(255,190,70,.6), inset 0 1px 0 rgba(255,240,200,.25) }
#lv306 .lv-fs .lv-fst svg{ flex:none; width:20px; height:20px; padding:3.5px; border-radius:50%; stroke-width:2.6 }
#lv306 .lv-fs .lv-fst.ok svg{ color:#3A2100; background:linear-gradient(180deg, #FFF0B8, #E9AE3A); box-shadow:0 0 0 1px rgba(120,70,0,.5), 0 0 10px rgba(255,200,90,.5); stroke-width:3.2 }
#lv306 .lv-fs .lv-fst:not(.ok) svg{ color:#262B36; background:linear-gradient(180deg, #FFFFFF, #C9CFDA 55%, #8D96A6); box-shadow:0 0 0 1px rgba(40,46,60,.6) }
/*  پیشرفت تا مدال قفل: قرص درصد طلایی + نوار باریک ته همان مهر */
#lv306 .lv-fs .lv-fst.pg{ padding-block:5px 11px; padding-inline-end:7px }
#lv306 .lv-fs .lv-fst > em{ font-style:normal; font-size:10.5px; font-weight:900; line-height:1.3; color:#3A2100; padding:1px 7px; border-radius:99px;
  background:linear-gradient(180deg, #FFF0B8, #E9AE3A); box-shadow:0 0 0 1px rgba(120,70,0,.45) }
#lv306 .lv-fs .lv-fst > u{ position:absolute; inset-inline:33px 12px; bottom:4px; height:4px; border-radius:4px; overflow:hidden; text-decoration:none;
  background:rgba(255,255,255,.12); box-shadow:inset 0 1px 1px rgba(0,0,0,.45) }
#lv306 .lv-fs .lv-fst > u > i{ position:absolute; top:0; bottom:0; inset-inline-start:0; border-radius:inherit; background:linear-gradient(90deg, #B87A14, #FFE29A); box-shadow:0 0 6px rgba(255,200,90,.6) }
#lv306[dir=rtl] .lv-fs .lv-fst > u > i{ background:linear-gradient(270deg, #B87A14, #FFE29A) }

/* ─── تراشه‌ها: شیشهٔ تیره با لبهٔ طلایی؛ انتخابی حلقهٔ طلا، خودم برچسب «تو» با تاج، قفل کم‌رنگ با عدد خوانا ─── */
#lv306 .lv-fs .lv-chs{ position:relative; z-index:2; gap:12px 7px; margin-top:16px }
#lv306 .lv-fs .lv-ch{ position:relative; padding:2px; border-radius:14px;
  background:radial-gradient(90% 75% at 50% 36%, color-mix(in srgb, var(--f2) 36%, transparent), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.025));
  border:1px solid rgba(255,214,140,.28) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 6px 12px -8px rgba(0,0,0,.85) }
#lv306 .lv-fs .lv-ch:focus-visible{ outline:2px solid #FFE29A; outline-offset:2px }
#lv306 .lv-fs .lv-ch.on{ border:1.5px solid transparent !important;
  background:radial-gradient(90% 75% at 50% 36%, color-mix(in srgb, var(--f2) 60%, transparent), transparent 72%) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--f3) 60%, #150D2E), #120B26) padding-box,
    linear-gradient(150deg, #FFF3C8, #F2C14E 35%, #9C6410 62%, #FFE19A) border-box;
  box-shadow:0 0 0 3px rgba(255,200,90,.14), 0 0 22px -4px color-mix(in srgb, var(--f2) 85%, transparent) }
#lv306 .lv-fs .lv-ch.on::before{ content:""; position:absolute; inset:-5px; border-radius:18px; border:1.5px solid rgba(255,214,130,.75); pointer-events:none;
  animation:rv512-ring 2.4s ease-in-out infinite }
@keyframes rv512-ring{ 0%, 100%{ opacity:.12; transform:scale(.96) } 50%{ opacity:.9; transform:scale(1.015) } }
#lv306 .lv-fs .lv-fsm.bi ~ .lv-chs .lv-ch.on::before{ animation:none; opacity:.55 }
/*  قفل: شیشهٔ کم‌رنگ؛ فقط تصویر مدال خاکستری و کم‌رنگ — پلاک نقره‌ای (409) و نشان قفل فیلتر نمی‌گیرند تا عدد خوانا بماند */
#lv306 .lv-fs .lv-ch.lock{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.13) !important; box-shadow:none }
#lv306 .lv-fs .lv-ch.lock.on{ border-color:transparent !important; background:linear-gradient(180deg, #1A1430, #120D24) padding-box, linear-gradient(150deg, #F3F5FA, #9AA3B4 45%, #E5E9F0) border-box;
  box-shadow:0 0 0 3px rgba(200,210,235,.12) }
#lv306 .lv-fs .lv-ch.lock.on::before{ border-color:rgba(214,222,240,.6) }
#lv306 .lv-fs .lv-ch.lock > .lv-mdo, #lv306 .lv-fs .lv-ch.lock > .lk{ filter:none }
#lv306 .lv-fs .lv-ch.lock > .lv-mdo > img{ filter:grayscale(1) brightness(.95) opacity(.6) }
#lv306 .lv-fs .lv-ch.lock > .md425, #lv306 .lv-fs .lv-ch.lock > .lv-mdo > .md425{ filter:grayscale(1) opacity(.72) }
#lv306 .lv-fs .lv-ch.lock > .lk{ position:absolute; top:3px; inset-inline-end:3px; z-index:4; width:17px; height:17px; border-radius:50%; display:grid; place-items:center;
  color:#262B36; background:linear-gradient(180deg, #FFFFFF, #C9CFDA 60%, #9AA3B4); box-shadow:0 0 0 1px rgba(20,24,32,.7) }
#lv306 .lv-fs .lv-ch > .lk svg{ width:10px; height:10px; stroke-width:2.6 }
/*  تراشهٔ سطح خودم: برچسب طلایی «تو» با تاج، روی لبهٔ بالا */
#lv306 .lv-fs .lv-ch > .me512{ position:absolute; top:-8px; left:50%; z-index:5; display:inline-flex; align-items:center; gap:2px; height:15px; padding:0 6px 0 5px;
  transform:translateX(-50%); border-radius:99px; font-style:normal; font-size:9px; font-weight:900; line-height:1; color:#3A2100; white-space:nowrap; pointer-events:none;
  background:linear-gradient(180deg, #FFF6D2, #F4C95A 55%, #D99A2B); box-shadow:0 0 0 1px rgba(110,62,8,.65), 0 3px 8px -2px rgba(0,0,0,.65) }
#lv306 .lv-fs .lv-ch > .me512::before{ content:""; flex:none; width:10px; height:7px; background:#4A2A00;
  clip-path:polygon(0 100%, 4% 22%, 28% 58%, 50% 0, 72% 58%, 96% 22%, 100% 100%) }

/* ─── دکمهٔ بستن: مینای تیرهٔ خانواده با قاب طلا (همان زبان پلاک؛ با مدال رقابت نمی‌کند) ─── */
#lv306 .lv-fs .lv-fsx{ position:relative; z-index:2; height:46px; margin-top:16px; border-radius:16px; font-size:15px; letter-spacing:.3px;
  color:#FFE6A4 !important; text-shadow:0 1px 0 rgba(0,0,0,.55); border:1.5px solid transparent !important;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 48%, rgba(0,0,0,.12)) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--f2) 46%, var(--f3)), color-mix(in srgb, var(--f3) 70%, #07040F)) padding-box,
    linear-gradient(150deg, #FFF3C8, #F2C14E 30%, #9C6410 55%, #FFE19A 80%, #C8902A) border-box !important;
  box-shadow:inset 0 1px 0 rgba(255,240,200,.3), 0 0 0 3px rgba(255,200,90,.08), 0 12px 22px -12px color-mix(in srgb, var(--f2) 70%, #000) }

/* ─── کاشی‌های «مدال‌های سطح»: باز = صحنهٔ تیرهٔ رنگ خانواده با لبهٔ طلا (کامل = مهر تیک طلایی)؛ فعلی = قاب طلا با برق گردان ─── */
#lv306 .lv-fm:not(.lock){ border:1px solid transparent !important;
  background:radial-gradient(90% 58% at 50% 33%, color-mix(in srgb, var(--f2) 60%, transparent), transparent 72%) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--f3) 80%, #110A26) 0%, #0F0A21 100%) padding-box,
    linear-gradient(160deg, rgba(255,230,170,.9), rgba(170,115,35,.45) 38%, rgba(255,214,140,.65) 70%, rgba(120,78,22,.5)) border-box;
  box-shadow:0 12px 20px -14px color-mix(in srgb, var(--f3) 90%, #000), inset 0 1px 0 rgba(255,255,255,.12) }
#lv306 .lv-fm:not(.lock) b{ color:#FFE7B0 }
#lv306 .lv-fmm{ margin-bottom:3px }
#lv306 .lv-fm:not(.lock) small{ color:rgba(236,226,255,.72) }
#lv306 .lv-fm:not(.lock):not(.cur)::after{ content:""; position:absolute; top:5px; inset-inline-end:5px; width:17px; height:17px; border-radius:50%; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4 4L18.5 7.5' fill='none' stroke='%233A2100' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat,
    linear-gradient(180deg, #FFF3C4, #E9AE3A);
  box-shadow:0 0 0 1px rgba(110,62,8,.6), 0 2px 6px -1px rgba(0,0,0,.55) }
#lv306 .lv-fm.cur{ isolation:isolate; overflow:hidden;
  background:linear-gradient(150deg, #FFF2C2, #E9B446 30%, #9A6310 55%, #FFE29A 80%, #C8902A);
  box-shadow:0 0 0 3px rgba(255,196,80,.2), 0 14px 24px -12px rgba(230,160,40,.75) }
/*  برق قاب: دو نقطهٔ نور ثابت روی دو گوشهٔ قاب که روشن و خاموش می‌شوند (فقط opacity). نسخهٔ چرخان، کنار SVGA همین کاشی،
 *  در Chromium هر فریم نقاشی و لایه‌بندی دوباره می‌خواست. */
#lv306 .lv-fm.cur::before{ content:""; position:absolute; left:50%; top:50%; z-index:-2; width:150px; height:150px; margin:-75px 0 0 -75px; pointer-events:none;
  background:conic-gradient(from 300deg, transparent 0 6%, rgba(255,255,255,.95) 13%, transparent 21%, transparent 50%, rgba(255,255,255,.8) 63%, transparent 71%);
  animation:rv512-rim 3.2s ease-in-out infinite }
#lv306 .lv-fm.cur::after{ content:""; position:absolute; inset:1px; z-index:-1; border-radius:14px; pointer-events:none;
  background:radial-gradient(90% 58% at 50% 33%, color-mix(in srgb, var(--f2) 62%, transparent), transparent 72%), linear-gradient(180deg, color-mix(in srgb, var(--f3) 80%, #110A26), #0F0A21) }
@keyframes rv512-rim{ 0%, 100%{ opacity:.25 } 50%{ opacity:1 } }
#lv306 .lv-fm.cur small{ color:#3A2000; font-weight:900; background:linear-gradient(180deg, #FFF0B8, #E9AE3A); box-shadow:0 0 10px -2px rgba(255,200,90,.7) }
/*  کاشی قفل: روشن و کم‌رنگ، فقط تصویر مدال خاکستری؛ پلاک نقره‌ای (409) فیلتر نمی‌گیرد تا عدد خوانا بماند */
#lv306 .lv-fm.lock .lv-fmm{ filter:none }
#lv306 .lv-fm.lock .lv-fmm > .md425, #lv306 .lv-fm.lock .lv-fmm > .lv-mdo > img, #lv306 .lv-fm.lock .lv-fmm > .lv-mdo > .md425{ filter:grayscale(.85) opacity(.5) }

/* ─── مدال سربرگ (۹۶px): هالهٔ نرم طلایی و پرتوهای ایستا پشت مدال (بی حرکت) ─── */
#lv306 .lv-bdg.md{ position:relative; isolation:isolate }
#lv306 .lv-bdg.md::before{ content:""; position:absolute; inset:-22%; z-index:-1; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,248,222,.72), rgba(255,214,140,.3) 34%, rgba(255,214,140,0) 56%),
    repeating-conic-gradient(from 6deg, rgba(255,246,214,0) 0deg, rgba(255,246,214,.38) 5deg, rgba(255,246,214,0) 10deg, rgba(255,246,214,0) 22.5deg);
  -webkit-mask:radial-gradient(closest-side, #000 30%, transparent 96%); mask:radial-gradient(closest-side, #000 30%, transparent 96%) }

/* ─── حالت سبک: همهٔ حرکت‌های بی‌پایان ایستا (طرح ثابت کامل می‌ماند)؛ مدال فقط یک پرش کوتاه ─── */
html.lite366 #lv306 .lv-fs .lv-fsc::after, html.lite366 #lv306 .lv-fs .rv-sp,
html.lite366 #lv306 .lv-fs .lv-ch.on::before, html.lite366 #lv306 .lv-fm.cur::before{ animation:none !important }
html.lite366 #lv306 .lv-fs .lv-fsm{ --bob:none !important; --rv:rv512-in .5s cubic-bezier(.2,.9,.3,1) both !important }
html.lite366 #lv306 .lv-fs .lv-fsm.pk{ --rv:rv512-pk .3s cubic-bezier(.2,.9,.3,1) both !important }
html.lite366 #lv306 .lv-fs .lv-fsm.nr{ --rv:none !important }
html.lite366 #lv306 .lv-fs .rv-fl{ display:none }
@media (prefers-reduced-motion:reduce){ #lv306 .lv-fs .rv-fl{ display:none } }

/* ─── گوشی کوتاه (آیفون SE با نوار سافاری، اندروید ۱۶:۹ با نوار نشانی، پنجرهٔ کوتاه لپ‌تاپ): صحنه جمع‌وجورتر تا دکمهٔ «بستن»
 *  بی اسکرول دیده شود؛ مرکز پرتو و هاله (--cy) از همین متغیرها خودش جابه‌جا می‌شود ─── */
@media (max-height:700px){
  #lv306 .lv-fs{ --pt:12px; --hh:42px; --mt:4px; --md:168px }
  #lv306 .lv-fs .lv-fsm::after{ bottom:-26px; height:36px }
  #lv306 .lv-fs .lv-fsm + .lv-fsl{ margin-top:30px }
  #lv306 .lv-fs .lv-fsm:not(.pl) + .lv-fsl{ margin-top:16px }
  #lv306 .lv-fs .lv-fsm.bi + .lv-fsl{ margin-top:8px }
  #lv306 .lv-fs .lv-chs{ margin-top:10px; gap:10px 6px }
  #lv306 .lv-fs .lv-fsx{ height:40px; margin-top:10px }
}